prescientmoon/erratic-gate
prescientmoon/erratic-gate
1
Fork 0
Code Issues 2 Pull requests Activity

🍳 refactored some parts of the code and fixd the wire removing bug 📙

Browse source
This commit is contained in:
Matei Adriel 2019-06-04 13:04:25 +00:00
parent d7d20b2360
commit 731ceb6cd2
8 changed files with 113 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/ts/common/component/component.ts
View file

@ -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)
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)}
></circle>
`})
}

21
src/ts/common/component/material.ts
View file

@ -1,13 +1,12 @@
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<T>(path:string):T
declare function require<T>(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
} = {
@ -16,23 +15,15 @@ export class Material {
xor: require("../../../assets/xor_gate.png")
}
private static cached = new Map()
public color = new BehaviorSubject<string>("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`<foreignobject x=${x} y=${y} width=${w} height=${h}>
<div class="component-container">
<img src=${Material.images[this.name]} height="97%" width="97%" draggable=false class="component">

25
src/ts/common/componentManager/componentManager.ts
View file

@ -106,7 +106,7 @@ export class ComponentManager {
clean: () => this.smartClear(),
save: () => this.save(),
refresh: () => this.refresh(),
download: () => download(this,[],[]),
download: () => download(this, [], []),
delete: () => this.delete(this.name)
}
@ -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,15 +345,16 @@ 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) {
if (e.button === 0) {
let toAddOnTop: number
let outsideComponents = true
@ -378,14 +383,14 @@ All you work will be lost!`
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)

29
src/ts/common/pin/pin.ts
View file

@ -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<number>()
@ -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)
}
}

5
src/ts/common/wires/wire.ts
View file

@ -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()
}

11
src/ts/common/wires/wireManager.ts
View file

@ -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)

11
src/ts/main.ts
View file

@ -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)

3
tsconfig.json
View file

@ -26,6 +26,7 @@
"deploy.ts"
],
"exclude": [
"node_modules"
"node_modules",
"dist"
]
}