/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { Vec } from '@tldraw/vec'
import {
  TLBoundsEventHandler,
  TLBoundsHandleEventHandler,
  TLKeyboardEventHandler,
  TLShapeCloneHandler,
  TLCanvasEventHandler,
  TLPageState,
  TLPinchEventHandler,
  TLPointerEventHandler,
  TLWheelEventHandler,
  Utils,
  TLBounds,
  TLDropEventHandler,
} from '@tldraw/core'
import {
  FlipType,
  TDDocument,
  MoveType,
  AlignType,
  StretchType,
  DistributeType,
  ShapeStyles,
  TDShape,
  TDShapeType,
  TDSnapshot,
  TDStatus,
  TDPage,
  TDBinding,
  GroupShape,
  TldrawCommand,
  TDUser,
  SessionType,
  TDToolType,
  TDAssetType,
  TDAsset,
  TDAssets,
  TDExport,
  ArrowShape,
  TDExportType,
} from '~types'
import {
  migrate,
  FileSystemHandle,
  loadFileHandle,
  openFromFileSystem,
  saveToFileSystem,
  openAssetFromFileSystem,
  fileToBase64,
  fileToText,
  getImageSizeFromSrc,
  getVideoSizeFromSrc,
} from './data'
import { TLDR } from './TLDR'
import { shapeUtils } from '~state/shapes'
import { defaultStyle } from '~state/shapes/shared/shape-styles'
import * as Commands from './commands'
import { SessionArgsOfType, getSession, TldrawSession } from './sessions'
import {
  USER_COLORS,
  FIT_TO_SCREEN_PADDING,
  GRID_SIZE,
  IMAGE_EXTENSIONS,
  VIDEO_EXTENSIONS,
  SVG_EXPORT_PADDING,
} from '~constants'
import type { BaseTool } from './tools/BaseTool'
import { SelectTool } from './tools/SelectTool'
import { EraseTool } from './tools/EraseTool'
import { TextTool } from './tools/TextTool'
import { DrawTool } from './tools/DrawTool'
import { EllipseTool } from './tools/EllipseTool'
import { RectangleTool } from './tools/RectangleTool'
import { TriangleTool } from './tools/TriangleTool'
import { LineTool } from './tools/LineTool'
import { ArrowTool } from './tools/ArrowTool'
import { StickyTool } from './tools/StickyTool'
import { StateManager } from './StateManager'
import { clearPrevSize } from './shapes/shared/getTextSize'
import { getClipboard, setClipboard } from './IdbClipboard'

const uuid = Utils.uniqueId()

export interface TDCallbacks {
  /**
   * (optional) A callback to run when the component mounts.
   */
  onMount?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the component's state changes.
   */
  onChange?: (app: TldrawApp, reason?: string) => void
  /**
   * (optional) A callback to run when the user creates a new project through the menu or through a keyboard shortcut.
   */
  onNewProject?: (app: TldrawApp, e?: KeyboardEvent) => void
  /**
   * (optional) A callback to run when the user saves a project through the menu or through a keyboard shortcut.
   */
  onSaveProject?: (app: TldrawApp, e?: KeyboardEvent) => void
  /**
   * (optional) A callback to run when the user saves a project as a new project through the menu or through a keyboard shortcut.
   */
  onSaveProjectAs?: (app: TldrawApp, e?: KeyboardEvent) => void
  /**
   * (optional) A callback to run when the user opens new project through the menu or through a keyboard shortcut.
   */
  onOpenProject?: (app: TldrawApp, e?: KeyboardEvent) => void
  /**
   * (optional) A callback to run when the opens a file to upload.
   */
  onOpenMedia?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the user signs in via the menu.
   */
  onSignIn?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the user signs out via the menu.
   */
  onSignOut?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the state is patched.
   */
  onPatch?: (app: TldrawApp, reason?: string) => void
  /**
   * (optional) A callback to run when the state is changed with a command.
   */
  onCommand?: (app: TldrawApp, reason?: string) => void
  /**
   * (optional) A callback to run when the state is persisted.
   */
  onPersist?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the user undos.
   */
  onUndo?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the user redos.
   */
  onRedo?: (app: TldrawApp) => void
  /**
   * (optional) A callback to run when the user changes the current page's shapes.
   */
  onChangePage?: (
    app: TldrawApp,
    shapes: Record<string, TDShape | undefined>,
    bindings: Record<string, TDBinding | undefined>,
    assets: Record<string, TDAsset | undefined>
  ) => void
  /**
   * (optional) A callback to run when the user creates a new project.
   */
  onChangePresence?: (app: TldrawApp, user: TDUser) => void
  /**
   * (optional) A callback to run when an asset will be deleted.
   */
  onAssetDelete?: (app: TldrawApp, assetId: string) => void
  /**
   * (optional) A callback to run when an asset will be created. Should return the value for the image/video's `src` property.
   */
  onAssetCreate?: (app: TldrawApp, file: File, id: string) => Promise<string | false>
  /**
   * (optional) A callback to run when an asset will be uploaded. Should return the value for the image/video's `src` property.
   */
  onAssetUpload?: (app: TldrawApp, file: File, id: string) => Promise<string | false>
  /**
   * (optional) A callback to run when the user exports their page or selection.
   */
  onExport?: (app: TldrawApp, info: TDExport) => Promise<void>
}

export class TldrawApp extends StateManager<TDSnapshot> {
  callbacks: TDCallbacks = {}

  tools = {
    select: new SelectTool(this),
    erase: new EraseTool(this),
    [TDShapeType.Text]: new TextTool(this),
    [TDShapeType.Draw]: new DrawTool(this),
    [TDShapeType.Ellipse]: new EllipseTool(this),
    [TDShapeType.Rectangle]: new RectangleTool(this),
    [TDShapeType.Triangle]: new TriangleTool(this),
    [TDShapeType.Line]: new LineTool(this),
    [TDShapeType.Arrow]: new ArrowTool(this),
    [TDShapeType.Sticky]: new StickyTool(this),
  }

  currentTool: BaseTool = this.tools.select

  session?: TldrawSession

  readOnly = false

  isDirty = false

  isCreating = false

  originPoint = [0, 0]

  currentPoint = [0, 0]

  previousPoint = [0, 0]

  shiftKey = false

  altKey = false

  metaKey = false

  ctrlKey = false

  spaceKey = false

  isPointing = false

  isForcePanning = false

  editingStartTime = -1

  fileSystemHandle: FileSystemHandle | null = null

  viewport = Utils.getBoundsFromPoints([
    [0, 0],
    [100, 100],
  ])

  rendererBounds = Utils.getBoundsFromPoints([
    [0, 0],
    [100, 100],
  ])

  selectHistory = {
    stack: [[]] as string[][],
    pointer: 0,
  }

  clipboard?: {
    shapes: TDShape[]
    bindings: TDBinding[]
    assets: TDAsset[]
  }

  rotationInfo = {
    selectedIds: [] as string[],
    center: [0, 0],
  }

  pasteInfo = {
    center: [0, 0],
    offset: [0, 0],
  }

  constructor(id?: string, callbacks = {} as TDCallbacks) {
    super(TldrawApp.defaultState, id, TldrawApp.version, (prev, next, prevVersion) => {
      return {
        ...next,
        document: migrate(
          { ...next.document, ...prev.document, version: prevVersion },
          TldrawApp.version
        ),
      }
    })

    this.callbacks = callbacks
  }

  /* -------------------- Internal -------------------- */

  protected migrate = (state: TDSnapshot): TDSnapshot => {
    return {
      ...state,
      document: migrate(state.document, TldrawApp.version),
    }
  }

  protected onReady = () => {
    this.loadDocument(this.document)

    loadFileHandle().then((fileHandle) => {
      this.fileSystemHandle = fileHandle
    })

    try {
      this.patchState({
        appState: {
          status: TDStatus.Idle,
        },
        document: migrate(this.document, TldrawApp.version),
      })
    } catch (e) {
      console.error('The data appears to be corrupted. Resetting!', e)
      localStorage.setItem(this.document.id + '_corrupted', JSON.stringify(this.document))

      this.patchState({
        ...TldrawApp.defaultState,
        appState: {
          ...TldrawApp.defaultState.appState,
          status: TDStatus.Idle,
        },
      })
    }

    this.callbacks.onMount?.(this)
  }

  /**
   * Cleanup the state after each state change.
   * @param state The new state
   * @param prev The previous state
   * @protected
   * @returns The final state
   */
  protected cleanup = (state: TDSnapshot, prev: TDSnapshot): TDSnapshot => {
    const next: TDSnapshot = { ...state }

    // Remove deleted shapes and bindings (in Commands, these will be set to undefined)
    if (next.document !== prev.document) {
      Object.entries(next.document.pages).forEach(([pageId, page]) => {
        if (page === undefined) {
          // If page is undefined, delete the page and pagestate
          delete next.document.pages[pageId]
          delete next.document.pageStates[pageId]
          return
        }

        const prevPage = prev.document.pages[pageId]

        const changedShapes: Record<string, TDShape | undefined> = {}

        if (!prevPage || page.shapes !== prevPage.shapes || page.bindings !== prevPage.bindings) {
          page.shapes = { ...page.shapes }
          page.bindings = { ...page.bindings }

          const groupsToUpdate = new Set<GroupShape>()

          // If shape is undefined, delete the shape
          Object.entries(page.shapes).forEach(([id, shape]) => {
            let parentId: string

            if (!shape) {
              parentId = prevPage?.shapes[id]?.parentId
              delete page.shapes[id]
            } else {
              parentId = shape.parentId
            }

            if (page.id === next.appState.currentPageId) {
              if (prevPage?.shapes[id] !== shape) {
                changedShapes[id] = shape
              }
            }

            // If the shape is the child of a group, then update the group
            // (unless the group is being deleted too)
            if (parentId && parentId !== pageId) {
              const group = page.shapes[parentId]
              if (group !== undefined) {
                groupsToUpdate.add(page.shapes[parentId] as GroupShape)
              }
            }
          })

          // If binding is undefined, delete the binding
          Object.keys(page.bindings).forEach((id) => {
            if (!page.bindings[id]) {
              delete page.bindings[id]
            }
          })

          next.document.pages[pageId] = page

          // Get bindings related to the changed shapes
          const bindingsToUpdate = TLDR.getRelatedBindings(next, Object.keys(changedShapes), pageId)

          const visitedShapes = new Set<ArrowShape>()

          // Update all of the bindings we've just collected
          bindingsToUpdate.forEach((binding) => {
            if (!page.bindings[binding.id]) {
              return
            }

            const toShape = page.shapes[binding.toId]
            const fromShape = page.shapes[binding.fromId] as ArrowShape

            if (!(toShape && fromShape)) {
              delete next.document.pages[pageId].bindings[binding.id]
              return
            }

            if (visitedShapes.has(fromShape)) {
              return
            }

            // We only need to update the binding's "from" shape (an arrow)
            const fromDelta = TLDR.updateArrowBindings(page, fromShape)
            visitedShapes.add(fromShape)

            if (fromDelta) {
              const nextShape = {
                ...fromShape,
                ...fromDelta,
              } as ArrowShape
              page.shapes[fromShape.id] = nextShape
            }
          })

          groupsToUpdate.forEach((group) => {
            if (!group) throw Error('no group!')
            const children = group.children.filter((id) => page.shapes[id] !== undefined)

            const commonBounds = Utils.getCommonBounds(
              children
                .map((id) => page.shapes[id])
                .filter(Boolean)
                .map((shape) => TLDR.getRotatedBounds(shape))
            )

            page.shapes[group.id] = {
              ...group,
              point: [commonBounds.minX, commonBounds.minY],
              size: [commonBounds.width, commonBounds.height],
              children,
            }
          })
        }

        // Clean up page state, preventing hovers on deleted shapes

        const nextPageState: TLPageState = {
          ...next.document.pageStates[pageId],
        }

        if (!nextPageState.brush) {
          delete nextPageState.brush
        }

        if (nextPageState.hoveredId && !page.shapes[nextPageState.hoveredId]) {
          delete nextPageState.hoveredId
        }

        if (nextPageState.bindingId && !page.bindings[nextPageState.bindingId]) {
          TLDR.warn(`Could not find the binding of ${pageId}`)
          delete nextPageState.bindingId
        }

        if (nextPageState.editingId && !page.shapes[nextPageState.editingId]) {
          TLDR.warn('Could not find the editing shape!')
          delete nextPageState.editingId
        }

        next.document.pageStates[pageId] = nextPageState
      })
    }

    Object.keys(next.document.assets ?? {}).forEach((id) => {
      if (!next.document.assets?.[id]) {
        delete next.document.assets?.[id]
      }
    })

    const currentPageId = next.appState.currentPageId

    const currentPageState = next.document.pageStates[currentPageId]

    if (next.room && next.room !== prev.room) {
      const room = { ...next.room, users: { ...next.room.users } }

      // Remove any exited users
      if (prev.room) {
        Object.values(prev.room.users)
          .filter(Boolean)
          .forEach((user) => {
            if (room.users[user.id] === undefined) {
              delete room.users[user.id]
            }
          })
      }

      next.room = room
    }

    if (next.room) {
      next.room.users[next.room.userId] = {
        ...next.room.users[next.room.userId],
        point: this.currentPoint,
        selectedIds: currentPageState.selectedIds,
      }
    }

    // Temporary block on editing pages while in readonly mode.
    // This is a broad solution but not a very good one: the UX
    // for interacting with a readOnly document will be more nuanced.
    if (this.readOnly) {
      next.document.pages = prev.document.pages
    }

    return next
  }

