Feat/fix examples (#970)

examples/core-example/src/App.tsx

@@ -1,55 +1,87 @@
-import { Renderer, TLPointerEventHandler } from '@tldraw/core'
+import { Renderer, TLBinding, TLPage, TLPageState, TLPointerEventHandler } from '@tldraw/core'
+import Vec from '@tldraw/vec'
 import * as React from 'react'
 import { RectUtil, Shape } from './shapes'
-import { Page, PageState } from './stores'
-
-const page = new Page({
-  id: 'page1',
-  shapes: {
-    rect1: {
-      id: 'rect1',
-      type: 'rect',
-      parentId: 'page1',
-      name: 'Rect',
-      childIndex: 1,
-      rotation: 0,
-      point: [0, 0],
-      size: [100, 100],
-    },
-  },
-  bindings: {},
-})
-
-const pageState = new PageState()
 
 const shapeUtils = {
   rect: new RectUtil(),
 }
 
 export default function App() {
+  const [page, setPage] = React.useState<TLPage<Shape, TLBinding>>({
+    id: 'page1',
+    shapes: {
+      box1: {
+        id: 'box1',
+        type: 'rect',
+        parentId: 'page1',
+        name: 'Box',
+        childIndex: 1,
+        rotation: 0,
+        point: [0, 0],
+        size: [100, 100],
+      },
+    },
+    bindings: {},
+  })
+
+  const [pageState, setPageState] = React.useState<TLPageState>({
+    id: 'page',
+    selectedIds: [],
+    hoveredId: undefined,
+    camera: {
+      point: [0, 0],
+      zoom: 1,
+    },
+  })
   const onHoverShape: TLPointerEventHandler = (e) => {
-    pageState.setHoveredId(e.target)
+    setPageState({
+      ...pageState,
+      hoveredId: e.target,
+    })
   }
 
   const onUnhoverShape: TLPointerEventHandler = () => {
-    pageState.setHoveredId(undefined)
+    setPageState({
+      ...pageState,
+      hoveredId: null,
+    })
   }
 
   const onPointShape: TLPointerEventHandler = (info) => {
-    pageState.setSelectedIds(info.target)
+    setPageState({ ...pageState, selectedIds: [info.target] })
   }
 
   const onPointCanvas: TLPointerEventHandler = () => {
-    pageState.clearSelectedIds()
+    setPageState({ ...pageState, selectedIds: [] })
   }
 
   const onDragShape: TLPointerEventHandler = (e) => {
-    page.dragShape(e.target, e.point)
+    setPage((page) => {
+      const shape = page.shapes[e.target]
+
+      return {
+        ...page,
+        shapes: {
+          ...page.shapes,
+          [shape.id]: {
+            ...shape,
+            point: Vec.sub(e.point, Vec.div(shape.size, 2)),
+          },
+        },
+      }
+    })
   }
 
   const onPointerMove: TLPointerEventHandler = (info) => {
     if (info.shiftKey) {
-      pageState.pan(info.delta)
+      setPageState((prev) => ({
+        ...pageState,
+        camera: {
+          ...prev.camera,
+          point: Vec.add(prev.camera.point, info.delta),
+        },
+      }))
     }
   }
 

examples/core-example/src/stores.ts

@@ -1,66 +0,0 @@
-import { TLBounds, TLPage, TLPageState, Utils } from '@tldraw/core'
-import Vec from '@tldraw/vec'
-import type { Shape } from './shapes'
-
-export class Page implements TLPage<Shape> {
-  id
-  name
-  shapes
-  bindings
-
-  constructor(opts = {} as TLPage<Shape>) {
-    const { id = Utils.uniqueId(), name = 'page', shapes = {}, bindings = {} } = opts
-    this.id = id
-    this.name = name
-    this.shapes = shapes
-    this.bindings = bindings
-  }
-
-  dragShape(id: string, point: number[]) {
-    const shape = this.shapes[id]
-    shape.point = Vec.sub(point, Vec.div(shape.size, 2))
-  }
-}
-
-export class PageState implements TLPageState {
-  id
-  selectedIds
-  camera
-  brush?: TLBounds
-  pointedId?: string
-  hoveredId?: string
-  editingId?: string
-  bindingId?: string
-
-  constructor(opts = {} as TLPageState) {
-    const {
-      id = Utils.uniqueId(),
-      selectedIds = [],
-      camera = {
-        point: [0, 0],
-        zoom: 1,
-      },
-    } = opts
-    this.id = id
-    this.camera = camera
-    this.selectedIds = selectedIds
-  }
-
-  setHoveredId = (id: string | undefined) => {
-    this.hoveredId = id
-  }
-
-  setSelectedIds = (id: string) => {
-    if (!this.selectedIds.includes(id)) {
-      this.selectedIds = [id]
-    }
-  }
-
-  clearSelectedIds = () => {
-    this.selectedIds = []
-  }
-
-  pan = (point: number[]) => {
-    this.camera.point = Vec.add(this.camera.point, point)
-  }
-}