Merge branch 'main' of https://gitea.internike.com/nike/buildoz
This commit is contained in:
@@ -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
@@ -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
|
||||
|
||||
@@ -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.
|
||||
@@ -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",
|
||||
|
||||
@@ -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,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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user