Improves performance for certain actions

components/canvas/canvas.tsx

 import BoundsBg from './bounds/bounds-bg'
 import Selected from './selected'
 import Handles from './bounds/handles'
-import { isMobile, throttle } from 'utils/utils'
+import { isMobile, screenToWorld, throttle } from 'utils/utils'
+import session from 'state/session'
+import { PointerInfo } from 'types'
+import { fastDrawUpdate } from 'state/hacks'
+import useCanvasEvents from 'hooks/useCanvasEvents'
 
 export default function Canvas() {
   const rCanvas = useRef<SVGSVGElement>(null)
   const rGroup = useRef<SVGGElement>(null)
 
   useCamera(rGroup)
-  useZoomEvents()
-
-  const isReady = useSelector((s) => s.isIn('ready'))
 
-  const handlePointerDown = useCallback((e: React.PointerEvent) => {
-    if (!inputs.canAccept(e.pointerId)) return
-    rCanvas.current.setPointerCapture(e.pointerId)
-    state.send('POINTED_CANVAS', inputs.pointerDown(e, 'canvas'))
-  }, [])
-
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    if (e.touches.length === 2) {
-      state.send('TOUCH_UNDO')
-    } else {
-      if (isMobile()) {
-        state.send('TOUCHED_CANVAS')
-      }
-    }
-  }, [])
+  useZoomEvents()
 
-  const handlePointerMove = useCallback((e: React.PointerEvent) => {
-    if (!inputs.canAccept(e.pointerId)) return
-    throttledPointerMove(inputs.pointerMove(e))
-  }, [])
+  const events = useCanvasEvents(rCanvas)
 
