From 6204049a01b27b50b6cda71a8a0f0528fb907787 Mon Sep 17 00:00:00 2001 From: Matei Adriel <rafaeladriel11@gmail.com> Date: Wed, 5 Jun 2019 01:26:04 +0000 Subject: [PATCH] =?UTF-8?q?=20=F0=9F=98=99=20=20uh,=20i=20only=20have=202.?= =?UTF-8?q?5h=20of=20sleep=20left=20=F0=9F=93=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../componentManager/componentManager.ts | 107 +++++++++++++----- .../componentTemplateStore.ts | 28 +---- src/ts/main.ts | 26 +++-- 3 files changed, 96 insertions(+), 65 deletions(-) diff --git a/src/ts/common/componentManager/componentManager.ts b/src/ts/common/componentManager/componentManager.ts index bbdd47d..81f1712 100644 --- a/src/ts/common/componentManager/componentManager.ts +++ b/src/ts/common/componentManager/componentManager.ts @@ -4,7 +4,7 @@ import { Subject, BehaviorSubject, fromEvent } from "rxjs"; import { svg, SVGTemplateResult, html } from "lit-html"; import { subscribe } from "lit-rx"; import { Screen } from "../screen.ts"; -import { ManagerState } from "./interfaces"; +import { ManagerState, ComponentTemplate } from "./interfaces"; import { Store } from "../store"; import { KeyboardInput } from "@eix/input" import { success, error } from "toastr" @@ -116,14 +116,14 @@ export class ComponentManager { } public shortcuts: { - [key:string]: string + [key: string]: string } = { - clear: "ctrl delete", - clean: "delete", - save:"ctrl s", - undo: "ctrl z", - refresh: "ctrl r" - } + clear: "shift delete", + clean: "delete", + save: "ctrl s", + undo: "ctrl z", + refresh: "ctrl r" + } constructor() { runCounter.increase() @@ -213,7 +213,26 @@ export class ComponentManager { } - public newGate(){ + private initEmptyGate(name: string) { + const obj: ComponentTemplate = { + inputs: 1, + name, + version: "1.0.0", + outputs: 1, + activation: "", + editable: true, + material: { + mode: "color", + data: "blue" + } + } + + this.templateStore.store.set(name, obj) + + this.edit(name) + } + + public newGate() { this.preInput() this.inputMode = "gate" this.placeholder.next("Gate name") @@ -235,13 +254,16 @@ export class ComponentManager { const elem = <HTMLInputElement>document.getElementById("nameInput") this.barAlpha.next("0") - if (this.inputMode == "create") { + if (this.inputMode === "create") { await this.createEmptySimulation(elem.value) success(`Succesfully created simulation ${elem.value}`, "", this.alertOptions) } - else if (this.inputMode == "command") + else if (this.inputMode === "command") this.eval(elem.value) + + else if (this.inputMode === "gate") + this.initEmptyGate(elem.value) } private async handleDuplicateModal(name: string) { @@ -249,7 +271,7 @@ export class ComponentManager { title: "Warning", content: html`There was already a simulation called ${name}, are you sure you want to override it? - All you work will be lost!` + All your work will be lost!` }) return result @@ -263,33 +285,62 @@ export class ComponentManager { no: "", yes: "save", title: `Edit ${name}`, - content: html` + content: html`${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 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 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 class="mdc-notched-outline__trailing"></div> - </div> - </div> - ` + </div><br><br> + <div class="mdc-text-field" id="inputCount"> + <input type="number" id="my-text-field" class="mdc-text-field__input inputCount-i" value=${gate.inputs}> + <label class="mdc-floating-label" for="my-text-field">Inputs</label> + <div class="mdc-line-ripple"></div> + </div><br><br> + <div class="mdc-text-field" id="outputCount"> + <input type="number" id="my-text-field" class="mdc-text-field__input outputCount-i" value=${gate.outputs}> + <label class="mdc-floating-label" for="my-text-field">Outputs</label> + <div class="mdc-line-ripple"></div> + </div><br><br> + <div class="mdc-text-field" id="color"> + <input type="string" id="my-text-field" class="mdc-text-field__input color-i" value=${gate.material.data}> + <label class="mdc-floating-label" for="my-text-field">Outputs</label> + <div class="mdc-line-ripple"></div> + </div><br> + `}` }).then(val => { this.ignoreKeyDowns = false - const elem = <HTMLTextAreaElement> document.querySelector("#codeArea") - const data = elem.value + const elems: (HTMLInputElement | HTMLTextAreaElement)[] = [ + document.querySelector("#codeArea"), + document.querySelector(".inputCount-i"), + document.querySelector(".outputCount-i"), + document.querySelector(".color-i") + ] + const data = elems.map(val => val.value) - this.templateStore.store.set(name,{ + this.templateStore.store.set(name, { ...gate, - activation: data + activation: data[0], + inputs: Number(data[1]), + outputs: Number(data[2]), + material:{ + mode: "color", + data: data[3] + } }) }) - const textField = new MDCTextField(document.querySelector('.mdc-text-field')); + new MDCTextField(document.querySelector('.mdc-text-field')); + new MDCTextField(document.querySelector('#outputCount')); + new MDCTextField(document.querySelector('#inputCount')); + new MDCTextField(document.querySelector('#color')); } public add(template: string, position?: [number, number]) { diff --git a/src/ts/common/componentManager/componentTemplateStore.ts b/src/ts/common/componentManager/componentTemplateStore.ts index a788608..4a51263 100644 --- a/src/ts/common/componentManager/componentTemplateStore.ts +++ b/src/ts/common/componentManager/componentTemplateStore.ts @@ -144,33 +144,7 @@ export class ComponentTemplateStore { mode: "standard_image", data: "xor" }, - editable: true - }) - this.store.set("true", { - inputs: 0, - outputs: 1, - name: "true", - version: "1.0.0", - activation: ` - ctx.outputs[0].value = true - `.trim(), - material: { - mode: "color", - data: "green" - } - }) - this.store.set("false", { - inputs: 0, - outputs: 1, - name: "false", - version: "1.0.0", - activation: ` - ctx.outputs[0].value = false - `.trim(), - material: { - mode: "color", - data: "yellow" - } + editable: false }) this.store.set("light", { inputs: 1, diff --git a/src/ts/main.ts b/src/ts/main.ts index 0db3772..8fdafa2 100644 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -107,23 +107,23 @@ render(html` <i class="material-icons mdc-list-item__graphic" aria-hidden="true">folder_open</i> <span class="mdc-list-item__text">Open simulation</span> </a> - <a class="mdc-list-item" href="#" id="openGates" @click=${() => { - menus[1].open = true - }}> - <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i> - <span class="mdc-list-item__text">Add logic gate</span> - </a> <a class="mdc-list-item" href="#" id="openFile" @click=${() => { menus[2].open = true }}> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">insert_drive_file</i> - <span class="mdc-list-item__text">File</span> + <span class="mdc-list-item__text">Simulation</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> + <span class="mdc-list-item__text">Custom gates</span> + </a> + <a class="mdc-list-item" href="#" id="openGates" @click=${() => { + menus[1].open = true + }}> + <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i> + <span class="mdc-list-item__text">Add component</span> </a> </nav> </div> @@ -142,9 +142,15 @@ render(html` <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary" id="gateMenu"> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1"> - ${subscribe(manager.gates.pipe(map(_ => _.map(val => html` + ${subscribe(manager.gates.pipe(map(_ => [..._].sort().map(val => html` <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.add(val)}> <span class="mdc-list-item__text"> ${val} </span> + ${(manager.templateStore.store.get(val).editable ? + html`      <span class="material-icons mdc-list-item__meta" @click=${ + () => manager.templateStore.store.delete(val) + }> delete </span>` : + "" + )} </li>` ))))} </ul> @@ -175,7 +181,7 @@ render(html` ))))} <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> + <span class="mdc-list-item__text"> New custom gate </span> </li> </ul> </div>