tldraw/state/state.ts

import { createSelectorHook, createState } from '@state-designer/react'
import { updateFromCode } from './code/generate'
import { createShape, getShapeUtils } from './shape-utils'
import vec from 'utils/vec'
import inputs from './inputs'
import history from './history'
import storage from './storage'
import clipboard from './clipboard'
import * as Sessions from './sessions'
import coopClient from './coop/client-pusher'
import commands from './commands'
import {
  getCommonBounds,
  rotateBounds,
  getBoundsCenter,
  setToArray,
  deepClone,
  pointInBounds,
  uniqueId,
} from 'utils'
import tld from 'utils/tld'
import {
  Data,
  PointerInfo,
  Shape,
  ShapeType,
  Corner,
  Edge,
  CodeControl,
  MoveType,
  ShapeStyles,
  DistributeType,
  AlignType,
  StretchType,
  DashStyle,
  SizeStyle,
  ColorStyle,
} from 'types'
import session from './session'

const initialData: Data = {
  isReadOnly: false,
  settings: {
    fontSize: 13,
    isDarkMode: false,
    isCodeOpen: false,
    isStyleOpen: false,
    isToolLocked: false,
    isPenLocked: false,
    nudgeDistanceLarge: 10,
    nudgeDistanceSmall: 1,
  },
  currentStyle: {
    size: SizeStyle.Medium,
    color: ColorStyle.Black,
    dash: DashStyle.Solid,
    isFilled: false,
  },
  activeTool: 'select',
  brush: undefined,
  boundsRotation: 0,
  pointedId: null,
  hoveredId: null,
  editingId: null,
  currentPageId: 'page1',
  currentParentId: 'page1',
  currentCodeFileId: 'file0',
  codeControls: {},
  document: {
    id: '0001',
    name: 'My Document',
    pages: {
      page1: {
        id: 'page1',
        type: 'page',
        name: 'Page 1',
        childIndex: 0,
        shapes: {},
      },
    },
    code: {
      file0: {
        id: 'file0',
        name: 'index.ts',
        code: `
const draw = new Draw({
  points: [
    ...Utils.getPointsBetween([0, 0], [20, 50]),
    ...Utils.getPointsBetween([20, 50], [100, 20], 3),
    ...Utils.getPointsBetween([100, 20], [100, 100], 10),
    [100, 100],
  ],
})

const rectangle = new Rectangle({
  point: [200, 0],
  style: {
    color: ColorStyle.Blue,
  },
})

const ellipse = new Ellipse({
  point: [400, 0],
})

const arrow = new Arrow({
  start: [600, 0],
  end: [700, 100],
})

const radius = 1000
const count = 100
const center = [350, 50]

for (let i = 0; i < count; i++) {
  const point = Vec.rotWith(
    Vec.add(center, [radius, 0]),
    center,
    (Math.PI * 2 * i) / count
  )

  const dot = new Dot({
    point,
  })
}
        `,
      },
    },
  },
  pageStates: {
    page1: {
      id: 'page1',
      selectedIds: new Set([]),
      camera: {
        point: [0, 0],
        zoom: 1,
      },
    },
  },
}