-  const handlePointerUp = useCallback((e: React.PointerEvent) => {
-    if (!inputs.canAccept(e.pointerId)) return
-    rCanvas.current.releasePointerCapture(e.pointerId)
-    state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
-  }, [])
+  const isReady = useSelector((s) => s.isIn('ready'))
 
   return (
-    <MainSVG
-      ref={rCanvas}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onTouchStart={handleTouchStart}
-    >
+    <MainSVG ref={rCanvas} {...events}>
       <Defs />
       {isReady && (
         <g ref={rGroup}>

components/canvas/page.tsx

-import { useSelector } from 'state'
-import { GroupShape } from 'types'
-import { deepCompareArrays, getPage } from 'utils/utils'
+import { getShapeUtils } from 'lib/shape-utils'
+import state, { useSelector } from 'state'
+import { Bounds, GroupShape, PageState } from 'types'
+import { boundsContain } from 'utils/bounds'
+import { deepCompareArrays, getPage, screenToWorld } from 'utils/utils'
 import Shape from './shape'
 
 /* 
 
 const noOffset = [0, 0]
 
+const viewportCache = new WeakMap<PageState, Bounds>()
+
 export default function Page() {
-  const currentPageShapeIds = useSelector(({ data }) => {
-    return Object.values(getPage(data).shapes)
-      .filter((shape) => shape.parentId === data.currentPageId)
-      .sort((a, b) => a.childIndex - b.childIndex)
-      .map((shape) => shape.id)
+  const currentPageShapeIds = useSelector((s) => {
+    const page = getPage(s.data)
+    const pageState = s.data.pageStates[page.id]
+
+    // if (!viewportCache.has(pageState)) {
+    //   const [minX, minY] = screenToWorld([0, 0], s.data)
+    //   const [maxX, maxY] = screenToWorld(
+    //     [window.innerWidth, window.innerHeight],
+    //     s.data
+    //   )
+    //   viewportCache.set(pageState, {
+    //     minX,
+    //     minY,
+    //     maxX,
+    //     maxY,
+    //     height: maxX - minX,
+    //     width: maxY - minY,
+    //   })
+    // }
+
+    // const viewport = viewportCache.get(pageState)
+
+    return (
+      Object.values(page.shapes)
+        .filter((shape) => shape.parentId === page.id)
+        // .filter((shape) => {
+        //   const shapeBounds = getShapeUtils(shape).getBounds(shape)
+        //   console.log(shapeBounds, viewport)
+        //   return boundsContain(viewport, shapeBounds)
+        // })
+        .sort((a, b) => a.childIndex - b.childIndex)
+        .map((shape) => shape.id)
+    )
   }, deepCompareArrays)
 
   const isSelecting = useSelector((s) => s.isIn('selecting'))

components/canvas/selected.tsx

     return Array.from(data.selectedIds.values())
   }, deepCompareArrays)
 
-  const isSelecting = useSelector((s) => s.isInAny('notPointing', 'pinching'))
+  const isSelecting = useSelector((s) => s.isIn('selecting'))
 
   if (!isSelecting) return null
 

components/canvas/shape.tsx

           {...events}
         />
       )}
-      {!shape.isHidden && <ReadShape isGroup={isGroup} id={id} style={style} />}
+      {!shape.isHidden && <RealShape isGroup={isGroup} id={id} style={style} />}
       {isGroup &&
         shape.children.map((shapeId) => (
           <Shape
   style: Partial<React.SVGProps<SVGUseElement>>
 }
 
-const ReadShape = memo(function RealShape({
+const RealShape = memo(function RealShape({
   isGroup,
   id,
   style,
   )
 }
 
-export { HoverIndicator }
-
-export default memo(Shape)
-
 function pp(n: number[]) {
   return '[' + n.map((v) => v.toFixed(1)).join(', ') + ']'
 }
+
+export { HoverIndicator }
+
+export default memo(Shape)

hooks/useCanvasEvents.ts

+import { MutableRefObject, useCallback } from 'react'
+import state from 'state'
+import { fastBrushSelect, fastDrawUpdate } from 'state/hacks'
+import inputs from 'state/inputs'
+import { isMobile } from 'utils/utils'
+
+export default function useCanvasEvents(
+  rCanvas: MutableRefObject<SVGGElement>
+) {
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    if (!inputs.canAccept(e.pointerId)) return
+    rCanvas.current.setPointerCapture(e.pointerId)
+    state.send('POINTED_CANVAS', inputs.pointerDown(e, 'canvas'))
+  }, [])
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    if (isMobile()) {
+      if (e.touches.length === 2) {
+        state.send('TOUCH_UNDO')
+      } else state.send('TOUCHED_CANVAS')
+    }
+  }, [])
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!inputs.canAccept(e.pointerId)) return
+
+    if (state.isIn('draw.editing')) {
+      fastDrawUpdate(inputs.pointerMove(e))
+      return
+    }
+
+    if (state.isIn('brushSelecting')) {
+      const info = inputs.pointerMove(e)
+      fastBrushSelect(info.point)
+      return
+    }
+
+    state.send('MOVED_POINTER', inputs.pointerMove(e))
+  }, [])
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    if (!inputs.canAccept(e.pointerId)) return
+    rCanvas.current.releasePointerCapture(e.pointerId)
+    state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
+  }, [])
+
+  return {
+    onPointerDown: handlePointerDown,
+    onTouchStart: handleTouchStart,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+  }
+}

hooks/useShapeEvents.ts

   const handlePointerMove = useCallback(
     (e: React.PointerEvent) => {
       if (!inputs.canAccept(e.pointerId)) return
+
       if (isGroup) {
         state.send('MOVED_OVER_GROUP', inputs.pointerEnter(e, id))
       } else {

hooks/useZoomEvents.ts

 import inputs from 'state/inputs'
 import * as vec from 'utils/vec'
 import { useGesture } from 'react-use-gesture'
+import {
+  fastBrushSelect,
+  fastPanUpdate,
+  fastPinchCamera,
+  fastZoomUpdate,
+} from 'state/hacks'
 
 /**
  * Capture zoom gestures (pinches, wheels and pans) and send to the state.
     {
       onWheel: ({ event, delta }) => {
         if (event.ctrlKey) {
-          state.send('ZOOMED_CAMERA', {
-            delta: delta[1],
-            ...inputs.wheel(event as WheelEvent),
-          })
+          const { point } = inputs.wheel(event as WheelEvent)
+          fastZoomUpdate(point, delta[1])
+          // state.send('ZOOMED_CAMERA', {
+          //   delta: delta[1],
+          //   ...inputs.wheel(event as WheelEvent),
+          // })
+          return
+        }
+
+        if (state.isIn('pointing')) {
+          fastPanUpdate(delta)
           return
         }
 
 
         const [distanceDelta, angleDelta] = vec.sub(rPinchDa.current, da)
 
-        state.send('PINCHED', {
-          delta: vec.sub(rPinchPoint.current, origin),
-          point: origin,
+        fastPinchCamera(
+          origin,
+          vec.sub(rPinchPoint.current, origin),
           distanceDelta,
-          angleDelta,
-        })
+          angleDelta
+        )
+
+        // state.send('PINCHED', {
+        //   delta: vec.sub(rPinchPoint.current, origin),
+        //   point: origin,
+        //   distanceDelta,
+        //   angleDelta,
+        // })
 
         rPinchDa.current = da
         rPinchPoint.current = origin

package.json

     "@radix-ui/react-icons": "^1.0.3",
     "@radix-ui/react-radio-group": "^0.0.16",
     "@radix-ui/react-tooltip": "^0.0.18",
-    "@state-designer/react": "^1.7.1",
+    "@state-designer/react": "^1.7.3",
     "@stitches/react": "^0.1.9",
     "framer-motion": "^4.1.16",
     "ismobilejs": "^1.1.1",

state/hacks.ts

+import { PointerInfo } from 'types'
+import {
+  getCameraZoom,
+  getCurrentCamera,
+  screenToWorld,
+  setZoomCSS,
+} from 'utils/utils'
+import session from './session'
+import state from './state'
+import * as vec from 'utils/vec'
+
+/**
+ * While a user is drawing with the draw tool, we want to update the shape without
+ * going through the trouble of updating the entire state machine. Speciifcally, we
+ * do not want to push the change through immer. Instead, we'll push the change
+ * directly to the state using `forceData`.
+ * @param info
+ */
+export function fastDrawUpdate(info: PointerInfo) {
+  const data = { ...state.data }
+
+  session.current.update(
+    data,
+    screenToWorld(info.point, data),
+    info.pressure,
+    info.shiftKey
+  )
+
+  const selectedId = Array.from(data.selectedIds.values())[0]
+
+  const shape = data.document.pages[data.currentPageId].shapes[selectedId]
+
+  data.document.pages[data.currentPageId].shapes[selectedId] = { ...shape }
+
+  state.forceData(Object.freeze(data))
+}
+
+export function fastPanUpdate(delta: number[]) {
+  const data = { ...state.data }
+  const camera = getCurrentCamera(data)
+  camera.point = vec.sub(camera.point, vec.div(delta, camera.zoom))
+
+  data.pageStates[data.currentPageId].camera = { ...camera }
+
+  state.forceData(Object.freeze(data))
+}
+
+export function fastZoomUpdate(point: number[], delta: number) {
+  const data = { ...state.data }
+  const camera = getCurrentCamera(data)
+
+  const next = camera.zoom - (delta / 100) * camera.zoom
+
+  const p0 = screenToWorld(point, data)
+  camera.zoom = getCameraZoom(next)
+  const p1 = screenToWorld(point, data)
+  camera.point = vec.add(camera.point, vec.sub(p1, p0))
+
+  data.pageStates[data.currentPageId].camera = { ...camera }
+
+  state.forceData(Object.freeze(data))
+}
+
+export function fastPinchCamera(
+  point: number[],
+  delta: number[],
+  distanceDelta: number,
+  angleDelta: number
+) {
+  const data = { ...state.data }
+  const camera = getCurrentCamera(data)
+
+  camera.point = vec.sub(camera.point, vec.div(delta, camera.zoom))
+
+  const next = camera.zoom - (distanceDelta / 300) * camera.zoom
+
+  const p0 = screenToWorld(point, data)
+  camera.zoom = getCameraZoom(next)
+  const p1 = screenToWorld(point, data)
+  camera.point = vec.add(camera.point, vec.sub(p1, p0))
+
+  data.pageStates[data.currentPageId].camera = { ...camera }
+
+  state.forceData(Object.freeze(data))
+}
+
+export function fastBrushSelect(point: number[]) {
+  const data = { ...state.data }
+  session.current.update(data, screenToWorld(point, data))
+
+  data.selectedIds = new Set(data.selectedIds)
+
+  state.forceData(Object.freeze(data))
+}

state/session.ts

+import { BaseSession } from './sessions'
+
+class SessionManager {
+  private _current?: BaseSession
+
+  clear() {
+    this._current = undefined
+    return this
+  }
+
+  setCurrent(session: BaseSession) {
+    this._current = session
+    return this
+  }
+
+  get current() {
+    return this._current
+  }
+
+  set current(session: BaseSession) {
+    this._current = session
+  }
+}
+
+const session = new SessionManager()
+
+export default session

state/sessions/brush-session.ts

 import { getShapeUtils } from 'lib/shape-utils'
 import { getBoundsFromPoints, getPage, getShapes } from 'utils/utils'
 import * as vec from 'utils/vec'
+import state from 'state/state'
 
 export default class BrushSession extends BaseSession {
   origin: number[]
   return {
     selectedIds: new Set(data.selectedIds),
     shapeHitTests: Object.fromEntries(
-      getShapes(current(data))
+      getShapes(state.data)
         .filter((shape) => shape.type !== ShapeType.Group)
         .map((shape) => {
           return [

state/state.ts

   rotateBounds,
   getBoundsCenter,
   getDocumentBranch,
+  getCameraZoom,
 } from 'utils/utils'
 import {
   Data,
   SizeStyle,
   ColorStyle,
 } from 'types'
+import session from './session'
 
 const initialData: Data = {
   isReadOnly: false,
               ],
               on: {
                 STARTED_PINCHING: { do: 'completeSession', to: 'pinching' },
-                MOVED_POINTER: 'updateBrushSession',
+                // Currently using hacks.fastBrushSelect
+                // MOVED_POINTER: 'updateBrushSession',
                 PANNED_CAMERA: 'updateBrushSession',
                 STOPPED_POINTING: { do: 'completeSession', to: 'selecting' },
                 CANCELLED: { do: 'cancelSession', to: 'selecting' },
               },
             },
-            pinching: {
+          },
+        },
+        pinching: {
+          on: {
+            // Pinching uses hacks.fastPinchCamera
+            // PINCHED: { do: 'pinchCamera' },
+          },
+          initial: 'selectPinching',
+          onExit: { secretlyDo: 'updateZoomCSS' },
+          states: {
+            selectPinching: {
               on: {
-                PINCHED: { do: 'pinchCamera' },
+                STOPPED_PINCHING: { to: 'selecting' },
               },
-              initial: 'selectPinching',
-              states: {
-                selectPinching: {
-                  on: {
-                    STOPPED_PINCHING: { to: 'selecting' },
-                  },
-                },
-                toolPinching: {
-                  on: {
-                    STOPPED_PINCHING: { to: 'usingTool.previous' },
-                  },
-                },
+            },
+            toolPinching: {
+              on: {
+                STOPPED_PINCHING: { to: 'usingTool.previous' },
               },
             },
           },
                 editing: {
                   onEnter: 'startDrawSession',
                   on: {
-                    STOPPED_POINTING: {
-                      do: 'completeSession',
-                      to: 'draw.creating',
-                    },
                     CANCELLED: {
                       do: 'breakSession',
                       to: 'selecting',
                     },
+                    STOPPED_POINTING: {
+                      do: 'completeSession',
+                      to: 'draw.creating',
+                    },
                     PRESSED_SHIFT: 'keyUpdateDrawSession',
                     RELEASED_SHIFT: 'keyUpdateDrawSession',
-                    MOVED_POINTER: 'updateDrawSession',
+                    // MOVED_POINTER: 'updateDrawSession',
                     PANNED_CAMERA: 'updateDrawSession',
                   },
                 },
 
     // Shared
     breakSession(data) {
-      session?.cancel(data)
-      session = undefined
+      session.current?.cancel(data)
+      session.clear()
       history.disable()
       commands.deleteSelected(data)
       history.enable()
     },
     cancelSession(data) {
-      session?.cancel(data)
-      session = undefined
+      session.current?.cancel(data)
+      session.clear()
     },
     completeSession(data) {
-      session?.complete(data)
-      session = undefined
+      session.current?.complete(data)
+      session.clear()
     },
 
     // Brushing
     startBrushSession(data, payload: PointerInfo) {
-      session = new Sessions.BrushSession(
+      session.current = new Sessions.BrushSession(
         data,
         screenToWorld(payload.point, data)
       )
     },
     updateBrushSession(data, payload: PointerInfo) {
-      session.update(data, screenToWorld(payload.point, data))
+      session.current.update(data, screenToWorld(payload.point, data))
     },
 
     // Rotating
     startRotateSession(data, payload: PointerInfo) {
-      session = new Sessions.RotateSession(
+      session.current = new Sessions.RotateSession(
         data,
         screenToWorld(payload.point, data)
       )
     },
     keyUpdateRotateSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(inputs.pointer.point, data),
         payload.shiftKey
       )
     },
     updateRotateSession(data, payload: PointerInfo) {
-      session.update(data, screenToWorld(payload.point, data), payload.shiftKey)
+      session.current.update(
+        data,
+        screenToWorld(payload.point, data),
+        payload.shiftKey
+      )
     },
 
     // Dragging / Translating
     startTranslateSession(data) {
-      session = new Sessions.TranslateSession(
+      session.current = new Sessions.TranslateSession(
         data,
         screenToWorld(inputs.pointer.origin, data)
       )
       data,
       payload: { shiftKey: boolean; altKey: boolean }
     ) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(inputs.pointer.point, data),
         payload.shiftKey,
       )
     },
     updateTranslateSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(payload.point, data),
         payload.shiftKey,
       const shapeId = Array.from(data.selectedIds.values())[0]
       const handleId = payload.target
 
-      session = new Sessions.HandleSession(
+      session.current = new Sessions.HandleSession(
         data,
         shapeId,
         handleId,
       data,
       payload: { shiftKey: boolean; altKey: boolean }
     ) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(inputs.pointer.point, data),
         payload.shiftKey,
       )
     },
     updateHandleSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(payload.point, data),
         payload.shiftKey,
       payload: PointerInfo & { target: Corner | Edge }
     ) {
       const point = screenToWorld(inputs.pointer.origin, data)
-      session = new Sessions.TransformSession(data, payload.target, point)
-      session =
+      session.current =
         data.selectedIds.size === 1
           ? new Sessions.TransformSingleSession(data, payload.target, point)
           : new Sessions.TransformSession(data, payload.target, point)
     },
     startDrawTransformSession(data, payload: PointerInfo) {
-      session = new Sessions.TransformSingleSession(
+      session.current = new Sessions.TransformSingleSession(
         data,
         Corner.BottomRight,
         screenToWorld(payload.point, data),
       )
     },
     keyUpdateTransformSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(inputs.pointer.point, data),
         payload.shiftKey,
       )
     },
     updateTransformSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(payload.point, data),
         payload.shiftKey,
 
     // Direction
     startDirectionSession(data, payload: PointerInfo) {
-      session = new Sessions.DirectionSession(
+      session.current = new Sessions.DirectionSession(
         data,
         screenToWorld(inputs.pointer.origin, data)
       )
     },
     updateDirectionSession(data, payload: PointerInfo) {
-      session.update(data, screenToWorld(payload.point, data))
+      session.current.update(data, screenToWorld(payload.point, data))
     },
 
     // Drawing
     startDrawSession(data, payload: PointerInfo) {
       const id = Array.from(data.selectedIds.values())[0]
-      session = new Sessions.DrawSession(
+      session.current = new Sessions.DrawSession(
         data,
         id,
         screenToWorld(inputs.pointer.origin, data),
       )
     },
     keyUpdateDrawSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(inputs.pointer.point, data),
         payload.pressure,
       )
     },
     updateDrawSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(payload.point, data),
         payload.pressure,
     // Arrow
     startArrowSession(data, payload: PointerInfo) {
       const id = Array.from(data.selectedIds.values())[0]
-      session = new Sessions.ArrowSession(
+      session.current = new Sessions.ArrowSession(
         data,
         id,
         screenToWorld(inputs.pointer.origin, data),
       )
     },
     keyUpdateArrowSession(data, payload: PointerInfo) {
-      session.update(
+      session.current.update(
         data,
         screenToWorld(inputs.pointer.point, data),
         payload.shiftKey
       )
     },
     updateArrowSession(data, payload: PointerInfo) {
-      session.update(data, screenToWorld(payload.point, data), payload.shiftKey)
+      session.current.update(
+        data,
+        screenToWorld(payload.point, data),
+        payload.shiftKey
+      )
     },
 
     // Nudges
       const camera = getCurrentCamera(data)
       camera.point = vec.sub(camera.point, vec.div(payload.delta, camera.zoom))
     },
+    updateZoomCSS(data) {
+      const camera = getCurrentCamera(data)
+      setZoomCSS(camera.zoom)
+    },
     pinchCamera(
       data,
       payload: {
   },
 })
 
-let session: Sessions.BaseSession
-
 export default state
 
 export const useSelector = createSelectorHook(state)
 
-function getCameraZoom(zoom: number) {
-  return clamp(zoom, 0.1, 5)
-}
-
 function getParentId(data: Data, id: string) {
   const shape = getPage(data).shapes[id]
   return shape.parentId

types.ts

     pages: Record<string, Page>
     code: Record<string, CodeFile>
   }
-  pageStates: Record<
-    string,
-    {
-      camera: {
-        point: number[]
-        zoom: number
-      }
-    }
-  >
+  pageStates: Record<string, PageState>
 }
 
 /* -------------------------------------------------- */
   shapes: Record<string, Shape>
 }
 
+export interface PageState {
+  camera: {
+    point: number[]
+    zoom: number
+  }
+}
+
 export enum ShapeType {
   Dot = 'dot',
   Circle = 'circle',

utils/utils.ts

   }
 }
 
+export function getCameraZoom(zoom: number) {
+  return clamp(zoom, 0.1, 5)
+}
+
 export function pointInRect(
   point: number[],
   minX: number,