@tldraw/editor 4.3.0-canary.ef0248947f13 → 4.3.0-canary.ef709265bb13

package/dist-esm/lib/editor/shapes/group/DashedOutlineBox.mjs

@@ -4,7 +4,7 @@ import { useEditor } from "../../../hooks/useEditor.mjs";
 import { getPerfectDashProps } from "../shared/getPerfectDashProps.mjs";
 function DashedOutlineBox({ bounds, className }) {
   const editor = useEditor();
-  const zoomLevel = useValue("zoom level", () => editor.getZoomLevel(), [editor]);
+  const zoomLevel = useValue("zoom level", () => editor.getEfficientZoomLevel(), [editor]);
   return /* @__PURE__ */ jsx("g", { className, pointerEvents: "none", strokeLinecap: "round", strokeLinejoin: "round", children: bounds.sides.map((side, i) => {
     const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
       side[0].dist(side[1]),

package/dist-esm/lib/editor/shapes/group/DashedOutlineBox.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/editor/shapes/group/DashedOutlineBox.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useEditor } from '../../../hooks/useEditor'\nimport { Box } from '../../../primitives/Box'\nimport { getPerfectDashProps } from '../shared/getPerfectDashProps'\n\nexport function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {\n\tconst editor = useEditor()\n\n\tconst zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor])\n\n\treturn (\n\t\t<g className={className} pointerEvents=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n\t\t\t{bounds.sides.map((side, i) => {\n\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\tside[0].dist(side[1]),\n\t\t\t\t\t1 / zoomLevel,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyle: 'dashed',\n\t\t\t\t\t\tlengthRatio: 4,\n\t\t\t\t\t}\n\t\t\t\t)\n\n\t\t\t\treturn (\n\t\t\t\t\t<line\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tx1={side[0].x}\n\t\t\t\t\t\ty1={side[0].y}\n\t\t\t\t\t\tx2={side[1].x}\n\t\t\t\t\t\ty2={side[1].y}\n\t\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\t\tstrokeDashoffset={strokeDashoffset}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</g>\n\t)\n}\n"],
-  "mappings": "AAuBK;AAvBL,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AAE7B,SAAS,iBAAiB,EAAE,QAAQ,UAAU,GAAuC;AAC3F,QAAM,SAAS,UAAU;AAEzB,QAAM,YAAY,SAAS,cAAc,MAAM,OAAO,aAAa,GAAG,CAAC,MAAM,CAAC;AAE9E,SACC,oBAAC,OAAE,WAAsB,eAAc,QAAO,eAAc,SAAQ,gBAAe,SACjF,iBAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC9B,UAAM,EAAE,iBAAiB,iBAAiB,IAAI;AAAA,MAC7C,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAAA,MACpB,IAAI;AAAA,MACJ;AAAA,QACC,OAAO;AAAA,QACP,aAAa;AAAA,MACd;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ;AAAA,QACA;AAAA;AAAA,MANK;AAAA,IAON;AAAA,EAEF,CAAC,GACF;AAEF;",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useEditor } from '../../../hooks/useEditor'\nimport { Box } from '../../../primitives/Box'\nimport { getPerfectDashProps } from '../shared/getPerfectDashProps'\n\nexport function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {\n\tconst editor = useEditor()\n\n\tconst zoomLevel = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])\n\n\treturn (\n\t\t<g className={className} pointerEvents=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n\t\t\t{bounds.sides.map((side, i) => {\n\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\tside[0].dist(side[1]),\n\t\t\t\t\t1 / zoomLevel,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyle: 'dashed',\n\t\t\t\t\t\tlengthRatio: 4,\n\t\t\t\t\t}\n\t\t\t\t)\n\n\t\t\t\treturn (\n\t\t\t\t\t<line\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tx1={side[0].x}\n\t\t\t\t\t\ty1={side[0].y}\n\t\t\t\t\t\tx2={side[1].x}\n\t\t\t\t\t\ty2={side[1].y}\n\t\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\t\tstrokeDashoffset={strokeDashoffset}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</g>\n\t)\n}\n"],
+  "mappings": "AAuBK;AAvBL,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AAE7B,SAAS,iBAAiB,EAAE,QAAQ,UAAU,GAAuC;AAC3F,QAAM,SAAS,UAAU;AAEzB,QAAM,YAAY,SAAS,cAAc,MAAM,OAAO,sBAAsB,GAAG,CAAC,MAAM,CAAC;AAEvF,SACC,oBAAC,OAAE,WAAsB,eAAc,QAAO,eAAc,SAAQ,gBAAe,SACjF,iBAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC9B,UAAM,EAAE,iBAAiB,iBAAiB,IAAI;AAAA,MAC7C,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAAA,MACpB,IAAI;AAAA,MACJ;AAAA,QACC,OAAO;AAAA,QACP,aAAa;AAAA,MACd;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ;AAAA,QACA;AAAA;AAAA,MANK;AAAA,IAON;AAAA,EAEF,CAAC,GACF;AAEF;",
   "names": []
 }

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

@@ -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

@@ -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

@@ -51,7 +51,9 @@ const defaultTldrawOptions = {
   exportProvider: Fragment,
   enableToolbarKeyboardShortcuts: true,
   maxFontsToLoadBeforeRender: Infinity,
-  nonce: void 0
+  nonce: void 0,
+  debouncedZoom: true,
+  debouncedZoomThreshold: 500
 };
 export {
   defaultTldrawOptions

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

@@ -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}\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} as const satisfies TldrawOptions\n"],
+  "mappings": "AAAA,SAAwB,gBAAgB;AAuGjC,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;AACzB;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.3.0-canary.ef0248947f13";
+const version = "4.3.0-canary.ef709265bb13";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2025-12-05T17:44:11.680Z",
-  patch: "2025-12-05T17:44:11.680Z"
+  minor: "2025-12-06T09:01:14.443Z",
+  patch: "2025-12-06T09:01:14.443Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.3.0-canary.ef0248947f13'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-12-05T17:44:11.680Z',\n\tpatch: '2025-12-05T17:44:11.680Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.3.0-canary.ef709265bb13'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-12-06T09:01:14.443Z',\n\tpatch: '2025-12-06T09:01:14.443Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.3.0-canary.ef0248947f13",
+  "version": "4.3.0-canary.ef709265bb13",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,12 +50,12 @@
     "@tiptap/core": "^3.6.2",
     "@tiptap/pm": "^3.6.2",
     "@tiptap/react": "^3.6.2",
-    "@tldraw/state": "4.3.0-canary.ef0248947f13",
-    "@tldraw/state-react": "4.3.0-canary.ef0248947f13",
-    "@tldraw/store": "4.3.0-canary.ef0248947f13",
-    "@tldraw/tlschema": "4.3.0-canary.ef0248947f13",
-    "@tldraw/utils": "4.3.0-canary.ef0248947f13",
-    "@tldraw/validate": "4.3.0-canary.ef0248947f13",
+    "@tldraw/state": "4.3.0-canary.ef709265bb13",
+    "@tldraw/state-react": "4.3.0-canary.ef709265bb13",
+    "@tldraw/store": "4.3.0-canary.ef709265bb13",
+    "@tldraw/tlschema": "4.3.0-canary.ef709265bb13",
+    "@tldraw/utils": "4.3.0-canary.ef709265bb13",
+    "@tldraw/validate": "4.3.0-canary.ef709265bb13",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -210,7 +210,7 @@ function GridWrapper() {
 function ScribbleWrapper() {
 	const editor = useEditor()
 	const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { Scribble } = useEditorComponents()
 
 	if (!(Scribble && scribbles.length)) return null
@@ -243,7 +243,7 @@ function ZoomBrushWrapper() {
 function SnapIndicatorWrapper() {
 	const editor = useEditor()
 	const lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { SnapIndicator } = useEditorComponents()
 
 	if (!(SnapIndicator && lines.length > 0)) return null
@@ -284,7 +284,7 @@ function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
 	const editor = useEditor()
 	const { Handles } = useEditorComponents()
 
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 
 	const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [
 		editor,

package/src/lib/editor/Editor.ts

@@ -2670,6 +2670,52 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getCamera().z
 	}
 
+	private _debouncedZoomLevel = atom('debounced zoom level', 1)
+
+	/**
+	 * Get the debounced zoom level. When the camera is moving, this returns the zoom level
+	 * from when the camera started moving rather than the current zoom level. This can be
+	 * used to avoid expensive re-renders during camera movements.
+	 *
+	 * This behavior is controlled by the `useDebouncedZoom` option. When `useDebouncedZoom`
+	 * is `false`, this method always returns the current zoom level.
+	 *
+	 * @public
+	 */
+	@computed getDebouncedZoomLevel() {
+		if (this.options.debouncedZoom) {
+			if (this.getCameraState() === 'idle') {
+				return this.getZoomLevel()
+			} else {
+				return this._debouncedZoomLevel.get()
+			}
+		}
+
+		return this.getZoomLevel()
+	}
+
+	@computed private _getAboveDebouncedZoomThreshold() {
+		return this.getCurrentPageShapeIds().size > this.options.debouncedZoomThreshold
+	}
+
+	/**
+	 * Get the efficient zoom level. This returns the current zoom level if there are less than 300 shapes on the page,
+	 * otherwise it returns the debounced zoom level. This can be used to avoid expensive re-renders during camera movements.
+	 *
+	 * @public
+	 * @example
+	 * ```ts
+	 * editor.getEfficientZoomLevel()
+	 * ```
+	 *
+	 * @public
+	 */
+	@computed getEfficientZoomLevel() {
+		return this._getAboveDebouncedZoomThreshold()
+			? this.getDebouncedZoomLevel()
+			: this.getZoomLevel()
+	}
+
 	/**
 	 * Get the camera's initial or reset zoom level.
 	 *
@@ -3649,8 +3695,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
-		this._tickCameraState()
-
 		return this
 	}
 
@@ -4056,18 +4100,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 	// box just for rendering, and we only update after the camera stops moving.
 	private _cameraState = atom('camera state', 'idle' as 'idle' | 'moving')
 	private _cameraStateTimeoutRemaining = 0
-	_decayCameraStateTimeout(elapsed: number) {
+	private _decayCameraStateTimeout(elapsed: number) {
 		this._cameraStateTimeoutRemaining -= elapsed
 		if (this._cameraStateTimeoutRemaining > 0) return
 		this.off('tick', this._decayCameraStateTimeout)
 		this._cameraState.set('idle')
 	}
-	_tickCameraState() {
+	private _tickCameraState() {
 		// always reset the timeout
 		this._cameraStateTimeoutRemaining = this.options.cameraMovingTimeoutMs
 		// If the state is idle, then start the tick
 		if (this._cameraState.__unsafe__getWithoutCapture() !== 'idle') return
 		this._cameraState.set('moving')
+		this._debouncedZoomLevel.set(unsafe__withoutCapture(() => this.getCamera().z))
 		this.on('tick', this._decayCameraStateTimeout)
 	}
 

package/src/lib/editor/shapes/group/DashedOutlineBox.tsx

@@ -6,7 +6,7 @@ import { getPerfectDashProps } from '../shared/getPerfectDashProps'
 export function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {
 	const editor = useEditor()
 
-	const zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])
 
 	return (
 		<g className={className} pointerEvents="none" strokeLinecap="round" strokeLinejoin="round">

package/src/lib/hooks/useZoomCss.ts

@@ -12,14 +12,9 @@ export function useZoomCss() {
 		const setScale = (s: number) => 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()

package/src/lib/options.ts

@@ -87,6 +87,17 @@ export interface TldrawOptions {
 	 * Branding name of the app, currently only used for adding aria-label for the application.
 	 */
 	readonly branding?: string
+	/**
+	 * Whether to use debounced zoom level for certain rendering optimizations. When true,
+	 * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,
+	 * reducing re-renders. When false, it always returns the current zoom level.
+	 */
+	readonly debouncedZoom: boolean
+	/**
+	 * The number of shapes that must be on the page for the debounced zoom level to be used.
+	 * Defaults to 300 shapes.
+	 */
+	readonly debouncedZoomThreshold: number
 }
 
 /** @public */
@@ -139,4 +150,6 @@ export const defaultTldrawOptions = {
 	enableToolbarKeyboardShortcuts: true,
 	maxFontsToLoadBeforeRender: Infinity,
 	nonce: undefined,
+	debouncedZoom: true,
+	debouncedZoomThreshold: 500,
 } as const satisfies TldrawOptions

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.3.0-canary.ef0248947f13'
+export const version = '4.3.0-canary.ef709265bb13'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-12-05T17:44:11.680Z',
-	patch: '2025-12-05T17:44:11.680Z',
+	minor: '2025-12-06T09:01:14.443Z',
+	patch: '2025-12-06T09:01:14.443Z',
 }