npm - @tldraw/editor - Versions diffs - 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04 - Mend

@tldraw/editor 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

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 (206) hide show

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)\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\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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",
   "names": []
 }

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

@@ -1,36 +1,21 @@
-import { useEffect } from "react";
-import { tlenv } from "../globals/environment.mjs";
+import { unsafe__withoutCapture } from "@tldraw/state";
+import { useReactor } from "@tldraw/state-react";
+import { tlenvReactive } from "../globals/environment.mjs";
 import { useEditor } from "./useEditor.mjs";
 function useCoarsePointer() {
   const editor = useEditor();
-  useEffect(() => {
-    let isCoarse = editor.getInstanceState().isCoarsePointer;
-    const handlePointerDown = (e) => {
-      const isCoarseEvent = e.pointerType !== "mouse";
-      if (isCoarse === isCoarseEvent) return;
-      isCoarse = isCoarseEvent;
-      editor.updateInstanceState({ isCoarsePointer: isCoarseEvent });
-    };
-    window.addEventListener("pointerdown", handlePointerDown, { capture: true });
-    const mql = window.matchMedia && window.matchMedia("(any-pointer: coarse)");
-    const isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos;
-    const handleMediaQueryChange = () => {
-      const next = isForcedFinePointer ? false : mql.matches;
-      if (isCoarse !== next) return;
-      isCoarse = next;
-      editor.updateInstanceState({ isCoarsePointer: next });
-    };
-    if (mql) {
-      mql.addEventListener("change", handleMediaQueryChange);
-      handleMediaQueryChange();
-    }
-    return () => {
-      window.removeEventListener("pointerdown", handlePointerDown, { capture: true });
-      if (mql) {
-        mql.removeEventListener("change", handleMediaQueryChange);
-      }
-    };
-  }, [editor]);
+  useReactor(
+    "coarse pointer change",
+    () => {
+      const isCoarsePointer = tlenvReactive.get().isCoarsePointer;
+      const isInstanceStateCoarsePointer = unsafe__withoutCapture(
+        () => editor.getInstanceState().isCoarsePointer
+      );
+      if (isCoarsePointer === isInstanceStateCoarsePointer) return;
+      editor.updateInstanceState({ isCoarsePointer });
+    },
+    [editor]
+  );
 }
 export {
   useCoarsePointer

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useCoarsePointer.ts"],
-  "sourcesContent": ["import { useEffect } from 'react'\nimport { tlenv } from '../globals/environment'\nimport { useEditor } from './useEditor'\n\n/** @internal */\nexport function useCoarsePointer() {\n\tconst editor = useEditor()\n\n\tuseEffect(() => {\n\t\t// We'll track our own state for the pointer type\n\t\tlet isCoarse = editor.getInstanceState().isCoarsePointer\n\n\t\t// 1.\n\t\t// We'll use pointer events to detect coarse pointer.\n\n\t\tconst handlePointerDown = (e: PointerEvent) => {\n\t\t\t// when the user interacts with a mouse, we assume they have a fine pointer.\n\t\t\t// otherwise, we assume they have a coarse pointer.\n\t\t\tconst isCoarseEvent = e.pointerType !== 'mouse'\n\t\t\tif (isCoarse === isCoarseEvent) return\n\t\t\tisCoarse = isCoarseEvent\n\t\t\teditor.updateInstanceState({ isCoarsePointer: isCoarseEvent })\n\t\t}\n\n\t\t// we need `capture: true` here because the tldraw component itself stops propagation on\n\t\t// pointer events it receives.\n\t\twindow.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\n\t\t// 2.\n\t\t// We can also use the media query to detect / set the initial pointer type\n\t\t// and update the state if the pointer type changes.\n\n\t\t// We want the touch / mouse events to run even if the browser does not\n\t\t// support matchMedia. We'll have to handle the media query changes\n\t\t// conditionally in the code below.\n\t\tconst mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')\n\n\t\t// This is a workaround for a Firefox bug where we don't correctly\n\t\t// detect coarse VS fine pointer. For now, let's assume that you have a fine\n\t\t// pointer if you're on Firefox on desktop.\n\t\tconst isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos\n\n\t\tconst handleMediaQueryChange = () => {\n\t\t\tconst next = isForcedFinePointer ? false : mql.matches // get the value from the media query\n\t\t\tif (isCoarse !== next) return // bail if the value hasn't changed\n\t\t\tisCoarse = next // update the local value\n\t\t\teditor.updateInstanceState({ isCoarsePointer: next }) // update the value in state\n\t\t}\n\n\t\tif (mql) {\n\t\t\t// set up the listener\n\t\t\tmql.addEventListener('change', handleMediaQueryChange)\n\n\t\t\t// and run the handler once to set the initial value\n\t\t\thandleMediaQueryChange()\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\n\t\t\tif (mql) {\n\t\t\t\tmql.removeEventListener('change', handleMediaQueryChange)\n\t\t\t}\n\t\t}\n\t}, [editor])\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAGnB,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AAEf,QAAI,WAAW,OAAO,iBAAiB,EAAE;AAKzC,UAAM,oBAAoB,CAAC,MAAoB;AAG9C,YAAM,gBAAgB,EAAE,gBAAgB;AACxC,UAAI,aAAa,cAAe;AAChC,iBAAW;AACX,aAAO,oBAAoB,EAAE,iBAAiB,cAAc,CAAC;AAAA,IAC9D;AAIA,WAAO,iBAAiB,eAAe,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAS3E,UAAM,MAAM,OAAO,cAAc,OAAO,WAAW,uBAAuB;AAK1E,UAAM,sBAAsB,MAAM,aAAa,CAAC,MAAM,aAAa,CAAC,MAAM;AAE1E,UAAM,yBAAyB,MAAM;AACpC,YAAM,OAAO,sBAAsB,QAAQ,IAAI;AAC/C,UAAI,aAAa,KAAM;AACvB,iBAAW;AACX,aAAO,oBAAoB,EAAE,iBAAiB,KAAK,CAAC;AAAA,IACrD;AAEA,QAAI,KAAK;AAER,UAAI,iBAAiB,UAAU,sBAAsB;AAGrD,6BAAuB;AAAA,IACxB;AAEA,WAAO,MAAM;AACZ,aAAO,oBAAoB,eAAe,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAE9E,UAAI,KAAK;AACR,YAAI,oBAAoB,UAAU,sBAAsB;AAAA,MACzD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AACZ;",
+  "sourcesContent": ["import { unsafe__withoutCapture } from '@tldraw/state'\nimport { useReactor } from '@tldraw/state-react'\nimport { tlenvReactive } from '../globals/environment'\nimport { useEditor } from './useEditor'\n\n/** @internal */\nexport function useCoarsePointer() {\n\tconst editor = useEditor()\n\n\t// When the coarse pointer state changes, update the instance state\n\tuseReactor(\n\t\t'coarse pointer change',\n\t\t() => {\n\t\t\tconst isCoarsePointer = tlenvReactive.get().isCoarsePointer\n\t\t\tconst isInstanceStateCoarsePointer = unsafe__withoutCapture(\n\t\t\t\t() => editor.getInstanceState().isCoarsePointer\n\t\t\t)\n\t\t\tif (isCoarsePointer === isInstanceStateCoarsePointer) return\n\t\t\teditor.updateInstanceState({ isCoarsePointer: isCoarsePointer })\n\t\t},\n\t\t[editor]\n\t)\n}\n"],
+  "mappings": "AAAA,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAGnB,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AAGzB;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,kBAAkB,cAAc,IAAI,EAAE;AAC5C,YAAM,+BAA+B;AAAA,QACpC,MAAM,OAAO,iBAAiB,EAAE;AAAA,MACjC;AACA,UAAI,oBAAoB,6BAA8B;AACtD,aAAO,oBAAoB,EAAE,gBAAiC,CAAC;AAAA,IAChE;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AACD;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import { useAtom } from "@tldraw/state-react";
 import { assert } from "@tldraw/utils";
 import { useCallback, useDebugValue, useLayoutEffect, useRef } from "react";
 function useEvent(handler) {
-  const handlerRef = useRef();
+  const handlerRef = useRef(void 0);
   useLayoutEffect(() => {
     handlerRef.current = handler;
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useEvent.tsx"],
-  "sourcesContent": ["import { useAtom } from '@tldraw/state-react'\nimport { assert } from '@tldraw/utils'\nimport { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'\n\n/**\n * Allows you to define event handlers that can read the latest props/state but has a stable\n * function identity.\n *\n * These event callbacks may not be called in React render functions! An error won't be thrown, but\n * in the real implementation it would be!\n *\n * Uses a modified version of the user-land implementation included in the [`useEvent()` RFC][1].\n * Our version until such a hook is available natively.\n *\n * The RFC was closed on 27 September 2022, the React team plans to come up with a new RFC to\n * provide similar functionality in the future. We will migrate to this functionality when\n * available.\n *\n * IMPORTANT CAVEAT: You should not call event callbacks in layout effects of React component\n * children! Internally this hook uses a layout effect and parent component layout effects run after\n * child component layout effects. Use this hook responsibly.\n *\n * [1]: https://github.com/reactjs/rfcs/pull/220\n *\n * @internal\n */\nexport function useEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerRef = useRef<(...args: Args) => Result>()\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerRef.current = handler\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback((...args: Args) => {\n\t\t// In a real implementation, this would throw if called during render\n\t\tconst fn = handlerRef.current\n\t\tassert(fn, 'fn does not exist')\n\t\treturn fn(...args)\n\t}, [])\n}\n\n/**\n * like {@link useEvent}, but for use in reactive contexts - when the handler function changes, it\n * will invalidate any reactive contexts that call it.\n * @internal\n */\nexport function useReactiveEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerAtom = useAtom<(...args: Args) => Result>('useReactiveEvent', () => handler)\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerAtom.set(handler)\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback(\n\t\t(...args: Args) => {\n\t\t\t// In a real implementation, this would throw if called during render\n\t\t\tconst fn = handlerAtom.get()\n\t\t\tassert(fn, 'fn does not exist')\n\t\t\treturn fn(...args)\n\t\t},\n\t\t[handlerAtom]\n\t)\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa,eAAe,iBAAiB,cAAc;AAwB7D,SAAS,SACf,SAC4B;AAC5B,QAAM,aAAa,OAAkC;AAGrD,kBAAgB,MAAM;AACrB,eAAW,UAAU;AAAA,EACtB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO,YAAY,IAAI,SAAe;AAErC,UAAM,KAAK,WAAW;AACtB,WAAO,IAAI,mBAAmB;AAC9B,WAAO,GAAG,GAAG,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AACN;AAOO,SAAS,iBACf,SAC4B;AAC5B,QAAM,cAAc,QAAmC,oBAAoB,MAAM,OAAO;AAGxF,kBAAgB,MAAM;AACrB,gBAAY,IAAI,OAAO;AAAA,EACxB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO;AAAA,IACN,IAAI,SAAe;AAElB,YAAM,KAAK,YAAY,IAAI;AAC3B,aAAO,IAAI,mBAAmB;AAC9B,aAAO,GAAG,GAAG,IAAI;AAAA,IAClB;AAAA,IACA,CAAC,WAAW;AAAA,EACb;AACD;",
+  "sourcesContent": ["import { useAtom } from '@tldraw/state-react'\nimport { assert } from '@tldraw/utils'\nimport { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'\n\n/**\n * Allows you to define event handlers that can read the latest props/state but has a stable\n * function identity.\n *\n * These event callbacks may not be called in React render functions! An error won't be thrown, but\n * in the real implementation it would be!\n *\n * Uses a modified version of the user-land implementation included in the [`useEvent()` RFC][1].\n * Our version until such a hook is available natively.\n *\n * The RFC was closed on 27 September 2022, the React team plans to come up with a new RFC to\n * provide similar functionality in the future. We will migrate to this functionality when\n * available.\n *\n * IMPORTANT CAVEAT: You should not call event callbacks in layout effects of React component\n * children! Internally this hook uses a layout effect and parent component layout effects run after\n * child component layout effects. Use this hook responsibly.\n *\n * [1]: https://github.com/reactjs/rfcs/pull/220\n *\n * @internal\n */\nexport function useEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerRef = useRef<((...args: Args) => Result) | undefined>(undefined)\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerRef.current = handler\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback((...args: Args) => {\n\t\t// In a real implementation, this would throw if called during render\n\t\tconst fn = handlerRef.current\n\t\tassert(fn, 'fn does not exist')\n\t\treturn fn(...args)\n\t}, [])\n}\n\n/**\n * like {@link useEvent}, but for use in reactive contexts - when the handler function changes, it\n * will invalidate any reactive contexts that call it.\n * @internal\n */\nexport function useReactiveEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerAtom = useAtom<(...args: Args) => Result>('useReactiveEvent', () => handler)\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerAtom.set(handler)\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback(\n\t\t(...args: Args) => {\n\t\t\t// In a real implementation, this would throw if called during render\n\t\t\tconst fn = handlerAtom.get()\n\t\t\tassert(fn, 'fn does not exist')\n\t\t\treturn fn(...args)\n\t\t},\n\t\t[handlerAtom]\n\t)\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa,eAAe,iBAAiB,cAAc;AAwB7D,SAAS,SACf,SAC4B;AAC5B,QAAM,aAAa,OAAgD,MAAS;AAG5E,kBAAgB,MAAM;AACrB,eAAW,UAAU;AAAA,EACtB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO,YAAY,IAAI,SAAe;AAErC,UAAM,KAAK,WAAW;AACtB,WAAO,IAAI,mBAAmB;AAC9B,WAAO,GAAG,GAAG,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AACN;AAOO,SAAS,iBACf,SAC4B;AAC5B,QAAM,cAAc,QAAmC,oBAAoB,MAAM,OAAO;AAGxF,kBAAgB,MAAM;AACrB,gBAAY,IAAI,OAAO;AAAA,EACxB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO;AAAA,IACN,IAAI,SAAe;AAElB,YAAM,KAAK,YAAY,IAAI;AAC3B,aAAO,IAAI,mBAAmB;AAC9B,aAAO,GAAG,GAAG,IAAI;AAAA,IAClB;AAAA,IACA,CAAC,WAAW;AAAA,EACb;AACD;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts"],
-  "sourcesContent": ["import { useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useEditor } from './useEditor'\n\nconst IGNORED_TAGS = ['textarea', 'input']\n\n/**\n * When double tapping with the pencil in iOS, it enables a little zoom window in the UI. We don't\n * want this for drawing operations and can disable it by setting 'disableDoubleTapZoom' in the main\n * editor.\n */\nexport function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement>) {\n\tconst editor = useEditor()\n\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\n\t\tif (!elm) return\n\n\t\tconst handleEvent = (e: PointerEvent | TouchEvent) => {\n\t\t\tif (e instanceof PointerEvent && e.pointerType === 'pen') {\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tconst { target } = e\n\n\t\t\t\t// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input\n\t\t\t\tif (\n\t\t\t\t\tIGNORED_TAGS.includes((target as Element).tagName?.toLocaleLowerCase()) ||\n\t\t\t\t\t(target as HTMLElement).isContentEditable ||\n\t\t\t\t\teditor.isIn('select.editing_shape')\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\t\t}\n\n\t\telm.addEventListener('touchstart', handleEvent)\n\t\telm.addEventListener('touchend', handleEvent)\n\t\treturn () => {\n\t\t\telm.removeEventListener('touchstart', handleEvent)\n\t\t\telm.removeEventListener('touchend', handleEvent)\n\t\t}\n\t}, [editor, ref])\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAE1B,MAAM,eAAe,CAAC,YAAY,OAAO;AAOlC,SAAS,sCAAsC,KAAmC;AACxF,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAEhB,QAAI,CAAC,IAAK;AAEV,UAAM,cAAc,CAAC,MAAiC;AACrD,UAAI,aAAa,gBAAgB,EAAE,gBAAgB,OAAO;AACzD,eAAO,mBAAmB,CAAC;AAC3B,cAAM,EAAE,OAAO,IAAI;AAGnB,YACC,aAAa,SAAU,OAAmB,SAAS,kBAAkB,CAAC,KACrE,OAAuB,qBACxB,OAAO,KAAK,sBAAsB,GACjC;AACD;AAAA,QACD;AAEA,uBAAe,CAAC;AAAA,MACjB;AAAA,IACD;AAEA,QAAI,iBAAiB,cAAc,WAAW;AAC9C,QAAI,iBAAiB,YAAY,WAAW;AAC5C,WAAO,MAAM;AACZ,UAAI,oBAAoB,cAAc,WAAW;AACjD,UAAI,oBAAoB,YAAY,WAAW;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,QAAQ,GAAG,CAAC;AACjB;",
+  "sourcesContent": ["import { useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useEditor } from './useEditor'\n\nconst IGNORED_TAGS = ['textarea', 'input']\n\n/**\n * When double tapping with the pencil in iOS, it enables a little zoom window in the UI. We don't\n * want this for drawing operations and can disable it by setting 'disableDoubleTapZoom' in the main\n * editor.\n */\nexport function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement | null>) {\n\tconst editor = useEditor()\n\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\n\t\tif (!elm) return\n\n\t\tconst handleEvent = (e: PointerEvent | TouchEvent) => {\n\t\t\tif (e instanceof PointerEvent && e.pointerType === 'pen') {\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tconst { target } = e\n\n\t\t\t\t// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input\n\t\t\t\tif (\n\t\t\t\t\tIGNORED_TAGS.includes((target as Element).tagName?.toLocaleLowerCase()) ||\n\t\t\t\t\t(target as HTMLElement).isContentEditable ||\n\t\t\t\t\teditor.isIn('select.editing_shape')\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\t\t}\n\n\t\telm.addEventListener('touchstart', handleEvent)\n\t\telm.addEventListener('touchend', handleEvent)\n\t\treturn () => {\n\t\t\telm.removeEventListener('touchstart', handleEvent)\n\t\t\telm.removeEventListener('touchend', handleEvent)\n\t\t}\n\t}, [editor, ref])\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAE1B,MAAM,eAAe,CAAC,YAAY,OAAO;AAOlC,SAAS,sCAAsC,KAA0C;AAC/F,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAEhB,QAAI,CAAC,IAAK;AAEV,UAAM,cAAc,CAAC,MAAiC;AACrD,UAAI,aAAa,gBAAgB,EAAE,gBAAgB,OAAO;AACzD,eAAO,mBAAmB,CAAC;AAC3B,cAAM,EAAE,OAAO,IAAI;AAGnB,YACC,aAAa,SAAU,OAAmB,SAAS,kBAAkB,CAAC,KACrE,OAAuB,qBACxB,OAAO,KAAK,sBAAsB,GACjC;AACD;AAAA,QACD;AAEA,uBAAe,CAAC;AAAA,MACjB;AAAA,IACD;AAEA,QAAI,iBAAiB,cAAc,WAAW;AAC9C,QAAI,iBAAiB,YAAY,WAAW;AAC5C,WAAO,MAAM;AACZ,UAAI,oBAAoB,cAAc,WAAW;AACjD,UAAI,oBAAoB,YAAY,WAAW;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,QAAQ,GAAG,CAAC;AACjB;",
   "names": []
 }

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

@@ -38,7 +38,7 @@ function useGestureEvents(ref) {
           const util = editor.getShapeUtil(shape);
           if (util.canScroll(shape)) {
             const bounds = editor.getShapePageBounds(editingShapeId);
-            if (bounds?.containsPoint(editor.inputs.currentPagePoint)) {
+            if (bounds?.containsPoint(editor.inputs.getCurrentPagePoint())) {
               return;
             }
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useGestureEvents.ts"],
-  "sourcesContent": ["import type { AnyHandlerEventTypes, EventTypes, GestureKey, Handler } from '@use-gesture/core/types'\nimport { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'\nimport * as React from 'react'\nimport { TLWheelEventInfo } from '../editor/types/event-types'\nimport { Vec } from '../primitives/Vec'\nimport { preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { normalizeWheel } from '../utils/normalizeWheel'\nimport { useEditor } from './useEditor'\n\n/*\n\n# How does pinching work?\n\nThe pinching handler is fired under two circumstances: \n- when a user is on a MacBook trackpad and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is PANNING with two fingers\n\nZooming is much more expensive than panning (because it causes shapes to render), \nso we want to be sure that we don't zoom while two-finger panning. \n\nIn order to do this, we keep track of a \"pinchState\", which is either:\n- \"zooming\"\n- \"panning\"\n- \"not sure\"\n\nIf a user is on a trackpad, the pinchState will be set to \"zooming\". \n\nIf the user is on a touch screen, then we start in the \"not sure\" state and switch back and forth\nbetween \"zooming\", \"panning\", and \"not sure\" based on what the user is doing with their fingers.\n\nIn the \"not sure\" state, we examine whether the user has moved the center of the gesture far enough\nto suggest that they're panning; or else that they've moved their fingers further apart or closer\ntogether enough to suggest that they're zooming. \n\nIn the \"panning\" state, we check whether the user's fingers have moved far enough apart to suggest\nthat they're zooming. If they have, we switch to the \"zooming\" state.\n\nIn the \"zooming\" state, we just stay zooming\u2014it's not YET possible to switch back to panning.\n\ntodo: compare velocities of change in order to determine whether the user has switched back to panning\n*/\n\ntype check<T extends AnyHandlerEventTypes, Key extends GestureKey> = undefined extends T[Key]\n\t? EventTypes[Key]\n\t: T[Key]\ntype PinchHandler = Handler<'pinch', check<EventTypes, 'pinch'>>\n\nconst useGesture = createUseGesture([wheelAction, pinchAction])\n\n/**\n * GOTCHA\n *\n * UseGesture fires a wheel event 140ms after the gesture actually ends, with a momentum-adjusted\n * delta. This creates a messed up interaction where after you stop scrolling suddenly the dang page\n * jumps a tick. why do they do this? you are asking the wrong person. it seems intentional though.\n * anyway we want to ignore that last event, but there's no way to directly detect it so we need to\n * keep track of timestamps. Yes this is awful, I am sorry.\n */\nlet lastWheelTime = undefined as undefined | number\n\nconst isWheelEndEvent = (time: number) => {\n\tif (lastWheelTime === undefined) {\n\t\tlastWheelTime = time\n\t\treturn false\n\t}\n\n\tif (time - lastWheelTime > 120 && time - lastWheelTime < 160) {\n\t\tlastWheelTime = time\n\t\treturn true\n\t}\n\n\tlastWheelTime = time\n\treturn false\n}\n\nexport function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {\n\tconst editor = useEditor()\n\n\tconst events = React.useMemo(() => {\n\t\tlet pinchState = 'not sure' as 'not sure' | 'zooming' | 'panning'\n\n\t\tconst onWheel: Handler<'wheel', WheelEvent> = ({ event }) => {\n\t\t\tif (!editor.getInstanceState().isFocused) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\tif (isWheelEndEvent(Date.now())) {\n\t\t\t\t// ignore wheelEnd events\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Awful tht we need to put this logic here, but basically\n\t\t\t// we don't want to handle the the wheel event (or call prevent\n\t\t\t// default on the evnet) if the user is wheeling over an a shape\n\t\t\t// that is scrollable which they're currently editing.\n\n\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\tif (editingShapeId) {\n\t\t\t\tconst shape = editor.getShape(editingShapeId)\n\t\t\t\tif (shape) {\n\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\tif (util.canScroll(shape)) {\n\t\t\t\t\t\tconst bounds = editor.getShapePageBounds(editingShapeId)\n\t\t\t\t\t\tif (bounds?.containsPoint(editor.inputs.currentPagePoint)) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreventDefault(event)\n\t\t\tevent.stopPropagation()\n\t\t\tconst delta = normalizeWheel(event)\n\n\t\t\tif (delta.x === 0 && delta.y === 0) return\n\n\t\t\tconst info: TLWheelEventInfo = {\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta,\n\t\t\t\tpoint: new Vec(event.clientX, event.clientY),\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tlet initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts\n\t\tlet initZoom = 1 // the browser's zoom level when the pinch starts\n\t\tlet currDistanceBetweenFingers = 0\n\t\tconst initPointBetweenFingers = new Vec()\n\t\tconst prevPointBetweenFingers = new Vec()\n\n\t\tconst onPinchStart: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tpinchState = 'not sure'\n\n\t\t\tconst { event, origin, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\t\t\tinitPointBetweenFingers.x = origin[0]\n\t\t\tinitPointBetweenFingers.y = origin[1]\n\t\t\tinitDistanceBetweenFingers = da[0]\n\t\t\tinitZoom = editor.getZoomLevel()\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pinch',\n\t\t\t\tname: 'pinch_start',\n\t\t\t\tpoint: { x: origin[0], y: origin[1], z: editor.getZoomLevel() },\n\t\t\t\tdelta: { x: 0, y: 0 },\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t})\n\t\t}\n\n\t\t// let timeout: any\n\t\tconst updatePinchState = (isSafariTrackpadPinch: boolean) => {\n\t\t\tif (isSafariTrackpadPinch) {\n\t\t\t\tpinchState = 'zooming'\n\t\t\t}\n\n\t\t\tif (pinchState === 'zooming') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Initial: [touch]-------origin-------[touch]\n\t\t\t// Current: [touch]-----------origin----------[touch]\n\t\t\t//                          |----|     |------------|\n\t\t\t//             originDistance ^           ^ touchDistance\n\n\t\t\t// How far have the two touch points moved towards or away from eachother?\n\t\t\tconst touchDistance = Math.abs(currDistanceBetweenFingers - initDistanceBetweenFingers)\n\t\t\t// How far has the point between the touches moved?\n\t\t\tconst originDistance = Vec.Dist(initPointBetweenFingers, prevPointBetweenFingers)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'not sure': {\n\t\t\t\t\tif (touchDistance > 24) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t} else if (originDistance > 16) {\n\t\t\t\t\t\tpinchState = 'panning'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\t// Slightly more touch distance needed to go from panning to zooming\n\t\t\t\t\tif (touchDistance > 64) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinch: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\t// In (desktop) Safari, a two finger trackpad pinch will be a \"gesturechange\" event\n\t\t\t// and will have 0 touches; on iOS, a two-finger pinch will be a \"pointermove\" event\n\t\t\t// with two touches.\n\t\t\tconst isSafariTrackpadPinch =\n\t\t\t\tgesture.type === 'gesturechange' || gesture.type === 'gestureend'\n\n\t\t\t// The distance between the two touch points\n\t\t\tcurrDistanceBetweenFingers = da[0]\n\n\t\t\t// Only update the zoom if the pointers are far enough apart;\n\t\t\t// a very small touchDistance means that the user has probably\n\t\t\t// pinched out and their fingers are touching; this produces\n\t\t\t// very unstable zooming behavior.\n\n\t\t\tconst dx = origin[0] - prevPointBetweenFingers.x\n\t\t\tconst dy = origin[1] - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\n\t\t\tupdatePinchState(isSafariTrackpadPinch)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'zooming': {\n\t\t\t\t\tconst currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: currZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: initZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinchEnd: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tconst scale = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\tname: 'pinch_end',\n\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: scale },\n\t\t\t\t\tdelta: { x: origin[0], y: origin[1] },\n\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonWheel,\n\t\t\tonPinchStart,\n\t\t\tonPinchEnd,\n\t\t\tonPinch,\n\t\t}\n\t}, [editor, ref])\n\n\tuseGesture(events, {\n\t\ttarget: ref,\n\t\teventOptions: { passive: false },\n\t\tpinch: {\n\t\t\tfrom: () => {\n\t\t\t\tconst { zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst level = editor.getZoomLevel() ** (1 / zoomSpeed)\n\t\t\t\treturn [level, 0]\n\t\t\t}, // Return the camera z to use when pinch starts\n\t\t\tscaleBounds: () => {\n\t\t\t\tconst baseZoom = editor.getBaseZoom()\n\t\t\t\tconst { zoomSteps, zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst zoomMin = zoomSteps[0] * baseZoom\n\t\t\t\tconst zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom\n\n\t\t\t\treturn {\n\t\t\t\t\tmax: zoomMax ** (1 / zoomSpeed),\n\t\t\t\t\tmin: zoomMin ** (1 / zoomSpeed),\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t})\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AnyHandlerEventTypes, EventTypes, GestureKey, Handler } from '@use-gesture/core/types'\nimport { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'\nimport * as React from 'react'\nimport { TLWheelEventInfo } from '../editor/types/event-types'\nimport { Vec } from '../primitives/Vec'\nimport { preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { normalizeWheel } from '../utils/normalizeWheel'\nimport { useEditor } from './useEditor'\n\n/*\n\n# How does pinching work?\n\nThe pinching handler is fired under two circumstances: \n- when a user is on a MacBook trackpad and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is PANNING with two fingers\n\nZooming is much more expensive than panning (because it causes shapes to render), \nso we want to be sure that we don't zoom while two-finger panning. \n\nIn order to do this, we keep track of a \"pinchState\", which is either:\n- \"zooming\"\n- \"panning\"\n- \"not sure\"\n\nIf a user is on a trackpad, the pinchState will be set to \"zooming\". \n\nIf the user is on a touch screen, then we start in the \"not sure\" state and switch back and forth\nbetween \"zooming\", \"panning\", and \"not sure\" based on what the user is doing with their fingers.\n\nIn the \"not sure\" state, we examine whether the user has moved the center of the gesture far enough\nto suggest that they're panning; or else that they've moved their fingers further apart or closer\ntogether enough to suggest that they're zooming. \n\nIn the \"panning\" state, we check whether the user's fingers have moved far enough apart to suggest\nthat they're zooming. If they have, we switch to the \"zooming\" state.\n\nIn the \"zooming\" state, we just stay zooming\u2014it's not YET possible to switch back to panning.\n\ntodo: compare velocities of change in order to determine whether the user has switched back to panning\n*/\n\ntype check<T extends AnyHandlerEventTypes, Key extends GestureKey> = undefined extends T[Key]\n\t? EventTypes[Key]\n\t: T[Key]\ntype PinchHandler = Handler<'pinch', check<EventTypes, 'pinch'>>\n\nconst useGesture = createUseGesture([wheelAction, pinchAction])\n\n/**\n * GOTCHA\n *\n * UseGesture fires a wheel event 140ms after the gesture actually ends, with a momentum-adjusted\n * delta. This creates a messed up interaction where after you stop scrolling suddenly the dang page\n * jumps a tick. why do they do this? you are asking the wrong person. it seems intentional though.\n * anyway we want to ignore that last event, but there's no way to directly detect it so we need to\n * keep track of timestamps. Yes this is awful, I am sorry.\n */\nlet lastWheelTime = undefined as undefined | number\n\nconst isWheelEndEvent = (time: number) => {\n\tif (lastWheelTime === undefined) {\n\t\tlastWheelTime = time\n\t\treturn false\n\t}\n\n\tif (time - lastWheelTime > 120 && time - lastWheelTime < 160) {\n\t\tlastWheelTime = time\n\t\treturn true\n\t}\n\n\tlastWheelTime = time\n\treturn false\n}\n\nexport function useGestureEvents(ref: React.RefObject<HTMLDivElement | null>) {\n\tconst editor = useEditor()\n\n\tconst events = React.useMemo(() => {\n\t\tlet pinchState = 'not sure' as 'not sure' | 'zooming' | 'panning'\n\n\t\tconst onWheel: Handler<'wheel', WheelEvent> = ({ event }) => {\n\t\t\tif (!editor.getInstanceState().isFocused) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\tif (isWheelEndEvent(Date.now())) {\n\t\t\t\t// ignore wheelEnd events\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Awful tht we need to put this logic here, but basically\n\t\t\t// we don't want to handle the the wheel event (or call prevent\n\t\t\t// default on the evnet) if the user is wheeling over an a shape\n\t\t\t// that is scrollable which they're currently editing.\n\n\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\tif (editingShapeId) {\n\t\t\t\tconst shape = editor.getShape(editingShapeId)\n\t\t\t\tif (shape) {\n\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\tif (util.canScroll(shape)) {\n\t\t\t\t\t\tconst bounds = editor.getShapePageBounds(editingShapeId)\n\t\t\t\t\t\tif (bounds?.containsPoint(editor.inputs.getCurrentPagePoint())) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreventDefault(event)\n\t\t\tevent.stopPropagation()\n\t\t\tconst delta = normalizeWheel(event)\n\n\t\t\tif (delta.x === 0 && delta.y === 0) return\n\n\t\t\tconst info: TLWheelEventInfo = {\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta,\n\t\t\t\tpoint: new Vec(event.clientX, event.clientY),\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tlet initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts\n\t\tlet initZoom = 1 // the browser's zoom level when the pinch starts\n\t\tlet currDistanceBetweenFingers = 0\n\t\tconst initPointBetweenFingers = new Vec()\n\t\tconst prevPointBetweenFingers = new Vec()\n\n\t\tconst onPinchStart: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tpinchState = 'not sure'\n\n\t\t\tconst { event, origin, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\t\t\tinitPointBetweenFingers.x = origin[0]\n\t\t\tinitPointBetweenFingers.y = origin[1]\n\t\t\tinitDistanceBetweenFingers = da[0]\n\t\t\tinitZoom = editor.getZoomLevel()\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pinch',\n\t\t\t\tname: 'pinch_start',\n\t\t\t\tpoint: { x: origin[0], y: origin[1], z: editor.getZoomLevel() },\n\t\t\t\tdelta: { x: 0, y: 0 },\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t})\n\t\t}\n\n\t\t// let timeout: any\n\t\tconst updatePinchState = (isSafariTrackpadPinch: boolean) => {\n\t\t\tif (isSafariTrackpadPinch) {\n\t\t\t\tpinchState = 'zooming'\n\t\t\t}\n\n\t\t\tif (pinchState === 'zooming') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Initial: [touch]-------origin-------[touch]\n\t\t\t// Current: [touch]-----------origin----------[touch]\n\t\t\t//                          |----|     |------------|\n\t\t\t//             originDistance ^           ^ touchDistance\n\n\t\t\t// How far have the two touch points moved towards or away from eachother?\n\t\t\tconst touchDistance = Math.abs(currDistanceBetweenFingers - initDistanceBetweenFingers)\n\t\t\t// How far has the point between the touches moved?\n\t\t\tconst originDistance = Vec.Dist(initPointBetweenFingers, prevPointBetweenFingers)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'not sure': {\n\t\t\t\t\tif (touchDistance > 24) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t} else if (originDistance > 16) {\n\t\t\t\t\t\tpinchState = 'panning'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\t// Slightly more touch distance needed to go from panning to zooming\n\t\t\t\t\tif (touchDistance > 64) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinch: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\t// In (desktop) Safari, a two finger trackpad pinch will be a \"gesturechange\" event\n\t\t\t// and will have 0 touches; on iOS, a two-finger pinch will be a \"pointermove\" event\n\t\t\t// with two touches.\n\t\t\tconst isSafariTrackpadPinch =\n\t\t\t\tgesture.type === 'gesturechange' || gesture.type === 'gestureend'\n\n\t\t\t// The distance between the two touch points\n\t\t\tcurrDistanceBetweenFingers = da[0]\n\n\t\t\t// Only update the zoom if the pointers are far enough apart;\n\t\t\t// a very small touchDistance means that the user has probably\n\t\t\t// pinched out and their fingers are touching; this produces\n\t\t\t// very unstable zooming behavior.\n\n\t\t\tconst dx = origin[0] - prevPointBetweenFingers.x\n\t\t\tconst dy = origin[1] - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\n\t\t\tupdatePinchState(isSafariTrackpadPinch)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'zooming': {\n\t\t\t\t\tconst currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: currZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: initZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinchEnd: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tconst scale = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\tname: 'pinch_end',\n\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: scale },\n\t\t\t\t\tdelta: { x: origin[0], y: origin[1] },\n\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonWheel,\n\t\t\tonPinchStart,\n\t\t\tonPinchEnd,\n\t\t\tonPinch,\n\t\t}\n\t}, [editor, ref])\n\n\tuseGesture(events, {\n\t\ttarget: ref,\n\t\teventOptions: { passive: false },\n\t\tpinch: {\n\t\t\tfrom: () => {\n\t\t\t\tconst { zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst level = editor.getZoomLevel() ** (1 / zoomSpeed)\n\t\t\t\treturn [level, 0]\n\t\t\t}, // Return the camera z to use when pinch starts\n\t\t\tscaleBounds: () => {\n\t\t\t\tconst baseZoom = editor.getBaseZoom()\n\t\t\t\tconst { zoomSteps, zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst zoomMin = zoomSteps[0] * baseZoom\n\t\t\t\tconst zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom\n\n\t\t\t\treturn {\n\t\t\t\t\tmax: zoomMax ** (1 / zoomSpeed),\n\t\t\t\t\tmin: zoomMin ** (1 / zoomSpeed),\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t})\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\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\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,8BAA8B,KAA6B;AAC1E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
+  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(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\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\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\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
+  "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,8BAA8B,KAAoC;AACjF,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
   "names": []
 }

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 } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\t// Only pass through wheel events if the editor is focused\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// if the element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,0BAA0B,KAA6B;AACtE,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAE/B,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAOA,KAAI,eAAeA,KAAI,cAAc;AAC/C;AAAA,MACD;AAEA,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
+  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\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\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\t// Only pass through wheel events if the editor is focused\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// if the element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
+  "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAE/B,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAOA,KAAI,eAAeA,KAAI,cAAc;AAC/C;AAAA,MACD;AAEA,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
   "names": ["elm"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useScreenBounds.ts"],
-  "sourcesContent": ["import { throttle } from '@tldraw/utils'\nimport { useLayoutEffect } from 'react'\nimport { useEditor } from './useEditor'\n\nexport function useScreenBounds(ref: React.RefObject<HTMLElement>) {\n\tconst editor = useEditor()\n\n\tuseLayoutEffect(() => {\n\t\t// Everything else uses a debounced update...\n\t\tconst updateBounds = throttle(\n\t\t\t() => {\n\t\t\t\tif (!ref.current) return\n\t\t\t\teditor.updateViewportScreenBounds(ref.current)\n\t\t\t},\n\t\t\t200,\n\t\t\t{\n\t\t\t\ttrailing: true,\n\t\t\t}\n\t\t)\n\n\t\t// Rather than running getClientRects on every frame, we'll\n\t\t// run it once a second or when the window resizes.\n\t\tconst interval = editor.timers.setInterval(updateBounds, 1000)\n\t\twindow.addEventListener('resize', updateBounds)\n\n\t\tconst resizeObserver = new ResizeObserver((entries) => {\n\t\t\tif (!entries[0].contentRect) return\n\t\t\tupdateBounds()\n\t\t})\n\n\t\tconst container = ref.current\n\t\tlet scrollingParent: HTMLElement | Document | null = null\n\n\t\tif (container) {\n\t\t\t// When the container's size changes, update the bounds\n\t\t\tresizeObserver.observe(container)\n\n\t\t\t// When the container's nearest scrollable parent scrolls, update the bounds\n\t\t\tscrollingParent = getNearestScrollableContainer(container)\n\t\t\tscrollingParent.addEventListener('scroll', updateBounds)\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearInterval(interval)\n\t\t\twindow.removeEventListener('resize', updateBounds)\n\t\t\tresizeObserver.disconnect()\n\t\t\tscrollingParent?.removeEventListener('scroll', updateBounds)\n\t\t\tupdateBounds.cancel()\n\t\t}\n\t}, [editor, ref])\n}\n\n/*!\n * Author: excalidraw\n * MIT License: https://github.com/excalidraw/excalidraw/blob/master/LICENSE\n * https://github.com/excalidraw/excalidraw/blob/48c3465b19f10ec755b3eb84e21a01a468e96e43/packages/excalidraw/utils.ts#L600\n */\nconst getNearestScrollableContainer = (element: HTMLElement): HTMLElement | Document => {\n\tlet parent = element.parentElement\n\twhile (parent) {\n\t\tif (parent === document.body) {\n\t\t\treturn document\n\t\t}\n\t\tconst { overflowY } = window.getComputedStyle(parent)\n\t\tconst hasScrollableContent = parent.scrollHeight > parent.clientHeight\n\t\tif (\n\t\t\thasScrollableContent &&\n\t\t\t(overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay')\n\t\t) {\n\t\t\treturn parent\n\t\t}\n\t\tparent = parent.parentElement\n\t}\n\treturn document\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAEnB,SAAS,gBAAgB,KAAmC;AAClE,QAAM,SAAS,UAAU;AAEzB,kBAAgB,MAAM;AAErB,UAAM,eAAe;AAAA,MACpB,MAAM;AACL,YAAI,CAAC,IAAI,QAAS;AAClB,eAAO,2BAA2B,IAAI,OAAO;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,QACC,UAAU;AAAA,MACX;AAAA,IACD;AAIA,UAAM,WAAW,OAAO,OAAO,YAAY,cAAc,GAAI;AAC7D,WAAO,iBAAiB,UAAU,YAAY;AAE9C,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACtD,UAAI,CAAC,QAAQ,CAAC,EAAE,YAAa;AAC7B,mBAAa;AAAA,IACd,CAAC;AAED,UAAM,YAAY,IAAI;AACtB,QAAI,kBAAiD;AAErD,QAAI,WAAW;AAEd,qBAAe,QAAQ,SAAS;AAGhC,wBAAkB,8BAA8B,SAAS;AACzD,sBAAgB,iBAAiB,UAAU,YAAY;AAAA,IACxD;AAEA,WAAO,MAAM;AACZ,oBAAc,QAAQ;AACtB,aAAO,oBAAoB,UAAU,YAAY;AACjD,qBAAe,WAAW;AAC1B,uBAAiB,oBAAoB,UAAU,YAAY;AAC3D,mBAAa,OAAO;AAAA,IACrB;AAAA,EACD,GAAG,CAAC,QAAQ,GAAG,CAAC;AACjB;AAEA;AAAA;AAAA;AAAA;AAAA;AAKA,MAAM,gCAAgC,CAAC,YAAiD;AACvF,MAAI,SAAS,QAAQ;AACrB,SAAO,QAAQ;AACd,QAAI,WAAW,SAAS,MAAM;AAC7B,aAAO;AAAA,IACR;AACA,UAAM,EAAE,UAAU,IAAI,OAAO,iBAAiB,MAAM;AACpD,UAAM,uBAAuB,OAAO,eAAe,OAAO;AAC1D,QACC,yBACC,cAAc,UAAU,cAAc,YAAY,cAAc,YAChE;AACD,aAAO;AAAA,IACR;AACA,aAAS,OAAO;AAAA,EACjB;AACA,SAAO;AACR;",
+  "sourcesContent": ["import { throttle } from '@tldraw/utils'\nimport { useLayoutEffect } from 'react'\nimport { useEditor } from './useEditor'\n\nexport function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {\n\tconst editor = useEditor()\n\n\tuseLayoutEffect(() => {\n\t\t// Everything else uses a debounced update...\n\t\tconst updateBounds = throttle(\n\t\t\t() => {\n\t\t\t\tif (!ref.current) return\n\t\t\t\teditor.updateViewportScreenBounds(ref.current)\n\t\t\t},\n\t\t\t200,\n\t\t\t{\n\t\t\t\ttrailing: true,\n\t\t\t}\n\t\t)\n\n\t\t// Rather than running getClientRects on every frame, we'll\n\t\t// run it once a second or when the window resizes.\n\t\tconst interval = editor.timers.setInterval(updateBounds, 1000)\n\t\twindow.addEventListener('resize', updateBounds)\n\n\t\tconst resizeObserver = new ResizeObserver((entries) => {\n\t\t\tif (!entries[0].contentRect) return\n\t\t\tupdateBounds()\n\t\t})\n\n\t\tconst container = ref.current\n\t\tlet scrollingParent: HTMLElement | Document | null = null\n\n\t\tif (container) {\n\t\t\t// When the container's size changes, update the bounds\n\t\t\tresizeObserver.observe(container)\n\n\t\t\t// When the container's nearest scrollable parent scrolls, update the bounds\n\t\t\tscrollingParent = getNearestScrollableContainer(container)\n\t\t\tscrollingParent.addEventListener('scroll', updateBounds)\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearInterval(interval)\n\t\t\twindow.removeEventListener('resize', updateBounds)\n\t\t\tresizeObserver.disconnect()\n\t\t\tscrollingParent?.removeEventListener('scroll', updateBounds)\n\t\t\tupdateBounds.cancel()\n\t\t}\n\t}, [editor, ref])\n}\n\n/*!\n * Author: excalidraw\n * MIT License: https://github.com/excalidraw/excalidraw/blob/master/LICENSE\n * https://github.com/excalidraw/excalidraw/blob/48c3465b19f10ec755b3eb84e21a01a468e96e43/packages/excalidraw/utils.ts#L600\n */\nconst getNearestScrollableContainer = (element: HTMLElement): HTMLElement | Document => {\n\tlet parent = element.parentElement\n\twhile (parent) {\n\t\tif (parent === document.body) {\n\t\t\treturn document\n\t\t}\n\t\tconst { overflowY } = window.getComputedStyle(parent)\n\t\tconst hasScrollableContent = parent.scrollHeight > parent.clientHeight\n\t\tif (\n\t\t\thasScrollableContent &&\n\t\t\t(overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay')\n\t\t) {\n\t\t\treturn parent\n\t\t}\n\t\tparent = parent.parentElement\n\t}\n\treturn document\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAEnB,SAAS,gBAAgB,KAA0C;AACzE,QAAM,SAAS,UAAU;AAEzB,kBAAgB,MAAM;AAErB,UAAM,eAAe;AAAA,MACpB,MAAM;AACL,YAAI,CAAC,IAAI,QAAS;AAClB,eAAO,2BAA2B,IAAI,OAAO;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,QACC,UAAU;AAAA,MACX;AAAA,IACD;AAIA,UAAM,WAAW,OAAO,OAAO,YAAY,cAAc,GAAI;AAC7D,WAAO,iBAAiB,UAAU,YAAY;AAE9C,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACtD,UAAI,CAAC,QAAQ,CAAC,EAAE,YAAa;AAC7B,mBAAa;AAAA,IACd,CAAC;AAED,UAAM,YAAY,IAAI;AACtB,QAAI,kBAAiD;AAErD,QAAI,WAAW;AAEd,qBAAe,QAAQ,SAAS;AAGhC,wBAAkB,8BAA8B,SAAS;AACzD,sBAAgB,iBAAiB,UAAU,YAAY;AAAA,IACxD;AAEA,WAAO,MAAM;AACZ,oBAAc,QAAQ;AACtB,aAAO,oBAAoB,UAAU,YAAY;AACjD,qBAAe,WAAW;AAC1B,uBAAiB,oBAAoB,UAAU,YAAY;AAC3D,mBAAa,OAAO;AAAA,IACrB;AAAA,EACD,GAAG,CAAC,QAAQ,GAAG,CAAC;AACjB;AAEA;AAAA;AAAA;AAAA;AAAA;AAKA,MAAM,gCAAgC,CAAC,YAAiD;AACvF,MAAI,SAAS,QAAQ;AACrB,SAAO,QAAQ;AACd,QAAI,WAAW,SAAS,MAAM;AAC7B,aAAO;AAAA,IACR;AACA,UAAM,EAAE,UAAU,IAAI,OAAO,iBAAiB,MAAM;AACpD,UAAM,uBAAuB,OAAO,eAAe,OAAO;AAC1D,QACC,yBACC,cAAc,UAAU,cAAc,YAAY,cAAc,YAChE;AACD,aAAO;AAAA,IACR;AACA,aAAS,OAAO;AAAA,EACjB;AACA,SAAO;AACR;",
   "names": []
 }

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

@@ -5,7 +5,10 @@ function useStateAttribute() {
   const editor = useEditor();
   useLayoutEffect(() => {
     return react("stateAttribute", () => {
-      editor.getContainer().setAttribute("data-state", editor.getPath());
+      const container = editor.getContainer();
+      const instanceState = editor.getInstanceState();
+      container.setAttribute("data-state", editor.getPath());
+      container.setAttribute("data-coarse", String(instanceState.isCoarsePointer));
     });
   }, [editor]);
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useStateAttribute.ts"],
-  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useLayoutEffect } from 'react'\nimport { useEditor } from './useEditor'\n\nexport function useStateAttribute() {\n\tconst editor = useEditor()\n\n\t// we use a layout effect because we don't want there to be any perceptible delay between the\n\t// editor mounting and this attribute being applied, because styles may depend on it:\n\tuseLayoutEffect(() => {\n\t\treturn react('stateAttribute', () => {\n\t\t\teditor.getContainer().setAttribute('data-state', editor.getPath())\n\t\t})\n\t}, [editor])\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAEnB,SAAS,oBAAoB;AACnC,QAAM,SAAS,UAAU;AAIzB,kBAAgB,MAAM;AACrB,WAAO,MAAM,kBAAkB,MAAM;AACpC,aAAO,aAAa,EAAE,aAAa,cAAc,OAAO,QAAQ,CAAC;AAAA,IAClE,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACZ;",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useLayoutEffect } from 'react'\nimport { useEditor } from './useEditor'\n\nexport function useStateAttribute() {\n\tconst editor = useEditor()\n\n\t// we use a layout effect because we don't want there to be any perceptible delay between the\n\t// editor mounting and this attribute being applied, because styles may depend on it:\n\tuseLayoutEffect(() => {\n\t\treturn react('stateAttribute', () => {\n\t\t\tconst container = editor.getContainer()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tcontainer.setAttribute('data-state', editor.getPath())\n\t\t\tcontainer.setAttribute('data-coarse', String(instanceState.isCoarsePointer))\n\t\t})\n\t}, [editor])\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAEnB,SAAS,oBAAoB;AACnC,QAAM,SAAS,UAAU;AAIzB,kBAAgB,MAAM;AACrB,WAAO,MAAM,kBAAkB,MAAM;AACpC,YAAM,YAAY,OAAO,aAAa;AACtC,YAAM,gBAAgB,OAAO,iBAAiB;AAC9C,gBAAU,aAAa,cAAc,OAAO,QAAQ,CAAC;AACrD,gBAAU,aAAa,eAAe,OAAO,cAAc,eAAe,CAAC;AAAA,IAC5E,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACZ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useTransform.ts"],
-  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { VecLike } from '../primitives/Vec'\n\n/** @public */\nexport function useTransform(\n\tref: React.RefObject<HTMLElement | SVGElement>,\n\tx?: number,\n\ty?: number,\n\tscale?: number,\n\trotate?: number,\n\tadditionalOffset?: VecLike\n) {\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\t\tif (x === undefined) return\n\n\t\tlet trans = `translate(${x}px, ${y}px)`\n\t\tif (scale !== undefined) {\n\t\t\ttrans += ` scale(${scale})`\n\t\t}\n\t\tif (rotate !== undefined) {\n\t\t\ttrans += ` rotate(${rotate}rad)`\n\t\t}\n\t\tif (additionalOffset) {\n\t\t\ttrans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`\n\t\t}\n\t\telm.style.transform = trans\n\t})\n}\n"],
+  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { VecLike } from '../primitives/Vec'\n\n/** @public */\nexport function useTransform(\n\tref: React.RefObject<HTMLElement | SVGElement | null>,\n\tx?: number,\n\ty?: number,\n\tscale?: number,\n\trotate?: number,\n\tadditionalOffset?: VecLike\n) {\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\t\tif (x === undefined) return\n\n\t\tlet trans = `translate(${x}px, ${y}px)`\n\t\tif (scale !== undefined) {\n\t\t\ttrans += ` scale(${scale})`\n\t\t}\n\t\tif (rotate !== undefined) {\n\t\t\ttrans += ` rotate(${rotate}rad)`\n\t\t}\n\t\tif (additionalOffset) {\n\t\t\ttrans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`\n\t\t}\n\t\telm.style.transform = trans\n\t})\n}\n"],
   "mappings": "AAAA,SAAS,uBAAuB;AAIzB,SAAS,aACf,KACA,GACA,GACA,OACA,QACA,kBACC;AACD,kBAAgB,MAAM;AACrB,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,OAAW;AAErB,QAAI,QAAQ,aAAa,CAAC,OAAO,CAAC;AAClC,QAAI,UAAU,QAAW;AACxB,eAAS,UAAU,KAAK;AAAA,IACzB;AACA,QAAI,WAAW,QAAW;AACzB,eAAS,WAAW,MAAM;AAAA,IAC3B;AACA,QAAI,kBAAkB;AACrB,eAAS,cAAc,iBAAiB,CAAC,OAAO,iBAAiB,CAAC;AAAA,IACnE;AACA,QAAI,MAAM,YAAY;AAAA,EACvB,CAAC;AACF;",
   "names": []
 }

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

@@ -9,14 +9,10 @@ function useZoomCss() {
   React.useEffect(() => {
     const setScale = (s) => container.style.setProperty("--tl-zoom", s.toString());
     const setScaleDebounced = debounce(setScale, 100);
-    const scheduler = new EffectScheduler("useZoomCss", () => {
-      const numShapes = editor.getCurrentPageShapeIds().size;
-      if (numShapes < 300) {
-        setScale(editor.getZoomLevel());
-      } else {
-        setScaleDebounced(editor.getZoomLevel());
-      }
-    });
+    const scheduler = new EffectScheduler(
+      "useZoomCss",
+      () => setScale(editor.getEfficientZoomLevel())
+    );
     scheduler.attach();
     scheduler.execute();
     return () => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useZoomCss.ts"],
-  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { debounce } from '@tldraw/utils'\nimport * as React from 'react'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nexport function useZoomCss() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tReact.useEffect(() => {\n\t\tconst setScale = (s: number) => container.style.setProperty('--tl-zoom', s.toString())\n\t\tconst setScaleDebounced = debounce(setScale, 100)\n\n\t\tconst scheduler = new EffectScheduler('useZoomCss', () => {\n\t\t\tconst numShapes = editor.getCurrentPageShapeIds().size\n\t\t\tif (numShapes < 300) {\n\t\t\t\tsetScale(editor.getZoomLevel())\n\t\t\t} else {\n\t\t\t\tsetScaleDebounced(editor.getZoomLevel())\n\t\t\t}\n\t\t})\n\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tsetScaleDebounced.cancel()\n\t\t}\n\t}, [editor, container])\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAEnB,SAAS,aAAa;AAC5B,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAE/B,QAAM,UAAU,MAAM;AACrB,UAAM,WAAW,CAAC,MAAc,UAAU,MAAM,YAAY,aAAa,EAAE,SAAS,CAAC;AACrF,UAAM,oBAAoB,SAAS,UAAU,GAAG;AAEhD,UAAM,YAAY,IAAI,gBAAgB,cAAc,MAAM;AACzD,YAAM,YAAY,OAAO,uBAAuB,EAAE;AAClD,UAAI,YAAY,KAAK;AACpB,iBAAS,OAAO,aAAa,CAAC;AAAA,MAC/B,OAAO;AACN,0BAAkB,OAAO,aAAa,CAAC;AAAA,MACxC;AAAA,IACD,CAAC;AAED,cAAU,OAAO;AACjB,cAAU,QAAQ;AAElB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,wBAAkB,OAAO;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AACvB;",
+  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { debounce } from '@tldraw/utils'\nimport * as React from 'react'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nexport function useZoomCss() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tReact.useEffect(() => {\n\t\tconst setScale = (s: number) => container.style.setProperty('--tl-zoom', s.toString())\n\t\tconst setScaleDebounced = debounce(setScale, 100)\n\n\t\tconst scheduler = new EffectScheduler('useZoomCss', () =>\n\t\t\tsetScale(editor.getEfficientZoomLevel())\n\t\t)\n\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tsetScaleDebounced.cancel()\n\t\t}\n\t}, [editor, container])\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAEnB,SAAS,aAAa;AAC5B,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAE/B,QAAM,UAAU,MAAM;AACrB,UAAM,WAAW,CAAC,MAAc,UAAU,MAAM,YAAY,aAAa,EAAE,SAAS,CAAC;AACrF,UAAM,oBAAoB,SAAS,UAAU,GAAG;AAEhD,UAAM,YAAY,IAAI;AAAA,MAAgB;AAAA,MAAc,MACnD,SAAS,OAAO,sBAAsB,CAAC;AAAA,IACxC;AAEA,cAAU,OAAO;AACjB,cAAU,QAAQ;AAElB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,wBAAkB,OAAO;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AACvB;",
   "names": []
 }

package/dist-esm/lib/options.mjs CHANGED Viewed

@@ -51,7 +51,12 @@ const defaultTldrawOptions = {
   exportProvider: Fragment,
   enableToolbarKeyboardShortcuts: true,
   maxFontsToLoadBeforeRender: Infinity,
-  nonce: void 0
+  nonce: void 0,
+  debouncedZoom: true,
+  debouncedZoomThreshold: 500,
+  spacebarPanning: true,
+  zoomToFitPadding: 128,
+  snapThreshold: 8
 };
 export {
   defaultTldrawOptions

package/dist-esm/lib/options.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/options.ts"],
-  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n} as const satisfies TldrawOptions\n"],
-  "mappings": "AAAA,SAAwB,gBAAgB;AA4FjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AACR;",
+  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n\t/**\n\t * Whether to use debounced zoom level for certain rendering optimizations. When true,\n\t * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,\n\t * reducing re-renders. When false, it always returns the current zoom level.\n\t */\n\treadonly debouncedZoom: boolean\n\t/**\n\t * The number of shapes that must be on the page for the debounced zoom level to be used.\n\t * Defaults to 300 shapes.\n\t */\n\treadonly debouncedZoomThreshold: number\n\t/**\n\t * Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down.\n\t * When false, the spacebar will not pan the camera.\n\t */\n\treadonly spacebarPanning: boolean\n\t/**\n\t * The default padding (in pixels) used when zooming to fit content in the viewport.\n\t * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.\n\t * The actual padding used is the minimum of this value and 28% of the viewport width.\n\t * Defaults to 128 pixels.\n\t */\n\treadonly zoomToFitPadding: number\n\t/**\n\t * The distance (in screen pixels) at which shapes snap to guides and other shapes.\n\t */\n\treadonly snapThreshold: number\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n\tdebouncedZoom: true,\n\tdebouncedZoomThreshold: 500,\n\tspacebarPanning: true,\n\tzoomToFitPadding: 128,\n\tsnapThreshold: 8,\n} as const satisfies TldrawOptions\n"],
+  "mappings": "AAAA,SAAwB,gBAAgB;AAuHjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AAAA,EACP,eAAe;AAAA,EACf,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,eAAe;AAChB;",
   "names": []
 }

package/dist-esm/lib/primitives/Box.mjs CHANGED Viewed

@@ -130,6 +130,9 @@ class Box {
   get size() {
     return new Vec(this.w, this.h);
   }
+  isValid() {
+    return Number.isFinite(this.x) && Number.isFinite(this.y) && Number.isFinite(this.w) && Number.isFinite(this.h);
+  }
   toFixed() {
     this.x = toPrecision(this.x);
     this.y = toPrecision(this.y);