@tldraw/editor 4.4.0-next.f181afb0ab39 → 4.4.0-next.f2df7e20ec7b

package/dist-esm/lib/components/default-components/DefaultCanvas.mjs

@@ -16,6 +16,7 @@ import { useGestureEvents } from "../../hooks/useGestureEvents.mjs";
 import { useHandleEvents } from "../../hooks/useHandleEvents.mjs";
 import { useSharedSafeId } from "../../hooks/useSafeId.mjs";
 import { useScreenBounds } from "../../hooks/useScreenBounds.mjs";
+import { ShapeCullingProvider, useShapeCulling } from "../../hooks/useShapeCulling.mjs";
 import { Mat } from "../../primitives/Mat.mjs";
 import { Vec } from "../../primitives/Vec.mjs";
 import { toDomPrecision } from "../../primitives/utils.mjs";
@@ -318,11 +319,25 @@ function ReflowIfNeeded() {
   );
   return null;
 }
+function CullingController() {
+  const editor = useEditor();
+  const { updateCulling } = useShapeCulling();
+  useQuickReactor(
+    "update shape culling",
+    () => {
+      const culledShapes = editor.getCulledShapes();
+      updateCulling(culledShapes);
+    },
+    [editor, updateCulling]
+  );
+  return null;
+}
 function ShapesToDisplay() {
   const editor = useEditor();
   const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(ShapeCullingProvider, { children: [
     renderingShapes.map((result) => /* @__PURE__ */ jsx(Shape, { ...result }, result.id + "_shape")),
+    /* @__PURE__ */ jsx(CullingController, {}),
     tlenv.isSafari && /* @__PURE__ */ jsx(ReflowIfNeeded, {})
   ] });
 }

