npm - @tldraw/editor - Versions diffs - 4.6.0-next.e390fde97eab → 4.6.0-next.f17381e03ffe - Mend

@tldraw/editor 4.6.0-next.e390fde97eab → 4.6.0-next.f17381e03ffe

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

package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/CanvasShapeIndicators.tsx"],
-  "sourcesContent": ["import { useComputed, useQuickReactor } from '@tldraw/state-react'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe } from '@tldraw/utils'\nimport { memo, useEffect, useRef } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'\nimport { getComputedStyle } from '../../exports/domUtils'\nimport { useColorMode } from '../../hooks/useColorMode'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useActivePeerIds$ } from '../../hooks/usePeerIds'\n\ninterface CollaboratorIndicatorData {\n\tcolor: string\n\tshapeIds: TLShapeId[]\n}\n\ninterface RenderData {\n\tidsToDisplay: Set<TLShapeId>\n\trenderingShapeIds: Set<TLShapeId>\n\thintingShapeIds: TLShapeId[]\n\tcollaboratorIndicators: CollaboratorIndicatorData[]\n}\n\nfunction setsEqual<T>(a: Set<T>, b: Set<T>): boolean {\n\tif (a.size !== b.size) return false\n\tfor (const item of a) {\n\t\tif (!b.has(item)) return false\n\t}\n\treturn true\n}\n\nfunction arraysEqual<T>(a: readonly T[], b: readonly T[]): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i] !== b[i]) return false\n\t}\n\treturn true\n}\n\nfunction collaboratorIndicatorsEqual(\n\ta: CollaboratorIndicatorData[],\n\tb: CollaboratorIndicatorData[]\n): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i].color !== b[i].color) return false\n\t\tif (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false\n\t}\n\treturn true\n}\n\nfunction renderDataEqual(a: RenderData, b: RenderData): boolean {\n\treturn (\n\t\tsetsEqual(a.idsToDisplay, b.idsToDisplay) &&\n\t\tsetsEqual(a.renderingShapeIds, b.renderingShapeIds) &&\n\t\tarraysEqual(a.hintingShapeIds, b.hintingShapeIds) &&\n\t\tcollaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators)\n\t)\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'indicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t}\n)\n\nconst getIndicatorPath = (editor: Editor, shape: TLShape) => {\n\treturn indicatorPathCache.get(editor, shape.id)\n}\n\nfunction renderShapeIndicator(\n\tctx: CanvasRenderingContext2D,\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\trenderingShapeIds: Set<TLShapeId>\n): boolean {\n\tif (!renderingShapeIds.has(shapeId)) return false\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape || shape.isLocked) return false\n\n\tconst pageTransform = editor.getShapePageTransform(shape)\n\tif (!pageTransform) return false\n\n\tconst indicatorPath = getIndicatorPath(editor, shape)\n\tif (!indicatorPath) return false\n\n\tctx.save()\n\tctx.transform(\n\t\tpageTransform.a,\n\t\tpageTransform.b,\n\t\tpageTransform.c,\n\t\tpageTransform.d,\n\t\tpageTransform.e,\n\t\tpageTransform.f\n\t)\n\trenderIndicatorPath(ctx, indicatorPath)\n\tctx.restore()\n\n\treturn true\n}\n\nfunction renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {\n\tif (indicatorPath instanceof Path2D) {\n\t\tctx.stroke(indicatorPath)\n\t} else {\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (clipPath) {\n\t\t\tctx.save()\n\t\t\tctx.clip(clipPath, 'evenodd')\n\t\t\tctx.stroke(path)\n\t\t\tctx.restore()\n\t\t} else {\n\t\t\tctx.stroke(path)\n\t\t}\n\n\t\tif (additionalPaths) {\n\t\t\tfor (const additionalPath of additionalPaths) {\n\t\t\t\tctx.stroke(additionalPath)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal @react */\nexport const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\t// Cache the selected color to avoid getComputedStyle on every render\n\tconst rSelectedColor = useRef<string | null>(null)\n\tconst colorMode = useColorMode()\n\n\tuseEffect(() => {\n\t\tconst timer = editor.timers.setTimeout(() => {\n\t\t\trSelectedColor.current = null\n\t\t}, 0)\n\t\treturn () => clearTimeout(timer)\n\t}, [colorMode, editor])\n\n\t// Get active peer IDs (already handles time-based state transitions)\n\tconst activePeerIds$ = useActivePeerIds$()\n\n\tconst $renderData = useComputed(\n\t\t'indicator render data',\n\t\t() => {\n\t\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t\t// Compute ids to display for selected/hovered shapes\n\t\t\tconst idsToDisplay = new Set<TLShapeId>()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\t\tidsToDisplay.add(id)\n\t\t\t\t}\n\t\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\t\tif (hovered) idsToDisplay.add(hovered)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Compute hinting shape ids\n\t\t\tconst hintingShapeIds = dedupe(editor.getHintingShapeIds())\n\n\t\t\t// Compute collaborator indicators\n\t\t\tconst collaboratorIndicators: CollaboratorIndicatorData[] = []\n\t\t\tconst currentPageId = editor.getCurrentPageId()\n\t\t\tconst activePeerIds = activePeerIds$.get()\n\n\t\t\tconst collaborators = editor.getCollaborators()\n\t\t\tfor (const peerId of activePeerIds.values()) {\n\t\t\t\t// Skip collaborators on different pages\n\t\t\t\tconst presence = collaborators.find((c) => c.userId === peerId)\n\t\t\t\tif (!presence || presence.currentPageId !== currentPageId) continue\n\n\t\t\t\t// Filter to shapes that are visible and on the current rendering set\n\t\t\t\tconst visibleShapeIds = presence.selectedShapeIds.filter(\n\t\t\t\t\t(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)\n\t\t\t\t)\n\n\t\t\t\tif (visibleShapeIds.length > 0) {\n\t\t\t\t\tcollaboratorIndicators.push({\n\t\t\t\t\t\tcolor: presence.color,\n\t\t\t\t\t\tshapeIds: visibleShapeIds,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tidsToDisplay,\n\t\t\t\trenderingShapeIds,\n\t\t\t\thintingShapeIds,\n\t\t\t\tcollaboratorIndicators,\n\t\t\t}\n\t\t},\n\t\t{ isEqual: renderDataEqual },\n\t\t[editor, activePeerIds$]\n\t)\n\n\tuseQuickReactor(\n\t\t'canvas indicators render',\n\t\t() => {\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tconst { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =\n\t\t\t\t$renderData.get()\n\n\t\t\tconst { w, h } = editor.getViewportScreenBounds()\n\t\t\tconst dpr = editor.getInstanceState().devicePixelRatio\n\t\t\tconst { x: cx, y: cy, z: zoom } = editor.getCamera()\n\n\t\t\tconst canvasWidth = Math.ceil(w * dpr)\n\t\t\tconst canvasHeight = Math.ceil(h * dpr)\n\n\t\t\tif (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {\n\t\t\t\tcanvas.width = canvasWidth\n\t\t\t\tcanvas.height = canvasHeight\n\t\t\t\tcanvas.style.width = `${w}px`\n\t\t\t\tcanvas.style.height = `${h}px`\n\t\t\t}\n\n\t\t\tctx.resetTransform()\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\tctx.scale(dpr, dpr)\n\t\t\tctx.scale(zoom, zoom)\n\t\t\tctx.translate(cx, cy)\n\n\t\t\tctx.lineCap = 'round'\n\t\t\tctx.lineJoin = 'round'\n\n\t\t\t// Draw collaborator indicators first (underneath local indicators)\n\t\t\t// Use 0.5 opacity to match the original SVG-based collaborator indicators\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const collaborator of collaboratorIndicators) {\n\t\t\t\tctx.strokeStyle = collaborator.color\n\t\t\t\tctx.globalAlpha = 0.7\n\t\t\t\tfor (const shapeId of collaborator.shapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Reset alpha for local indicators\n\t\t\tctx.globalAlpha = 1.0\n\n\t\t\t// Use cached color, only call getComputedStyle when cache is empty\n\t\t\tif (!rSelectedColor.current) {\n\t\t\t\trSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')\n\t\t\t}\n\n\t\t\tctx.strokeStyle = rSelectedColor.current\n\n\t\t\t// Draw selected/hovered indicators (1.5px stroke)\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const shapeId of idsToDisplay) {\n\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t}\n\n\t\t\t// Draw hinted indicators with a thicker stroke (2.5px)\n\t\t\tif (hintingShapeIds.length > 0) {\n\t\t\t\tctx.lineWidth = 2.5 / zoom\n\t\t\t\tfor (const shapeId of hintingShapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, $renderData]\n\t)\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-indicators\" />\n})\n"],
-  "mappings": "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",
-  "names": ["CanvasShapeIndicators"]
+  "sourcesContent": ["import { useComputed, useQuickReactor } from '@tldraw/state-react'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe } from '@tldraw/utils'\nimport { memo, useEffect, useRef } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'\nimport { getComputedStyle } from '../../exports/domUtils'\nimport { useColorMode } from '../../hooks/useColorMode'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useActivePeerIds$ } from '../../hooks/usePeerIds'\n\ninterface CollaboratorIndicatorData {\n\tcolor: string\n\tshapeIds: TLShapeId[]\n}\n\ninterface RenderData {\n\tidsToDisplay: Set<TLShapeId>\n\trenderingShapeIds: Set<TLShapeId>\n\thintingShapeIds: TLShapeId[]\n\tcollaboratorIndicators: CollaboratorIndicatorData[]\n}\n\nfunction setsEqual<T>(a: Set<T>, b: Set<T>): boolean {\n\tif (a.size !== b.size) return false\n\tfor (const item of a) {\n\t\tif (!b.has(item)) return false\n\t}\n\treturn true\n}\n\nfunction arraysEqual<T>(a: readonly T[], b: readonly T[]): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i] !== b[i]) return false\n\t}\n\treturn true\n}\n\nfunction collaboratorIndicatorsEqual(\n\ta: CollaboratorIndicatorData[],\n\tb: CollaboratorIndicatorData[]\n): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i].color !== b[i].color) return false\n\t\tif (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false\n\t}\n\treturn true\n}\n\nfunction renderDataEqual(a: RenderData, b: RenderData): boolean {\n\treturn (\n\t\tsetsEqual(a.idsToDisplay, b.idsToDisplay) &&\n\t\tsetsEqual(a.renderingShapeIds, b.renderingShapeIds) &&\n\t\tarraysEqual(a.hintingShapeIds, b.hintingShapeIds) &&\n\t\tcollaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators)\n\t)\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'indicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t}\n)\n\nconst getIndicatorPath = (editor: Editor, shape: TLShape) => {\n\treturn indicatorPathCache.get(editor, shape.id)\n}\n\nfunction renderShapeIndicator(\n\tctx: CanvasRenderingContext2D,\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\trenderingShapeIds: Set<TLShapeId>\n): boolean {\n\tif (!renderingShapeIds.has(shapeId)) return false\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape || shape.isLocked) return false\n\n\tconst pageTransform = editor.getShapePageTransform(shape)\n\tif (!pageTransform) return false\n\n\tconst indicatorPath = getIndicatorPath(editor, shape)\n\tif (!indicatorPath) return false\n\n\tctx.save()\n\tctx.transform(\n\t\tpageTransform.a,\n\t\tpageTransform.b,\n\t\tpageTransform.c,\n\t\tpageTransform.d,\n\t\tpageTransform.e,\n\t\tpageTransform.f\n\t)\n\trenderIndicatorPath(ctx, indicatorPath)\n\tctx.restore()\n\n\treturn true\n}\n\nfunction renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {\n\tif (indicatorPath instanceof Path2D) {\n\t\tctx.stroke(indicatorPath)\n\t} else {\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (clipPath) {\n\t\t\tctx.save()\n\t\t\tctx.clip(clipPath, 'evenodd')\n\t\t\tctx.stroke(path)\n\t\t\tctx.restore()\n\t\t} else {\n\t\t\tctx.stroke(path)\n\t\t}\n\n\t\tif (additionalPaths) {\n\t\t\tfor (const additionalPath of additionalPaths) {\n\t\t\t\tctx.stroke(additionalPath)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal @react */\nexport const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {\n\tconst editor = useEditor()\n\n\t// Skip canvas indicator rendering when the option is disabled (e.g. A/B test)\n\tif (!editor.options.useCanvasIndicators) {\n\t\treturn null\n\t}\n\n\treturn <CanvasShapeIndicatorsInner />\n})\n\nconst CanvasShapeIndicatorsInner = memo(function CanvasShapeIndicatorsInner() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\t// Cache the selected color to avoid getComputedStyle on every render\n\tconst rSelectedColor = useRef<string | null>(null)\n\tconst colorMode = useColorMode()\n\n\tuseEffect(() => {\n\t\tconst timer = editor.timers.setTimeout(() => {\n\t\t\trSelectedColor.current = null\n\t\t}, 0)\n\t\treturn () => clearTimeout(timer)\n\t}, [colorMode, editor])\n\n\t// Get active peer IDs (already handles time-based state transitions)\n\tconst activePeerIds$ = useActivePeerIds$()\n\n\tconst $renderData = useComputed(\n\t\t'indicator render data',\n\t\t() => {\n\t\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t\t// Compute ids to display for selected/hovered shapes\n\t\t\tconst idsToDisplay = new Set<TLShapeId>()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\t\tidsToDisplay.add(id)\n\t\t\t\t}\n\t\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\t\tif (hovered) idsToDisplay.add(hovered)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Compute hinting shape ids\n\t\t\tconst hintingShapeIds = dedupe(editor.getHintingShapeIds())\n\n\t\t\t// Compute collaborator indicators\n\t\t\tconst collaboratorIndicators: CollaboratorIndicatorData[] = []\n\t\t\tconst currentPageId = editor.getCurrentPageId()\n\t\t\tconst activePeerIds = activePeerIds$.get()\n\n\t\t\tconst collaborators = editor.getCollaborators()\n\t\t\tfor (const peerId of activePeerIds.values()) {\n\t\t\t\t// Skip collaborators on different pages\n\t\t\t\tconst presence = collaborators.find((c) => c.userId === peerId)\n\t\t\t\tif (!presence || presence.currentPageId !== currentPageId) continue\n\n\t\t\t\t// Filter to shapes that are visible and on the current rendering set\n\t\t\t\tconst visibleShapeIds = presence.selectedShapeIds.filter(\n\t\t\t\t\t(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)\n\t\t\t\t)\n\n\t\t\t\tif (visibleShapeIds.length > 0) {\n\t\t\t\t\tcollaboratorIndicators.push({\n\t\t\t\t\t\tcolor: presence.color,\n\t\t\t\t\t\tshapeIds: visibleShapeIds,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tidsToDisplay,\n\t\t\t\trenderingShapeIds,\n\t\t\t\thintingShapeIds,\n\t\t\t\tcollaboratorIndicators,\n\t\t\t}\n\t\t},\n\t\t{ isEqual: renderDataEqual },\n\t\t[editor, activePeerIds$]\n\t)\n\n\tuseQuickReactor(\n\t\t'canvas indicators render',\n\t\t() => {\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tconst { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =\n\t\t\t\t$renderData.get()\n\n\t\t\tconst { w, h } = editor.getViewportScreenBounds()\n\t\t\tconst dpr = editor.getInstanceState().devicePixelRatio\n\t\t\tconst { x: cx, y: cy, z: zoom } = editor.getCamera()\n\n\t\t\tconst canvasWidth = Math.ceil(w * dpr)\n\t\t\tconst canvasHeight = Math.ceil(h * dpr)\n\n\t\t\tif (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {\n\t\t\t\tcanvas.width = canvasWidth\n\t\t\t\tcanvas.height = canvasHeight\n\t\t\t\tcanvas.style.width = `${w}px`\n\t\t\t\tcanvas.style.height = `${h}px`\n\t\t\t}\n\n\t\t\tctx.resetTransform()\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\tctx.scale(dpr, dpr)\n\t\t\tctx.scale(zoom, zoom)\n\t\t\tctx.translate(cx, cy)\n\n\t\t\tctx.lineCap = 'round'\n\t\t\tctx.lineJoin = 'round'\n\n\t\t\t// Draw collaborator indicators first (underneath local indicators)\n\t\t\t// Use 0.5 opacity to match the original SVG-based collaborator indicators\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const collaborator of collaboratorIndicators) {\n\t\t\t\tctx.strokeStyle = collaborator.color\n\t\t\t\tctx.globalAlpha = 0.7\n\t\t\t\tfor (const shapeId of collaborator.shapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Reset alpha for local indicators\n\t\t\tctx.globalAlpha = 1.0\n\n\t\t\t// Use cached color, only call getComputedStyle when cache is empty\n\t\t\tif (!rSelectedColor.current) {\n\t\t\t\trSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')\n\t\t\t}\n\n\t\t\tctx.strokeStyle = rSelectedColor.current\n\n\t\t\t// Draw selected/hovered indicators (1.5px stroke)\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const shapeId of idsToDisplay) {\n\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t}\n\n\t\t\t// Draw hinted indicators with a thicker stroke (2.5px)\n\t\t\tif (hintingShapeIds.length > 0) {\n\t\t\t\tctx.lineWidth = 2.5 / zoom\n\t\t\t\tfor (const shapeId of hintingShapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, $renderData]\n\t)\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-indicators\" />\n})\n"],
+  "mappings": "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",
+  "names": ["CanvasShapeIndicators", "CanvasShapeIndicatorsInner"]
 }