  onPatch = (app: TDSnapshot, id?: string) => {
    this.callbacks.onPatch?.(this, id)
  }

  onCommand = (app: TDSnapshot, id?: string) => {
    this.clearSelectHistory()
    this.isDirty = true
    this.callbacks.onCommand?.(this, id)
  }

  onReplace = () => {
    this.clearSelectHistory()
    this.isDirty = false
  }

  onUndo = () => {
    this.rotationInfo.selectedIds = [...this.selectedIds]
    this.callbacks.onUndo?.(this)
  }

  onRedo = () => {
    this.rotationInfo.selectedIds = [...this.selectedIds]
    this.callbacks.onRedo?.(this)
  }

  onPersist = () => {
    // If we are part of a room, send our changes to the server
    if (this.callbacks.onChangePage) {
      this.broadcastPageChanges()
    }
    this.callbacks.onPersist?.(this)
  }

  private prevSelectedIds = this.selectedIds

  /**
   * Clear the selection history after each new command, undo or redo.
   * @param state
   * @param id
   */
  protected onStateDidChange = (_app: TDSnapshot, id?: string): void => {
    this.callbacks.onChange?.(this, id)

    if (this.room && this.selectedIds !== this.prevSelectedIds) {
      this.callbacks.onChangePresence?.(this, {
        ...this.room.users[this.room.userId],
        selectedIds: this.selectedIds,
      })
      this.prevSelectedIds = this.selectedIds
    }
  }

  /* ----------- Managing Multiplayer State ----------- */

  private justSent = false
  private prevShapes = this.page.shapes
  private prevBindings = this.page.bindings
  private prevAssets = this.document.assets

  private broadcastPageChanges = () => {
    const visited = new Set<string>()

    const changedShapes: Record<string, TDShape | undefined> = {}
    const changedBindings: Record<string, TDBinding | undefined> = {}
    const changedAssets: Record<string, TDAsset | undefined> = {}

    this.shapes.forEach((shape) => {
      visited.add(shape.id)
      if (this.prevShapes[shape.id] !== shape) {
        changedShapes[shape.id] = shape
      }
    })

    Object.keys(this.prevShapes)
      .filter((id) => !visited.has(id))
      .forEach((id) => {
        // After visiting all the current shapes, if we haven't visited a
        // previously present shape, then it was deleted
        changedShapes[id] = undefined
      })

    this.bindings.forEach((binding) => {
      visited.add(binding.id)
      if (this.prevBindings[binding.id] !== binding) {
        changedBindings[binding.id] = binding
      }
    })

    Object.keys(this.prevBindings)
      .filter((id) => !visited.has(id))
      .forEach((id) => {
        // After visiting all the current bindings, if we haven't visited a
        // previously present shape, then it was deleted
        changedBindings[id] = undefined
      })

    this.assets.forEach((asset) => {
      visited.add(asset.id)
      if (this.prevAssets[asset.id] !== asset) {
        changedAssets[asset.id] = asset
      }
    })

    Object.keys(this.prevAssets)
      .filter((id) => !visited.has(id))
      .forEach((id) => {
        changedAssets[id] = undefined
      })

    // Only trigger update if shapes or bindings have changed
    if (
      Object.keys(changedBindings).length > 0 ||
      Object.keys(changedShapes).length > 0 ||
      Object.keys(changedAssets).length > 0
    ) {
      this.justSent = true
      this.callbacks.onChangePage?.(this, changedShapes, changedBindings, changedAssets)
      this.prevShapes = this.page.shapes
      this.prevBindings = this.page.bindings
      this.prevAssets = this.document.assets
    }
  }

  getReservedContent = (coreReservedIds: string[], pageId = this.currentPageId) => {
    const { bindings } = this.document.pages[pageId]

    // We want to know which shapes we need to
    const reservedShapes: Record<string, TDShape> = {}
    const reservedBindings: Record<string, TDBinding> = {}

    // Quick lookup maps for bindings
    const bindingsArr = Object.values(bindings)
    const boundTos = new Map(bindingsArr.map((binding) => [binding.toId, binding]))
    const boundFroms = new Map(bindingsArr.map((binding) => [binding.fromId, binding]))
    const bindingMaps = [boundTos, boundFroms]

    // Unique set of shape ids that are going to be reserved
    const reservedShapeIds: string[] = []

    if (this.session) coreReservedIds.forEach((id) => reservedShapeIds.push(id))
    if (this.pageState.editingId) reservedShapeIds.push(this.pageState.editingId)

    const strongReservedShapeIds = new Set(reservedShapeIds)

    // Which shape ids have we already visited?
    const visited = new Set<string>()

    // Time to visit every reserved shape and every related shape and binding.
    while (reservedShapeIds.length > 0) {
      const id = reservedShapeIds.pop()
      if (!id) break
      if (visited.has(id)) continue

      // Add to set so that we don't process this id a second time
      visited.add(id)

      // Get the shape and reserve it
      const shape = this.getShape(id)
      reservedShapes[id] = shape

      if (shape.parentId !== pageId) reservedShapeIds.push(shape.parentId)

      // If the shape has children, add the shape's children to the list of ids to process
      if (shape.children) reservedShapeIds.push(...shape.children)

      // If there are binding for this shape, reserve the bindings and
      // add its related shapes to the list of ids to process
      bindingMaps
        .map((map) => map.get(shape.id)!)
        .filter(Boolean)
        .forEach((binding) => {
          reservedBindings[binding.id] = binding
          reservedShapeIds.push(binding.toId, binding.fromId)
        })
    }

    return { reservedShapes, reservedBindings, strongReservedShapeIds }
  }

  /**
   * Manually patch in page content.
   */
  public replacePageContent = (
    shapes: Record<string, TDShape>,
    bindings: Record<string, TDBinding>,
    assets: Record<string, TDAsset>,
    pageId = this.currentPageId
  ): this => {
    if (this.justSent) {
      // The incoming update was caused by an update that the client sent, noop.
      this.justSent = false
      return this
    }

    const page = this.document.pages[this.currentPageId]

    Object.values(shapes).forEach((shape) => {
      if (shape.parentId !== pageId && !(page.shapes[shape.parentId] || shapes[shape.parentId])) {
        console.warn('Added a shape without a parent on the page')
        shape.parentId = pageId
      }
    })

    this.useStore.setState((current) => {
      const { hoveredId, editingId, bindingId, selectedIds } = current.document.pageStates[pageId]

      const coreReservedIds = [...selectedIds]

      const editingShape = editingId && current.document.pages[this.currentPageId].shapes[editingId]
      if (editingShape) coreReservedIds.push(editingShape.id)

      const { reservedShapes, reservedBindings, strongReservedShapeIds } = this.getReservedContent(
        coreReservedIds,
        this.currentPageId
      )

      // Merge in certain changes to reserved shapes
      Object.values(reservedShapes)
        // Don't merge updates to shapes with text (Text or Sticky)
        .filter((reservedShape) => !('text' in reservedShape))
        .forEach((reservedShape) => {
          const incomingShape = shapes[reservedShape.id]
          if (!incomingShape) return

          // If the shape isn't "strongly reserved", then use the incoming shape;
          // note that this is only if the incoming shape exists! If the shape was
          // deleted in the incoming shapes, then we'll keep out reserved shape.
          // This logic would need more work for arrows, because the incoming shape
          // include a binding change that we'll need to resolve with our reserved bindings.
          if (
            !(
              reservedShape.type === TDShapeType.Arrow ||
              strongReservedShapeIds.has(reservedShape.id)
            )
          ) {
            shapes[reservedShape.id] = incomingShape
            return
          }

          // Only allow certain merges.

          // Allow decorations (of an arrow) to be changed
          if ('decorations' in incomingShape && 'decorations' in reservedShape) {
            shapes[reservedShape.id] = { ...reservedShape, decorations: incomingShape.decorations }
          }

          // Allow the shape's style to be changed
          reservedShape.style = incomingShape.style
        })

      // Use the incoming shapes / bindings as comparisons for what
      // will have changed. This is important because we want to restore
      // related shapes that may not have changed on our side, but which
      // were deleted on the server.
      this.prevShapes = shapes
      this.prevBindings = bindings
      this.prevAssets = assets

      const nextShapes = {
        ...shapes,
        ...reservedShapes,
      }

      if (editingShape) {
        nextShapes[editingShape.id] = editingShape
      }

      const nextBindings = {
        ...bindings,
        ...reservedBindings,
      }
      const nextAssets = {
        ...assets,
      }

      const next: TDSnapshot = {
        ...current,
        document: {
          ...current.document,
          pages: {
            [pageId]: {
              ...current.document.pages[pageId],
              shapes: nextShapes,
              bindings: nextBindings,
            },
          },
          assets: nextAssets,
          pageStates: {
            ...current.document.pageStates,
            [pageId]: {
              ...current.document.pageStates[pageId],
              selectedIds: selectedIds.filter((id) => nextShapes[id] !== undefined),
              hoveredId: hoveredId
                ? nextShapes[hoveredId] === undefined
                  ? undefined
                  : hoveredId
                : undefined,
              editingId: editingId,
              bindingId: bindingId
                ? nextBindings[bindingId] === undefined
                  ? undefined
                  : bindingId
                : undefined,
            },
          },
        },
      }
      const page = next.document.pages[pageId]

      // Get bindings related to the changed shapes
      const bindingsToUpdate = TLDR.getRelatedBindings(next, Object.keys(nextShapes), pageId)

      const visitedShapes = new Set<ArrowShape>()

      // Update all of the bindings we've just collected
      bindingsToUpdate.forEach((binding) => {
        if (!page.bindings[binding.id]) {
          return
        }

        const fromShape = page.shapes[binding.fromId] as ArrowShape

        if (visitedShapes.has(fromShape)) {
          return
        }

        // We only need to update the binding's "from" shape (an arrow)
        const fromDelta = TLDR.updateArrowBindings(page, fromShape)
        visitedShapes.add(fromShape)

        if (fromDelta) {
          const nextShape = {
            ...fromShape,
            ...fromDelta,
          } as TDShape

          page.shapes[fromShape.id] = nextShape
        }
      })

      Object.values(nextShapes).forEach((shape) => {
        if (shape.type !== TDShapeType.Group) return

        const children = shape.children.filter((id) => page.shapes[id] !== undefined)

        const commonBounds = Utils.getCommonBounds(
          children
            .map((id) => page.shapes[id])
            .filter(Boolean)
            .map((shape) => TLDR.getRotatedBounds(shape))
        )

        page.shapes[shape.id] = {
          ...shape,
          point: [commonBounds.minX, commonBounds.minY],
          size: [commonBounds.width, commonBounds.height],
          children,
        }
      })

      this.state.document = next.document
      // this.prevShapes = nextShapes
      // this.prevBindings = nextBindings

      return next
    }, true)

    return this
  }

  /**
   * Set the current status.
   * @param status The new status to set.
   * @private
   * @returns
   */
  setStatus(status: string) {
    return this.patchState(
      {
        appState: { status },
      },
      `set_status:${status}`
    )
  }

  /**
   * Update the bounding box when the renderer's bounds change.
   * @param bounds
   */
  updateBounds = (bounds: TLBounds) => {
    this.rendererBounds = bounds
    const { point, zoom } = this.camera
    this.updateViewport(point, zoom)

    if (!this.readOnly && this.session) {
      this.session.update()
    }
  }

  updateViewport = (point: number[], zoom: number) => {
    const { width, height } = this.rendererBounds
    const [minX, minY] = Vec.sub(Vec.div([0, 0], zoom), point)
    const [maxX, maxY] = Vec.sub(Vec.div([width, height], zoom), point)

    this.viewport = {
      minX,
      minY,
      maxX,
      maxY,
      height: maxX - minX,
      width: maxY - minY,
    }
  }

  /**
   * Set or clear the editing id
   * @param id [string]
   */
  setEditingId = (id?: string) => {
    if (this.readOnly) return

    this.editingStartTime = performance.now()
    this.patchState(
      {
        document: {
          pageStates: {
            [this.currentPageId]: {
              editingId: id,
            },
          },
        },
      },
      `set_editing_id`
    )
  }

  /**
   * Set or clear the hovered id
   * @param id [string]
   */
  setHoveredId = (id?: string) => {
    this.patchState(
      {
        document: {
          pageStates: {
            [this.currentPageId]: {
              hoveredId: id,
            },
          },
        },
      },
      `set_hovered_id`
    )
  }

