thomas/script-graph
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP drag and drop

Browse Source
This commit is contained in:
Thomas Lovén
2021-03-26 23:24:09 +00:00
parent ccbe62c0d9
commit da9cbbe8a5
6 changed files with 605 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/hat-graph/hat-graph-node.ts
View File

@@ -1,41 +1,25 @@
import { css, LitElement, property, svg } from "lit-element";
import {
mdiCallSplit,
mdiAbTesting,
mdiCheck,
mdiClose,
mdiChevronRight,
mdiExclamation,
mdiTimerOutline,
mdiTrafficLight,
mdiRefresh,
mdiArrowUp,
mdiCodeJson,
mdiCheckBoxOutline,
mdiCheckboxBlankOutline,
mdiAsterisk,
mdiCircleOutline,
} from "@mdi/js";
const NODE_SIZE = 24;
const ICONS = {
"call-split": mdiCallSplit,
"ab-testing": mdiAbTesting,
check: mdiCheck,
close: mdiClose,
"chevron-right": mdiChevronRight,
exclamation: mdiExclamation,
asterisk: mdiAsterisk,
};
export class HatGraphNode extends LitElement {
@property() icon = "chevron-right";
@property() iconPath?;
dragtarget = undefined;
config = undefined;
connectedCallback() {
super.connectedCallback();
if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
this.addEventListener("dragstart", () => {
this.classList.add("dragging");
(window as any)._dragElement = this.dragtarget ?? this;
this.updateNode("");
});
this.addEventListener("dragend", () => {
this.classList.remove("dragging");
(window as any)._dragElement = undefined;
});
}
updateNode(config) {
@@ -52,9 +36,9 @@ export class HatGraphNode extends LitElement {
this.dispatchEvent(new CustomEvent("delete-node", { bubbles: true }));
}
prependNode(config) {
placeNode(config) {
this.dispatchEvent(
new CustomEvent("prepend-node", { detail: { config }, bubbles: true })
new CustomEvent("place-node", { detail: { config }, bubbles: true })
);
}
@@ -80,13 +64,7 @@ export class HatGraphNode extends LitElement {
style="pointer-events: none"
transform="translate(${-12} ${this.width / 2 - 12})"
>
${
this.iconPath
? svg`<path d="${this.iconPath}"/>`
: ICONS[this.icon]
? svg`<path d="${ICONS[this.icon]}"/>`
: ""
}
${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""}
</g>
</svg>
`;
@@ -99,11 +77,6 @@ export class HatGraphNode extends LitElement {
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
--hover-clr: var(--hover-color, rgb(255, 152, 0));
}
circle {
stroke: var(--stroke-clr);
stroke-width: 2;
fill: white;
}
:host(:hover) {
--stroke-clr: var(--hover-clr);
}
@@ -111,6 +84,19 @@ export class HatGraphNode extends LitElement {
--stroke-clr: green;
outline: none;
}
:host(.dragging) {
--stroke-clr: gray;
color: gray;
}
:host(.dragging) path {
stroke: gray;
fill: gray;
}
circle {
stroke: var(--stroke-clr);
stroke-width: 2;
fill: white;
}
`;
}
}

21
src/hat-graph/hat-graph.ts
View File

@@ -11,6 +11,27 @@ export class HatGraph extends LitElement {
@property() _num_items = 0;
@property({ reflect: true }) branching?;
config?;
updateNode(config) {
this.dispatchEvent(
new CustomEvent("update-node", {
detail: { config },
bubbles: true,
composed: true,
})
);
}
deleteNode() {
this.dispatchEvent(new CustomEvent("delete-node", { bubbles: true }));
}
placeNode(config) {
this.dispatchEvent(
new CustomEvent("place-node", { detail: { config }, bubbles: true })
);
}
get width() {
let w = 0;

112
src/hat-graph/make-graph.ts
View File

@@ -77,6 +77,7 @@ function makeConditionNode(config) {
function makeChooseNode(config) {
const graph = document.createElement("hat-graph") as HatGraph;
graph.config = config;
graph.branching = true;
const focused = () =>
@@ -86,28 +87,27 @@ function makeChooseNode(config) {
render(
html`
<hat-graph-node slot="head" iconPath="${mdiCallSplit}" @focus=${focused}>
<hat-graph-node
slot="head"
.iconPath="${mdiCallSplit}"
@focus=${focused}
draggable="true"
.dragtarget=${graph}
>
</hat-graph-node>
${config.choose?.map((branch) => {
return html`
<hat-graph>
<hat-graph-node
slot="head"
.iconPath=${mdiCheckBoxOutline}
@focus=${focused}
></hat-graph-node>
${branch.sequence.map((node) => makeNode(node))}
</hat-graph>
`;
const head = document.createElement("hat-graph-node") as HatGraphNode;
head.iconPath = mdiCheckBoxOutline;
head.addEventListener("focus", focused);
return makeGraph(branch.sequence, head);
})}
<hat-graph>
<hat-graph-node
slot="head"
.iconPath=${mdiCheckboxBlankOutline}
@focus=${focused}
></hat-graph-node>
${config.default.map((node) => makeNode(node))}
</hat-graph>
${(() => {
const head = document.createElement("hat-graph-node") as HatGraphNode;
head.iconPath = mdiCheckboxBlankOutline;
head.addEventListener("focus", focused);
return makeGraph(config.default, head);
})()}
`,
graph
);
@@ -129,9 +129,7 @@ function makeRepeatNode(config) {
.iconPath=${mdiArrowUp}
@focus=${focused}
></hat-graph-node>
<hat-graph>
${config.repeat.sequence.map((node) => makeNode(node))}
</hat-graph>
${makeGraph(config.repeat.sequence)}
`,
graph
);
@@ -139,6 +137,7 @@ function makeRepeatNode(config) {
}
function makeNode(config) {
if (typeof config === "string") return undefined;
const type = OPTIONS.find((key) => key in config) || "yaml";
if (type in SPECIAL_NODES) {
@@ -148,6 +147,9 @@ function makeNode(config) {
const node = document.createElement("hat-graph-node") as HatGraphNode;
node.iconPath = ICONS[type];
node.draggable = true;
node.config = config;
node.addEventListener("focus", (ev) => {
node.dispatchEvent(
@@ -158,11 +160,63 @@ function makeNode(config) {
return node;
}
export function makeGraph(nodes) {
export function makeGraph(nodes, head = undefined) {
const graph = document.createElement("hat-graph") as HatGraph;
graph.addEventListener("dragenter", (ev) => {
ev.stopPropagation();
ev.preventDefault();
try {
graph.appendChild((window as any)._dragElement);
} catch (e) {
if (!(e instanceof DOMException)) throw e;
}
});
(graph as any).test = "Hello!";
if (head) {
head.slot = "head";
graph.appendChild(head);
}
for (const [i, nodeConfig] of nodes.entries()) {
const node = makeNode(nodeConfig);
if (!node) {
window.setTimeout(() => {
const config = [...nodes];
config.splice(i, 1);
graph.dispatchEvent(
new CustomEvent("update-node", { detail: { config }, bubbles: true })
);
}, 100);
continue;
}
node.addEventListener("dragover", (ev) => {
ev.stopPropagation();
ev.preventDefault();
});
node.addEventListener("dragenter", (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (node === (window as any)._dragElement) return;
try {
graph.insertBefore((window as any)._dragElement, node);
(window as any)._dragTarget = node;
} catch (e) {
if (!(e instanceof DOMException)) throw e;
}
});
node.addEventListener("drop", (ev) => {
ev.stopPropagation();
ev.preventDefault();
if ((window as any)._dragTarget) {
console.log("Drop onto ", (window as any)._dragTarget);
const config = { ...(window as any)._dragElement.config };
(window as any)._dragTarget.placeNode(config);
}
});
node.addEventListener("update-node", (ev) => {
ev.stopPropagation();
@@ -186,6 +240,18 @@ export function makeGraph(nodes) {
);
});
node.addEventListener("place-node", (ev) => {
ev.stopPropagation();
const config = [...nodes];
config.splice(i, 0, ev.detail.config);
console.log(config);
graph.dispatchEvent(
new CustomEvent("update-node", { detail: { config }, bubbles: true })
);
});
graph.appendChild(node);
}

35
src/main.js
View File

@@ -57,7 +57,6 @@ window.onload = () => {
};
function nodeSelected(ev) {
console.log(ev);
const code = document.querySelector("#snippet");
code.value = jsyaml.safeDump(ev.detail.config);
code.currentNode = ev.target;
@@ -73,13 +72,30 @@ function rebuildGraph(config) {
graph.addEventListener("update-node", (ev) => {
const code = document.querySelector("#fullcode");
code.value = jsyaml.safeDump(ev.detail.config);
rebuildGraph(ev.detail.config);
window.setTimeout(() => rebuildGraph(ev.detail.config), 100);
});
graphCard.appendChild(graph);
}
function setup_snippet_editor() {
document.querySelector("#saveSnippet").onclick = () => {
const code = document.querySelector("#snippet");
if (code.currentNode) {
code.currentNode.updateNode(jsyaml.safeLoad(code.value));
}
};
document.querySelector("#deleteSnippet").onclick = () => {
const code = document.querySelector("#snippet");
if (code.currentNode) {
code.currentNode.deleteNode();
}
};
}
function setup() {
setup_snippet_editor();
let src = demoConfig2;
const fullcode = document.querySelector("#fullcode");
fullcode.mode = "yaml";
@@ -92,21 +108,6 @@ function setup() {
src = jsyaml.safeLoad(fullcode.value);
rebuildGraph(src);
});
document.querySelector("#saveSnippet").onclick = () => {
const code = document.querySelector("#snippet");
console.log(code.currentNode);
if (code.currentNode) {
code.currentNode.updateNode(jsyaml.safeLoad(code.value));
}
};
document.querySelector("#deleteSnippet").onclick = () => {
const code = document.querySelector("#snippet");
console.log(code.currentNode);
if (code.currentNode) {
code.currentNode.deleteNode();
}
};
}
setup();