🚉 automated update 👆

2019-06-05 00:20:18 +00:00 · 2019-06-05 00:20:18 +00:00 · d636eef359
parent 840aa1cb9a
commit d636eef359
7 changed files with 164 additions and 15 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -106,6 +106,30 @@
            "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-0.44.1.tgz",
            "integrity": "sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg=="
        },
+        "@material/floating-label": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-2.3.0.tgz",
+            "integrity": "sha512-OYcNmf+mVzW+rphDgVkyWES+SbivA6Y2+0amVDD9E9X6hLjO+L1dtIP3rC7lp0Y2Ey9rkuRORsUoriFvN7xQQw==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/rtl": "^0.42.0",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/line-ripple": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-2.3.0.tgz",
+            "integrity": "sha512-gDjUlrM6P182ldY4CYiBMcdcUtch1DWd1osgp5STJXxth6ukRCNIdDigrKCHtyJKB8eXeNORwWs39xWZOGihbA==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/theme": "^1.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
        "@material/list": {
            "version": "2.3.0",
            "resolved": "https://registry.npmjs.org/@material/list/-/list-2.3.0.tgz",
@ -151,6 +175,20 @@
                "tslib": "^1.9.3"
            }
        },
+        "@material/notched-outline": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-2.3.0.tgz",
+            "integrity": "sha512-EDhpCGcMi1gW12qzXsdKHr6aYxa80s94tn9/G1r7eJu/BOVTYt20qjqoYQJE6i8XxcD1t5xcNdQ7StgGpk2MGA==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/floating-label": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
        "@material/ripple": {
            "version": "2.3.0",
            "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-2.3.0.tgz",
@ -177,6 +215,25 @@
                "@material/feature-targeting": "^0.44.1"
            }
        },
+        "@material/textfield": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-2.3.0.tgz",
+            "integrity": "sha512-6Tc0XZDEcU7tQgASNDNQPSxVzkmR7iO5zGynemXydYsmXzrcoisId2nyD2OWW+XBw+TUkJs93REd38Ij8l9LKw==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/dom": "^1.1.0",
+                "@material/floating-label": "^2.3.0",
+                "@material/line-ripple": "^2.3.0",
+                "@material/notched-outline": "^2.3.0",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0",
+                "tslib": "^1.9.3"
+            }
+        },
        "@material/theme": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -55,6 +55,7 @@
        "@material/drawer": "^2.3.0",
        "@material/list": "^2.3.0",
        "@material/menu": "^2.3.0",
+        "@material/textfield": "^2.3.0",
        "@material/theme": "^1.1.0",
        "file-saver": "^2.0.2",
        "lit-html": "^1.0.0",
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@ -2,10 +2,11 @@
@import "./modal.scss";

 $mdc-theme-primary: orange;
-$mdc-theme-secondary: #feeae6;
+$mdc-theme-secondary: white;
 $mdc-theme-on-primary: white;
 $mdc-theme-surface: black;
-$mdc-theme-on-secondary: #442b2d;
+$mdc-theme-on-secondary: white;
+$mdc-theme-text-secondary-on-background: white;

