graflow: autoplace attributes & better ICMP example
This commit is contained in:
@@ -57,8 +57,28 @@
|
||||
.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; }
|
||||
|
||||
path.arrow-head{ fill: var(--eicui-base-color-info); }
|
||||
</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>
|
||||
<div class="bzgf-node" data-nodetype="eicBasic">
|
||||
<div class="body">
|
||||
|
||||
@@ -158,20 +158,20 @@
|
||||
</style>
|
||||
|
||||
<svg style="display:none" aria-hidden="true">
|
||||
<template id="svg-arrows">
|
||||
<defs>
|
||||
<marker id="arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="10"
|
||||
refY="5"
|
||||
markerWidth="10"
|
||||
markerHeight="10"
|
||||
orient="auto-start-reverse"
|
||||
markerUnits="userSpaceOnUse">
|
||||
<path d="M0,0 L10,5 L0,10 Z" fill="#FF0"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</template>
|
||||
<template id="svg-arrows">
|
||||
<defs>
|
||||
<marker id="arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="10"
|
||||
refY="5"
|
||||
markerWidth="10"
|
||||
markerHeight="10"
|
||||
orient="auto-start-reverse"
|
||||
markerUnits="userSpaceOnUse">
|
||||
<path d="M0,0 L10,5 L0,10 Z" fill="#FF0"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</template>
|
||||
</svg>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
</head>
|
||||
|
||||
<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 -->
|
||||
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
|
||||
<button data-trigger="onAutoplace4V">Auto-place Vertical</button>
|
||||
|
||||
@@ -132,19 +132,19 @@
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{ "from": ["eval", "out1"], "to": ["gap", "in1"] },
|
||||
{ "from": ["eval", "out1"], "to": ["cid", "in1"] },
|
||||
{ "from": ["eval", "out1"], "to": ["allocation", "in1"] },
|
||||
{ "from": ["gap", "out1"], "to": ["signature", "in1"] },
|
||||
{ "from": ["signature", "out1"], "to": ["progress-meeting", "in1"] },
|
||||
{ "from": ["cid", "out1"], "to": ["techdd", "in1"] },
|
||||
{ "from": ["allocation", "out1"], "to": ["techdd", "in1"] },
|
||||
{ "from": ["allocation", "out1"], "to": ["kyc", "in1"] },
|
||||
{ "from": ["eval", "out1"], "to": ["gap", "in1"] , "endArrow":true},
|
||||
{ "from": ["eval", "out1"], "to": ["cid", "in1"] , "endArrow":true},
|
||||
{ "from": ["eval", "out1"], "to": ["allocation", "in1"] , "endArrow":true},
|
||||
{ "from": ["gap", "out1"], "to": ["signature", "in1"] , "endArrow":true},
|
||||
{ "from": ["signature", "out1"], "to": ["progress-meeting", "in1"] , "endArrow":true},
|
||||
{ "from": ["cid", "out1"], "to": ["techdd", "in1"] , "endArrow":true, "startArrow":true},
|
||||
{ "from": ["allocation", "out1"], "to": ["techdd", "in1"] , "endArrow":true, "startArrow":true},
|
||||
{ "from": ["allocation", "out1"], "to": ["kyc", "in1"] , "endArrow":true, "startArrow":true},
|
||||
{ "from": ["techdd", "out1"], "to": ["aifm-advisory", "in1"] },
|
||||
{ "from": ["kyc", "out1"], "to": ["aifm-advisory", "in1"] },
|
||||
{ "from": ["aifm-advisory", "out1"], "to": ["aifm-investment", "in1"] },
|
||||
{ "from": ["aifm-investment", "out1"], "to": ["agreement", "in1"] },
|
||||
{ "from": ["gap", "out1"], "to": ["aifm-investment", "in1"] }
|
||||
{ "from": ["kyc", "out1"], "to": ["aifm-advisory", "in1"] , "endArrow":true},
|
||||
{ "from": ["aifm-advisory", "out1"], "to": ["aifm-investment", "in1"] , "endArrow":true},
|
||||
{ "from": ["aifm-investment", "out1"], "to": ["agreement", "in1"] , "endArrow":true},
|
||||
{ "from": ["gap", "out1"], "to": ["aifm-investment", "in1"] , "endArrow":true}
|
||||
]
|
||||
}
|
||||
}
|
||||
Vendored
+9
-2
@@ -431,7 +431,7 @@ class BZgraflow extends Buildoz{
|
||||
if(bb.width > bb.height) this.currentOrientation = 'horizontal'
|
||||
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.
|
||||
@@ -604,7 +604,14 @@ class BZgraflow extends Buildoz{
|
||||
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
|
||||
// Cancel any previous autoPlace() animations by bumping a token.
|
||||
// moveNode() checks this token each frame and will no-op if superseded.
|
||||
|
||||
Reference in New Issue
Block a user