P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow horiz + vert + fixed border & scroll issues

Browse Source
This commit is contained in:
STEINNI
2025-12-27 21:39:33 +00:00
parent 96f20423e3
commit 0cedc88eab
5 changed files with 256 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/bzGraflow/nodesTest2.html
+172
View File
@@ -0,0 +1,172 @@
<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 .body span{ font-size: 12px; text-align: left; line-height: 21px; }
.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="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:37px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:63px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:89px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:115px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:141px; }
.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-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>
<span>x <input type="text" name="weight1" value="1"></span>
<span>x <input type="text" name="weight2" value="1"></span>
<span>x <input type="text" name="weight3" value="1"></span>
<span>x <input type="text" name="weight4" value="1"></span>
<span>x <input type="text" name="weight5" value="1"></span>
</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>