Moves selectedIds into page state, state mounts only one page state / page at a time

components/canvas/bounds/bounding-box.tsx

@@ -6,6 +6,7 @@ import {
   getBoundsCenter,
   getCurrentCamera,
   getPage,
+  getSelectedIds,
   getSelectedShapes,
   isMobile,
 } from 'utils/utils'
@@ -28,7 +29,7 @@ export default function Bounds() {
   )
 
   const rotation = useSelector(({ data }) =>
-    data.selectedIds.size === 1 ? getSelectedShapes(data)[0].rotation : 0
+    getSelectedIds(data).size === 1 ? getSelectedShapes(data)[0].rotation : 0
   )
 
   const isAllLocked = useSelector((s) => {

components/canvas/page.tsx

@@ -43,7 +43,6 @@ export default function Page() {
         .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)

components/canvas/selected.tsx

@@ -1,6 +1,12 @@
 import styled from 'styles'
 import { useSelector } from 'state'
-import { deepCompareArrays, getBoundsCenter, getPage } from 'utils/utils'
+import {
+  deepCompareArrays,
+  getBoundsCenter,
+  getPage,
+  getSelectedIds,
+  setToArray,
+} from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import useShapeEvents from 'hooks/useShapeEvents'
 import { memo, useRef } from 'react'
@@ -8,9 +14,10 @@ import { ShapeType } from 'types'
 import * as vec from 'utils/vec'
 
 export default function Selected() {
-  const currentSelectedShapeIds = useSelector(({ data }) => {
-    return Array.from(data.selectedIds.values())
-  }, deepCompareArrays)
+  const currentSelectedShapeIds = useSelector(
+    ({ data }) => setToArray(getSelectedIds(data)),
+    deepCompareArrays
+  )
 
   const isSelecting = useSelector((s) => s.isIn('selecting'))
 

components/page-panel/page-panel.tsx

@@ -52,7 +52,7 @@ export default function PagePanel() {
               value={currentPageId}
               onValueChange={(id) => {
                 setIsOpen(false)
-                state.send('CHANGED_CURRENT_PAGE', { id })
+                state.send('CHANGED_PAGE', { id })
               }}
             >
               {sorted.map(({ id, name }) => (

components/style-panel/style-panel.tsx

@@ -4,7 +4,13 @@ import * as Panel from 'components/panel'
 import { useRef } from 'react'
 import { IconButton } from 'components/shared'
 import { ChevronDown, Trash2, X } from 'react-feather'
-import { deepCompare, deepCompareArrays, getPage } from 'utils/utils'
+import {
+  deepCompare,
+  deepCompareArrays,
+  getPage,
+  getSelectedIds,
+  setToArray,
+} from 'utils/utils'
 import AlignDistribute from './align-distribute'
 import { MoveType } from 'types'
 import SizePicker from './size-picker'
@@ -65,7 +71,7 @@ export default function StylePanel() {
 
 function SelectedShapeStyles() {
   const selectedIds = useSelector(
-    (s) => Array.from(s.data.selectedIds.values()),
+    (s) => setToArray(getSelectedIds(s.data)),
     deepCompareArrays
   )
 

lib/shape-utils/draw.tsx

@@ -96,7 +96,10 @@ const draw = registerShapeUtils<DrawShape>({
     if (shape.rotation === 0) {
       return (
         boundsContain(brushBounds, this.getBounds(shape)) ||
-        intersectPolylineBounds(shape.points, brushBounds).length > 0
+        intersectPolylineBounds(
+          shape.points,
+          translateBounds(brushBounds, vec.neg(shape.point))
+        ).length > 0
       )
     }
 
@@ -104,18 +107,19 @@ const draw = registerShapeUtils<DrawShape>({
     const rBounds = this.getRotatedBounds(shape)
 
     if (!rotatedCache.has(shape)) {
-      const c = getBoundsCenter(rBounds)
+      const c = getBoundsCenter(getBoundsFromPoints(shape.points))
       rotatedCache.set(
         shape,
-        shape.points.map((pt) =>
-          vec.rotWith(vec.add(pt, shape.point), c, shape.rotation)
-        )
+        shape.points.map((pt) => vec.rotWith(pt, c, shape.rotation))
       )
     }
 
     return (
       boundsContain(brushBounds, rBounds) ||
-      intersectPolylineBounds(rotatedCache.get(shape), brushBounds).length > 0
+      intersectPolylineBounds(
+        rotatedCache.get(shape),
+        translateBounds(brushBounds, vec.neg(shape.point))
+      ).length > 0
     )
   },
 
@@ -152,6 +156,18 @@ const draw = registerShapeUtils<DrawShape>({
     return this
   },
 
+  onSessionComplete(shape) {
+    const bounds = this.getBounds(shape)
+
+    const [x1, y1] = vec.sub([bounds.minX, bounds.minY], shape.point)
+
+    shape.points = shape.points.map(([x0, y0, p]) => [x0 - x1, y0 - y1, p])
+
+    this.translateTo(shape, vec.add(shape.point, [x1, y1]))
+
+    return this
+  },
+
   canStyleFill: false,
 })
 
@@ -164,8 +180,8 @@ const simulatePressureSettings = {
 const realPressureSettings = {
   easing: (t: number) => t * t,
   simulatePressure: false,
-  // start: { taper: 1 },
-  // end: { taper: 1 },
+  start: { taper: 1 },
+  end: { taper: 1 },
 }
 
 function renderPath(shape: DrawShape, style: ShapeStyles) {

state/commands/arrow.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage } from 'utils/utils'
+import { getPage, getSelectedIds } from 'utils/utils'
 import { ArrowSnapshot } from 'state/sessions/arrow-session'
 
 export default function arrowCommand(
@@ -24,8 +24,9 @@ export default function arrowCommand(
 
         page.shapes[initialShape.id] = initialShape
 
-        data.selectedIds.clear()
-        data.selectedIds.add(initialShape.id)
+        const selectedIds = getSelectedIds(data)
+        selectedIds.clear()
+        selectedIds.add(initialShape.id)
         data.hoveredId = undefined
         data.pointedId = undefined
       },
@@ -35,7 +36,8 @@ export default function arrowCommand(
 
         delete shapes[initialShape.id]
 
-        data.selectedIds.clear()
+        const selectedIds = getSelectedIds(data)
+        selectedIds.clear()
         data.hoveredId = undefined
         data.pointedId = undefined
       },

state/commands/change-page.ts

@@ -1,9 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage, getSelectedShapes } from 'utils/utils'
-import { getShapeUtils } from 'lib/shape-utils'
-import * as vec from 'utils/vec'
+import storage from 'state/storage'
 
 export default function changePage(data: Data, pageId: string) {
   const { currentPageId: prevPageId } = data
@@ -13,11 +11,15 @@ export default function changePage(data: Data, pageId: string) {
     new Command({
       name: 'change_page',
       category: 'canvas',
+      manualSelection: true,
       do(data) {
+        storage.savePage(data, data.currentPageId)
         data.currentPageId = pageId
+        storage.loadPage(data, data.currentPageId)
       },
       undo(data) {
         data.currentPageId = prevPageId
+        storage.loadPage(data, prevPageId)
       },
     })
   )

state/commands/command.ts

@@ -1,4 +1,5 @@
-import { Data } from "types"
+import { Data } from 'types'
+import { getSelectedIds, setSelectedIds, setToArray } from 'utils/utils'
 
 /* ------------------ Command Class ----------------- */
 
@@ -52,6 +53,12 @@ export class BaseCommand<T extends any> {
   }
 
   redo = (data: T, initial = false) => {
+    if (this.manualSelection) {
+      this.doFn(data, initial)
+
+      return
+    }
+
     if (initial) {
       this.restoreBeforeSelectionState = this.saveSelectionState(data)
     } else {
@@ -76,11 +83,13 @@ export class BaseCommand<T extends any> {
  */
 export default class Command extends BaseCommand<Data> {
   saveSelectionState = (data: Data) => {
-    const selectedIds = new Set(data.selectedIds)
-    return (data: Data) => {
-      data.hoveredId = undefined
-      data.pointedId = undefined
-      data.selectedIds = selectedIds
+    const { currentPageId } = data
+    const selectedIds = setToArray(getSelectedIds(data))
+    return (next: Data) => {
+      next.currentPageId = currentPageId
+      next.hoveredId = undefined
+      next.pointedId = undefined
+      setSelectedIds(next, selectedIds)
     }
   }
 }

state/commands/create-page.ts

@@ -1,8 +1,10 @@
 import Command from './command'
 import history from '../history'
-import { Data, Page } from 'types'
+import { Data, Page, PageState } from 'types'
 import { v4 as uuid } from 'uuid'
 import { current } from 'immer'
+import { getSelectedIds } from 'utils/utils'
+import storage from 'state/storage'
 
 export default function createPage(data: Data) {
   const snapshot = getSnapshot(data)
@@ -13,14 +15,13 @@ export default function createPage(data: Data) {
       name: 'change_page',
       category: 'canvas',
       do(data) {
-        data.selectedIds.clear()
         const { page, pageState } = snapshot
         data.document.pages[page.id] = page
         data.pageStates[page.id] = pageState
         data.currentPageId = page.id
+        storage.savePage(data, page.id)
       },
       undo(data) {
-        data.selectedIds.clear()
         const { page, currentPageId } = snapshot
         delete data.document.pages[page.id]
         delete data.pageStates[page.id]
@@ -44,7 +45,8 @@ function getSnapshot(data: Data) {
     childIndex: pages.length,
     shapes: {},
   }
-  const pageState = {
+  const pageState: PageState = {
+    selectedIds: new Set<string>(),
     camera: {
       point: [0, 0],
       zoom: 1,

state/commands/delete-selected.ts

@@ -2,22 +2,30 @@ import Command from './command'
 import history from '../history'
 import { TranslateSnapshot } from 'state/sessions/translate-session'
 import { Data, ShapeType } from 'types'
-import { getDocumentBranch, getPage, updateParents } from 'utils/utils'
+import {
+  getDocumentBranch,
+  getPage,
+  getSelectedIds,
+  setSelectedIds,
+  setToArray,
+  updateParents,
+} from 'utils/utils'
 import { current } from 'immer'
 import { getShapeUtils } from 'lib/shape-utils'
 
 export default function deleteSelected(data: Data) {
   const { currentPageId } = data
 
-  const selectedIds = Array.from(data.selectedIds.values())
+  const selectedIds = getSelectedIds(data)
+  const selectedIdsArr = setToArray(selectedIds)
 
   const page = getPage(current(data))
 
-  const childrenToDelete = selectedIds
+  const childrenToDelete = selectedIdsArr
     .flatMap((id) => getDocumentBranch(data, id))
     .map((id) => page.shapes[id])
 
-  data.selectedIds.clear()
+  selectedIds.clear()
 
   history.execute(
     data,
@@ -28,7 +36,7 @@ export default function deleteSelected(data: Data) {
       do(data) {
         const page = getPage(data, currentPageId)
 
-        for (let id of selectedIds) {
+        for (let id of selectedIdsArr) {
           const shape = page.shapes[id]
           if (!shape) {
             console.error('no shape ' + id)
@@ -54,7 +62,7 @@ export default function deleteSelected(data: Data) {
           delete page.shapes[shape.id]
         }
 
-        data.selectedIds.clear()
+        setSelectedIds(data, [])
       },
       undo(data) {
         const page = getPage(data, currentPageId)
@@ -75,7 +83,7 @@ export default function deleteSelected(data: Data) {
           }
         }
 
-        data.selectedIds = new Set(selectedIds)
+        setSelectedIds(data, selectedIdsArr)
       },
     })
   )

state/commands/draw.ts

@@ -1,17 +1,11 @@
 import Command from './command'
 import history from '../history'
 import { Data, DrawShape } from 'types'
-import { getPage } from 'utils/utils'
-import { getShapeUtils } from 'lib/shape-utils'
+import { getPage, setSelectedIds } from 'utils/utils'
 import { current } from 'immer'
 
-export default function drawCommand(
-  data: Data,
-  id: string,
-  points: number[][]
-) {
-  const restoreShape = current(getPage(data)).shapes[id] as DrawShape
-  getShapeUtils(restoreShape).setProperty(restoreShape, 'points', points)
+export default function drawCommand(data: Data, id: string) {
+  const restoreShape = getPage(current(data)).shapes[id] as DrawShape
 
   history.execute(
     data,
@@ -24,11 +18,11 @@ export default function drawCommand(
           getPage(data).shapes[id] = restoreShape
         }
 
-        data.selectedIds.clear()
+        setSelectedIds(data, [])
       },
       undo(data) {
+        setSelectedIds(data, [])
         delete getPage(data).shapes[id]
-        data.selectedIds.clear()
       },
     })
   )

state/commands/duplicate.ts

@@ -1,7 +1,13 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getCurrentCamera, getPage, getSelectedShapes } from 'utils/utils'
+import {
+  getCurrentCamera,
+  getPage,
+  getSelectedIds,
+  getSelectedShapes,
+  setSelectedIds,
+} from 'utils/utils'
 import { v4 as uuid } from 'uuid'
 import { current } from 'immer'
 import * as vec from 'utils/vec'
@@ -24,24 +30,26 @@ export default function duplicateCommand(data: Data) {
       do(data) {
         const { shapes } = getPage(data, currentPageId)
 
-        data.selectedIds.clear()
-
         for (const duplicate of duplicates) {
           shapes[duplicate.id] = duplicate
-          data.selectedIds.add(duplicate.id)
         }
+
+        setSelectedIds(
+          data,
+          duplicates.map((d) => d.id)
+        )
       },
       undo(data) {
         const { shapes } = getPage(data, currentPageId)
-        data.selectedIds.clear()
 
         for (const duplicate of duplicates) {
           delete shapes[duplicate.id]
         }
 
-        for (let id in selectedShapes) {
-          data.selectedIds.add(id)
-        }
+        setSelectedIds(
+          data,
+          selectedShapes.map((d) => d.id)
+        )
       },
     })
   )

state/commands/generate.ts

@@ -1,8 +1,8 @@
-import Command from "./command"
-import history from "../history"
-import { CodeControl, Data, Shape } from "types"
-import { current } from "immer"
-import { getPage } from "utils/utils"
+import Command from './command'
+import history from '../history'
+import { CodeControl, Data, Shape } from 'types'
+import { current } from 'immer'
+import { getPage, getSelectedIds, setSelectedIds } from 'utils/utils'
 
 export default function generateCommand(
   data: Data,
@@ -33,12 +33,12 @@ export default function generateCommand(
   history.execute(
     data,
     new Command({
-      name: "translate_shapes",
-      category: "canvas",
+      name: 'translate_shapes',
+      category: 'canvas',
       do(data) {
         const { shapes } = getPage(data)
 
-        data.selectedIds.clear()
+        setSelectedIds(data, [])
 
         // Remove previous generated shapes
         for (let id in shapes) {

state/commands/group.ts

@@ -4,8 +4,10 @@ import { Data, GroupShape, Shape, ShapeType } from 'types'
 import {
   getCommonBounds,
   getPage,
+  getSelectedIds,
   getSelectedShapes,
   getShape,
+  setSelectedIds,
 } from 'utils/utils'
 import { current } from 'immer'
 import { createShape, getShapeUtils } from 'lib/shape-utils'
@@ -15,7 +17,9 @@ import commands from '.'
 
 export default function groupCommand(data: Data) {
   const cData = current(data)
-  const { currentPageId, selectedIds } = cData
+  const { currentPageId } = cData
+
+  const oldSelectedIds = getSelectedIds(cData)
 
   const initialShapes = getSelectedShapes(cData).sort(
     (a, b) => a.childIndex - b.childIndex
@@ -108,7 +112,7 @@ export default function groupCommand(data: Data) {
             getShapeUtils(oldParent).setProperty(
               oldParent,
               'children',
-              oldParent.children.filter((id) => !selectedIds.has(id))
+              oldParent.children.filter((id) => !oldSelectedIds.has(id))
             )
           }
 
@@ -119,8 +123,7 @@ export default function groupCommand(data: Data) {
             .setProperty(shape, 'parentId', newGroupShape.id)
         })
 
-        data.selectedIds.clear()
-        data.selectedIds.add(newGroupShape.id)
+        setSelectedIds(data, [newGroupShape.id])
       },
       undo(data) {
         const { shapes } = getPage(data, currentPageId)
@@ -157,7 +160,7 @@ export default function groupCommand(data: Data) {
         delete shapes[newGroupShape.id]
 
         // Reselect the children of the group
-        data.selectedIds = new Set(initialShapeIds)
+        setSelectedIds(data, initialShapeIds)
       },
     })
   )

state/commands/move.ts

@@ -1,7 +1,13 @@
 import Command from './command'
 import history from '../history'
 import { Data, MoveType, Shape } from 'types'
-import { forceIntegerChildIndices, getChildren, getPage } from 'utils/utils'
+import {
+  forceIntegerChildIndices,
+  getChildren,
+  getPage,
+  getSelectedIds,
+  setToArray,
+} from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 
 export default function moveCommand(data: Data, type: MoveType) {
@@ -9,7 +15,7 @@ export default function moveCommand(data: Data, type: MoveType) {
 
   const page = getPage(data)
 
-  const selectedIds = Array.from(data.selectedIds.values())
+  const selectedIds = setToArray(getSelectedIds(data))
 
   const initialIndices = Object.fromEntries(
     selectedIds.map((id) => [id, page.shapes[id].childIndex])

state/commands/style.ts

@@ -1,7 +1,13 @@
 import Command from './command'
 import history from '../history'
 import { Data, ShapeStyles } from 'types'
-import { getDocumentBranch, getPage, getSelectedShapes } from 'utils/utils'
+import {
+  getDocumentBranch,
+  getPage,
+  getSelectedIds,
+  getSelectedShapes,
+  setToArray,
+} from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import { current } from 'immer'
 
@@ -10,7 +16,9 @@ export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
   const page = getPage(cData)
   const { currentPageId } = cData
 
-  const shapesToStyle = Array.from(data.selectedIds.values())
+  const selectedIds = setToArray(getSelectedIds(data))
+
+  const shapesToStyle = selectedIds
     .flatMap((id) => getDocumentBranch(data, id))
     .map((id) => page.shapes[id])
 

state/commands/transform-single.ts

@@ -4,7 +4,12 @@ import { Data, Corner, Edge } from 'types'
 import { getShapeUtils } from 'lib/shape-utils'
 import { current } from 'immer'
 import { TransformSingleSnapshot } from 'state/sessions/transform-single-session'
-import { getPage, updateParents } from 'utils/utils'
+import {
+  getPage,
+  getSelectedIds,
+  setSelectedIds,
+  updateParents,
+} from 'utils/utils'
 
 export default function transformSingleCommand(
   data: Data,
@@ -25,8 +30,7 @@ export default function transformSingleCommand(
 
         const { shapes } = getPage(data, after.currentPageId)
 
-        data.selectedIds.clear()
-        data.selectedIds.add(id)
+        setSelectedIds(data, [id])
 
         shapes[id] = shape
 
@@ -38,13 +42,13 @@ export default function transformSingleCommand(
         const { shapes } = getPage(data, before.currentPageId)
 
         if (isCreating) {
-          data.selectedIds.clear()
+          setSelectedIds(data, [])
           delete shapes[id]
         } else {
           const page = getPage(data)
           page.shapes[id] = initialShape
           updateParents(data, [id])
-          data.selectedIds = new Set([id])
+          setSelectedIds(data, [id])
         }
       },
     })

state/commands/translate.ts

@@ -2,7 +2,12 @@ import Command from './command'
 import history from '../history'
 import { TranslateSnapshot } from 'state/sessions/translate-session'
 import { Data, GroupShape, Shape, ShapeType } from 'types'
-import { getDocumentBranch, getPage, updateParents } from 'utils/utils'
+import {
+  getDocumentBranch,
+  getPage,
+  setSelectedIds,
+  updateParents,
+} from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import { v4 as uuid } from 'uuid'
 
@@ -50,7 +55,10 @@ export default function translateCommand(
         }
 
         // Set selected shapes
-        data.selectedIds = new Set(initialShapes.map((s) => s.id))
+        setSelectedIds(
+          data,
+          initialShapes.map((s) => s.id)
+        )
 
         // Update parents
         updateParents(
@@ -72,7 +80,10 @@ export default function translateCommand(
         if (isCloning) for (const { id } of clones) delete shapes[id]
 
         // Set selected shapes
-        data.selectedIds = new Set(initialShapes.map((s) => s.id))
+        setSelectedIds(
+          data,
+          initialShapes.map((s) => s.id)
+        )
 
         // Restore children on parents
         initialParents.forEach(({ id, children }) => {

state/commands/ungroup.ts

@@ -6,6 +6,7 @@ import {
   getPage,
   getSelectedShapes,
   getShape,
+  setSelectedIds,
 } from 'utils/utils'
 import { current } from 'immer'
 import { createShape, getShapeUtils } from 'lib/shape-utils'
@@ -14,7 +15,7 @@ import { v4 as uuid } from 'uuid'
 
 export default function ungroupCommand(data: Data) {
   const cData = current(data)
-  const { currentPageId, selectedIds } = cData
+  const { currentPageId } = cData
 
   const selectedGroups = getSelectedShapes(cData)
     .filter((shape) => shape.type === ShapeType.Group)
@@ -55,14 +56,11 @@ export default function ungroupCommand(data: Data) {
               (oldGroupShape.children.length + 1)
           }
 
-          data.selectedIds.clear()
-
           // Move shapes to page
           oldGroupShape.children
             .map((id) => shapes[id])
             .forEach(({ id }, i) => {
               const shape = shapes[id]
-              data.selectedIds.add(id)
               getShapeUtils(shape)
                 .setProperty(shape, 'parentId', oldGroupShape.parentId)
                 .setProperty(
@@ -72,14 +70,15 @@ export default function ungroupCommand(data: Data) {
                 )
             })
 
+          setSelectedIds(data, oldGroupShape.children)
+
           delete shapes[oldGroupShape.id]
         }
       },
       undo(data) {
         const { shapes } = getPage(data, currentPageId)
-        selectedIds.clear()
+
         selectedGroups.forEach((group) => {
-          selectedIds.add(group.id)
           shapes[group.id] = group
           group.children.forEach((id, i) => {
             const shape = shapes[id]
@@ -88,6 +87,11 @@ export default function ungroupCommand(data: Data) {
               .setProperty(shape, 'childIndex', i)
           })
         })
+
+        setSelectedIds(
+          data,
+          selectedGroups.map((g) => g.id)
+        )
       },
     })
   )

state/hacks.ts

@@ -2,7 +2,9 @@ import { PointerInfo } from 'types'
 import {
   getCameraZoom,
   getCurrentCamera,
+  getSelectedIds,
   screenToWorld,
+  setToArray,
   setZoomCSS,
 } from 'utils/utils'
 import session from './session'
@@ -26,7 +28,7 @@ export function fastDrawUpdate(info: PointerInfo) {
     info.shiftKey
   )
 
-  const selectedId = Array.from(data.selectedIds.values())[0]
+  const selectedId = setToArray(getSelectedIds(data))[0]
 
   const shape = data.document.pages[data.currentPageId].shapes[selectedId]
 
@@ -88,7 +90,5 @@ 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/history.ts

@@ -1,11 +1,10 @@
-import { Data } from 'types'
+import { Data, Page, PageState } from 'types'
 import { BaseCommand } from './commands/command'
-
-const CURRENT_VERSION = 'code_slate_0.0.3'
+import storage from './storage'
 
 // A singleton to manage history changes.
 
-class BaseHistory<T> {
+class History<T extends Data> {
   private stack: BaseCommand<T>[] = []
   private pointer = -1
   private maxLength = 100
@@ -24,7 +23,7 @@ class BaseHistory<T> {
       this.pointer = this.maxLength - 1
     }
 
-    this.save(data)
+    storage.save(data)
   }
 
   undo = (data: T) => {
@@ -33,7 +32,7 @@ class BaseHistory<T> {
     command.undo(data)
     if (this.disabled) return
     this.pointer--
-    this.save(data)
+    storage.save(data)
   }
 
   redo = (data: T) => {
@@ -42,25 +41,7 @@ class BaseHistory<T> {
     command.redo(data, false)
     if (this.disabled) return
     this.pointer++
-    this.save(data)
-  }
-
-  load(data: T, id = CURRENT_VERSION) {
-    if (typeof window === 'undefined') return
-    if (typeof localStorage === 'undefined') return
-
-    const savedData = localStorage.getItem(id)
-
-    if (savedData !== null) {
-      Object.assign(data, this.restoreSavedData(JSON.parse(savedData)))
-    }
-  }
-
-  save = (data: T, id = CURRENT_VERSION) => {
-    if (typeof window === 'undefined') return
-    if (typeof localStorage === 'undefined') return
-
-    localStorage.setItem(id, JSON.stringify(this.prepareDataForSave(data)))
+    storage.save(data)
   }
 
   disable = () => {
@@ -71,14 +52,6 @@ class BaseHistory<T> {
     this._enabled = true
   }
 
-  prepareDataForSave(data: T): any {
-    return { ...data }
-  }
-
-  restoreSavedData(data: any): T {
-    return { ...data }
-  }
-
   pop() {
     if (this.stack.length > 0) {
       this.stack.pop()
@@ -91,44 +64,4 @@ class BaseHistory<T> {
   }
 }
 
-// App-specific
-
-class History extends BaseHistory<Data> {
-  constructor() {
-    super()
-  }
-
-  prepareDataForSave(data: Data): any {
-    const dataToSave: any = { ...data }
-
-    dataToSave.selectedIds = Array.from(data.selectedIds.values())
-
-    return dataToSave
-  }
-
-  restoreSavedData(data: any): Data {
-    const restoredData: Data = { ...data }
-
-    restoredData.selectedIds = new Set(restoredData.selectedIds)
-
-    // Also restore camera position, which is saved separately in this app
-    const cameraInfo = localStorage.getItem('code_slate_camera')
-
-    if (cameraInfo !== null) {
-      Object.assign(
-        restoredData.pageStates[data.currentPageId].camera,
-        JSON.parse(cameraInfo)
-      )
-
-      // And update the CSS property
-      document.documentElement.style.setProperty(
-        '--camera-zoom',
-        restoredData.pageStates[data.currentPageId].camera.zoom.toString()
-      )
-    }
-
-    return restoredData
-  }
-}
-
 export default new History()

state/sessions/arrow-session.ts

@@ -3,7 +3,13 @@ import * as vec from 'utils/vec'
 import BaseSession from './base-session'
 import commands from 'state/commands'
 import { current } from 'immer'
-import { getBoundsFromPoints, getPage, updateParents } from 'utils/utils'
+import {
+  getBoundsFromPoints,
+  getPage,
+  getSelectedIds,
+  setToArray,
+  updateParents,
+} from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 
 export default class ArrowSession extends BaseSession {
@@ -116,7 +122,7 @@ export function getArrowSnapshot(data: Data, id: string) {
   return {
     id,
     initialShape,
-    selectedIds: new Set(data.selectedIds),
+    selectedIds: setToArray(getSelectedIds(data)),
     currentPageId: data.currentPageId,
   }
 }

state/sessions/brush-session.ts

@@ -2,7 +2,14 @@ import { current } from 'immer'
 import { Bounds, Data, ShapeType } from 'types'
 import BaseSession from './base-session'
 import { getShapeUtils } from 'lib/shape-utils'
-import { getBoundsFromPoints, getPage, getShapes } from 'utils/utils'
+import {
+  getBoundsFromPoints,
+  getPage,
+  getSelectedIds,
+  getShapes,
+  setSelectedIds,
+  setToArray,
+} from 'utils/utils'
 import * as vec from 'utils/vec'
 import state from 'state/state'
 
@@ -25,6 +32,8 @@ export default class BrushSession extends BaseSession {
 
     const hits = new Set<string>([])
 
+    const selectedIds = getSelectedIds(data)
+
     for (let id in snapshot.shapeHitTests) {
       const { test, selectId } = snapshot.shapeHitTests[id]
       if (!hits.has(selectId)) {
@@ -32,11 +41,11 @@ export default class BrushSession extends BaseSession {
           hits.add(selectId)
 
           // When brushing a shape, select its top group parent.
-          if (!data.selectedIds.has(selectId)) {
-            data.selectedIds.add(selectId)
+          if (!selectedIds.has(selectId)) {
+            selectedIds.add(selectId)
           }
-        } else if (data.selectedIds.has(selectId)) {
-          data.selectedIds.delete(selectId)
+        } else if (selectedIds.has(selectId)) {
+          selectedIds.delete(selectId)
         }
       }
     }
@@ -46,7 +55,7 @@ export default class BrushSession extends BaseSession {
 
   cancel = (data: Data) => {
     data.brush = undefined
-    data.selectedIds = new Set(this.snapshot.selectedIds)
+    setSelectedIds(data, this.snapshot.selectedIds)
   }
 
   complete = (data: Data) => {
@@ -61,7 +70,7 @@ export default class BrushSession extends BaseSession {
  */
 export function getBrushSnapshot(data: Data) {
   return {
-    selectedIds: new Set(data.selectedIds),
+    selectedIds: setToArray(getSelectedIds(data)),
     shapeHitTests: Object.fromEntries(
       getShapes(state.data)
         .filter((shape) => shape.type !== ShapeType.Group)

state/sessions/direction-session.ts

@@ -1,9 +1,9 @@
-import { Data, LineShape, RayShape } from "types"
-import * as vec from "utils/vec"
-import BaseSession from "./base-session"
-import commands from "state/commands"
-import { current } from "immer"
-import { getPage } from "utils/utils"
+import { Data, LineShape, RayShape } from 'types'
+import * as vec from 'utils/vec'
+import BaseSession from './base-session'
+import commands from 'state/commands'
+import { current } from 'immer'
+import { getPage, getSelectedIds } from 'utils/utils'
 
 export default class DirectionSession extends BaseSession {
   delta = [0, 0]
@@ -47,9 +47,9 @@ export function getDirectionSnapshot(data: Data) {
 
   let snapshapes: { id: string; direction: number[] }[] = []
 
-  data.selectedIds.forEach((id) => {
+  getSelectedIds(data).forEach((id) => {
     const shape = shapes[id]
-    if ("direction" in shape) {
+    if ('direction' in shape) {
       snapshapes.push({ id: shape.id, direction: shape.direction })
     }
   })

state/sessions/draw-session.ts

@@ -95,31 +95,12 @@ export default class BrushSession extends BaseSession {
   }
 
   complete = (data: Data) => {
-    if (this.points.length > 1) {
-      let minX = Infinity
-      let minY = Infinity
-      const pts = [...this.points]
-
-      for (let pt of pts) {
-        minX = Math.min(pt[0], minX)
-        minY = Math.min(pt[1], minY)
-      }
-
-      for (let pt of pts) {
-        pt[0] -= minX
-        pt[1] -= minY
-      }
-
-      const { snapshot } = this
-      const page = getPage(data)
-      const shape = page.shapes[snapshot.id] as DrawShape
-
-      getShapeUtils(shape)
-        .setProperty(shape, 'points', pts)
-        .setProperty(shape, 'point', vec.add(shape.point, [minX, minY]))
-    }
+    const { snapshot } = this
+    const page = getPage(data)
+    const shape = page.shapes[snapshot.id] as DrawShape
 
-    commands.draw(data, this.snapshot.id, this.points)
+    getShapeUtils(shape).onSessionComplete(shape)
+    commands.draw(data, this.snapshot.id)
   }
 }
 

state/sessions/rotate-session.ts

@@ -13,6 +13,8 @@ import {
   getShapeBounds,
   updateParents,
   getDocumentBranch,
+  setToArray,
+  getSelectedIds,
 } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 
@@ -101,7 +103,7 @@ export function getRotateSnapshot(data: Data) {
   const cData = current(data)
   const page = getPage(cData)
 
-  const initialShapes = Array.from(cData.selectedIds.values())
+  const initialShapes = setToArray(getSelectedIds(data))
     .flatMap((id) => getDocumentBranch(cData, id).map((id) => page.shapes[id]))
     .filter((shape) => !shape.isLocked)
 

state/sessions/transform-session.ts

@@ -11,9 +11,11 @@ import {
   getDocumentBranch,
   getPage,
   getRelativeTransformedBoundingBox,
+  getSelectedIds,
   getSelectedShapes,
   getShapes,
   getTransformedBoundingBox,
+  setToArray,
   updateParents,
 } from 'utils/utils'
 
@@ -118,7 +120,7 @@ export function getTransformSnapshot(data: Data, transformType: Edge | Corner) {
   const { currentPageId } = cData
   const page = getPage(cData)
 
-  const initialShapes = Array.from(cData.selectedIds.values())
+  const initialShapes = setToArray(getSelectedIds(data))
     .flatMap((id) => getDocumentBranch(cData, id).map((id) => page.shapes[id]))
     .filter((shape) => !shape.isLocked)
 

state/sessions/translate-session.ts

@@ -9,6 +9,7 @@ import {
   getDocumentBranch,
   getPage,
   getSelectedShapes,
+  setSelectedIds,
   updateParents,
 } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
@@ -47,17 +48,13 @@ export default class TranslateSession extends BaseSession {
     if (isCloning) {
       if (!this.isCloning) {
         this.isCloning = true
-        data.selectedIds.clear()
 
         for (const { id, point } of initialShapes) {
           const shape = shapes[id]
           getShapeUtils(shape).translateTo(shape, point)
         }
 
-        data.selectedIds.clear()
-
         for (const clone of clones) {
-          data.selectedIds.add(clone.id)
           shapes[clone.id] = { ...clone }
           const parent = shapes[clone.parentId]
           if (!parent) continue
@@ -66,6 +63,11 @@ export default class TranslateSession extends BaseSession {
             clone.id,
           ])
         }
+
+        setSelectedIds(
+          data,
+          clones.map((c) => c.id)
+        )
       }
 
       for (const { id, point } of clones) {
@@ -80,11 +82,11 @@ export default class TranslateSession extends BaseSession {
     } else {
       if (this.isCloning) {
         this.isCloning = false
-        data.selectedIds.clear()
 
-        for (const { id } of initialShapes) {
-          data.selectedIds.add(id)
-        }
+        setSelectedIds(
+          data,
+          initialShapes.map((c) => c.id)
+        )
 
         for (const clone of clones) {
           delete shapes[clone.id]

state/state.ts

@@ -1,12 +1,13 @@
 import { createSelectorHook, createState } from '@state-designer/react'
+import { updateFromCode } from 'lib/code/generate'
+import { createShape, getShapeUtils } from 'lib/shape-utils'
 import * as vec from 'utils/vec'
 import inputs from './inputs'
 import { defaultDocument } from './data'
-import { createShape, getShapeUtils } from 'lib/shape-utils'
-import history from 'state/history'
+import history from './history'
+import storage from './storage'
 import * as Sessions from './sessions'
 import commands from './commands'
-import { updateFromCode } from 'lib/code/generate'
 import {
   clamp,
   getChildren,
@@ -26,6 +27,8 @@ import {
   getBoundsCenter,
   getDocumentBranch,
   getCameraZoom,
+  getSelectedIds,
+  setSelectedIds,
 } from 'utils/utils'
 import {
   Data,
@@ -69,7 +72,6 @@ const initialData: Data = {
   boundsRotation: 0,
   pointedId: null,
   hoveredId: null,
-  selectedIds: new Set([]),
   currentPageId: 'page1',
   currentParentId: 'page1',
   currentCodeFileId: 'file0',
@@ -77,12 +79,14 @@ const initialData: Data = {
   document: defaultDocument,
   pageStates: {
     page1: {
+      selectedIds: new Set([]),
       camera: {
         point: [0, 0],
         zoom: 1,
       },
     },
     page2: {
+      selectedIds: new Set([]),
       camera: {
         point: [0, 0],
         zoom: 1,
@@ -164,7 +168,7 @@ const state = createState({
           do: 'deleteSelection',
           else: ['selectAll', 'deleteSelection'],
         },
-        CHANGED_CURRENT_PAGE: ['clearSelectedIds', 'setCurrentPage'],
+        CHANGED_PAGE: 'changePage',
         CREATED_PAGE: ['clearSelectedIds', 'createPage'],
         DELETED_PAGE: { unless: 'hasOnlyOnePage', do: 'deletePage' },
       },
@@ -743,7 +747,7 @@ const state = createState({
       return vec.dist2(payload.origin, payload.point) > 8
     },
     isPointedShapeSelected(data) {
-      return data.selectedIds.has(data.pointedId)
+      return getSelectedIds(data).has(data.pointedId)
     },
     isPressingShiftKey(data, payload: PointerInfo) {
       return payload.shiftKey
@@ -769,10 +773,10 @@ const state = createState({
       return payload.target === 'rotate'
     },
     hasSelection(data) {
-      return data.selectedIds.size > 0
+      return getSelectedIds(data).size > 0
     },
     hasMultipleSelection(data) {
-      return data.selectedIds.size > 1
+      return getSelectedIds(data).size > 1
     },
     isToolLocked(data) {
       return data.settings.isToolLocked
@@ -791,7 +795,7 @@ const state = createState({
   },
   actions: {
     /* ---------------------- Pages --------------------- */
-    setCurrentPage(data, payload: { id: string }) {
+    changePage(data, payload: { id: string }) {
       commands.changePage(data, payload.id)
     },
     createPage(data) {
@@ -818,8 +822,7 @@ const state = createState({
 
       getPage(data).shapes[shape.id] = shape
 
-      data.selectedIds.clear()
-      data.selectedIds.add(shape.id)
+      setSelectedIds(data, [shape.id])
     },
     /* -------------------- Sessions -------------------- */
 
@@ -902,7 +905,7 @@ const state = createState({
 
     // Dragging Handle
     startHandleSession(data, payload: PointerInfo) {
-      const shapeId = Array.from(data.selectedIds.values())[0]
+      const shapeId = Array.from(getSelectedIds(data).values())[0]
       const handleId = payload.target
 
       session.current = new Sessions.HandleSession(
@@ -939,7 +942,7 @@ const state = createState({
     ) {
       const point = screenToWorld(inputs.pointer.origin, data)
       session.current =
-        data.selectedIds.size === 1
+        getSelectedIds(data).size === 1
           ? new Sessions.TransformSingleSession(data, payload.target, point)
           : new Sessions.TransformSession(data, payload.target, point)
     },
@@ -981,7 +984,7 @@ const state = createState({
 
     // Drawing
     startDrawSession(data, payload: PointerInfo) {
-      const id = Array.from(data.selectedIds.values())[0]
+      const id = Array.from(getSelectedIds(data).values())[0]
       session.current = new Sessions.DrawSession(
         data,
         id,
@@ -1008,7 +1011,7 @@ const state = createState({
 
     // Arrow
     startArrowSession(data, payload: PointerInfo) {
-      const id = Array.from(data.selectedIds.values())[0]
+      const id = Array.from(getSelectedIds(data).values())[0]
       session.current = new Sessions.ArrowSession(
         data,
         id,
@@ -1047,7 +1050,7 @@ const state = createState({
     /* -------------------- Selection ------------------- */
 
     selectAll(data) {
-      const { selectedIds } = data
+      const selectedIds = getSelectedIds(data)
       const page = getPage(data)
       selectedIds.clear()
       for (let id in page.shapes) {
@@ -1078,14 +1081,15 @@ const state = createState({
       data.pointedId = undefined
     },
     clearSelectedIds(data) {
-      data.selectedIds.clear()
+      setSelectedIds(data, [])
     },
     pullPointedIdFromSelectedIds(data) {
-      const { selectedIds, pointedId } = data
+      const { pointedId } = data
+      const selectedIds = getSelectedIds(data)
       selectedIds.delete(pointedId)
     },
     pushPointedIdToSelectedIds(data) {
-      data.selectedIds.add(data.pointedId)
+      getSelectedIds(data).add(data.pointedId)
     },
     moveSelection(data, payload: { type: MoveType }) {
       commands.move(data, payload.type)
@@ -1311,9 +1315,6 @@ const state = createState({
     popHistory() {
       history.pop()
     },
-    forceSave(data) {
-      history.save(data)
-    },
     enableHistory() {
       history.enable()
     },
@@ -1377,7 +1378,7 @@ const state = createState({
 
       history.disable()
 
-      data.selectedIds.clear()
+      setSelectedIds(data, [])
 
       try {
         const { shapes } = updateFromCode(
@@ -1407,13 +1408,25 @@ const state = createState({
 
     /* ---------------------- Data ---------------------- */
 
+    forceSave(data) {
+      storage.save(data)
+    },
+
+    savePage(data) {
+      storage.savePage(data, data.currentPageId)
+    },
+
+    loadPage(data) {
+      storage.loadPage(data, data.currentPageId)
+    },
+
     saveCode(data, payload: { code: string }) {
       data.document.code[data.currentCodeFileId].code = payload.code
-      history.save(data)
+      storage.save(data)
     },
 
     restoreSavedData(data) {
-      history.load(data)
+      storage.load(data)
     },
 
     clearBoundsRotation(data) {
@@ -1422,10 +1435,10 @@ const state = createState({
   },
   values: {
     selectedIds(data) {
-      return new Set(data.selectedIds)
+      return new Set(getSelectedIds(data))
     },
     selectedBounds(data) {
-      const { selectedIds } = data
+      const selectedIds = getSelectedIds(data)
 
       const page = getPage(data)
 
@@ -1438,7 +1451,7 @@ const state = createState({
       if (selectedIds.size === 1) {
         if (!shapes[0]) {
           console.error('Could not find that shape! Clearing selected IDs.')
-          data.selectedIds.clear()
+          setSelectedIds(data, [])
           return null
         }
 
@@ -1497,7 +1510,7 @@ const state = createState({
       return commonBounds
     },
     selectedStyle(data) {
-      const selectedIds = Array.from(data.selectedIds.values())
+      const selectedIds = Array.from(getSelectedIds(data).values())
       const { currentStyle } = data
 
       if (selectedIds.length === 0) {

state/storage.ts

@@ -0,0 +1,139 @@
+import { Data, Page, PageState } from 'types'
+import { setToArray } from 'utils/utils'
+
+const CURRENT_VERSION = 'code_slate_0.0.4'
+const DOCUMENT_ID = '0001'
+
+function storageId(label: string, id: string) {
+  return `${CURRENT_VERSION}_doc_${DOCUMENT_ID}_${label}_${id}`
+}
+
+class Storage {
+  // Saving
+  load(data: Data, id = CURRENT_VERSION) {
+    if (typeof window === 'undefined') return
+    if (typeof localStorage === 'undefined') return
+
+    // Load data from local storage
+    const savedData = localStorage.getItem(id)
+
+    if (savedData !== null) {
+      const restoredData = JSON.parse(savedData)
+
+      // Empty shapes in state for each page
+      for (let key in restoredData.document.pages) {
+        restoredData.document.pages[key].shapes = {}
+      }
+
+      // Empty page states for each page
+      for (let key in restoredData.pageStates) {
+        restoredData.document.pages[key].shapes = {}
+      }
+
+      // Merge restored data into state
+      Object.assign(data, restoredData)
+
+      // Load current page
+      this.loadPage(data, data.currentPageId)
+    }
+  }
+
+  save = (data: Data, id = CURRENT_VERSION) => {
+    if (typeof window === 'undefined') return
+    if (typeof localStorage === 'undefined') return
+
+    const dataToSave: any = { ...data }
+
+    // Don't save pageStates
+    dataToSave.pageStates = {}
+
+    // Save current data to local storage
+    localStorage.setItem(id, JSON.stringify(dataToSave))
+
+    // Save current page
+    this.savePage(data, data.currentPageId)
+  }
+
+  savePage(data: Data, pageId: string) {
+    if (typeof window === 'undefined') return
+    if (typeof localStorage === 'undefined') return
+
+    // Save page
+    const page = data.document.pages[pageId]
+
+    localStorage.setItem(storageId('page', pageId), JSON.stringify(page))
+
+    // Save page state
+
+    let currentPageState = {
+      camera: {
+        point: [0, 0],
+        zoom: 1,
+      },
+      selectedIds: new Set([]),
+      ...data.pageStates[pageId],
+    }
+
+    const pageState = {
+      ...currentPageState,
+      selectedIds: setToArray(currentPageState.selectedIds),
+    }
+
+    localStorage.setItem(
+      storageId('pageState', pageId),
+      JSON.stringify(pageState)
+    )
+  }
+
+  loadPage(data: Data, pageId: string) {
+    if (typeof window === 'undefined') return
+    if (typeof localStorage === 'undefined') return
+
+    // Load page and merge into state
+    const savedPage = localStorage.getItem(storageId('page', pageId))
+
+    if (savedPage !== null) {
+      const restored: Page = JSON.parse(savedPage)
+      data.document.pages[pageId] = restored
+    }
+
+    // Load page state and merge into state
+    const savedPageState = localStorage.getItem(storageId('pageState', pageId))
+
+    if (savedPageState !== null) {
+      const restored: PageState = JSON.parse(savedPageState)
+      restored.selectedIds = new Set(restored.selectedIds)
+      data.pageStates[pageId] = restored
+    } else {
+      data.pageStates[pageId] = {
+        camera: {
+          point: [0, 0],
+          zoom: 1,
+        },
+        selectedIds: new Set([]),
+      }
+    }
+
+    // Empty shapes in state for other pages
+    for (let key in data.document.pages) {
+      if (key === pageId) continue
+      data.document.pages[key].shapes = {}
+    }
+
+    // Empty page states for other pages
+    for (let key in data.pageStates) {
+      if (key === pageId) continue
+      data.document.pages[key].shapes = {}
+    }
+
+    // Update camera
+    document.documentElement.style.setProperty(
+      '--camera-zoom',
+      data.pageStates[data.currentPageId].camera.zoom.toString()
+    )
+  }
+}
+
+const storage = new Storage()
+
+export default storage

todo.md

@@ -19,3 +19,9 @@
 
 - shift dragging arrow handles should lock to directions
 - fix undo/redo on rotated arrows
+- fix shift-rotation
+
+## Pages
+
+- [x] Make selection part of page state
+- [ ] Allow only one page to be in the document at a time

types.ts

@@ -22,7 +22,6 @@ export interface Data {
   activeTool: ShapeType | 'select'
   brush?: Bounds
   boundsRotation: number
-  selectedIds: Set<string>
   pointedId?: string
   hoveredId?: string
   currentPageId: string
@@ -49,6 +48,7 @@ export interface Page {
 }
 
 export interface PageState {
+  selectedIds: Set<string>
   camera: {
     point: number[]
     zoom: number

utils/utils.ts

@@ -1381,7 +1381,7 @@ export function getShapes(data: Data, pageId = data.currentPageId) {
 
 export function getSelectedShapes(data: Data, pageId = data.currentPageId) {
   const page = getPage(data, pageId)
-  const ids = Array.from(data.selectedIds.values())
+  const ids = setToArray(getSelectedIds(data))
   return ids.map((id) => page.shapes[id])
 }
 
@@ -1664,3 +1664,16 @@ export function getDocumentBranch(data: Data, id: string): string[] {
     ...shape.children.flatMap((childId) => getDocumentBranch(data, childId)),
   ]
 }
+
+export function getSelectedIds(data: Data) {
+  return data.pageStates[data.currentPageId].selectedIds
+}
+
+export function setSelectedIds(data: Data, ids: string[]) {
+  data.pageStates[data.currentPageId].selectedIds = new Set(ids)
+  return data.pageStates[data.currentPageId].selectedIds
+}
+
+export function setToArray<T>(set: Set<T>): T[] {
+  return Array.from(set.values())
+}