package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCanvas.tsx"],
-  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { Vec } from '../../primitives/Vec'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasShapeIndicators } from './CanvasShapeIndicators'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer2 = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// This should only run once on first load\n\t\t\tif (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {\n\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\trMemoizedStuff.current.allowTextOutline = false\n\t\t\t}\n\n\t\t\t// And this should only run if we're not in Safari;\n\t\t\t// If we're below the lod distance for text shadows, turn them off\n\t\t\tif (\n\t\t\t\trMemoizedStuff.current.allowTextOutline &&\n\t\t\t\tz < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline\n\t\t\t) {\n\t\t\t\tconst lodDisableTextOutline = z < editor.options.textShadowLod\n\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t)\n\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t}\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tconst transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\tx + offset\n\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugSvg = useValue('debug_svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<CanvasShapeIndicators />\n\t\t\t\t\t<div ref={rHtmlLayer2} className=\"tl-html-layer\">\n\t\t\t\t\t\t{debugGeometry ? <GeometryDebuggingView /> : null}\n\t\t\t\t\t\t<BrushWrapper />\n\t\t\t\t\t\t<ScribbleWrapper />\n\t\t\t\t\t\t<ZoomBrushWrapper />\n\t\t\t\t\t\t{ShapeIndicators && <ShapeIndicators />}\n\t\t\t\t\t\t<HintedShapeIndicator />\n\t\t\t\t\t\t<SnapIndicatorWrapper />\n\t\t\t\t\t\t<SelectionForegroundWrapper />\n\t\t\t\t\t\t<HandlesWrapper />\n\t\t\t\t\t\t<OverlaysWrapper />\n\t\t\t\t\t\t<LiveCollaborators />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t\t>\n\t\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t</div>\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn <InFrontOfTheCanvas />\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!(Grid && isGridMode)) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ScribbleWrapper() {\n\tconst editor = useEditor()\n\tconst scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { Scribble } = useEditorComponents()\n\n\tif (!(Scribble && scribbles.length)) return null\n\n\treturn scribbles.map((scribble) => (\n\t\t<Scribble key={scribble.id} className=\"tl-user-scribble\" scribble={scribble} zoom={zoomLevel} />\n\t))\n}\n\nfunction BrushWrapper() {\n\tconst editor = useEditor()\n\tconst brush = useValue('brush', () => editor.getInstanceState().brush, [editor])\n\tconst { Brush } = useEditorComponents()\n\n\tif (!(Brush && brush)) return null\n\n\treturn <Brush className=\"tl-user-brush\" brush={brush} />\n}\n\nfunction ZoomBrushWrapper() {\n\tconst editor = useEditor()\n\tconst zoomBrush = useValue('zoomBrush', () => editor.getInstanceState().zoomBrush, [editor])\n\tconst { ZoomBrush } = useEditorComponents()\n\n\tif (!(ZoomBrush && zoomBrush)) return null\n\n\treturn <ZoomBrush className=\"tl-user-brush tl-zoom-brush\" brush={zoomBrush} />\n}\n\nfunction SnapIndicatorWrapper() {\n\tconst editor = useEditor()\n\tconst lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { SnapIndicator } = useEditorComponents()\n\n\tif (!(SnapIndicator && lines.length > 0)) return null\n\n\treturn lines.map((line) => (\n\t\t<SnapIndicator key={line.id} className=\"tl-user-snapline\" line={line} zoom={zoomLevel} />\n\t))\n}\n\nfunction HandlesWrapper() {\n\tconst editor = useEditor()\n\n\t// We don't want this to update every time the shape changes\n\tconst shapeIdWithHandles = useValue(\n\t\t'handles shapeIdWithHandles',\n\t\t() => {\n\t\t\tconst { isReadonly, isChangingStyle } = editor.getInstanceState()\n\t\t\tif (isReadonly || isChangingStyle) return false\n\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\n\t\t\t// slightly redundant but saves us from updating the handles every time the shape changes\n\t\t\tconst handles = editor.getShapeHandles(onlySelectedShape)\n\t\t\tif (!handles) return false\n\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shapeIdWithHandles) return null\n\n\treturn <HandlesWrapperInner shapeId={shapeIdWithHandles} />\n}\n\nfunction HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {\n\tconst editor = useEditor()\n\tconst { Handles } = useEditorComponents()\n\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesWithSVGs() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn renderingShapes.map((result) => (\n\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t<Shape {...result} />\n\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t</Fragment>\n\t))\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = document.getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\nfunction ShapesToDisplay() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<>\n\t\t\t{renderingShapes.map((result) => (\n\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t))}\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</>\n\t)\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue(\n\t\t'hinting shape ids without canvas indicator',\n\t\t() => {\n\t\t\t// Filter to only shapes that use legacy SVG indicators\n\t\t\treturn dedupe(editor.getHintingShapeIds()).filter((id) => {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) return false\n\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { Vec } from '../../primitives/Vec'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasShapeIndicators } from './CanvasShapeIndicators'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer2 = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// This should only run once on first load\n\t\t\tif (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {\n\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\trMemoizedStuff.current.allowTextOutline = false\n\t\t\t}\n\n\t\t\t// And this should only run if we're not in Safari;\n\t\t\t// If we're below the lod distance for text shadows, turn them off\n\t\t\tif (\n\t\t\t\trMemoizedStuff.current.allowTextOutline &&\n\t\t\t\tz < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline\n\t\t\t) {\n\t\t\t\tconst lodDisableTextOutline = z < editor.options.textShadowLod\n\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t)\n\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t}\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tconst transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\tx + offset\n\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugSvg = useValue('debug_svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<CanvasShapeIndicators />\n\t\t\t\t\t<div ref={rHtmlLayer2} className=\"tl-html-layer\">\n\t\t\t\t\t\t{debugGeometry ? <GeometryDebuggingView /> : null}\n\t\t\t\t\t\t<BrushWrapper />\n\t\t\t\t\t\t<ScribbleWrapper />\n\t\t\t\t\t\t<ZoomBrushWrapper />\n\t\t\t\t\t\t{ShapeIndicators && <ShapeIndicators />}\n\t\t\t\t\t\t<HintedShapeIndicator />\n\t\t\t\t\t\t<SnapIndicatorWrapper />\n\t\t\t\t\t\t<SelectionForegroundWrapper />\n\t\t\t\t\t\t<HandlesWrapper />\n\t\t\t\t\t\t<OverlaysWrapper />\n\t\t\t\t\t\t<LiveCollaborators />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t\t>\n\t\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t</div>\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn <InFrontOfTheCanvas />\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!(Grid && isGridMode)) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ScribbleWrapper() {\n\tconst editor = useEditor()\n\tconst scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { Scribble } = useEditorComponents()\n\n\tif (!(Scribble && scribbles.length)) return null\n\n\treturn scribbles.map((scribble) => (\n\t\t<Scribble key={scribble.id} className=\"tl-user-scribble\" scribble={scribble} zoom={zoomLevel} />\n\t))\n}\n\nfunction BrushWrapper() {\n\tconst editor = useEditor()\n\tconst brush = useValue('brush', () => editor.getInstanceState().brush, [editor])\n\tconst { Brush } = useEditorComponents()\n\n\tif (!(Brush && brush)) return null\n\n\treturn <Brush className=\"tl-user-brush\" brush={brush} />\n}\n\nfunction ZoomBrushWrapper() {\n\tconst editor = useEditor()\n\tconst zoomBrush = useValue('zoomBrush', () => editor.getInstanceState().zoomBrush, [editor])\n\tconst { ZoomBrush } = useEditorComponents()\n\n\tif (!(ZoomBrush && zoomBrush)) return null\n\n\treturn <ZoomBrush className=\"tl-user-brush tl-zoom-brush\" brush={zoomBrush} />\n}\n\nfunction SnapIndicatorWrapper() {\n\tconst editor = useEditor()\n\tconst lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { SnapIndicator } = useEditorComponents()\n\n\tif (!(SnapIndicator && lines.length > 0)) return null\n\n\treturn lines.map((line) => (\n\t\t<SnapIndicator key={line.id} className=\"tl-user-snapline\" line={line} zoom={zoomLevel} />\n\t))\n}\n\nfunction HandlesWrapper() {\n\tconst editor = useEditor()\n\n\t// We don't want this to update every time the shape changes\n\tconst shapeIdWithHandles = useValue(\n\t\t'handles shapeIdWithHandles',\n\t\t() => {\n\t\t\tconst { isReadonly, isChangingStyle } = editor.getInstanceState()\n\t\t\tif (isReadonly || isChangingStyle) return false\n\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\n\t\t\t// slightly redundant but saves us from updating the handles every time the shape changes\n\t\t\tconst handles = editor.getShapeHandles(onlySelectedShape)\n\t\t\tif (!handles) return false\n\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shapeIdWithHandles) return null\n\n\treturn <HandlesWrapperInner shapeId={shapeIdWithHandles} />\n}\n\nfunction HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {\n\tconst editor = useEditor()\n\tconst { Handles } = useEditorComponents()\n\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesWithSVGs() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn renderingShapes.map((result) => (\n\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t<Shape {...result} />\n\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t</Fragment>\n\t))\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = document.getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\n/**\n * Centralized culling controller that updates shape container visibility.\n * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.\n */\nfunction CullingController() {\n\tconst editor = useEditor()\n\tconst { updateCulling } = useShapeCulling()\n\n\tuseQuickReactor(\n\t\t'update shape culling',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tupdateCulling(culledShapes)\n\t\t},\n\t\t[editor, updateCulling]\n\t)\n\n\treturn null\n}\n\nfunction ShapesToDisplay() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<ShapeCullingProvider>\n\t\t\t{renderingShapes.map((result) => (\n\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t))}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</ShapeCullingProvider>\n\t)\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue(\n\t\t'hinting shape ids without canvas indicator',\n\t\t() => {\n\t\t\t// Filter to only shapes that use legacy SVG indicators\n\t\t\treturn dedupe(editor.getHintingShapeIds()).filter((id) => {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) return false\n\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["Fragment", "handles"]
 }

