🚉 automated update 👆

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",

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",

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{
+// .mdc-list-item__secondary-text {
-    // background: orange  !important;
+//     color: rgba(128,128,128,0.5) !important;
+//     margin-bottom: 3px;
 // }
 
 .createBar {

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()
             }
         })
@@ -177,7 +190,7 @@ export class ComponentManager {
                     else if (this.undoEvent.value) {
                         this.refresh()
                     }
-                    else if (this.refreshEvent.value){
+                    else if (this.refreshEvent.value) {
                         this.silentRefresh(true)
                     }
                 }
@@ -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"
@@ -229,13 +248,50 @@ export class ComponentManager {
         const result = await modal({
             title: "Warning",
             content: html`There was already a simulation called ${name},
-are you sure you want to override it?
+            are you sure you want to override it?
-All you work will be lost!`
+            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]
 
@@ -389,7 +445,7 @@ All you work will be lost!`
         }
     }
 
-    public silentRefresh(verboose = false){
+    public silentRefresh(verboose = false) {
         this.loadState(this.state)
         if (verboose)
             success("Succesfully reloaded all components", "", this.alertOptions)

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,

src/ts/common/componentManager/interfaces.ts

@@ -3,8 +3,8 @@ import { WireState } from "../wires/interface";
 
 export interface ManagerState {
     components: ComponentState[]
-    scale: [number,number]
+    scale: [number, number]
-    position: [number,number]
+    position: [number, number]
     wires: WireState
 }
 
@@ -19,4 +19,5 @@ export interface ComponentTemplate {
         mode: materialMode
         data: string
     }
+    editable?: boolean
 }

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>
@@ -148,21 +154,43 @@ render(html`
         <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
             ${[...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>
+                    <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()