  /* -------------------------------------------------- */
  /*                    Settings & UI                   */
  /* -------------------------------------------------- */

  /**
   * Set a setting.
   */
  setSetting = <T extends keyof TDSnapshot['settings'], V extends TDSnapshot['settings'][T]>(
    name: T,
    value: V | ((value: V) => V)
  ): this => {
    if (this.session) return this

    this.patchState(
      {
        settings: {
          [name]: typeof value === 'function' ? value(this.settings[name] as V) : value,
        },
      },
      `settings:${name}`
    )
    this.persist()
    return this
  }

  /**
   * Toggle pen mode.
   */
  toggleFocusMode = (): this => {
    if (this.session) return this
    this.patchState(
      {
        settings: {
          isFocusMode: !this.settings.isFocusMode,
        },
      },
      `settings:toggled_focus_mode`
    )
    this.persist()
    return this
  }

  /**
   * Toggle pen mode.
   */
  togglePenMode = (): this => {
    if (this.session) return this
    this.patchState(
      {
        settings: {
          isPenMode: !this.settings.isPenMode,
        },
      },
      `settings:toggled_pen_mode`
    )
    this.persist()
    return this
  }

  /**
   * Toggle dark mode.
   */
  toggleDarkMode = (): this => {
    if (this.session) return this
    this.patchState(
      { settings: { isDarkMode: !this.settings.isDarkMode } },
      `settings:toggled_dark_mode`
    )
    this.persist()
    return this
  }

  /**
   * Toggle zoom snap.
   */
  toggleZoomSnap = () => {
    if (this.session) return this
    this.patchState(
      { settings: { isZoomSnap: !this.settings.isZoomSnap } },
      `settings:toggled_zoom_snap`
    )
    this.persist()
    return this
  }

  /**
   * Toggle debug mode.
   */
  toggleDebugMode = () => {
    if (this.session) return this
    this.patchState(
      { settings: { isDebugMode: !this.settings.isDebugMode } },
      `settings:toggled_debug`
    )
    this.persist()
    return this
  }

  /**
   * Toggles the state if menu is opened
   */
  setMenuOpen = (isOpen: boolean): this => {
    this.patchState({ appState: { isMenuOpen: isOpen } }, 'ui:toggled_menu_opened')
    this.persist()
    return this
  }

  /**
   * Toggles the state if something is loading
   */
  setIsLoading = (isLoading: boolean): this => {
    this.patchState({ appState: { isLoading } }, 'ui:toggled_is_loading')
    this.persist()
    return this
  }

  setDisableAssets = (disableAssets: boolean): this => {
    this.patchState({ appState: { disableAssets } }, 'ui:toggled_disable_images')
    return this
  }

  get isMenuOpen(): boolean {
    return this.appState.isMenuOpen
  }

  get isLoading(): boolean {
    return this.appState.isLoading
  }

  get disableAssets(): boolean {
    return this.appState.disableAssets
  }

  /**
   * Toggle grids.
   */
  toggleGrid = (): this => {
    if (this.session) return this
    this.patchState({ settings: { showGrid: !this.settings.showGrid } }, 'settings:toggled_grid')
    this.persist()
    return this
  }

  /**
   * Select a tool.
   * @param tool The tool to select, or "select".
   */
  selectTool = (type: TDToolType): this => {
    if (this.readOnly || this.session) return this

    this.isPointing = false // reset pointer state, in case something weird happened

    const tool = this.tools[type]

    if (tool === this.currentTool) {
      this.patchState({
        appState: {
          isToolLocked: false,
        },
      })
      return this
    }

    this.currentTool.onExit()
    tool.previous = this.currentTool.type
    this.currentTool = tool
    this.currentTool.onEnter()

    return this.patchState(
      {
        appState: {
          activeTool: type,
          isToolLocked: false,
        },
      },
      `selected_tool:${type}`
    )
  }

  /**
   * Toggle the tool lock option.
   */
  toggleToolLock = (): this => {
    if (this.session) return this
    return this.patchState(
      {
        appState: {
          isToolLocked: !this.appState.isToolLocked,
        },
      },
      `toggled_tool_lock`
    )
  }

  /* -------------------------------------------------- */
  /*                      Document                      */
  /* -------------------------------------------------- */

  /**
   * Reset the document to a blank state.
   */
  resetDocument = (): this => {
    if (this.session) return this
    this.session = undefined
    this.pasteInfo.offset = [0, 0]
    this.currentTool = this.tools.select

    this.resetHistory()
      .clearSelectHistory()
      .loadDocument(migrate(TldrawApp.defaultDocument, TldrawApp.version))
      .persist()

    return this
  }

  /**
   *
   * @param document
   */
  updateUsers = (users: TDUser[], isOwnUpdate = false) => {
    this.patchState(
      {
        room: {
          users: Object.fromEntries(users.map((user) => [user.id, user])),
        },
      },
      isOwnUpdate ? 'room:self:update' : 'room:user:update'
    )
  }

  removeUser = (userId: string) => {
    this.patchState({
      room: {
        users: {
          [userId]: undefined,
        },
      },
    })
  }

  /**
   * Merge a new document patch into the current document.
   * @param document
   */
  mergeDocument = (document: TDDocument): this => {
    // If it's a new document, do a full change.
    if (this.document.id !== document.id) {
      this.replaceState({
        ...this.state,
        appState: {
          ...this.appState,
          currentPageId: Object.keys(document.pages)[0],
        },
        document: migrate(document, TldrawApp.version),
      })
      return this
    }

    // Have we deleted any pages? If so, drop everything and change
    // to the first page. This is an edge case.
    const currentPageStates = { ...this.document.pageStates }

    // Update the app state's current page id if needed
    const nextAppState = {
      ...this.appState,
      currentPageId: document.pages[this.currentPageId]
        ? this.currentPageId
        : Object.keys(document.pages)[0],
      pages: Object.values(document.pages).map((page, i) => ({
        id: page.id,
        name: page.name,
        childIndex: page.childIndex || i,
      })),
    }

    // Reset the history (for now)
    this.resetHistory()

    Object.keys(this.document.pages).forEach((pageId) => {
      if (!document.pages[pageId]) {
        if (pageId === this.appState.currentPageId) {
          this.cancelSession()
          this.selectNone()
        }

        currentPageStates[pageId] = undefined as unknown as TLPageState
      }
    })

    // Don't allow the selected ids to be deleted during a session—if
    // they've been removed, put them back in the client's document.
    if (this.session) {
      this.selectedIds
        .filter((id) => !document.pages[this.currentPageId].shapes[id])
        .forEach((id) => (document.pages[this.currentPageId].shapes[id] = this.page.shapes[id]))
    }

    // For other pages, remove any selected ids that were deleted.
    Object.entries(currentPageStates).forEach(([pageId, pageState]) => {
      pageState.selectedIds = pageState.selectedIds.filter(
        (id) => !!document.pages[pageId].shapes[id]
      )
    })

    // If the user is currently creating a shape (ie drawing), then put that
    // shape back onto the page for the client.
    const { editingId } = this.pageState

    if (editingId) {
      document.pages[this.currentPageId].shapes[editingId] = this.page.shapes[editingId]
      currentPageStates[this.currentPageId].selectedIds = [editingId]
    }

    return this.replaceState(
      {
        ...this.state,
        appState: nextAppState,
        document: {
          ...migrate(document, TldrawApp.version),
          pageStates: currentPageStates,
        },
      },
      'merge'
    )
  }

  /**
   * Update the current document.
   * @param document
   */
  updateDocument = (document: TDDocument, reason = 'updated_document'): this => {
    const prevState = this.state

    const nextState = { ...prevState, document: { ...prevState.document } }

    if (!document.pages[this.currentPageId]) {
      nextState.appState = {
        ...prevState.appState,
        currentPageId: Object.keys(document.pages)[0],
      }
    }

    let i = 1

    for (const nextPage of Object.values(document.pages)) {
      if (nextPage !== prevState.document.pages[nextPage.id]) {
        nextState.document.pages[nextPage.id] = nextPage

        if (!nextPage.name) {
          nextState.document.pages[nextPage.id].name = `Page ${i + 1}`
          i++
        }
      }
    }

    for (const nextPageState of Object.values(document.pageStates)) {
      if (nextPageState !== prevState.document.pageStates[nextPageState.id]) {
        nextState.document.pageStates[nextPageState.id] = nextPageState

        const nextPage = document.pages[nextPageState.id]
        const keysToCheck = ['bindingId', 'editingId', 'hoveredId', 'pointedId'] as const

        for (const key of keysToCheck) {
          if (!nextPage.shapes[key]) {
            nextPageState[key] = undefined
          }
        }

        nextPageState.selectedIds = nextPageState.selectedIds.filter(
          (id) => !!document.pages[nextPage.id].shapes[id]
        )
      }
    }

    nextState.document = migrate(nextState.document, nextState.document.version || 0)

    return this.replaceState(nextState, `${reason}:${document.id}`)
  }

  /**
   * Load a fresh room into the state.
   * @param roomId
   */
  loadRoom = (roomId: string): this => {
    this.patchState({
      room: {
        id: roomId,
        userId: uuid,
        users: {
          [uuid]: {
            id: uuid,
            color: USER_COLORS[Math.floor(Math.random() * USER_COLORS.length)],
            point: [100, 100],
            selectedIds: [],
            activeShapes: [],
          },
        },
      },
    })
    return this
  }

  /**
   * Load a new document.
   * @param document The document to load
   */
  loadDocument = (document: TDDocument): this => {
    this.selectNone()
    this.resetHistory()
    this.clearSelectHistory()
    this.session = undefined

    this.replaceState(
      {
        ...TldrawApp.defaultState,
        settings: {
          ...this.state.settings,
        },
        document: migrate(document, TldrawApp.version),
        appState: {
          ...TldrawApp.defaultState.appState,
          ...this.state.appState,
          currentPageId: Object.keys(document.pages)[0],
          disableAssets: this.disableAssets,
        },
      },
      'loaded_document'
    )
    const { point, zoom } = this.camera
    this.updateViewport(point, zoom)
    return this
  }

  // Should we move this to the app layer? onSave, onSaveAs, etc?

  /**
   * Create a new project.
   */
  newProject = () => {
    if (!this.isLocal) return
    this.fileSystemHandle = null
    this.resetDocument()
  }

  /**
   * Save the current project.
   */
  saveProject = async () => {
    if (this.readOnly) return
    try {
      const fileHandle = await saveToFileSystem(
        migrate(this.document, TldrawApp.version),
        this.fileSystemHandle
      )
      this.fileSystemHandle = fileHandle
      this.persist()
      this.isDirty = false
    } catch (e: any) {
      // Likely cancelled
      console.error(e.message)
    }
    return this
  }

  /**
   * Save the current project as a new file.
   */
  saveProjectAs = async () => {
    try {
      const fileHandle = await saveToFileSystem(this.document, null)
      this.fileSystemHandle = fileHandle
      this.persist()
      this.isDirty = false
    } catch (e: any) {
      // Likely cancelled
      console.error(e.message)
    }
    return this
  }

  /**
   * Load a project from the filesystem.
   * @todo
   */
  openProject = async () => {
    if (!this.isLocal) return

    try {
      const result = await openFromFileSystem()
      if (!result) {
        throw Error()
      }

      const { fileHandle, document } = result
      this.loadDocument(document)
      this.fileSystemHandle = fileHandle
      this.zoomToFit()
      this.persist()
    } catch (e) {
      console.error(e)
    } finally {
      this.persist()
    }
  }

  /**
   * Upload media from file
   */
  openAsset = async () => {
    if (!this.disableAssets)
      try {
        const file = await openAssetFromFileSystem()
        if (!file) return
        this.addMediaFromFile(file)
      } catch (e) {
        console.error(e)
      } finally {
        this.persist()
      }
  }

  /**
   * Sign out of the current account.
   * Should move to the www layer.
   * @todo
   */
  signOut = () => {
    // todo
  }
  /* -------------------- Getters --------------------- */

  /**
   * Get the current app state.
   */
  getAppState = (): TDSnapshot['appState'] => {
    return this.appState
  }

  /**
   * Get a page.
   * @param pageId (optional) The page's id.
   */
  getPage = (pageId = this.currentPageId): TDPage => {
    return TLDR.getPage(this.state, pageId || this.currentPageId)
  }

  /**
   * Get the shapes (as an array) from a given page.
   * @param pageId (optional) The page's id.
   */
  getShapes = (pageId = this.currentPageId): TDShape[] => {
    return TLDR.getShapes(this.state, pageId || this.currentPageId)
  }

  /**
   * Get the bindings from a given page.
   * @param pageId (optional) The page's id.
   */
  getBindings = (pageId = this.currentPageId): TDBinding[] => {
    return TLDR.getBindings(this.state, pageId || this.currentPageId)
  }

