P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: autoplace attributes & better ICMP example

Browse Source
This commit is contained in:
STEINNI
2026-03-02 19:07:06 +00:00
parent f5fbdd6ccd
commit e46ff1a817
5 changed files with 56 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/bzGraflow/nodesEIC2.html
+20
View File
@@ -57,8 +57,28 @@
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{ background: var(--eicui-base-color-grey-25); } .bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{ background: var(--eicui-base-color-grey-25); }
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; } .bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
path.arrow-head{ fill: var(--eicui-base-color-info); }
</style> </style>
<svg style="display:none" aria-hidden="true">
<template id="svg-arrows">
<defs>
<marker id="arrow"
viewBox="0 0 16 16"
refX="16"
refY="8"
markerWidth="16"
markerHeight="16"
orient="auto-start-reverse"
markerUnits="userSpaceOnUse">
<path d="M0,0 L16,8 L0,16 Z" class="arrow-head"/>
</marker>
</defs>
</template>
</svg>
<template> <template>
<div class="bzgf-node" data-nodetype="eicBasic"> <div class="bzgf-node" data-nodetype="eicBasic">
<div class="body"> <div class="body">
app/assets/html/bzGraflow/nodesTest2.html
+14 -14
View File
@@ -158,20 +158,20 @@
</style> </style>
<svg style="display:none" aria-hidden="true"> <svg style="display:none" aria-hidden="true">
<template id="svg-arrows"> <template id="svg-arrows">
<defs> <defs>
<marker id="arrow" <marker id="arrow"
viewBox="0 0 10 10" viewBox="0 0 10 10"
refX="10" refX="10"
refY="5" refY="5"
markerWidth="10" markerWidth="10"
markerHeight="10" markerHeight="10"
orient="auto-start-reverse" orient="auto-start-reverse"
markerUnits="userSpaceOnUse"> markerUnits="userSpaceOnUse">
<path d="M0,0 L10,5 L0,10 Z" fill="#FF0"/> <path d="M0,0 L10,5 L0,10 Z" fill="#FF0"/>
</marker> </marker>
</defs> </defs>
</template> </template>
</svg> </svg>
<template> <template>
app/assets/html/test4.5.html
+1 -1
View File
@@ -76,7 +76,7 @@
</head> </head>
<body> <body>
<bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP2.json" tension="60"> <bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP2.json" tension="60" align="first" wiretype="ortho" gapx="100" gapy="30">
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button> <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace4V">Auto-place Vertical</button> <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
app/assets/json/bzGraflow/testFlowICMP2.json
+12 -12
View File
@@ -132,19 +132,19 @@
} }
], ],
"links": [ "links": [
{ "from": ["eval", "out1"], "to": ["gap", "in1"] }, { "from": ["eval", "out1"], "to": ["gap", "in1"] , "endArrow":true},
{ "from": ["eval", "out1"], "to": ["cid", "in1"] }, { "from": ["eval", "out1"], "to": ["cid", "in1"] , "endArrow":true},
{ "from": ["eval", "out1"], "to": ["allocation", "in1"] }, { "from": ["eval", "out1"], "to": ["allocation", "in1"] , "endArrow":true},
{ "from": ["gap", "out1"], "to": ["signature", "in1"] }, { "from": ["gap", "out1"], "to": ["signature", "in1"] , "endArrow":true},
{ "from": ["signature", "out1"], "to": ["progress-meeting", "in1"] }, { "from": ["signature", "out1"], "to": ["progress-meeting", "in1"] , "endArrow":true},
{ "from": ["cid", "out1"], "to": ["techdd", "in1"] }, { "from": ["cid", "out1"], "to": ["techdd", "in1"] , "endArrow":true, "startArrow":true},
{ "from": ["allocation", "out1"], "to": ["techdd", "in1"] }, { "from": ["allocation", "out1"], "to": ["techdd", "in1"] , "endArrow":true, "startArrow":true},
{ "from": ["allocation", "out1"], "to": ["kyc", "in1"] }, { "from": ["allocation", "out1"], "to": ["kyc", "in1"] , "endArrow":true, "startArrow":true},
{ "from": ["techdd", "out1"], "to": ["aifm-advisory", "in1"] }, { "from": ["techdd", "out1"], "to": ["aifm-advisory", "in1"] },
{ "from": ["kyc", "out1"], "to": ["aifm-advisory", "in1"] }, { "from": ["kyc", "out1"], "to": ["aifm-advisory", "in1"] , "endArrow":true},
{ "from": ["aifm-advisory", "out1"], "to": ["aifm-investment", "in1"] }, { "from": ["aifm-advisory", "out1"], "to": ["aifm-investment", "in1"] , "endArrow":true},
{ "from": ["aifm-investment", "out1"], "to": ["agreement", "in1"] }, { "from": ["aifm-investment", "out1"], "to": ["agreement", "in1"] , "endArrow":true},
{ "from": ["gap", "out1"], "to": ["aifm-investment", "in1"] } { "from": ["gap", "out1"], "to": ["aifm-investment", "in1"] , "endArrow":true}
] ]
} }
} }
app/thirdparty/buildoz/bzGraflow.js
Vendored
+9 -2
View File
@@ -431,7 +431,7 @@ class BZgraflow extends Buildoz{
if(bb.width > bb.height) this.currentOrientation = 'horizontal' if(bb.width > bb.height) this.currentOrientation = 'horizontal'
else this.currentOrientation = 'vertical' else this.currentOrientation = 'vertical'
} }
if(forceAutoplace) this.autoPlace(this.currentOrientation, 60, 60) if(forceAutoplace) this.autoPlace(this.currentOrientation)
} }
// Convert viewport (client) coordinates to this instance's SVG local coordinates. // Convert viewport (client) coordinates to this instance's SVG local coordinates.
@@ -604,7 +604,14 @@ class BZgraflow extends Buildoz{
return(path) return(path)
} }
autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=500, align='center'){ autoPlace(orientation = 'horizontal', gapx = null, gapy = null, tween = null, align = null){
if(gapx == null) gapx = parseInt(this.getBZAttribute('gapx')) || 80
if(gapy == null) gapy = parseInt(this.getBZAttribute('gapy')) || 80
if(tween == null) tween = parseInt(this.getBZAttribute('tween')) || 500
if(align == null) align = this.getBZAttribute('align') || 'center'
console.log('autoPlace', orientation, gapx, gapy, tween, align)
this.currentOrientation = orientation this.currentOrientation = orientation
// Cancel any previous autoPlace() animations by bumping a token. // Cancel any previous autoPlace() animations by bumping a token.
// moveNode() checks this token each frame and will no-op if superseded. // moveNode() checks this token each frame and will no-op if superseded.