package/dist-esm/lib/config/createTLStore.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/config/createTLStore.ts"],
-  "sourcesContent": ["import { Signal } from '@tldraw/state'\nimport { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'\nimport {\n\tSchemaPropsInfo,\n\tTLAssetStore,\n\tTLRecord,\n\tTLStore,\n\tTLStoreProps,\n\tTLStoreSnapshot,\n\tcreateTLSchema,\n} from '@tldraw/tlschema'\nimport { FileHelpers, assert } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { TLEditorSnapshot, loadSnapshot } from './TLEditorSnapshot'\nimport { TLAnyBindingUtilConstructor, checkBindings } from './defaultBindings'\nimport { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'\n\n/** @public */\nexport interface TLStoreBaseOptions {\n\t/** The initial data for the store. */\n\tinitialData?: SerializedStore<TLRecord>\n\n\t/** A snapshot of initial data to migrate and load into the store. */\n\tsnapshot?: Partial<TLEditorSnapshot> | TLStoreSnapshot\n\n\t/** The default name for the store. */\n\tdefaultName?: string\n\n\t/** How should this store upload & resolve assets? */\n\tassets?: TLAssetStore\n\n\t/** Called when the store is connected to an {@link Editor}. */\n\tonMount?(editor: Editor): void | (() => void)\n}\n\n/** @public */\nexport type TLStoreSchemaOptions =\n\t| {\n\t\t\tschema?: StoreSchema<TLRecord, TLStoreProps>\n\t  }\n\t| {\n\t\t\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\t\t\tmigrations?: readonly MigrationSequence[]\n\t\t\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\t  }\n\n/** @public */\nexport type TLStoreOptions = TLStoreBaseOptions & {\n\tid?: string\n\t/** Collaboration options for the store. */\n\tcollaboration?: {\n\t\tstatus: Signal<'online' | 'offline'> | null\n\t\tmode?: Signal<'readonly' | 'readwrite'> | null\n\t}\n} & TLStoreSchemaOptions\n\n/** @public */\nexport type TLStoreEventInfo = HistoryEntry<TLRecord>\n\nconst defaultAssetResolve: NonNullable<TLAssetStore['resolve']> = (asset) => asset.props.src\n\n/** @public */\nexport const inlineBase64AssetStore: TLAssetStore = {\n\tupload: async (_, file) => {\n\t\treturn { src: await FileHelpers.blobToDataUrl(file) }\n\t},\n}\n\n/**\n * A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and\n * migrations, or a schema.\n *\n * @param opts - Options for creating the schema.\n *\n * @public\n */\nexport function createTLSchemaFromUtils(\n\topts: TLStoreSchemaOptions\n): StoreSchema<TLRecord, TLStoreProps> {\n\tif ('schema' in opts && opts.schema) return opts.schema\n\n\treturn createTLSchema({\n\t\tshapes:\n\t\t\t'shapeUtils' in opts && opts.shapeUtils\n\t\t\t\t? utilsToMap(checkShapesAndAddCore(opts.shapeUtils))\n\t\t\t\t: undefined,\n\t\tbindings:\n\t\t\t'bindingUtils' in opts && opts.bindingUtils\n\t\t\t\t? utilsToMap(checkBindings(opts.bindingUtils))\n\t\t\t\t: undefined,\n\t\tmigrations: 'migrations' in opts ? opts.migrations : undefined,\n\t})\n}\n\n/**\n * A helper for creating a TLStore.\n *\n * @param opts - Options for creating the store.\n *\n * @public\n */\nexport function createTLStore({\n\tinitialData,\n\tdefaultName = '',\n\tid,\n\tassets = inlineBase64AssetStore,\n\tonMount,\n\tcollaboration,\n\t...rest\n}: TLStoreOptions = {}): TLStore {\n\tconst schema = createTLSchemaFromUtils(rest)\n\n\tconst store = new Store({\n\t\tid,\n\t\tschema,\n\t\tinitialData,\n\t\tprops: {\n\t\t\tdefaultName,\n\t\t\tassets: {\n\t\t\t\tupload: assets.upload,\n\t\t\t\tresolve: assets.resolve ?? defaultAssetResolve,\n\t\t\t\tremove: assets.remove ?? (() => Promise.resolve()),\n\t\t\t},\n\t\t\tonMount: (editor) => {\n\t\t\t\tassert(editor instanceof Editor)\n\t\t\t\tonMount?.(editor)\n\t\t\t},\n\t\t\tcollaboration,\n\t\t},\n\t})\n\n\tif (rest.snapshot) {\n\t\tif (initialData) throw new Error('Cannot provide both initialData and snapshot')\n\t\tloadSnapshot(store, rest.snapshot, { forceOverwriteSessionState: true })\n\t}\n\n\treturn store\n}\n\nfunction utilsToMap<T extends SchemaPropsInfo & { type: string }>(utils: T[]) {\n\treturn Object.fromEntries(\n\t\tutils.map((s): [string, SchemaPropsInfo] => [\n\t\t\ts.type,\n\t\t\t{\n\t\t\t\tprops: s.props,\n\t\t\t\tmigrations: s.migrations,\n\t\t\t},\n\t\t])\n\t)\n}\n"],
+  "sourcesContent": ["import { Signal } from '@tldraw/state'\nimport { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'\nimport {\n\tSchemaPropsInfo,\n\tTLAssetStore,\n\tTLRecord,\n\tTLStore,\n\tTLStoreProps,\n\tTLStoreSnapshot,\n\tcreateTLSchema,\n} from '@tldraw/tlschema'\nimport { FileHelpers, assert } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { TLEditorSnapshot, loadSnapshot } from './TLEditorSnapshot'\nimport { TLAnyBindingUtilConstructor, checkBindings } from './defaultBindings'\nimport { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'\n\n/** @public */\nexport interface TLStoreBaseOptions {\n\t/** The initial data for the store. */\n\tinitialData?: SerializedStore<TLRecord>\n\n\t/** A snapshot of initial data to migrate and load into the store. */\n\tsnapshot?: Partial<TLEditorSnapshot> | TLStoreSnapshot\n\n\t/** The default name for the store. */\n\tdefaultName?: string\n\n\t/** How should this store upload & resolve assets? */\n\tassets?: TLAssetStore\n\n\t/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */\n\tonMount?(editor: Editor): void | (() => void)\n}\n\n/** @public */\nexport type TLStoreSchemaOptions =\n\t| {\n\t\t\tschema?: StoreSchema<TLRecord, TLStoreProps>\n\t  }\n\t| {\n\t\t\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\t\t\tmigrations?: readonly MigrationSequence[]\n\t\t\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\t  }\n\n/** @public */\nexport type TLStoreOptions = TLStoreBaseOptions & {\n\tid?: string\n\t/** Collaboration options for the store. */\n\tcollaboration?: {\n\t\tstatus: Signal<'online' | 'offline'> | null\n\t\tmode?: Signal<'readonly' | 'readwrite'> | null\n\t}\n} & TLStoreSchemaOptions\n\n/** @public */\nexport type TLStoreEventInfo = HistoryEntry<TLRecord>\n\nconst defaultAssetResolve: NonNullable<TLAssetStore['resolve']> = (asset) => asset.props.src\n\n/** @public */\nexport const inlineBase64AssetStore: TLAssetStore = {\n\tupload: async (_, file) => {\n\t\treturn { src: await FileHelpers.blobToDataUrl(file) }\n\t},\n}\n\n/**\n * A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and\n * migrations, or a schema.\n *\n * @param opts - Options for creating the schema.\n *\n * @public\n */\nexport function createTLSchemaFromUtils(\n\topts: TLStoreSchemaOptions\n): StoreSchema<TLRecord, TLStoreProps> {\n\tif ('schema' in opts && opts.schema) return opts.schema\n\n\treturn createTLSchema({\n\t\tshapes:\n\t\t\t'shapeUtils' in opts && opts.shapeUtils\n\t\t\t\t? utilsToMap(checkShapesAndAddCore(opts.shapeUtils))\n\t\t\t\t: undefined,\n\t\tbindings:\n\t\t\t'bindingUtils' in opts && opts.bindingUtils\n\t\t\t\t? utilsToMap(checkBindings(opts.bindingUtils))\n\t\t\t\t: undefined,\n\t\tmigrations: 'migrations' in opts ? opts.migrations : undefined,\n\t})\n}\n\n/**\n * A helper for creating a TLStore.\n *\n * @param opts - Options for creating the store.\n *\n * @public\n */\nexport function createTLStore({\n\tinitialData,\n\tdefaultName = '',\n\tid,\n\tassets = inlineBase64AssetStore,\n\tonMount,\n\tcollaboration,\n\t...rest\n}: TLStoreOptions = {}): TLStore {\n\tconst schema = createTLSchemaFromUtils(rest)\n\n\tconst store = new Store({\n\t\tid,\n\t\tschema,\n\t\tinitialData,\n\t\tprops: {\n\t\t\tdefaultName,\n\t\t\tassets: {\n\t\t\t\tupload: assets.upload,\n\t\t\t\tresolve: assets.resolve ?? defaultAssetResolve,\n\t\t\t\tremove: assets.remove ?? (() => Promise.resolve()),\n\t\t\t},\n\t\t\tonMount: (editor) => {\n\t\t\t\tassert(editor instanceof Editor)\n\t\t\t\tonMount?.(editor)\n\t\t\t},\n\t\t\tcollaboration,\n\t\t},\n\t})\n\n\tif (rest.snapshot) {\n\t\tif (initialData) throw new Error('Cannot provide both initialData and snapshot')\n\t\tloadSnapshot(store, rest.snapshot, { forceOverwriteSessionState: true })\n\t}\n\n\treturn store\n}\n\nfunction utilsToMap<T extends SchemaPropsInfo & { type: string }>(utils: T[]) {\n\treturn Object.fromEntries(\n\t\tutils.map((s): [string, SchemaPropsInfo] => [\n\t\t\ts.type,\n\t\t\t{\n\t\t\t\tprops: s.props,\n\t\t\t\tmigrations: s.migrations,\n\t\t\t},\n\t\t])\n\t)\n}\n"],
   "mappings": "AACA,SAA2D,aAA0B;AACrF;AAAA,EAOC;AAAA,OACM;AACP,SAAS,aAAa,cAAc;AACpC,SAAS,cAAc;AACvB,SAA2B,oBAAoB;AAC/C,SAAsC,qBAAqB;AAC3D,SAAoC,6BAA6B;AA4CjE,MAAM,sBAA4D,CAAC,UAAU,MAAM,MAAM;AAGlF,MAAM,yBAAuC;AAAA,EACnD,QAAQ,OAAO,GAAG,SAAS;AAC1B,WAAO,EAAE,KAAK,MAAM,YAAY,cAAc,IAAI,EAAE;AAAA,EACrD;AACD;AAUO,SAAS,wBACf,MACsC;AACtC,MAAI,YAAY,QAAQ,KAAK,OAAQ,QAAO,KAAK;AAEjD,SAAO,eAAe;AAAA,IACrB,QACC,gBAAgB,QAAQ,KAAK,aAC1B,WAAW,sBAAsB,KAAK,UAAU,CAAC,IACjD;AAAA,IACJ,UACC,kBAAkB,QAAQ,KAAK,eAC5B,WAAW,cAAc,KAAK,YAAY,CAAC,IAC3C;AAAA,IACJ,YAAY,gBAAgB,OAAO,KAAK,aAAa;AAAA,EACtD,CAAC;AACF;AASO,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACJ,IAAoB,CAAC,GAAY;AAChC,QAAM,SAAS,wBAAwB,IAAI;AAE3C,QAAM,QAAQ,IAAI,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACP,QAAQ,OAAO;AAAA,QACf,SAAS,OAAO,WAAW;AAAA,QAC3B,QAAQ,OAAO,WAAW,MAAM,QAAQ,QAAQ;AAAA,MACjD;AAAA,MACA,SAAS,CAAC,WAAW;AACpB,eAAO,kBAAkB,MAAM;AAC/B,kBAAU,MAAM;AAAA,MACjB;AAAA,MACA;AAAA,IACD;AAAA,EACD,CAAC;AAED,MAAI,KAAK,UAAU;AAClB,QAAI,YAAa,OAAM,IAAI,MAAM,8CAA8C;AAC/E,iBAAa,OAAO,KAAK,UAAU,EAAE,4BAA4B,KAAK,CAAC;AAAA,EACxE;AAEA,SAAO;AACR;AAEA,SAAS,WAAyD,OAAY;AAC7E,SAAO,OAAO;AAAA,IACb,MAAM,IAAI,CAAC,MAAiC;AAAA,MAC3C,EAAE;AAAA,MACF;AAAA,QACC,OAAO,EAAE;AAAA,QACT,YAAY,EAAE;AAAA,MACf;AAAA,IACD,CAAC;AAAA,EACF;AACD;",
   "names": []
 }

