From 9a9a46d50379312d92dbcfed98697e9286177f7d Mon Sep 17 00:00:00 2001 From: Max Richter Date: Thu, 14 Mar 2024 13:02:09 +0100 Subject: [PATCH] fix: change node size so that font-size is 1em --- frontend/src/lib/components/Node.svelte | 4 +- frontend/src/lib/components/NodeHeader.svelte | 35 +++++++++--------- .../src/lib/components/NodeParameter.svelte | 37 ++++++++++--------- .../background/Background.story.svelte | 11 +----- frontend/src/lib/components/edges/Edge.svelte | 4 +- .../src/lib/components/graph/Graph.svelte | 20 +++++----- frontend/src/lib/graph-manager.ts | 10 ++--- 7 files changed, 59 insertions(+), 62 deletions(-) diff --git a/frontend/src/lib/components/Node.svelte b/frontend/src/lib/components/Node.svelte index d14544f..b9fffe5 100644 --- a/frontend/src/lib/components/Node.svelte +++ b/frontend/src/lib/components/Node.svelte @@ -51,8 +51,8 @@ box-sizing: border-box; user-select: none !important; cursor: pointer; - width: 50px; - color: white; + width: 100px; + color: var(--text-color); transform: translate3d(var(--nx), var(--ny), 0); z-index: 1; font-weight: 300; diff --git a/frontend/src/lib/components/NodeHeader.svelte b/frontend/src/lib/components/NodeHeader.svelte index 8d43036..bf1c521 100644 --- a/frontend/src/lib/components/NodeHeader.svelte +++ b/frontend/src/lib/components/NodeHeader.svelte @@ -6,6 +6,10 @@ export let node: Node; const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket"); + const getSocketPosition = + getContext<(node: Node, index: number) => [number, number]>( + "getSocketPosition", + ); function handleMouseDown(event: MouseEvent) { event.stopPropagation(); @@ -13,7 +17,7 @@ setDownSocket({ node, index: 0, - position: [node.position.x + 5, node.position.y + 0.625], + position: getSocketPosition(node, 0), }); } @@ -22,7 +26,7 @@ const aspectRatio = 0.25; const path = createNodePath({ - depth: 4.5, + depth: 4, height: 24, y: 50, cornerTop, @@ -38,7 +42,7 @@ aspectRatio, }); const pathHover = createNodePath({ - depth: 6, + depth: 5, height: 30, y: 50, cornerTop, @@ -56,7 +60,6 @@ role="button" tabindex="0" on:mousedown={handleMouseDown} - style={`background: var(--node-hovered-out-${node.tmp?.type?.outputs?.[0]}`} /> - @@ -82,18 +81,20 @@ .wrapper { position: relative; width: 100%; - height: 12.5px; + height: 25px; } .click-target { position: absolute; - right: -2.5px; - top: 3.8px; - height: 5px; - width: 5px; + right: 0px; + top: 50%; + transform: translateX(50%) translateY(-50%); + height: 15px; + width: 15px; z-index: 100; border-radius: 50%; - opacity: 0.1; + /* background: red; */ + /* opacity: 0.2; */ } .click-target:hover + svg path { @@ -114,14 +115,14 @@ svg path { stroke-width: 0.2px; transition: 0.2s; - fill: #131313; + fill: var(--background-color-lighter); stroke: var(--stroke); stroke-width: var(--stroke-width); d: var(--path); } .content { - font-size: 0.5em; + font-size: 1em; display: flex; align-items: center; padding-left: 5px; diff --git a/frontend/src/lib/components/NodeParameter.svelte b/frontend/src/lib/components/NodeParameter.svelte index 4caae0a..918565c 100644 --- a/frontend/src/lib/components/NodeParameter.svelte +++ b/frontend/src/lib/components/NodeParameter.svelte @@ -8,10 +8,13 @@ export let node: Node; export let input: NodeInput; export let id: string; - export let index: number; export let isLast = false; const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket"); + const getSocketPosition = + getContext<(node: Node, index: string) => [number, number]>( + "getSocketPosition", + ); function handleMouseDown(ev: MouseEvent) { ev.preventDefault(); @@ -19,7 +22,7 @@ setDownSocket({ node, index: id, - position: [node.position.x, node.position.y + 2.5 + index * 2.5], + position: getSocketPosition(node, id), }); } @@ -30,7 +33,7 @@ const path = createNodePath({ depth: 4, height: 12, - y: 50, + y: 51, cornerBottom, leftBump, aspectRatio, @@ -99,29 +102,27 @@ .wrapper { position: relative; width: 100%; - height: 25px; + height: 50px; transform: translateY(-0.5px); } .target { position: absolute; border-radius: 50%; + top: 50%; + transform: translateY(-50%) translateX(-50%); /* background: red; */ /* opacity: 0.1; */ } .small.target { - width: 6px; - height: 6px; - top: 9.5px; - left: -3px; + width: 15px; + height: 15px; } .large.target { - width: 15px; - height: 15px; - top: 5px; - left: -7.5px; + width: 30px; + height: 30px; cursor: unset; pointer-events: none; } @@ -150,13 +151,13 @@ width: 100%; box-sizing: border-box; border-radius: 2px; - font-size: 0.5em; + font-size: 1em; padding: 2px 2px; background: #111; } label { - font-size: 0.5em; + font-size: 1em; } svg { @@ -172,7 +173,7 @@ svg path { transition: 0.2s; - fill: #060606; + fill: var(--background-color); stroke: var(--stroke); stroke-width: var(--stroke-width); d: var(--path); @@ -180,15 +181,15 @@ :global(.hovering-sockets) .large:hover ~ svg path { d: var(--hover-path); - fill: #131313; + /* fill: #131313; */ } :global(.hovering-sockets) .small:hover ~ svg path { - fill: #161616; + /* fill: #161616; */ } .disabled svg path { d: var(--hover-path-disabled) !important; - fill: #060606 !important; + /* fill: #060606 !important; */ } diff --git a/frontend/src/lib/components/background/Background.story.svelte b/frontend/src/lib/components/background/Background.story.svelte index f88f68a..dc09cd6 100644 --- a/frontend/src/lib/components/background/Background.story.svelte +++ b/frontend/src/lib/components/background/Background.story.svelte @@ -3,7 +3,7 @@ export let Hst: Hst; import Background from "./Background.svelte"; import { Canvas } from "@threlte/core"; - import Camera from "./Camera.svelte"; + import Camera from "../Camera.svelte"; let width = globalThis.innerWidth || 100; let height = globalThis.innerHeight || 100; @@ -16,13 +16,6 @@ - + - diff --git a/frontend/src/lib/components/edges/Edge.svelte b/frontend/src/lib/components/edges/Edge.svelte index fa154e2..93f9c6b 100644 --- a/frontend/src/lib/components/edges/Edge.svelte +++ b/frontend/src/lib/components/edges/Edge.svelte @@ -64,7 +64,7 @@ position.y={0.8} rotation.x={-Math.PI / 2} > - + @@ -74,7 +74,7 @@ position.y={0.8} rotation.x={-Math.PI / 2} > - + diff --git a/frontend/src/lib/components/graph/Graph.svelte b/frontend/src/lib/components/graph/Graph.svelte index fd36ba8..1713501 100644 --- a/frontend/src/lib/components/graph/Graph.svelte +++ b/frontend/src/lib/components/graph/Graph.svelte @@ -28,7 +28,7 @@ let camera: OrthographicCamera; const minZoom = 4; - const maxZoom = 150; + const maxZoom = 100; let mousePosition = [0, 0]; let mouseDown: null | [number, number] = null; let boxSelection = false; @@ -80,16 +80,16 @@ } const node = graph.getNodeType(nodeTypeId); if (!node?.inputs) { - return 1.25; + return 2.5; } - const height = 1.25 + 2.5 * Object.keys(node.inputs).length; + const height = 2.5 + 5 * Object.keys(node.inputs).length; nodeHeightCache[nodeTypeId] = height; return height; } setContext("isNodeInView", (node: NodeType) => { const height = getNodeHeight(node.type); - const width = 5; + const width = 10; return ( // check x-axis node.position.x > cameraBounds[0] - width && @@ -159,14 +159,14 @@ ): [number, number] { if (typeof index === "number") { return [ - (node?.tmp?.x ?? node.position.x) + 5, - (node?.tmp?.y ?? node.position.y) + 0.625 + 2.5 * index, + (node?.tmp?.x ?? node.position.x) + 10, + (node?.tmp?.y ?? node.position.y) + 1.25 + 5 * index, ]; } else { const _index = Object.keys(node.tmp?.type?.inputs || {}).indexOf(index); return [ node?.tmp?.x ?? node.position.x, - (node?.tmp?.y ?? node.position.y) + 2.5 + 2.5 * _index, + (node?.tmp?.y ?? node.position.y) + 5 + 5 * _index, ]; } } @@ -199,7 +199,7 @@ } } - if (_socket && smallestDist < 0.3) { + if (_socket && smallestDist < 0.9) { mousePosition = _socket.position; $hoveredSocket = _socket; } else { @@ -302,7 +302,9 @@ if (activeNode && newNode) { const edge = graph.getNodesBetween(activeNode, newNode); if (edge) { - $selectedNodes = new Set(edge.map((n) => n.id)); + const selected = new Set(edge.map((n) => n.id)); + selected.delete(nodeId); + $selectedNodes = selected; } $activeNodeId = nodeId; } diff --git a/frontend/src/lib/graph-manager.ts b/frontend/src/lib/graph-manager.ts index 3483c52..6344ba2 100644 --- a/frontend/src/lib/graph-manager.ts +++ b/frontend/src/lib/graph-manager.ts @@ -150,7 +150,7 @@ export class GraphManager { if (toParents.includes(from)) { return toParents.splice(toParents.indexOf(from)); } else if (fromParents.includes(to)) { - return fromParents.splice(fromParents.indexOf(to)); + return [...fromParents.splice(fromParents.indexOf(to)), from]; } else { // these two nodes are not connected return; @@ -319,8 +319,8 @@ export class GraphManager { visible: false, }, position: { - x: x * 7.5, - y: y * 10, + x: x * 15, + y: y * 20, }, props: i == 0 ? { value: 0 } : {}, type: i == 0 ? "input/float" : "math", @@ -335,8 +335,8 @@ export class GraphManager { visible: false, }, position: { - x: width * 7.5, - y: (height - 1) * 10, + x: width * 15, + y: (height - 1) * 20, }, type: "output", props: {},