const state = createState({
  data: initialData,
  on: {
    UNMOUNTED: { to: 'loading' },
  },
  initial: 'loading',
  states: {
    loading: {
      on: {
        MOUNTED: {
          do: 'restoreSavedData',
          to: 'ready',
        },
      },
    },
    ready: {
      onEnter: {
        wait: 0.01,
        if: 'hasSelection',
        do: 'zoomCameraToSelectionActual',
        else: ['zoomCameraToActual'],
      },
      on: {
        // Network-Related
        // RT_LOADED_ROOM: [
        //   'clearRoom',
        //   { if: 'hasRoom', do: ['resetDocumentState', 'connectToRoom'] },
        // ],
        // RT_UNLOADED_ROOM: ['clearRoom', 'resetDocumentState'],
        // RT_DISCONNECTED_ROOM: ['clearRoom', 'resetDocumentState'],
        // RT_CREATED_SHAPE: 'addRtShape',
        // RT_CHANGED_STATUS: 'setRtStatus',
        // RT_DELETED_SHAPE: 'deleteRtShape',
        // RT_EDITED_SHAPE: 'editRtShape',
        // RT_MOVED_CURSOR: 'moveRtCursor',
        // MOVED_POINTER: { secretlyDo: 'sendRtCursorMove' },
        // Client
        RESIZED_WINDOW: 'resetPageState',
        RESET_DOCUMENT_STATE: 'resetDocumentState',
        TOGGLED_READ_ONLY: 'toggleReadOnly',
        LOADED_FONTS: 'resetShapes',
        USED_PEN_DEVICE: 'enablePenLock',
        DISABLED_PEN_LOCK: 'disablePenLock',
        TOGGLED_CODE_PANEL_OPEN: ['toggleCodePanel', 'saveAppState'],
        TOGGLED_STYLE_PANEL_OPEN: 'toggleStylePanel',
        PANNED_CAMERA: 'panCamera',
        POINTED_CANVAS: ['closeStylePanel', 'clearCurrentParentId'],
        COPIED_STATE_TO_CLIPBOARD: 'copyStateToClipboard',
        COPIED: { if: 'hasSelection', do: 'copyToClipboard' },
        PASTED: {
          unlessAny: ['isReadOnly', 'isInSession'],
          do: 'pasteFromClipboard',
        },
        PASTED_SHAPES_FROM_CLIPBOARD: {
          unlessAny: ['isReadOnly', 'isInSession'],
          do: 'pasteShapesFromClipboard',
        },
        TOGGLED_SHAPE_LOCK: {
          unlessAny: ['isReadOnly', 'isInSession'],
          if: 'hasSelection',
          do: 'lockSelection',
        },
        TOGGLED_SHAPE_HIDE: {
          unlessAny: ['isReadOnly', 'isInSession'],
          if: 'hasSelection',
          do: 'hideSelection',
        },
        TOGGLED_SHAPE_ASPECT_LOCK: {
          unlessAny: ['isReadOnly', 'isInSession'],
          if: 'hasSelection',
          do: 'aspectLockSelection',
        },
        CHANGED_STYLE: {
          unlessAny: ['isReadOnly', 'isInSession'],
          do: ['updateStyles', 'applyStylesToSelection'],
        },
        FORCE_CLEARED_PAGE: ['selectAll', 'deleteSelection'],
        CLEARED_PAGE: {
          unlessAny: ['isReadOnly', 'isInSession'],
          if: 'hasSelection',
          do: 'deleteSelection',
          else: ['selectAll', 'deleteSelection'],
        },
        CREATED_PAGE: {
          unless: ['isReadOnly', 'isInSession'],
          do: ['clearSelectedIds', 'createPage'],
        },
        DELETED_PAGE: {
          unlessAny: ['isReadOnly', 'isInSession', 'hasOnlyOnePage'],
          do: 'deletePage',
        },
        SELECTED_SELECT_TOOL: {
          unless: 'isInSession',
          to: 'selecting',
        },
        SELECTED_DRAW_TOOL: {
          unlessAny: ['isReadOnly', 'isInSession'],
          to: 'draw',
        },
        SELECTED_ARROW_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'arrow',
        },
        SELECTED_DOT_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'dot',
        },
        SELECTED_ELLIPSE_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'ellipse',
        },
        SELECTED_RAY_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'ray',
        },
        SELECTED_LINE_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'line',
        },
        SELECTED_POLYLINE_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'polyline',
        },
        SELECTED_RECTANGLE_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'rectangle',
        },
        SELECTED_TEXT_TOOL: {
          unless: ['isReadOnly', 'isInSession'],
          to: 'text',
        },
        GENERATED_FROM_CODE: {
          unless: ['isReadOnly', 'isInSession'],
          do: ['setCodeControls', 'setGeneratedShapes'],
        },
        UNDO: {
          unless: ['isReadOnly', 'isInSession'],
          do: 'undo',
        },
        REDO: {
          unless: ['isReadOnly', 'isInSession'],
          do: 'redo',
        },
        SAVED: {
          unlessAny: ['isInSession', 'isReadOnly'],
          do: 'forceSave',
        },
        LOADED_FROM_FILE: {
          unless: 'isInSession',
          do: ['loadDocumentFromJson', 'resetHistory'],
        },
        SELECTED_ALL: {
          unless: 'isInSession',
          to: 'selecting',
          do: 'selectAll',
        },
        CHANGED_PAGE: {
          unless: 'isInSession',
          do: 'changePage',
        },
        ZOOMED_TO_ACTUAL: {
          if: 'hasSelection',
          do: 'zoomCameraToSelectionActual',
          else: 'zoomCameraToActual',
        },
        ZOOMED_CAMERA: 'zoomCamera',
        INCREASED_CODE_FONT_SIZE: 'increaseCodeFontSize',
        DECREASED_CODE_FONT_SIZE: 'decreaseCodeFontSize',
        CHANGED_CODE_CONTROL: { to: 'updatingControls' },
        TOGGLED_TOOL_LOCK: 'toggleToolLock',
        ZOOMED_TO_SELECTION: {
          if: 'hasSelection',
          do: 'zoomCameraToSelection',
        },
        ZOOMED_TO_FIT: ['zoomCameraToFit', 'zoomCameraToActual'],
        ZOOMED_IN: 'zoomIn',
        ZOOMED_OUT: 'zoomOut',
        RESET_CAMERA: 'resetCamera',
        COPIED_TO_SVG: 'copyToSvg',
        LOADED_FROM_FILE_STSTEM: 'loadFromFileSystem',
        SAVED_AS_TO_FILESYSTEM: 'saveAsToFileSystem',
        SAVED_TO_FILESYSTEM: {
          unless: 'isReadOnly',
          then: {
            if: 'isReadOnly',
            do: 'saveAsToFileSystem',
            else: 'saveToFileSystem',
          },
        },
      },
      initial: 'selecting',
      states: {
        selecting: {
          onEnter: ['setActiveToolSelect', 'clearInputs'],
          on: {
            STARTED_PINCHING: {
              unless: 'isInSession',
              to: 'pinching.selectPinching',
            },
            SAVED: 'forceSave',
            DELETED: {
              unless: 'isReadOnly',
              do: 'deleteSelection',
            },
            SAVED_CODE: {
              unless: 'isReadOnly',
              do: 'saveCode',
            },
            MOVED_TO_PAGE: {
              unless: 'isReadOnly',
              if: 'hasSelection',
              do: ['moveSelectionToPage', 'zoomCameraToSelectionActual'],
            },
            MOVED: {
              unless: 'isReadOnly',
              if: 'hasSelection',
              do: 'moveSelection',
            },
            DUPLICATED: {
              unless: 'isReadOnly',
              if: 'hasSelection',
              do: 'duplicateSelection',
            },
            ROTATED_CCW: {
              unless: 'isReadOnly',
              if: 'hasSelection',
              do: 'rotateSelectionCcw',
            },
            ALIGNED: {
              unless: 'isReadOnly',
              if: 'hasMultipleSelection',
              do: 'alignSelection',
            },
            STRETCHED: {
              unless: 'isReadOnly',
              if: 'hasMultipleSelection',
              do: 'stretchSelection',
            },
            DISTRIBUTED: {
              unless: 'isReadOnly',
              if: 'hasMultipleSelection',
              do: 'distributeSelection',
            },
            GROUPED: {
              unless: 'isReadOnly',
              if: 'hasMultipleSelection',
              do: 'groupSelection',
            },
            UNGROUPED: {
              unless: 'isReadOnly',
              if: ['hasSelection', 'selectionIncludesGroups'],
              do: 'ungroupSelection',
            },
            NUDGED: { do: 'nudgeSelection' },
          },
          initial: 'notPointing',
          states: {
            notPointing: {
              onEnter: 'clearPointedId',
              on: {
                CANCELLED: 'clearSelectedIds',
                POINTED_CANVAS: { to: 'brushSelecting' },
                POINTED_BOUNDS: [
                  {
                    if: 'isPressingMetaKey',
                    to: 'brushSelecting',
                  },
                  { to: 'pointingBounds' },
                ],
                POINTED_BOUNDS_HANDLE: {
                  unless: 'isReadOnly',
                  if: 'isPointingRotationHandle',
                  to: 'rotatingSelection',
                  else: { to: 'transformingSelection' },
                },
                STARTED_EDITING_SHAPE: {
                  unless: 'isReadOnly',
                  get: 'firstSelectedShape',
                  if: ['hasSingleSelection', 'canEditSelectedShape'],
                  do: 'setEditingId',
                  to: 'editingShape',
                },
                DOUBLE_POINTED_BOUNDS_HANDLE: {
                  unless: 'isReadOnly',
                  if: 'hasSingleSelection',
                  do: 'resetShapeBounds',
                },
                POINTED_HANDLE: {
                  unless: 'isReadOnly',
                  to: 'translatingHandles',
                },
                MOVED_OVER_SHAPE: {
                  if: 'pointHitsShape',
                  then: {
                    unless: 'shapeIsHovered',
                    do: 'setHoveredId',
                  },
                  else: {
                    if: 'shapeIsHovered',
                    do: 'clearHoveredId',
                  },
                },
                UNHOVERED_SHAPE: 'clearHoveredId',
                POINTED_SHAPE: [
                  {
                    if: 'isPressingMetaKey',
                    to: 'brushSelecting',
                  },
                  'setPointedId',
                  {
                    if: 'pointInSelectionBounds',
                    to: 'pointingBounds',
                  },
                  {
                    unless: 'isPointedShapeSelected',
                    then: {
                      if: 'isPressingShiftKey',
                      do: ['pushPointedIdToSelectedIds', 'clearPointedId'],
                      else: ['clearSelectedIds', 'pushPointedIdToSelectedIds'],
                    },
                  },
                  {
                    to: 'pointingBounds',
                  },
                ],
                DOUBLE_POINTED_SHAPE: [
                  'setPointedId',
                  {
                    if: 'isPointedShapeSelected',
                    then: {
                      get: 'firstSelectedShape',
                      if: 'canEditSelectedShape',
                      do: 'setEditingId',
                      to: 'editingShape',
                    },
                  },
                  {
                    unless: 'isPressingShiftKey',
                    do: [
                      'setDrilledPointedId',
                      'clearSelectedIds',
                      'pushPointedIdToSelectedIds',
                    ],
                    to: 'pointingBounds',
                  },
                ],
                RIGHT_POINTED: [
                  {
                    if: 'isPointingCanvas',
                    do: 'clearSelectedIds',
                    else: {
                      if: 'isPointingShape',
                      then: [
                        'setPointedId',
                        {
                          unless: 'isPointedShapeSelected',
                          do: [
                            'clearSelectedIds',
                            'pushPointedIdToSelectedIds',
                          ],
                        },
                      ],
                    },
                  },
                ],
              },
            },
            pointingBounds: {
              on: {
                CANCELLED: { to: 'notPointing' },
                STOPPED_POINTING_BOUNDS: [],
                STOPPED_POINTING: [
                  {
                    if: 'isPointingBounds',
                    do: 'clearSelectedIds',
                  },
                  {
                    if: 'isPressingShiftKey',
                    then: {
                      if: 'isPointedShapeSelected',
                      do: 'pullPointedIdFromSelectedIds',
                    },
                    else: {
                      if: 'isPointingShape',
                      do: [
                        'clearSelectedIds',
                        'setPointedId',
                        'pushPointedIdToSelectedIds',
                      ],
                    },
                  },
                  { to: 'notPointing' },
                ],
                MOVED_POINTER: {
                  unless: ['isReadOnly', 'isInSession'],
                  if: 'distanceImpliesDrag',
                  to: 'translatingSelection',
                },
              },
            },
            rotatingSelection: {
              onEnter: 'startRotateSession',
              onExit: ['completeSession', 'clearBoundsRotation'],
              on: {
                MOVED_POINTER: 'updateRotateSession',
                PANNED_CAMERA: 'updateRotateSession',
                PRESSED_SHIFT_KEY: 'keyUpdateRotateSession',
                RELEASED_SHIFT_KEY: 'keyUpdateRotateSession',
                STOPPED_POINTING: { to: 'selecting' },
                CANCELLED: { do: 'cancelSession', to: 'selecting' },
              },
            },
            transformingSelection: {
              onEnter: 'startTransformSession',
              onExit: 'completeSession',
              on: {
                // MOVED_POINTER: 'updateTransformSession', using hacks.fastTransform
                PANNED_CAMERA: 'updateTransformSession',
                PRESSED_SHIFT_KEY: 'keyUpdateTransformSession',
                RELEASED_SHIFT_KEY: 'keyUpdateTransformSession',
                STOPPED_POINTING: { to: 'selecting' },
                CANCELLED: { do: 'cancelSession', to: 'selecting' },
              },
            },
            translatingSelection: {
              onEnter: 'startTranslateSession',
              onExit: 'completeSession',
              on: {
                STARTED_PINCHING: { to: 'pinching' },
                MOVED_POINTER: 'updateTranslateSession',
                PANNED_CAMERA: 'updateTranslateSession',
                PRESSED_SHIFT_KEY: 'keyUpdateTranslateSession',
                RELEASED_SHIFT_KEY: 'keyUpdateTranslateSession',
                PRESSED_ALT_KEY: 'keyUpdateTranslateSession',
                RELEASED_ALT_KEY: 'keyUpdateTranslateSession',
                STOPPED_POINTING: { to: 'selecting' },
                CANCELLED: { do: 'cancelSession', to: 'selecting' },
              },
            },
            translatingHandles: {
              onEnter: 'startHandleSession',
              onExit: 'completeSession',
              on: {
                MOVED_POINTER: 'updateHandleSession',
                PANNED_CAMERA: 'updateHandleSession',
                PRESSED_SHIFT_KEY: 'keyUpdateHandleSession',
                RELEASED_SHIFT_KEY: 'keyUpdateHandleSession',
                STOPPED_POINTING: { to: 'selecting' },
                DOUBLE_POINTED_HANDLE: {
                  do: ['cancelSession', 'doublePointHandle'],
                  to: 'selecting',
                },
                CANCELLED: { do: 'cancelSession', to: 'selecting' },
              },
            },
            brushSelecting: {
              onExit: 'completeSession',
              onEnter: [
                {
                  unless: ['isPressingMetaKey', 'isPressingShiftKey'],
                  do: 'clearSelectedIds',
                },
                'clearBoundsRotation',
                'startBrushSession',
              ],
              on: {
                // MOVED_POINTER: 'updateBrushSession', using hacks.fastBrushSelect
                PANNED_CAMERA: 'updateBrushSession',
                STOPPED_POINTING: { to: 'selecting' },
                STARTED_PINCHING: { to: 'pinching' },
                CANCELLED: { do: 'cancelSession', to: 'selecting' },
              },
            },
            updatingControls: {
              onEnter: 'updateControls',
              async: {
                await: 'getUpdatedShapes',
                onResolve: { do: 'updateGeneratedShapes', to: 'selecting' },
              },
            },
          },
        },
        editingShape: {
          onEnter: 'startEditSession',
          onExit: ['completeSession', 'clearEditingId'],
          on: {
            EDITED_SHAPE: { do: 'updateEditSession' },

            BLURRED_EDITING_SHAPE: { to: 'selecting' },
            CANCELLED: [
              {
                get: 'editingShape',
                if: 'shouldDeleteShape',
                do: 'breakSession',
                else: 'cancelSession',
              },
              { to: 'selecting' },
            ],
          },
        },
        pinching: {
          on: {
            // PINCHED: { do: 'pinchCamera' }, using hacks.fastPinchCamera
          },
          initial: 'selectPinching',
          onExit: { secretlyDo: 'updateZoomCSS' },
          states: {
            selectPinching: {
              on: {
                STOPPED_PINCHING: { to: 'selecting' },
              },
            },
            toolPinching: {
              on: {
                STOPPED_PINCHING: { to: 'usingTool.previous' },
              },
            },
          },
        },
        usingTool: {
          initial: 'draw',
          onEnter: 'clearSelectedIds',
          on: {
            STARTED_PINCHING: {
              do: 'breakSession',
              to: 'pinching.toolPinching',
            },
            TOGGLED_TOOL_LOCK: 'toggleToolLock',
          },
          states: {
            draw: {
              onEnter: 'setActiveToolDraw',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: {
                      get: 'newDraw',
                      do: 'createShape',
                      to: 'draw.editing',
                    },
                    POINTED_CANVAS: {
                      get: 'newDraw',
                      do: 'createShape',
                      to: 'draw.editing',
                    },
                  },
                },
                editing: {
                  onEnter: 'startDrawSession',
                  onExit: 'completeSession',
                  on: {
                    CANCELLED: {
                      do: 'breakSession',
                      to: 'selecting',
                    },
                    STOPPED_POINTING: {
                      do: 'completeSession',
                      to: 'draw.creating',
                    },
                    PRESSED_SHIFT: 'keyUpdateDrawSession',
                    RELEASED_SHIFT: 'keyUpdateDrawSession',
                    // MOVED_POINTER: 'updateDrawSession',
                    PANNED_CAMERA: 'updateDrawSession',
                  },
                },
              },
            },
            dot: {
              onEnter: 'setActiveToolDot',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: {
                      get: 'newDot',
                      do: 'createShape',
                      to: 'dot.editing',
                    },
                    POINTED_CANVAS: {
                      get: 'newDot',
                      do: 'createShape',
                      to: 'dot.editing',
                    },
                  },
                },
                editing: {
                  on: {
                    STOPPED_POINTING: [
                      'completeSession',
                      {
                        if: 'isToolLocked',
                        to: 'dot.creating',
                        else: { to: 'selecting' },
                      },
                    ],
                    CANCELLED: {
                      do: 'breakSession',
                      to: 'selecting',
                    },
                  },
                  initial: 'inactive',
                  states: {
                    inactive: {
                      on: {
                        MOVED_POINTER: {
                          if: 'distanceImpliesDrag',
                          to: 'dot.editing.active',
                        },
                      },
                    },
                    active: {
                      onExit: 'completeSession',
                      onEnter: 'startTranslateSession',
                      on: {
                        MOVED_POINTER: 'updateTranslateSession',
                        PANNED_CAMERA: 'updateTranslateSession',
                      },
                    },
                  },
                },
              },
            },
            arrow: {
              onEnter: 'setActiveToolArrow',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: {
                      get: 'newArrow',
                      do: 'createShape',
                      to: 'arrow.editing',
                    },
                    POINTED_CANVAS: {
                      get: 'newArrow',
                      do: 'createShape',
                      to: 'arrow.editing',
                    },
                  },
                },
                editing: {
                  onExit: 'completeSession',
                  onEnter: 'startArrowSession',
                  on: {
                    STOPPED_POINTING: [
                      'completeSession',
                      {
                        if: 'isToolLocked',
                        to: 'arrow.creating',
                        else: { to: 'selecting' },
                      },
                    ],
                    CANCELLED: {
                      do: 'breakSession',
                      if: 'isToolLocked',
                      to: 'arrow.creating',
                      else: { to: 'selecting' },
                    },
                    PRESSED_SHIFT: 'keyUpdateArrowSession',
                    RELEASED_SHIFT: 'keyUpdateArrowSession',
                    MOVED_POINTER: 'updateArrowSession',
                    PANNED_CAMERA: 'updateArrowSession',
                  },
                },
              },
            },
            ellipse: {
              onEnter: 'setActiveToolEllipse',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_CANVAS: {
                      to: 'ellipse.editing',
                    },
                  },
                },
                editing: {
                  on: {
                    STOPPED_POINTING: { to: 'selecting' },
                    CANCELLED: { to: 'selecting' },
                    MOVED_POINTER: {
                      if: 'distanceImpliesDrag',
                      then: {
                        get: 'newEllipse',
                        do: 'createShape',
                        to: 'drawingShape.bounds',
                      },
                    },
                  },
                },
              },
            },
            rectangle: {
              onEnter: 'setActiveToolRectangle',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: {
                      to: 'rectangle.editing',
                    },
                    POINTED_CANVAS: {
                      to: 'rectangle.editing',
                    },
                  },
                },
                editing: {
                  on: {
                    STOPPED_POINTING: { to: 'selecting' },
                    CANCELLED: { to: 'selecting' },
                    MOVED_POINTER: {
                      if: 'distanceImpliesDrag',
                      then: {
                        get: 'newRectangle',
                        do: 'createShape',
                        to: 'drawingShape.bounds',
                      },
                    },
                  },
                },
              },
            },
            text: {
              onEnter: 'setActiveToolText',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: [
                      {
                        get: 'newText',
                        do: 'createShape',
                      },
                      {
                        get: 'firstSelectedShape',
                        if: 'canEditSelectedShape',
                        do: 'setEditingId',
                        to: 'editingShape',
                      },
                    ],
                    POINTED_CANVAS: [
                      {
                        get: 'newText',
                        do: 'createShape',
                        to: 'editingShape',
                      },
                    ],
                  },
                },
              },
            },
            ray: {
              onEnter: 'setActiveToolRay',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: {
                      get: 'newRay',
                      do: 'createShape',
                      to: 'ray.editing',
                    },
                    POINTED_CANVAS: {
                      get: 'newRay',
                      do: 'createShape',
                      to: 'ray.editing',
                    },
                  },
                },
                editing: {
                  on: {
                    STOPPED_POINTING: { to: 'selecting' },
                    CANCELLED: { to: 'selecting' },
                    MOVED_POINTER: {
                      if: 'distanceImpliesDrag',
                      to: 'drawingShape.direction',
                    },
                  },
                },
              },
            },
            line: {
              onEnter: 'setActiveToolLine',
              initial: 'creating',
              states: {
                creating: {
                  on: {
                    CANCELLED: { to: 'selecting' },
                    POINTED_SHAPE: {
                      get: 'newLine',
                      do: 'createShape',
                      to: 'line.editing',
                    },
                    POINTED_CANVAS: {
                      get: 'newLine',
                      do: 'createShape',
                      to: 'line.editing',
                    },
                  },
                },
                editing: {
                  on: {
                    STOPPED_POINTING: { to: 'selecting' },
                    CANCELLED: { to: 'selecting' },
                    MOVED_POINTER: {
                      if: 'distanceImpliesDrag',
                      to: 'drawingShape.direction',
                    },
                  },
                },
              },
            },
            polyline: {
              onEnter: 'setActiveToolPolyline',
            },
          },
        },
        drawingShape: {
          onExit: 'completeSession',
          on: {
            STOPPED_POINTING: [
              'completeSession',
              {
                if: 'isToolLocked',
                to: 'usingTool.previous',
                else: { to: 'selecting' },
              },
            ],
            CANCELLED: {
              do: 'breakSession',
              to: 'selecting',
            },
          },
          initial: 'drawingShapeBounds',
          states: {
            bounds: {
              onEnter: 'startDrawTransformSession',
              on: {
                MOVED_POINTER: 'updateTransformSession',
                PANNED_CAMERA: 'updateTransformSession',
              },
            },
            direction: {
              onEnter: 'startDirectionSession',
              onExit: 'completeSession',
              on: {
                MOVED_POINTER: 'updateDirectionSession',
                PANNED_CAMERA: 'updateDirectionSession',
              },
            },
          },
        },
      },
    },
  },
  results: {
    newDot() {
      return ShapeType.Dot
    },
    newRay() {
      return ShapeType.Ray
    },
    newLine() {
      return ShapeType.Line
    },
    newText() {
      return ShapeType.Text
    },
    newDraw() {
      return ShapeType.Draw
    },
    newArrow() {
      return ShapeType.Arrow
    },
    newEllipse() {
      return ShapeType.Ellipse
    },
    newRectangle() {
      return ShapeType.Rectangle
    },
    firstSelectedShape(data) {
      return tld.getSelectedShapes(data)[0]
    },
    editingShape(data) {
      return tld.getShape(data, data.editingId)
    },
  },
  conditions: {
    hasRoom(_, payload: { id?: string }) {
      return payload.id !== undefined
    },
    shouldDeleteShape(data, payload, shape: Shape) {
      return getShapeUtils(shape).shouldDelete(shape)
    },
    isPointingCanvas(data, payload: PointerInfo) {
      return payload.target === 'canvas'
    },
    isPointingBounds(data, payload: PointerInfo) {
      return tld.getSelectedIds(data).size > 0 && payload.target === 'bounds'
    },
    isPointingShape(data, payload: PointerInfo) {
      return (
        payload.target &&
        payload.target !== 'canvas' &&
        payload.target !== 'bounds'
      )
    },
    isReadOnly(data) {
      return data.isReadOnly
    },
    isInSession() {
      return session.isInSession
    },
    canEditSelectedShape(data, payload, result: Shape) {
      return getShapeUtils(result).canEdit && !result.isLocked
    },
    distanceImpliesDrag(data, payload: PointerInfo) {
      return vec.dist2(payload.origin, payload.point) > 8
    },
    hasPointedTarget(data, payload: PointerInfo) {
      return payload.target !== undefined
    },
    isPointedShapeSelected(data) {
      return tld.getSelectedIds(data).has(data.pointedId)
    },
    isPressingShiftKey(data, payload: PointerInfo) {
      return payload.shiftKey
    },
    isPressingMetaKey(data, payload: PointerInfo) {
      return payload.metaKey
    },
    shapeIsHovered(data, payload: { target: string }) {
      return data.hoveredId === payload.target
    },
    pointInSelectionBounds(data, payload: PointerInfo) {
      const bounds = getSelectionBounds(data)

      if (!bounds) return false

      return pointInBounds(tld.screenToWorld(payload.point, data), bounds)
    },
    pointHitsShape(data, payload: PointerInfo) {
      const shape = tld.getShape(data, payload.target)

      return getShapeUtils(shape).hitTest(
        shape,
        tld.screenToWorld(payload.point, data)
      )
    },
    hasPointedId(data, payload: PointerInfo) {
      return tld.getShape(data, payload.target) !== undefined
    },
    isPointingRotationHandle(
      data,
      payload: { target: Edge | Corner | 'rotate' }
    ) {
      return payload.target === 'rotate'
    },
    hasSelection(data) {
      return tld.getSelectedIds(data).size > 0
    },
    hasSingleSelection(data) {
      return tld.getSelectedIds(data).size === 1
    },
    hasMultipleSelection(data) {
      return tld.getSelectedIds(data).size > 1
    },
    isToolLocked(data) {
      return data.settings.isToolLocked
    },
    isPenLocked(data) {
      return data.settings.isPenLocked
    },
    hasOnlyOnePage(data) {
      return Object.keys(data.document.pages).length === 1
    },
    selectionIncludesGroups(data) {
      return tld
        .getSelectedShapes(data)
        .some((shape) => shape.type === ShapeType.Group)
    },
  },
  actions: {
    // Networked Room
    setRtStatus(data, payload: { id: string; status: string }) {
      const { status } = payload

      if (!data.room) {
        data.room = {
          id: null,
          status: '',
          peers: {},
        }
      }

      data.room.peers = {}
      data.room.status = status
    },
    addRtShape(data, payload: { pageId: string; shape: Shape }) {
      const { pageId, shape } = payload
      // What if the page is in storage?
      data.document.pages[pageId].shapes[shape.id] = shape
    },
    deleteRtShape(data, payload: { pageId: string; shapeId: string }) {
      const { pageId, shapeId } = payload
      // What if the page is in storage?
      delete data.document[pageId].shapes[shapeId]
    },
    editRtShape(data, payload: { pageId: string; shape: Shape }) {
      const { pageId, shape } = payload
      // What if the page is in storage?
      Object.assign(data.document[pageId].shapes[shape.id], shape)
    },
    sendRtCursorMove(data, payload: PointerInfo) {
      const point = tld.screenToWorld(payload.point, data)
      coopClient.moveCursor(data.currentPageId, point)
    },
    moveRtCursor(
      data,
      payload: { id: string; pageId: string; point: number[] }
    ) {
      const { room } = data

      if (room.peers[payload.id] === undefined) {
        room.peers[payload.id] = {
          id: payload.id,
          cursor: {
            point: payload.point,
          },
        }
      }

      room.peers[payload.id].cursor.point = payload.point
    },
    clearRoom(data) {
      data.room = undefined
    },
    resetDocumentState(data) {
      data.document.id = uniqueId()

      const newId = 'page1'

      data.currentPageId = newId

      data.document.pages = {
        [newId]: {
          id: newId,
          name: 'Page 1',
          type: 'page',
          shapes: {},
          childIndex: 1,
        },
      }

      data.pageStates = {
        [newId]: {
          id: newId,
          selectedIds: new Set(),
          camera: {
            point: [0, 0],
            zoom: 1,
          },
        },
      }
    },
    connectToRoom(data, payload: { id: string }) {
      data.room = { id: payload.id, status: 'connecting', peers: {} }
      coopClient.connect(payload.id)
    },

    resetPageState(data) {
      const pageState = data.pageStates[data.currentPageId]
      data.pageStates[data.currentPageId] = { ...pageState }
    },

    toggleReadOnly(data) {
      data.isReadOnly = !data.isReadOnly
    },
    /* ---------------------- Pages --------------------- */
    changePage(data, payload: { id: string }) {
      commands.changePage(data, payload.id)
    },
    createPage(data) {
      commands.createPage(data, true)
    },
    deletePage(data, payload: { id: string }) {
      commands.deletePage(data, payload.id)
    },
    /* --------------------- Shapes --------------------- */
    resetShapes(data) {
      const page = tld.getPage(data)
      Object.values(page.shapes).forEach((shape) => {
        page.shapes[shape.id] = { ...shape }
      })
    },

    createShape(data, payload, type: ShapeType) {
      const shape = createShape(type, {
        parentId: data.currentPageId,
        point: vec.round(tld.screenToWorld(payload.point, data)),
        style: deepClone(data.currentStyle),
      })

      const siblings = tld.getChildren(data, shape.parentId)
      const childIndex = siblings.length
        ? siblings[siblings.length - 1].childIndex + 1
        : 1

      data.editingId = shape.id

      getShapeUtils(shape).setProperty(shape, 'childIndex', childIndex)

      tld.getPage(data).shapes[shape.id] = shape

      tld.setSelectedIds(data, [shape.id])
    },
    /* -------------------- Sessions -------------------- */

    // Shared
    breakSession(data) {
      session.cancel(data)
      history.disable()
      commands.deleteSelected(data)
      history.enable()
    },
    cancelSession(data) {
      session.cancel(data)
    },
    completeSession(data) {
      session.complete(data)
    },

    // Editing
    startEditSession(data) {
      session.begin(new Sessions.EditSession(data))
    },
    updateEditSession(data, payload: { change: Partial<Shape> }) {
      session.update<Sessions.EditSession>(data, payload.change)
    },

    // Brushing
    startBrushSession(data, payload: PointerInfo) {
      session.begin(
        new Sessions.BrushSession(data, tld.screenToWorld(payload.point, data))
      )
    },
    updateBrushSession(data, payload: PointerInfo) {
      session.update<Sessions.BrushSession>(
        data,
        tld.screenToWorld(payload.point, data)
      )
    },

    // Rotating
    startRotateSession(data, payload: PointerInfo) {
      session.begin(
        new Sessions.RotateSession(data, tld.screenToWorld(payload.point, data))
      )
    },
    keyUpdateRotateSession(data, payload: PointerInfo) {
      session.update<Sessions.RotateSession>(
        data,
        tld.screenToWorld(inputs.pointer.point, data),
        payload.shiftKey
      )
    },
    updateRotateSession(data, payload: PointerInfo) {
      session.update<Sessions.RotateSession>(
        data,
        tld.screenToWorld(payload.point, data),
        payload.shiftKey
      )
    },

    // Dragging / Translating
    startTranslateSession(data) {
      session.begin(
        new Sessions.TranslateSession(
          data,
          tld.screenToWorld(inputs.pointer.origin, data)
        )
      )
    },
    keyUpdateTranslateSession(
      data,
      payload: { shiftKey: boolean; altKey: boolean }
    ) {
      session.update<Sessions.TranslateSession>(
        data,
        tld.screenToWorld(inputs.pointer.point, data),
        payload.shiftKey,
        payload.altKey
      )
    },
    updateTranslateSession(data, payload: PointerInfo) {
      session.update<Sessions.TranslateSession>(
        data,
        tld.screenToWorld(payload.point, data),
        payload.shiftKey,
        payload.altKey
      )
    },

    // Handles
    doublePointHandle(data, payload: PointerInfo) {
      const id = setToArray(tld.getSelectedIds(data))[0]
      commands.doublePointHandle(data, id, payload)
    },

    // Dragging Handle
    startHandleSession(data, payload: PointerInfo) {
      const shapeId = Array.from(tld.getSelectedIds(data).values())[0]
      const handleId = payload.target

      session.begin(
        new Sessions.HandleSession(
          data,
          shapeId,
          handleId,
          tld.screenToWorld(inputs.pointer.origin, data)
        )
      )
    },
    keyUpdateHandleSession(
      data,
      payload: { shiftKey: boolean; altKey: boolean }
    ) {
      session.update<Sessions.HandleSession>(
        data,
        tld.screenToWorld(inputs.pointer.point, data),
        payload.shiftKey
      )
    },
    updateHandleSession(data, payload: PointerInfo) {
      session.update<Sessions.HandleSession>(
        data,
        tld.screenToWorld(payload.point, data),
        payload.shiftKey
      )
    },

    // Transforming
    startTransformSession(
      data,
      payload: PointerInfo & { target: Corner | Edge }
    ) {
      const point = tld.screenToWorld(inputs.pointer.origin, data)
      session.begin(
        tld.getSelectedIds(data).size === 1
          ? new Sessions.TransformSingleSession(data, payload.target, point)
          : new Sessions.TransformSession(data, payload.target, point)
      )
    },
    startDrawTransformSession(data, payload: PointerInfo) {
      session.begin(
        new Sessions.TransformSingleSession(
          data,
          Corner.BottomRight,
          tld.screenToWorld(payload.point, data),
          true
        )
      )
    },
    keyUpdateTransformSession(data, payload: PointerInfo) {
      session.update<Sessions.TransformSession>(
        data,
        tld.screenToWorld(inputs.pointer.point, data),
        payload.shiftKey
      )
    },
    updateTransformSession(data, payload: PointerInfo) {
      session.update<Sessions.TransformSession>(
        data,
        tld.screenToWorld(payload.point, data),
        payload.shiftKey
      )
    },

    // Direction
    startDirectionSession(data) {
      session.begin(
        new Sessions.DirectionSession(
          data,
          tld.screenToWorld(inputs.pointer.origin, data)
        )
      )
    },
    updateDirectionSession(data, payload: PointerInfo) {
      session.update<Sessions.DirectionSession>(
        data,
        tld.screenToWorld(payload.point, data)
      )
    },

    // Drawing
    startDrawSession(data) {
      const id = Array.from(tld.getSelectedIds(data).values())[0]
      session.begin(
        new Sessions.DrawSession(
          data,
          id,
          tld.screenToWorld(inputs.pointer.origin, data)
        )
      )
    },
    keyUpdateDrawSession(data, payload: PointerInfo) {
      session.update<Sessions.DrawSession>(
        data,
        tld.screenToWorld(inputs.pointer.point, data),
        payload.pressure,
        payload.shiftKey
      )
    },
    updateDrawSession(data, payload: PointerInfo) {
      session.update<Sessions.DrawSession>(
        data,
        tld.screenToWorld(payload.point, data),
        payload.pressure,
        payload.shiftKey
      )
    },

    // Arrow
    startArrowSession(data, payload: PointerInfo) {
      const id = Array.from(tld.getSelectedIds(data).values())[0]

      session.begin(
        new Sessions.ArrowSession(
          data,
          id,
          tld.screenToWorld(inputs.pointer.origin, data),
          payload.shiftKey
        )
      )
    },
    keyUpdateArrowSession(data, payload: PointerInfo) {
      session.update<Sessions.ArrowSession>(
        data,
        tld.screenToWorld(inputs.pointer.point, data),
        payload.shiftKey
      )
    },
    updateArrowSession(data, payload: PointerInfo) {
      session.update<Sessions.ArrowSession>(
        data,
        tld.screenToWorld(payload.point, data),
        payload.shiftKey
      )
    },

    /* -------------------- Selection ------------------- */

    // Nudges
    nudgeSelection(data, payload: { delta: number[]; shiftKey: boolean }) {
      commands.nudge(
        data,
        vec.mul(
          payload.delta,
          payload.shiftKey
            ? data.settings.nudgeDistanceLarge
            : data.settings.nudgeDistanceSmall
        )
      )
    },

    clearInputs() {
      inputs.clear()
    },

    selectAll(data) {
      const selectedIds = tld.getSelectedIds(data)
      const page = tld.getPage(data)
      selectedIds.clear()
      for (const id in page.shapes) {
        if (page.shapes[id].parentId === data.currentPageId) {
          selectedIds.add(id)
        }
      }
    },
    setHoveredId(data, payload: PointerInfo) {
      data.hoveredId = payload.target
    },
    clearHoveredId(data) {
      data.hoveredId = undefined
    },
    setPointedId(data, payload: PointerInfo) {
      data.pointedId = getPointedId(data, payload.target)
      data.currentParentId = getParentId(data, data.pointedId)
    },
    setDrilledPointedId(data, payload: PointerInfo) {
      data.pointedId = getDrilledPointedId(data, payload.target)
      data.currentParentId = getParentId(data, data.pointedId)
    },
    clearCurrentParentId(data) {
      data.currentParentId = data.currentPageId
      data.pointedId = undefined
    },
    clearPointedId(data) {
      data.pointedId = undefined
    },
    clearSelectedIds(data) {
      tld.setSelectedIds(data, [])
    },
    pullPointedIdFromSelectedIds(data) {
      const { pointedId } = data
      const selectedIds = tld.getSelectedIds(data)
      selectedIds.delete(pointedId)
    },
    pushPointedIdToSelectedIds(data) {
      tld.getSelectedIds(data).add(data.pointedId)
    },
    moveSelection(data, payload: { type: MoveType }) {
      commands.move(data, payload.type)
    },
    moveSelectionToPage(data, payload: { id: string }) {
      commands.moveToPage(data, payload.id)
    },
    alignSelection(data, payload: { type: AlignType }) {
      commands.align(data, payload.type)
    },
    stretchSelection(data, payload: { type: StretchType }) {
      commands.stretch(data, payload.type)
    },
    distributeSelection(data, payload: { type: DistributeType }) {
      commands.distribute(data, payload.type)
    },
    duplicateSelection(data) {
      commands.duplicate(data)
    },
    lockSelection(data) {
      commands.toggle(data, 'isLocked')
    },
    hideSelection(data) {
      commands.toggle(data, 'isHidden')
    },
    aspectLockSelection(data) {
      commands.toggle(data, 'isAspectRatioLocked')
    },
    deleteSelection(data) {
      commands.deleteSelected(data)
    },
    rotateSelectionCcw(data) {
      commands.rotateCcw(data)
    },
    groupSelection(data) {
      commands.group(data)
    },
    ungroupSelection(data) {
      commands.ungroup(data)
    },
    resetShapeBounds(data) {
      commands.resetBounds(data)
    },
    resetPage(data) {
      data.document.pages[data.currentPageId].shapes = {}
    },

    /* --------------------- Editing -------------------- */

    setEditingId(data) {
      const selectedShape = tld.getSelectedShapes(data)[0]
      if (getShapeUtils(selectedShape).canEdit) {
        data.editingId = selectedShape.id
      }

      tld.getPageState(data).selectedIds = new Set([selectedShape.id])
    },
    clearEditingId(data) {
      data.editingId = null
    },

    /* ---------------------- Tool ---------------------- */

    setActiveTool(data, payload: { tool: ShapeType | 'select' }) {
      data.activeTool = payload.tool
    },
    setActiveToolSelect(data) {
      data.activeTool = 'select'
    },
    setActiveToolDraw(data) {
      data.activeTool = ShapeType.Draw
    },
    setActiveToolRectangle(data) {
      data.activeTool = ShapeType.Rectangle
    },
    setActiveToolEllipse(data) {
      data.activeTool = ShapeType.Ellipse
    },
    setActiveToolArrow(data) {
      data.activeTool = ShapeType.Arrow
    },
    setActiveToolDot(data) {
      data.activeTool = ShapeType.Dot
    },
    setActiveToolPolyline(data) {
      data.activeTool = ShapeType.Polyline
    },
    setActiveToolRay(data) {
      data.activeTool = ShapeType.Ray
    },
    setActiveToolLine(data) {
      data.activeTool = ShapeType.Line
    },
    setActiveToolText(data) {
      data.activeTool = ShapeType.Text
    },

    /* --------------------- Camera --------------------- */

    zoomIn(data) {
      const camera = tld.getCurrentCamera(data)
      const i = Math.round((camera.zoom * 100) / 25)
      const center = [window.innerWidth / 2, window.innerHeight / 2]

      const p0 = tld.screenToWorld(center, data)
      camera.zoom = tld.getCameraZoom((i + 1) * 0.25)
      const p1 = tld.screenToWorld(center, data)
      camera.point = vec.add(camera.point, vec.sub(p1, p0))

      tld.setZoomCSS(camera.zoom)
    },
    zoomOut(data) {
      const camera = tld.getCurrentCamera(data)
      const i = Math.round((camera.zoom * 100) / 25)
      const center = [window.innerWidth / 2, window.innerHeight / 2]

      const p0 = tld.screenToWorld(center, data)
      camera.zoom = tld.getCameraZoom((i - 1) * 0.25)
      const p1 = tld.screenToWorld(center, data)
      camera.point = vec.add(camera.point, vec.sub(p1, p0))

      tld.setZoomCSS(camera.zoom)
    },
    zoomCameraToActual(data) {
      const camera = tld.getCurrentCamera(data)
      const center = [window.innerWidth / 2, window.innerHeight / 2]

      const p0 = tld.screenToWorld(center, data)
      camera.zoom = 1
      const p1 = tld.screenToWorld(center, data)
      camera.point = vec.add(camera.point, vec.sub(p1, p0))

      tld.setZoomCSS(camera.zoom)
    },
    zoomCameraToSelectionActual(data) {
      const camera = tld.getCurrentCamera(data)
      const bounds = tld.getSelectedBounds(data)

      const mx = (window.innerWidth - bounds.width) / 2
      const my = (window.innerHeight - bounds.height) / 2

      camera.zoom = 1
      camera.point = vec.add([-bounds.minX, -bounds.minY], [mx, my])

      tld.setZoomCSS(camera.zoom)
    },
    zoomCameraToSelection(data) {
      const camera = tld.getCurrentCamera(data)
      const bounds = tld.getSelectedBounds(data)

      const zoom = tld.getCameraZoom(
        bounds.width > bounds.height
          ? (window.innerWidth - 128) / bounds.width
          : (window.innerHeight - 128) / bounds.height
      )

      const mx = (window.innerWidth - bounds.width * zoom) / 2 / zoom
      const my = (window.innerHeight - bounds.height * zoom) / 2 / zoom

      camera.zoom = zoom
      camera.point = vec.add([-bounds.minX, -bounds.minY], [mx, my])

      tld.setZoomCSS(camera.zoom)
    },
    zoomCameraToFit(data) {
      const camera = tld.getCurrentCamera(data)
      const page = tld.getPage(data)

      const shapes = Object.values(page.shapes)

      if (shapes.length === 0) {
        return
      }

      const bounds = getCommonBounds(
        ...Object.values(shapes).map((shape) =>
          getShapeUtils(shape).getBounds(shape)
        )
      )

      const zoom = tld.getCameraZoom(
        bounds.width > bounds.height
          ? (window.innerWidth - 128) / bounds.width
          : (window.innerHeight - 128) / bounds.height
      )

      const mx = (window.innerWidth - bounds.width * zoom) / 2 / zoom
      const my = (window.innerHeight - bounds.height * zoom) / 2 / zoom

      camera.zoom = zoom
      camera.point = vec.add([-bounds.minX, -bounds.minY], [mx, my])

      tld.setZoomCSS(camera.zoom)
    },
    zoomCamera(data, payload: { delta: number; point: number[] }) {
      const camera = tld.getCurrentCamera(data)
      const next = camera.zoom - (payload.delta / 100) * camera.zoom

      const p0 = tld.screenToWorld(payload.point, data)
      camera.zoom = tld.getCameraZoom(next)
      const p1 = tld.screenToWorld(payload.point, data)
      camera.point = vec.add(camera.point, vec.sub(p1, p0))

      tld.setZoomCSS(camera.zoom)
    },
    panCamera(data, payload: { delta: number[] }) {
      const camera = tld.getCurrentCamera(data)
      camera.point = vec.sub(camera.point, vec.div(payload.delta, camera.zoom))
    },
    updateZoomCSS(data) {
      const camera = tld.getCurrentCamera(data)
      tld.setZoomCSS(camera.zoom)
    },
    pinchCamera(
      data,
      payload: {
        delta: number[]
        distanceDelta: number
        angleDelta: number
        point: number[]
      }
    ) {
      // This is usually replaced with hacks.fastPinchCamera!

      const camera = tld.getCurrentCamera(data)
      camera.point = vec.sub(camera.point, vec.div(payload.delta, camera.zoom))

      const next = camera.zoom - (payload.distanceDelta / 300) * camera.zoom

      const p0 = tld.screenToWorld(payload.point, data)
      camera.zoom = tld.getCameraZoom(next)
      const p1 = tld.screenToWorld(payload.point, data)
      camera.point = vec.add(camera.point, vec.sub(p1, p0))

      tld.setZoomCSS(camera.zoom)
    },
    resetCamera(data) {
      const camera = tld.getCurrentCamera(data)
      camera.zoom = 1
      camera.point = [window.innerWidth / 2, window.innerHeight / 2]
      document.documentElement.style.setProperty('--camera-zoom', '1')
    },

    /* ---------------------- History ---------------------- */

    // History
    popHistory() {
      history.pop()
    },
    enableHistory() {
      history.enable()
    },
    disableHistory() {
      history.disable()
    },
    undo(data) {
      history.undo(data)
    },
    redo(data) {
      history.redo(data)
    },
    resetHistory() {
      history.reset()
    },

    /* --------------------- Styles --------------------- */

    toggleStylePanel(data) {
      data.settings.isStyleOpen = !data.settings.isStyleOpen
    },
    closeStylePanel(data) {
      data.settings.isStyleOpen = false
    },
    updateStyles(data, payload: Partial<ShapeStyles>) {
      Object.assign(data.currentStyle, payload)
    },
    applyStylesToSelection(data, payload: Partial<ShapeStyles>) {
      commands.style(data, payload)
    },

    /* ---------------------- Code ---------------------- */

    closeCodePanel(data) {
      data.settings.isCodeOpen = false
    },
    openCodePanel(data) {
      data.settings.isCodeOpen = true
    },
    toggleCodePanel(data) {
      data.settings.isCodeOpen = !data.settings.isCodeOpen
    },
    setGeneratedShapes(
      data,
      payload: { shapes: Shape[]; controls: CodeControl[] }
    ) {
      commands.generate(data, payload.shapes)
    },
    updateGeneratedShapes(data, payload, result: { shapes: Shape[] }) {
      tld.setSelectedIds(data, [])

      history.disable()

      commands.generate(data, result.shapes)

      history.enable()
    },
    setCodeControls(data, payload: { controls: CodeControl[] }) {
      data.codeControls = Object.fromEntries(
        payload.controls.map((control) => [control.id, control])
      )
    },
    increaseCodeFontSize(data) {
      data.settings.fontSize++
    },
    decreaseCodeFontSize(data) {
      data.settings.fontSize--
    },
    updateControls(data, payload: { [key: string]: any }) {
      for (const key in payload) {
        data.codeControls[key].value = payload[key]
      }
    },

    /* -------------------- Settings -------------------- */

    enablePenLock(data) {
      data.settings.isPenLocked = true
    },
    disablePenLock(data) {
      data.settings.isPenLocked = false
    },
    toggleToolLock(data) {
      data.settings.isToolLocked = !data.settings.isToolLocked
    },

    /* ------------------- Clipboard -------------------- */

    copyToSvg(data) {
      clipboard.copySelectionToSvg(data)
    },

    copyToClipboard(data) {
      clipboard.copy(tld.getSelectedShapes(data))
    },

    copyStateToClipboard(data) {
      clipboard.copyStringToClipboard(JSON.stringify(data))
    },

    pasteFromClipboard() {
      clipboard.paste()
    },

    pasteShapesFromClipboard(data, payload: { shapes: Shape[] }) {
      commands.paste(data, payload.shapes)
    },

    /* ---------------------- Data ---------------------- */

    restoreSavedData(data) {
      storage.firstLoad(data)
    },

    saveToFileSystem(data) {
      storage.saveToFileSystem(data)
    },

    saveAsToFileSystem(data) {
      storage.saveAsToFileSystem(data)
    },

    loadFromFileSystem() {
      storage.loadDocumentFromFilesystem()
    },

    loadDocumentFromJson(data, payload: { json: any }) {
      storage.loadDocumentFromJson(data, payload.json)
    },

    saveAppState(data) {
      storage.saveAppStateToLocalStorage(data)
    },

    forceSave(data) {
      storage.saveToFileSystem(data)
    },

    savePage(data) {
      storage.savePage(data)
    },

    loadPage(data) {
      storage.loadPage(data)
    },

    saveCode(data, payload: { code: string }) {
      data.document.code[data.currentCodeFileId].code = payload.code
      storage.saveDocumentToLocalStorage(data)
      storage.saveAppStateToLocalStorage(data)
    },

    clearBoundsRotation(data) {
      data.boundsRotation = 0
    },
  },
  asyncs: {
    async getUpdatedShapes(data) {
      return updateFromCode(
        data,
        data.document.code[data.currentCodeFileId].code
      )
    },
  },
  values: {
    selectedIds(data) {
      return setToArray(tld.getSelectedIds(data))
    },
    selectedBounds(data) {
      return getSelectionBounds(data)
    },
    currentShapes(data) {
      const page = tld.getPage(data)

      return Object.values(page.shapes)
        .filter((shape) => shape.parentId === page.id)
        .sort((a, b) => a.childIndex - b.childIndex)
    },
    selectedStyle(data) {
      const selectedIds = setToArray(tld.getSelectedIds(data))
      const { currentStyle } = data

      if (selectedIds.length === 0) {
        return currentStyle
      }
      const page = tld.getPage(data)

      const shapeStyles = selectedIds.map((id) => page.shapes[id].style)

      const commonStyle: ShapeStyles = {} as ShapeStyles

      const overrides = new Set<string>([])

      for (const shapeStyle of shapeStyles) {
        for (const key in currentStyle) {
          if (overrides.has(key)) continue
          if (commonStyle[key] === undefined) {
            commonStyle[key] = shapeStyle[key]
          } else {
            if (commonStyle[key] === shapeStyle[key]) continue
            commonStyle[key] = currentStyle[key]
            overrides.add(key)
          }
        }
      }

      return commonStyle
    },
  },
})