  /**
   * Get a shape from a given page.
   * @param id The shape's id.
   * @param pageId (optional) The page's id.
   */
  getShape = <T extends TDShape = TDShape>(id: string, pageId = this.currentPageId): T => {
    return TLDR.getShape<T>(this.state, id, pageId)
  }

  /**
   * Get the bounds of a shape on a given page.
   * @param id The shape's id.
   * @param pageId (optional) The page's id.
   */
  getShapeBounds = (id: string, pageId = this.currentPageId): TLBounds => {
    return TLDR.getBounds(this.getShape(id, pageId))
  }

  /**
   * Get a binding from a given page.
   * @param id The binding's id.
   * @param pageId (optional) The page's id.
   */
  getBinding = (id: string, pageId = this.currentPageId): TDBinding => {
    return TLDR.getBinding(this.state, id, pageId)
  }

  /**
   * Get the page state for a given page.
   * @param pageId (optional) The page's id.
   */
  getPageState = (pageId = this.currentPageId): TLPageState => {
    return TLDR.getPageState(this.state, pageId || this.currentPageId)
  }

  /**
   * Turn a screen point into a point on the page.
   * @param point The screen point
   * @param pageId (optional) The page to use
   */
  getPagePoint = (point: number[], pageId = this.currentPageId): number[] => {
    const { camera } = this.getPageState(pageId)
    return Vec.sub(Vec.div(point, camera.zoom), camera.point)
  }

  /**
   * Get the current undo/redo stack.
   */
  get history() {
    return this.stack.slice(0, this.pointer + 1)
  }

  /**
   * Replace the current history stack.
   */
  set history(commands: TldrawCommand[]) {
    this.replaceHistory(commands)
  }

  /**
   * The current document.
   */
  get document(): TDDocument {
    return this.state.document
  }

  /**
   * The current app state.
   */
  get settings(): TDSnapshot['settings'] {
    return this.state.settings
  }

  /**
   * The current app state.
   */
  get appState(): TDSnapshot['appState'] {
    return this.state.appState
  }

  /**
   * The current page id.
   */
  get currentPageId(): string {
    return this.state.appState.currentPageId
  }

  /**
   * The current page.
   */
  get page(): TDPage {
    return this.state.document.pages[this.currentPageId]
  }

  /**
   * The current page's shapes (as an array).
   */
  get shapes(): TDShape[] {
    return Object.values(this.page.shapes)
  }

  /**
   * The current page's bindings.
   */
  get bindings(): TDBinding[] {
    return Object.values(this.page.bindings)
  }

  /**
   * The document's assets (as an array).
   */
  get assets(): TDAsset[] {
    return Object.values(this.document.assets)
  }

  /**
   * The current page's state.
   */
  get pageState(): TLPageState {
    return this.state.document.pageStates[this.currentPageId]
  }

  get camera(): {
    point: number[]
    zoom: number
  } {
    return this.pageState.camera
  }

  get zoom(): number {
    return this.pageState.camera.zoom
  }

  /**
   * The page's current selected ids.
   */
  get selectedIds(): string[] {
    return this.pageState.selectedIds
  }

  /* -------------------------------------------------- */
  /*                        Pages                       */
  /* -------------------------------------------------- */

  /**
   * Create a new page.
   * @param pageId (optional) The new page's id.
   */
  createPage = (id?: string): this => {
    if (this.readOnly) return this
    const { width, height } = this.rendererBounds
    return this.setState(Commands.createPage(this, [-width / 2, -height / 2], id))
  }

  /**
   * Change the current page.
   * @param pageId The new current page's id.
   */
  changePage = (pageId: string): this => {
    return this.setState(Commands.changePage(this, pageId))
  }

  /**
   * Rename a page.
   * @param pageId The id of the page to rename.
   * @param name The page's new name
   */
  renamePage = (pageId: string, name: string): this => {
    if (this.readOnly) return this
    return this.setState(Commands.renamePage(this, pageId, name))
  }

  /**
   * Duplicate a page.
   * @param pageId The id of the page to duplicate.
   */
  duplicatePage = (pageId: string): this => {
    if (this.readOnly) return this
    return this.setState(Commands.duplicatePage(this, pageId))
  }

  /**
   * Delete a page.
   * @param pageId The id of the page to delete.
   */
  deletePage = (pageId?: string): this => {
    if (this.readOnly) return this
    if (Object.values(this.document.pages).length <= 1) return this
    return this.setState(Commands.deletePage(this, pageId ? pageId : this.currentPageId))
  }

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

  private getClipboard(ids = this.selectedIds):
    | {
        shapes: TDShape[]
        bindings: TDBinding[]
        assets: TDAsset[]
      }
    | undefined {
    const copyingShapeIds = ids.flatMap((id) =>
      TLDR.getDocumentBranch(this.state, id, this.currentPageId)
    )

    const copyingShapes = copyingShapeIds.map((id) =>
      Utils.deepClone(this.getShape(id, this.currentPageId))
    )

    if (copyingShapes.length === 0) return

    const copyingBindings: TDBinding[] = Object.values(this.page.bindings).filter(
      (binding) =>
        copyingShapeIds.includes(binding.fromId) && copyingShapeIds.includes(binding.toId)
    )

    const copyingAssets = copyingShapes
      .map((shape) => {
        if (!shape.assetId) return

        return this.document.assets[shape.assetId]
      })
      .filter(Boolean) as TDAsset[]

    return {
      shapes: copyingShapes,
      bindings: copyingBindings,
      assets: copyingAssets,
    }
  }

  /**
   * Cut (copy and delete) one or more shapes to the clipboard.
   * @param ids The ids of the shapes to cut.
   */
  cut = (ids = this.selectedIds, e?: ClipboardEvent): this => {
    e?.preventDefault()

    this.copy(ids, e)
    if (!this.readOnly) {
      this.delete(ids)
    }
    return this
  }

  /**
   * Copy one or more shapes to the clipboard.
   * @param ids The ids of the shapes to copy.
   */
  copy = (ids = this.selectedIds, e?: ClipboardEvent): this => {
    e?.preventDefault()

    this.clipboard = this.getClipboard(ids)

    const jsonString = JSON.stringify({
      type: 'tldr/clipboard',
      ...this.clipboard,
    })

    const tldrawString = `<tldraw>${jsonString}</tldraw>`

    setClipboard(tldrawString)

    if (e) {
      e.clipboardData?.setData('text/html', tldrawString)
    }

    if (navigator.clipboard && window.ClipboardItem) {
      navigator.clipboard.write([
        new ClipboardItem({
          'text/html': new Blob([tldrawString], { type: 'text/html' }),
        }),
      ])
    }

    this.pasteInfo.offset = [0, 0]
    this.pasteInfo.center = [0, 0]

    return this
  }

  /**
   * Paste shapes (or text) from clipboard to a certain point.
   * @param point
   */
  paste = async (point?: number[], e?: ClipboardEvent) => {
    if (this.readOnly) return

    const pasteInCurrentPage = (shapes: TDShape[], bindings: TDBinding[], assets: TDAsset[]) => {
      const idsMap: Record<string, string> = {}

      const newAssets = assets.filter((asset) => this.document.assets[asset.id] === undefined)

      if (newAssets.length) {
        this.patchState({
          document: {
            assets: Object.fromEntries(newAssets.map((asset) => [asset.id, asset])),
          },
        })
      }

      shapes.forEach((shape) => (idsMap[shape.id] = Utils.uniqueId()))

      bindings.forEach((binding) => (idsMap[binding.id] = Utils.uniqueId()))

      let startIndex = TLDR.getTopChildIndex(this.state, this.currentPageId)

      const shapesToPaste = shapes
        .sort((a, b) => a.childIndex - b.childIndex)
        .map((shape) => {
          const parentShapeId = idsMap[shape.parentId]

          const copy = {
            ...shape,
            id: idsMap[shape.id],
            parentId: parentShapeId || this.currentPageId,
          }

          if (shape.children) {
            copy.children = shape.children.map((id) => idsMap[id])
          }

          if (!parentShapeId) {
            copy.childIndex = startIndex
            startIndex++
          }

          if (copy.handles) {
            Object.values(copy.handles).forEach((handle) => {
              if (handle.bindingId) {
                handle.bindingId = idsMap[handle.bindingId]
              }
            })
          }

          return copy
        })

      const bindingsToPaste = bindings.map((binding) => ({
        ...binding,
        id: idsMap[binding.id],
        toId: idsMap[binding.toId],
        fromId: idsMap[binding.fromId],
      }))

      const commonBounds = Utils.getCommonBounds(shapesToPaste.map(TLDR.getBounds))

      let center = Vec.toFixed(this.getPagePoint(point || this.centerPoint))

      if (
        Vec.dist(center, this.pasteInfo.center) < 2 ||
        Vec.dist(center, Vec.toFixed(Utils.getBoundsCenter(commonBounds))) < 2
      ) {
        center = Vec.add(center, this.pasteInfo.offset)
        this.pasteInfo.offset = Vec.add(this.pasteInfo.offset, [GRID_SIZE, GRID_SIZE])
      } else {
        this.pasteInfo.center = center
        this.pasteInfo.offset = [0, 0]
      }

      const centeredBounds = Utils.centerBounds(commonBounds, center)

      const delta = Vec.sub(
        Utils.getBoundsCenter(centeredBounds),
        Utils.getBoundsCenter(commonBounds)
      )

      this.create(
        shapesToPaste.map((shape) =>
          TLDR.getShapeUtil(shape.type).create({
            ...shape,
            point: Vec.toFixed(Vec.add(shape.point, delta)),
            parentId: shape.parentId || this.currentPageId,
          })
        ),
        bindingsToPaste
      )
    }

    const pasteTextAsSvg = async (text: string) => {
      const div = document.createElement('div')
      div.innerHTML = text
      const svg = div.firstChild as SVGSVGElement

      svg.style.setProperty('background-color', 'transparent')

      const imageBlob = await TLDR.getImageForSvg(svg, TDExportType.SVG, {
        scale: 1,
        quality: 1,
      })

      if (imageBlob) {
        const file = new File([imageBlob], 'image.svg')
        this.addMediaFromFile(file)
      } else {
        pasteTextAsShape(text)
      }
    }

    const pasteTextAsShape = (text: string) => {
      const shapeId = Utils.uniqueId()

      this.createShapes({
        id: shapeId,
        type: TDShapeType.Text,
        parentId: this.appState.currentPageId,
        text: TLDR.normalizeText(text.trim()),
        point: this.getPagePoint(this.centerPoint, this.currentPageId),
        style: { ...this.appState.currentStyle },
      })

      this.select(shapeId)
    }

    const pasteAsHTML = (html: string) => {
      try {
        const maybeJson = html.match(/<tldraw>(.*)<\/tldraw>/)?.[1]

        if (!maybeJson) return

        const json: {
          type: string
          shapes: TDShape[]
          bindings: TDBinding[]
          assets: TDAsset[]
        } = JSON.parse(maybeJson)

        if (json.type === 'tldr/clipboard') {
          pasteInCurrentPage(json.shapes, json.bindings, json.assets)
          return
        } else {
          throw Error('Not tldraw data!')
        }
      } catch (e) {
        pasteTextAsShape(html)
        return
      }
    }

    if (e !== undefined) {
      const items = e.clipboardData?.items ?? []
      for (const index in items) {
        const item = items[index]

        // TODO
        // We could eventually support pasting multiple files / images,
        // and tiling them out on the canvas. At the moment, let's just
        // support pasting one file / image.

        if (item.type === 'text/html') {
          item.getAsString(async (text) => {
            pasteAsHTML(text)
          })
          return
        } else {
          switch (item.kind) {
            case 'string': {
              item.getAsString(async (text) => {
                if (text.startsWith('<svg')) {
                  pasteTextAsSvg(text)
                } else {
                  pasteTextAsShape(text)
                }
              })
              return
            }
            case 'file': {
              const file = item.getAsFile()
              if (file) {
                this.addMediaFromFile(file)
                return
              }
            }
          }
        }
      }
    }

    getClipboard().then((clipboard) => {
      if (clipboard) {
        pasteAsHTML(clipboard)
      }
    })

    if (navigator.clipboard) {
      const items = await navigator.clipboard.read()

      if (items.length === 0) return

      try {
        for (const item of items) {
          // look for png data.

          const pngData = await item.getType('text/png')

          if (pngData) {
            const file = new File([pngData], 'image.png')
            this.addMediaFromFile(file)
            return
          }

          // look for svg data.

          const svgData = await item.getType('image/svg+xml')

          if (svgData) {
            const file = new File([svgData], 'image.svg')
            this.addMediaFromFile(file)
            return
          }

          // look for plain text data.

          const textData = await item.getType('text/plain')

          if (textData) {
            // TODO: Paste as an SVG image if the incoming data is an SVG.
            const text = await textData.text()
            text.trim()

            if (text.startsWith('<svg')) {
              pasteTextAsSvg(text)
            } else {
              pasteTextAsShape(text)
            }

            return
          }
        }
      } catch (e) {
        // noop
      }
    } else {
      TLDR.warn('This browser does not support the Clipboard API!')
      if (this.clipboard) {
        pasteInCurrentPage(this.clipboard.shapes, this.clipboard.bindings, this.clipboard.assets)
      }
    }

    return this
  }

