feat(theme): merge edge and connection color

app/src/lib/graph-interface/edges/Edge.svelte

@@ -2,19 +2,19 @@
   import { colors } from '../graph/colors.svelte';
 
   const circleMaterial = new MeshBasicMaterial({
-    color: colors.edge.clone(),
+    color: colors.connection.clone(),
     toneMapped: false
   });
 
-  let lineColor = $state(colors.edge.clone().convertSRGBToLinear());
+  let lineColor = $state(colors.connection.clone().convertSRGBToLinear());
 
   $effect.root(() => {
     $effect(() => {
       if (appSettings.value.theme === undefined) {
         return;
       }
-      circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
-      lineColor = colors.edge.clone().convertSRGBToLinear();
+      circleMaterial.color = colors.connection.clone().convertSRGBToLinear();
+      lineColor = colors.connection.clone().convertSRGBToLinear();
     });
   });
 

app/src/lib/graph-interface/graph/colors.svelte.ts

@@ -9,7 +9,7 @@ const variables = [
   'outline',
   'active',
   'selected',
-  'edge'
+  'connection'
 ] as const;
 
 function getColor(variable: (typeof variables)[number]) {

app/src/lib/settings/NestedSettings.svelte

@@ -211,7 +211,7 @@
   .first-level.input {
     padding-left: 1em;
     padding-right: 1em;
-    padding-bottom: 1px;
+    padding-bottom: 0.5px;
     gap: 3px;
   }
 

packages/ui/src/lib/app.css

@@ -11,7 +11,6 @@
 @source inline("{hover:,}{bg-,outline-,text-,}selected");
 @source inline("{hover:,}{bg-,outline-,text-,}outline{!,}");
 @source inline("{hover:,}{bg-,outline-,text-,}connection");
-@source inline("{hover:,}{bg-,outline-,text-,}edge");
 @source inline("{hover:,}{bg-,outline-,text-,}text");
 
 /* fira-code-300 - latin */
@@ -72,7 +71,6 @@
 
   --color-outline: var(--neutral-400);
   --color-connection: #333333;
-  --color-edge: var(--connection, var(--color-outline));
 
   --color-text: var(--neutral-200);
 }
@@ -89,14 +87,13 @@ html {
   --color-layer-0: var(--neutral-900);
   --color-layer-1: var(--neutral-500);
   --color-layer-2: var(--neutral-400);
-  --color-layer-3: var(--neutral-200);
+  --color-layer-3: var(--neutral-300);
 
   --color-active: #ffffff;
   --color-selected: #c65a19;
 
-  --color-outline: var(--neutral-400);
+  --color-outline: #3e3e3e;
   --color-connection: #333333;
-  --color-edge: var(--connection, var(--color-outline));
 
   --color-text-color: var(--neutral-200);
 }
@@ -113,7 +110,7 @@ html.theme-light {
   --color-layer-0: var(--neutral-100);
   --color-layer-1: var(--neutral-100);
   --color-layer-2: var(--neutral-200);
-  --color-layer-3: var(--neutral-500);
+  --color-layer-3: var(--neutral-300);
   --color-active: #000000;
   --color-selected: #c65a19;
   --color-connection: #888;

packages/ui/src/lib/inputs/InputShape.svelte

@@ -121,6 +121,11 @@
     let vx = (mouseDown[0] - ev.clientX) * (100 / svgRect.width);
     let vy = (mouseDown[1] - ev.clientY) * (100 / svgRect.height);
 
+    if (ev.shiftKey) {
+      vx /= 10;
+      vy /= 10;
+    }
+
     let x = downCirclePosition[0] + ((isMirroredEvent ? 1 : -1) * vx);
     let y = downCirclePosition[1] - vy;
 
@@ -200,16 +205,17 @@
     onmousedown={handleMouseDown}
   >
     <path d={pathD} style:fill="var(--color-layer-3)" style:opacity={0.3} />
-    <path d={pathD} fill="none" stroke="var(--color-layer-2)" />
+    <path d={pathD} fill="none" stroke="var(--color-layer-3)" />
     {#if mirror}
       {#each groupedPoints as p, i (i)}
         {@const x = 100 - p[0]}
         {@const y = p[1]}
         <circle
+          class:active={isMirroredEvent && draggingIndex === i}
           data-index={i}
           cx={x}
           cy={y}
-          r={2}
+          r={3}
         >
         </circle>
       {/each}
@@ -217,10 +223,11 @@
 
     {#each groupedPoints as p, i (i)}
       <circle
+        class:active={!isMirroredEvent && draggingIndex === i}
         data-index={i}
         cx={p[0]}
         cy={p[1]}
-        r={2}
+        r={3}
       >
       </circle>
     {/each}
@@ -231,6 +238,10 @@
   .wrapper {
     width: 100%;
     aspect-ratio: 1;
+    background-color: var(--color-layer-2);
+    padding: 7px;
+    border-radius: 5px;
+    outline: solid thin var(--color-outline);
   }
 
   svg {
@@ -240,13 +251,15 @@
   }
 
   circle {
-    fill: var(--color-layer-2);
     cursor: pointer;
     stroke: transparent;
-    transition: stroke 0.2s ease;
-    stroke-width: 0.5px;
-  }
-  circle:hover {
+    transition: fill 0.2s ease;
+    stroke-width: 1px;
     stroke: var(--color-layer-3); 
+    fill: var(--color-layer-2);
+  }
+  circle.active,
+  circle:hover {
+    fill: var(--color-layer-3);
   }
 </style>

packages/ui/src/routes/+page.svelte

@@ -19,7 +19,7 @@
   let selectValue = $state(0);
   const d = $derived(options[selectValue]);
   let checked = $state(false);
-  let mirrorShape = $state(false);
+  let mirrorShape = $state(true);
   let detailsOpen = $state(false);
 
   let points = $state([]);
@@ -51,7 +51,6 @@
     'selected',
     'outline',
     'connection',
-    'edge',
     'text'
   ];
 </script>
@@ -108,7 +107,9 @@
       </label>
       <p>{JSON.stringify(points)}</p>
     {/snippet}
-    <InputShape bind:value={points} mirror={mirrorShape} />
+    <div style:width="300px">
+      <InputShape bind:value={points} mirror={mirrorShape} />
+    </div>
   </Section>
 
   <Section title="Details" value={detailsOpen}>