buildoz/graflow_examples/nodesLib/nodesTest1.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;
    }    
    
    .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%);">&sum;</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>