From 1d6ae65630c1fe280f7cce6333ab082c720b6a54 Mon Sep 17 00:00:00 2001 From: Max Richter Date: Mon, 11 Mar 2024 02:02:04 +0100 Subject: [PATCH] feat: implement first dragging edge prototype --- frontend/src/lib/components/Camera.svelte | 1 + frontend/src/lib/components/Edge.svelte | 6 +- frontend/src/lib/components/Graph.svelte | 79 ++++++++++++++----- frontend/src/lib/components/Node.svelte | 22 +++++- frontend/src/lib/components/NodeHeader.svelte | 26 +++++- .../src/lib/components/NodeParameter.svelte | 10 ++- frontend/src/lib/graph-manager.ts | 12 +-- frontend/src/lib/types.ts | 1 + frontend/src/routes/+page.svelte | 4 +- 9 files changed, 127 insertions(+), 34 deletions(-) diff --git a/frontend/src/lib/components/Camera.svelte b/frontend/src/lib/components/Camera.svelte index 78c4444..b315248 100644 --- a/frontend/src/lib/components/Camera.svelte +++ b/frontend/src/lib/components/Camera.svelte @@ -59,6 +59,7 @@ = + writable(false); let activeNodeId: string; function handleMouseMove(event: MouseEvent) { - if (!mouseDown) return; + if (!$mouseDown) return; mouseX = cameraPosition[0] + (event.clientX - width / 2) / cameraPosition[2]; @@ -39,12 +46,15 @@ if (!node) return; + if (!node.tmp) node.tmp = {}; + node.tmp.isMoving = true; + let newX = (node?.tmp?.downX || 0) + - (event.clientX - mouseDownX) / cameraPosition[2]; + (event.clientX - $mouseDown.x) / cameraPosition[2]; let newY = (node?.tmp?.downY || 0) + - (event.clientY - mouseDownY) / cameraPosition[2]; + (event.clientY - $mouseDown.y) / cameraPosition[2]; if (event.ctrlKey) { const snapLevel = getSnapLevel(); @@ -59,11 +69,15 @@ } function handleMouseDown(ev: MouseEvent) { - activeNodeId = (ev?.target as HTMLElement)?.getAttribute("data-node-id")!; + for (const node of ev.composedPath()) { + activeNodeId = (node as unknown as HTMLElement)?.getAttribute?.( + "data-node-id", + )!; + if (activeNodeId) break; + } + if (!activeNodeId) return; - mouseDown = true; - mouseDownX = ev.clientX; - mouseDownY = ev.clientY; + $mouseDown = { x: ev.clientX, y: ev.clientY, socket: null }; const node = graph.nodes.find((node) => node.id === activeNodeId); if (!node) return; node.tmp = node.tmp || {}; @@ -84,12 +98,23 @@ return 1; } + function isNodeInView(node: any) { + return ( + node.position.x > cameraBounds[0] && + node.position.x < cameraBounds[1] && + node.position.y > cameraBounds[2] && + node.position.y < cameraBounds[3] + ); + } + function handleMouseUp() { - mouseDown = false; + $mouseDown = false; const node = graph.getNode(activeNodeId); if (!node) return; + node.tmp = node.tmp || {}; + node.tmp.isMoving = false; const snapLevel = getSnapLevel(); node.position.x = snapToGrid(node.position.x, 5 / snapLevel); node.position.y = snapToGrid(node.position.y, 5 / snapLevel); @@ -99,22 +124,38 @@ } - + {#each edges as edge} {/each} +{#if $mouseDown && $mouseDown?.socket} + +{/if} +
{#each graph.nodes as node} - + {/each}
diff --git a/frontend/src/lib/components/Node.svelte b/frontend/src/lib/components/Node.svelte index a7d8688..777de2f 100644 --- a/frontend/src/lib/components/Node.svelte +++ b/frontend/src/lib/components/Node.svelte @@ -1,12 +1,17 @@
@@ -43,9 +57,17 @@ preserveAspectRatio="none" style={` --path: path("${createPath({ depth: 5, height: 27, y: 48.2 })}"); - --hover-path: path("${createPath({ depth: 8, height: 24 })}"); + --hover-path: path("${createPath({ depth: 6, height: 33, y: 48.2 })}"); `} > + * { - pointer-events: none; + /* pointer-events: none; */ } svg { diff --git a/frontend/src/lib/components/NodeParameter.svelte b/frontend/src/lib/components/NodeParameter.svelte index 4dcfc0e..b904332 100644 --- a/frontend/src/lib/components/NodeParameter.svelte +++ b/frontend/src/lib/components/NodeParameter.svelte @@ -56,7 +56,7 @@ preserveAspectRatio="none" style={` --path: path("${createPath({ depth: 5, height: 15, y: 48.2 })}"); - --hover-path: path("${createPath({ depth: 8, height: 24 })}"); + --hover-path: path("${createPath({ depth: 8, height: 24, y: 48.2 })}"); `} > @@ -78,6 +78,12 @@ height: 100%; justify-content: space-around; box-sizing: border-box; + opacity: calc((2 * var(--cz)) / 150 - 0.5); + opacity: calc((var(--cz) - 10) / 20); + } + + :global(.zoom-small) .content { + /* display: none; */ } input { @@ -102,7 +108,7 @@ svg { position: absolute; box-sizing: border-box; - pointer-events: none; + /* pointer-events: none; */ width: 100%; height: 100%; overflow: visible; diff --git a/frontend/src/lib/graph-manager.ts b/frontend/src/lib/graph-manager.ts index 214dcb0..00b83ae 100644 --- a/frontend/src/lib/graph-manager.ts +++ b/frontend/src/lib/graph-manager.ts @@ -75,16 +75,18 @@ export class GraphManager { } - static createEmptyGraph(): GraphManager { + static createEmptyGraph({ width = 20, height = 20 } = {}): GraphManager { const graph: Graph = { edges: [], nodes: [], }; - for (let i = 0; i < 40; i++) { - const x = i % 20; - const y = Math.floor(i / 20); + const amount = width * height; + + for (let i = 0; i < amount; i++) { + const x = i % width; + const y = Math.floor(i / height); graph.nodes.push({ id: `${i.toString()}`, @@ -93,7 +95,7 @@ export class GraphManager { }, position: { x: x * 7.5, - y: y * 5, + y: y * 10, }, props: i == 0 ? { value: 0 } : {}, type: i == 0 ? "input/float" : "math", diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index 4046b2a..2f8a9a5 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -7,6 +7,7 @@ export type Node = { downX?: number; downY?: number; visible?: boolean; + isMoving?: boolean; }, meta?: { title?: string; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index a10faf2..f621966 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,6 +1,7 @@
- + +