rapatriated graflow examples
This commit is contained in:
STEINNI
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