graflow 1.0

2025-12-22 16:38:45 +00:00
parent 0b708c2dbd
commit 906dd7b317
8 changed files with 327 additions and 245 deletions
@@ -0,0 +1,85 @@
+<style>
+    .bzgf-node {
+        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 .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: 50%; }
+    .bzgf-node [data-direction="e"]{ right: -7px; top: 50%;}
+    .bzgf-node [data-direction="n"]{ top: -7px; left: 50%;}
+    .bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%;}
+
+    .bzgf-node[data-nodetype="inc"]{
+        background: #DFD;
+        border-color: #090;
+    }
+    .bzgf-node[data-nodetype="inc"] .title{ background: #090; }
+
+    .bzgf-node[data-nodetype="factor"]{
+        background: #DDF;
+        border-color: #009;
+    }
+    .bzgf-node[data-nodetype="factor"] .title{ background: #009; }
+
+    .bzgf-wire{
+        stroke: #0AF;
+        stroke-width: 2;
+    }
+</style>
+
+<template>
+    <div class="bzgf-node" data-nodetype="inc">
+        <div class="title">Increment</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="s"></div>
+        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
+        <div class="body">
+            <input type="text" value="1">
+        </div>
+    </div>
+</template>
+
+<template>
+    <div class="bzgf-node" data-nodetype="factor">
+        <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="s"></div>
+        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
+        <div class="body">
+            <input type="text" value="0.5">
+        </div>
+    </div>
+</template>