From 731ceb6cd2d7b2a69bbd40679cb54938d23d04be Mon Sep 17 00:00:00 2001 From: Matei Adriel Date: Tue, 4 Jun 2019 13:04:25 +0000 Subject: [PATCH] =?UTF-8?q?=20=F0=9F=8D=B3=20=20refactored=20some=20parts?= =?UTF-8?q?=20of=20the=20code=20and=20fixd=20the=20wire=20removing=20bug?= =?UTF-8?q?=20=F0=9F=93=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ts/common/component/component.ts | 39 ++++++--- src/ts/common/component/material.ts | 31 +++----- .../componentManager/componentManager.ts | 79 ++++++++++--------- src/ts/common/pin/pin.ts | 29 ++++--- src/ts/common/wires/wire.ts | 5 +- src/ts/common/wires/wireManager.ts | 11 ++- src/ts/main.ts | 11 ++- tsconfig.json | 3 +- 8 files changed, 113 insertions(+), 95 deletions(-) diff --git a/src/ts/common/component/component.ts b/src/ts/common/component/component.ts index a3a8f97..477de85 100644 --- a/src/ts/common/component/component.ts +++ b/src/ts/common/component/component.ts @@ -78,7 +78,6 @@ export class Component { }) this.material = new Material(data.material.mode, data.material.data) - this.activate() } @@ -86,7 +85,7 @@ export class Component { this.subscriptions.forEach(val => val.unsubscribe()) } - public handleMouseUp(e: MouseEvent) { + public handleMouseUp() { this.clicked = false this.clickedChanges.next(this.clicked) } @@ -126,17 +125,35 @@ export class Component { this.activate(0) } - else if (e.button === 2){ - manager.components = manager.components.filter(val => val !== this) - manager.wireManager.wires - .filter(val => val.input.of === this || val.output.of === this) - .forEach(val => val.dispose()) - manager.wireManager.update.next(true) - manager.update() + else if (e.button === 2) { + // setTimeout(() => { + console.log("removed") + manager.components = manager.components.filter(({ id }) => id !== this.id) + manager.update() + + manager.wireManager.wires + .filter(val => val.input.of.id == this.id || val.output.of.id == this.id) + .forEach(val => { + manager.wireManager.remove(val) + }) + // manager.to + + console.log("removed 1") + + manager.wireManager.update.next(true) + + console.log("removed 2") + + manager.update() + + console.log("removed 3") + console.log(manager.components) + console.log(manager.wireManager) + // }, 0) } } - handlePinClick(e: MouseEvent, pin: Pin) { + handlePinClick(pin: Pin) { Component.wireManager.add(pin) } @@ -200,7 +217,7 @@ export class Component { r=${pinScale} cx=${x} cy=${y} stroke-width=${stroke} - @click=${(e: MouseEvent) => this.handlePinClick(e, val)} + @click=${() => this.handlePinClick(val)} > `}) } diff --git a/src/ts/common/component/material.ts b/src/ts/common/component/material.ts index ac7ad1e..5ab40de 100644 --- a/src/ts/common/component/material.ts +++ b/src/ts/common/component/material.ts @@ -1,42 +1,33 @@ -import { TemplateResult, svg, SVGTemplateResult, Part } from "lit-html"; -import { Subject, BehaviorSubject } from "rxjs"; +import { svg, Part } from "lit-html"; +import { BehaviorSubject } from "rxjs"; import { materialMode } from "./interfaces"; -declare function require(path:string):T +declare function require(path: string): T -type partFactory = (part:Part) => void +type partFactory = (part: Part) => void export class Material { - private static cache = false private static images: { [key: string]: string } = { - and: require("../../../assets/and_gate.jpg"), - or: require("../../../assets/or_gate.png"), - xor: require("../../../assets/xor_gate.png") - } + and: require("../../../assets/and_gate.jpg"), + or: require("../../../assets/or_gate.png"), + xor: require("../../../assets/xor_gate.png") + } - private static cached = new Map() public color = new BehaviorSubject("rgba(0,0,0,0)") - constructor (public mode: materialMode,public name:string) { - const saved = Material.cached.get(mode + name) - - if (saved && Material.cache) - return saved - - else Material.cached.set(mode + name,this) - + constructor(public mode: string, public name: materialMode | string) { if (this.mode === "color") this.color.next(name) } - innerHTML (x: partFactory, y: partFactory, w: partFactory, h: partFactory) { + innerHTML(x: partFactory, y: partFactory, w: partFactory, h: partFactory) { return svg`
-
+ ` } } \ No newline at end of file diff --git a/src/ts/common/componentManager/componentManager.ts b/src/ts/common/componentManager/componentManager.ts index 0e4371f..4e4579c 100644 --- a/src/ts/common/componentManager/componentManager.ts +++ b/src/ts/common/componentManager/componentManager.ts @@ -102,13 +102,13 @@ export class ComponentManager { public file: { [key: string]: () => void } = { - clear: () => this.clear(), - clean: () => this.smartClear(), - save: () => this.save(), - refresh: () => this.refresh(), - download: () => download(this,[],[]), - delete: () => this.delete(this.name) - } + clear: () => this.clear(), + clean: () => this.smartClear(), + save: () => this.save(), + refresh: () => this.refresh(), + download: () => download(this, [], []), + delete: () => this.delete(this.name) + } constructor() { runCounter.increase() @@ -185,7 +185,11 @@ export class ComponentManager { } }) - this.wireManager.update.subscribe(val => this.update()) + this.wireManager.update.subscribe(() => { + // this.save() + this.update() + // this.save() + }) if (this.saves.value.length === 0) this.save() @@ -270,7 +274,7 @@ All you work will be lost!` this.refresh() } - return new Promise(async (res, rej) => {//get wheater theres already a simulation with that name + return new Promise(async (res) => {//get wheater theres already a simulation with that name if (this.store.get(name) && await this.handleDuplicateModal(name) || !this.store.get(name)) { create() @@ -341,51 +345,52 @@ All you work will be lost!` this.svgs.next(this.render()) } - handleMouseDown(e: MouseEvent) { + handleMouseDown() { this.clicked = true } - handleMouseUp(e: MouseEvent) { + handleMouseUp() { this.clicked = false } handleMouseMove(e: MouseEvent) { - let toAddOnTop: number - let outsideComponents = true + if (e.button === 0) { + let toAddOnTop: number + let outsideComponents = true - for (let i = 0; i < this.components.length; i++) { - const component = this.components[i] - if (component.clicked) { - outsideComponents = false - component.move(e) - if (this.onTop != component) { - toAddOnTop = i + for (let i = 0; i < this.components.length; i++) { + const component = this.components[i] + if (component.clicked) { + outsideComponents = false + component.move(e) + if (this.onTop != component) { + toAddOnTop = i + } } } - } - if (toAddOnTop >= 0) { - this.onTop = this.components[toAddOnTop] - this.components.push(this.onTop) - this.update() - } + if (toAddOnTop >= 0) { + this.onTop = this.components[toAddOnTop] + this.components.push(this.onTop) + this.update() + } - else if (outsideComponents && this.clicked) { - const mousePosition = [e.clientX, e.clientY] - const delta = mousePosition.map((value, index) => - this.screen.mousePosition[index] - value - ) as [number, number] - this.screen.move(...delta) + else if (outsideComponents && this.clicked) { + const mousePosition = [e.clientX, e.clientY] + const delta = mousePosition.map((value, index) => + this.screen.mousePosition[index] - value + ) as [number, number] + this.screen.move(...delta) + } } } render() { let toRemoveDuplicatesFor: Component - const size = 10 const result = this.components.map(component => { - const mouseupHandler = (e: MouseEvent) => { - component.handleMouseUp(e) + const mouseupHandler = () => { + component.handleMouseUp() toRemoveDuplicatesFor = component } @@ -433,7 +438,7 @@ All you work will be lost!` instances.pop() this.components = this.components - .filter((val, index) => instances.indexOf(index) != -1) + .filter((_, index) => instances.indexOf(index) != -1) } get state(): ManagerState { @@ -472,7 +477,7 @@ All you work will be lost!` this.update() } - save(name?: string) { + save() { for (let i = 0; i < this.commandHistory.length; i++) { const element = this.commandHistory[i]; this.commandHistoryStore.set(i.toString(), element) diff --git a/src/ts/common/pin/pin.ts b/src/ts/common/pin/pin.ts index d7ac859..b62da36 100644 --- a/src/ts/common/pin/pin.ts +++ b/src/ts/common/pin/pin.ts @@ -6,12 +6,15 @@ import { Component } from "../component"; export class Pin { private static lastId = 0 - public pair: Pin - private subscriptions: Subscription[] = [] + public pairs: Pin[] = [] + private subscriptions: { + subscription: Subscription + key: Pin + }[] = [] public id: number public _value = 0 - public color = new BehaviorSubject<[number, number, number, number]>([0, 0, 0,0]) + public color = new BehaviorSubject<[number, number, number, number]>([0, 0, 0, 0]) public memory: any = {} public valueChanges = new Subject() @@ -31,7 +34,6 @@ export class Pin { set value(value: number) { if (!this.allowWrite) return this.setValue(value) - } public setValue(value: number) { @@ -42,24 +44,27 @@ export class Pin { [255, 216, 20, 1] : [90, 90, 90, 1] - this.color.next((this.pair) ? color : [0,0,0,0]) + this.color.next((this.pairs.length) ? color : [0, 0, 0, 0]) } - public bindTo(pin: Pin){ - this.pair = pin + public bindTo(pin: Pin) { + this.pairs.push(pin) const subscription = pin.valueChanges.subscribe(val => this.setValue(val)) - this.subscriptions.push(subscription) + this.subscriptions.push({ + subscription, + key: pin + }) } public unbind(pin: Pin) { - if (this.pair == pin){ - this.pair = null - this.subscriptions.forEach(val => val.unsubscribe()) + if (this.pairs.includes(pin)) { + this.pairs = this.pairs.filter(val => val !== pin) + this.subscriptions.filter(val => val.key === pin).forEach(({ subscription }) => subscription.unsubscribe()) } } - public update(){ + public update() { this.setValue(this._value) } } \ No newline at end of file diff --git a/src/ts/common/wires/wire.ts b/src/ts/common/wires/wire.ts index dd585f7..150a92d 100644 --- a/src/ts/common/wires/wire.ts +++ b/src/ts/common/wires/wire.ts @@ -3,14 +3,15 @@ import { Pin } from "../pin"; export class Wire { constructor (public input:Pin,public output:Pin){ this.output.bindTo(this.input) - this.input.pair = this.output + this.input.pairs.push(this.output) this.input.update() this.output.update() } public dispose(){ + this.output.setValue(0) this.output.unbind(this.input) - this.input.pair = null + this.input.unbind(this.output) this.input.update() this.output.update() } diff --git a/src/ts/common/wires/wireManager.ts b/src/ts/common/wires/wireManager.ts index 4b6ded8..dc8e7a6 100644 --- a/src/ts/common/wires/wireManager.ts +++ b/src/ts/common/wires/wireManager.ts @@ -3,9 +3,8 @@ import { Pin } from "../pin"; import { Wire } from "./wire"; import { svg } from "lit-html"; import { subscribe } from "lit-rx"; -import { ComponentManager } from "../componentManager"; -import { Observable, Subject } from "rxjs"; -import { WireState, WireStateVal } from "./interface"; +import { Subject } from "rxjs"; +import { WireStateVal } from "./interface"; @Singleton export class WireManager { @@ -36,7 +35,7 @@ export class WireManager { public tryResolving() { if (this.start && this.end && this.start != this.end) { - if (this.canBind(this.start, this.end)) { + if (this.canBind(this.end)) { this.wires.push(new Wire(this.start, this.end)) this.start = null this.end = null @@ -45,13 +44,13 @@ export class WireManager { } } - private canBind(start: Pin, end: Pin) { + private canBind(end: Pin) { if (this.wires.find(val => val.output === end)) return false return true } - private remove(target: Wire) { + public remove(target: Wire) { target.dispose() this.wires = this.wires.filter(val => val !== target) this.update.next(true) diff --git a/src/ts/main.ts b/src/ts/main.ts index 74e1a78..491eca0 100644 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -1,7 +1,6 @@ -import { render, html, svg } from "lit-html" +import { render, html } from "lit-html" import { subscribe } from "lit-rx" import { Screen } from "./common/screen.ts"; -import { Component } from "./common/component"; import { ComponentManager } from "./common/componentManager"; import { map } from "rxjs/operators"; import { MDCMenu } from '@material/menu'; @@ -57,11 +56,11 @@ render(html` manager.handleMouseMove(e) screen.updateMouse(e) })} - @mousedown=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => - manager.handleMouseDown(e) + @mousedown=${(e: MouseEvent) => handleEvent(e, () => + manager.handleMouseDown() )} - @mouseup=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => - manager.handleMouseUp(e) + @mouseup=${(e: MouseEvent) => handleEvent(e, () => + manager.handleMouseUp() )} @wheel=${(e: MouseEvent) => handleEvent(e, (e: WheelEvent) => screen.handleScroll(e) diff --git a/tsconfig.json b/tsconfig.json index 1b23f77..a5ff8b7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,6 +26,7 @@ "deploy.ts" ], "exclude": [ - "node_modules" + "node_modules", + "dist" ] } \ No newline at end of file