npm - @tldraw/editor - Versions diffs - 5.4.0-next.ef99ab47e5ce → 5.4.1 - Mend

@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/dist-esm/lib/editor/tools/StateNode.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/tools/StateNode.ts"],
-  "sourcesContent": ["import { Atom, Computed, atom, computed } from '@tldraw/state'\nimport { PerformanceTracker } from '@tldraw/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport type { Editor } from '../Editor'\nimport {\n\tEVENT_NAME_MAP,\n\tTLCancelEventInfo,\n\tTLClickEventInfo,\n\tTLCompleteEventInfo,\n\tTLEventHandlers,\n\tTLEventInfo,\n\tTLInterruptEventInfo,\n\tTLKeyboardEventInfo,\n\tTLPinchEventInfo,\n\tTLPointerEventInfo,\n\tTLTickEventInfo,\n\tTLWheelEventInfo,\n} from '../types/event-types'\n\n/** @public */\nexport interface TLStateNodeConstructor {\n\tnew (editor: Editor, parent?: StateNode): StateNode\n\tid: string\n\tinitial?: string\n\tchildren?(): TLStateNodeConstructor[]\n\tisLockable: boolean\n\tuseCoalescedEvents: boolean\n\ttrackPerformance: boolean\n}\n\n/** @public */\nexport abstract class StateNode implements Partial<TLEventHandlers> {\n\tperformanceTracker: PerformanceTracker\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tparent?: StateNode\n\t) {\n\t\tconst { id, children, initial, isLockable, useCoalescedEvents } = this\n\t\t\t.constructor as TLStateNodeConstructor\n\n\t\tthis.id = id\n\t\tthis._isActive = atom<boolean>('toolIsActive' + this.id, false)\n\t\tthis._current = atom<StateNode | undefined>('toolState' + this.id, undefined)\n\n\t\tthis._path = computed('toolPath' + this.id, () => {\n\t\t\tconst current = this.getCurrent()\n\t\t\treturn this.id + (current ? `.${current.getPath()}` : '')\n\t\t})\n\n\t\tthis.parent = parent ?? ({} as any)\n\n\t\tif (parent) {\n\t\t\tif (children && initial) {\n\t\t\t\tthis.type = 'branch'\n\t\t\t\tthis.initial = initial\n\t\t\t\tthis.children = Object.fromEntries(\n\t\t\t\t\tchildren().map((Ctor) => [Ctor.id, new Ctor(this.editor, this)])\n\t\t\t\t)\n\t\t\t\tthis._current.set(this.children[this.initial])\n\t\t\t} else {\n\t\t\t\tthis.type = 'leaf'\n\t\t\t}\n\t\t} else {\n\t\t\tthis.type = 'root'\n\n\t\t\tif (children && initial) {\n\t\t\t\tthis.initial = initial\n\t\t\t\tthis.children = Object.fromEntries(\n\t\t\t\t\tchildren().map((Ctor) => [Ctor.id, new Ctor(this.editor, this)])\n\t\t\t\t)\n\t\t\t\tthis._current.set(this.children[this.initial])\n\t\t\t}\n\t\t}\n\t\tthis.isLockable = isLockable\n\t\tthis.useCoalescedEvents = useCoalescedEvents\n\t\tthis.performanceTracker = new PerformanceTracker()\n\t}\n\n\tstatic id: string\n\tstatic initial?: string\n\tstatic children?: () => TLStateNodeConstructor[]\n\tstatic isLockable = true\n\tstatic useCoalescedEvents = false\n\t/** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */\n\tstatic trackPerformance = false\n\n\tid: string\n\ttype: 'branch' | 'leaf' | 'root'\n\tshapeType?: string\n\tinitial?: string\n\tchildren?: Record<string, StateNode>\n\tisLockable: boolean\n\tuseCoalescedEvents: boolean\n\tparent: StateNode\n\n\t/**\n\t * This node's path of active state nodes\n\t *\n\t * @public\n\t */\n\tgetPath() {\n\t\treturn this._path.get()\n\t}\n\t_path: Computed<string>\n\n\t/**\n\t * This node's current active child node, if any.\n\t *\n\t * @public\n\t */\n\tgetCurrent() {\n\t\treturn this._current.get()\n\t}\n\tprivate _current: Atom<StateNode | undefined>\n\n\t/**\n\t * Whether this node is active.\n\t *\n\t * @public\n\t */\n\tgetIsActive() {\n\t\treturn this._isActive.get()\n\t}\n\tprivate _isActive: Atom<boolean>\n\n\t/**\n\t * Transition to a new active child state node.\n\t *\n\t * @example\n\t * ```ts\n\t * parentState.transition('childStateA')\n\t * parentState.transition('childStateB', { myData: 4 })\n\t *```\n\t *\n\t * @param id - The id of the child state node to transition to.\n\t * @param info - Any data to pass to the `onEnter` and `onExit` handlers.\n\t *\n\t * @public\n\t */\n\ttransition(id: string, info: any = {}) {\n\t\tconst path = id.split('.')\n\n\t\tlet currState = this as StateNode\n\n\t\tfor (let i = 0; i < path.length; i++) {\n\t\t\tconst id = path[i]\n\t\t\tconst prevChildState = currState.getCurrent()\n\t\t\tconst nextChildState = currState.children?.[id]\n\n\t\t\tif (!nextChildState) {\n\t\t\t\tthrow Error(`${currState.id} - no child state exists with the id ${id}.`)\n\t\t\t}\n\n\t\t\tif (prevChildState?.id !== nextChildState.id) {\n\t\t\t\tprevChildState?.exit(info, id)\n\t\t\t\tcurrState._current.set(nextChildState)\n\t\t\t\tnextChildState.enter(info, prevChildState?.id || 'initial')\n\t\t\t\tif (!nextChildState.getIsActive()) break\n\t\t\t}\n\n\t\t\tcurrState = nextChildState\n\t\t}\n\n\t\treturn this\n\t}\n\n\thandleEvent(info: Exclude<TLEventInfo, TLPinchEventInfo>) {\n\t\tconst cbName = EVENT_NAME_MAP[info.name]\n\t\tconst currentActiveChild = this._current.__unsafe__getWithoutCapture()\n\n\t\tthis[cbName]?.(info as any)\n\t\tif (\n\t\t\tthis._isActive.__unsafe__getWithoutCapture() &&\n\t\t\tcurrentActiveChild &&\n\t\t\tcurrentActiveChild === this._current.__unsafe__getWithoutCapture()\n\t\t) {\n\t\t\tcurrentActiveChild.handleEvent(info)\n\t\t}\n\t}\n\n\t// todo: move this logic into transition\n\tenter(info: any, from: string) {\n\t\tconst track = (this.constructor as TLStateNodeConstructor).trackPerformance\n\t\tif (track) {\n\t\t\tif (debugFlags.measurePerformance.get()) {\n\t\t\t\tthis.performanceTracker.start(this.id)\n\t\t\t}\n\t\t\tthis.editor.performance._notifyInteractionStart(this.id, this.getPath())\n\t\t}\n\n\t\tthis._isActive.set(true)\n\t\tthis.onEnter?.(info, from)\n\n\t\tif (this.children && this.initial && this.getIsActive()) {\n\t\t\tconst initial = this.children[this.initial]\n\t\t\tthis._current.set(initial)\n\t\t\tinitial.enter(info, from)\n\t\t}\n\t}\n\n\t// todo: move this logic into transition\n\texit(info: any, to: string) {\n\t\tconst track = (this.constructor as TLStateNodeConstructor).trackPerformance\n\t\tif (track) {\n\t\t\tif (debugFlags.measurePerformance.get() && this.performanceTracker.isStarted()) {\n\t\t\t\tthis.performanceTracker.stop()\n\t\t\t}\n\t\t\tthis.editor.performance._notifyInteractionEnd()\n\t\t}\n\n\t\tthis._isActive.set(false)\n\t\tthis.onExit?.(info, to)\n\n\t\tif (!this.getIsActive()) {\n\t\t\tthis.getCurrent()?.exit(info, to)\n\t\t}\n\t}\n\n\t/**\n\t * This is a hack / escape hatch that will tell the editor to\n\t * report a different state as active (in `getCurrentToolId()`) when\n\t * this state is active. This is usually used when a tool transitions\n\t * to a child of a different state for a certain interaction and then\n\t * returns to the original tool when that interaction completes; and\n\t * where we would want to show the original tool as active in the UI.\n\t *\n\t * @public\n\t */\n\t_currentToolIdMask = atom('curent tool id mask', undefined as string | undefined)\n\n\tgetCurrentToolIdMask() {\n\t\treturn this._currentToolIdMask.get()\n\t}\n\n\tsetCurrentToolIdMask(id: string | undefined) {\n\t\tthis._currentToolIdMask.set(id)\n\t}\n\n\t/**\n\t * Add a child node to this state node.\n\t *\n\t * @public\n\t */\n\taddChild(childConstructor: TLStateNodeConstructor): this {\n\t\tif (this.type === 'leaf') {\n\t\t\tthrow new Error('StateNode.addChild: cannot add child to a leaf node')\n\t\t}\n\n\t\t// Initialize children if it's undefined (for root nodes without static children)\n\t\tif (!this.children) {\n\t\t\tthis.children = {}\n\t\t}\n\n\t\tconst child = new childConstructor(this.editor, this)\n\n\t\t// Check if a child with this ID already exists\n\t\tif (this.children[child.id]) {\n\t\t\tthrow new Error(`StateNode.addChild: a child with id '${child.id}' already exists`)\n\t\t}\n\n\t\tthis.children[child.id] = child\n\t\treturn this\n\t}\n\n\tonWheel?(info: TLWheelEventInfo): void\n\tonPointerDown?(info: TLPointerEventInfo): void\n\tonPointerMove?(info: TLPointerEventInfo): void\n\tonLongPress?(info: TLPointerEventInfo): void\n\tonPointerUp?(info: TLPointerEventInfo): void\n\tonDoubleClick?(info: TLClickEventInfo): void\n\tonRightClick?(info: TLPointerEventInfo): void\n\tonMiddleClick?(info: TLPointerEventInfo): void\n\tonKeyDown?(info: TLKeyboardEventInfo): void\n\tonKeyUp?(info: TLKeyboardEventInfo): void\n\tonKeyRepeat?(info: TLKeyboardEventInfo): void\n\tonCancel?(info: TLCancelEventInfo): void\n\tonComplete?(info: TLCompleteEventInfo): void\n\tonInterrupt?(info: TLInterruptEventInfo): void\n\tonTick?(info: TLTickEventInfo): void\n\n\tonEnter?(info: any, from: string): void\n\tonExit?(info: any, to: string): void\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Atom, Computed, atom, computed } from '@tldraw/state'\nimport { PerformanceTracker } from '@tldraw/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport type { Editor } from '../Editor'\nimport {\n\tEVENT_NAME_MAP,\n\tTLCancelEventInfo,\n\tTLClickEventInfo,\n\tTLCompleteEventInfo,\n\tTLEventHandlers,\n\tTLEventInfo,\n\tTLInterruptEventInfo,\n\tTLKeyboardEventInfo,\n\tTLPinchEventInfo,\n\tTLPointerEventInfo,\n\tTLTickEventInfo,\n\tTLWheelEventInfo,\n} from '../types/event-types'\n\n/** @public */\nexport interface TLStateNodeConstructor {\n\tnew (editor: Editor, parent?: StateNode): StateNode\n\tid: string\n\tinitial?: string\n\tchildren?(): TLStateNodeConstructor[]\n\tisLockable: boolean\n\tuseCoalescedEvents: boolean\n\ttrackPerformance: boolean\n}\n\n/** @public */\nexport abstract class StateNode implements Partial<TLEventHandlers> {\n\tperformanceTracker: PerformanceTracker\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tparent?: StateNode\n\t) {\n\t\tconst { id, children, initial, isLockable, useCoalescedEvents } = this\n\t\t\t.constructor as TLStateNodeConstructor\n\n\t\tthis.id = id\n\t\tthis._isActive = atom<boolean>('toolIsActive' + this.id, false)\n\t\tthis._current = atom<StateNode | undefined>('toolState' + this.id, undefined)\n\n\t\tthis._path = computed('toolPath' + this.id, () => {\n\t\t\tconst current = this.getCurrent()\n\t\t\treturn this.id + (current ? `.${current.getPath()}` : '')\n\t\t})\n\n\t\tthis.parent = parent ?? ({} as any)\n\n\t\tif (parent) {\n\t\t\tif (children && initial) {\n\t\t\t\tthis.type = 'branch'\n\t\t\t\tthis.initial = initial\n\t\t\t\tthis.children = Object.fromEntries(\n\t\t\t\t\tchildren().map((Ctor) => [Ctor.id, new Ctor(this.editor, this)])\n\t\t\t\t)\n\t\t\t\tthis._current.set(this.children[this.initial])\n\t\t\t} else {\n\t\t\t\tthis.type = 'leaf'\n\t\t\t}\n\t\t} else {\n\t\t\tthis.type = 'root'\n\n\t\t\tif (children && initial) {\n\t\t\t\tthis.initial = initial\n\t\t\t\tthis.children = Object.fromEntries(\n\t\t\t\t\tchildren().map((Ctor) => [Ctor.id, new Ctor(this.editor, this)])\n\t\t\t\t)\n\t\t\t\tthis._current.set(this.children[this.initial])\n\t\t\t}\n\t\t}\n\t\tthis.isLockable = isLockable\n\t\tthis.useCoalescedEvents = useCoalescedEvents\n\t\tthis.performanceTracker = new PerformanceTracker()\n\t}\n\n\tstatic id: string\n\tstatic initial?: string\n\tstatic children?: () => TLStateNodeConstructor[]\n\tstatic isLockable = true\n\tstatic useCoalescedEvents = false\n\t/** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */\n\tstatic trackPerformance = false\n\n\tid: string\n\ttype: 'branch' | 'leaf' | 'root'\n\tshapeType?: string\n\tinitial?: string\n\tchildren?: Record<string, StateNode>\n\tisLockable: boolean\n\tuseCoalescedEvents: boolean\n\tparent: StateNode\n\n\t/**\n\t * This node's path of active state nodes\n\t *\n\t * @public\n\t */\n\tgetPath() {\n\t\treturn this._path.get()\n\t}\n\t_path: Computed<string>\n\n\t/**\n\t * This node's current active child node, if any.\n\t *\n\t * @public\n\t */\n\tgetCurrent() {\n\t\treturn this._current.get()\n\t}\n\tprivate _current: Atom<StateNode | undefined>\n\n\t/**\n\t * Whether this node is active.\n\t *\n\t * @public\n\t */\n\tgetIsActive() {\n\t\treturn this._isActive.get()\n\t}\n\tprivate _isActive: Atom<boolean>\n\n\t/**\n\t * Transition to a new active child state node.\n\t *\n\t * @example\n\t * ```ts\n\t * parentState.transition('childStateA')\n\t * parentState.transition('childStateB', { myData: 4 })\n\t *```\n\t *\n\t * @param id - The id of the child state node to transition to.\n\t * @param info - Any data to pass to the `onEnter` and `onExit` handlers.\n\t *\n\t * @public\n\t */\n\ttransition(id: string, info: any = {}) {\n\t\tconst path = id.split('.')\n\n\t\tlet currState = this as StateNode\n\n\t\tfor (let i = 0; i < path.length; i++) {\n\t\t\tconst id = path[i]\n\t\t\tconst prevChildState = currState.getCurrent()\n\t\t\tconst nextChildState = currState.children?.[id]\n\n\t\t\tif (!nextChildState) {\n\t\t\t\tthrow Error(`${currState.id} - no child state exists with the id ${id}.`)\n\t\t\t}\n\n\t\t\tif (prevChildState?.id !== nextChildState.id) {\n\t\t\t\t// The previous child is inactive when transitioning from a parent's onEnter (or from a\n\t\t\t\t// node that was already exited); exiting it again would fire a spurious onExit\n\t\t\t\tif (prevChildState?.getIsActive()) prevChildState.exit(info, id)\n\t\t\t\tcurrState._current.set(nextChildState)\n\t\t\t\tnextChildState.enter(info, prevChildState?.id || 'initial')\n\t\t\t\tif (!nextChildState.getIsActive()) break\n\t\t\t}\n\n\t\t\tcurrState = nextChildState\n\t\t}\n\n\t\treturn this\n\t}\n\n\thandleEvent(info: Exclude<TLEventInfo, TLPinchEventInfo>) {\n\t\tconst cbName = EVENT_NAME_MAP[info.name]\n\t\tconst currentActiveChild = this._current.__unsafe__getWithoutCapture()\n\n\t\tthis[cbName]?.(info as any)\n\t\tif (\n\t\t\tthis._isActive.__unsafe__getWithoutCapture() &&\n\t\t\tcurrentActiveChild &&\n\t\t\tcurrentActiveChild === this._current.__unsafe__getWithoutCapture()\n\t\t) {\n\t\t\tcurrentActiveChild.handleEvent(info)\n\t\t}\n\t}\n\n\t// todo: move this logic into transition\n\tenter(info: any, from: string) {\n\t\tconst track = (this.constructor as TLStateNodeConstructor).trackPerformance\n\t\tif (track) {\n\t\t\tif (debugFlags.measurePerformance.get()) {\n\t\t\t\tthis.performanceTracker.start(this.id)\n\t\t\t}\n\t\t\tthis.editor.performance._notifyInteractionStart(this.id, this.getPath())\n\t\t}\n\n\t\tconst currentBeforeEnter = this.getCurrent()\n\t\tthis._isActive.set(true)\n\t\tthis.onEnter?.(info, from)\n\n\t\t// If onEnter already transitioned to a child, entering the initial child on top of it would\n\t\t// leave that child active but orphaned\n\t\tif (\n\t\t\tthis.children &&\n\t\t\tthis.initial &&\n\t\t\tthis.getIsActive() &&\n\t\t\tthis.getCurrent() === currentBeforeEnter\n\t\t) {\n\t\t\tconst initial = this.children[this.initial]\n\t\t\tthis._current.set(initial)\n\t\t\tinitial.enter(info, from)\n\t\t}\n\t}\n\n\t// todo: move this logic into transition\n\texit(info: any, to: string) {\n\t\tconst track = (this.constructor as TLStateNodeConstructor).trackPerformance\n\t\tif (track) {\n\t\t\tif (debugFlags.measurePerformance.get() && this.performanceTracker.isStarted()) {\n\t\t\t\tthis.performanceTracker.stop()\n\t\t\t}\n\t\t\tthis.editor.performance._notifyInteractionEnd()\n\t\t}\n\n\t\tthis._isActive.set(false)\n\t\tthis.onExit?.(info, to)\n\n\t\tif (!this.getIsActive()) {\n\t\t\tthis.getCurrent()?.exit(info, to)\n\t\t}\n\t}\n\n\t/**\n\t * This is a hack / escape hatch that will tell the editor to\n\t * report a different state as active (in `getCurrentToolId()`) when\n\t * this state is active. This is usually used when a tool transitions\n\t * to a child of a different state for a certain interaction and then\n\t * returns to the original tool when that interaction completes; and\n\t * where we would want to show the original tool as active in the UI.\n\t *\n\t * @public\n\t */\n\t_currentToolIdMask = atom('curent tool id mask', undefined as string | undefined)\n\n\tgetCurrentToolIdMask() {\n\t\treturn this._currentToolIdMask.get()\n\t}\n\n\tsetCurrentToolIdMask(id: string | undefined) {\n\t\tthis._currentToolIdMask.set(id)\n\t}\n\n\t/**\n\t * Add a child node to this state node.\n\t *\n\t * @public\n\t */\n\taddChild(childConstructor: TLStateNodeConstructor): this {\n\t\tif (this.type === 'leaf') {\n\t\t\tthrow new Error('StateNode.addChild: cannot add child to a leaf node')\n\t\t}\n\n\t\t// Initialize children if it's undefined (for root nodes without static children)\n\t\tif (!this.children) {\n\t\t\tthis.children = {}\n\t\t}\n\n\t\tconst child = new childConstructor(this.editor, this)\n\n\t\t// Check if a child with this ID already exists\n\t\tif (this.children[child.id]) {\n\t\t\tthrow new Error(`StateNode.addChild: a child with id '${child.id}' already exists`)\n\t\t}\n\n\t\tthis.children[child.id] = child\n\t\treturn this\n\t}\n\n\tonWheel?(info: TLWheelEventInfo): void\n\tonPointerDown?(info: TLPointerEventInfo): void\n\tonPointerMove?(info: TLPointerEventInfo): void\n\tonLongPress?(info: TLPointerEventInfo): void\n\tonPointerUp?(info: TLPointerEventInfo): void\n\tonDoubleClick?(info: TLClickEventInfo): void\n\tonRightClick?(info: TLPointerEventInfo): void\n\tonMiddleClick?(info: TLPointerEventInfo): void\n\tonKeyDown?(info: TLKeyboardEventInfo): void\n\tonKeyUp?(info: TLKeyboardEventInfo): void\n\tonKeyRepeat?(info: TLKeyboardEventInfo): void\n\tonCancel?(info: TLCancelEventInfo): void\n\tonComplete?(info: TLCompleteEventInfo): void\n\tonInterrupt?(info: TLInterruptEventInfo): void\n\tonTick?(info: TLTickEventInfo): void\n\n\tonEnter?(info: any, from: string): void\n\tonExit?(info: any, to: string): void\n}\n"],
+  "mappings": "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",
   "names": ["id"]
 }

