Removing old stuff
This commit is contained in:
parent
6ffed6a69e
commit
14ec3e37da
@ -35,15 +35,15 @@
|
||||
<div>
|
||||
<div class="card" id="graph">
|
||||
</div>
|
||||
<div class="card" id="graph2">
|
||||
</div>
|
||||
<div class="card code">
|
||||
<h1> Selected node code </h1>
|
||||
<wc-codemirror mode="json" id="snippet">
|
||||
</wc-codemirror>
|
||||
<button id="saveSnippet">Save</button>
|
||||
<button id="deleteSnippet">Delete</button>
|
||||
</div>
|
||||
<div class="card code">
|
||||
<h1>Full script code</h1>
|
||||
<wc-codemirror mode="yaml" id="fullcode">
|
||||
</wc-codemirror>
|
||||
<button id="updateButton">Update</button>
|
||||
|
||||
16
src/main.js
16
src/main.js
@ -2,7 +2,6 @@ import {demoConfig} from "./demo-config";
|
||||
import "@vanillawc/wc-codemirror";
|
||||
|
||||
import "./script-graph";
|
||||
import "./script-graph2";
|
||||
|
||||
import { ActionHandler } from "./script-to-graph";
|
||||
|
||||
@ -24,28 +23,27 @@ window.onload = () => {
|
||||
src = jsyaml.safeLoad(fullcode.value);
|
||||
index_counter = 0;
|
||||
nodes = [];
|
||||
// graph.tree = structure_tree(src);
|
||||
tr.actions = src;
|
||||
graph.tree = tr.graph;
|
||||
});
|
||||
|
||||
const graph2 = document.createElement("script-graph2");
|
||||
const graph = document.createElement("script-graph");
|
||||
const tr = new ActionHandler();
|
||||
window.tr = tr;
|
||||
tr.actions = src;
|
||||
tr.updateCallback = (actions) => {
|
||||
graph2.tree = tr.graph;
|
||||
graph.tree = tr.graph;
|
||||
fullcode.value = jsyaml.safeDump(tr.actions);
|
||||
};
|
||||
tr.selectCallback = (idx, action, update) => {
|
||||
graph2.tree = tr.graph;
|
||||
graph.tree = tr.graph;
|
||||
const code = document.querySelector("#snippet");
|
||||
code.value = jsyaml.safeDump(action);
|
||||
console.log(update);
|
||||
document.querySelector("#saveSnippet").onclick = () => update(jsyaml.safeLoad(code.value));
|
||||
document.querySelector("#deleteSnippet").onclick = () => update(jsyaml.safeLoad(null));
|
||||
}
|
||||
|
||||
// graph2.tree = structure_tree2(src);
|
||||
graph2.tree = tr.graph;
|
||||
document.querySelector("#graph2").appendChild(graph2);
|
||||
graph.tree = tr.graph;
|
||||
document.querySelector("#graph").appendChild(graph);
|
||||
|
||||
}
|
||||
|
||||
@ -5,283 +5,194 @@ import {
|
||||
svg,
|
||||
property
|
||||
} from "lit-element";
|
||||
import {
|
||||
mdiCallSplit,
|
||||
mdiAbTesting,
|
||||
mdiCheck,
|
||||
mdiClose,
|
||||
mdiChevronRight,
|
||||
mdiExclamation,
|
||||
mdiTimerOutline,
|
||||
mdiTrafficLight,
|
||||
mdiRefresh,
|
||||
mdiArrowUp,
|
||||
mdiCodeJson,
|
||||
mdiCheckBoxOutline,
|
||||
mdiCheckboxBlankOutline,
|
||||
mdiAsterisk,
|
||||
} from "@mdi/js";
|
||||
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
|
||||
const SIZE = 35;
|
||||
const BORDER = 5;
|
||||
const R = SIZE/2;
|
||||
const DIST = 20;
|
||||
|
||||
const ICONS = {
|
||||
choose: mdiCallSplit,
|
||||
chooseChoice: mdiCheckBoxOutline,
|
||||
chooseDefault: mdiCheckboxBlankOutline,
|
||||
condition: mdiAbTesting,
|
||||
TRUE: mdiCheck,
|
||||
FALSE: mdiClose,
|
||||
service: mdiChevronRight,
|
||||
event: mdiExclamation,
|
||||
delay: mdiTimerOutline,
|
||||
wait: mdiTrafficLight,
|
||||
loop: mdiRefresh,
|
||||
loopReturn: mdiArrowUp,
|
||||
YAML: mdiCodeJson,
|
||||
};
|
||||
interface TreeNode {
|
||||
icon: String;
|
||||
styles: String;
|
||||
end?: Boolean;
|
||||
children?: (TreeNode | TreeNode[])[];
|
||||
clickCallback?: any;
|
||||
addCallback?: any;
|
||||
}
|
||||
|
||||
class ScriptGraph extends LitElement {
|
||||
class ScriptGraph2 extends LitElement {
|
||||
@property() selected = null;
|
||||
@property() tree: [TreeNode];
|
||||
@property() nodeSize = SIZE;
|
||||
@property() nodeSeparation = DIST;
|
||||
|
||||
/*
|
||||
* GOAL:
|
||||
* Tree Node Structure
|
||||
* {
|
||||
* icon: svg,
|
||||
* styles:
|
||||
* end: false
|
||||
* children: [[TreeNode],...]
|
||||
* click: callback,undefined
|
||||
* add: callback,undefined
|
||||
* }
|
||||
*/
|
||||
|
||||
@property() selected = undefined;
|
||||
@property() tree;
|
||||
|
||||
|
||||
_select(idx) {
|
||||
this.selected = idx;
|
||||
const ev = new CustomEvent("selected", {detail: idx});
|
||||
this.dispatchEvent(ev);
|
||||
}
|
||||
|
||||
_draw_node(x, y, node, idx) {
|
||||
const selected = (Array.isArray(this.selected)
|
||||
? (this.selected[0] === idx)
|
||||
: false
|
||||
) || (idx === this.selected);
|
||||
private _draw_node(x, y, node) {
|
||||
return svg`
|
||||
<circle
|
||||
cx=${x}
|
||||
cy=${y + SIZE/2}
|
||||
r=${R}
|
||||
stroke-width=${BORDER}
|
||||
stroke="black"
|
||||
fill="white"
|
||||
class="${selected ? 'selected' : ''}"
|
||||
@click=${() => this._select(idx)}
|
||||
cx="${x}"
|
||||
cy="${y + this.nodeSize/2}"
|
||||
r="${this.nodeSize/2}"
|
||||
class="node"
|
||||
@click=${node.clickCallback}
|
||||
style=${node.styles}
|
||||
/>
|
||||
<g style="pointer-events: none">
|
||||
${node in ICONS
|
||||
? svg`
|
||||
<g transform="translate(${x-12} ${y+R-12})">
|
||||
<path d="${ICONS[node]}"/>
|
||||
</g>
|
||||
`
|
||||
: svg`
|
||||
<text
|
||||
x=${x}
|
||||
y=${y+R}
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
>${node}</text>
|
||||
`}
|
||||
<g style="pointer-events: none" transform="translate(${x - 12} ${y + this.nodeSize/2 - 12})">
|
||||
<path d="${node.icon}"/>
|
||||
</g>
|
||||
`;
|
||||
}
|
||||
_draw_connector(x1, y1, x2, y2) {
|
||||
|
||||
private _draw_new_node(x, y, node) {
|
||||
return svg`
|
||||
<circle
|
||||
cx="${x}"
|
||||
cy="${y + this.nodeSize/4}"
|
||||
r="${this.nodeSize/4}"
|
||||
class="newnode"
|
||||
@click=${node.addCallback}
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
private _draw_connector(x1, y1, x2, y2) {
|
||||
return svg`
|
||||
<line
|
||||
x1=${x1}
|
||||
y1=${y1}
|
||||
x2=${x2}
|
||||
y2=${y2}
|
||||
stroke-width=${BORDER}
|
||||
stroke="black"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
draw_tree(tree) {
|
||||
if(!tree) return {svg: svg``, width: 1, height: 1};
|
||||
let nodes = [];
|
||||
let connections = [];
|
||||
private _draw_tree(tree: TreeNode | TreeNode[]) {
|
||||
if(!tree) return {svg: `Hello`, width: 0, height: 0};
|
||||
if(!Array.isArray(tree)) {
|
||||
const selected = tree.idx == this.selected;
|
||||
if(tree.type === "loop") {
|
||||
const seq = this.draw_tree(tree.sequence);
|
||||
const sep = seq.width + DIST;
|
||||
const left = -(seq.width + SIZE + DIST)/2 + SIZE/2;
|
||||
const right = left+DIST+seq.width/2 + SIZE/2;
|
||||
return {
|
||||
svg: svg`
|
||||
${this._draw_connector(
|
||||
0, R,
|
||||
left, SIZE + DIST + R
|
||||
)}
|
||||
${this._draw_connector(
|
||||
0, R,
|
||||
right, SIZE + DIST + R
|
||||
)}
|
||||
${this._draw_connector(
|
||||
right, SIZE + DIST + seq.height - R,
|
||||
0, SIZE + DIST + seq.height + DIST
|
||||
)}
|
||||
${this._draw_connector(
|
||||
left, SIZE + DIST + seq.height - R,
|
||||
0, SIZE + DIST + seq.height + DIST
|
||||
)}
|
||||
${this._draw_connector(
|
||||
left, SIZE + DIST + R,
|
||||
left, SIZE + DIST + seq.height - R
|
||||
)}
|
||||
${this._draw_node(0, 0, "loop", tree.idx)}
|
||||
${this._draw_node(left, SIZE+DIST+seq.height/2-R, "loopReturn", tree.idx)}
|
||||
<g transform="translate(${right} ${SIZE + DIST})">
|
||||
${seq.svg}
|
||||
</g>
|
||||
`,
|
||||
height: SIZE + DIST + seq.height + DIST,
|
||||
width: seq.width + SIZE,
|
||||
}
|
||||
}
|
||||
if(tree.type === "condition") {
|
||||
const sep = SIZE + DIST;
|
||||
return {
|
||||
svg: svg`
|
||||
${this._draw_connector(
|
||||
0, R,
|
||||
-sep/2, SIZE + DIST + R
|
||||
)}
|
||||
${this._draw_connector(
|
||||
0, R,
|
||||
sep/2, SIZE + DIST + R
|
||||
)}
|
||||
${this._draw_connector(
|
||||
-sep/2, SIZE + DIST + R,
|
||||
0, SIZE + DIST + SIZE + DIST,
|
||||
)}
|
||||
${this._draw_node(0, 0, "condition", tree.idx)}
|
||||
${this._draw_node(-sep/2, SIZE+DIST, "TRUE", tree.idx)}
|
||||
${this._draw_node(sep/2, SIZE+DIST, "FALSE", tree.idx)}
|
||||
`,
|
||||
height: SIZE + DIST + SIZE + DIST,
|
||||
width: SIZE + DIST + SIZE,
|
||||
}
|
||||
}
|
||||
let height = this.nodeSize;
|
||||
let width = this.nodeSize;
|
||||
let pieces = [];
|
||||
|
||||
if(tree.type === "choose") {
|
||||
const choices = tree.choices.map(x => this.draw_tree(x));
|
||||
const maxHeight = choices.reduce((a,i) => Math.max(a, i.height), 0);
|
||||
const sep = SIZE + DIST;
|
||||
const totWidth = choices.reduce((a,i) => a+i.width, 0)+DIST*(choices.length-1);
|
||||
const offset = choices.map((sum => value => sum += value.width)(0));
|
||||
return {
|
||||
svg: svg`
|
||||
${choices.map((choice, idx) => this._draw_connector(
|
||||
0,
|
||||
R,
|
||||
-totWidth/2+idx*DIST + (idx?offset[idx-1]:0) + choice.width/2,
|
||||
SIZE + DIST + R,
|
||||
))}
|
||||
${choices.map((choice, idx) => this._draw_connector(
|
||||
-totWidth/2+idx*DIST + (idx?offset[idx-1]:0)+ choice.width/2,
|
||||
SIZE + DIST + R,
|
||||
-totWidth/2+idx*DIST + (idx?offset[idx-1]:0)+ choice.width/2,
|
||||
SIZE + DIST + R + DIST,
|
||||
))}
|
||||
${choices.map((choice, idx) => svg`
|
||||
${this._draw_connector(
|
||||
-totWidth/2+idx*DIST + (idx?offset[idx-1]:0) + choice.width/2,
|
||||
SIZE + DIST + R + DIST + choice.height,
|
||||
-totWidth/2+idx*DIST + (idx?offset[idx-1]:0) + choice.width/2,
|
||||
SIZE + DIST + R + DIST + maxHeight + DIST
|
||||
)}
|
||||
${this._draw_connector(
|
||||
-totWidth/2+idx*DIST + (idx?offset[idx-1]:0) + choice.width/2,
|
||||
SIZE + DIST + R + DIST + maxHeight + DIST,
|
||||
0,
|
||||
SIZE + DIST + R + DIST + maxHeight + DIST + SIZE + DIST
|
||||
)}
|
||||
`)}
|
||||
${this._draw_node(0, 0, tree.type, tree.idx)}
|
||||
${choices.map((choice, idx) => svg`
|
||||
<g transform="translate(
|
||||
${-totWidth/2+idx*DIST + (idx?offset[idx-1]:0) + choice.width/2}
|
||||
${SIZE + DIST + R + DIST})">
|
||||
${choice.svg}
|
||||
</g>
|
||||
`)}
|
||||
`,
|
||||
height: SIZE + DIST + R + DIST + maxHeight + DIST + SIZE + DIST,
|
||||
width: totWidth,
|
||||
}
|
||||
}
|
||||
if(tree.children) {
|
||||
const childTrees = tree.children.map((c) =>this._draw_tree(c));
|
||||
height += childTrees.reduce((a,i) => Math.max(a, i.height), 0);
|
||||
width = childTrees.reduce((a,i) => a+i.width, 0) + this.nodeSeparation*(tree.children.length - 1);
|
||||
const offsets = childTrees.map((sum => value => sum += value.width + this.nodeSeparation)(0));
|
||||
|
||||
return {
|
||||
svg: this._draw_node(0, 0, tree.type, tree.idx),
|
||||
height: SIZE,
|
||||
width: SIZE,
|
||||
}
|
||||
}
|
||||
let height = 0;
|
||||
let width = 0;
|
||||
for (const [idx, node] of tree.entries()) {
|
||||
const n = this.draw_tree(node);
|
||||
if(idx) {
|
||||
nodes.splice(nodes.length-1, 0, this._draw_connector(
|
||||
let bottomConnectors = false;
|
||||
|
||||
for (const [idx, child] of childTrees.entries()) {
|
||||
const x = -width/2 + (idx? offsets[idx-1] : 0) + child.width/2;
|
||||
// Draw top connectors
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height-DIST,
|
||||
0,
|
||||
height+DIST
|
||||
this.nodeSize/2,
|
||||
x,
|
||||
this.nodeSize + this.nodeSeparation
|
||||
));
|
||||
|
||||
|
||||
let endNode = tree.children[idx];
|
||||
if(Array.isArray(endNode)) endNode = endNode[endNode.length -1];
|
||||
if(endNode.end !== false) {
|
||||
// Draw bottom fill
|
||||
pieces.push(this._draw_connector(
|
||||
x,
|
||||
this.nodeSeparation + child.height,
|
||||
x,
|
||||
this.nodeSeparation + height
|
||||
));
|
||||
|
||||
// Draw bottom connectors
|
||||
pieces.push(this._draw_connector(
|
||||
x,
|
||||
this.nodeSeparation + height,
|
||||
0,
|
||||
this.nodeSeparation + height + this.nodeSize/2 + this.nodeSeparation
|
||||
));
|
||||
bottomConnectors = true;
|
||||
}
|
||||
nodes.push(svg`<g transform="translate(0 ${height})">${n.svg}</g>`);
|
||||
height += n.height+DIST;
|
||||
width = Math.max(width, n.width);
|
||||
|
||||
// Draw child tree
|
||||
pieces.push(svg`
|
||||
<g class="a" transform="translate(${x} ${this.nodeSize + this.nodeSeparation})">
|
||||
${child.svg}
|
||||
</g>
|
||||
`);
|
||||
}
|
||||
height = height-DIST;
|
||||
return {
|
||||
svg: svg`${nodes.map((node, idx) => node)}`,
|
||||
height,
|
||||
width,
|
||||
};
|
||||
if(bottomConnectors)
|
||||
height += this.nodeSize + this.nodeSeparation;
|
||||
|
||||
}
|
||||
if(tree.addCallback) {
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height,
|
||||
0,
|
||||
height + this.nodeSeparation
|
||||
));
|
||||
pieces.push(this._draw_new_node(
|
||||
0, height + this.nodeSeparation,
|
||||
tree
|
||||
));
|
||||
height += this.nodeSeparation + this.nodeSize/2;
|
||||
}
|
||||
if(tree.end !== false) {
|
||||
// Draw bottom connector
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height,
|
||||
0,
|
||||
height + this.nodeSeparation
|
||||
));
|
||||
height += this.nodeSeparation;
|
||||
}
|
||||
|
||||
// Draw the node itself
|
||||
pieces.push(this._draw_node(0, 0, tree));
|
||||
|
||||
return {svg: pieces, width, height};
|
||||
}
|
||||
|
||||
// Array of trees
|
||||
let pieces = [];
|
||||
let height = 0;
|
||||
const children = tree.map((n) => this._draw_tree(n));
|
||||
const width = children.reduce((a,i) => Math.max(a, i.width), 0);
|
||||
for (const [_, node] of children.entries()) {
|
||||
pieces.push(svg`
|
||||
<g class="b" transform="translate(0, ${height})">
|
||||
${node.svg}
|
||||
</g>
|
||||
`);
|
||||
height += node.height;
|
||||
}
|
||||
|
||||
return {svg: pieces, width, height};
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let processed_tree = this.draw_tree(this.tree);
|
||||
let tree = this._draw_tree(this.tree);
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
circle, line {
|
||||
stroke: rgb(3, 169, 244);
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 5;
|
||||
fill: white;
|
||||
}
|
||||
circle.selected {
|
||||
stroke: rgb(255, 152, 0);
|
||||
}
|
||||
svg {
|
||||
font-family: Roboto, Noto, sans-serif;
|
||||
font-size: 14px;
|
||||
.newnode:hover {
|
||||
stroke: var(--hover-clr);
|
||||
}
|
||||
</style>
|
||||
<svg width=${processed_tree.width + SIZE} height=${processed_tree.height + BORDER}>
|
||||
<g transform="translate(${processed_tree.width/2 + BORDER/2} ${BORDER/2})">
|
||||
${processed_tree.svg}
|
||||
<svg width=${tree.width + 32} height=${tree.height + 32}>
|
||||
<g transform="translate(${tree.width/2 + 16} 16)">
|
||||
${tree.svg}
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@ -289,4 +200,5 @@ class ScriptGraph extends LitElement {
|
||||
|
||||
}
|
||||
|
||||
customElements.define("script-graph", ScriptGraph);
|
||||
customElements.define("script-graph", ScriptGraph2);
|
||||
|
||||
|
||||
@ -1,205 +0,0 @@
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
css,
|
||||
svg,
|
||||
property
|
||||
} from "lit-element";
|
||||
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
|
||||
const SIZE = 35;
|
||||
const DIST = 20;
|
||||
|
||||
interface TreeNode {
|
||||
icon: String;
|
||||
styles: String;
|
||||
end?: Boolean;
|
||||
children?: (TreeNode | TreeNode[])[];
|
||||
clickCallback?: any;
|
||||
addCallback?: any;
|
||||
}
|
||||
|
||||
class ScriptGraph2 extends LitElement {
|
||||
@property() selected = null;
|
||||
@property() tree: [TreeNode];
|
||||
@property() nodeSize = SIZE;
|
||||
@property() nodeSeparation = DIST;
|
||||
|
||||
private _draw_node(x, y, node) {
|
||||
return svg`
|
||||
<circle
|
||||
cx="${x}"
|
||||
cy="${y + this.nodeSize/2}"
|
||||
r="${this.nodeSize/2}"
|
||||
class="node"
|
||||
@click=${node.clickCallback}
|
||||
style=${node.styles}
|
||||
/>
|
||||
<g style="pointer-events: none" transform="translate(${x - 12} ${y + this.nodeSize/2 - 12})">
|
||||
<path d="${node.icon}"/>
|
||||
</g>
|
||||
`;
|
||||
}
|
||||
|
||||
private _draw_new_node(x, y, node) {
|
||||
return svg`
|
||||
<circle
|
||||
cx="${x}"
|
||||
cy="${y + this.nodeSize/4}"
|
||||
r="${this.nodeSize/4}"
|
||||
class="newnode"
|
||||
@click=${node.addCallback}
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
private _draw_connector(x1, y1, x2, y2) {
|
||||
return svg`
|
||||
<line
|
||||
x1=${x1}
|
||||
y1=${y1}
|
||||
x2=${x2}
|
||||
y2=${y2}
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
private _draw_tree(tree: TreeNode | TreeNode[]) {
|
||||
if(!tree) return {svg: `Hello`, width: 0, height: 0};
|
||||
if(!Array.isArray(tree)) {
|
||||
let height = this.nodeSize;
|
||||
let width = this.nodeSize;
|
||||
let pieces = [];
|
||||
|
||||
if(tree.children) {
|
||||
const childTrees = tree.children.map((c) =>this._draw_tree(c));
|
||||
height += childTrees.reduce((a,i) => Math.max(a, i.height), 0);
|
||||
width = childTrees.reduce((a,i) => a+i.width, 0) + this.nodeSeparation*(tree.children.length - 1);
|
||||
const offsets = childTrees.map((sum => value => sum += value.width + this.nodeSeparation)(0));
|
||||
|
||||
let bottomConnectors = false;
|
||||
|
||||
for (const [idx, child] of childTrees.entries()) {
|
||||
const x = -width/2 + (idx? offsets[idx-1] : 0) + child.width/2;
|
||||
// Draw top connectors
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
this.nodeSize/2,
|
||||
x,
|
||||
this.nodeSize + this.nodeSeparation
|
||||
));
|
||||
|
||||
|
||||
let endNode = tree.children[idx];
|
||||
if(Array.isArray(endNode)) endNode = endNode[endNode.length -1];
|
||||
if(endNode.end !== false) {
|
||||
// Draw bottom fill
|
||||
pieces.push(this._draw_connector(
|
||||
x,
|
||||
this.nodeSeparation + child.height,
|
||||
x,
|
||||
this.nodeSeparation + height
|
||||
));
|
||||
|
||||
// Draw bottom connectors
|
||||
pieces.push(this._draw_connector(
|
||||
x,
|
||||
this.nodeSeparation + height,
|
||||
0,
|
||||
this.nodeSeparation + height + this.nodeSize/2 + this.nodeSeparation
|
||||
));
|
||||
bottomConnectors = true;
|
||||
}
|
||||
|
||||
// Draw child tree
|
||||
pieces.push(svg`
|
||||
<g class="a" transform="translate(${x} ${this.nodeSize + this.nodeSeparation})">
|
||||
${child.svg}
|
||||
</g>
|
||||
`);
|
||||
}
|
||||
if(bottomConnectors)
|
||||
height += this.nodeSize + this.nodeSeparation;
|
||||
|
||||
}
|
||||
if(tree.addCallback) {
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height,
|
||||
0,
|
||||
height + this.nodeSeparation
|
||||
));
|
||||
pieces.push(this._draw_new_node(
|
||||
0, height + this.nodeSeparation,
|
||||
tree
|
||||
));
|
||||
height += this.nodeSeparation + this.nodeSize/2;
|
||||
}
|
||||
if(tree.end !== false) {
|
||||
// Draw bottom connector
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height,
|
||||
0,
|
||||
height + this.nodeSeparation
|
||||
));
|
||||
height += this.nodeSeparation;
|
||||
}
|
||||
|
||||
// Draw the node itself
|
||||
pieces.push(this._draw_node(0, 0, tree));
|
||||
|
||||
return {svg: pieces, width, height};
|
||||
}
|
||||
|
||||
// Array of trees
|
||||
let pieces = [];
|
||||
let height = 0;
|
||||
const children = tree.map((n) => this._draw_tree(n));
|
||||
const width = children.reduce((a,i) => Math.max(a, i.width), 0);
|
||||
for (const [_, node] of children.entries()) {
|
||||
pieces.push(svg`
|
||||
<g class="b" transform="translate(0, ${height})">
|
||||
${node.svg}
|
||||
</g>
|
||||
`);
|
||||
height += node.height;
|
||||
}
|
||||
|
||||
// TODO TEMPORARY
|
||||
return {svg: pieces, width, height};
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let tree = this._draw_tree(this.tree);
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
circle, line {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 5;
|
||||
fill: white;
|
||||
}
|
||||
.newnode:hover {
|
||||
stroke: var(--hover-clr);
|
||||
}
|
||||
</style>
|
||||
<svg width=${tree.width + 32} height=${tree.height + 32}>
|
||||
<g transform="translate(${tree.width/2 + 16} 16)">
|
||||
${tree.svg}
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
customElements.define("script-graph2", ScriptGraph2);
|
||||
|
||||
@ -101,16 +101,12 @@ const SPECIAL = {
|
||||
|
||||
let def = action.default || [{}];
|
||||
const defaultHandler = new ActionHandler(def);
|
||||
console.log(selected)
|
||||
if(selected[0] === -2)
|
||||
defaultHandler.selected = selected.slice(1);
|
||||
defaultHandler.selectCallback = (i, a, u) => {
|
||||
select( [-2].concat(i), a, u);
|
||||
};
|
||||
defaultHandler.updateCallback = (a) => {
|
||||
console.log("UPDATE");
|
||||
console.log(defaultHandler.actions);
|
||||
console.log(a);
|
||||
action.default = defaultHandler.actions;
|
||||
update(action);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user