fix: change node size so that font-size is 1em

frontend/src/lib/components/Node.svelte

@@ -51,8 +51,8 @@
     box-sizing: border-box;
     user-select: none !important;
     cursor: pointer;
-    width: 50px;
+    width: 100px;
-    color: white;
+    color: var(--text-color);
     transform: translate3d(var(--nx), var(--ny), 0);
     z-index: 1;
     font-weight: 300;

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]}`}
   />
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -69,11 +72,7 @@
       --hover-path: path("${pathHover}");
     `}
   >
-    <path
+    <path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"
-      vector-effect="non-scaling-stroke"
-      fill="none"
-      stroke="white"
-      stroke-width="0.1"
     ></path>
   </svg>
 </div>
@@ -82,18 +81,20 @@
   .wrapper {
     position: relative;
     width: 100%;
-    height: 12.5px;
+    height: 25px;
   }
 
   .click-target {
     position: absolute;
-    right: -2.5px;
+    right: 0px;
-    top: 3.8px;
+    top: 50%;
-    height: 5px;
+    transform: translateX(50%) translateY(-50%);
-    width: 5px;
+    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;

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;
+    width: 15px;
-    height: 6px;
+    height: 15px;
-    top: 9.5px;
-    left: -3px;
   }
 
   .large.target {
-    width: 15px;
+    width: 30px;
-    height: 15px;
+    height: 30px;
-    top: 5px;
-    left: -7.5px;
     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; */
   }
 </style>

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 @@
   <Canvas shadows={false}>
     <Camera bind:position={cameraPosition} />
 
-    <Background
+    <Background {cameraPosition} {width} {height} />
-      cx={cameraPosition[0]}
-      cy={cameraPosition[1]}
-      cz={cameraPosition[2]}
-      {width}
-      {height}
-    />
   </Canvas>
 </Hst.Story>
-

frontend/src/lib/components/edges/Edge.svelte

@@ -64,7 +64,7 @@
   position.y={0.8}
   rotation.x={-Math.PI / 2}
 >
-  <T.CircleGeometry args={[0.1, 32]} />
+  <T.CircleGeometry args={[0.2, 16]} />
   <T.MeshBasicMaterial color={0x555555} />
 </T.Mesh>
 
@@ -74,7 +74,7 @@
   position.y={0.8}
   rotation.x={-Math.PI / 2}
 >
-  <T.CircleGeometry args={[0.1, 32]} />
+  <T.CircleGeometry args={[0.2, 16]} />
   <T.MeshBasicMaterial color={0x555555} />
 </T.Mesh>
 

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?.x ?? node.position.x) + 10,
-        (node?.tmp?.y ?? node.position.y) + 0.625 + 2.5 * index,
+        (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;
             }

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,
+          x: x * 15,
-          y: y * 10,
+          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,
+        x: width * 15,
-        y: (height - 1) * 10,
+        y: (height - 1) * 20,
       },
       type: "output",
       props: {},