graflow: rehresh event to fix movenodes

This commit is contained in:
STEINNI
2026-03-08 16:50:20 +00:00
parent 2d3a4631c8
commit 03fe8696ec
22 changed files with 2273 additions and 10 deletions

View File

@@ -0,0 +1,97 @@
<style>
.bzgf-node {
font-family: Arial, Helvetica, sans-serif;
width: 160px;
height: 80px;
color: black;
text-align: center;
position: absolute;
padding: .5em;
}
.bzgf-node .body{
z-index: 1;
position: absolute;
inset: 0;
background: var(--eicui-base-color-grey-25);
border:2px solid var(--eicui-base-color-grey-50);
border-radius: 6px;
}
.bzgf-node .title {
font-weight: bold;
color: var(--app-color-black);
margin: .5em auto .2em auto;
}
.bzgf-node .subtitle {
font-size: .9em;
color: var(--eicui-base-color-primary-100);
width: 90%;
margin: auto;
}
.bzgf-node .port{
position: absolute;
height: 10px;
width: 10px;
background: var(--eicui-base-color-info-25);
border-radius: 10px;
}
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
.bzgf-node [data-id="in2"]{ top: 25%; }
.bzgf-node [data-id="in3"]{ top: 75%; }
.bzgf-node [data-id="out2"]{ top: 25%; }
.bzgf-node [data-id="out3"]{ top: 75%; }
.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, .bzgf-node[data-nodetype="refnodeout"] .body{ background: var(--eicui-base-color-grey-25); }
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
</style>
<template>
<div class="bzgf-node" data-nodetype="eicBasic">
<div class="body">
<div class="title">{title}</div>
<div class="subtitle">{subtitle}</div>
</div>
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
<div class="port" data-type="in" data-id="in2" data-direction="w"></div>
<div class="port" data-type="in" data-id="in3" data-direction="w"></div>
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
<div class="port" data-type="out" data-id="out2" data-direction="e"></div>
<div class="port" data-type="out" data-id="out3" data-direction="e"></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>