export default state

export const useSelector = createSelectorHook(state)

function getParentId(data: Data, id: string) {
  const shape = tld.getPage(data).shapes[id]
  return shape.parentId
}

function getPointedId(data: Data, id: string) {
  const shape = tld.getPage(data).shapes[id]
  if (!shape) return id

  return shape.parentId === data.currentParentId ||
    shape.parentId === data.currentPageId
    ? id
    : getPointedId(data, shape.parentId)
}

function getDrilledPointedId(data: Data, id: string) {
  const shape = tld.getPage(data).shapes[id]
  return shape.parentId === data.currentPageId ||
    shape.parentId === data.pointedId ||
    shape.parentId === data.currentParentId
    ? id
    : getDrilledPointedId(data, shape.parentId)
}

// function hasPointedIdInChildren(data: Data, id: string, pointedId: string) {
//   const shape = getPage(data).shapes[id]

//   if (shape.type !== ShapeType.Group) {
//     return false
//   }

//   if (shape.children.includes(pointedId)) {
//     return true
//   }

//   return shape.children.some((childId) =>
//     hasPointedIdInChildren(data, childId, pointedId)
//   )
// }

function getSelectionBounds(data: Data) {
  const selectedIds = tld.getSelectedIds(data)

  const page = tld.getPage(data)

  const shapes = tld.getSelectedShapes(data)

  if (selectedIds.size === 0) return null

  if (selectedIds.size === 1) {
    if (!shapes[0]) {
      console.warn('Could not find that shape! Clearing selected IDs.')
      tld.setSelectedIds(data, [])
      return null
    }

    const shape = shapes[0]
    const shapeUtils = getShapeUtils(shape)

    if (!shapeUtils.canTransform) return null

    let bounds = shapeUtils.getBounds(shape)

    let parentId = shape.parentId

    while (parentId !== data.currentPageId) {
      const parent = page.shapes[parentId]

      bounds = rotateBounds(
        bounds,
        getBoundsCenter(getShapeUtils(parent).getBounds(parent)),
        parent.rotation
      )

      bounds.rotation = parent.rotation

      parentId = parent.parentId
    }

    return bounds
  }

  const uniqueSelectedShapeIds: string[] = Array.from(
    new Set(
      Array.from(selectedIds.values()).flatMap((id) =>
        tld.getDocumentBranch(data, id)
      )
    ).values()
  )

  const commonBounds = getCommonBounds(
    ...uniqueSelectedShapeIds
      .map((id) => page.shapes[id])
      .filter((shape) => shape.type !== ShapeType.Group)
      .map((shape) => getShapeUtils(shape).getRotatedBounds(shape))
  )

  return commonBounds
}

// state.enableLog(true)
// state.onUpdate((s) => console.log(s.log.filter((l) => l !== 'MOVED_POINTER')))