@import "@material/drawer/mdc-drawer.scss";
@import "@material/list/mdc-list";
@ -13,6 +14,7 @@ $mdc-theme-on-secondary: #442b2d;
@import "@material/button/mdc-button";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
+@import "@material/textfield/mdc-text-field";

 html, body {
    padding: 0;
@ -29,8 +31,9 @@ svg {
    display: block;
 }

-// .modal__btn-primary{
-    // background: orange  !important;
+// .mdc-list-item__secondary-text {
+//     color: rgba(128,128,128,0.5) !important;
+//     margin-bottom: 3px;
 // }

 .createBar {
--- a/src/ts/common/componentManager/componentManager.ts
+++ b/src/ts/common/componentManager/componentManager.ts
@ -17,9 +17,11 @@ import { download } from "./download";
 import { modal } from "../modals";
 import { map } from "rxjs/operators";
 import { persistent } from "../store/persistent";
+import { MDCTextField } from '@material/textfield';

 const defaultName = "default"

+
@Singleton
 export class ComponentManager {
    public components: Component[] = []
@ -28,12 +30,13 @@ export class ComponentManager {
    public barAlpha = new BehaviorSubject<string>("0");
    public wireManager = new WireManager()
    public onTop: Component
+    public templateStore = new ComponentTemplateStore()

    private temporaryCommnad = ""
    private clicked = false
+    private ignoreKeyDowns = false

    private screen = new Screen()
-    private templateStore = new ComponentTemplateStore()
    private settings = new Settings()
    private standard: {
        offset: number
@ -112,6 +115,16 @@ export class ComponentManager {
            refresh: () => this.silentRefresh(true)
        }

+    public shortcuts: {
+        [key:string]: string
+    } = {
+        clear: "ctrl delete",
+        clean: "delete",
+        save:"ctrl s",
+        undo: "ctrl z",
+        refresh: "ctrl r"
+    }
+
    constructor() {
        runCounter.increase()

@ -124,7 +137,7 @@ export class ComponentManager {
                const elem = document.getElementById("nameInput")
                elem.focus()
            }
-            else {
+            else if (!this.ignoreKeyDowns) {
                e.preventDefault()
            }
        })
@ -200,6 +213,12 @@ export class ComponentManager {

    }

+    public newGate(){
+        this.preInput()
+        this.inputMode = "gate"
+        this.placeholder.next("Gate name")
+    }
+
    public prepareNewSimulation() {
        this.preInput()
        this.inputMode = "create"
@ -236,6 +255,43 @@ All you work will be lost!`
        return result
    }

+    public async edit(name: string) {
+        this.ignoreKeyDowns = true
+        const gate = this.templateStore.store.get(name)
+
+        modal({
+            no: "",
+            yes: "save",
+            title: `Edit ${name}`,
+            content: html`
+                <br>
+                <div class="mdc-text-field mdc-text-field--textarea">
+                <textarea id="codeArea" class="mdc-text-field__input js" rows="8" cols="40">${
+                    gate.activation
+                }</textarea>
+                <div class="mdc-notched-outline">
+                    <div class="mdc-notched-outline__leading"></div>
+                    <div class="mdc-notched-outline__notch">
+                    <label for="textarea" class="mdc-floating-label">Activation function</label>
+                    </div>
+                    <div class="mdc-notched-outline__trailing"></div>
+                </div>
+                </div>
+            `
+        }).then(val => {
+            this.ignoreKeyDowns = false
+            const elem = <HTMLTextAreaElement> document.querySelector("#codeArea")
+            const data = elem.value
+
+            this.templateStore.store.set(name,{
+                ...gate,
+                activation: data
+            })
+        })
+
+        const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
+    }
+
    public add(template: string, position?: [number, number]) {
        const pos = position ? position : [...Array(2)].fill(this.standard.offset * this.components.length) as [number, number]

--- a/src/ts/common/componentManager/componentTemplateStore.ts
+++ b/src/ts/common/componentManager/componentTemplateStore.ts
@ -65,6 +65,8 @@ export class ComponentTemplateStore {
    }

    constructor() {
+        if (this.store.ls().length) return
+
        this.store.set("buffer", {
            inputs: 1,
            outputs: 1,
@ -141,7 +143,8 @@ export class ComponentTemplateStore {
            material: {
                mode: "standard_image",
                data: "xor"
-            }
+            },
+            editable: true
        })
        this.store.set("true", {
            inputs: 0,
--- a/src/ts/common/componentManager/interfaces.ts
+++ b/src/ts/common/componentManager/interfaces.ts
@ -19,4 +19,5 @@ export interface ComponentTemplate {
        mode: materialMode
        data: string
    }
+    editable?: boolean
 }
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@ -119,6 +119,12 @@ render(html`
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">insert_drive_file</i>
            <span class="mdc-list-item__text">File</span>
        </a>
+        <a class="mdc-list-item" href="#" id="openCustomGates" @click=${() => {
+        menus[3].open = true
+    }}>
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">edit</i>
+            <span class="mdc-list-item__text">Edit gates</span>
+        </a>
        </nav>
    </div>
    </aside>
@ -149,20 +155,42 @@ render(html`
            ${[...Object.keys(manager.file)].sort().map(key => html`
                <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.file[key]()}>
                    <span class="mdc-list-item__text">${key}</span> 
+                    ${manager.shortcuts[key] ? html`
+                        <span class="mdc-list-item__meta">&nbsp &nbsp &nbsp ${manager.shortcuts[key]}</span>
+                    ` : ""}
                </li>`
    )}
        </ul>
    </div>
+
+     <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary" id="customGateMenu">
+        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
+           ${subscribe(manager.gates.pipe(map(_ => _
+        .filter(val => manager.templateStore.store.get(val).editable)
+        .map(val => html`
+                <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.edit(val)}>
+                    <i class="material-icons mdc-list-item__graphic" aria-hidden="true">edit</i>
+                    <span class="mdc-list-item__text"> ${val} </span>
+                </li>`
+        ))))}
+            <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.newGate()}>
+                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
+                <span class="mdc-list-item__text"> New gate </span>
+            </li>
+        </ul>
+    </div>
 `, document.body)

 const menus = [
    new MDCMenu(document.querySelector('#saveMenu')),
    new MDCMenu(document.querySelector('#gateMenu')),
-    new MDCMenu(document.querySelector('#fileMenu'))
+    new MDCMenu(document.querySelector('#fileMenu')),
+    new MDCMenu(document.querySelector('#customGateMenu'))
 ]
 menus.forEach(menu => menu.hoistMenuToBody())
 menus[0].setAnchorElement(document.querySelector(`#openSimulation`))
 menus[1].setAnchorElement(document.querySelector("#openGates"))
 menus[2].setAnchorElement(document.querySelector("#openFile"))
+menus[3].setAnchorElement(document.querySelector("#openCustomGates"))

 manager.update()