diff --git a/buildoz.css b/buildoz.css index 0b5faf0..90db086 100644 --- a/buildoz.css +++ b/buildoz.css @@ -255,4 +255,9 @@ bz-graflow path.bzgf-wirecoat{ bz-graflow path.bzgf-wirecoat:hover{ stroke: #FF08!important; } +bz-graflow .bzgf-nodes-container .port.selectable:hover{ + border: 5px solid #FF08!important; + cursor: pointer; +} + /* BZGRAFLOW_CORE_END */ diff --git a/bzGraflow.js b/bzGraflow.js index 30c616b..616af67 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -91,7 +91,7 @@ class BZgraflow extends Buildoz{ if(edit.includes('nodesmove')){ this.nodesMover = new MovingNodes(this, '.bzgf-node') } - if(edit.includes('wires')){ + if(edit.includes('editwires')){ this.WiresEditor = new EditWires(this, '.bzgf-wire') } if(edit.includes('dropnodes')){ @@ -402,9 +402,13 @@ class BZgraflow extends Buildoz{ return(this.stagedNodes[nid]) } - addWire(link){ + addWire(link){ const [idNode1, idPort1] = link.from const [idNode2, idPort2] = link.to + if(this.getLink(idNode1,idNode2)) { + console.warn('Current version of graflow does not allow multiple wires between same nodes',this.getLink(idNode1,idNode2),idNode1,idNode2) + return + } const path = this.linkNodes(idNode1, idPort1, idNode2, idPort2) const id = `${idNode1}_${idNode2}` this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path') @@ -414,6 +418,7 @@ class BZgraflow extends Buildoz{ if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)') this.stagedWires[id].classList.add('bzgf-wire') this.stagedWires[id].dataset.id = id + this.stagedWires[id].link = link this.wiresContainer.append(this.stagedWires[id]) if(!this.flow.links.find(l => l.from[0] === idNode1 && l.from[1] === idPort1 && l.to[0] === idNode2 && l.to[1] === idPort2)) { this.flow.links.push(link) @@ -422,6 +427,8 @@ class BZgraflow extends Buildoz{ } clear(){ + this.stagedNodes = {} + this.stagedWires = {} this.nodesContainer.innerHTML = '' this.wiresContainer.innerHTML = '' if(this.arrowDefs) this.wiresContainer.appendChild(this.arrowDefs) @@ -1022,12 +1029,9 @@ class BZgraflow extends Buildoz{ } getLink(nid1, nid2){ - let lnk = null - lnk = this.flow.links.find(item => ((item.from[0]==nid1) && (item.to[0]==nid2))) - if(!lnk) { - lnk = this._virtualLinks?.get(`${nid1}__${nid2}`) - } - return(lnk) + const wire = this.stagedWires[`${nid1}_${nid2}`] + if(wire?.link) return wire.link + return this._virtualLinks?.get(`${nid1}__${nid2}`) ?? null } buildGraphStructures(nodes, links, includeLinkIndexes = false) { @@ -1186,6 +1190,7 @@ class MovingNodes{ this.state = null this.interactiveElementsSelector = ` + .port, input, textarea, select, @@ -1198,7 +1203,8 @@ class MovingNodes{ enableMovingNodes() { if(!this._handleCursorStyle){ const style = document.createElement('style') - style.textContent = `${this.handleSelector}{ cursor: move }` + const selector = `${this.handleSelector}:not(${this.interactiveElementsSelector.replace(/\s+/g, ' ').trim()})` + style.textContent = `${selector}{ cursor: move }` this.nodesContainer.appendChild(style) this._handleCursorStyle = style } @@ -1287,6 +1293,7 @@ class EditWires{ this.graflow.tabIndex = 0 // Make keyboard reactive this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) + this.graflow.addEventListener('refreshed', this.enableSelectPorts.bind(this)) this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this)) this.graflow.addEventListener('keyup', this.onKeyUp.bind(this)) } @@ -1302,9 +1309,49 @@ class EditWires{ } } + enableSelectPorts(){ + const portEls = this.graflow.nodesContainer.querySelectorAll('.port') + for(const port of portEls){ + port.addEventListener('click', this.onSelectPort.bind(this)) + port.classList.add('selectable') + } + } + + onSelectPort(e){ + const port = e.target + if(this.currentlySelectedPort == port) { + this.currentlySelectedPort.style.removeProperty('border') + this.currentlySelectedPort = null + return + } + if(this.currentlySelectedPort) { + this.makeWireBetweenPorts(this.currentlySelectedPort, port) + this.enableEditWires() + this.currentlySelectedPort.style.removeProperty('border') + this.currentlySelectedPort = null + } else { + this.currentlySelectedPort = port + port.style.setProperty('border', '5px solid #FF0', 'important') + } + } + + makeWireBetweenPorts(port1, port2){ + const node1 = port1.closest('.bzgf-node') + const node2 = port2.closest('.bzgf-node') + const idNode1 = node1.dataset.id + const idNode2 = node2.dataset.id + const idPort1 = port1.dataset.id + const idPort2 = port2.dataset.id + if(!node1 || !node2 || !port1 || !port2) { + console.warn('Link on bad node / port ', idNode1, idPort1, idNode2, idPort2) + return('') + } + this.graflow.addWire({ from: [idNode1, idPort1], to: [idNode2, idPort2] }) + } + onSelectWire(e){ const wire = e.target - if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important') + if(this.currentlySelectedWire) this.currentlySelectedWire.style.removeProperty('stroke') //this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important') if(wire==this.currentlySelectedWire) { this.currentlySelectedWire = null return diff --git a/git-cheat-sheet.txt b/git-cheat-sheet.txt deleted file mode 100644 index 0139006..0000000 --- a/git-cheat-sheet.txt +++ /dev/null @@ -1,14 +0,0 @@ -workflow quotidien - -Modifier buildoz: - -cd app/thirdparty/buildoz -git commit -git push - -Puis dans P42: - -git add app/thirdparty/buildoz -git commit -m "update buildoz" - -Car P42 stocke la référence du commit buildoz. \ No newline at end of file diff --git a/graflow_examples/flows/testFlowICMP.json b/graflow_examples/flows/testFlowICMP.json index 942d964..9aafab9 100644 --- a/graflow_examples/flows/testFlowICMP.json +++ b/graflow_examples/flows/testFlowICMP.json @@ -7,7 +7,7 @@ "markup": { "title": "Evaluations", "subtitle": "...", - "severity": "secondary" + "severity": "info" }, "data": { "node": "eval", "nodeId":null} }, @@ -17,7 +17,7 @@ "markup": { "title": "GAP", "subtitle": "...", - "severity": "secondary" + "severity": "accent" }, "data": { "a": "a2", "b":"b2"} }, @@ -27,7 +27,7 @@ "markup": { "title": "CID", "subtitle": "...", - "severity": "secondary" + "severity": "primary" }, "data": { "a": "a3", "b":"b3"} }, @@ -37,7 +37,7 @@ "markup": { "title": "Case Allocation", "subtitle": "...", - "severity": "secondary" + "severity": "success" }, "data": { "track": "equity" @@ -49,7 +49,7 @@ "markup": { "title": "Grant Signature", "subtitle": "...", - "severity": "secondary" + "severity": "danger" }, "data": { "track": "grant" @@ -123,7 +123,7 @@ "markup": { "title": "Investment Agreement", "subtitle": "...", - "severity": "secondary" + "severity": "warning" }, "data": { "track": "equity", diff --git a/graflow_examples/nodesLib/nodesEIC.html b/graflow_examples/nodesLib/nodesEIC.html index ea17fc3..09c3411 100644 --- a/graflow_examples/nodesLib/nodesEIC.html +++ b/graflow_examples/nodesLib/nodesEIC.html @@ -8,6 +8,14 @@ position: absolute; padding: .5em; } + + div.bzgf-node div.body[primary] { background-color: var(--eicui-base-color-primary); color:white;} + div.bzgf-node div.body[info] { background-color: var(--eicui-base-color-info); color:white;} + div.bzgf-node div.body[success] { background-color: var(--eicui-base-color-success); color:white;} + div.bzgf-node div.body[warning] { background-color: var(--eicui-base-color-warning);} + div.bzgf-node div.body[danger] { background-color: var(--eicui-base-color-danger);} + div.bzgf-node div.body[accent] { background-color: var(--eicui-base-color-accent);} + .bzgf-node .body{ z-index: 1; position: absolute; @@ -68,7 +76,7 @@