Adds tests, fixes bug on pre-complete sessions

__tests__/project.test.ts

@@ -0,0 +1,56 @@
+import * as json from './__mocks__/document.json'
+import state from 'state'
+import { point } from './test-utils'
+import inputs from 'state/inputs'
+import { getSelectedIds, setToArray } from 'utils/utils'
+
+const rectangleId = '1f6c251c-e12e-40b4-8dd2-c1847d80b72f'
+const arrowId = '5ca167d7-54de-47c9-aa8f-86affa25e44d'
+
+describe('project', () => {
+  it('mounts the state', () => {
+    state.enableLog(true)
+
+    state
+      .send('MOUNTED')
+      .send('LOADED_FROM_FILE', { json: JSON.stringify(json) })
+  })
+
+  it('selects and deselects a shape', () => {
+    expect(setToArray(getSelectedIds(state.data))).toStrictEqual([])
+
+    state
+      .send('POINTED_SHAPE', inputs.pointerDown(point(), rectangleId))
+      .send('STOPPED_POINTING', inputs.pointerUp(point()))
+
+    expect(setToArray(getSelectedIds(state.data))).toStrictEqual([rectangleId])
+
+    state
+      .send('POINTED_CANVAS', inputs.pointerDown(point(), 'canvas'))
+      .send('STOPPED_POINTING', inputs.pointerUp(point()))
+
+    expect(setToArray(getSelectedIds(state.data))).toStrictEqual([])
+  })
+
+  it('selects multiple shapes', () => {
+    expect(setToArray(getSelectedIds(state.data))).toStrictEqual([])
+
+    state
+      .send('POINTED_SHAPE', inputs.pointerDown(point(), rectangleId))
+      .send('STOPPED_POINTING', inputs.pointerUp(point()))
+
+    expect(setToArray(getSelectedIds(state.data))).toStrictEqual([rectangleId])
+
+    state.send(
+      'POINTED_SHAPE',
+      inputs.pointerDown(point({ shiftKey: true }), arrowId)
+    )
+
+    // state.send('STOPPED_POINTING', inputs.pointerUp(point()))
+
+    expect(setToArray(getSelectedIds(state.data))).toStrictEqual([
+      rectangleId,
+      arrowId,
+    ])
+  })
+})

__tests__/test-utils.ts

@@ -0,0 +1,30 @@
+interface PointerOptions {
+  id?: string
+  x?: number
+  y?: number
+  shiftKey?: boolean
+  altKey?: boolean
+  metaKey?: boolean
+}
+
+export function point(
+  options: PointerOptions = {} as PointerOptions
+): PointerEvent {
+  const {
+    id = '1',
+    x = 0,
+    y = 0,
+    shiftKey = false,
+    altKey = false,
+    metaKey = false,
+  } = options
+
+  return {
+    shiftKey,
+    altKey,
+    metaKey,
+    pointerId: id,
+    clientX: x,
+    clientY: y,
+  } as any
+}

hooks/useKeyboardEvents.ts

@@ -246,6 +246,10 @@ export default function useKeyboardEvents() {
           }
           break
         }
+        case '|': {
+          state.send('COPIED_STATE_TO_CLIPBOARD')
+          break
+        }
         default: {
           state.send('PRESSED_KEY', getKeyboardEventInfo(e))
         }

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     '^.+\\.(ts|tsx|mjs)$': 'babel-jest',
   },
   modulePaths: ['<rootDir>', 'node_modules'],
+  testMatch: ["**/__tests__/**/*test.[t]s?(x)"],
   watchPlugins: [
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',

package.json

@@ -64,12 +64,13 @@
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.25",
     "@types/react": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.14.2",
     "@typescript-eslint/parser": "^4.14.2",
-    "babel-jest": "^27.0.2",
+    "babel-jest": "^27.0.5",
     "eslint": "^7.19.0",
     "eslint-config-next": "^11.0.0",
     "eslint-config-prettier": "^7.2.0",
@@ -88,4 +89,4 @@
     "tabWidth": 2,
     "useTabs": false
   }
-}
+}

state/hacks.ts

@@ -10,6 +10,7 @@ import { freeze } from 'immer'
 import session from './session'
 import state from './state'
 import vec from 'utils/vec'
