graflow: rehresh event to fix movenodes
This commit is contained in:
STEINNI
59
graflow_examples/nodesLib/nodes16ports.html
Normal file
59
graflow_examples/nodesLib/nodes16ports.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
}
|
||||
.bzgf-node .body{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--eicui-base-color-grey-25);
|
||||
border:2px solid var(--eicui-base-color-grey-50);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.bzgf-node .title {
|
||||
font-weight: bold;
|
||||
color: var(--app-color-black);
|
||||
margin: .5em auto .2em auto;
|
||||
}
|
||||
.bzgf-node .subtitle {
|
||||
font-size: .9em;
|
||||
color: var(--eicui-base-color-primary-100);
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: var(--eicui-base-color-info-25);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
|
||||
|
||||
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="square">
|
||||
<div class="body">
|
||||
<div class="title">{title}</div>
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
</div>
|
||||
<div class="port" data-id="w" data-direction="w"></div>
|
||||
<div class="port" data-id="n" data-direction="n"></div>
|
||||
<div class="port" data-id="e" data-direction="e"></div>
|
||||
<div class="port" data-id="s" data-direction="s"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
97
graflow_examples/nodesLib/nodesEIC.html
Normal file
97
graflow_examples/nodesLib/nodesEIC.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
}
|
||||
.bzgf-node .body{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--eicui-base-color-grey-25);
|
||||
border:2px solid var(--eicui-base-color-grey-50);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.bzgf-node .title {
|
||||
font-weight: bold;
|
||||
color: var(--app-color-black);
|
||||
margin: .5em auto .2em auto;
|
||||
}
|
||||
.bzgf-node .subtitle {
|
||||
|
||||
font-size: .9em;
|
||||
color: var(--eicui-base-color-primary-100);
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: var(--eicui-base-color-info-25);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
|
||||
|
||||
|
||||
.bzgf-node [data-id="in2"]{ top: 25%; }
|
||||
.bzgf-node [data-id="in3"]{ top: 75%; }
|
||||
|
||||
.bzgf-node [data-id="out2"]{ top: 25%; }
|
||||
.bzgf-node [data-id="out3"]{ top: 75%; }
|
||||
|
||||
.bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
|
||||
width:3em;
|
||||
height:3em;
|
||||
padding: 2px;
|
||||
}
|
||||
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{
|
||||
border-radius: 50%;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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; }
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="eicBasic">
|
||||
<div class="body">
|
||||
<div class="title">{title}</div>
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
</div>
|
||||
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="in2" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="in3" data-direction="w"></div>
|
||||
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="port" data-type="out" data-id="out2" data-direction="e"></div>
|
||||
<div class="port" data-type="out" data-id="out3" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="refnodein">
|
||||
<div class="body">{parentport}</div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="refnodeout">
|
||||
<div class="body">{parentport}</div>
|
||||
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||
</div>
|
||||
</template>
|
||||
105
graflow_examples/nodesLib/nodesEIC2.html
Normal file
105
graflow_examples/nodesLib/nodesEIC2.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
}
|
||||
.bzgf-node .body{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--eicui-base-color-grey-25);
|
||||
border:2px solid var(--eicui-base-color-grey-50);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.bzgf-node .title {
|
||||
font-weight: bold;
|
||||
color: var(--app-color-black);
|
||||
margin: .5em auto .2em auto;
|
||||
}
|
||||
.bzgf-node .subtitle {
|
||||
font-size: .9em;
|
||||
color: var(--eicui-base-color-primary-100);
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: var(--eicui-base-color-info-25);
|
||||
opacity: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
|
||||
|
||||
.bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
|
||||
width:3em;
|
||||
height:3em;
|
||||
padding: 2px;
|
||||
}
|
||||
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{
|
||||
border-radius: 50%;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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">
|
||||
<div class="title">{title}</div>
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
</div>
|
||||
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="refnodein">
|
||||
<div class="body">{parentport}</div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="refnodeout">
|
||||
<div class="body">{parentport}</div>
|
||||
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||
</div>
|
||||
</template>
|
||||
203
graflow_examples/nodesLib/nodesTest1.html
Normal file
203
graflow_examples/nodesLib/nodesTest1.html
Normal file
@@ -0,0 +1,203 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
border-width:2px;
|
||||
border-style: solid;
|
||||
border-radius: 6px;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.bzgf-node .title {
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
color: white;
|
||||
}
|
||||
.bzgf-node .body { margin-top: 2em; }
|
||||
.bzgf-node .body input {
|
||||
width:4em;
|
||||
font-size: .9em;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
.bzgf-node .body div{ font-size: 12px; text-align: left; line-height: 24px; }
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bzgf-node .port[data-type="in"] { background: #0F0; }
|
||||
.bzgf-node .port[data-type="out"] { background: #FF0; }
|
||||
|
||||
.bzgf-node [data-direction="w"]{ left: -7px; top: calc(50% + 1em); transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -7px; top: calc(50% + 1em); transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
|
||||
|
||||
.bzgf-node[data-nodetype="inc"]{
|
||||
background: #DFD;
|
||||
border-color: #090;
|
||||
}
|
||||
.bzgf-node[data-nodetype="inc"] .title{ background: #090; }
|
||||
|
||||
|
||||
.bzgf-node[data-nodetype="wadder"]{
|
||||
background: #DFD;
|
||||
border-color: #090;
|
||||
height:150px
|
||||
}
|
||||
.bzgf-node[data-nodetype="wadder"] .body{ display: grid; grid-gap: 4px; margin-left:0.5em; grid-template-columns: 1fr 1fr; align-items: center; }
|
||||
.bzgf-node[data-nodetype="wadder"] .title{ background: #090; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:51px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:75px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:99px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:123px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:147px; }
|
||||
|
||||
.bzgf-node[data-nodetype="factor"]{
|
||||
background: #DDF;
|
||||
border-color: #009;
|
||||
}
|
||||
.bzgf-node[data-nodetype="factor"] .title{ background: #009; }
|
||||
|
||||
.bzgf-node[data-nodetype="multiplier"]{
|
||||
background: #DDF;
|
||||
border-color: #009;
|
||||
height:110px
|
||||
}
|
||||
.bzgf-node[data-nodetype="multiplier"] .body{
|
||||
font-size:40px;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.bzgf-node[data-nodetype="multiplier"] .title{ background: #009; }
|
||||
.bzgf-node[data-nodetype="multiplier"] .port[data-id="inp1"] { top:37px; }
|
||||
.bzgf-node[data-nodetype="multiplier"] .port[data-id="inp2"] { top:63px; }
|
||||
.bzgf-node[data-nodetype="multiplier"] .port[data-id="inp3"] { top:89px; }
|
||||
|
||||
.bzgf-node[data-nodetype="input"],
|
||||
.bzgf-node[data-nodetype="console"]{
|
||||
background: #CCC;
|
||||
border-color: #555;
|
||||
}
|
||||
.bzgf-node[data-nodetype="input"] .title,
|
||||
.bzgf-node[data-nodetype="console"] .title{ background: #555; }
|
||||
|
||||
.bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
|
||||
width:3em;
|
||||
height:3em;
|
||||
padding: 2px;
|
||||
}
|
||||
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{
|
||||
border-radius: 50%;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bzgf-node[data-nodetype="refnodein"] .body{ background: #0F0; }
|
||||
.bzgf-node[data-nodetype="refnodeout"] .body{ background: #FF0; }
|
||||
|
||||
.bzgf-wire{ stroke: #0AF; stroke-width: 2; }
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="inc">
|
||||
<div class="title">Fixed Increment</div>
|
||||
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body">
|
||||
<label>Increment:</label><input name="incvalue" type="text" value="1">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="factor">
|
||||
<div class="title">Fixed factor</div>
|
||||
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body">
|
||||
<label>Factor:</label><input name="factvalue" type="text" value="0.5">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="wadder">
|
||||
<div class="title">Adder</div>
|
||||
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="inp2" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="inp3" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="inp4" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="inp5" data-direction="w"></div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<div>x <input type="text" name="weight1" value="1"></div>
|
||||
<div>x <input type="text" name="weight2" value="1"></div>
|
||||
<div>x <input type="text" name="weight3" value="1"></div>
|
||||
<div>x <input type="text" name="weight4" value="1"></div>
|
||||
<div>x <input type="text" name="weight5" value="1"></div>
|
||||
</div>
|
||||
<div style="font-size:40px;font-weight: bold;transform: translateY(-50%);">∑</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="multiplier">
|
||||
<div class="title">Multiply</div>
|
||||
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="inp2" data-direction="w"></div>
|
||||
<div class="port" data-type="in" data-id="inp3" data-direction="w"></div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body">x</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="console">
|
||||
<div class="title">Console</div>
|
||||
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||
<div class="body"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="input">
|
||||
<div class="title">input</div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body">
|
||||
<label>Value:</label><input name="value" type="text" value="1">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="refnodein">
|
||||
<div class="body">{parentport}</div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="refnodeout">
|
||||
<div class="body">{parentport}</div>
|
||||
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||
</div>
|
||||
</template>
|
||||
237
graflow_examples/nodesLib/nodesTest2.html
Normal file
237
graflow_examples/nodesLib/nodesTest2.html
Normal file
@@ -0,0 +1,237 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
border-width:2px;
|
||||
border-style: solid;
|
||||
border-radius: 6px;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.bzgf-node .text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
color: white;
|
||||
transform: translateX(-50%), translateY(-50%);
|
||||
}
|
||||
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: #FFF;
|
||||
z-index: 99;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.bzgf-node [data-direction="w"]{ left: -7px; top: 50%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -7px; top: 50%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
|
||||
|
||||
.bzgf-node[data-nodetype="start"],
|
||||
.bzgf-node[data-nodetype="end"]{
|
||||
border: 1px solid white;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.bzgf-node[data-nodetype="start"] .text,
|
||||
.bzgf-node[data-nodetype="end"] .text{ width: 80%; }
|
||||
|
||||
.bzgf-node[data-nodetype="condition"]{
|
||||
border: none;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
.bzgf-node[data-nodetype="condition"] .frame{
|
||||
border: 1px solid white;
|
||||
transform: rotate(-45deg) scale(0.7071);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.bzgf-node[data-nodetype="condition"] .port[data-direction="w"]{ left: -5px; }
|
||||
.bzgf-node[data-nodetype="condition"] [data-direction="e"]{ right: -5px; }
|
||||
.bzgf-node[data-nodetype="condition"] [data-direction="n"]{ top: -5px; }
|
||||
.bzgf-node[data-nodetype="condition"] [data-direction="s"]{ bottom: -5px; }
|
||||
|
||||
.bzgf-node[data-nodetype="process"]{
|
||||
border: 1px solid white;
|
||||
width: 150px;
|
||||
height: 70px;
|
||||
padding: 0;
|
||||
}
|
||||
.bzgf-node[data-nodetype="process"] .text{ width: 80%; }
|
||||
.bzgf-node[data-nodetype="process"] .dbline{
|
||||
border: 1px solid white;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.bzgf-node[data-nodetype="database"]{
|
||||
border: 1px solid white;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
isolation: isolate;
|
||||
}
|
||||
.bzgf-node[data-nodetype="database"] .top{
|
||||
z-index: 2;
|
||||
height: 20%;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: black;
|
||||
}
|
||||
.bzgf-node[data-nodetype="database"] .text{
|
||||
background: black;
|
||||
width: 87%;
|
||||
z-index: 1;
|
||||
}
|
||||
.bzgf-node[data-nodetype="database"] .bottom{
|
||||
z-index: 0;
|
||||
height: 20%;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
left: 0;
|
||||
width: 99%;
|
||||
background: black;
|
||||
clip-path: polygon( 0% 110%, 100% 110%, 100% 50%, 0% 50%);
|
||||
}
|
||||
.bzgf-node[data-nodetype="database"] [data-direction="n"]{ top: -17px; }
|
||||
.bzgf-node[data-nodetype="database"] [data-direction="s"]{ bottom: -17px; }
|
||||
|
||||
.bzgf-node[data-nodetype="preparation"]{
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.bzgf-node[data-nodetype="preparation"] .text{ width: 85%; }
|
||||
.bzgf-node[data-nodetype="preparation"] .outerframe{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: none;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
clip-path: polygon(
|
||||
10% 0%,
|
||||
90% 0%,
|
||||
100% 50%,
|
||||
90% 100%,
|
||||
10% 100%,
|
||||
0% 50%
|
||||
);
|
||||
}
|
||||
.bzgf-node[data-nodetype="preparation"] .innerframe{
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
background: black;
|
||||
clip-path: inherit;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
}
|
||||
.bzgf-wire{ stroke: #FF0; stroke-width: 2; }
|
||||
</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>
|
||||
</svg>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="start">
|
||||
<div class="text">{text}</div>
|
||||
<div class="port" data-id="out1" data-direction="s"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="end">
|
||||
<div class="text">{text}</div>
|
||||
<div class="port" data-id="inp1" data-direction="n"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="condition">
|
||||
<div class="frame"></div>
|
||||
<div class="text">{text}</div>
|
||||
<div class="port" data-id="inp1" data-direction="n"></div>
|
||||
<div class="port" data-id="out1" data-direction="w"></div>
|
||||
<div class="port" data-id="out2" data-direction="s"></div>
|
||||
<div class="port" data-id="out3" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="process">
|
||||
<div class="dbline"></div>
|
||||
<div class="text">{text}</div>
|
||||
<div class="port" data-id="inout1" data-direction="n"></div>
|
||||
<div class="port" data-id="inout2" data-direction="s"></div>
|
||||
<div class="port" data-id="inout3" data-direction="w"></div>
|
||||
<div class="port" data-id="inout4" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="database">
|
||||
<div class="top"></div>
|
||||
<div class="bottom"></div>
|
||||
<div class="text">{text}</div>
|
||||
<div class="port" data-id="inout1" data-direction="n"></div>
|
||||
<div class="port" data-id="inout2" data-direction="s"></div>
|
||||
<div class="port" data-id="inout3" data-direction="w"></div>
|
||||
<div class="port" data-id="inout4" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="preparation">
|
||||
<div class="outerframe">
|
||||
<div class="innerframe">
|
||||
<div class="text">{text}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="port" data-id="inp1" data-direction="n"></div>
|
||||
<div class="port" data-id="out1" data-direction="s"></div>
|
||||
<div class="port" data-id="inout1" data-direction="w"></div>
|
||||
<div class="port" data-id="inout2" data-direction="e"></div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user