package/dist-cjs/lib/components/default-components/DefaultCanvas.js CHANGED Viewed

@@ -377,7 +377,9 @@ function HintedShapeIndicator() {
   const ids = (0, import_state_react.useValue)(
     "hinting shape ids without canvas indicator",
     () => {
-      return (0, import_utils.dedupe)(editor.getHintingShapeIds()).filter((id) => {
+      const hintingIds = (0, import_utils.dedupe)(editor.getHintingShapeIds());
+      if (!editor.options.useCanvasIndicators) return hintingIds;
+      return hintingIds.filter((id) => {
         const shape = editor.getShape(id);
         if (!shape) return false;
         const util = editor.getShapeUtil(shape);
@@ -427,7 +429,8 @@ function DebugSvgCopy({ id, mode }) {
     const unsubscribe = (0, import_state.react)("shape to svg", async () => {
       const renderId = Math.random();
       latest = renderId;
-      const isSingleFrame = editor.isShapeOfType(id, "frame");
+      const shape = editor.getShape(id);
+      const isSingleFrame = !!shape && editor.isShapeFrameLike(shape);
       const padding = isSingleFrame ? 0 : 10;
       let bounds = editor.getShapePageBounds(id);
       if (!bounds) return;

package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map CHANGED Viewed

@@ -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 { useEditorComponents } from '../../hooks/EditorComponentsContext'\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 { 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 { toDomPrecision } from '../../primitives/utils'\nimport { Vec } from '../../primitives/Vec'\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 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 : <ShapesLayer />}\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 ShapesLayer() {\n\tconst editor = useEditor()\n\tconst debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])\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\tdebugSvg ? (\n\t\t\t\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t\t\t\t<Shape {...result} />\n\t\t\t\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t\t)\n\t\t\t)}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</ShapeCullingProvider>\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 = editor.getContainerDocument().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 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 { useEditorComponents } from '../../hooks/EditorComponentsContext'\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 { 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 { toDomPrecision } from '../../primitives/utils'\nimport { Vec } from '../../primitives/Vec'\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 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 : <ShapesLayer />}\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 ShapesLayer() {\n\tconst editor = useEditor()\n\tconst debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])\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\tdebugSvg ? (\n\t\t\t\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t\t\t\t<Shape {...result} />\n\t\t\t\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t\t)\n\t\t\t)}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</ShapeCullingProvider>\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 = editor.getContainerDocument().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 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\tconst hintingIds = dedupe(editor.getHintingShapeIds())\n\t\t\t// When canvas indicators are disabled, render all hints via SVG\n\t\t\tif (!editor.options.useCanvasIndicators) return hintingIds\n\t\t\t// Filter to only shapes that use legacy SVG indicators\n\t\t\treturn hintingIds.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 shape = editor.getShape(id)\n\t\t\tconst isSingleFrame = !!shape && editor.isShapeFrameLike(shape)\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": ["import_utils", "classNames", "handles"]
 }

package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js CHANGED Viewed

@@ -58,7 +58,7 @@ const InnerIndicator = (0, import_react.memo)(({ editor, id }) => {
   const { ShapeIndicatorErrorFallback } = (0, import_EditorComponentsContext.useEditorComponents)();
   if (!shape || shape.isLocked) return null;
   const util = editor.getShapeUtil(shape);
-  if (!util.useLegacyIndicator()) return null;
+  if (editor.options.useCanvasIndicators && !util.useLegacyIndicator()) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ErrorBoundary.OptionalErrorBoundary,
     {

package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicator.tsx"],
-  "sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = memo(\n\t({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\t\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t// calling the render method with stale data.\n\t\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t\t)\n\t},\n\t(prevProps, nextProps) => {\n\t\treturn (\n\t\t\tprevProps.shape.props === nextProps.shape.props &&\n\t\t\tprevProps.shape.meta === nextProps.shape.meta\n\t\t)\n\t}\n)\n\nconst InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\tconst util = editor.getShapeUtil(shape)\n\n\t// If the shape uses canvas indicators, it will be rendered by CanvasShapeIndicators\n\tif (!util.useLegacyIndicator()) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={util} />\n\t\t</OptionalErrorBoundary>\n\t)\n})\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tuserId?: string\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tif (hidden) return\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId, hidden]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<g\n\t\t\t\tclassName=\"tl-shape-indicator\"\n\t\t\t\tstroke={color ?? 'var(--tl-color-selected)'}\n\t\t\t\topacity={opacity}\n\t\t\t>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CG;AA9CH,yBAA4D;AAE5D,wBAAuB;AACvB,mBAA8C;AAG9C,qCAAoC;AACpC,uBAA0B;AAC1B,2BAAsC;AAGtC,MAAM,2BAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,eAAO;AAAA,MAAiB,gBAAgB,MAAM;AAAA,MAAM;AAAA;AAAA;AAAA,QAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,IAC9E;AAAA,EACD;AAAA,EACA,CAAC,WAAW,cAAc;AACzB,WACC,UAAU,MAAM,UAAU,UAAU,MAAM,SAC1C,UAAU,MAAM,SAAS,UAAU,MAAM;AAAA,EAE3C;AACD;AAEA,MAAM,qBAAiB,mBAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,YAAQ,6BAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,QAAI,oDAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,QAAM,OAAO,OAAO,aAAa,KAAK;AAGtC,MAAI,CAAC,KAAK,mBAAmB,EAAG,QAAO;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,sDAAC,wBAAoC,OAAc,QAAxB,MAAM,EAA8B;AAAA;AAAA,EAChE;AAEF,CAAC;AAaM,MAAM,4BAAwB,mBAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,aAAS,4BAAU;AAEzB,QAAM,iBAAa,qBAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,UAAI,OAAQ;AACZ,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,SAAS,MAAM;AAAA,EACzB;AAEA,oCAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,4CAAC,SAAI,KAAK,YAAY,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GAAG,eAAY,QACxF;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,SAAS;AAAA,MACjB;AAAA,MAEA,sDAAC,kBAAe,QAAgB,IAAI,SAAS;AAAA;AAAA,EAC9C,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = memo(\n\t({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\t\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t// calling the render method with stale data.\n\t\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t\t)\n\t},\n\t(prevProps, nextProps) => {\n\t\treturn (\n\t\t\tprevProps.shape.props === nextProps.shape.props &&\n\t\t\tprevProps.shape.meta === nextProps.shape.meta\n\t\t)\n\t}\n)\n\nconst InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\tconst util = editor.getShapeUtil(shape)\n\n\t// If canvas indicators are enabled and the shape uses them, it will be rendered by CanvasShapeIndicators\n\tif (editor.options.useCanvasIndicators && !util.useLegacyIndicator()) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={util} />\n\t\t</OptionalErrorBoundary>\n\t)\n})\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tuserId?: string\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tif (hidden) return\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId, hidden]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<g\n\t\t\t\tclassName=\"tl-shape-indicator\"\n\t\t\t\tstroke={color ?? 'var(--tl-color-selected)'}\n\t\t\t\topacity={opacity}\n\t\t\t>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CG;AA9CH,yBAA4D;AAE5D,wBAAuB;AACvB,mBAA8C;AAG9C,qCAAoC;AACpC,uBAA0B;AAC1B,2BAAsC;AAGtC,MAAM,2BAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,eAAO;AAAA,MAAiB,gBAAgB,MAAM;AAAA,MAAM;AAAA;AAAA;AAAA,QAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,IAC9E;AAAA,EACD;AAAA,EACA,CAAC,WAAW,cAAc;AACzB,WACC,UAAU,MAAM,UAAU,UAAU,MAAM,SAC1C,UAAU,MAAM,SAAS,UAAU,MAAM;AAAA,EAE3C;AACD;AAEA,MAAM,qBAAiB,mBAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,YAAQ,6BAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,QAAI,oDAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,QAAM,OAAO,OAAO,aAAa,KAAK;AAGtC,MAAI,OAAO,QAAQ,uBAAuB,CAAC,KAAK,mBAAmB,EAAG,QAAO;AAE7E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,sDAAC,wBAAoC,OAAc,QAAxB,MAAM,EAA8B;AAAA;AAAA,EAChE;AAEF,CAAC;AAaM,MAAM,4BAAwB,mBAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,aAAS,4BAAU;AAEzB,QAAM,iBAAa,qBAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,UAAI,OAAQ;AACZ,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,SAAS,MAAM;AAAA,EACzB;AAEA,oCAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,4CAAC,SAAI,KAAK,YAAY,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GAAG,eAAY,QACxF;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,SAAS;AAAA,MACjB;AAAA,MAEA,sDAAC,kBAAe,QAAgB,IAAI,SAAS;AAAA;AAAA,EAC9C,GACD;AAEF,CAAC;",
   "names": ["DefaultShapeIndicator", "classNames"]
 }

package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js CHANGED Viewed

@@ -79,6 +79,7 @@ const DefaultShapeIndicators = (0, import_react.memo)(function DefaultShapeIndic
   const shapesToRender = (0, import_state_react.useValue)(
     "shapes to render for svg indicators",
     () => {
+      if (!editor.options.useCanvasIndicators) return renderingShapes;
       return renderingShapes.filter(({ id }) => {
         const shape = editor.getShape(id);
         if (!shape) return false;

package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicators.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { memo, useRef } from 'react'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\n\n/** @public */\nexport interface TLShapeIndicatorsProps {\n\t/** Whether to hide all of the indicators */\n\thideAll?: boolean\n\t/** Whether to show all of the indicators */\n\tshowAll?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicators = memo(function DefaultShapeIndicators({\n\thideAll,\n\tshowAll,\n}: TLShapeIndicatorsProps) {\n\tconst editor = useEditor()\n\n\tif (hideAll && showAll)\n\t\tthrow Error('You cannot set both hideAll and showAll props to true, cmon now')\n\n\tconst rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())\n\n\tconst idsToDisplay = useValue(\n\t\t'should display selected ids',\n\t\t() => {\n\t\t\tconst prev = rPreviousSelectedShapeIds.current\n\t\t\tconst next = new Set<TLShapeId>()\n\n\t\t\tconst instanceState = editor.getInstanceState()\n\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\n\t\t\t// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?\n\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\t// We hide all indicators if we're changing style or in certain interactions\n\t\t\t// todo: move this to some kind of Tool.hideIndicators property\n\t\t\tif (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// We always want to show indicators for the selected shapes, if any\n\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\tnext.add(id)\n\t\t\t}\n\n\t\t\t// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any\n\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\tif (hovered) next.add(hovered)\n\t\t\t}\n\n\t\t\t// Ok, has anything changed?\n\n\t\t\t// If the number of items in the set is different, then the selection has changed. This catches most changes.\n\t\t\tif (prev.size !== next.size) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// Set difference check\n\t\t\tfor (const id of next) {\n\t\t\t\tif (!prev.has(id)) {\n\t\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\t\treturn next\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn prev\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Show indicators only for the shapes that are currently being rendered (ie that are on screen)\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\t// Filter out shapes that have canvas indicator support - only render shapes that use legacy SVG indicators\n\tconst shapesToRender = useValue(\n\t\t'shapes to render for svg indicators',\n\t\t() => {\n\t\t\treturn renderingShapes.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, renderingShapes]\n\t)\n\n\tif (!ShapeIndicator) return null\n\n\treturn shapesToRender.map(({ id }) => (\n\t\t<ShapeIndicator\n\t\t\tkey={id + '_indicator'}\n\t\t\tshapeId={id}\n\t\t\thidden={!showAll && (hideAll || !idsToDisplay.has(id))}\n\t\t/>\n\t))\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6GE;AA7GF,yBAAyB;AAEzB,mBAA6B;AAC7B,qCAAoC;AACpC,uBAA0B;AAWnB,MAAM,6BAAyB,mBAAK,SAASA,wBAAuB;AAAA,EAC1E;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,aAAS,4BAAU;AAEzB,MAAI,WAAW;AACd,UAAM,MAAM,iEAAiE;AAE9E,QAAM,gCAA4B,qBAAuB,oBAAI,IAAI,CAAC;AAElE,QAAM,mBAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,OAAO,0BAA0B;AACvC,YAAM,OAAO,oBAAI,IAAe;AAEhC,YAAM,gBAAgB,OAAO,iBAAiB;AAE9C,YAAM,kBAAkB,cAAc;AAItC,YAAM,kBAAkB,OAAO,QAAQ,eAAe,sBAAsB;AAE5E,YAAM,kBAAkB,OAAO;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAIA,UAAI,mBAAmB,EAAE,mBAAmB,kBAAkB;AAC7D,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,OAAO,oBAAoB,GAAG;AAC9C,aAAK,IAAI,EAAE;AAAA,MACZ;AAGA,UAAI,mBAAmB,cAAc,oBAAoB,CAAC,cAAc,iBAAiB;AACxF,cAAM,UAAU,OAAO,kBAAkB;AACzC,YAAI,QAAS,MAAK,IAAI,OAAO;AAAA,MAC9B;AAKA,UAAI,KAAK,SAAS,KAAK,MAAM;AAC5B,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,MAAM;AACtB,YAAI,CAAC,KAAK,IAAI,EAAE,GAAG;AAClB,oCAA0B,UAAU;AACpC,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAGA,QAAM,sBAAkB,6BAAS,oBAAoB,MAAM,OAAO,mBAAmB,GAAG,CAAC,MAAM,CAAC;AAEhG,QAAM,EAAE,eAAe,QAAI,oDAAoB;AAG/C,QAAM,qBAAiB;AAAA,IACtB;AAAA,IACA,MAAM;AACL,aAAO,gBAAgB,OAAO,CAAC,EAAE,GAAG,MAAM;AACzC,cAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,YAAI,CAAC,MAAO,QAAO;AACnB,cAAM,OAAO,OAAO,aAAa,KAAK;AACtC,eAAO,KAAK,mBAAmB;AAAA,MAChC,CAAC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,eAAgB,QAAO;AAE5B,SAAO,eAAe,IAAI,CAAC,EAAE,GAAG,MAC/B;AAAA,IAAC;AAAA;AAAA,MAEA,SAAS;AAAA,MACT,QAAQ,CAAC,YAAY,WAAW,CAAC,aAAa,IAAI,EAAE;AAAA;AAAA,IAF/C,KAAK;AAAA,EAGX,CACA;AACF,CAAC;",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { memo, useRef } from 'react'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\n\n/** @public */\nexport interface TLShapeIndicatorsProps {\n\t/** Whether to hide all of the indicators */\n\thideAll?: boolean\n\t/** Whether to show all of the indicators */\n\tshowAll?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicators = memo(function DefaultShapeIndicators({\n\thideAll,\n\tshowAll,\n}: TLShapeIndicatorsProps) {\n\tconst editor = useEditor()\n\n\tif (hideAll && showAll)\n\t\tthrow Error('You cannot set both hideAll and showAll props to true, cmon now')\n\n\tconst rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())\n\n\tconst idsToDisplay = useValue(\n\t\t'should display selected ids',\n\t\t() => {\n\t\t\tconst prev = rPreviousSelectedShapeIds.current\n\t\t\tconst next = new Set<TLShapeId>()\n\n\t\t\tconst instanceState = editor.getInstanceState()\n\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\n\t\t\t// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?\n\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\t// We hide all indicators if we're changing style or in certain interactions\n\t\t\t// todo: move this to some kind of Tool.hideIndicators property\n\t\t\tif (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// We always want to show indicators for the selected shapes, if any\n\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\tnext.add(id)\n\t\t\t}\n\n\t\t\t// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any\n\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\tif (hovered) next.add(hovered)\n\t\t\t}\n\n\t\t\t// Ok, has anything changed?\n\n\t\t\t// If the number of items in the set is different, then the selection has changed. This catches most changes.\n\t\t\tif (prev.size !== next.size) {\n\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\treturn next\n\t\t\t}\n\n\t\t\t// Set difference check\n\t\t\tfor (const id of next) {\n\t\t\t\tif (!prev.has(id)) {\n\t\t\t\t\trPreviousSelectedShapeIds.current = next\n\t\t\t\t\treturn next\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn prev\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Show indicators only for the shapes that are currently being rendered (ie that are on screen)\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\t// Filter out shapes that have canvas indicator support - only render shapes that use legacy SVG indicators\n\t// When useCanvasIndicators is disabled, render all shapes via SVG\n\tconst shapesToRender = useValue(\n\t\t'shapes to render for svg indicators',\n\t\t() => {\n\t\t\tif (!editor.options.useCanvasIndicators) return renderingShapes\n\t\t\treturn renderingShapes.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, renderingShapes]\n\t)\n\n\tif (!ShapeIndicator) return null\n\n\treturn shapesToRender.map(({ id }) => (\n\t\t<ShapeIndicator\n\t\t\tkey={id + '_indicator'}\n\t\t\tshapeId={id}\n\t\t\thidden={!showAll && (hideAll || !idsToDisplay.has(id))}\n\t\t/>\n\t))\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GE;AA/GF,yBAAyB;AAEzB,mBAA6B;AAC7B,qCAAoC;AACpC,uBAA0B;AAWnB,MAAM,6BAAyB,mBAAK,SAASA,wBAAuB;AAAA,EAC1E;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,aAAS,4BAAU;AAEzB,MAAI,WAAW;AACd,UAAM,MAAM,iEAAiE;AAE9E,QAAM,gCAA4B,qBAAuB,oBAAI,IAAI,CAAC;AAElE,QAAM,mBAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,OAAO,0BAA0B;AACvC,YAAM,OAAO,oBAAI,IAAe;AAEhC,YAAM,gBAAgB,OAAO,iBAAiB;AAE9C,YAAM,kBAAkB,cAAc;AAItC,YAAM,kBAAkB,OAAO,QAAQ,eAAe,sBAAsB;AAE5E,YAAM,kBAAkB,OAAO;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAIA,UAAI,mBAAmB,EAAE,mBAAmB,kBAAkB;AAC7D,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,OAAO,oBAAoB,GAAG;AAC9C,aAAK,IAAI,EAAE;AAAA,MACZ;AAGA,UAAI,mBAAmB,cAAc,oBAAoB,CAAC,cAAc,iBAAiB;AACxF,cAAM,UAAU,OAAO,kBAAkB;AACzC,YAAI,QAAS,MAAK,IAAI,OAAO;AAAA,MAC9B;AAKA,UAAI,KAAK,SAAS,KAAK,MAAM;AAC5B,kCAA0B,UAAU;AACpC,eAAO;AAAA,MACR;AAGA,iBAAW,MAAM,MAAM;AACtB,YAAI,CAAC,KAAK,IAAI,EAAE,GAAG;AAClB,oCAA0B,UAAU;AACpC,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAGA,QAAM,sBAAkB,6BAAS,oBAAoB,MAAM,OAAO,mBAAmB,GAAG,CAAC,MAAM,CAAC;AAEhG,QAAM,EAAE,eAAe,QAAI,oDAAoB;AAI/C,QAAM,qBAAiB;AAAA,IACtB;AAAA,IACA,MAAM;AACL,UAAI,CAAC,OAAO,QAAQ,oBAAqB,QAAO;AAChD,aAAO,gBAAgB,OAAO,CAAC,EAAE,GAAG,MAAM;AACzC,cAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,YAAI,CAAC,MAAO,QAAO;AACnB,cAAM,OAAO,OAAO,aAAa,KAAK;AACtC,eAAO,KAAK,mBAAmB;AAAA,MAChC,CAAC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,eAAgB,QAAO;AAE5B,SAAO,eAAe,IAAI,CAAC,EAAE,GAAG,MAC/B;AAAA,IAAC;AAAA;AAAA,MAEA,SAAS;AAAA,MACT,QAAQ,CAAC,YAAY,WAAW,CAAC,aAAa,IAAI,EAAE;AAAA;AAAA,IAF/C,KAAK;AAAA,EAGX,CACA;AACF,CAAC;",
   "names": ["DefaultShapeIndicators"]
 }

package/dist-cjs/lib/editor/Editor.js CHANGED Viewed

@@ -4143,7 +4143,7 @@ class Editor extends import_eventemitter3.default {
     const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel);
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin);
     const shapesToCheck = (opts.renderingOnly ? this.getCurrentPageRenderingShapesSorted() : this.getCurrentPageShapesSorted()).filter((shape) => {
-      if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, "frame")) return false;
+      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
       if (shape.isLocked && !hitLocked || this.isShapeHidden(shape) || this.isShapeOfType(shape, "group"))
         return false;
       const pageMask = this.getShapeMask(shape);
@@ -4156,14 +4156,16 @@ class Editor extends import_eventemitter3.default {
       const geometry = this.getShapeGeometry(shape);
       const isGroup = geometry instanceof import_Group2d.Group2d;
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
-      if (this.isShapeOfType(shape, "frame") || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
+      const shapeUtil = this.getShapeUtil(shape);
+      const isShapeFrameLike = this.isShapeFrameLike(shape);
+      if (isShapeFrameLike || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shapeUtil.getText(shape)?.trim()) {
         for (const childGeometry of geometry.children) {
           if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
             return shape;
           }
         }
       }
-      if (this.isShapeOfType(shape, "frame")) {
+      if (isShapeFrameLike) {
         const distance2 = geometry.distanceToPoint(pointInShapeSpace, hitFrameInside);
         if (hitFrameInside ? distance2 > 0 && distance2 <= outerMargin || distance2 <= 0 && distance2 > -innerMargin : distance2 > 0 && distance2 <= outerMargin) {
           return inMarginClosestToEdgeHit || shape;
@@ -4257,7 +4259,7 @@ class Editor extends import_eventemitter3.default {
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin);
     return this.getCurrentPageShapesSorted().filter((shape) => {
       if (this.isShapeHidden(shape)) return false;
-      if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, "frame")) return false;
+      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
       return this.isPointInShape(shape, point, opts);
     }).reverse();
   }
@@ -4370,6 +4372,24 @@ class Editor extends import_eventemitter3.default {
     if (!shape) return false;
     return shape.type === type;
   }
+  /**
+   * Get whether a shape behaves like a frame — a container that has child
+   * shapes, requires full-brush selection, blocks erasure from inside, etc.
+   *
+   * @example
+   * ```ts
+   * const isFrameLike = editor.isShapeFrameLike(someShape)
+   * ```
+   *
+   * @param shape - The shape (or shape id) to test.
+   *
+   * @public
+   */
+  isShapeFrameLike(shape) {
+    const _shape = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!_shape) return false;
+    return this.getShapeUtil(_shape).isFrameLike(_shape);
+  }
   /**
    * Get a shape by its id.
    *
@@ -8014,6 +8034,10 @@ class Editor extends import_eventemitter3.default {
               }
               this.inputs.setIsPanning(true);
               clearTimeout(this._longPressTimeout);
+            } else if (info.button === import_constants.RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
+              this.inputs.setIsRightPointing(true);
+              clearTimeout(this._longPressTimeout);
+              return this;
             }
             if (this.inputs.getIsPanning()) {
               this.stopCameraAnimation();
@@ -8025,6 +8049,22 @@ class Editor extends import_eventemitter3.default {
           case "pointer_move": {
             if (!isPen && isPenMode) return;
             const { x: cx, y: cy, z: cz } = (0, import_state.unsafe__withoutCapture)(() => this.getCamera());
+            if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
+              const currentScreenPoint = this.inputs.getCurrentScreenPoint();
+              const originScreenPoint = this.inputs.getOriginScreenPoint();
+              if (import_Vec.Vec.Dist2(originScreenPoint, currentScreenPoint) > this.options.dragDistanceSquared) {
+                this._prevCursor = this.getInstanceState().cursor.type;
+                this.inputs.setIsPanning(true);
+                this.setCursor({ type: "grabbing", rotation: 0 });
+                this.stopCameraAnimation();
+                const offset = import_Vec.Vec.Sub(currentScreenPoint, originScreenPoint);
+                this.setCamera(new import_Vec.Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
+                  immediate: true
+                });
+                this.maybeTrackPerformance("Panning");
+              }
+              return;
+            }
             if (this.inputs.getIsPanning() && this.inputs.getIsPointing()) {
               const currentScreenPoint = this.inputs.getCurrentScreenPoint();
               const previousScreenPoint = this.inputs.getPreviousScreenPoint();
@@ -8048,6 +8088,12 @@ class Editor extends import_eventemitter3.default {
             clearTimeout(this._longPressTimeout);
             inputs.buttons.delete(info.button);
             if (instanceState.isPenMode && !isPen) return;
+            if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
+              this.inputs.setIsRightPointing(false);
+              this._selectedShapeIdsAtPointerDown = [];
+              break;
+            }
+            this.inputs.setIsRightPointing(false);
             if (this.capturedPointerId === info.pointerId) {
               this.capturedPointerId = null;
               info.button = 0;
@@ -8065,11 +8111,24 @@ class Editor extends import_eventemitter3.default {
                   break;
                 }
                 case import_constants.MIDDLE_MOUSE_BUTTON: {
-                  if (this.inputs.keys.has(" ")) {
+                  if (this.inputs.keys.has("Space")) {
                     this.setCursor({ type: "grab", rotation: 0 });
                   } else {
                     this.setCursor({ type: this._prevCursor, rotation: 0 });
                   }
+                  break;
+                }
+                case import_constants.RIGHT_MOUSE_BUTTON: {
+                  if (this.inputs.keys.has("Space")) {
+                    this.setCursor({ type: "grab", rotation: 0 });
+                  } else {
+                    this.setCursor({ type: this._prevCursor, rotation: 0 });
+                  }
+                  if (slideSpeed > 0) {
+                    this.slideCamera({ speed: slideSpeed, direction: slideDirection });
+                  }
+                  this._selectedShapeIdsAtPointerDown = [];
+                  return this;
                 }
               }
               if (slideSpeed > 0) {