diff --git a/buildoz.css b/buildoz.css index 6f358e7..0b5faf0 100644 --- a/buildoz.css +++ b/buildoz.css @@ -247,4 +247,12 @@ bz-graflow button.bzgf-zoom-out{ left: 5px; top: 5px; } +bz-graflow path.bzgf-wirecoat{ + pointer-events: auto; + stroke-width: 6; + stroke: #0000!important; +} +bz-graflow path.bzgf-wirecoat:hover{ + stroke: #FF08!important; +} /* BZGRAFLOW_CORE_END */ diff --git a/bzGraflow.js b/bzGraflow.js index b747440..189251c 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -39,7 +39,7 @@ class BZgraflow extends Buildoz{ static async getCoreCss(){ if(BZgraflow._coreCssPromise) return(await BZgraflow._coreCssPromise) BZgraflow._coreCssPromise = (async() => { - const res = await fetch('/app/thirdparty/buildoz/buildoz.css') + const res = await fetch('/buildoz/buildoz.css') const css = await res.text() const m = css.match(/\/\*\s*BZGRAFLOW_CORE_START\s*\*\/([\s\S]*?)\/\*\s*BZGRAFLOW_CORE_END\s*\*\//) const core = m ? m[1] : '' @@ -1012,6 +1012,11 @@ class BZgraflow extends Buildoz{ wire.setAttribute('d', path) } } + this.dispatchEvent(new CustomEvent('wiresUpdated', { + detail: { nid, orientation, LondLinkfix }, + bubbles: true, + composed: true, + })) } getLink(nid1, nid2){ @@ -1277,16 +1282,49 @@ class EditWires{ this.graflow = graflow this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container') this.state = null + this.graflow.tabIndex = 0 // Make keyboard reactive + this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) + this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this)) + this.graflow.addEventListener('keyup', this.onKeyUp.bind(this)) } - enableEditWires(){ + + enableEditWires(){ + this.graflow.wiresContainer.querySelectorAll('.bzgf-wirecoat').forEach(item => item.remove()) for(const ref in this.graflow.stagedWires ){ - this.graflow.stagedWires[ref].addEventListener('click', this.onSelectWire.bind(this)) + const clone = this.graflow.stagedWires[ref].cloneNode(true) + clone.classList.add('bzgf-wirecoat') + this.graflow.wiresContainer.appendChild(clone) + clone.addEventListener('click', this.onSelectWire.bind(this)) + if(clone.dataset.id == this.currentlySelectedWire?.dataset.id) this.onSelectWire({target: clone}) } } + onSelectWire(e){ const wire = e.target - console.log('wire', wire) + if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important') + if(wire==this.currentlySelectedWire) { + this.currentlySelectedWire = null + return + } + this.currentlySelectedWire = wire + wire.style.setProperty('stroke', '#FF0F', 'important') + } + + onKeyUp(e){ + if((e.key == 'Delete') && this.currentlySelectedWire) { + this.graflow.flow.links = this.graflow.flow.links.filter(link => link.id != this.currentlySelectedWire.dataset.id) + this.graflow.stagedWires[this.currentlySelectedWire.dataset.id].remove() + delete(this.graflow.stagedWires[this.currentlySelectedWire.dataset.id]) + this.currentlySelectedWire.remove() + this.currentlySelectedWire = null + return + } + if(e.key == 'Escape') { + if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important') + this.currentlySelectedWire = null + return + } } } diff --git a/graflow_examples/flows/testFlow1.1.json b/graflow_examples/flows/testFlow1.1.json index f3e06f7..9424d49 100644 --- a/graflow_examples/flows/testFlow1.1.json +++ b/graflow_examples/flows/testFlow1.1.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html", "flow": { "nodes":[ { "nodeType": "inc", @@ -8,7 +8,7 @@ }, { "nodeType": "inc", "subflow": { - "url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json", + "url": "/buildoz/graflow_examples/flows/testFlowEic.json", "portLinks": [ { "refNodeType": "refnodein", "refnodePort": "out1", "parentPort": "in1", diff --git a/graflow_examples/flows/testFlow1.json b/graflow_examples/flows/testFlow1.json index cdfd83a..88da112 100644 --- a/graflow_examples/flows/testFlow1.json +++ b/graflow_examples/flows/testFlow1.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html", "flow": { "nodes":[ { "nodeType": "inc", diff --git a/graflow_examples/flows/testFlow16ports.json b/graflow_examples/flows/testFlow16ports.json index e1a435a..013590d 100644 --- a/graflow_examples/flows/testFlow16ports.json +++ b/graflow_examples/flows/testFlow16ports.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodes16ports.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodes16ports.html", "flow": { "nodes": [ { diff --git a/graflow_examples/flows/testFlow2.json b/graflow_examples/flows/testFlow2.json index fc53220..6fdd385 100644 --- a/graflow_examples/flows/testFlow2.json +++ b/graflow_examples/flows/testFlow2.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest2.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest2.html", "flow": { "nodes":[ { "nodeType": "process", diff --git a/graflow_examples/flows/testFlowEic.json b/graflow_examples/flows/testFlowEic.json index 3bcfe51..1e06255 100644 --- a/graflow_examples/flows/testFlowEic.json +++ b/graflow_examples/flows/testFlowEic.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html", "flow": { "nodes":[ { "nodeType": "eicBasic", @@ -29,7 +29,7 @@ }, "data": { "a": "a3", "b":"b3"}, "subflow": { - "url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json", + "url": "/buildoz/graflow_examples/flows/testFlowICMP.json", "portLinks": [ { "refNodeType": "refnodein", "refnodePort": "out1", "parentPort": "in1", diff --git a/graflow_examples/flows/testFlowICMP.json b/graflow_examples/flows/testFlowICMP.json index 610faa3..ced9cfe 100644 --- a/graflow_examples/flows/testFlowICMP.json +++ b/graflow_examples/flows/testFlowICMP.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html", "flow": { "nodes":[ { "nodeType": "eicBasic", diff --git a/graflow_examples/flows/testFlowICMP2.json b/graflow_examples/flows/testFlowICMP2.json index b8f636e..e706311 100644 --- a/graflow_examples/flows/testFlowICMP2.json +++ b/graflow_examples/flows/testFlowICMP2.json @@ -1,5 +1,5 @@ { - "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC2.html", + "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC2.html", "flow": { "nodes":[ { "nodeType": "eicBasic", diff --git a/graflow_examples/test.html b/graflow_examples/test.html index d6f5073..69f5cf3 100644 --- a/graflow_examples/test.html +++ b/graflow_examples/test.html @@ -4,18 +4,121 @@ graflow + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleisolatedsubflowautofitwireStylealignorientednodesmove
test1P42YES2 depths
test2OrganigramYESX
test3EIC simpleNO1 depthStraightFirst
test4EIC-ICMPNOXBezierCenter
test4.5EIC-ICMP IINOOrthoParentX
test5P42YESX
test616 ports testNOX
diff --git a/graflow_examples/test1.html b/graflow_examples/test1.html index cbf6793..216fb5b 100644 --- a/graflow_examples/test1.html +++ b/graflow_examples/test1.html @@ -4,18 +4,18 @@ graflow - - - - + + + +