+import * as Session from './sessions'
 
 /**
  * While a user is drawing with the draw tool, we want to update the shape without
@@ -21,7 +22,7 @@ import vec from 'utils/vec'
 export function fastDrawUpdate(info: PointerInfo): void {
   const data = { ...state.data }
 
-  session.current.update(
+  session.update<Session.DrawSession>(
     data,
     screenToWorld(info.point, data),
     info.pressure,
@@ -91,7 +92,7 @@ export function fastPinchCamera(
 export function fastBrushSelect(point: number[]): void {
   const data = { ...state.data }
 
-  session.current.update(data, screenToWorld(point, data))
+  session.update<Session.BrushSession>(data, screenToWorld(point, data))
 
   state.forceData(freeze(data))
 }
@@ -99,7 +100,7 @@ export function fastBrushSelect(point: number[]): void {
 export function fastTranslate(info: PointerInfo): void {
   const data = { ...state.data }
 
-  session.current.update(
+  session.update<Session.TranslateSession>(
     data,
     screenToWorld(info.point, data),
     info.shiftKey,
@@ -112,11 +113,10 @@ export function fastTranslate(info: PointerInfo): void {
 export function fastTransform(info: PointerInfo): void {
   const data = { ...state.data }
 
-  session.current.update(
+  session.update<Session.TransformSession | Session.TransformSingleSession>(
     data,
     screenToWorld(info.point, data),
-    info.shiftKey,
-    info.altKey
+    info.shiftKey
   )
 
   state.forceData(freeze(data))

state/inputs.tsx

@@ -165,7 +165,6 @@ class Inputs {
   }
 
   canAccept = (pointerId: PointerEvent['pointerId']) => {
-    // return true
     return (
       this.activePointerId === undefined || this.activePointerId === pointerId
     )
@@ -187,6 +186,10 @@ class Inputs {
     this.pointer = undefined
     this.points = {}
   }
+
+  resetDoubleClick() {
+    this.pointerUpTime = 0
+  }
 }
 
 export default new Inputs()

state/session.ts

@@ -1,35 +1,96 @@
 import { BaseSession } from './sessions'
 
+/**
+ * # Session Manager
+ *
+ * Sessions are instances that manage data mutations for activities such as
+ * dragging, transforming, drawing, etc. The session manager singleton provides
+ * an API with which the state's actions can begin a session and interact it.
+ *
+ * A session has a lifecycle:
+ *
+ * - it `begin`s when the session instance is created
+ * - it receives `update`s during the session
+ * - it ends either when it is `complete`d or `cancel`led
+ *
+ * Each session may produce different effects during these life cycles, according
+ * to its implementation. Most sessions call a command when completed.
+ *
+ * It's intended that only a single session occurs at once. This pattern helps
+ * ensure that we don't accidentally begin a new session before the current one
+ * is cancelled or completes.
+ */
+
 class SessionManager {
-  private _current?: BaseSession
+  #current?: BaseSession
 
-  clear() {
-    this._current = undefined
-    return this
-  }
+  /**
+   * Begin a new session.
+   * @param session A Session instance.
+   * @example
+   * ```ts
+   * session.begin(new Sessions.EditSession(data))
+   * ```
+   */
+  begin(session: BaseSession) {
+    if (this.#current) {
+      throw Error(
+        'Cannot begin a session until the current session is complete. This error indicates a problem with the state chart.'
+      )
+    }
 
-  setCurrent(session: BaseSession) {
-    this._current = session
+    this.#current = session
     return this
   }
 
+  /**
+   * Update the current session. Include the session type as a generic in order to properly type the arguments.
+   * @param args The arguments of the current session's `update` method.
+   * @example
+   * ```ts
+   * session.update<Sessions.EditSession>(data, payload.change)
+   * ```
+   */
   update<T extends BaseSession>(...args: Parameters<T['update']>) {
-    this._current.update.call(null, ...args)
-    return this
-  }
+    const session = this.#current
 
-  begin(session: BaseSession) {
-    this._current = session
+    if (session === undefined) {
+      throw Error('No current session.')
+    }
+
+    session.update.call(this.#current, ...args)
     return this
   }
 
+  /**
+   * Complete the current session. Include the session type as a generic in order to properly type the arguments.
+   * @param args The arguments of the current session's `complete` method.
+   * @example
+   * ```ts
+   * session.update<Sessions.EditSession>(data, payload.change)
+   * ```
+   */
   complete<T extends BaseSession>(...args: Parameters<T['complete']>) {
-    this._current.complete.call(null, ...args)
+    const session = this.#current
+
+    if (session === undefined) return this
+
+    session.complete.call(this.#current, ...args)
+    this.#current = undefined
     return this
   }
 
+  /**
+   * Cancel the current session.
+   * @param args The arguments of the current session's `cancel` method.
+   * @example
+   * ```ts
+   * session.cancel(data)
+   * ```
+   */
   cancel<T extends BaseSession>(...args: Parameters<T['cancel']>) {
-    this._current.cancel.call(null, ...args)
+    this.#current.cancel.call(this.#current, ...args)
+    this.#current = undefined
     return this
   }
 }

state/sessions/base-session.ts

@@ -1,20 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Data } from 'types'
 
-export default class BaseSession {
+export default abstract class BaseSession {
   constructor(data: Data) {
     null
   }
 
   update(data: Data, ...args: unknown[]): void {
-    // Update the state
+    null
   }
 
   complete(data: Data, ...args: unknown[]): void {
-    // Create a command
+    null
   }
 
   cancel(data: Data): void {
-    // Clean up the change
+    null
   }
 }

state/state.ts

@@ -27,6 +27,7 @@ import {
   setSelectedIds,
   getPageState,
   setToArray,
+  copyToClipboard,
 } from 'utils/utils'
 import {
   Data,
@@ -134,6 +135,7 @@ const state = createState({
         COPIED: { if: 'hasSelection', do: 'copyToClipboard' },
         PASTED: { do: 'pasteFromClipboard' },
         PASTED_SHAPES_FROM_CLIPBOARD: 'pasteShapesFromClipboard',
+        COPIED_STATE_TO_CLIPBOARD: 'copyStateToClipboard',
         LOADED_FONTS: 'resetShapes',
         TOGGLED_SHAPE_LOCK: { if: 'hasSelection', do: 'lockSelection' },
         TOGGLED_SHAPE_HIDE: { if: 'hasSelection', do: 'hideSelection' },
@@ -266,27 +268,6 @@ const state = createState({
                   },
                 },
                 UNHOVERED_SHAPE: 'clearHoveredId',
-                DOUBLE_POINTED_SHAPE: [
-                  'setPointedId',
-                  {
-                    if: 'isPointedShapeSelected',
-                    then: {
-                      get: 'firstSelectedShape',
-                      if: 'canEditSelectedShape',
-                      do: 'setEditingId',
-                      to: 'editingShape',
-                    },
-                  },
-                  {
-                    unless: 'isPressingShiftKey',
-                    do: [
-                      'setDrilledPointedId',
-                      'clearSelectedIds',
-                      'pushPointedIdToSelectedIds',
-                    ],
-                    to: 'pointingBounds',
-                  },
-                ],
                 POINTED_SHAPE: [
                   {
                     if: 'isPressingMetaKey',
@@ -301,7 +282,7 @@ const state = createState({
                     unless: 'isPointedShapeSelected',
                     then: {
                       if: 'isPressingShiftKey',
-                      do: ['pushPointedIdToSelectedIds', 'clearPointedId'],
+                      do: 'pushPointedIdToSelectedIds',
                       else: ['clearSelectedIds', 'pushPointedIdToSelectedIds'],
                     },
                   },
@@ -309,6 +290,27 @@ const state = createState({
                     to: 'pointingBounds',
                   },
                 ],
+                DOUBLE_POINTED_SHAPE: [
+                  'setPointedId',
+                  {
+                    if: 'isPointedShapeSelected',
+                    then: {
+                      get: 'firstSelectedShape',
+                      if: 'canEditSelectedShape',
+                      do: 'setEditingId',
+                      to: 'editingShape',
+                    },
+                  },
+                  {
+                    unless: 'isPressingShiftKey',
+                    do: [
+                      'setDrilledPointedId',
+                      'clearSelectedIds',
+                      'pushPointedIdToSelectedIds',
+                    ],
+                    to: 'pointingBounds',
+                  },
+                ],
                 RIGHT_POINTED: [
                   {
                     if: 'isPointingCanvas',
@@ -986,16 +988,16 @@ const state = createState({
 
     // Shared
     breakSession(data) {
-      session.cancel(data).clear()
+      session.cancel(data)
       history.disable()
       commands.deleteSelected(data)
       history.enable()
     },
     cancelSession(data) {
-      session.cancel(data).clear()
+      session.cancel(data)
     },
     completeSession(data) {
-      session.complete(data).clear()
+      session.complete(data)
     },
 
     // Editing
@@ -1618,7 +1620,7 @@ const state = createState({
       data.settings.isToolLocked = !data.settings.isToolLocked
     },
 
-    /* ---------------------- Data ---------------------- */
+    /* ------------------- Clipboard -------------------- */
 
     copyToSvg(data) {
       clipboard.copySelectionToSvg(data)
@@ -1628,6 +1630,10 @@ const state = createState({
       clipboard.copy(getSelectedShapes(data))
     },
 
+    copyStateToClipboard(data) {
+      copyToClipboard(JSON.stringify(data))
+    },
+
     pasteFromClipboard() {
       clipboard.paste()
     },
@@ -1636,6 +1642,8 @@ const state = createState({
       commands.paste(data, payload.shapes)
     },
 
+    /* ---------------------- Data ---------------------- */
+
     restoreSavedData(data) {
       storage.firstLoad(data)
     },
@@ -1772,9 +1780,7 @@ function getSelectionBounds(data: Data) {
 
   const page = getPage(data)
 
-  const shapes = Array.from(selectedIds.values())
-    .map((id) => page.shapes[id])
-    .filter(Boolean)
+  const shapes = getSelectedShapes(data)
 
   if (selectedIds.size === 0) return null
 

state/storage.ts

@@ -1,4 +1,3 @@
-import * as fa from 'browser-fs-access'
 import { Data, PageState, TLDocument } from 'types'
 import { decompress, compress, setToArray } from 'utils/utils'
 import state from './state'
@@ -12,7 +11,7 @@ function storageId(fileId: string, label: string, id?: string) {
 }
 
 class Storage {
-  previousSaveHandle?: fa.FileSystemHandle
+  previousSaveHandle?: any // FileSystemHandle
 
   constructor() {
     // this.loadPreviousHandle() // Still needs debugging
@@ -207,9 +206,8 @@ class Storage {
   /* ---------------------- Pages --------------------- */
 
   async loadPreviousHandle() {
-    const handle: fa.FileSystemHandle | undefined = await idb.get(
-      'previous_handle'
-    )
+    const handle = await idb.get('previous_handle')
+
     if (handle !== undefined) {
       this.previousSaveHandle = handle
     }
@@ -315,7 +313,11 @@ class Storage {
     this.saveDataToFileSystem(data, uniqueId(), true)
   }
 
-  saveDataToFileSystem = (data: Data, fileId: string, saveAs: boolean) => {
+  saveDataToFileSystem = async (
+    data: Data,
+    fileId: string,
+    saveAs: boolean
+  ) => {
     const document = this.getCompleteDocument(data)
 
     // Then save to file system
@@ -333,6 +335,8 @@ class Storage {
       }
     )
 
+    const fa = await import('browser-fs-access')
+
     fa.fileSave(
       blob,
       {
@@ -357,7 +361,9 @@ class Storage {
       })
   }
 
-  loadDocumentFromFilesystem() {
+  async loadDocumentFromFilesystem() {
+    const fa = await import('browser-fs-access')
+
     fa.fileOpen({
       description: 'tldraw files',
     })

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

yarn.lock

@@ -1954,6 +1954,13 @@
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
+"@testing-library/user-event@^13.1.9":
+  version "13.1.9"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.1.9.tgz#29e49a42659ac3c1023565ff56819e0153a82e99"
+  integrity sha512-NZr0zL2TMOs2qk+dNlqrAdbaRW5dAmYwd1yuQ4r7HpkVEOj0MWuUjDWwKhcLd/atdBy8ZSMHSKp+kXSQe47ezg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -2548,7 +2555,7 @@ axobject-query@^2.2.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-jest@^27.0.2, babel-jest@^27.0.5:
+babel-jest@^27.0.5:
   version "27.0.5"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.0.5.tgz#cd34c033ada05d1362211e5152391fd7a88080c8"
   integrity sha512-bTMAbpCX7ldtfbca2llYLeSFsDM257aspyAOpsdrdSrBqoLkWCy4HPYTXtXWaSLgFPjrJGACL65rzzr4RFGadw==