package/dist-esm/lib/globals/editors.mjs ADDED Viewed

@@ -0,0 +1,37 @@
+import { atom } from "@tldraw/state";
+const mounted = atom("mounted editors", []);
+const tleditors = {
+  /**
+   * A reactive list of currently mounted editor instances.
+   *
+   * An editor is added when it emits the `mount` event and removed when it emits `unmount`
+   * (including when the editor is disposed while still mounted).
+   *
+   * @public
+   */
+  mounted,
+  /**
+   * Get the currently mounted editor instances.
+   *
+   * @public
+   */
+  getMounted() {
+    return mounted.get();
+  }
+};
+function registerMountedEditor(editor) {
+  const current = mounted.get();
+  if (current.includes(editor)) return;
+  mounted.set([...current, editor]);
+}
+function unregisterMountedEditor(editor) {
+  const current = mounted.get();
+  if (!current.includes(editor)) return;
+  mounted.set(current.filter((e) => e !== editor));
+}
+export {
+  registerMountedEditor,
+  tleditors,
+  unregisterMountedEditor
+};
+//# sourceMappingURL=editors.mjs.map

package/dist-esm/lib/globals/editors.mjs.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/globals/editors.ts"],
+  "sourcesContent": ["import { Signal, atom } from '@tldraw/state'\nimport type { Editor } from '../editor/Editor'\n\nconst mounted = atom<readonly Editor[]>('mounted editors', [])\n\n/**\n * A global registry of currently mounted editor instances. Use it to discover live editors from\n * outside the React tree, for example from sidebar chrome, keyboard shortcuts, or multi-editor\n * layouts.\n *\n * @example\n * ```ts\n * tleditors.getMounted() // readonly Editor[]\n *\n * const editors = useValue('mounted editors', () => tleditors.getMounted(), [])\n * ```\n *\n * @public\n */\nexport const tleditors = {\n\t/**\n\t * A reactive list of currently mounted editor instances.\n\t *\n\t * An editor is added when it emits the `mount` event and removed when it emits `unmount`\n\t * (including when the editor is disposed while still mounted).\n\t *\n\t * @public\n\t */\n\tmounted: mounted as Signal<readonly Editor[]>,\n\n\t/**\n\t * Get the currently mounted editor instances.\n\t *\n\t * @public\n\t */\n\tgetMounted(): readonly Editor[] {\n\t\treturn mounted.get()\n\t},\n}\n\n/** @internal */\nexport function registerMountedEditor(editor: Editor) {\n\tconst current = mounted.get()\n\tif (current.includes(editor)) return\n\tmounted.set([...current, editor])\n}\n\n/** @internal */\nexport function unregisterMountedEditor(editor: Editor) {\n\tconst current = mounted.get()\n\tif (!current.includes(editor)) return\n\tmounted.set(current.filter((e) => e !== editor))\n}\n"],
+  "mappings": "AAAA,SAAiB,YAAY;AAG7B,MAAM,UAAU,KAAwB,mBAAmB,CAAC,CAAC;AAgBtD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAgC;AAC/B,WAAO,QAAQ,IAAI;AAAA,EACpB;AACD;AAGO,SAAS,sBAAsB,QAAgB;AACrD,QAAM,UAAU,QAAQ,IAAI;AAC5B,MAAI,QAAQ,SAAS,MAAM,EAAG;AAC9B,UAAQ,IAAI,CAAC,GAAG,SAAS,MAAM,CAAC;AACjC;AAGO,SAAS,wBAAwB,QAAgB;AACvD,QAAM,UAAU,QAAQ,IAAI;AAC5B,MAAI,CAAC,QAAQ,SAAS,MAAM,EAAG;AAC/B,UAAQ,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,MAAM,CAAC;AAChD;",
+  "names": []
+}

package/dist-esm/lib/globals/menus.mjs CHANGED Viewed

