More stable frame visualization

twm · Sep 7, 2024 · bd05240 · bd05240
1 parent 81fec83
commit bd05240
Showing 1 changed file with 40 additions and 32 deletions.
diff --git a/src/lib/Frame.svelte b/src/lib/Frame.svelte
@@ -2,11 +2,10 @@
     import {
         artX,
         artY,
-        artPadding,
         frameX,
         frameY,
         frameWidth,
-        rabbetWidth,
+        frameWidthMax,
         material,
     } from "$lib/stores"
 
@@ -22,43 +21,52 @@
     function trap(l: number, w: number): string {
         return `M 0 0 L${l} 0 L ${l - w} ${w} L ${w} ${w} Z`
     }
+
+    // The art is drawn centered in a field large enough to hold the largest
+    // possible frame so that it doesn't shift around or resize as the user
+    // plays with the frame width.
+    $: maxWidth = $artX + 2 * $frameWidthMax
+    $: maxHeight = $artY + 2 * $frameWidthMax
 </script>
 
-<svg viewBox={`0 0 ${$frameX} ${$frameY}`} width={$frameX} height={$frameY}>
-    <!-- the art -->
-    <rect
-        x={$frameWidth - $rabbetWidth + $artPadding / 2}
-        y={$frameWidth - $rabbetWidth + $artPadding / 2}
-        width={$artX}
-        height={$artY}
-        fill="#eee"
-    />
-    <!-- the frame -->
-    <path id="top" d={trap($frameX, $frameWidth)} fill={$material.fill} />
-    <path
-        id="right"
-        d={trap($frameY, $frameWidth)}
-        fill={$material.fill}
-        transform={`translate(${$frameX} 0) rotate(90)`}
-    />
-    <path
-        id="bottom"
-        d={trap($frameX, $frameWidth)}
-        fill={$material.fill}
-        transform={`translate(${$frameX} ${$frameY}) rotate(180)`}
-    />
-    <path
-        id="left"
-        d={trap($frameY, $frameWidth)}
-        fill={$material.fill}
-        transform={`translate(0 ${$frameY}) rotate(270)`}
-    />
+<svg
+    viewBox={`${-maxWidth / 2} ${-maxHeight / 2} ${maxWidth} ${maxHeight}`}
+    width={maxWidth}
+    height={maxHeight}
+>
+    <!-- the art, centered on (0, 0) -->
+    <g transform={`translate(${-$artX / 2}, ${-$artY / 2})`}>
+        <rect width={$artX} height={$artY} fill="#eee" />
+    </g>
+
+    <!-- the frame, centered on (0, 0) -->
+    <g transform={`translate(${-$frameX / 2}, ${-$frameY / 2})`}>
+        <path id="top" d={trap($frameX, $frameWidth)} fill={$material.fill} />
+        <path
+            id="right"
+            d={trap($frameY, $frameWidth)}
+            fill={$material.fill}
+            transform={`translate(${$frameX} 0) rotate(90)`}
+        />
+        <path
+            id="bottom"
+            d={trap($frameX, $frameWidth)}
+            fill={$material.fill}
+            transform={`translate(${$frameX} ${$frameY}) rotate(180)`}
+        />
+        <path
+            id="left"
+            d={trap($frameY, $frameWidth)}
+            fill={$material.fill}
+            transform={`translate(0 ${$frameY}) rotate(270)`}
+        />
+    </g>
 </svg>
 
 <style>
     svg {
         width: 100%;
         height: auto;
-        max-height: 100vh;
+        max-height: calc(100vh - 9rem);
     }
 </style>