  getSvg = async (
    ids = this.selectedIds.length ? this.selectedIds : Object.keys(this.page.shapes),
    opts = {} as Partial<{ transparentBackground: boolean; includeFonts: boolean }>
  ): Promise<SVGElement | undefined> => {
    if (ids.length === 0) return

    // Embed our custom fonts
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
    const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')

    window.focus() // weird but necessary

    if (opts.includeFonts) {
      try {
        const { fonts } = await fetch(TldrawApp.assetSrc, { mode: 'no-cors' }).then((d) => d.json())

        style.textContent = `
          @font-face {
            font-family: 'Caveat Brush';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.caveat}) format('woff');
            font-weight: 500;
            font-style: normal;
          }

          @font-face {
            font-family: 'Source Code Pro';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.source_code_pro}) format('woff');
            font-weight: 500;
            font-style: normal;
          }

          @font-face {
            font-family: 'Source Sans Pro';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.source_sans_pro}) format('woff');
            font-weight: 500;
            font-style: normal;
          }

          @font-face {
            font-family: 'Crimson Pro';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.crimson_pro}) format('woff');
            font-weight: 500;
            font-style: normal;
          }
          `
      } catch (e) {
        TLDR.warn('Could not find tldraw-assets.json file.')
      }
    } else {
      style.textContent = `@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block');`
    }

    defs.append(style)
    svg.append(defs)

    // Get the shapes in order
    const shapes = ids
      .map((id) => this.getShape(id, this.currentPageId))
      .sort((a, b) => a.childIndex - b.childIndex)

    // Find their common bounding box. Shapes will be positioned relative to this box
    const commonBounds = Utils.getCommonBounds(shapes.map(TLDR.getRotatedBounds))

    // A quick routine to get an SVG element for each shape
    const getSvgElementForShape = (shape: TDShape) => {
      const util = TLDR.getShapeUtil(shape)
      const bounds = util.getBounds(shape)
      const elm = util.getSvgElement(shape, this.settings.isDarkMode)

      if (!elm) return

      // If the element is an image, set the asset src as the xlinkhref
      if (shape.type === TDShapeType.Image) {
        elm.setAttribute('xlink:href', this.document.assets[shape.assetId].src)
      } else if (shape.type === TDShapeType.Video) {
        elm.setAttribute('xlink:href', this.serializeVideo(shape.id))
      }

      // Put the element in the correct position relative to the common bounds
      elm.setAttribute(
        'transform',
        `translate(${(SVG_EXPORT_PADDING + shape.point[0] - commonBounds.minX).toFixed(2)}, ${(
          SVG_EXPORT_PADDING +
          shape.point[1] -
          commonBounds.minY
        ).toFixed(2)}) rotate(${(((shape.rotation || 0) * 180) / Math.PI).toFixed(2)}, ${(
          bounds.width / 2
        ).toFixed(2)}, ${(bounds.height / 2).toFixed(2)})`
      )

      return elm
    }

    // Assemble the final SVG by iterating through each shape and its children
    shapes.forEach((shape) => {
      // The shape is a group! Just add the children.
      if (shape.children?.length) {
        // Create a group <g> elm for shape
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')

        // Get the shape's children as elms and add them to the group
        shape.children.forEach((childId) => {
          const shape = this.getShape(childId, this.currentPageId)
          const elm = getSvgElementForShape(shape)

          if (elm) {
            g.append(elm)
          }
        })

        // Add the group elm to the SVG
        svg.append(g)

        return
      }

      // Just add the shape's element to the
      const elm = getSvgElementForShape(shape)

      if (elm) {
        svg.append(elm)
      }
    })

    // Resize the elm to the bounding box
    svg.setAttribute(
      'viewBox',
      [
        0,
        0,
        commonBounds.width + SVG_EXPORT_PADDING * 2,
        commonBounds.height + SVG_EXPORT_PADDING * 2,
      ].join(' ')
    )

    // Clean up the SVG by removing any hidden elements
    svg.setAttribute('width', commonBounds.width.toString())
    svg.setAttribute('height', commonBounds.height.toString())

    if (opts.transparentBackground) {
      svg.style.setProperty('background-color', 'transparent')
    } else {
      svg.style.setProperty(
        'background-color',
        this.settings.isDarkMode ? '#212529' : 'rgb(248, 249, 250)'
      )
    }

    svg
      .querySelectorAll('.tl-fill-hitarea, .tl-stroke-hitarea, .tl-binding-indicator')
      .forEach((elm) => elm.remove())

    return svg
  }

  /**
   * Copy one or more shapes as SVG.
   * @param ids The ids of the shapes to copy.
   * @param pageId The page from which to copy the shapes.
   * @returns A string containing the JSON.
   */
  copySvg = async (
    ids = this.selectedIds.length ? this.selectedIds : Object.keys(this.page.shapes)
  ) => {
    if (ids.length === 0) return

    const svg = await this.getSvg(ids)

    if (!svg) return

    const svgString = TLDR.getSvgString(svg, 1)

    this.clipboard = this.getClipboard(ids)

    const tldrawString = JSON.stringify({
      type: 'tldr/clipboard',
      ...this.clipboard,
    })

    if (navigator.clipboard && window.ClipboardItem) {
      navigator.clipboard.write([
        new ClipboardItem({
          'text/html': new Blob([tldrawString], { type: 'text/html' }),
          'text/plain': new Blob([svgString], { type: 'text/plain' }),
        }),
      ])
    }

    return svgString
  }

  /**
   * Copy one or more shapes as JSON.
   * @param ids The ids of the shapes to copy.
   * @param pageId The page from which to copy the shapes.
   * @returns A string containing the JSON.
   */
  copyJson = (ids = this.selectedIds, pageId = this.currentPageId) => {
    if (ids.length === 0) ids = Object.keys(this.page.shapes)

    if (ids.length === 0) return

    const shapes = ids.map((id) => this.getShape(id, pageId))
    const json = JSON.stringify(shapes, null, 2)

    TLDR.copyStringToClipboard(json)

    return json
  }

  /**
   * Export one or more shapes as JSON.
   * @param ids The ids of the shapes to copy from the current page.
   * @returns A string containing the JSON.
   */
  exportJson = (
    ids = this.selectedIds.length ? this.selectedIds : Object.keys(this.page.shapes)
  ) => {
    if (ids.length === 0) return

    const shapes = ids.map((id) => this.getShape(id, this.currentPageId))
    const json = JSON.stringify(shapes, null, 2)
    const blob = new Blob([json], { type: 'application/json' })

    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `export.json`
    link.click()
  }

  /**
   * Get an image of the selected shapes.
   *
   * @param format The format to export the image as.
   * @param opts (optional) An object containing options for the image.
   * @param opts.ids (optional) The ids of the shapes (on the current page) to get an image for.
   * @param opts.scale (optional) The id of the page from which to get an image.
   * @param opts.quality (optional) The quality (between 0 and 1) for the image if lossy format.
   */
  getImage = async (
    format: Exclude<TDExportType, TDExportType.JSON> = TDExportType.PNG,
    opts = {} as Partial<{
      ids: string[]
      scale: number
      quality: number
      transparentBackground: boolean
    }>
  ): Promise<Blob | undefined> => {
    const { ids = this.selectedIds.length ? this.selectedIds : Object.keys(this.page.shapes) } =
      opts

    const svg = await this.getSvg(ids, {
      includeFonts: format !== TDExportType.SVG,
      transparentBackground: format === TDExportType.PNG,
    })

    if (!svg) return

    if (format === TDExportType.SVG) {
      const svgString = TLDR.getSvgString(svg, 1)
      const blob = new Blob([svgString], { type: 'image/svg+xml' })
      return blob
    }

    const imageBlob = await TLDR.getImageForSvg(svg, format, opts)

    if (!imageBlob) return

    return imageBlob
  }