package/dist-esm/lib/editor/Editor.mjs

@@ -165,12 +165,16 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     bindingUtils,
     tools,
     getContainer,
+    // needs to be here for backwards compatibility with TldrawEditor
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     cameraOptions,
-    textOptions,
     initialState,
     autoFocus,
     inferDarkMode,
-    options,
+    options: _options,
+    // needs to be here for backwards compatibility with TldrawEditor
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    textOptions: _textOptions,
     getShapeVisibility,
     fontAssetUrls
   }) {
@@ -331,7 +335,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     // unmount / remount in the DOM, which is expensive; and computing visibility is
     // also expensive in large projects. For this reason, we use a second bounding
     // box just for rendering, and we only update after the camera stops moving.
-    __publicField(this, "_cameraState", atom("camera state", "idle"));
     __publicField(this, "_cameraStateTimeoutRemaining", 0);
     /* @internal */
     __publicField(this, "_currentPageShapeIds");
@@ -404,6 +407,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     __publicField(this, "handledEvents", /* @__PURE__ */ new WeakSet());
     __publicField(this, "_pendingEventsForNextTick", []);
     this._getShapeVisibility = getShapeVisibility;
+    const options = _textOptions ? { ..._options, text: _options?.text ?? _textOptions } : _options;
     this.options = { ...defaultTldrawOptions, ...options };
     this.store = store;
     this.history = new HistoryManager({
@@ -417,8 +421,12 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this._spatialIndex = new SpatialIndexManager(this);
     this.disposables.add(() => this._spatialIndex.dispose());
     this.disposables.add(this.timers.dispose);
-    this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions });
-    this._textOptions = atom("text options", textOptions ?? null);
+    this._cameraOptions.set({
+      ...DEFAULT_CAMERA_OPTIONS,
+      ...cameraOptions,
+      ...options?.camera
+    });
+    this._textOptions = atom("text options", options?.text ?? null);
     this.user = new UserPreferencesManager(user ?? createTLUser(), inferDarkMode ?? false);
     this.disposables.add(() => this.user.dispose());
     this.getContainer = getContainer;
@@ -2422,7 +2430,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @public
    */
   zoomToFit(opts) {
-    const ids = [...this.getCurrentPageShapeIds()];
+    const ids = [...this.getCurrentPageShapeIds()].filter((id) => !this.isShapeHidden(id));
     if (ids.length <= 0) return this;
     const pageBounds = Box.Common(compact(ids.map((id) => this.getShapePageBounds(id))));
     this.zoomToBounds(pageBounds, opts);
@@ -3121,15 +3129,18 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this._cameraStateTimeoutRemaining -= elapsed;
     if (this._cameraStateTimeoutRemaining > 0) return;
     this.off("tick", this._decayCameraStateTimeout);
-    this._cameraState.set("idle");
+    this._setCameraState("idle");
   }
   _tickCameraState() {
     this._cameraStateTimeoutRemaining = this.options.cameraMovingTimeoutMs;
-    if (this._cameraState.__unsafe__getWithoutCapture() !== "idle") return;
-    this._cameraState.set("moving");
+    if (this.getInstanceState().cameraState !== "idle") return;
+    this._setCameraState("moving");
     this._debouncedZoomLevel.set(unsafe__withoutCapture(() => this.getCamera().z));
     this.on("tick", this._decayCameraStateTimeout);
   }
+  _setCameraState(cameraState) {
+    this.updateInstanceState({ cameraState }, { history: "ignore" });
+  }
   /**
    * Whether the camera is moving or idle.
    *
@@ -3141,7 +3152,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @public
    */
   getCameraState() {
-    return this._cameraState.get();
+    return this.getInstanceState().cameraState;
   }
   getRenderingShapes() {
     const renderingShapes = this.getUnorderedRenderingShapes(true);
@@ -3907,6 +3918,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   getCurrentPageBounds() {
     let commonBounds;
     this.getCurrentPageShapeIdsSorted().forEach((shapeId) => {
+      if (this.isShapeHidden(shapeId)) return;
       const bounds = this.getShapeMaskedPageBounds(shapeId);
       if (!bounds) return;
       if (!commonBounds) {
@@ -4085,7 +4097,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @param bounds - The bounds to search within.
    * @returns Unordered set of shape IDs within the given bounds.
    *
-   * @internal
+   * @public
    */
   getShapeIdsInsideBounds(bounds) {
     return this._spatialIndex.getShapeIdsInsideBounds(bounds);
@@ -4628,7 +4640,13 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     const fromShapeType = typeof fromShape === "string" ? fromShape : fromShape.type;
     const toShapeType = typeof toShape === "string" ? toShape : toShape.type;
     const bindingType = typeof binding === "string" ? binding : binding.type;
-    const canBindOpts = { fromShapeType, toShapeType, bindingType };
+    const canBindOpts = {
+      fromShape: typeof fromShape === "string" ? { type: fromShape } : fromShape,
+      toShape: typeof toShape === "string" ? { type: toShape } : toShape,
+      bindingType,
+      fromShapeType,
+      toShapeType
+    };
     if (fromShapeType === toShapeType) {
       return this.getShapeUtil(fromShapeType).canBind(canBindOpts);
     }
@@ -5768,7 +5786,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this.resizeShape(id, shapeScale, {
       initialShape: options.initialShape,
       initialBounds: options.initialBounds,
-      isAspectRatioLocked: options.isAspectRatioLocked
+      isAspectRatioLocked: options.isAspectRatioLocked,
+      initialPageTransform: options.initialPageTransform
     });
     if (Math.sign(scale.x) * Math.sign(scale.y) < 0) {
       const parentRotation = this.getShapeParentTransform(id).rotation();
@@ -7248,7 +7267,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   /**
    * Handles navigating to the content specified by the query param in the given URL.
    *
-   * Use {@link Editor#createDeepLink} to create a URL with a deep link query param.
+   * Use {@link Editor.createDeepLink} to create a URL with a deep link query param.
    *
    * If no URL is provided, it will look for the param in the current `window.location.href`.
    *
@@ -7599,9 +7618,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
           case "pinch_start": {
             if (inputs.getIsPinching()) return;
             if (!inputs.getIsEditing()) {
-              if (!this._selectedShapeIdsAtPointerDown.length) {
-                this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds];
-              }
+              this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds];
               this._didPinch = true;
               inputs.setIsPinching(true);
               this.interrupt();
@@ -7816,6 +7833,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
                 this.setCurrentTool(this._restoreToolId);
               }
             }
+            this._selectedShapeIdsAtPointerDown = [];
             break;
           }
         }