From d636eef359b86de3dc73d29239859e461261448b Mon Sep 17 00:00:00 2001 From: Matei Adriel Date: Wed, 5 Jun 2019 00:20:18 +0000 Subject: [PATCH] =?UTF-8?q?=20=F0=9F=9A=89=20=20automated=20update=20?= =?UTF-8?q?=F0=9F=91=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 57 ++++++++++++++++ package.json | 1 + src/scss/base.scss | 11 +-- .../componentManager/componentManager.ts | 68 +++++++++++++++++-- .../componentTemplateStore.ts | 5 +- src/ts/common/componentManager/interfaces.ts | 5 +- src/ts/main.ts | 32 ++++++++- 7 files changed, 164 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0329383..450faa4 100644 --- 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", diff --git a/package.json b/package.json index 3ce9a4f..8ca936d 100644 --- 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", diff --git a/src/scss/base.scss b/src/scss/base.scss index 8b88186..8e9a139 100644 --- 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 { diff --git a/src/ts/common/componentManager/componentManager.ts b/src/ts/common/componentManager/componentManager.ts index bf62ca6..bbdd47d 100644 --- 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("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? -All you work will be lost!` + are you sure you want to override it? + 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` +
+
+ +
+
+
+ +
+
+
+
+ ` + }).then(val => { + this.ignoreKeyDowns = false + const elem = 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) diff --git a/src/ts/common/componentManager/componentTemplateStore.ts b/src/ts/common/componentManager/componentTemplateStore.ts index a3ae322..a788608 100644 --- 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, diff --git a/src/ts/common/componentManager/interfaces.ts b/src/ts/common/componentManager/interfaces.ts index 990e9c5..96fb1e4 100644 --- a/src/ts/common/componentManager/interfaces.ts +++ b/src/ts/common/componentManager/interfaces.ts @@ -3,8 +3,8 @@ import { WireState } from "../wires/interface"; export interface ManagerState { components: ComponentState[] - scale: [number,number] - position: [number,number] + scale: [number, number] + position: [number, number] wires: WireState } @@ -19,4 +19,5 @@ export interface ComponentTemplate { mode: materialMode data: string } + editable?: boolean } \ No newline at end of file diff --git a/src/ts/main.ts b/src/ts/main.ts index fc18acd..0db3772 100644 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -119,6 +119,12 @@ render(html` File + { + menus[3].open = true + }}> + + Edit gates + @@ -148,21 +154,43 @@ render(html` + +
+ +
`, 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() \ No newline at end of file