  /**
   * Copy an image of the selected shapes.
   *
   * @param format The format to export the image as.
   * @param opts (optional) An object containing options for the image.
   * @param opts.ids (optional) The ids of the shapes (on the current page) to get an image for.
   * @param opts.scale (optional) The id of the page from which to get an image.
   * @param opts.quality (optional) The quality (between 0 and 1) for the image if lossy format.
   */
  copyImage = async (
    format: TDExportType.PNG | TDExportType.SVG = TDExportType.PNG,
    opts = {} as Partial<{
      ids: string[]
      scale: number
      quality: number
      transparentBackground: boolean
    }>
  ) => {
    if (format === TDExportType.SVG) {
      this.copySvg(opts.ids)
      return
    }

    if (!(navigator.clipboard && window.ClipboardItem)) {
      console.warn('Sorry, your browser does not support copying images.')
      return
    }

    const blob = await this.getImage(format, opts)

    if (!blob) return

    navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ])
  }

  exportImage = async (
    format: Exclude<TDExportType, TDExportType.JSON> = TDExportType.PNG,
    opts = {} as Partial<{
      ids: string[]
      pageId: string
      scale: number
      quality: number
      transparentBackground: boolean
    }>
  ) => {
    const { pageId = this.currentPageId } = opts

    const blob = await this.getImage(format, opts)

    if (!blob) return

    const name = this.document.pages[pageId].name ?? 'export'

    if (this.callbacks.onExport) {
      this.callbacks.onExport(this, {
        name,
        type: format,
        blob,
      })
    } else {
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `${name}.${format}`
      link.click()
    }
  }

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

  /**
   * Set the camera to a specific point and zoom.
   * @param point The camera point (top left of the viewport).
   * @param zoom The zoom level.
   * @param reason Why did the camera change?
   */
  setCamera = (point: number[], zoom: number, reason: string): this => {
    this.updateViewport(point, zoom)
    this.patchState(
      {
        document: {
          pageStates: {
            [this.currentPageId]: { camera: { point, zoom } },
          },
        },
      },
      reason
    )
    return this
  }

  /**
   * Reset the camera to the default position
   */
  resetCamera = (): this => {
    return this.setCamera(this.centerPoint, 1, `reset_camera`)
  }

  /**
   * Pan the camera
   * @param delta
   */
  pan = (delta: number[]): this => {
    const { camera } = this.pageState
    return this.setCamera(Vec.toFixed(Vec.sub(camera.point, delta)), camera.zoom, `panned`)
  }

  /**
   * Pinch to a new zoom level, possibly together with a pan.
   * @param point The current point under the cursor.
   * @param delta The movement delta.
   * @param zoomDelta The zoom detal
   */
  pinchZoom = (point: number[], delta: number[], zoom: number): this => {
    const { camera } = this.pageState
    const nextPoint = Vec.sub(camera.point, Vec.div(delta, camera.zoom))
    const nextZoom = zoom
    const p0 = Vec.sub(Vec.div(point, camera.zoom), nextPoint)
    const p1 = Vec.sub(Vec.div(point, nextZoom), nextPoint)
    return this.setCamera(
      Vec.toFixed(Vec.add(nextPoint, Vec.sub(p1, p0))),
      nextZoom,
      `pinch_zoomed`
    )
  }

  /**
   * Zoom to a new zoom level, keeping the point under the cursor in the same position
   * @param next The new zoom level.
   * @param center The point to zoom towards (defaults to screen center).
   */
  zoomTo = (next: number, center = this.centerPoint): this => {
    const { zoom, point } = this.camera
    const p0 = Vec.sub(Vec.div(center, zoom), point)
    const p1 = Vec.sub(Vec.div(center, next), point)
    return this.setCamera(Vec.toFixed(Vec.add(point, Vec.sub(p1, p0))), next, `zoomed_camera`)
  }

  /**
   * Zoom out by 25%
   */
  zoomIn = (): this => {
    const i = Math.round((this.camera.zoom * 100) / 25)
    const nextZoom = TLDR.getCameraZoom((i + 1) * 0.25)
    return this.zoomTo(nextZoom)
  }

  /**
   * Zoom in by 25%.
   */
  zoomOut = (): this => {
    const i = Math.round((this.camera.zoom * 100) / 25)
    const nextZoom = TLDR.getCameraZoom((i - 1) * 0.25)
    return this.zoomTo(nextZoom)
  }

  /**
   * Zoom to fit the page's shapes.
   */
  zoomToFit = (): this => {
    const {
      shapes,
      pageState: { camera },
    } = this
    if (shapes.length === 0) return this
    const { rendererBounds } = this
    const commonBounds = Utils.getCommonBounds(shapes.map(TLDR.getBounds))
    let zoom = TLDR.getCameraZoom(
      Math.min(
        (rendererBounds.width - FIT_TO_SCREEN_PADDING) / commonBounds.width,
        (rendererBounds.height - FIT_TO_SCREEN_PADDING) / commonBounds.height
      )
    )
    zoom = camera.zoom === zoom || camera.zoom < 1 ? Math.min(1, zoom) : zoom
    const mx = (rendererBounds.width - commonBounds.width * zoom) / 2 / zoom
    const my = (rendererBounds.height - commonBounds.height * zoom) / 2 / zoom
    return this.setCamera(
      Vec.toFixed(Vec.sub([mx, my], [commonBounds.minX, commonBounds.minY])),
      zoom,
      `zoomed_to_fit`
    )
  }

  /**
   * Zoom to the selected shapes.
   */
  zoomToSelection = (): this => {
    if (this.selectedIds.length === 0) return this

    const { rendererBounds } = this
    const selectedBounds = TLDR.getSelectedBounds(this.state)

    let zoom = TLDR.getCameraZoom(
      Math.min(
        (rendererBounds.width - FIT_TO_SCREEN_PADDING) / selectedBounds.width,
        (rendererBounds.height - FIT_TO_SCREEN_PADDING) / selectedBounds.height
      )
    )

    zoom = this.camera.zoom === zoom || this.camera.zoom < 1 ? Math.min(1, zoom) : zoom

    const mx = (rendererBounds.width - selectedBounds.width * zoom) / 2 / zoom
    const my = (rendererBounds.height - selectedBounds.height * zoom) / 2 / zoom

    return this.setCamera(
      Vec.toFixed(Vec.sub([mx, my], [selectedBounds.minX, selectedBounds.minY])),
      zoom,
      `zoomed_to_selection`
    )
  }

  /**
   * Zoom back to content when the canvas is empty.
   */
  zoomToContent = (): this => {
    const shapes = this.shapes
    const pageState = this.pageState

    if (shapes.length === 0) return this

    const { rendererBounds } = this
    const { zoom } = pageState.camera
    const commonBounds = Utils.getCommonBounds(shapes.map(TLDR.getBounds))

    const mx = (rendererBounds.width - commonBounds.width * zoom) / 2 / zoom
    const my = (rendererBounds.height - commonBounds.height * zoom) / 2 / zoom

    return this.setCamera(
      Vec.toFixed(Vec.sub([mx, my], [commonBounds.minX, commonBounds.minY])),
      this.camera.zoom,
      `zoomed_to_content`
    )
  }

  /**
   * Zoom the camera to 100%.
   */
  resetZoom = (): this => {
    return this.zoomTo(1)
  }

  /**
   * Zoom the camera by a certain delta.
   * @param delta The zoom delta.
   * @param center The point to zoom toward.
   */
  zoomBy = Utils.throttle((delta: number, center?: number[]): this => {
    const { zoom } = this.camera
    const nextZoom = TLDR.getCameraZoom(zoom - delta * zoom)
    return this.zoomTo(nextZoom, center)
  }, 16)

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

  /**
   * Clear the selection history (undo/redo stack for selection).
   */
  private clearSelectHistory = (): this => {
    this.selectHistory.pointer = 0
    this.selectHistory.stack = [this.selectedIds]
    return this
  }

  /**
   * Adds a selection to the selection history (undo/redo stack for selection).
   */
  private addToSelectHistory = (ids: string[]): this => {
    if (this.selectHistory.pointer < this.selectHistory.stack.length) {
      this.selectHistory.stack = this.selectHistory.stack.slice(0, this.selectHistory.pointer + 1)
    }
    this.selectHistory.pointer++
    this.selectHistory.stack.push(ids)
    return this
  }

  /**
   * Set the current selection.
   * @param ids The ids to select
   * @param push Whether to add the ids to the current selection instead.
   */
  private setSelectedIds = (ids: string[], push = false): this => {
    const nextIds = push ? [...this.pageState.selectedIds, ...ids] : [...ids]

    return this.patchState(
      {
        appState: {
          activeTool: 'select',
        },
        document: {
          pageStates: {
            [this.currentPageId]: {
              selectedIds: nextIds,
            },
          },
        },
      },
      `selected`
    )
  }

  /**
   * Undo the most recent selection.
   */
  undoSelect = (): this => {
    if (this.selectHistory.pointer > 0) {
      this.selectHistory.pointer--
      this.setSelectedIds(this.selectHistory.stack[this.selectHistory.pointer])
    }
    return this
  }

  /**
   * Redo the previous selection.
   */
  redoSelect = (): this => {
    if (this.selectHistory.pointer < this.selectHistory.stack.length - 1) {
      this.selectHistory.pointer++
      this.setSelectedIds(this.selectHistory.stack[this.selectHistory.pointer])
    }
    return this
  }

  /**
   * Select one or more shapes.
   * @param ids The shape ids to select.
   */
  select = (...ids: string[]): this => {
    ids.forEach((id) => {
      if (!this.page.shapes[id]) {
        throw Error(`That shape does not exist on page ${this.currentPageId}`)
      }
    })
    this.setSelectedIds(ids)
    this.addToSelectHistory(ids)
    return this
  }

  /**
   * Select all shapes on the page.
   */
  selectAll = (pageId = this.currentPageId): this => {
    if (this.session) return this

    // Select only shapes that are the direct child of the page
    this.setSelectedIds(
      Object.values(this.document.pages[pageId].shapes)
        .filter((shape) => shape.parentId === pageId)
        .map((shape) => shape.id)
    )

    this.addToSelectHistory(this.selectedIds)

    this.selectTool('select')

    return this
  }

  /**
   * Deselect any selected shapes.
   */
  selectNone = (): this => {
    this.setSelectedIds([])
    this.addToSelectHistory(this.selectedIds)
    return this
  }

  /* -------------------------------------------------- */
  /*                      Sessions                 p      */
  /* -------------------------------------------------- */

  /**
   * Start a new session.
   * @param session The new session
   * @param args arguments of the session's start method.
   */
  startSession = <T extends SessionType>(type: T, ...args: SessionArgsOfType<T>): this => {
    if (this.readOnly && type !== SessionType.Brush) return this
    if (this.session) {
      TLDR.warn(`Already in a session! (${this.session.constructor.name})`)
      this.cancelSession()
    }

    const Session = getSession(type)

    // @ts-ignore
    this.session = new Session(this, ...args)

    const result = this.session.start()

    if (result) {
      this.patchState(result, `session:start_${this.session.constructor.name}`)
    }

    return this
    // return this.setStatus(this.session.status)
  }

  /**
   * updateSession.
   * @param args The arguments of the current session's update method.
   */
  updateSession = (): this => {
    const { session } = this
    if (!session) return this

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const patch = session.update()
    if (!patch) return this
    return this.patchState(patch, `session:${session?.constructor.name}`)
  }

  /**
   * Cancel the current session.
   * @param args The arguments of the current session's cancel method.
   */
  cancelSession = (): this => {
    const { session } = this
    if (!session) return this
    this.session = undefined

    const result = session.cancel()

    if (result) {
      this.patchState(result, `session:cancel:${session.constructor.name}`)
    }

    return this
  }

  /**
   * Complete the current session.
   * @param args The arguments of the current session's complete method.
   */
  completeSession = (): this => {
    const { session } = this

    if (!session) return this
    this.session = undefined
    const result = session.complete()

    if (result === undefined) {
      this.isCreating = false

      return this.patchState(
        {
          appState: {
            status: TDStatus.Idle,
          },
          document: {
            pageStates: {
              [this.currentPageId]: {
                editingId: undefined,
                bindingId: undefined,
                hoveredId: undefined,
              },
            },
          },
        },
        `session:complete:${session.constructor.name}`
      )
    } else if ('after' in result) {
      // Session ended with a command

      if (this.isCreating) {
        // We're currently creating a shape. Override the command's
        // before state so that when we undo the command, we remove
        // the shape we just created.
        result.before = {
          appState: {
            ...result.before.appState,
            status: TDStatus.Idle,
          },
          document: {
            pages: {
              [this.currentPageId]: {
                shapes: Object.fromEntries(this.selectedIds.map((id) => [id, undefined])),
              },
            },
            pageStates: {
              [this.currentPageId]: {
                selectedIds: [],
                editingId: null,
                bindingId: null,
                hoveredId: null,
              },
            },
          },
        }

        if (this.appState.isToolLocked) {
          const pageState = result.after?.document?.pageStates?.[this.currentPageId] || {}
          pageState.selectedIds = []
        }

        this.isCreating = false
      }

      result.after.appState = {
        ...result.after.appState,
        status: TDStatus.Idle,
      }

      result.after.document = {
        ...result.after.document,
        pageStates: {
          ...result.after.document?.pageStates,
          [this.currentPageId]: {
            ...(result.after.document?.pageStates || {})[this.currentPageId],
            editingId: null,
          },
        },
      }

      this.setState(result, `session:complete:${session.constructor.name}`)
    } else {
      this.patchState(
        {
          ...result,
          appState: {
            ...result.appState,
            status: TDStatus.Idle,
          },
          document: {
            ...result.document,
            pageStates: {
              [this.currentPageId]: {
                ...result.document?.pageStates?.[this.currentPageId],
                editingId: null,
              },
            },
          },
        },
        `session:complete:${session.constructor.name}`
      )
    }

    return this
  }

  /* -------------------------------------------------- */
  /*                   Shape Functions                  */
  /* -------------------------------------------------- */

  /**
   * Manually create shapes on the page.
   * @param shapes An array of shape partials, containing the initial props for the shapes.
   * @command
   */
  createShapes = (...shapes: ({ id: string; type: TDShapeType } & Partial<TDShape>)[]): this => {
    if (shapes.length === 0) return this

    return this.create(
      shapes.map((shape) => {
        return TLDR.getShapeUtil(shape.type).create({
          parentId: this.currentPageId,
          ...shape,
        })
      })
    )
  }

  /**
   * Manually update a set of shapes.
   * @param shapes An array of shape partials, containing the changes to be made to each shape.
   * @command
   */
  updateShapes = (...shapes: ({ id: string } & Partial<TDShape>)[]): this => {
    const pageShapes = this.document.pages[this.currentPageId].shapes
    const shapesToUpdate = shapes.filter((shape) => pageShapes[shape.id])
    if (shapesToUpdate.length === 0) return this
    return this.setState(
      Commands.updateShapes(this, shapesToUpdate, this.currentPageId),
      'updated_shapes'
    )
  }

  createTextShapeAtPoint(point: number[], id?: string): this {
    const {
      shapes,
      appState: { currentPageId, currentStyle },
    } = this

    const childIndex =
      shapes.length === 0
        ? 1
        : shapes
            .filter((shape) => shape.parentId === currentPageId)
            .sort((a, b) => b.childIndex - a.childIndex)[0].childIndex + 1

    const Text = shapeUtils[TDShapeType.Text]

    const newShape = Text.create({
      id: id || Utils.uniqueId(),
      parentId: currentPageId,
      childIndex,
      point,
      style: { ...currentStyle },
    })

    const bounds = Text.getBounds(newShape)
    newShape.point = Vec.sub(newShape.point, [bounds.width / 2, bounds.height / 2])
    this.createShapes(newShape)
    this.setEditingId(newShape.id)

    return this
  }

  createImageOrVideoShapeAtPoint(
    id: string,
    type: TDShapeType.Image | TDShapeType.Video,
    point: number[],
    size: number[],
    assetId: string
  ): this {
    const {
      shapes,
      appState: { currentPageId, currentStyle },
    } = this

    const childIndex =
      shapes.length === 0
        ? 1
        : shapes
            .filter((shape) => shape.parentId === currentPageId)
            .sort((a, b) => b.childIndex - a.childIndex)[0].childIndex + 1

    const Shape = shapeUtils[type]

    // Ensure that the pasted shape fits inside of the current viewport

    if (size[0] > this.viewport.width) {
      const r = size[1] / size[0]
      size[0] = this.viewport.width - (FIT_TO_SCREEN_PADDING / this.camera.zoom) * 2
      size[1] = size[0] * r
      if (size[1] < 32 || size[1] < 32) {
        size[1] = 32
        size[0] = size[1] / r
      }
    } else if (size[1] > this.viewport.height) {
      const r = size[0] / size[1]
      size[1] = this.viewport.height - (FIT_TO_SCREEN_PADDING / this.camera.zoom) * 2
      size[0] = size[1] * r
      if (size[1] < 32 || size[1] < 32) {
        size[0] = 32
        size[1] = size[0] / r
      }
    }

    const newShape = Shape.create({
      id,
      parentId: currentPageId,
      childIndex,
      point,
      size,
      style: { ...currentStyle },
      assetId,
    })

    const bounds = Shape.getBounds(newShape as never)

    newShape.point = Vec.sub(newShape.point, [bounds.width / 2, bounds.height / 2])

    this.createShapes(newShape)

    return this
  }

  /**
   * Create one or more shapes.
   * @param shapes An array of shapes.
   * @command
   */
  create = (shapes: TDShape[] = [], bindings: TDBinding[] = []): this => {
    if (shapes.length === 0) return this
    return this.setState(Commands.createShapes(this, shapes, bindings))
  }

  /**
   * Patch in a new set of shapes
   * @param shapes
   * @param bindings
   */
  patchCreate = (shapes: TDShape[] = [], bindings: TDBinding[] = []): this => {
    if (shapes.length === 0) return this
    return this.patchState(Commands.createShapes(this, shapes, bindings).after)
  }

  /**
   * Delete one or more shapes.
   * @param ids The ids of the shapes to delete.
   * @command
   */
  delete = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    const drawCommand = Commands.deleteShapes(this, ids)

    if (
      this.callbacks.onAssetDelete &&
      drawCommand.before.document?.assets &&
      drawCommand.after.document?.assets
    ) {
      const beforeAssetIds = Object.keys(drawCommand.before.document.assets).filter(
        (k) => !!drawCommand.before.document!.assets![k]
      )
      const afterAssetIds = Object.keys(drawCommand.after.document.assets).filter(
        (k) => !!drawCommand.after.document!.assets![k]
      )

      const intersection = beforeAssetIds.filter((x) => !afterAssetIds.includes(x))
      intersection.forEach((id) => this.callbacks.onAssetDelete!(this, id))
    }

    return this.setState(drawCommand)
  }

  /**
   * Delete all shapes on the page.
   */
  deleteAll = (): this => {
    this.selectAll()
    this.delete()
    return this
  }

  /**
   * Change the style for one or more shapes.
   * @param style A style partial to apply to the shapes.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  style = (style: Partial<ShapeStyles>, ids = this.selectedIds): this => {
    return this.setState(Commands.styleShapes(this, ids, style))
  }

  /**
   * Align one or more shapes.
   * @param direction Whether to align horizontally or vertically.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  align = (type: AlignType, ids = this.selectedIds): this => {
    if (ids.length < 2) return this
    return this.setState(Commands.alignShapes(this, ids, type))
  }

  /**
   * Distribute one or more shapes.
   * @param direction Whether to distribute horizontally or vertically..
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  distribute = (direction: DistributeType, ids = this.selectedIds): this => {
    if (ids.length < 3) return this
    return this.setState(Commands.distributeShapes(this, ids, direction))
  }

  /**
   * Stretch one or more shapes to their common bounds.
   * @param direction Whether to stretch horizontally or vertically.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  stretch = (direction: StretchType, ids = this.selectedIds): this => {
    if (ids.length < 2) return this
    return this.setState(Commands.stretchShapes(this, ids, direction))
  }

  /**
   * Flip one or more shapes horizontally.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  flipHorizontal = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.flipShapes(this, ids, FlipType.Horizontal))
  }

  /**
   * Flip one or more shapes vertically.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  flipVertical = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.flipShapes(this, ids, FlipType.Vertical))
  }

  /**
   * Move one or more shapes to a new page. Will also break or move bindings.
   * @param toPageId The id of the page to move the shapes to.
   * @param fromPageId The id of the page to move the shapes from (defaults to current page).
   * @param ids The ids of the shapes to move (defaults to selection).
   */
  moveToPage = (
    toPageId: string,
    fromPageId = this.currentPageId,
    ids = this.selectedIds
  ): this => {
    if (ids.length === 0) return this
    const { rendererBounds } = this
    this.setState(Commands.moveShapesToPage(this, ids, rendererBounds, fromPageId, toPageId))
    return this
  }

  /**
   * Move one or more shapes to the back of the page.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  moveToBack = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.reorderShapes(this, ids, MoveType.ToBack))
  }

  /**
   * Move one or more shapes backward on of the page.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  moveBackward = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.reorderShapes(this, ids, MoveType.Backward))
  }

  /**
   * Move one or more shapes forward on the page.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  moveForward = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.reorderShapes(this, ids, MoveType.Forward))
  }

  /**
   * Move one or more shapes to the front of the page.
   * @param ids The ids of the shapes to change (defaults to selection).
   */
  moveToFront = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.reorderShapes(this, ids, MoveType.ToFront))
  }

  /**
   * Nudge one or more shapes in a direction.
   * @param delta The direction to nudge the shapes.
   * @param isMajor Whether this is a major (i.e. shift) nudge.
   * @param ids The ids to change (defaults to selection).
   */
  nudge = (delta: number[], isMajor = false, ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    const size = isMajor
      ? this.settings.showGrid
        ? this.currentGrid * 4
        : 10
      : this.settings.showGrid
      ? this.currentGrid
      : 1

    return this.setState(Commands.translateShapes(this, ids, Vec.mul(delta, size)))
  }

  /**
   * Duplicate one or more shapes.
   * @param ids The ids to duplicate (defaults to selection).
   */
  duplicate = (ids = this.selectedIds, point?: number[]): this => {
    if (this.readOnly) return this
    if (ids.length === 0) return this
    return this.setState(Commands.duplicateShapes(this, ids, point))
  }

  /**
   * Reset the bounds for one or more shapes. Usually when the
   * bounding box of a shape is double-clicked. Different shapes may
   * handle this differently.
   * @param ids The ids to change (defaults to selection).
   */
  resetBounds = (ids = this.selectedIds): this => {
    const command = Commands.resetBounds(this, ids, this.currentPageId)
    return this.setState(Commands.resetBounds(this, ids, this.currentPageId), command.id)
  }

  /**
   * Toggle the hidden property of one or more shapes.
   * @param ids The ids to change (defaults to selection).
   */
  toggleHidden = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.toggleShapeProp(this, ids, 'isHidden'))
  }

  /**
   * Toggle the locked property of one or more shapes.
   * @param ids The ids to change (defaults to selection).
   */
  toggleLocked = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.toggleShapeProp(this, ids, 'isLocked'))
  }

  /**
   * Toggle the fixed-aspect-ratio property of one or more shapes.
   * @param ids The ids to change (defaults to selection).
   */
  toggleAspectRatioLocked = (ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    return this.setState(Commands.toggleShapeProp(this, ids, 'isAspectRatioLocked'))
  }

  /**
   * Toggle the decoration at a handle of one or more shapes.
   * @param handleId The handle to toggle.
   * @param ids The ids of the shapes to toggle the decoration on.
   */
  toggleDecoration = (handleId: string, ids = this.selectedIds): this => {
    if (ids.length === 0 || !(handleId === 'start' || handleId === 'end')) return this
    return this.setState(Commands.toggleShapesDecoration(this, ids, handleId))
  }

  /**
   * Set the props of one or more shapes
   * @param props The props to set on the shapes.
   * @param ids The ids of the shapes to set props on.
   */
  setShapeProps = <T extends TDShape>(props: Partial<T>, ids = this.selectedIds) => {
    return this.setState(Commands.setShapesProps(this, ids, props))
  }

  /**
   * Rotate one or more shapes by a delta.
   * @param delta The delta in radians.
   * @param ids The ids to rotate (defaults to selection).
   */
  rotate = (delta = Math.PI * -0.5, ids = this.selectedIds): this => {
    if (ids.length === 0) return this
    const change = Commands.rotateShapes(this, ids, delta)
    if (!change) return this
    return this.setState(change)
  }

  /**
   * Group the selected shapes.
   * @param ids The ids to group (defaults to selection).
   * @param groupId The new group's id.
   */
  group = (
    ids = this.selectedIds,
    groupId = Utils.uniqueId(),
    pageId = this.currentPageId
  ): this => {
    if (this.readOnly) return this

    if (ids.length === 1 && this.getShape(ids[0], pageId).type === TDShapeType.Group) {
      return this.ungroup(ids, pageId)
    }

    if (ids.length < 2) return this

    const command = Commands.groupShapes(this, ids, groupId, pageId)
    if (!command) return this
    return this.setState(command)
  }

  /**
   * Ungroup the selected groups.
   * @todo
   */
  ungroup = (ids = this.selectedIds, pageId = this.currentPageId): this => {
    if (this.readOnly) return this

    const groups = ids
      .map((id) => this.getShape(id, pageId))
      .filter((shape) => shape.type === TDShapeType.Group)

    if (groups.length === 0) return this

    const command = Commands.ungroupShapes(this, ids, groups as GroupShape[], pageId)

    if (!command) {
      return this
    }

    return this.setState(command)
  }

  /**
   * Cancel the current session.
   */
  cancel = (): this => {
    this.currentTool.onCancel?.()

    return this
  }

  addMediaFromFile = async (file: File, point = this.centerPoint) => {
    this.setIsLoading(true)

    const id = Utils.uniqueId()
    const pagePoint = this.getPagePoint(point)
    const extension = file.name.match(/\.[0-9a-z]+$/i)

    if (!extension) throw Error('No extension')

    const isImage = IMAGE_EXTENSIONS.includes(extension[0].toLowerCase())
    const isVideo = VIDEO_EXTENSIONS.includes(extension[0].toLowerCase())

    if (!(isImage || isVideo)) throw Error('Wrong extension')

    const shapeType = isImage ? TDShapeType.Image : TDShapeType.Video
    const assetType = isImage ? TDAssetType.Image : TDAssetType.Video

    let src: string | ArrayBuffer | null

    try {
      if (this.callbacks.onAssetCreate) {
        const result = await this.callbacks.onAssetCreate(this, file, id)

        if (!result) throw Error('Asset creation callback returned false')

        src = result
      } else {
        src = await fileToBase64(file)
      }

      if (typeof src === 'string') {
        let size = [0, 0]

        if (isImage) {
          // attempt to get actual svg size from viewBox attribute as
          if (extension[0] == '.svg') {
            let viewBox: string[]
            const svgString = await fileToText(file)
            const viewBoxAttribute = this.getViewboxFromSVG(svgString)

            if (viewBoxAttribute) {
              viewBox = viewBoxAttribute.split(' ')
              size[0] = parseFloat(viewBox[2])
              size[1] = parseFloat(viewBox[3])
            }
          }
          if (Vec.isEqual(size, [0, 0])) {
            size = await getImageSizeFromSrc(src)
          }
        } else {
          size = await getVideoSizeFromSrc(src)
        }

        const match = Object.values(this.document.assets).find(
          (asset) => asset.type === assetType && asset.src === src
        )

        let assetId: string

        if (!match) {
          assetId = Utils.uniqueId()

          const asset = {
            id: assetId,
            type: assetType,
            name: file.name,
            src,
            size,
          }

          this.patchState({
            document: {
              assets: {
                [assetId]: asset,
              },
            },
          })
        } else {
          assetId = match.id
        }

        this.createImageOrVideoShapeAtPoint(id, shapeType, pagePoint, size, assetId)
      }
    } catch (error) {
      console.warn(error)
      this.setIsLoading(false)
      return this
    }

    this.setIsLoading(false)
    return this
  }

  private getViewboxFromSVG = (svgStr: string | ArrayBuffer | null) => {
    const viewBoxRegex = /.*?viewBox=["'](-?[\d.]+[, ]+-?[\d.]+[, ][\d.]+[, ][\d.]+)["']/

    if (typeof svgStr === 'string') {
      const matches = svgStr.match(viewBoxRegex)
      return matches && matches.length >= 2 ? matches[1] : null
    }

    console.warn('could not get viewbox from svg string')

    this.setIsLoading(false)

    return null
  }

  /* -------------------------------------------------- */
  /*                   Event Handlers                   */
  /* -------------------------------------------------- */

  /* ----------------- Keyboard Events ---------------- */

  onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
    switch (e.key) {
      case '/': {
        if (this.status === 'idle' && !this.pageState.editingId) {
          const { shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this

          this.onPointerDown(
            {
              target: 'canvas',
              pointerId: 0,
              origin: info.point,
              point: info.point,
              delta: [0, 0],
              pressure: 0.5,
              shiftKey,
              ctrlKey,
              metaKey,
              altKey,
              spaceKey,
            },
            {
              shiftKey,
              altKey,
              ctrlKey,
              pointerId: 0,
              clientX: info.point[0],
              clientY: info.point[1],
            } as unknown as React.PointerEvent<HTMLDivElement>
          )
        }
        break
      }
      case 'Escape': {
        this.cancel()
        break
      }
      case 'Meta': {
        this.metaKey = true
        break
      }
      case 'Alt': {
        this.altKey = true
        break
      }
      case 'Control': {
        this.ctrlKey = true
        break
      }
      case ' ': {
        this.isForcePanning = true
        this.spaceKey = true
        break
      }
    }

    this.currentTool.onKeyDown?.(key, info, e)

    return this
  }

  onKeyUp: TLKeyboardEventHandler = (key, info, e) => {
    if (!info) return

    switch (e.key) {
      case '/': {
        const { currentPoint, shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this

        this.onPointerUp(
          {
            target: 'canvas',
            pointerId: 0,
            origin: currentPoint,
            point: currentPoint,
            delta: [0, 0],
            pressure: 0.5,
            shiftKey,
            ctrlKey,
            metaKey,
            altKey,
            spaceKey,
          },
          {
            shiftKey,
            altKey,
            ctrlKey,
            pointerId: 0,
            clientX: currentPoint[0],
            clientY: currentPoint[1],
          } as unknown as React.PointerEvent<HTMLDivElement>
        )
        break
      }
      case 'Meta': {
        this.metaKey = false
        break
      }
      case 'Alt': {
        this.altKey = false
        break
      }
      case 'Control': {
        this.ctrlKey = false
        break
      }
      case ' ': {
        this.isForcePanning = false
        this.spaceKey = false
        break
      }
    }

    this.currentTool.onKeyUp?.(key, info, e)
  }

  /** Force bounding boxes to reset when the document loads. */
  refreshBoundingBoxes = () => {
    // force a change to every text shape
    const force = this.shapes.map((shape) => {
      return [
        shape.id,
        {
          point: [...shape.point],
          ...('label' in shape && { label: '' }),
        },
      ]
    })

    const restore = this.shapes.map((shape) => {
      return [
        shape.id,
        {
          point: [...shape.point],
          ...('label' in shape && { label: shape.label }),
        },
      ]
    })

    clearPrevSize()

    this.patchState({
      document: {
        pages: {
          [this.currentPageId]: {
            shapes: Object.fromEntries(force),
          },
        },
      },
    })
    this.patchState({
      document: {
        pages: {
          [this.currentPageId]: {
            shapes: Object.fromEntries(restore),
          },
        },
      },
    })
  }

  /* ------------- Renderer Event Handlers ------------ */

  onDragOver: TLDropEventHandler = (e) => {
    e.preventDefault()
  }

  onDrop: TLDropEventHandler = async (e) => {
    e.preventDefault()
    if (this.disableAssets) return this
    if (e.dataTransfer.files?.length) {
      const file = e.dataTransfer.files[0]
      this.addMediaFromFile(file, [e.clientX, e.clientY])
    }
    return this
  }

  onPinchStart: TLPinchEventHandler = (info, e) => {
    this.currentTool.onPinchStart?.(info, e)
  }

  onPinchEnd: TLPinchEventHandler = (info, e) => this.currentTool.onPinchEnd?.(info, e)

  onPinch: TLPinchEventHandler = (info, e) => this.currentTool.onPinch?.(info, e)

  onPan: TLWheelEventHandler = (info, e) => {
    if (this.appState.status === 'pinching') return
    // TODO: Pan and pinchzoom are firing at the same time. Considering turning one of them off!

    const delta = Vec.div(info.delta, this.camera.zoom)
    const prev = this.camera.point
    const next = Vec.sub(prev, delta)

    if (Vec.isEqual(next, prev)) return

    this.pan(delta)

    // When panning, we also want to call onPointerMove, except when "force panning" via spacebar / middle wheel button (it's called elsewhere in that case)
    if (!this.isForcePanning) this.onPointerMove(info, e as unknown as React.PointerEvent)
  }

  onZoom: TLWheelEventHandler = (info, e) => {
    if (this.state.appState.status !== TDStatus.Idle) return
    const delta = info.delta[2] / 50
    this.zoomBy(delta, info.point)
    this.onPointerMove(info, e as unknown as React.PointerEvent)
  }

  /* ----------------- Pointer Events ----------------- */

  updateInputs: TLPointerEventHandler = (info) => {
    this.currentPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.shiftKey = info.shiftKey
    this.altKey = info.altKey
    this.ctrlKey = info.ctrlKey
    this.metaKey = info.metaKey
  }

  onPointerMove: TLPointerEventHandler = (info, e) => {
    this.previousPoint = this.currentPoint
    this.updateInputs(info, e)
    if (this.isForcePanning && this.isPointing) {
      this.onPan?.({ ...info, delta: Vec.neg(info.delta) }, e as unknown as WheelEvent)
      return
    }

    // Several events (e.g. pan) can trigger the same "pointer move" behavior
    this.currentTool.onPointerMove?.(info, e)

    // Move this to an emitted event
    if (this.state.room) {
      const { users, userId } = this.state.room

      this.callbacks.onChangePresence?.(this, {
        ...users[userId],
        point: this.getPagePoint(info.point),
      })
    }
  }

  onPointerDown: TLPointerEventHandler = (info, e) => {
    if (e.buttons === 4) {
      this.isForcePanning = true
    } else if (this.isPointing) {
      return
    }
    this.isPointing = true
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    if (this.isForcePanning) return
    this.currentTool.onPointerDown?.(info, e)
  }

  onPointerUp: TLPointerEventHandler = (info, e) => {
    this.isPointing = false
    if (!this.shiftKey) this.isForcePanning = false
    this.updateInputs(info, e)
    this.currentTool.onPointerUp?.(info, e)
  }

  // Canvas (background)
  onPointCanvas: TLCanvasEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onPointCanvas?.(info, e)
  }

  onDoubleClickCanvas: TLCanvasEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onDoubleClickCanvas?.(info, e)
  }

  onRightPointCanvas: TLCanvasEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onRightPointCanvas?.(info, e)
  }

  onDragCanvas: TLCanvasEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onDragCanvas?.(info, e)
  }

  onReleaseCanvas: TLCanvasEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onReleaseCanvas?.(info, e)
  }

  // Shape
  onPointShape: TLPointerEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onPointShape?.(info, e)
  }

  onReleaseShape: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onReleaseShape?.(info, e)
  }

  onDoubleClickShape: TLPointerEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onDoubleClickShape?.(info, e)
  }

  onRightPointShape: TLPointerEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onRightPointShape?.(info, e)
  }

  onDragShape: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onDragShape?.(info, e)
  }

  onHoverShape: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onHoverShape?.(info, e)
  }

  onUnhoverShape: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onUnhoverShape?.(info, e)
  }

  // Bounds (bounding box background)
  onPointBounds: TLBoundsEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onPointBounds?.(info, e)
  }

  onDoubleClickBounds: TLBoundsEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onDoubleClickBounds?.(info, e)
  }

  onRightPointBounds: TLBoundsEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onRightPointBounds?.(info, e)
  }

  onDragBounds: TLBoundsEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onDragBounds?.(info, e)
  }

  onHoverBounds: TLBoundsEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onHoverBounds?.(info, e)
  }

  onUnhoverBounds: TLBoundsEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onUnhoverBounds?.(info, e)
  }

  onReleaseBounds: TLBoundsEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onReleaseBounds?.(info, e)
  }

  // Bounds handles (corners, edges)
  onPointBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onPointBoundsHandle?.(info, e)
  }

  onDoubleClickBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onDoubleClickBoundsHandle?.(info, e)

    // hack time to reset the size / clipping of an image
    if (this.selectedIds.length !== 1) return

    const shape = this.getShape(this.selectedIds[0])

    if (shape.type === TDShapeType.Image || shape.type === TDShapeType.Video) {
      const asset = this.document.assets[shape.assetId]
      const util = TLDR.getShapeUtil(shape)
      const centerA = util.getCenter(shape)
      const centerB = util.getCenter({ ...shape, size: asset.size })
      const delta = Vec.sub(centerB, centerA)

      this.updateShapes({
        id: shape.id,
        point: Vec.sub(shape.point, delta),
        size: asset.size,
      })
    }
  }

  onRightPointBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onRightPointBoundsHandle?.(info, e)
  }

  onDragBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onDragBoundsHandle?.(info, e)
  }

  onHoverBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onHoverBoundsHandle?.(info, e)
  }

  onUnhoverBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onUnhoverBoundsHandle?.(info, e)
  }

  onReleaseBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onReleaseBoundsHandle?.(info, e)
  }

  // Handles (ie the handles of a selected arrow)
  onPointHandle: TLPointerEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onPointHandle?.(info, e)
  }

  onDoubleClickHandle: TLPointerEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onDoubleClickHandle?.(info, e)
  }

  onRightPointHandle: TLPointerEventHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onRightPointHandle?.(info, e)
  }

  onDragHandle: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onDragHandle?.(info, e)
  }

  onHoverHandle: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onHoverHandle?.(info, e)
  }

  onUnhoverHandle: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onUnhoverHandle?.(info, e)
  }

  onReleaseHandle: TLPointerEventHandler = (info, e) => {
    this.updateInputs(info, e)
    this.currentTool.onReleaseHandle?.(info, e)
  }

  onShapeChange = (shape: { id: string } & Partial<TDShape>) => {
    this.updateShapes(shape)
  }

  onShapeBlur = () => {
    // This prevents an auto-blur event from Safari
    if (performance.now() - this.editingStartTime < 50) return

    const { editingId } = this.pageState
    const { isToolLocked } = this.getAppState()

    if (editingId) {
      // If we're editing text, then delete the text if it's empty
      const shape = this.getShape(editingId)
      this.setEditingId()
      if (shape.type === TDShapeType.Text) {
        if (shape.text.trim().length <= 0) {
          this.patchState(Commands.deleteShapes(this, [editingId]).after, 'delete_empty_text')
        } else if (!isToolLocked) {
          this.select(editingId)
        }
      }
    }

    this.currentTool.onShapeBlur?.()
  }

  onShapeClone: TLShapeCloneHandler = (info, e) => {
    this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
    this.updateInputs(info, e)
    this.currentTool.onShapeClone?.(info, e)
  }

  onRenderCountChange = (ids: string[]) => {
    const appState = this.getAppState()
    if (appState.isEmptyCanvas && ids.length > 0) {
      this.patchState(
        {
          appState: {
            isEmptyCanvas: false,
          },
        },
        'empty_canvas:false'
      )
    } else if (!appState.isEmptyCanvas && ids.length <= 0) {
      this.patchState(
        {
          appState: {
            isEmptyCanvas: true,
          },
        },
        'empty_canvas:true'
      )
    }
  }

  onError = () => {
    // TODO
  }

  isSelected(id: string) {
    return this.selectedIds.includes(id)
  }

  /* ----------------- Export ----------------- */

  /**
   * Get a snapshot of a video at current frame as base64 encoded image
   * @param id ID of video shape
   * @returns base64 encoded frame
   * @throws Error if video shape with given ID does not exist
   */
  serializeVideo(id: string): string {
    const video = document.getElementById(id + '_video') as HTMLVideoElement
    if (video) {
      const canvas = document.createElement('canvas')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      canvas.getContext('2d')!.drawImage(video, 0, 0)
      return canvas.toDataURL('image/png')
    } else throw new Error('Video with id ' + id + ' not found')
  }

  /**
   * Get a snapshot of a image (e.g. a GIF) as base64 encoded image
   * @param id ID of image shape
   * @returns base64 encoded frame
   * @throws Error if image shape with given ID does not exist
   */
  serializeImage(id: string): string {
    const image = document.getElementById(id + '_image') as HTMLImageElement
    if (image) {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      canvas.getContext('2d')!.drawImage(image, 0, 0)
      return canvas.toDataURL('image/png')
    } else throw new Error('Image with id ' + id + ' not found')
  }

  patchAssets(assets: TDAssets) {
    this.document.assets = {
      ...this.document.assets,
      ...assets,
    }
  }

  get room() {
    return this.state.room
  }

  get isLocal() {
    return this.state.room === undefined || this.state.room.id === 'local'
  }

  get status() {
    return this.appState.status
  }

  get currentUser() {
    if (!this.state.room) return
    return this.state.room.users[this.state.room.userId]
  }

  // The center of the component (in screen space)
  get centerPoint() {
    const { width, height } = this.rendererBounds
    return Vec.toFixed([width / 2, height / 2])
  }

  get currentGrid() {
    const { zoom } = this.camera
    if (zoom < 0.15) {
      return GRID_SIZE * 16
    } else if (zoom < 1) {
      return GRID_SIZE * 4
    } else {
      return GRID_SIZE * 1
    }
  }

  getShapeUtil = TLDR.getShapeUtil

  static version = 15.3

  static defaultDocument: TDDocument = {
    id: 'doc',
    name: 'New Document',
    version: TldrawApp.version,
    pages: {
      page: {
        id: 'page',
        name: 'Page 1',
        childIndex: 1,
        shapes: {},
        bindings: {},
      },
    },
    pageStates: {
      page: {
        id: 'page',
        selectedIds: [],
        camera: {
          point: [0, 0],
          zoom: 1,
        },
      },
    },
    assets: {},
  }

  static defaultState: TDSnapshot = {
    settings: {
      isCadSelectMode: false,
      isPenMode: false,
      isDarkMode: false,
      isZoomSnap: false,
      isFocusMode: false,
      isSnapping: false,
      isDebugMode: false,
      isReadonlyMode: false,
      keepStyleMenuOpen: false,
      nudgeDistanceLarge: 16,
      nudgeDistanceSmall: 1,
      showRotateHandles: true,
      showBindingHandles: true,
      showCloneHandles: false,
      showGrid: false,
      language: 'en',
    },
    appState: {
      status: TDStatus.Idle,
      activeTool: 'select',
      hoveredId: undefined,
      currentPageId: 'page',
      currentStyle: defaultStyle,
      isToolLocked: false,
      isMenuOpen: false,
      isEmptyCanvas: false,
      eraseLine: [],
      snapLines: [],
      isLoading: false,
      disableAssets: false,
    },
    document: TldrawApp.defaultDocument,
  }

  static assetSrc = 'tldraw-assets.json'
}