Start working on pattern preview

Author: dpolugic

src/App.tsx

@@ -8,6 +8,7 @@ import {
   getRelativePatternPosition,
 } from './functions'
 import { useStableFunction } from './hooks'
+import { Preview } from './preview'
 import { AbsolutePattern, AbsolutePoint, NumberPair, RelativePattern, State } from './types'
 
 const getDraftState = (state: State, draftClick: DraftClick, mousePosition: AbsolutePoint): State => {
@@ -59,7 +60,23 @@ const BASE_STATE = {
   patterns: [],
 }
 
+const PreviewButton: React.FC<{ onClick: () => void; children: React.ReactNode }> = ({
+  onClick,
+  children,
+}) => {
+  return (
+    <button
+      className='text-amber-300 hover:text-black cursor-pointer p-2 hover:bg-amber-300'
+      type='button'
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
 function App() {
+  const [previewOpen, setPreviewOpen] = useState(false)
   const [canvasEl, setCanvasEl] = useState<HTMLCanvasElement | null>(null)
   const mousePositionRef = useRef<AbsolutePoint>(BASE_MOUSE_POSITION)
 
@@ -145,45 +162,75 @@ function App() {
   }, [draftClick, state, resizeCount, ctx])
 
   return (
-    <canvas
-      className='w-full h-full'
-      ref={setCanvasEl}
-      onPointerDown={e => {
-        if (!ctx) return
-
-        const mousePoint = getMousePoint(ctx, e)
-
-        // create draft screen based on current cursor position
-        setDraftClick({
-          anchor: mousePoint,
-          clickedPath: findClickedScreenOrPattern(state, mousePoint),
-        })
-      }}
-      onPointerUp={e => {
-        if (!ctx) return
-        if (!draftClick) return
-
-        // reset origin. note: this is async so we can still use the value below.
-        setDraftClick(undefined)
-
-        const mousePoint = getMousePoint(ctx, e)
-
-        const [x1, y1] = draftClick.anchor
-        const [x2, y2] = mousePoint
-
-        // validate size, ignore drawings that are too small (arbitrary)
-        // todo: convert to viewport size and check pixels
-        if (Math.abs(x2 - x1) < 0.01) return
-        if (Math.abs(y2 - y1) < 0.01) return
-
-        setState(prevState => getDraftState(prevState, draftClick, mousePoint))
-      }}
-      onPointerMove={e => {
-        if (!ctx) return
-
-        mousePositionRef.current = getMousePoint(ctx, e)
-      }}
-    />
+    <div className='size-full flex'>
+      {previewOpen ? (
+        <div className='flex-1/3 border-r-amber-300 border-r-1'>
+          <div className='flex gap-2 items-center justify-between'>
+            <h2 className='text-amber-300'>preview (wip)</h2>
+            <PreviewButton onClick={() => setPreviewOpen(false)}>x</PreviewButton>
+          </div>
+          <Preview state={state} />
+        </div>
+      ) : (
+        <div className=' border-r-amber-300 border-r-1'>
+          <PreviewButton onClick={() => setPreviewOpen(true)}>&gt;</PreviewButton>
+        </div>
+      )}
+      <div className='flex-2/3'>
+        <canvas
+          className='size-full'
+          ref={setCanvasEl}
+          onPointerDown={e => {
+            if (!ctx) return
+
+            const mousePoint = getMousePoint(ctx, e)
+
+            console.log(
+              'pointerdown',
+              e.clientX,
+              e.width,
+              e.pageX,
+              e.screenX,
+              e.movementX,
+              ctx.canvas.width,
+              ctx.canvas.clientWidth,
+              e,
+              getMousePoint(ctx, e)
+            )
+
+            // create draft screen based on current cursor position
+            setDraftClick({
+              anchor: mousePoint,
+              clickedPath: findClickedScreenOrPattern(state, mousePoint),
+            })
+          }}
+          onPointerUp={e => {
+            if (!ctx) return
+            if (!draftClick) return
+
+            // reset origin. note: this is async so we can still use the value below.
+            setDraftClick(undefined)
+
+            const mousePoint = getMousePoint(ctx, e)
+
+            const [x1, y1] = draftClick.anchor
+            const [x2, y2] = mousePoint
+
+            // validate size, ignore drawings that are too small (arbitrary)
+            // todo: convert to viewport size and check pixels
+            if (Math.abs(x2 - x1) < 0.01) return
+            if (Math.abs(y2 - y1) < 0.01) return
+
+            setState(prevState => getDraftState(prevState, draftClick, mousePoint))
+          }}
+          onPointerMove={e => {
+            if (!ctx) return
+
+            mousePositionRef.current = getMousePoint(ctx, e)
+          }}
+        />
+      </div>
+    </div>
   )
 }
 

src/functions.ts

@@ -40,7 +40,7 @@ export const mutateBoundariesFromPattern = (() => {
   }
 })()
 
-const getBoundariesFromPattern = <N extends PatternNumber>(pattern: Pattern<N>): Boundaries<N> => {
+export const getBoundariesFromPattern = <N extends PatternNumber>(pattern: Pattern<N>): Boundaries<N> => {
   const obj: Boundaries<N> = { xMin: 0 as N, xMax: 0 as N, yMin: 0 as N, yMax: 0 as N }
   mutateBoundariesFromPattern(pattern, obj)
   return obj
@@ -161,7 +161,11 @@ export const getMousePoint = (
   ctx: CanvasRenderingContext2D,
   mouseEvent: React.MouseEvent<HTMLCanvasElement, MouseEvent>
 ): AbsolutePoint => {
-  const mousePosition = [mouseEvent.clientX, mouseEvent.clientY] satisfies NumberPair as ViewportPoint
+  const canvasRect = ctx.canvas.getBoundingClientRect()
+  const mousePosition = [
+    mouseEvent.clientX - canvasRect.x,
+    mouseEvent.clientY - canvasRect.y,
+  ] satisfies NumberPair as ViewportPoint
 
   return mapPointFromViewportSpace(mousePosition, getScreenSize(ctx))
 }

src/preview.tsx

@@ -0,0 +1,28 @@
+import { getBoundariesFromPattern } from './functions'
+import { State } from './types'
+
+export const Preview: React.FC<{ state: State }> = ({ state }) => {
+  return (
+    <div className='border-1 border-amber-300 aspect-square'>
+      <svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' className='w-full aspect-square'>
+        {state.patterns.map((p, i) => {
+          const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(p)
+
+          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)}
+            />
+          )
+        })}
+      </svg>
+    </div>
+  )
+}