@@ -101,7 +101,7 @@ const tlmenus = {
     this._hiddenMenus = [...this.getOpenMenus(contextId)];
     if (this._hiddenMenus.length === 0) return;
     for (const menu of this._hiddenMenus) {
-      this.deleteOpenMenu(menu, contextId);
+      this.deleteOpenMenu(menu);
     }
   },
   /**
@@ -119,10 +119,15 @@ const tlmenus = {
    */
   showOpenMenus(contextId) {
     if (this._hiddenMenus.length === 0) return;
+    const stillHidden = [];
     for (const menu of this._hiddenMenus) {
-      this.addOpenMenu(menu, contextId);
+      if (!contextId || menu.endsWith("-" + contextId)) {
+        this.addOpenMenu(menu);
+      } else {
+        stillHidden.push(menu);
+      }
     }
-    this._hiddenMenus = [];
+    this._hiddenMenus = stillHidden;
   },
   /**
    * Get whether a menu is open for a given context.
@@ -138,7 +143,7 @@ const tlmenus = {
    * @public
    */
   isMenuOpen(id, contextId) {
-    return this.getOpenMenus(contextId).includes(`${id}-${contextId}`);
+    return this.getOpenMenus(contextId).includes(contextId ? `${id}-${contextId}` : id);
   },
   /**
    * Get whether any menus are open for a given context.

package/dist-esm/lib/globals/menus.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/globals/menus.ts"],
-  "sourcesContent": ["import { atom } from '@tldraw/state'\n\n/** @public */\nexport const tlmenus = {\n\t/**\n\t * A set of strings representing any open menus. When menus are open,\n\t * certain interactions will behave differently; for example, when a\n\t * draw tool is selected and a menu is open, a pointer-down will not\n\t * create a dot (because the user is probably trying to close the menu)\n\t * however a pointer-down event followed by a drag will begin drawing\n\t * a line (because the user is BOTH trying to close the menu AND start\n\t * drawing a line).\n\t *\n\t * @public\n\t */\n\tmenus: atom<string[]>('open menus', []),\n\n\t/**\n\t * Get the current open menus.\n\t *\n\t * @param contextId - An optional context to get menus for.\n\t *\n\t * @public\n\t */\n\tgetOpenMenus(contextId?: string) {\n\t\tif (contextId) return this.menus.get().filter((m) => m.endsWith('-' + contextId))\n\t\treturn this.menus.get()\n\t},\n\n\t/**\n\t * Add an open menu.\n\t *\n\t * @example\n\t * ```ts\n\t * addOpenMenu('menu-id')\n\t * addOpenMenu('menu-id', myEditorId)\n\t * ```\n\t *\n\t * @param id - The id of the menu to add.\n\t * @param contextId - An optional context to add the menu to.\n\t *\n\t * @public\n\t */\n\taddOpenMenu(id: string, contextId = '') {\n\t\tconst idWithContext = contextId ? `${id}-${contextId}` : id\n\t\tconst menus = new Set(this.menus.get())\n\t\tif (!menus.has(idWithContext)) {\n\t\t\tmenus.add(idWithContext)\n\t\t\tthis.menus.set([...menus])\n\t\t}\n\t},\n\n\t/**\n\t * Delete an open menu.\n\t *\n\t * @example\n\t * ```ts\n\t * deleteOpenMenu('menu-id')\n\t * deleteOpenMenu('menu-id', myEditorId)\n\t * ```\n\t *\n\t * @param id - The id of the menu to delete.\n\t * @param contextId - An optional context to delete the menu from.\n\t *\n\t * @public\n\t */\n\tdeleteOpenMenu(id: string, contextId = '') {\n\t\tconst idWithContext = contextId ? `${id}-${contextId}` : id\n\t\tconst menus = new Set(this.menus.get())\n\t\tif (menus.has(idWithContext)) {\n\t\t\tmenus.delete(idWithContext)\n\t\t\tthis.menus.set([...menus])\n\t\t}\n\t},\n\n\t/**\n\t * Clear all open menus.\n\t *\n\t * @example\n\t * ```ts\n\t * clearOpenMenus()\n\t * clearOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - An optional context to clear menus for.\n\t *\n\t * @public\n\t */\n\tclearOpenMenus(contextId?: string) {\n\t\tthis.menus.set(contextId ? this.menus.get().filter((m) => !m.endsWith('-' + contextId)) : [])\n\t},\n\n\t_hiddenMenus: [] as string[],\n\n\t/**\n\t * Hide all open menus. Restore them with the `showOpenMenus` method.\n\t *\n\t * @example\n\t * ```ts\n\t * hideOpenMenus()\n\t * hideOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - An optional context to hide menus for.\n\t *\n\t * @public\n\t */\n\thideOpenMenus(contextId?: string) {\n\t\tthis._hiddenMenus = [...this.getOpenMenus(contextId)]\n\t\tif (this._hiddenMenus.length === 0) return\n\t\tfor (const menu of this._hiddenMenus) {\n\t\t\tthis.deleteOpenMenu(menu, contextId)\n\t\t}\n\t},\n\n\t/**\n\t * Show all hidden menus.\n\t *\n\t * @example\n\t * ```ts\n\t * showOpenMenus()\n\t * showOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - An optional context to show menus for.\n\t *\n\t * @public\n\t */\n\tshowOpenMenus(contextId?: string) {\n\t\tif (this._hiddenMenus.length === 0) return\n\t\tfor (const menu of this._hiddenMenus) {\n\t\t\tthis.addOpenMenu(menu, contextId)\n\t\t}\n\t\tthis._hiddenMenus = []\n\t},\n\n\t/**\n\t * Get whether a menu is open for a given context.\n\t *\n\t * @example\n\t * ```ts\n\t * isMenuOpem(id, myEditorId)\n\t * ```\n\t *\n\t * @param id - The id of the menu to check.\n\t * @param contextId - An optional context to check menus for.\n\t *\n\t * @public\n\t */\n\tisMenuOpen(id: string, contextId?: string): boolean {\n\t\treturn this.getOpenMenus(contextId).includes(`${id}-${contextId}`)\n\t},\n\n\t/**\n\t * Get whether any menus are open for a given context.\n\t *\n\t * @example\n\t * ```ts\n\t * hasOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - A context to check menus for.\n\t *\n\t * @public\n\t */\n\thasOpenMenus(contextId: string): boolean {\n\t\treturn this.getOpenMenus(contextId).length > 0\n\t},\n\n\t/**\n\t * Get whether any menus are open for any context.\n\t *\n\t * @example\n\t * ```ts\n\t * hasAnyOpenMenus()\n\t * ```\n\t *\n\t * @public\n\t */\n\thasAnyOpenMenus(): boolean {\n\t\treturn this.getOpenMenus().length > 0\n\t},\n\n\tforContext(contextId: string) {\n\t\treturn {\n\t\t\tgetOpenMenus: () => this.getOpenMenus(contextId),\n\t\t\taddOpenMenu: (id: string) => this.addOpenMenu(id, contextId),\n\t\t\tdeleteOpenMenu: (id: string) => this.deleteOpenMenu(id, contextId),\n\t\t\tclearOpenMenus: () => this.clearOpenMenus(contextId),\n\t\t\t// Gets whether any menus are open\n\t\t\tisMenuOpen: (id: string) => this.isMenuOpen(id, contextId),\n\t\t\thasOpenMenus: () => this.hasOpenMenus(contextId),\n\t\t\thasAnyOpenMenus: () => this.hasAnyOpenMenus(),\n\t\t}\n\t},\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { atom } from '@tldraw/state'\n\n/** @public */\nexport const tlmenus = {\n\t/**\n\t * A set of strings representing any open menus. When menus are open,\n\t * certain interactions will behave differently; for example, when a\n\t * draw tool is selected and a menu is open, a pointer-down will not\n\t * create a dot (because the user is probably trying to close the menu)\n\t * however a pointer-down event followed by a drag will begin drawing\n\t * a line (because the user is BOTH trying to close the menu AND start\n\t * drawing a line).\n\t *\n\t * @public\n\t */\n\tmenus: atom<string[]>('open menus', []),\n\n\t/**\n\t * Get the current open menus.\n\t *\n\t * @param contextId - An optional context to get menus for.\n\t *\n\t * @public\n\t */\n\tgetOpenMenus(contextId?: string) {\n\t\tif (contextId) return this.menus.get().filter((m) => m.endsWith('-' + contextId))\n\t\treturn this.menus.get()\n\t},\n\n\t/**\n\t * Add an open menu.\n\t *\n\t * @example\n\t * ```ts\n\t * addOpenMenu('menu-id')\n\t * addOpenMenu('menu-id', myEditorId)\n\t * ```\n\t *\n\t * @param id - The id of the menu to add.\n\t * @param contextId - An optional context to add the menu to.\n\t *\n\t * @public\n\t */\n\taddOpenMenu(id: string, contextId = '') {\n\t\tconst idWithContext = contextId ? `${id}-${contextId}` : id\n\t\tconst menus = new Set(this.menus.get())\n\t\tif (!menus.has(idWithContext)) {\n\t\t\tmenus.add(idWithContext)\n\t\t\tthis.menus.set([...menus])\n\t\t}\n\t},\n\n\t/**\n\t * Delete an open menu.\n\t *\n\t * @example\n\t * ```ts\n\t * deleteOpenMenu('menu-id')\n\t * deleteOpenMenu('menu-id', myEditorId)\n\t * ```\n\t *\n\t * @param id - The id of the menu to delete.\n\t * @param contextId - An optional context to delete the menu from.\n\t *\n\t * @public\n\t */\n\tdeleteOpenMenu(id: string, contextId = '') {\n\t\tconst idWithContext = contextId ? `${id}-${contextId}` : id\n\t\tconst menus = new Set(this.menus.get())\n\t\tif (menus.has(idWithContext)) {\n\t\t\tmenus.delete(idWithContext)\n\t\t\tthis.menus.set([...menus])\n\t\t}\n\t},\n\n\t/**\n\t * Clear all open menus.\n\t *\n\t * @example\n\t * ```ts\n\t * clearOpenMenus()\n\t * clearOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - An optional context to clear menus for.\n\t *\n\t * @public\n\t */\n\tclearOpenMenus(contextId?: string) {\n\t\tthis.menus.set(contextId ? this.menus.get().filter((m) => !m.endsWith('-' + contextId)) : [])\n\t},\n\n\t_hiddenMenus: [] as string[],\n\n\t/**\n\t * Hide all open menus. Restore them with the `showOpenMenus` method.\n\t *\n\t * @example\n\t * ```ts\n\t * hideOpenMenus()\n\t * hideOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - An optional context to hide menus for.\n\t *\n\t * @public\n\t */\n\thideOpenMenus(contextId?: string) {\n\t\t// ids read back from the store already carry their context suffix, so they are deleted\n\t\t// (and later re-added) as-is rather than suffixed again\n\t\tthis._hiddenMenus = [...this.getOpenMenus(contextId)]\n\t\tif (this._hiddenMenus.length === 0) return\n\t\tfor (const menu of this._hiddenMenus) {\n\t\t\tthis.deleteOpenMenu(menu)\n\t\t}\n\t},\n\n\t/**\n\t * Show all hidden menus.\n\t *\n\t * @example\n\t * ```ts\n\t * showOpenMenus()\n\t * showOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - An optional context to show menus for.\n\t *\n\t * @public\n\t */\n\tshowOpenMenus(contextId?: string) {\n\t\tif (this._hiddenMenus.length === 0) return\n\t\tconst stillHidden: string[] = []\n\t\tfor (const menu of this._hiddenMenus) {\n\t\t\tif (!contextId || menu.endsWith('-' + contextId)) {\n\t\t\t\tthis.addOpenMenu(menu)\n\t\t\t} else {\n\t\t\t\tstillHidden.push(menu)\n\t\t\t}\n\t\t}\n\t\tthis._hiddenMenus = stillHidden\n\t},\n\n\t/**\n\t * Get whether a menu is open for a given context.\n\t *\n\t * @example\n\t * ```ts\n\t * isMenuOpem(id, myEditorId)\n\t * ```\n\t *\n\t * @param id - The id of the menu to check.\n\t * @param contextId - An optional context to check menus for.\n\t *\n\t * @public\n\t */\n\tisMenuOpen(id: string, contextId?: string): boolean {\n\t\treturn this.getOpenMenus(contextId).includes(contextId ? `${id}-${contextId}` : id)\n\t},\n\n\t/**\n\t * Get whether any menus are open for a given context.\n\t *\n\t * @example\n\t * ```ts\n\t * hasOpenMenus(myEditorId)\n\t * ```\n\t *\n\t * @param contextId - A context to check menus for.\n\t *\n\t * @public\n\t */\n\thasOpenMenus(contextId: string): boolean {\n\t\treturn this.getOpenMenus(contextId).length > 0\n\t},\n\n\t/**\n\t * Get whether any menus are open for any context.\n\t *\n\t * @example\n\t * ```ts\n\t * hasAnyOpenMenus()\n\t * ```\n\t *\n\t * @public\n\t */\n\thasAnyOpenMenus(): boolean {\n\t\treturn this.getOpenMenus().length > 0\n\t},\n\n\tforContext(contextId: string) {\n\t\treturn {\n\t\t\tgetOpenMenus: () => this.getOpenMenus(contextId),\n\t\t\taddOpenMenu: (id: string) => this.addOpenMenu(id, contextId),\n\t\t\tdeleteOpenMenu: (id: string) => this.deleteOpenMenu(id, contextId),\n\t\t\tclearOpenMenus: () => this.clearOpenMenus(contextId),\n\t\t\t// Gets whether any menus are open\n\t\t\tisMenuOpen: (id: string) => this.isMenuOpen(id, contextId),\n\t\t\thasOpenMenus: () => this.hasOpenMenus(contextId),\n\t\t\thasAnyOpenMenus: () => this.hasAnyOpenMenus(),\n\t\t}\n\t},\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/hooks/useCanvasEvents.mjs CHANGED Viewed

@@ -119,6 +119,7 @@ function useCanvasEvents() {
         }
         if (e.dataTransfer?.files?.length) {
           const files = Array.from(e.dataTransfer.files);
+          editor.markHistoryStoppingPoint("drop");
           await editor.putExternalContent({
             type: "files",
             files,
@@ -128,6 +129,7 @@ function useCanvasEvents() {
         }
         const url = e.dataTransfer.getData("url");
         if (url) {
+          editor.markHistoryStoppingPoint("drop");
           await editor.putExternalContent({
             type: "url",
             url,

package/dist-esm/lib/hooks/useCanvasEvents.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useCanvasEvents.ts"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport React, { useEffect, useMemo } from 'react'\nimport { tlenv } from '../globals/environment'\nimport {\n\telementShouldCaptureKeys,\n\tpreventDefault,\n\treleasePointerCapture,\n\tsetPointerCapture,\n} from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { getPointerEventButton, isDirectDisplayPen, isSecondaryClickEvent } from '../utils/pointer'\nimport { useEditor } from './useEditor'\n\nexport function useCanvasEvents() {\n\tconst editor = useEditor()\n\tconst ownerDocument = editor.getContainerDocument()\n\tconst currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])\n\n\tconst events = useMemo(\n\t\tfunction canvasEvents() {\n\t\t\tlet isSecondaryClickPointerDown = false\n\n\t\t\tfunction onPointerDown(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tconst button = getPointerEventButton(e)\n\t\t\t\tisSecondaryClickPointerDown = button === 2\n\n\t\t\t\t// With right-click panning disabled, fire right_click on press and let the\n\t\t\t\t// native contextmenu through so the menu opens at the pointer-down location.\n\t\t\t\tif (button === 2 && !editor.options.rightClickPanning) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (button !== 0 && button !== 1 && button !== 2 && button !== 5) return\n\n\t\t\t\t// Detect direct-display pen input (Apple Pencil, Surface Pen on a touchscreen) so we\n\t\t\t\t// only auto-enable pen mode for it, not for an indirect desktop tablet stylus.\n\t\t\t\tconst isPenDirect = isDirectDisplayPen(e)\n\n\t\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\tisPenDirect,\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction onPointerUp(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tconst button = isSecondaryClickPointerDown ? 2 : getPointerEventButton(e)\n\t\t\t\tif (button !== 0 && button !== 1 && button !== 2 && button !== 5) return\n\n\t\t\t\tconst rightClickPanning = editor.options.rightClickPanning\n\t\t\t\t// Check before dispatch (which resets isPanning)\n\t\t\t\tconst wasRightClickPanning =\n\t\t\t\t\trightClickPanning && button === 2 && editor.inputs.getIsPanning()\n\n\t\t\t\treleasePointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\tbutton,\n\t\t\t\t})\n\n\t\t\t\t// Static right-click: fire contextmenu at the pointer-up location\n\t\t\t\tif (rightClickPanning && button === 2 && !wasRightClickPanning) {\n\t\t\t\t\tconst contextMenuEvent = new PointerEvent('contextmenu', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tclientX: e.clientX,\n\t\t\t\t\t\tclientY: e.clientY,\n\t\t\t\t\t\tbutton: 2,\n\t\t\t\t\t\tbuttons: 0,\n\t\t\t\t\t\tpointerId: e.pointerId,\n\t\t\t\t\t\tpointerType: e.pointerType,\n\t\t\t\t\t\tisPrimary: e.isPrimary,\n\t\t\t\t\t})\n\t\t\t\t\te.currentTarget.dispatchEvent(contextMenuEvent)\n\t\t\t\t}\n\t\t\t\tisSecondaryClickPointerDown = false\n\t\t\t}\n\n\t\t\tfunction onPointerEnter(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })\n\t\t\t}\n\n\t\t\tfunction onPointerLeave(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })\n\t\t\t}\n\n\t\t\tfunction onTouchStart(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tfunction onTouchEnd(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tif (!(e.target instanceof editor.getContainerWindow().HTMLElement)) return\n\n\t\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\t\tif (\n\t\t\t\t\t// if the target is not inside the editing shape\n\t\t\t\t\t!(editingShapeId && e.target.closest(`[data-shape-id=\"${editingShapeId}\"]`)) &&\n\t\t\t\t\t// and the target is not an clickable element\n\t\t\t\t\te.target.tagName !== 'A' &&\n\t\t\t\t\t// and the target is not an editable element\n\t\t\t\t\t!elementShouldCaptureKeys(e.target, false)\n\t\t\t\t) {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tasync function onDrop(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t\te.stopPropagation()\n\n\t\t\t\tconst pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY })\n\n\t\t\t\t// Call the custom onDropOnCanvas callback if provided\n\t\t\t\tif (editor.options.experimental__onDropOnCanvas) {\n\t\t\t\t\tconst handled = editor.options.experimental__onDropOnCanvas({\n\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t\tevent: e,\n\t\t\t\t\t})\n\t\t\t\t\tif (handled) return\n\t\t\t\t}\n\n\t\t\t\tif (e.dataTransfer?.files?.length) {\n\t\t\t\t\tconst files = Array.from(e.dataTransfer.files)\n\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'files',\n\t\t\t\t\t\tfiles,\n\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tconst url = e.dataTransfer.getData('url')\n\t\t\t\tif (url) {\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'url',\n\t\t\t\t\t\turl,\n\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onClick(e: React.MouseEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\te.stopPropagation()\n\t\t\t}\n\n\t\t\tfunction onContextMenu(e: React.MouseEvent) {\n\t\t\t\t// With right-click panning disabled, let the native contextmenu through so the\n\t\t\t\t// menu opens on press.\n\t\t\t\tif (!editor.options.rightClickPanning) return\n\t\t\t\t// Synthetic events \u2014 our own dispatch from onPointerUp, or tests using\n\t\t\t\t// fireEvent.contextMenu \u2014 pass through so Radix can open the menu.\n\t\t\t\tif (!e.nativeEvent.isTrusted) return\n\t\t\t\t// Only suppress the native browser contextmenu when it follows a\n\t\t\t\t// secondary click. For those, our pointer handling has already\n\t\t\t\t// decided what to do (either we'll dispatch a synthetic contextmenu on\n\t\t\t\t// pointerup to open the menu at the release position, or we panned and\n\t\t\t\t// don't want a menu at all).\n\t\t\t\t//\n\t\t\t\t// Other contextmenu sources must reach Radix so the menu opens:\n\t\t\t\t// - long-press on touch devices (button=0, pointerType=touch)\n\t\t\t\tif (!isSecondaryClickEvent(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerUp,\n\t\t\t\tonPointerEnter,\n\t\t\t\tonPointerLeave,\n\t\t\t\tonDragOver,\n\t\t\t\tonDrop,\n\t\t\t\tonTouchStart,\n\t\t\t\tonTouchEnd,\n\t\t\t\tonClick,\n\t\t\t\tonContextMenu,\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// onPointerMove is special: where we're only interested in the other events when they're\n\t// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want\n\t// the pointer position to be up to date regardless of whether it's over the tldraw canvas or\n\t// not. So instead of returning a listener to be attached to the canvas, we directly attach a\n\t// listener to the whole document instead.\n\tuseEffect(() => {\n\t\tlet lastX: number, lastY: number\n\n\t\tfunction onPointerMove(e: PointerEvent) {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\t// For tools that benefit from a higher fidelity of events,\n\t\t\t// we dispatch the coalesced events.\n\t\t\t// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.\n\t\t\t// Specifically, in local mode (non-https) mode, iOS does not `useCoalescedEvents`\n\t\t\t// so it appears like the ink is working locally, when really it's just that `useCoalescedEvents`\n\t\t\t// is disabled. The intent here is to have `useCoalescedEvents` disabled for iOS.\n\t\t\tconst events =\n\t\t\t\t!tlenv.isIos && currentTool.useCoalescedEvents && e.getCoalescedEvents\n\t\t\t\t\t? e.getCoalescedEvents()\n\t\t\t\t\t: [e]\n\n\t\t\tfor (const singleEvent of events) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t...getPointerInfo(editor, singleEvent),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\townerDocument.body.addEventListener('pointermove', onPointerMove)\n\t\treturn () => {\n\t\t\townerDocument.body.removeEventListener('pointermove', onPointerMove)\n\t\t}\n\t}, [editor, currentTool, ownerDocument])\n\n\treturn events\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport React, { useEffect, useMemo } from 'react'\nimport { tlenv } from '../globals/environment'\nimport {\n\telementShouldCaptureKeys,\n\tpreventDefault,\n\treleasePointerCapture,\n\tsetPointerCapture,\n} from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { getPointerEventButton, isDirectDisplayPen, isSecondaryClickEvent } from '../utils/pointer'\nimport { useEditor } from './useEditor'\n\nexport function useCanvasEvents() {\n\tconst editor = useEditor()\n\tconst ownerDocument = editor.getContainerDocument()\n\tconst currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])\n\n\tconst events = useMemo(\n\t\tfunction canvasEvents() {\n\t\t\tlet isSecondaryClickPointerDown = false\n\n\t\t\tfunction onPointerDown(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tconst button = getPointerEventButton(e)\n\t\t\t\tisSecondaryClickPointerDown = button === 2\n\n\t\t\t\t// With right-click panning disabled, fire right_click on press and let the\n\t\t\t\t// native contextmenu through so the menu opens at the pointer-down location.\n\t\t\t\tif (button === 2 && !editor.options.rightClickPanning) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (button !== 0 && button !== 1 && button !== 2 && button !== 5) return\n\n\t\t\t\t// Detect direct-display pen input (Apple Pencil, Surface Pen on a touchscreen) so we\n\t\t\t\t// only auto-enable pen mode for it, not for an indirect desktop tablet stylus.\n\t\t\t\tconst isPenDirect = isDirectDisplayPen(e)\n\n\t\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\tisPenDirect,\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction onPointerUp(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tconst button = isSecondaryClickPointerDown ? 2 : getPointerEventButton(e)\n\t\t\t\tif (button !== 0 && button !== 1 && button !== 2 && button !== 5) return\n\n\t\t\t\tconst rightClickPanning = editor.options.rightClickPanning\n\t\t\t\t// Check before dispatch (which resets isPanning)\n\t\t\t\tconst wasRightClickPanning =\n\t\t\t\t\trightClickPanning && button === 2 && editor.inputs.getIsPanning()\n\n\t\t\t\treleasePointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\tbutton,\n\t\t\t\t})\n\n\t\t\t\t// Static right-click: fire contextmenu at the pointer-up location\n\t\t\t\tif (rightClickPanning && button === 2 && !wasRightClickPanning) {\n\t\t\t\t\tconst contextMenuEvent = new PointerEvent('contextmenu', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tclientX: e.clientX,\n\t\t\t\t\t\tclientY: e.clientY,\n\t\t\t\t\t\tbutton: 2,\n\t\t\t\t\t\tbuttons: 0,\n\t\t\t\t\t\tpointerId: e.pointerId,\n\t\t\t\t\t\tpointerType: e.pointerType,\n\t\t\t\t\t\tisPrimary: e.isPrimary,\n\t\t\t\t\t})\n\t\t\t\t\te.currentTarget.dispatchEvent(contextMenuEvent)\n\t\t\t\t}\n\t\t\t\tisSecondaryClickPointerDown = false\n\t\t\t}\n\n\t\t\tfunction onPointerEnter(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })\n\t\t\t}\n\n\t\t\tfunction onPointerLeave(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })\n\t\t\t}\n\n\t\t\tfunction onTouchStart(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tfunction onTouchEnd(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tif (!(e.target instanceof editor.getContainerWindow().HTMLElement)) return\n\n\t\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\t\tif (\n\t\t\t\t\t// if the target is not inside the editing shape\n\t\t\t\t\t!(editingShapeId && e.target.closest(`[data-shape-id=\"${editingShapeId}\"]`)) &&\n\t\t\t\t\t// and the target is not an clickable element\n\t\t\t\t\te.target.tagName !== 'A' &&\n\t\t\t\t\t// and the target is not an editable element\n\t\t\t\t\t!elementShouldCaptureKeys(e.target, false)\n\t\t\t\t) {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tasync function onDrop(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t\te.stopPropagation()\n\n\t\t\t\tconst pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY })\n\n\t\t\t\t// Call the custom onDropOnCanvas callback if provided\n\t\t\t\tif (editor.options.experimental__onDropOnCanvas) {\n\t\t\t\t\tconst handled = editor.options.experimental__onDropOnCanvas({\n\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t\tevent: e,\n\t\t\t\t\t})\n\t\t\t\t\tif (handled) return\n\t\t\t\t}\n\n\t\t\t\tif (e.dataTransfer?.files?.length) {\n\t\t\t\t\tconst files = Array.from(e.dataTransfer.files)\n\n\t\t\t\t\teditor.markHistoryStoppingPoint('drop')\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'files',\n\t\t\t\t\t\tfiles,\n\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tconst url = e.dataTransfer.getData('url')\n\t\t\t\tif (url) {\n\t\t\t\t\teditor.markHistoryStoppingPoint('drop')\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'url',\n\t\t\t\t\t\turl,\n\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onClick(e: React.MouseEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\te.stopPropagation()\n\t\t\t}\n\n\t\t\tfunction onContextMenu(e: React.MouseEvent) {\n\t\t\t\t// With right-click panning disabled, let the native contextmenu through so the\n\t\t\t\t// menu opens on press.\n\t\t\t\tif (!editor.options.rightClickPanning) return\n\t\t\t\t// Synthetic events \u2014 our own dispatch from onPointerUp, or tests using\n\t\t\t\t// fireEvent.contextMenu \u2014 pass through so Radix can open the menu.\n\t\t\t\tif (!e.nativeEvent.isTrusted) return\n\t\t\t\t// Only suppress the native browser contextmenu when it follows a\n\t\t\t\t// secondary click. For those, our pointer handling has already\n\t\t\t\t// decided what to do (either we'll dispatch a synthetic contextmenu on\n\t\t\t\t// pointerup to open the menu at the release position, or we panned and\n\t\t\t\t// don't want a menu at all).\n\t\t\t\t//\n\t\t\t\t// Other contextmenu sources must reach Radix so the menu opens:\n\t\t\t\t// - long-press on touch devices (button=0, pointerType=touch)\n\t\t\t\tif (!isSecondaryClickEvent(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerUp,\n\t\t\t\tonPointerEnter,\n\t\t\t\tonPointerLeave,\n\t\t\t\tonDragOver,\n\t\t\t\tonDrop,\n\t\t\t\tonTouchStart,\n\t\t\t\tonTouchEnd,\n\t\t\t\tonClick,\n\t\t\t\tonContextMenu,\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// onPointerMove is special: where we're only interested in the other events when they're\n\t// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want\n\t// the pointer position to be up to date regardless of whether it's over the tldraw canvas or\n\t// not. So instead of returning a listener to be attached to the canvas, we directly attach a\n\t// listener to the whole document instead.\n\tuseEffect(() => {\n\t\tlet lastX: number, lastY: number\n\n\t\tfunction onPointerMove(e: PointerEvent) {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\t// For tools that benefit from a higher fidelity of events,\n\t\t\t// we dispatch the coalesced events.\n\t\t\t// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.\n\t\t\t// Specifically, in local mode (non-https) mode, iOS does not `useCoalescedEvents`\n\t\t\t// so it appears like the ink is working locally, when really it's just that `useCoalescedEvents`\n\t\t\t// is disabled. The intent here is to have `useCoalescedEvents` disabled for iOS.\n\t\t\tconst events =\n\t\t\t\t!tlenv.isIos && currentTool.useCoalescedEvents && e.getCoalescedEvents\n\t\t\t\t\t? e.getCoalescedEvents()\n\t\t\t\t\t: [e]\n\n\t\t\tfor (const singleEvent of events) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t...getPointerInfo(editor, singleEvent),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\townerDocument.body.addEventListener('pointermove', onPointerMove)\n\t\treturn () => {\n\t\t\townerDocument.body.removeEventListener('pointermove', onPointerMove)\n\t\t}\n\t}, [editor, currentTool, ownerDocument])\n\n\treturn events\n}\n"],
+  "mappings": "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",
   "names": ["events"]
 }

package/dist-esm/lib/hooks/useDocumentEvents.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useValue } from "@tldraw/state-react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { activeElementShouldCaptureKeys, preventDefault } from "../utils/dom.mjs";
 import { isAccelKey } from "../utils/keyboard.mjs";
 import { useContainer } from "./useContainer.mjs";
@@ -9,13 +9,15 @@ function useDocumentEvents() {
   const container = useContainer();
   const isEditing = useValue("isEditing", () => editor.getEditingShapeId(), [editor]);
   const isAppFocused = useValue("isFocused", () => editor.getIsFocused(), [editor]);
+  const heldKeysRef = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
     if (!container) return;
     function onDrop(e) {
       if (e.isSpecialRedispatchedEvent) return;
       preventDefault(e);
-      e.stopPropagation();
       const cvs = container.querySelector(".tl-canvas");
+      if (cvs?.contains(e.target)) return;
+      e.stopPropagation();
       if (!cvs) return;
       const newEvent = new DragEvent(e.type, e);
       newEvent.isSpecialRedispatchedEvent = true;
@@ -136,6 +138,7 @@ function useDocumentEvents() {
         metaKey: e.metaKey,
         accelKey: isAccelKey(e)
       };
+      heldKeysRef.current.set(e.code, e.key);
       editor.dispatch(info);
     };
     const handleKeyUp = (e) => {
@@ -158,13 +161,15 @@ function useDocumentEvents() {
         metaKey: e.metaKey,
         accelKey: isAccelKey(e)
       };
+      heldKeysRef.current.delete(e.code);
       editor.dispatch(info);
     };
     function handleTouchStart(e) {
       if (container.contains(e.target)) {
-        const touchXPosition = e.touches[0].pageX;
+        const touchXPosition = e.touches[0].clientX;
         const touchXRadius = e.touches[0].radiusX || 0;
-        if (touchXPosition - touchXRadius < 10 || touchXPosition + touchXRadius > editor.getViewportScreenBounds().width - 10) {
+        const windowWidth = editor.getContainerWindow().innerWidth;
+        if (touchXPosition - touchXRadius < 10 || touchXPosition + touchXRadius > windowWidth - 10) {
           if (e.target?.tagName === "BUTTON") {
             ;
             e.target?.click();
@@ -180,22 +185,47 @@ function useDocumentEvents() {
     };
     container.addEventListener("touchstart", handleTouchStart, { passive: false });
     container.addEventListener("wheel", handleWheel, { passive: false });
+    const handleGesture = (e) => preventDefault(e);
     const ownerDoc = container.ownerDocument;
-    ownerDoc.addEventListener("gesturestart", preventDefault);
-    ownerDoc.addEventListener("gesturechange", preventDefault);
-    ownerDoc.addEventListener("gestureend", preventDefault);
+    ownerDoc.addEventListener("gesturestart", handleGesture);
+    ownerDoc.addEventListener("gesturechange", handleGesture);
+    ownerDoc.addEventListener("gestureend", handleGesture);
     container.addEventListener("keydown", handleKeyDown);
     container.addEventListener("keyup", handleKeyUp);
     return () => {
       container.removeEventListener("touchstart", handleTouchStart);
       container.removeEventListener("wheel", handleWheel);
-      ownerDoc.removeEventListener("gesturestart", preventDefault);
-      ownerDoc.removeEventListener("gesturechange", preventDefault);
-      ownerDoc.removeEventListener("gestureend", preventDefault);
+      ownerDoc.removeEventListener("gesturestart", handleGesture);
+      ownerDoc.removeEventListener("gesturechange", handleGesture);
+      ownerDoc.removeEventListener("gestureend", handleGesture);
       container.removeEventListener("keydown", handleKeyDown);
       container.removeEventListener("keyup", handleKeyUp);
     };
   }, [editor, container, isAppFocused, isEditing]);
+  useEffect(() => {
+    const win = editor.getContainerWindow();
+    const handleWindowBlur = () => {
+      const heldKeys = heldKeysRef.current;
+      for (const code of [...editor.inputs.keys]) {
+        editor.dispatch({
+          type: "keyboard",
+          name: "key_up",
+          key: heldKeys.get(code) ?? code,
+          code,
+          shiftKey: false,
+          altKey: false,
+          ctrlKey: false,
+          metaKey: false,
+          accelKey: false
+        });
+      }
+      heldKeys.clear();
+    };
+    win.addEventListener("blur", handleWindowBlur);
+    return () => {
+      win.removeEventListener("blur", handleWindowBlur);
+    };
+  }, [editor]);
 }
 function areShortcutsDisabled(editor) {
   return editor.menus.hasOpenMenus() || activeElementShouldCaptureKeys(true, editor.getContainerDocument());

package/dist-esm/lib/hooks/useDocumentEvents.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useDocumentEvents.ts"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useEffect } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { TLKeyboardEventInfo } from '../editor/types/event-types'\nimport { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nexport function useDocumentEvents() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tconst isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])\n\tconst isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])\n\n\t// Prevent the browser's default drag and drop behavior on our container (UI, etc)\n\tuseEffect(() => {\n\t\tif (!container) return\n\n\t\tfunction onDrop(e: DragEvent) {\n\t\t\t// this is tricky: we don't want the event to do anything\n\t\t\t// here, but we do want it to make its way to the canvas,\n\t\t\t// even if the drop is over some other element (like a toolbar),\n\t\t\t// so we're going to flag the event and then dispatch\n\t\t\t// it to the canvas; the canvas will handle it and try to\n\t\t\t// stop it from propagating back, but in case we do see it again,\n\t\t\t// we'll look for the flag so we know to stop it from being\n\t\t\t// re-dispatched, which would lead to an infinite loop.\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\te.stopPropagation()\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new DragEvent(e.type, e)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tcontainer.addEventListener('dragover', onDrop)\n\t\tcontainer.addEventListener('drop', onDrop)\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener('dragover', onDrop)\n\t\t\tcontainer.removeEventListener('drop', onDrop)\n\t\t}\n\t}, [container])\n\n\tuseEffect(() => {\n\t\tconst win = editor.getContainerWindow()\n\t\tif (!('matchMedia' in win)) return\n\n\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes\n\t\tlet remove: (() => void) | null = null\n\t\tconst updatePixelRatio = () => {\n\t\t\tif (remove != null) {\n\t\t\t\tremove()\n\t\t\t}\n\t\t\tconst mqString = `(resolution: ${win.devicePixelRatio}dppx)`\n\t\t\tconst media = win.matchMedia(mqString)\n\t\t\t// Safari only started supporting `addEventListener('change',...) in version 14\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event\n\t\t\tconst safariCb = (ev: any) => {\n\t\t\t\tif (ev.type === 'change') {\n\t\t\t\t\tupdatePixelRatio()\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (media.addEventListener) {\n\t\t\t\tmedia.addEventListener('change', updatePixelRatio)\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t} else if (media.addListener) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\tmedia.addListener(safariCb)\n\t\t\t}\n\t\t\tremove = () => {\n\t\t\t\tif (media.removeEventListener) {\n\t\t\t\t\tmedia.removeEventListener('change', updatePixelRatio)\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\t} else if (media.removeListener) {\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\t\tmedia.removeListener(safariCb)\n\t\t\t\t}\n\t\t\t}\n\t\t\teditor.updateInstanceState({ devicePixelRatio: win.devicePixelRatio })\n\t\t}\n\t\tupdatePixelRatio()\n\t\treturn () => {\n\t\t\tremove?.()\n\t\t}\n\t}, [editor])\n\n\tuseEffect(() => {\n\t\tif (!isAppFocused) return\n\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\te.altKey &&\n\t\t\t\t// todo: When should we allow the alt key to be used? Perhaps states should declare which keys matter to them?\n\t\t\t\t(editor.isIn('zoom') || !editor.getPath().endsWith('.idle')) &&\n\t\t\t\t!areShortcutsDisabled(editor)\n\t\t\t) {\n\t\t\t\t// On windows the alt key opens the menu bar.\n\t\t\t\t// We want to prevent that if the user is doing something else,\n\t\t\t\t// e.g. resizing a shape\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\t\t\tconst hasSelectedShapes = !!editor.getSelectedShapeIds().length\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase '=':\n\t\t\t\tcase '-':\n\t\t\t\tcase '0': {\n\t\t\t\t\t// These keys are used for zooming. Technically we only use\n\t\t\t\t\t// the + - and 0 keys, however it's common for them to be\n\t\t\t\t\t// paired with modifier keys (command / control) so we need\n\t\t\t\t\t// to prevent the browser's regular actions (i.e. zooming\n\t\t\t\t\t// the page). A user can zoom by unfocusing the editor.\n\t\t\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Tab': {\n\t\t\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\t// isEditing here sounds like it's about text editing\n\t\t\t\t\t// but more specifically, this is so you can tab into an\n\t\t\t\t\t// embed that's being 'edited'. In our world,\n\t\t\t\t\t// editing an embed, means it's interactive.\n\t\t\t\t\tif (hasSelectedShapes && !isEditing) {\n\t\t\t\t\t\t// This is used in tandem with shape navigation.\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\tcase 'ArrowDown': {\n\t\t\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tif (hasSelectedShapes && (e.metaKey || e.ctrlKey)) {\n\t\t\t\t\t\t// This is used in tandem with shape navigation.\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase ',': {\n\t\t\t\t\t// this was moved to useKeyBoardShortcuts; it's possible\n\t\t\t\t\t// that the comma key is pressed when the container is not\n\t\t\t\t\t// focused, for example when the user has just interacted\n\t\t\t\t\t// with the toolbar. We need to handle it on the window\n\t\t\t\t\t// (ofc ensuring it's a correct time for a shortcut)\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\t// In certain browsers, pressing escape while in full screen mode\n\t\t\t\t\t// will exit full screen mode. We want to allow that, but not when\n\t\t\t\t\t// escape is being handled by the editor. When a user has an editing\n\t\t\t\t\t// shape, escape stops editing. When a user is using a tool, escape\n\t\t\t\t\t// returns to the select tool. When the user has selected shapes,\n\t\t\t\t\t// escape de-selects them. Only when the user's selection is empty\n\t\t\t\t\t// should we allow escape to do its normal thing.\n\n\t\t\t\t\tif (editor.getEditingShape() || editor.getSelectedShapeIds().length > 0) {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}\n\n\t\t\t\t\t// Don't do anything if we open menus open\n\t\t\t\t\tif (editor.menus.getOpenMenus().length > 0) return\n\n\t\t\t\t\tif (editor.inputs.keys.has('Escape')) {\n\t\t\t\t\t\t// noop\n\t\t\t\t\t} else {\n\t\t\t\t\t\teditor.inputs.keys.add('Escape')\n\n\t\t\t\t\t\teditor.cancel()\n\t\t\t\t\t\t// Pressing escape will focus the document.body,\n\t\t\t\t\t\t// which will cause the app to lose focus, which\n\t\t\t\t\t\t// will break additional shortcuts. We need to\n\t\t\t\t\t\t// refocus the container in order to keep these\n\t\t\t\t\t\t// shortcuts working.\n\t\t\t\t\t\tcontainer.focus()\n\t\t\t\t\t}\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst info: TLKeyboardEventInfo = {\n\t\t\t\ttype: 'keyboard',\n\t\t\t\tname: e.repeat ? 'key_repeat' : 'key_down',\n\t\t\t\tkey: e.key,\n\t\t\t\tcode: e.code,\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tconst handleKeyUp = (e: KeyboardEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\n\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (e.key === ',') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst info: TLKeyboardEventInfo = {\n\t\t\t\ttype: 'keyboard',\n\t\t\t\tname: 'key_up',\n\t\t\t\tkey: e.key,\n\t\t\t\tcode: e.code,\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tfunction handleTouchStart(e: TouchEvent) {\n\t\t\tif (container.contains(e.target as Node)) {\n\t\t\t\t// Center point of the touch area\n\t\t\t\tconst touchXPosition = e.touches[0].pageX\n\t\t\t\t// Size of the touch area\n\t\t\t\tconst touchXRadius = e.touches[0].radiusX || 0\n\n\t\t\t\t// We set a threshold (10px) on both sizes of the screen,\n\t\t\t\t// if the touch area overlaps with the screen edges\n\t\t\t\t// it's likely to trigger the navigation. We prevent the\n\t\t\t\t// touchstart event in that case.\n\t\t\t\t// todo: make this relative to the actual window, not the editor's screen bounds\n\t\t\t\tif (\n\t\t\t\t\ttouchXPosition - touchXRadius < 10 ||\n\t\t\t\t\ttouchXPosition + touchXRadius > editor.getViewportScreenBounds().width - 10\n\t\t\t\t) {\n\t\t\t\t\tif ((e.target as HTMLElement)?.tagName === 'BUTTON') {\n\t\t\t\t\t\t// Force a click before bailing\n\t\t\t\t\t\t;(e.target as HTMLButtonElement)?.click()\n\t\t\t\t\t}\n\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Prevent wheel events that occur inside of the container\n\t\tconst handleWheel = (e: WheelEvent) => {\n\t\t\t// Ctrl/Meta key indicates a pinch event (funny, eh?)\n\t\t\tif (container.contains(e.target as Node) && (e.ctrlKey || e.metaKey)) {\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\t\t}\n\n\t\tcontainer.addEventListener('touchstart', handleTouchStart, { passive: false })\n\n\t\tcontainer.addEventListener('wheel', handleWheel, { passive: false })\n\n\t\tconst ownerDoc = container.ownerDocument\n\t\townerDoc.addEventListener('gesturestart', preventDefault)\n\t\townerDoc.addEventListener('gesturechange', preventDefault)\n\t\townerDoc.addEventListener('gestureend', preventDefault)\n\n\t\tcontainer.addEventListener('keydown', handleKeyDown)\n\t\tcontainer.addEventListener('keyup', handleKeyUp)\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener('touchstart', handleTouchStart)\n\n\t\t\tcontainer.removeEventListener('wheel', handleWheel)\n\n\t\t\townerDoc.removeEventListener('gesturestart', preventDefault)\n\t\t\townerDoc.removeEventListener('gesturechange', preventDefault)\n\t\t\townerDoc.removeEventListener('gestureend', preventDefault)\n\n\t\t\tcontainer.removeEventListener('keydown', handleKeyDown)\n\t\t\tcontainer.removeEventListener('keyup', handleKeyUp)\n\t\t}\n\t}, [editor, container, isAppFocused, isEditing])\n}\n\nfunction areShortcutsDisabled(editor: Editor) {\n\treturn (\n\t\teditor.menus.hasOpenMenus() ||\n\t\tactiveElementShouldCaptureKeys(true, editor.getContainerDocument())\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useEffect, useRef } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { TLKeyboardEventInfo } from '../editor/types/event-types'\nimport { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nexport function useDocumentEvents() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tconst isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])\n\tconst isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])\n\n\t// `inputs.keys` only stores codes, but tools match `onKeyUp` on `info.key`, so the window\n\t// blur release below needs the key remembered per code.\n\tconst heldKeysRef = useRef(new Map<string, string>())\n\n\t// Prevent the browser's default drag and drop behavior on our container (UI, etc)\n\tuseEffect(() => {\n\t\tif (!container) return\n\n\t\tfunction onDrop(e: DragEvent) {\n\t\t\t// this is tricky: we don't want the event to do anything\n\t\t\t// here, but we do want it to make its way to the canvas,\n\t\t\t// even if the drop is over some other element (like a toolbar),\n\t\t\t// so we're going to flag the event and then dispatch\n\t\t\t// it to the canvas; the canvas will handle it and try to\n\t\t\t// stop it from propagating back, but in case we do see it again,\n\t\t\t// we'll look for the flag so we know to stop it from being\n\t\t\t// re-dispatched, which would lead to an infinite loop.\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\t// A drop on the canvas itself already reaches the canvas (and any shape's own React\n\t\t\t// drop handlers) by bubbling; stopping it here would hide it from React, which\n\t\t\t// delegates from the root above this container.\n\t\t\tif (cvs?.contains(e.target as Node | null)) return\n\t\t\te.stopPropagation()\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new DragEvent(e.type, e)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tcontainer.addEventListener('dragover', onDrop)\n\t\tcontainer.addEventListener('drop', onDrop)\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener('dragover', onDrop)\n\t\t\tcontainer.removeEventListener('drop', onDrop)\n\t\t}\n\t}, [container])\n\n\tuseEffect(() => {\n\t\tconst win = editor.getContainerWindow()\n\t\tif (!('matchMedia' in win)) return\n\n\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes\n\t\tlet remove: (() => void) | null = null\n\t\tconst updatePixelRatio = () => {\n\t\t\tif (remove != null) {\n\t\t\t\tremove()\n\t\t\t}\n\t\t\tconst mqString = `(resolution: ${win.devicePixelRatio}dppx)`\n\t\t\tconst media = win.matchMedia(mqString)\n\t\t\t// Safari only started supporting `addEventListener('change',...) in version 14\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event\n\t\t\tconst safariCb = (ev: any) => {\n\t\t\t\tif (ev.type === 'change') {\n\t\t\t\t\tupdatePixelRatio()\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (media.addEventListener) {\n\t\t\t\tmedia.addEventListener('change', updatePixelRatio)\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t} else if (media.addListener) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\tmedia.addListener(safariCb)\n\t\t\t}\n\t\t\tremove = () => {\n\t\t\t\tif (media.removeEventListener) {\n\t\t\t\t\tmedia.removeEventListener('change', updatePixelRatio)\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\t} else if (media.removeListener) {\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\t\tmedia.removeListener(safariCb)\n\t\t\t\t}\n\t\t\t}\n\t\t\teditor.updateInstanceState({ devicePixelRatio: win.devicePixelRatio })\n\t\t}\n\t\tupdatePixelRatio()\n\t\treturn () => {\n\t\t\tremove?.()\n\t\t}\n\t}, [editor])\n\n\tuseEffect(() => {\n\t\tif (!isAppFocused) return\n\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\te.altKey &&\n\t\t\t\t// todo: When should we allow the alt key to be used? Perhaps states should declare which keys matter to them?\n\t\t\t\t(editor.isIn('zoom') || !editor.getPath().endsWith('.idle')) &&\n\t\t\t\t!areShortcutsDisabled(editor)\n\t\t\t) {\n\t\t\t\t// On windows the alt key opens the menu bar.\n\t\t\t\t// We want to prevent that if the user is doing something else,\n\t\t\t\t// e.g. resizing a shape\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\t\t\tconst hasSelectedShapes = !!editor.getSelectedShapeIds().length\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase '=':\n\t\t\t\tcase '-':\n\t\t\t\tcase '0': {\n\t\t\t\t\t// These keys are used for zooming. Technically we only use\n\t\t\t\t\t// the + - and 0 keys, however it's common for them to be\n\t\t\t\t\t// paired with modifier keys (command / control) so we need\n\t\t\t\t\t// to prevent the browser's regular actions (i.e. zooming\n\t\t\t\t\t// the page). A user can zoom by unfocusing the editor.\n\t\t\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Tab': {\n\t\t\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\t// isEditing here sounds like it's about text editing\n\t\t\t\t\t// but more specifically, this is so you can tab into an\n\t\t\t\t\t// embed that's being 'edited'. In our world,\n\t\t\t\t\t// editing an embed, means it's interactive.\n\t\t\t\t\tif (hasSelectedShapes && !isEditing) {\n\t\t\t\t\t\t// This is used in tandem with shape navigation.\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\tcase 'ArrowDown': {\n\t\t\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tif (hasSelectedShapes && (e.metaKey || e.ctrlKey)) {\n\t\t\t\t\t\t// This is used in tandem with shape navigation.\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase ',': {\n\t\t\t\t\t// this was moved to useKeyBoardShortcuts; it's possible\n\t\t\t\t\t// that the comma key is pressed when the container is not\n\t\t\t\t\t// focused, for example when the user has just interacted\n\t\t\t\t\t// with the toolbar. We need to handle it on the window\n\t\t\t\t\t// (ofc ensuring it's a correct time for a shortcut)\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\t// In certain browsers, pressing escape while in full screen mode\n\t\t\t\t\t// will exit full screen mode. We want to allow that, but not when\n\t\t\t\t\t// escape is being handled by the editor. When a user has an editing\n\t\t\t\t\t// shape, escape stops editing. When a user is using a tool, escape\n\t\t\t\t\t// returns to the select tool. When the user has selected shapes,\n\t\t\t\t\t// escape de-selects them. Only when the user's selection is empty\n\t\t\t\t\t// should we allow escape to do its normal thing.\n\n\t\t\t\t\tif (editor.getEditingShape() || editor.getSelectedShapeIds().length > 0) {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}\n\n\t\t\t\t\t// Don't do anything if we open menus open\n\t\t\t\t\tif (editor.menus.getOpenMenus().length > 0) return\n\n\t\t\t\t\tif (editor.inputs.keys.has('Escape')) {\n\t\t\t\t\t\t// noop\n\t\t\t\t\t} else {\n\t\t\t\t\t\teditor.inputs.keys.add('Escape')\n\n\t\t\t\t\t\teditor.cancel()\n\t\t\t\t\t\t// Pressing escape will focus the document.body,\n\t\t\t\t\t\t// which will cause the app to lose focus, which\n\t\t\t\t\t\t// will break additional shortcuts. We need to\n\t\t\t\t\t\t// refocus the container in order to keep these\n\t\t\t\t\t\t// shortcuts working.\n\t\t\t\t\t\tcontainer.focus()\n\t\t\t\t\t}\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst info: TLKeyboardEventInfo = {\n\t\t\t\ttype: 'keyboard',\n\t\t\t\tname: e.repeat ? 'key_repeat' : 'key_down',\n\t\t\t\tkey: e.key,\n\t\t\t\tcode: e.code,\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t}\n\n\t\t\theldKeysRef.current.set(e.code, e.key)\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tconst handleKeyUp = (e: KeyboardEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\n\t\t\tif (areShortcutsDisabled(editor)) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (e.key === ',') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst info: TLKeyboardEventInfo = {\n\t\t\t\ttype: 'keyboard',\n\t\t\t\tname: 'key_up',\n\t\t\t\tkey: e.key,\n\t\t\t\tcode: e.code,\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t}\n\n\t\t\theldKeysRef.current.delete(e.code)\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tfunction handleTouchStart(e: TouchEvent) {\n\t\t\tif (container.contains(e.target as Node)) {\n\t\t\t\t// Center point of the touch area, measured from the edge of the window the touch\n\t\t\t\t// has to reach to trigger the navigation\n\t\t\t\tconst touchXPosition = e.touches[0].clientX\n\t\t\t\t// Size of the touch area\n\t\t\t\tconst touchXRadius = e.touches[0].radiusX || 0\n\n\t\t\t\t// If the touch area overlaps with the screen edges it's likely to trigger the\n\t\t\t\t// navigation. We prevent the touchstart event in that case. The gesture belongs to\n\t\t\t\t// the window, so an editor inset from the window's edges \u2014 beside a sidebar, say \u2014\n\t\t\t\t// is not near an edge the system reacts to.\n\t\t\t\tconst windowWidth = editor.getContainerWindow().innerWidth\n\t\t\t\tif (\n\t\t\t\t\ttouchXPosition - touchXRadius < 10 ||\n\t\t\t\t\ttouchXPosition + touchXRadius > windowWidth - 10\n\t\t\t\t) {\n\t\t\t\t\tif ((e.target as HTMLElement)?.tagName === 'BUTTON') {\n\t\t\t\t\t\t// Force a click before bailing\n\t\t\t\t\t\t;(e.target as HTMLButtonElement)?.click()\n\t\t\t\t\t}\n\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Prevent wheel events that occur inside of the container\n\t\tconst handleWheel = (e: WheelEvent) => {\n\t\t\t// Ctrl/Meta key indicates a pinch event (funny, eh?)\n\t\t\tif (container.contains(e.target as Node) && (e.ctrlKey || e.metaKey)) {\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\t\t}\n\n\t\tcontainer.addEventListener('touchstart', handleTouchStart, { passive: false })\n\n\t\tcontainer.addEventListener('wheel', handleWheel, { passive: false })\n\n\t\t// Not the shared `preventDefault` reference: the DOM dedupes identical listeners, so with two\n\t\t// editors in one document the first cleanup would otherwise remove it for both.\n\t\tconst handleGesture = (e: Event) => preventDefault(e)\n\t\tconst ownerDoc = container.ownerDocument\n\t\townerDoc.addEventListener('gesturestart', handleGesture)\n\t\townerDoc.addEventListener('gesturechange', handleGesture)\n\t\townerDoc.addEventListener('gestureend', handleGesture)\n\n\t\tcontainer.addEventListener('keydown', handleKeyDown)\n\t\tcontainer.addEventListener('keyup', handleKeyUp)\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener('touchstart', handleTouchStart)\n\n\t\t\tcontainer.removeEventListener('wheel', handleWheel)\n\n\t\t\townerDoc.removeEventListener('gesturestart', handleGesture)\n\t\t\townerDoc.removeEventListener('gesturechange', handleGesture)\n\t\t\townerDoc.removeEventListener('gestureend', handleGesture)\n\n\t\t\tcontainer.removeEventListener('keydown', handleKeyDown)\n\t\t\tcontainer.removeEventListener('keyup', handleKeyUp)\n\t\t}\n\t}, [editor, container, isAppFocused, isEditing])\n\n\t// Alt+Tab / Cmd+Tab away while holding a key delivers the keyup to the other app, so without\n\t// this Space-panning (grab cursor, drags pan) stuck until the key was pressed again (#10442).\n\t// Replaying a key_up per held key runs the normal release path, including tool onKeyUp.\n\tuseEffect(() => {\n\t\tconst win = editor.getContainerWindow()\n\n\t\tconst handleWindowBlur = () => {\n\t\t\tconst heldKeys = heldKeysRef.current\n\t\t\tfor (const code of [...editor.inputs.keys]) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'keyboard',\n\t\t\t\t\tname: 'key_up',\n\t\t\t\t\tkey: heldKeys.get(code) ?? code,\n\t\t\t\t\tcode,\n\t\t\t\t\tshiftKey: false,\n\t\t\t\t\taltKey: false,\n\t\t\t\t\tctrlKey: false,\n\t\t\t\t\tmetaKey: false,\n\t\t\t\t\taccelKey: false,\n\t\t\t\t})\n\t\t\t}\n\t\t\theldKeys.clear()\n\t\t}\n\n\t\twin.addEventListener('blur', handleWindowBlur)\n\t\treturn () => {\n\t\t\twin.removeEventListener('blur', handleWindowBlur)\n\t\t}\n\t}, [editor])\n}\n\nfunction areShortcutsDisabled(editor: Editor) {\n\treturn (\n\t\teditor.menus.hasOpenMenus() ||\n\t\tactiveElementShouldCaptureKeys(true, editor.getContainerDocument())\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/hooks/useLocalStore.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { WeakCache } from "@tldraw/utils";
+import { noop } from "@tldraw/utils";
 import { useEffect } from "react";
 import { createTLStore } from "../config/createTLStore.mjs";
 import { TLLocalSyncClient } from "../utils/sync/TLLocalSyncClient.mjs";
@@ -17,7 +17,7 @@ function useLocalStore(options) {
       return;
     }
     setState({ status: "loading" });
-    const objectURLCache = new WeakCache();
+    const objectURLCache = /* @__PURE__ */ new Map();
     const assets = {
       upload: async (asset, file) => {
         await client.db.storeAsset(asset.id, file);
@@ -26,11 +26,12 @@ function useLocalStore(options) {
       resolve: async (asset) => {
         if (!asset.props.src) return null;
         if (asset.props.src.startsWith("asset:")) {
-          return await objectURLCache.get(asset, async () => {
-            const blob = await client.db.getAsset(asset.id);
-            if (!blob) return null;
-            return URL.createObjectURL(blob);
-          });
+          let objectURL = objectURLCache.get(asset.id);
+          if (!objectURL) {
+            objectURL = client.db.getAsset(asset.id).then((blob) => blob ? URL.createObjectURL(blob) : null);
+            objectURLCache.set(asset.id, objectURL);
+          }
+          return await objectURL;
         }
         return asset.props.src;
       },
@@ -56,6 +57,9 @@ function useLocalStore(options) {
     return () => {
       isClosed = true;
       client.close();
+      for (const objectURL of objectURLCache.values()) {
+        objectURL.then((url) => url && URL.revokeObjectURL(url), noop);
+      }
     };
   }, [options, setState]);
   return state;

package/dist-esm/lib/hooks/useLocalStore.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useLocalStore.ts"],
-  "sourcesContent": ["import { TLAsset, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'\nimport { WeakCache } from '@tldraw/utils'\nimport { useEffect } from 'react'\nimport { TLStoreOptions, createTLStore } from '../config/createTLStore'\nimport { TLEditorSnapshot } from '../config/TLEditorSnapshot'\nimport { TLStoreWithStatus } from '../utils/sync/StoreWithStatus'\nimport { TLLocalSyncClient } from '../utils/sync/TLLocalSyncClient'\nimport { useShallowObjectIdentity } from './useIdentity'\nimport { useRefState } from './useRefState'\n\n/** @internal */\nexport function useLocalStore(\n\toptions: {\n\t\tpersistenceKey?: string\n\t\tsessionId?: string\n\t\tsnapshot?: TLEditorSnapshot | TLStoreSnapshot\n\t} & TLStoreOptions\n): TLStoreWithStatus {\n\tconst [state, setState] = useRefState<TLStoreWithStatus>({ status: 'loading' })\n\n\toptions = useShallowObjectIdentity(options)\n\n\tuseEffect(() => {\n\t\tconst { persistenceKey, sessionId, ...rest } = options\n\n\t\tif (!persistenceKey) {\n\t\t\tsetState({\n\t\t\t\tstatus: 'not-synced',\n\t\t\t\tstore: createTLStore(rest),\n\t\t\t})\n\t\t\treturn\n\t\t}\n\n\t\tsetState({ status: 'loading' })\n\n\t\tconst objectURLCache = new WeakCache<TLAsset, Promise<string | null>>()\n\t\tconst assets: TLAssetStore = {\n\t\t\tupload: async (asset, file) => {\n\t\t\t\tawait client.db.storeAsset(asset.id, file)\n\t\t\t\treturn { src: asset.id }\n\t\t\t},\n\t\t\tresolve: async (asset) => {\n\t\t\t\tif (!asset.props.src) return null\n\n\t\t\t\tif (asset.props.src.startsWith('asset:')) {\n\t\t\t\t\treturn await objectURLCache.get(asset, async () => {\n\t\t\t\t\t\tconst blob = await client.db.getAsset(asset.id)\n\t\t\t\t\t\tif (!blob) return null\n\t\t\t\t\t\treturn URL.createObjectURL(blob)\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\treturn asset.props.src\n\t\t\t},\n\t\t\tremove: async (assetIds) => {\n\t\t\t\tawait client.db.removeAssets(assetIds)\n\t\t\t},\n\t\t\t...rest.assets,\n\t\t}\n\n\t\tconst store = createTLStore({ ...rest, assets })\n\n\t\tlet isClosed = false\n\n\t\tconst client = new TLLocalSyncClient(store, {\n\t\t\tsessionId,\n\t\t\tpersistenceKey,\n\t\t\tonLoad() {\n\t\t\t\tif (isClosed) return\n\t\t\t\tsetState({ store, status: 'synced-local' })\n\t\t\t},\n\t\t\tonLoadError(err: any) {\n\t\t\t\tif (isClosed) return\n\t\t\t\tsetState({ status: 'error', error: err })\n\t\t\t},\n\t\t})\n\n\t\treturn () => {\n\t\t\tisClosed = true\n\t\t\tclient.close()\n\t\t}\n\t}, [options, setState])\n\n\treturn state\n}\n"],
-  "mappings": "AACA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAyB,qBAAqB;AAG9C,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAGrB,SAAS,cACf,SAKoB;AACpB,QAAM,CAAC,OAAO,QAAQ,IAAI,YAA+B,EAAE,QAAQ,UAAU,CAAC;AAE9E,YAAU,yBAAyB,OAAO;AAE1C,YAAU,MAAM;AACf,UAAM,EAAE,gBAAgB,WAAW,GAAG,KAAK,IAAI;AAE/C,QAAI,CAAC,gBAAgB;AACpB,eAAS;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,cAAc,IAAI;AAAA,MAC1B,CAAC;AACD;AAAA,IACD;AAEA,aAAS,EAAE,QAAQ,UAAU,CAAC;AAE9B,UAAM,iBAAiB,IAAI,UAA2C;AACtE,UAAM,SAAuB;AAAA,MAC5B,QAAQ,OAAO,OAAO,SAAS;AAC9B,cAAM,OAAO,GAAG,WAAW,MAAM,IAAI,IAAI;AACzC,eAAO,EAAE,KAAK,MAAM,GAAG;AAAA,MACxB;AAAA,MACA,SAAS,OAAO,UAAU;AACzB,YAAI,CAAC,MAAM,MAAM,IAAK,QAAO;AAE7B,YAAI,MAAM,MAAM,IAAI,WAAW,QAAQ,GAAG;AACzC,iBAAO,MAAM,eAAe,IAAI,OAAO,YAAY;AAClD,kBAAM,OAAO,MAAM,OAAO,GAAG,SAAS,MAAM,EAAE;AAC9C,gBAAI,CAAC,KAAM,QAAO;AAClB,mBAAO,IAAI,gBAAgB,IAAI;AAAA,UAChC,CAAC;AAAA,QACF;AAEA,eAAO,MAAM,MAAM;AAAA,MACpB;AAAA,MACA,QAAQ,OAAO,aAAa;AAC3B,cAAM,OAAO,GAAG,aAAa,QAAQ;AAAA,MACtC;AAAA,MACA,GAAG,KAAK;AAAA,IACT;AAEA,UAAM,QAAQ,cAAc,EAAE,GAAG,MAAM,OAAO,CAAC;AAE/C,QAAI,WAAW;AAEf,UAAM,SAAS,IAAI,kBAAkB,OAAO;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,SAAS;AACR,YAAI,SAAU;AACd,iBAAS,EAAE,OAAO,QAAQ,eAAe,CAAC;AAAA,MAC3C;AAAA,MACA,YAAY,KAAU;AACrB,YAAI,SAAU;AACd,iBAAS,EAAE,QAAQ,SAAS,OAAO,IAAI,CAAC;AAAA,MACzC;AAAA,IACD,CAAC;AAED,WAAO,MAAM;AACZ,iBAAW;AACX,aAAO,MAAM;AAAA,IACd;AAAA,EACD,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SAAO;AACR;",
+  "sourcesContent": ["import { TLAssetId, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'\nimport { noop } from '@tldraw/utils'\nimport { useEffect } from 'react'\nimport { TLStoreOptions, createTLStore } from '../config/createTLStore'\nimport { TLEditorSnapshot } from '../config/TLEditorSnapshot'\nimport { TLStoreWithStatus } from '../utils/sync/StoreWithStatus'\nimport { TLLocalSyncClient } from '../utils/sync/TLLocalSyncClient'\nimport { useShallowObjectIdentity } from './useIdentity'\nimport { useRefState } from './useRefState'\n\n/** @internal */\nexport function useLocalStore(\n\toptions: {\n\t\tpersistenceKey?: string\n\t\tsessionId?: string\n\t\tsnapshot?: TLEditorSnapshot | TLStoreSnapshot\n\t} & TLStoreOptions\n): TLStoreWithStatus {\n\tconst [state, setState] = useRefState<TLStoreWithStatus>({ status: 'loading' })\n\n\toptions = useShallowObjectIdentity(options)\n\n\tuseEffect(() => {\n\t\tconst { persistenceKey, sessionId, ...rest } = options\n\n\t\tif (!persistenceKey) {\n\t\t\tsetState({\n\t\t\t\tstatus: 'not-synced',\n\t\t\t\tstore: createTLStore(rest),\n\t\t\t})\n\t\t\treturn\n\t\t}\n\n\t\tsetState({ status: 'loading' })\n\n\t\t// Keyed by asset id rather than record identity so that a record update doesn't mint\n\t\t// another object url for the same blob; every url minted here is revoked on cleanup.\n\t\tconst objectURLCache = new Map<TLAssetId, Promise<string | null>>()\n\t\tconst assets: TLAssetStore = {\n\t\t\tupload: async (asset, file) => {\n\t\t\t\tawait client.db.storeAsset(asset.id, file)\n\t\t\t\treturn { src: asset.id }\n\t\t\t},\n\t\t\tresolve: async (asset) => {\n\t\t\t\tif (!asset.props.src) return null\n\n\t\t\t\tif (asset.props.src.startsWith('asset:')) {\n\t\t\t\t\tlet objectURL = objectURLCache.get(asset.id)\n\t\t\t\t\tif (!objectURL) {\n\t\t\t\t\t\tobjectURL = client.db\n\t\t\t\t\t\t\t.getAsset(asset.id)\n\t\t\t\t\t\t\t.then((blob) => (blob ? URL.createObjectURL(blob) : null))\n\t\t\t\t\t\tobjectURLCache.set(asset.id, objectURL)\n\t\t\t\t\t}\n\t\t\t\t\treturn await objectURL\n\t\t\t\t}\n\n\t\t\t\treturn asset.props.src\n\t\t\t},\n\t\t\tremove: async (assetIds) => {\n\t\t\t\tawait client.db.removeAssets(assetIds)\n\t\t\t},\n\t\t\t...rest.assets,\n\t\t}\n\n\t\tconst store = createTLStore({ ...rest, assets })\n\n\t\tlet isClosed = false\n\n\t\tconst client = new TLLocalSyncClient(store, {\n\t\t\tsessionId,\n\t\t\tpersistenceKey,\n\t\t\tonLoad() {\n\t\t\t\tif (isClosed) return\n\t\t\t\tsetState({ store, status: 'synced-local' })\n\t\t\t},\n\t\t\tonLoadError(err: any) {\n\t\t\t\tif (isClosed) return\n\t\t\t\tsetState({ status: 'error', error: err })\n\t\t\t},\n\t\t})\n\n\t\treturn () => {\n\t\t\tisClosed = true\n\t\t\tclient.close()\n\t\t\tfor (const objectURL of objectURLCache.values()) {\n\t\t\t\tobjectURL.then((url) => url && URL.revokeObjectURL(url), noop)\n\t\t\t}\n\t\t}\n\t}, [options, setState])\n\n\treturn state\n}\n"],
+  "mappings": "AACA,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAyB,qBAAqB;AAG9C,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAGrB,SAAS,cACf,SAKoB;AACpB,QAAM,CAAC,OAAO,QAAQ,IAAI,YAA+B,EAAE,QAAQ,UAAU,CAAC;AAE9E,YAAU,yBAAyB,OAAO;AAE1C,YAAU,MAAM;AACf,UAAM,EAAE,gBAAgB,WAAW,GAAG,KAAK,IAAI;AAE/C,QAAI,CAAC,gBAAgB;AACpB,eAAS;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,cAAc,IAAI;AAAA,MAC1B,CAAC;AACD;AAAA,IACD;AAEA,aAAS,EAAE,QAAQ,UAAU,CAAC;AAI9B,UAAM,iBAAiB,oBAAI,IAAuC;AAClE,UAAM,SAAuB;AAAA,MAC5B,QAAQ,OAAO,OAAO,SAAS;AAC9B,cAAM,OAAO,GAAG,WAAW,MAAM,IAAI,IAAI;AACzC,eAAO,EAAE,KAAK,MAAM,GAAG;AAAA,MACxB;AAAA,MACA,SAAS,OAAO,UAAU;AACzB,YAAI,CAAC,MAAM,MAAM,IAAK,QAAO;AAE7B,YAAI,MAAM,MAAM,IAAI,WAAW,QAAQ,GAAG;AACzC,cAAI,YAAY,eAAe,IAAI,MAAM,EAAE;AAC3C,cAAI,CAAC,WAAW;AACf,wBAAY,OAAO,GACjB,SAAS,MAAM,EAAE,EACjB,KAAK,CAAC,SAAU,OAAO,IAAI,gBAAgB,IAAI,IAAI,IAAK;AAC1D,2BAAe,IAAI,MAAM,IAAI,SAAS;AAAA,UACvC;AACA,iBAAO,MAAM;AAAA,QACd;AAEA,eAAO,MAAM,MAAM;AAAA,MACpB;AAAA,MACA,QAAQ,OAAO,aAAa;AAC3B,cAAM,OAAO,GAAG,aAAa,QAAQ;AAAA,MACtC;AAAA,MACA,GAAG,KAAK;AAAA,IACT;AAEA,UAAM,QAAQ,cAAc,EAAE,GAAG,MAAM,OAAO,CAAC;AAE/C,QAAI,WAAW;AAEf,UAAM,SAAS,IAAI,kBAAkB,OAAO;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,SAAS;AACR,YAAI,SAAU;AACd,iBAAS,EAAE,OAAO,QAAQ,eAAe,CAAC;AAAA,MAC3C;AAAA,MACA,YAAY,KAAU;AACrB,YAAI,SAAU;AACd,iBAAS,EAAE,QAAQ,SAAS,OAAO,IAAI,CAAC;AAAA,MACzC;AAAA,IACD,CAAC;AAED,WAAO,MAAM;AACZ,iBAAW;AACX,aAAO,MAAM;AACb,iBAAW,aAAa,eAAe,OAAO,GAAG;AAChD,kBAAU,KAAK,CAAC,QAAQ,OAAO,IAAI,gBAAgB,GAAG,GAAG,IAAI;AAAA,MAC9D;AAAA,IACD;AAAA,EACD,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SAAO;AACR;",
   "names": []
 }

package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs CHANGED Viewed

@@ -44,6 +44,7 @@ function usePassThroughWheelEvents(ref) {
     const newEvent = new WheelEvent("wheel", e);
     newEvent.isSpecialRedispatchedEvent = true;
     cvs.dispatchEvent(newEvent);
+    e.isSpecialRedispatchedEvent = true;
   });
   const attached = useRef(null);
   useEffect(() => {

package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughWheelEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect, useRef } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\nimport { useEvent } from './useEvent'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tconst onWheel = useEvent((e: WheelEvent) => {\n\t\t// Only pass through wheel events if the editor is focused\n\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\tconst elm = ref.current\n\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\treturn\n\t\t}\n\n\t\tpreventDefault(e)\n\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\tif (!cvs) return\n\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\tcvs.dispatchEvent(newEvent)\n\t})\n\n\t// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`\n\t// gives no notification when its element changes.\n\tconst attached = useRef<HTMLElement | null>(null)\n\n\t// Deliberately no dependency array \u2014 this re-checks the ref after every render of the component\n\t// that owns it, and re-attaches when the element has been swapped. A component that keeps the\n\t// hook mounted while unmounting and remounting the element it points at (a comment pin culled\n\t// while its anchor is off screen, say) would otherwise leave the listener on the discarded node\n\t// and silently lose pass-through once the element comes back.\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (elm === attached.current) return\n\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\tattached.current = elm\n\t\telm?.addEventListener('wheel', onWheel, { passive: false })\n\t})\n\n\t// Teardown is its own effect so the re-attach check above can skip returning a cleanup that\n\t// would tear the listener down and rebuild it on every render.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\t\tattached.current = null\n\t\t}\n\t}, [onWheel])\n}\n"],
-  "mappings": "AAAA,SAAoB,WAAW,cAAc;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,QAAM,UAAU,SAAS,CAAC,MAAkB;AAE3C,QAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,QAAK,EAAU,2BAA4B;AAG3C,UAAM,MAAM,IAAI;AAChB,QAAI,OAAO,qBAAqB,EAAE,QAAQ,GAAG,GAAG;AAC/C;AAAA,IACD;AAEA,mBAAe,CAAC;AAChB,UAAM,MAAM,UAAU,cAAc,YAAY;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,IAAC,SAAiB,6BAA6B;AAChD,QAAI,cAAc,QAAQ;AAAA,EAC3B,CAAC;AAID,QAAM,WAAW,OAA2B,IAAI;AAOhD,YAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAChB,QAAI,QAAQ,SAAS,QAAS;AAC9B,aAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,aAAS,UAAU;AACnB,SAAK,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3D,CAAC;AAID,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,eAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,eAAS,UAAU;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AACb;",
+  "sourcesContent": ["import { RefObject, useEffect, useRef } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\nimport { useEvent } from './useEvent'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tconst onWheel = useEvent((e: WheelEvent) => {\n\t\t// Only pass through wheel events if the editor is focused\n\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\tconst elm = ref.current\n\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\treturn\n\t\t}\n\n\t\tpreventDefault(e)\n\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\tif (!cvs) return\n\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\tcvs.dispatchEvent(newEvent)\n\t\t// Flag the original too: it keeps bubbling, and an enclosing pass-through root (the\n\t\t// navigation panel around the minimap) would otherwise redispatch it a second time.\n\t\t;(e as any).isSpecialRedispatchedEvent = true\n\t})\n\n\t// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`\n\t// gives no notification when its element changes.\n\tconst attached = useRef<HTMLElement | null>(null)\n\n\t// Deliberately no dependency array \u2014 this re-checks the ref after every render of the component\n\t// that owns it, and re-attaches when the element has been swapped. A component that keeps the\n\t// hook mounted while unmounting and remounting the element it points at (a comment pin culled\n\t// while its anchor is off screen, say) would otherwise leave the listener on the discarded node\n\t// and silently lose pass-through once the element comes back.\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (elm === attached.current) return\n\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\tattached.current = elm\n\t\telm?.addEventListener('wheel', onWheel, { passive: false })\n\t})\n\n\t// Teardown is its own effect so the re-attach check above can skip returning a cleanup that\n\t// would tear the listener down and rebuild it on every render.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\t\tattached.current = null\n\t\t}\n\t}, [onWheel])\n}\n"],
+  "mappings": "AAAA,SAAoB,WAAW,cAAc;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,QAAM,UAAU,SAAS,CAAC,MAAkB;AAE3C,QAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,QAAK,EAAU,2BAA4B;AAG3C,UAAM,MAAM,IAAI;AAChB,QAAI,OAAO,qBAAqB,EAAE,QAAQ,GAAG,GAAG;AAC/C;AAAA,IACD;AAEA,mBAAe,CAAC;AAChB,UAAM,MAAM,UAAU,cAAc,YAAY;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,IAAC,SAAiB,6BAA6B;AAChD,QAAI,cAAc,QAAQ;AAGzB,IAAC,EAAU,6BAA6B;AAAA,EAC1C,CAAC;AAID,QAAM,WAAW,OAA2B,IAAI;AAOhD,YAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAChB,QAAI,QAAQ,SAAS,QAAS;AAC9B,aAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,aAAS,UAAU;AACnB,SAAK,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3D,CAAC;AAID,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,eAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,eAAS,UAAU;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AACb;",
   "names": []
 }