Add id to patterns

Author: dpolugic

package.json

@@ -14,7 +14,7 @@
     "check-format": "prettier --check ./src",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest --watch",
-    "check": "pnpm run lint && pnpm run check-ts && pnpm run find-unused && pnpm run check-format && pnpm run test"
+    "check": "pnpm run check-lint && pnpm run check-ts && pnpm run find-unused && pnpm run check-format && pnpm run test"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.7",

src/App.tsx

@@ -6,6 +6,7 @@ import {
   findClickedScreenOrPattern,
   getMousePoint,
   getRelativePatternPosition,
+  randomId,
 } from './functions'
 import { useStableFunction } from './hooks'
 import { Preview } from './preview'
@@ -30,10 +31,10 @@ const getDraftState = (state: State, draftClick: DraftClick, mousePosition: Abso
 
   let newDraft = getRelativePatternPosition(draftPatternRelative, state.screens[screenIndex]!)
   for (const k of nestedPath) {
-    newDraft = getRelativePatternPosition(newDraft, state.patterns[k]!)
+    newDraft = getRelativePatternPosition(newDraft, state.patterns[k]!.pattern)
   }
 
-  return { ...state, patterns: state.patterns.concat(newDraft) }
+  return { ...state, patterns: state.patterns.concat({ id: randomId(), pattern: newDraft }) }
 }
 
 type DraftClick = {
@@ -187,19 +188,6 @@ function App() {
 
             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,

src/draw/patterns.worker.ts

@@ -77,7 +77,7 @@ self.onmessage = event => {
 function generatePatterns() {
   for (const { depth, patterns } of streamBatchedDrawablePatterns({
     state: {
-      patterns: [{ anchor: [0, 0], target: [0.5, 0.5] } as RelativePattern],
+      patterns: [{ id: 'debug', pattern: { anchor: [0, 0], target: [0.5, 0.5] } as RelativePattern }],
       screens: [{ anchor: [0.2, 0.2], target: [0.8, 0.8] } as AbsolutePattern],
     },
     chunkSize: 5,

src/draw/stream-drawable-patterns.ts

@@ -97,7 +97,7 @@ export function* streamDrawablePatterns({
       break
     }
 
-    for (const pattern of state.patterns) {
+    for (const { pattern } of state.patterns) {
       // Get new pattern
       const newViewportPattern = combinePatterns(entry.currentPattern, pattern)
 

src/functions.ts

@@ -247,7 +247,11 @@ export const findClickedScreenOrPattern = (
   let best: ClickedPath | undefined = undefined
   for (let i = 0; i < screens.length; i++) {
     const screen = screens[i]!
-    const clickedPath = findClickedPattern(screen, patterns, point)
+    const clickedPath = findClickedPattern(
+      screen,
+      patterns.map(p => p.pattern),
+      point
+    )
 
     if (clickedPath !== undefined) {
       if (best === undefined || clickedPath.length > best.nestedPath.length) {
@@ -269,3 +273,8 @@ export const findClickedScreenOrPattern = (
 
   return best
 }
+
+export function randomId(): string {
+  // todo: use uuid or something
+  return Math.random().toString(36).substring(2, 15)
+}

src/preview.tsx

@@ -9,8 +9,8 @@ function getViewBox(state: State): string {
   let yMax = 1
 
   // Make sure that default viewBox contains entire pattern
-  for (const p of state.patterns) {
-    const b = getBoundariesFromPattern(p)
+  for (const { pattern } of state.patterns) {
+    const b = getBoundariesFromPattern(pattern)
 
     xMin = Math.min(xMin, b.xMin)
     xMax = Math.max(xMax, b.xMax)
@@ -71,8 +71,8 @@ export const Preview: React.FC<{ state: State }> = ({ state }) => {
         />
         <PartialLine anchor={[0, 0]} target={[1, 1]} />
 
-        {state.patterns.map((p, i) => {
-          const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(p)
+        {state.patterns.map(({ pattern }, i) => {
+          const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(pattern)
 
           const width = xMax - xMin
           const height = yMax - yMin
@@ -90,7 +90,7 @@ export const Preview: React.FC<{ state: State }> = ({ state }) => {
                 height={height.toFixed(3)}
               />
               {/* Partial line from anchor to target in order to show the direction */}
-              <PartialLine anchor={p.anchor} target={p.target} />
+              <PartialLine anchor={pattern.anchor} target={pattern.target} />
 
               {/* Click surfaces for rotation and resizing actions */}
               {[

src/types.ts

@@ -84,5 +84,8 @@ export type State = {
   screens: AbsolutePattern[]
 
   /** These are nested patterns. They are applied recursively to root-level patterns.*/
-  patterns: RelativePattern[]
+  patterns: {
+    id: string
+    pattern: RelativePattern
+  }[]
 }