graflow, autoplacement 1.0 no layer-ordering
This commit is contained in:
STEINNI
@@ -27,6 +27,7 @@
|
||||
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;
|
||||
@@ -48,38 +49,124 @@
|
||||
}
|
||||
.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-wire{
|
||||
stroke: #0AF;
|
||||
stroke-width: 2;
|
||||
.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">Increment</div>
|
||||
<div class="title">Fixed 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">
|
||||
<label>Increment:</label><input name="incvalue" type="text" value="1">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="factor">
|
||||
<div class="title">Multiply</div>
|
||||
<div class="title">Fixed factor</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">
|
||||
<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%);">∑</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>
|
||||
@@ -12,6 +12,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<bz-graflow flow="/app/assets/json/bzGraflow/testFlow1.json"></bz-graflow>
|
||||
<bz-graflow flow="/app/assets/json/bzGraflow/testFlow1.json" tension="60"></bz-graflow>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,27 +4,47 @@
|
||||
"nodes":[
|
||||
{ "nodeType": "inc",
|
||||
"id": "aze",
|
||||
"coords": { "x": 20, "y": 10}
|
||||
"coords": { "x": 220, "y": 10}
|
||||
},
|
||||
{ "nodeType": "inc",
|
||||
"id": "aze2",
|
||||
"coords": { "x": 220, "y": 120}
|
||||
},
|
||||
{ "nodeType": "factor",
|
||||
"id": "qsd2",
|
||||
"coords": { "x": 470, "y": 170}
|
||||
},
|
||||
{ "nodeType": "factor",
|
||||
"id": "qsd",
|
||||
"coords": { "x": 270, "y": 50}
|
||||
},
|
||||
{ "nodeType": "inc",
|
||||
"coords": { "x": 470, "y": 50}
|
||||
},
|
||||
{ "nodeType": "wadder",
|
||||
"id": "wcx",
|
||||
"coords": { "x": 520, "y": 50}
|
||||
"coords": { "x": 720, "y": 50}
|
||||
},
|
||||
{ "nodeType": "inc",
|
||||
{ "nodeType": "multiplier",
|
||||
"id": "ert",
|
||||
"coords": { "x": 150, "y": 350}
|
||||
"coords": { "x": 550, "y": 350}
|
||||
},
|
||||
{ "nodeType": "input",
|
||||
"id": "0000",
|
||||
"coords": { "x": 20, "y": 350}
|
||||
},
|
||||
{ "nodeType": "console",
|
||||
"id": "9999",
|
||||
"coords": { "x": 800, "y": 350}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{ "from": ["0000", "out1"], "to": ["aze", "inp1"] },
|
||||
{ "from": ["aze2", "out1"], "to": ["qsd2", "inp1"] },
|
||||
{ "from": ["aze", "out1"], "to": ["qsd", "inp1"] },
|
||||
{ "from": ["0000", "out1"], "to": ["aze2", "inp1"] },
|
||||
{ "from": ["qsd2", "out1"], "to": ["wcx", "inp2"] },
|
||||
{ "from": ["wcx", "out1"], "to": ["ert", "inp1"] },
|
||||
{ "from": ["qsd2", "out1"], "to": ["ert", "inp2"] },
|
||||
{ "from": ["qsd", "out1"], "to": ["wcx", "inp1"] },
|
||||
{ "from": ["qsd", "out1"], "to": ["ert", "inp2"] },
|
||||
{ "from": ["ert", "out1"], "to": ["aze", "inp2"] }
|
||||
|
||||
{ "from": ["ert", "out1"], "to": ["9999", "inp1"] }
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -48,7 +48,9 @@ body[eicapp] {
|
||||
height: 100vh;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
[eicapp] [eicapptoolbar] {
|
||||
@@ -144,7 +146,8 @@ menu[eicmenu] [menuitem] > a > button, menu[eicmenu] [menuitem] > .nolink button
|
||||
[eicapp] .app-workspace .window > header .controls button.shrink { display: none; }
|
||||
[eicapp] .app-workspace .window > section {
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
overflow: auto; /* important for windows content to be scrollable */
|
||||
transition: all 0.5s;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
@@ -336,7 +339,7 @@ menu[eicmenu] [menuitem] a label {
|
||||
color: #4E4;
|
||||
}
|
||||
menu[eicmenu] [menuitem] i[class^="icon-"] {
|
||||
color:#fdfb93;;
|
||||
color:#070;;
|
||||
}
|
||||
article[eiccard] > header h1{ text-align: center; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user