buildoz/graflow_examples/nodesLib/nodesTest2.html

<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>