This commit is contained in:
STEINNI
2026-03-11 22:07:45 +00:00
9 changed files with 133 additions and 37 deletions
+5
View File
@@ -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 */
+56 -9
View File
@@ -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')){
@@ -405,6 +405,10 @@ class BZgraflow extends Buildoz{
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
-14
View File
@@ -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.
+6 -6
View File
@@ -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",
+9 -1
View File
@@ -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 @@
<template>
<div class="bzgf-node" data-nodetype="eicBasic">
<div class="body">
<div class="body" {severity}>
<div class="title">{title}</div>
<div class="subtitle">{subtitle}</div>
</div>
+8
View File
@@ -8,6 +8,14 @@
position: absolute;
padding: .5em;
}
div.bzgf-node[primary] { background-color: var(--eicui-base-color-primary);}
div.bzgf-node[info] { background-color: var(--eicui-base-color-info);}
div.bzgf-node[success] { background-color: var(--eicui-base-color-success);}
div.bzgf-node[warning] { background-color: var(--eicui-base-color-warning);}
div.bzgf-node[danger] { background-color: var(--eicui-base-color-danger);}
div.bzgf-node[accent] { background-color: var(--eicui-base-color-accent);}
.bzgf-node .body{
z-index: 1;
position: absolute;
+8
View File
@@ -38,6 +38,7 @@
<th>align</th>
<th>oriented</th>
<th>nodesmove</th>
<th>editwires</th>
</tr>
</thead>
<tbody>
@@ -51,6 +52,7 @@
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test2" href="./test2.html">test2</a></td>
@@ -62,6 +64,7 @@
<td></td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test3" href="./test3.html">test3</a></td>
@@ -73,6 +76,7 @@
<td>First</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test4" href="./test4.html">test4</a></td>
@@ -84,6 +88,7 @@
<td>Center</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
@@ -95,6 +100,7 @@
<td>Parent</td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test5" href="./test5.html">test5</a></td>
@@ -106,6 +112,7 @@
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td><a target="test6" href="./test6.html">test6</a></td>
@@ -117,6 +124,7 @@
<td></td>
<td></td>
<td>X</td>
<td></td>
</tr>
</tbody>
</table>
+37 -3
View File
@@ -55,11 +55,32 @@
min-width: 800px;
min-height: 300px;
border: 1px solid #999;
padding: 1rem;
padding: 0;
position: relative;
border:2px solid #A00
}
.container::after {
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 20px;
height: 20px;
pointer-events: none;
background:
repeating-linear-gradient(
135deg,
transparent 0px,
transparent 3px,
#A00 3px,
#A00 6px
);
}
</style>
<script>
window.addEventListener('load',()=>{
const severities = ['primary', 'info', 'success', 'warning', 'danger', 'accent']
let grflw4 = document.querySelector('bz-graflow.icmp')
grflw4.addEventListener('subflowLoaded',
(evt) => { grflw4 = evt.detail.subflow }
@@ -86,14 +107,27 @@
const grfl = entry.target.querySelector('bz-graflow')
grfl.autofit()
})
ro.observe(el)
let aifmi = null; let sidx=0;
const sevanimation = () => { console.log('sevanimation')
severities.forEach(severity => aifmi.removeAttribute(severity))
aifmi.setAttribute(severities[sidx], '')
sidx++
if (sidx >= severities.length) sidx = 0
setTimeout(sevanimation, 1000)
}
grflw4.addEventListener('refreshed',() => {
aifmi = grflw4.stagedNodes['aifm-investment'].querySelector('.body')
sevanimation()
})
})
</script>
</head>
<body>
<div class="container" style="padding:0;"">
<div class="container">
<bz-graflow class="icmp" flow="./flows/testFlowICMP.json" tension="60">
<div class="demooptions">
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
+1 -1
View File
@@ -76,7 +76,7 @@
</head>
<body>
<bz-graflow class="compunet" flow="./flows/testFlow1.json" tension="60" isolated edit="nodesmove,wires,dropnodes" >
<bz-graflow class="compunet" flow="./flows/testFlow1.json" tension="60" isolated edit="nodesmove,editwires,dropnodes" >
<div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button>