Add debug shapes to preview SVG

Author: dpolugic

src/preview.tsx

@@ -1,35 +1,36 @@
+import React from 'react'
 import { getBoundariesFromPattern } from './functions'
 import { State } from './types'
 
-export const Preview: React.FC<{ state: State }> = ({ state }) => {
-  const viewBox = (() => {
-    let xMin = 0
-    let xMax = 1
-    let yMin = 0
-    let yMax = 1
-
-    // Make sure that default viewBox contains entire pattern
-    for (const p of state.patterns) {
-      const b = getBoundariesFromPattern(p)
-
-      xMin = Math.min(xMin, b.xMin)
-      xMax = Math.max(xMax, b.xMax)
-      yMin = Math.min(yMin, b.yMin)
-      yMax = Math.max(yMax, b.yMax)
-    }
-
-    // Add some spacing around the bounding box
-    xMin -= 0.1
-    xMax += 0.1
-    yMin -= 0.1
-    yMax += 0.1
-
-    return `${xMin} ${yMin} ${xMax - xMin} ${yMax - yMin}`
-  })()
+function getViewBox(state: State): string {
+  let xMin = 0
+  let xMax = 1
+  let yMin = 0
+  let yMax = 1
+
+  // Make sure that default viewBox contains entire pattern
+  for (const p of state.patterns) {
+    const b = getBoundariesFromPattern(p)
+
+    xMin = Math.min(xMin, b.xMin)
+    xMax = Math.max(xMax, b.xMax)
+    yMin = Math.min(yMin, b.yMin)
+    yMax = Math.max(yMax, b.yMax)
+  }
+
+  // Add some spacing around the bounding box
+  xMin -= 0.1
+  xMax += 0.1
+  yMin -= 0.1
+  yMax += 0.1
+
+  return `${xMin} ${yMin} ${xMax - xMin} ${yMax - yMin}`
+}
 
+export const Preview: React.FC<{ state: State }> = ({ state }) => {
   return (
     <div className='border-1 border-amber-300 aspect-square'>
-      <svg viewBox={viewBox} xmlns='http://www.w3.org/2000/svg' className='w-full aspect-square'>
+      <svg viewBox={getViewBox(state)} xmlns='http://www.w3.org/2000/svg' className='w-full aspect-square'>
         <rect
           className='stroke-amber-100'
           vectorEffect='non-scaling-stroke'
@@ -43,18 +44,70 @@ export const Preview: React.FC<{ state: State }> = ({ state }) => {
         {state.patterns.map((p, i) => {
           const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(p)
 
+          const width = xMax - xMin
+          const height = yMax - yMin
+
           return (
-            <rect
-              key={i}
-              className='stroke-amber-100'
-              vectorEffect='non-scaling-stroke'
-              fill='none'
-              strokeWidth='1px'
-              x={xMin.toFixed(3)}
-              y={yMin.toFixed(3)}
-              width={(xMax - xMin).toFixed(3)}
-              height={(yMax - yMin).toFixed(3)}
-            />
+            <React.Fragment key={i}>
+              <rect
+                className='stroke-amber-100'
+                vectorEffect='non-scaling-stroke'
+                fill='none'
+                strokeWidth='1px'
+                x={xMin.toFixed(3)}
+                y={yMin.toFixed(3)}
+                width={width.toFixed(3)}
+                height={height.toFixed(3)}
+              />
+              {/* Partial line from anchor to target in order to show the direction */}
+              {(() => {
+                const [anchorX, anchorY] = p.anchor
+                const [targetX, targetY] = p.target
+
+                const x1 = anchorX
+                const y1 = anchorY
+                const x2 = targetX - (targetX - anchorX) * 0.5
+                const y2 = targetY - (targetY - anchorY) * 0.5
+
+                return (
+                  <line
+                    className='stroke-amber-100'
+                    vectorEffect='non-scaling-stroke'
+                    strokeWidth='1px'
+                    x1={x1.toFixed(3)}
+                    y1={y1.toFixed(3)}
+                    x2={x2.toFixed(3)}
+                    y2={y2.toFixed(3)}
+                  />
+                )
+              })()}
+              {/* Click surfaces for rotation and resizing actions */}
+              {[
+                // top left
+                { x: xMin, y: yMin, rotation: 0 },
+                // top right
+                { x: xMax, y: yMin, rotation: 90 },
+                // bottom right
+                { x: xMax, y: yMax, rotation: 180 },
+                // bottom left
+                { x: xMin, y: yMax, rotation: 270 },
+              ].map(({ x, y, rotation }, j) => {
+                const r_handle = 0.05 // Radius of the handle
+
+                // Define the base handle shape (for top-left corner)
+                // This creates a quarter-circle arc pointing outward from the corner
+                const basePathD = `M 0 0 L -${r_handle} 0 A ${r_handle} ${r_handle} 0 0 1 0 -${r_handle} Z`
+
+                return (
+                  <g
+                    key={`corner-handle-${i}-${j}`}
+                    transform={`translate(${x.toFixed(3)}, ${y.toFixed(3)}) rotate(${rotation})`}
+                  >
+                    <path d={basePathD} className='fill-slate-400 hover:fill-blue-600 cursor-grab' />
+                  </g>
+                )
+              })}
+            </React.Fragment>
           )
         })}
       </svg>