npm - @tldraw/editor - Versions diffs - 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f - Mend

@tldraw/editor 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

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

package/dist-esm/lib/components/Shape.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/Shape.tsx"],
-  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useStateTracking } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { ShapeUtil } from '../editor/shapes/ShapeUtil'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { Mat } from '../primitives/Mat'\nimport { areShapesContentEqual } from '../utils/areShapesContentEqual'\nimport { setStyleProperty } from '../utils/dom'\nimport { OptionalErrorBoundary } from './ErrorBoundary'\n\n/*\nThis component renders shapes on the canvas. There are two stages: positioning\nand styling the shape's container using CSS, and then rendering the shape's \nJSX using its shape util's render method. Rendering the \"inside\" of a shape is\nmore expensive than positioning it or changing its color, so we use memo\nto wrap the inner shape and only re-render it when the shape's props change. \n\nThe shape also receives props for its index and opacity. The index is used to\ndetermine the z-index of the shape, and the opacity is used to set the shape's\nopacity based on its own opacity and that of its parent's.\n*/\nexport const Shape = memo(function Shape({\n\tid,\n\tshape,\n\tutil,\n\tindex,\n\tbackgroundIndex,\n\topacity,\n\tdprMultiple,\n}: {\n\tid: TLShapeId\n\tshape: TLShape\n\tutil: ShapeUtil\n\tindex: number\n\tbackgroundIndex: number\n\topacity: number\n\tdprMultiple: number\n}) {\n\tconst editor = useEditor()\n\n\tconst { ShapeErrorFallback } = useEditorComponents()\n\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst bgContainerRef = useRef<HTMLDivElement>(null)\n\n\tuseEffect(() => {\n\t\treturn react('load fonts', () => {\n\t\t\tconst fonts = editor.fonts.getShapeFontFaces(id)\n\t\t\teditor.fonts.requestFonts(fonts)\n\t\t})\n\t}, [editor, id])\n\n\tconst memoizedStuffRef = useRef({\n\t\ttransform: '',\n\t\tclipPath: 'none',\n\t\twidth: 0,\n\t\theight: 0,\n\t\tx: 0,\n\t\ty: 0,\n\t\tisCulled: false,\n\t})\n\n\tuseQuickReactor(\n\t\t'set shape stuff',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst prev = memoizedStuffRef.current\n\n\t\t\t// Clip path\n\t\t\tconst clipPath = editor.getShapeClipPath(id) ?? 'none'\n\t\t\tif (clipPath !== prev.clipPath) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'clip-path', clipPath)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'clip-path', clipPath)\n\t\t\t\tprev.clipPath = clipPath\n\t\t\t}\n\n\t\t\t// Page transform\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst transform = Mat.toCssString(pageTransform)\n\t\t\tconst bounds = editor.getShapeGeometry(shape).bounds\n\n\t\t\t// Update if the tranform has changed\n\t\t\tif (transform !== prev.transform) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'transform', transform)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'transform', transform)\n\t\t\t\tprev.transform = transform\n\t\t\t}\n\n\t\t\t// Width / Height\n\t\t\t// We round the shape width and height up to the nearest multiple of dprMultiple\n\t\t\t// to avoid the browser making miscalculations when applying the transform.\n\t\t\tconst widthRemainder = bounds.w % dprMultiple\n\t\t\tconst heightRemainder = bounds.h % dprMultiple\n\t\t\tconst width = widthRemainder === 0 ? bounds.w : bounds.w + (dprMultiple - widthRemainder)\n\t\t\tconst height = heightRemainder === 0 ? bounds.h : bounds.h + (dprMultiple - heightRemainder)\n\n\t\t\tif (width !== prev.width || height !== prev.height) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'width', Math.max(width, dprMultiple) + 'px')\n\t\t\t\tsetStyleProperty(containerRef.current, 'height', Math.max(height, dprMultiple) + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'width', Math.max(width, dprMultiple) + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'height', Math.max(height, dprMultiple) + 'px')\n\t\t\t\tprev.width = width\n\t\t\t\tprev.height = height\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// This stuff changes pretty infrequently, so we can change them together\n\tuseLayoutEffect(() => {\n\t\tconst container = containerRef.current\n\t\tconst bgContainer = bgContainerRef.current\n\n\t\t// Opacity\n\t\tsetStyleProperty(container, 'opacity', opacity)\n\t\tsetStyleProperty(bgContainer, 'opacity', opacity)\n\n\t\t// Z-Index\n\t\tsetStyleProperty(container, 'z-index', index)\n\t\tsetStyleProperty(bgContainer, 'z-index', backgroundIndex)\n\t}, [opacity, index, backgroundIndex])\n\n\tuseQuickReactor(\n\t\t'set display',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tconst isCulled = culledShapes.has(id)\n\t\t\tif (isCulled !== memoizedStuffRef.current.isCulled) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'display', isCulled ? 'none' : 'block')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'display', isCulled ? 'none' : 'block')\n\t\t\t\tmemoizedStuffRef.current.isCulled = isCulled\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\tconst annotateError = useCallback(\n\t\t(error: any) => editor.annotateError(error, { origin: 'shape', willCrashApp: false }),\n\t\t[editor]\n\t)\n\n\tif (!shape) return null\n\n\tconst isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'\n\n\treturn (\n\t\t<>\n\t\t\t{util.backgroundComponent && (\n\t\t\t\t<div\n\t\t\t\t\tref={bgContainerRef}\n\t\t\t\t\tclassName=\"tl-shape tl-shape-background\"\n\t\t\t\t\tdata-shape-type={shape.type}\n\t\t\t\t\tdata-shape-id={shape.id}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t>\n\t\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>\n\t\t\t\t\t\t<InnerShapeBackground shape={shape} util={util} />\n\t\t\t\t\t</OptionalErrorBoundary>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tref={containerRef}\n\t\t\t\tclassName=\"tl-shape\"\n\t\t\t\tdata-shape-type={shape.type}\n\t\t\t\tdata-shape-is-filled={isFilledShape}\n\t\t\t\tdata-shape-id={shape.id}\n\t\t\t\tdraggable={false}\n\t\t\t>\n\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>\n\t\t\t\t\t<InnerShape shape={shape} util={util} />\n\t\t\t\t</OptionalErrorBoundary>\n\t\t\t</div>\n\t\t</>\n\t)\n})\n\nexport const InnerShape = memo(\n\tfunction InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\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\t// calling the render method with stale data.\n\t\t\t\tutil.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) => areShapesContentEqual(prev.shape, next.shape) && prev.util === next.util\n)\n\nexport const InnerShapeBackground = memo(\n\tfunction InnerShapeBackground<T extends TLShape>({\n\t\tshape,\n\t\tutil,\n\t}: {\n\t\tshape: T\n\t\tutil: ShapeUtil<T>\n\t}) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\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\t// calling the render method with stale data.\n\t\t\t\tutil.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) =>\n\t\tprev.shape.props === next.shape.props &&\n\t\tprev.shape.meta === next.shape.meta &&\n\t\tprev.util === next.util\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useStateTracking } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { ShapeUtil } from '../editor/shapes/ShapeUtil'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { Mat } from '../primitives/Mat'\nimport { areShapesContentEqual } from '../utils/areShapesContentEqual'\nimport { setStyleProperty } from '../utils/dom'\nimport { OptionalErrorBoundary } from './ErrorBoundary'\n\n/*\nThis component renders shapes on the canvas. There are two stages: positioning\nand styling the shape's container using CSS, and then rendering the shape's \nJSX using its shape util's render method. Rendering the \"inside\" of a shape is\nmore expensive than positioning it or changing its color, so we use memo\nto wrap the inner shape and only re-render it when the shape's props change. \n\nThe shape also receives props for its index and opacity. The index is used to\ndetermine the z-index of the shape, and the opacity is used to set the shape's\nopacity based on its own opacity and that of its parent's.\n*/\nexport const Shape = memo(function Shape({\n\tid,\n\tshape,\n\tutil,\n\tindex,\n\tbackgroundIndex,\n\topacity,\n}: {\n\tid: TLShapeId\n\tshape: TLShape\n\tutil: ShapeUtil\n\tindex: number\n\tbackgroundIndex: number\n\topacity: number\n}) {\n\tconst editor = useEditor()\n\n\tconst { ShapeErrorFallback, ShapeWrapper } = useEditorComponents()\n\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst bgContainerRef = useRef<HTMLDivElement>(null)\n\n\tuseEffect(() => {\n\t\treturn react('load fonts', () => {\n\t\t\tconst fonts = editor.fonts.getShapeFontFaces(id)\n\t\t\teditor.fonts.requestFonts(fonts)\n\t\t})\n\t}, [editor, id])\n\n\tconst memoizedStuffRef = useRef({\n\t\ttransform: '',\n\t\tclipPath: 'none',\n\t\twidth: 0,\n\t\theight: 0,\n\t\tx: 0,\n\t\ty: 0,\n\t\tisCulled: false,\n\t})\n\n\tuseQuickReactor(\n\t\t'set shape stuff',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst prev = memoizedStuffRef.current\n\n\t\t\t// Clip path\n\t\t\tconst clipPath = editor.getShapeClipPath(id) ?? 'none'\n\t\t\tif (clipPath !== prev.clipPath) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'clip-path', clipPath)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'clip-path', clipPath)\n\t\t\t\tprev.clipPath = clipPath\n\t\t\t}\n\n\t\t\t// Page transform\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst transform = Mat.toCssString(pageTransform)\n\t\t\tconst bounds = editor.getShapeGeometry(shape).bounds\n\n\t\t\t// Update if the tranform has changed\n\t\t\tif (transform !== prev.transform) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'transform', transform)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'transform', transform)\n\t\t\t\tprev.transform = transform\n\t\t\t}\n\n\t\t\t// Width / Height\n\t\t\tconst width = Math.max(bounds.width, 1)\n\t\t\tconst height = Math.max(bounds.height, 1)\n\n\t\t\tif (width !== prev.width || height !== prev.height) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'width', width + 'px')\n\t\t\t\tsetStyleProperty(containerRef.current, 'height', height + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'width', width + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'height', height + 'px')\n\t\t\t\tprev.width = width\n\t\t\t\tprev.height = height\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// This stuff changes pretty infrequently, so we can change them together\n\tuseLayoutEffect(() => {\n\t\tconst container = containerRef.current\n\t\tconst bgContainer = bgContainerRef.current\n\n\t\t// Opacity\n\t\tsetStyleProperty(container, 'opacity', opacity)\n\t\tsetStyleProperty(bgContainer, 'opacity', opacity)\n\n\t\t// Z-Index\n\t\tsetStyleProperty(container, 'z-index', index)\n\t\tsetStyleProperty(bgContainer, 'z-index', backgroundIndex)\n\t}, [opacity, index, backgroundIndex])\n\n\tuseQuickReactor(\n\t\t'set display',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tconst isCulled = culledShapes.has(id)\n\t\t\tif (isCulled !== memoizedStuffRef.current.isCulled) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'display', isCulled ? 'none' : 'block')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'display', isCulled ? 'none' : 'block')\n\t\t\t\tmemoizedStuffRef.current.isCulled = isCulled\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\tconst annotateError = useCallback(\n\t\t(error: any) => editor.annotateError(error, { origin: 'shape', willCrashApp: false }),\n\t\t[editor]\n\t)\n\n\tif (!shape || !ShapeWrapper) return null\n\n\treturn (\n\t\t<>\n\t\t\t{util.backgroundComponent && (\n\t\t\t\t<ShapeWrapper ref={bgContainerRef} shape={shape} isBackground={true}>\n\t\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>\n\t\t\t\t\t\t<InnerShapeBackground shape={shape} util={util} />\n\t\t\t\t\t</OptionalErrorBoundary>\n\t\t\t\t</ShapeWrapper>\n\t\t\t)}\n\t\t\t<ShapeWrapper ref={containerRef} shape={shape} isBackground={false}>\n\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>\n\t\t\t\t\t<InnerShape shape={shape} util={util} />\n\t\t\t\t</OptionalErrorBoundary>\n\t\t\t</ShapeWrapper>\n\t\t</>\n\t)\n})\n\nexport const InnerShape = memo(\n\tfunction InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\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\t// calling the render method with stale data.\n\t\t\t\tutil.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) => areShapesContentEqual(prev.shape, next.shape) && prev.util === next.util\n)\n\nexport const InnerShapeBackground = memo(\n\tfunction InnerShapeBackground<T extends TLShape>({\n\t\tshape,\n\t\tutil,\n\t}: {\n\t\tshape: T\n\t\tutil: ShapeUtil<T>\n\t}) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\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\t// calling the render method with stale data.\n\t\t\t\tutil.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) =>\n\t\tprev.shape.props === next.shape.props &&\n\t\tprev.shape.meta === next.shape.meta &&\n\t\tprev.util === next.util\n)\n"],
+  "mappings": "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",
   "names": ["Shape", "shape", "InnerShape", "InnerShapeBackground"]
 }

package/dist-esm/lib/components/default-components/DefaultBrush.mjs CHANGED Viewed

@@ -7,7 +7,7 @@ const DefaultBrush = ({ brush, color, opacity, className }) => {
   useTransform(rSvg, brush.x, brush.y);
   const w = toDomPrecision(Math.max(1, brush.w));
   const h = toDomPrecision(Math.max(1, brush.h));
-  return /* @__PURE__ */ jsx("svg", { className: "tl-overlays__item", ref: rSvg, children: color ? /* @__PURE__ */ jsxs("g", { className: "tl-brush", opacity, children: [
+  return /* @__PURE__ */ jsx("svg", { className: "tl-overlays__item", ref: rSvg, "aria-hidden": "true", children: color ? /* @__PURE__ */ jsxs("g", { className: "tl-brush", opacity, children: [
     /* @__PURE__ */ jsx("rect", { width: w, height: h, fill: color, opacity: 0.75 }),
     /* @__PURE__ */ jsx("rect", { width: w, height: h, fill: "none", stroke: color, opacity: 0.1 })
   ] }) : /* @__PURE__ */ jsx("rect", { className: `tl-brush tl-brush__default ${className}`, width: w, height: h }) });

package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultBrush.tsx"],
-  "sourcesContent": ["import { BoxModel } from '@tldraw/tlschema'\nimport { useRef } from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLBrushProps {\n\tuserId?: string\n\tbrush: BoxModel\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\tuseTransform(rSvg, brush.x, brush.y)\n\n\tconst w = toDomPrecision(Math.max(1, brush.w))\n\tconst h = toDomPrecision(Math.max(1, brush.h))\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" ref={rSvg}>\n\t\t\t{color ? (\n\t\t\t\t<g className=\"tl-brush\" opacity={opacity}>\n\t\t\t\t\t<rect width={w} height={h} fill={color} opacity={0.75} />\n\t\t\t\t\t<rect width={w} height={h} fill=\"none\" stroke={color} opacity={0.1} />\n\t\t\t\t</g>\n\t\t\t) : (\n\t\t\t\t<rect className={`tl-brush tl-brush__default ${className}`} width={w} height={h} />\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AAyBI,SACC,KADD;AAxBJ,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAYxB,MAAM,eAAe,CAAC,EAAE,OAAO,OAAO,SAAS,UAAU,MAAoB;AACnF,QAAM,OAAO,OAAsB,IAAI;AACvC,eAAa,MAAM,MAAM,GAAG,MAAM,CAAC;AAEnC,QAAM,IAAI,eAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAC7C,QAAM,IAAI,eAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAE7C,SACC,oBAAC,SAAI,WAAU,qBAAoB,KAAK,MACtC,kBACA,qBAAC,OAAE,WAAU,YAAW,SACvB;AAAA,wBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,OAAO,SAAS,MAAM;AAAA,IACvD,oBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAK,QAAO,QAAQ,OAAO,SAAS,KAAK;AAAA,KACrE,IAEA,oBAAC,UAAK,WAAW,8BAA8B,SAAS,IAAI,OAAO,GAAG,QAAQ,GAAG,GAEnF;AAEF;",
+  "sourcesContent": ["import { BoxModel } from '@tldraw/tlschema'\nimport { useRef } from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLBrushProps {\n\tuserId?: string\n\tbrush: BoxModel\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\tuseTransform(rSvg, brush.x, brush.y)\n\n\tconst w = toDomPrecision(Math.max(1, brush.w))\n\tconst h = toDomPrecision(Math.max(1, brush.h))\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" ref={rSvg} aria-hidden=\"true\">\n\t\t\t{color ? (\n\t\t\t\t<g className=\"tl-brush\" opacity={opacity}>\n\t\t\t\t\t<rect width={w} height={h} fill={color} opacity={0.75} />\n\t\t\t\t\t<rect width={w} height={h} fill=\"none\" stroke={color} opacity={0.1} />\n\t\t\t\t</g>\n\t\t\t) : (\n\t\t\t\t<rect className={`tl-brush tl-brush__default ${className}`} width={w} height={h} />\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AAyBI,SACC,KADD;AAxBJ,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAYxB,MAAM,eAAe,CAAC,EAAE,OAAO,OAAO,SAAS,UAAU,MAAoB;AACnF,QAAM,OAAO,OAAsB,IAAI;AACvC,eAAa,MAAM,MAAM,GAAG,MAAM,CAAC;AAEnC,QAAM,IAAI,eAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAC7C,QAAM,IAAI,eAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAE7C,SACC,oBAAC,SAAI,WAAU,qBAAoB,KAAK,MAAM,eAAY,QACxD,kBACA,qBAAC,OAAE,WAAU,YAAW,SACvB;AAAA,wBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,OAAO,SAAS,MAAM;AAAA,IACvD,oBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAK,QAAO,QAAQ,OAAO,SAAS,KAAK;AAAA,KACrE,IAEA,oBAAC,UAAK,WAAW,8BAA8B,SAAS,IAAI,OAAO,GAAG,QAAQ,GAAG,GAEnF;AAEF;",
   "names": []
 }

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

@@ -20,8 +20,7 @@ import { Mat } from "../../primitives/Mat.mjs";
 import { Vec } from "../../primitives/Vec.mjs";
 import { toDomPrecision } from "../../primitives/utils.mjs";
 import { debugFlags } from "../../utils/debug-flags.mjs";
-import { setStyleProperty } from "../../utils/dom.mjs";
-import { nearestMultiple } from "../../utils/nearestMultiple.mjs";
+import { markEventAsHandled, setStyleProperty } from "../../utils/dom.mjs";
 import { GeometryDebuggingView } from "../GeometryDebuggingView.mjs";
 import { LiveCollaborators } from "../LiveCollaborators.mjs";
 import { MenuClickCapture } from "../MenuClickCapture.mjs";
@@ -108,7 +107,7 @@ function DefaultCanvas({ className }) {
         "data-testid": "canvas",
         ...events,
         children: [
-          /* @__PURE__ */ jsx("svg", { className: "tl-svg-context", children: /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsx("svg", { className: "tl-svg-context", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("defs", { children: [
             shapeSvgDefs,
             /* @__PURE__ */ jsx(CursorDef, {}),
             /* @__PURE__ */ jsx(CollaboratorHintDef, {}),
@@ -134,12 +133,22 @@ function DefaultCanvas({ className }) {
             /* @__PURE__ */ jsx(OverlaysWrapper, {}),
             /* @__PURE__ */ jsx(LiveCollaborators, {})
           ] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tl-canvas__in-front",
+              onPointerDown: markEventAsHandled,
+              onPointerUp: markEventAsHandled,
+              onTouchStart: markEventAsHandled,
+              onTouchEnd: markEventAsHandled,
+              children: /* @__PURE__ */ jsx(InFrontOfTheCanvasWrapper, {})
+            }
+          ),
           /* @__PURE__ */ jsx(MovingCameraHitTestBlocker, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx(MenuClickCapture, {}),
-    /* @__PURE__ */ jsx(InFrontOfTheCanvasWrapper, {})
+    /* @__PURE__ */ jsx(MenuClickCapture, {})
   ] });
 }
 function InFrontOfTheCanvasWrapper() {
@@ -283,17 +292,8 @@ function OverlaysWrapper() {
 function ShapesWithSVGs() {
   const editor = useEditor();
   const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
-  const dprMultiple = useValue(
-    "dpr multiple",
-    () => (
-      // dprMultiple is the smallest number we can multiply dpr by to get an integer
-      // it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-      (nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100))
-    ),
-    [editor]
-  );
   return renderingShapes.map((result) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx(Shape, { ...result, dprMultiple }),
+    /* @__PURE__ */ jsx(Shape, { ...result }),
     /* @__PURE__ */ jsx(DebugSvgCopy, { id: result.id, mode: "iframe" })
   ] }, result.id + "_fragment"));
 }
@@ -318,17 +318,8 @@ function ReflowIfNeeded() {
 function ShapesToDisplay() {
   const editor = useEditor();
   const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
-  const dprMultiple = useValue(
-    "dpr multiple",
-    () => (
-      // dprMultiple is the smallest number we can multiply dpr by to get an integer
-      // it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-      (nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100))
-    ),
-    [editor]
-  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderingShapes.map((result) => /* @__PURE__ */ jsx(Shape, { ...result, dprMultiple }, result.id + "_shape")),
+    renderingShapes.map((result) => /* @__PURE__ */ jsx(Shape, { ...result }, result.id + "_shape")),
     tlenv.isSafari && /* @__PURE__ */ jsx(ReflowIfNeeded, {})
   ] });
 }

package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.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 { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { Vec } from '../../primitives/Vec'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { nearestMultiple } from '../../utils/nearestMultiple'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\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\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugSvg = useValue('debug_svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<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<MenuClickCapture />\n\t\t\t<InFrontOfTheCanvasWrapper />\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.getZoomLevel(), [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.getZoomLevel(), [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.getZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesWithSVGs() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\tconst dprMultiple = useValue(\n\t\t'dpr multiple',\n\t\t() =>\n\t\t\t// dprMultiple is the smallest number we can multiply dpr by to get an integer\n\t\t\t// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)\n\t\t\tnearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),\n\t\t[editor]\n\t)\n\n\treturn renderingShapes.map((result) => (\n\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t<Shape {...result} dprMultiple={dprMultiple} />\n\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t</Fragment>\n\t))\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (\n\t\t\t\tculledShapesRef.current.size === culledShapes.size &&\n\t\t\t\t[...culledShapes].every((id) => culledShapesRef.current.has(id))\n\t\t\t)\n\t\t\t\treturn\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = document.getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\nfunction ShapesToDisplay() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\tconst dprMultiple = useValue(\n\t\t'dpr multiple',\n\t\t() =>\n\t\t\t// dprMultiple is the smallest number we can multiply dpr by to get an integer\n\t\t\t// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)\n\t\t\tnearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{renderingShapes.map((result) => (\n\t\t\t\t<Shape key={result.id + '_shape'} {...result} dprMultiple={dprMultiple} />\n\t\t\t))}\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</>\n\t)\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue('hinting shape ids', () => dedupe(editor.getHintingShapeIds()), [editor])\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { Vec } from '../../primitives/Vec'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { markEventAsHandled, setStyleProperty } from '../../utils/dom'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\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\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugSvg = useValue('debug_svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<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<div\n\t\t\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\t\t\tonPointerDown={markEventAsHandled}\n\t\t\t\t\tonPointerUp={markEventAsHandled}\n\t\t\t\t\tonTouchStart={markEventAsHandled}\n\t\t\t\t\tonTouchEnd={markEventAsHandled}\n\t\t\t\t>\n\t\t\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t\t</div>\n\t\t\t\t<MovingCameraHitTestBlocker />\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.getZoomLevel(), [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.getZoomLevel(), [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.getZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesWithSVGs() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn renderingShapes.map((result) => (\n\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t<Shape {...result} />\n\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t</Fragment>\n\t))\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (\n\t\t\t\tculledShapesRef.current.size === culledShapes.size &&\n\t\t\t\t[...culledShapes].every((id) => culledShapesRef.current.has(id))\n\t\t\t)\n\t\t\t\treturn\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = document.getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\nfunction ShapesToDisplay() {\n\tconst editor = useEditor()\n\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<>\n\t\t\t{renderingShapes.map((result) => (\n\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t))}\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</>\n\t)\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue('hinting shape ids', () => dedupe(editor.getHintingShapeIds()), [editor])\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["Fragment", "handles"]
 }

package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs CHANGED Viewed

@@ -22,14 +22,14 @@ function DefaultCollaboratorHint({
     Vec.Angle(viewport.center, point)
   );
   const cursorHintId = useSharedSafeId("cursor_hint");
-  return /* @__PURE__ */ jsxs("svg", { ref: rSvg, className: classNames("tl-overlays__item", className), children: [
+  return /* @__PURE__ */ jsxs("svg", { ref: rSvg, className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx(
       "use",
       {
         href: `#${cursorHintId}`,
         color,
         strokeWidth: 3,
-        stroke: "var(--color-background)"
+        stroke: "var(--tl-color-background)"
       }
     ),
     /* @__PURE__ */ jsx("use", { href: `#${cursorHintId}`, color, opacity })

package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCollaboratorHint.tsx"],
-  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { Vec } from '../../primitives/Vec'\nimport { clamp } from '../../primitives/utils'\n\n/** @public */\nexport interface TLCollaboratorHintProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel\n\tviewport: Box\n\tzoom: number\n\topacity?: number\n\tcolor: string\n}\n\n/** @public @react */\nexport function DefaultCollaboratorHint({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tviewport,\n\topacity = 1,\n}: TLCollaboratorHintProps) {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tuseTransform(\n\t\trSvg,\n\t\tclamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),\n\t\tclamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),\n\t\t1 / zoom,\n\t\tVec.Angle(viewport.center, point)\n\t)\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\n\treturn (\n\t\t<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>\n\t\t\t<use\n\t\t\t\thref={`#${cursorHintId}`}\n\t\t\t\tcolor={color}\n\t\t\t\tstrokeWidth={3}\n\t\t\t\tstroke=\"var(--color-background)\"\n\t\t\t/>\n\t\t\t<use href={`#${cursorHintId}`} color={color} opacity={opacity} />\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AAyCE,SACC,KADD;AAxCF,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAE7B,SAAS,WAAW;AACpB,SAAS,aAAa;AAcf,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACX,GAA4B;AAC3B,QAAM,OAAO,OAAsB,IAAI;AAEvC;AAAA,IACC;AAAA,IACA,MAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,MAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,IAAI;AAAA,IACJ,IAAI,MAAM,SAAS,QAAQ,KAAK;AAAA,EACjC;AACA,QAAM,eAAe,gBAAgB,aAAa;AAElD,SACC,qBAAC,SAAI,KAAK,MAAM,WAAW,WAAW,qBAAqB,SAAS,GACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,IAAI,YAAY;AAAA,QACtB;AAAA,QACA,aAAa;AAAA,QACb,QAAO;AAAA;AAAA,IACR;AAAA,IACA,oBAAC,SAAI,MAAM,IAAI,YAAY,IAAI,OAAc,SAAkB;AAAA,KAChE;AAEF;",
+  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { Vec } from '../../primitives/Vec'\nimport { clamp } from '../../primitives/utils'\n\n/** @public */\nexport interface TLCollaboratorHintProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel\n\tviewport: Box\n\tzoom: number\n\topacity?: number\n\tcolor: string\n}\n\n/** @public @react */\nexport function DefaultCollaboratorHint({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tviewport,\n\topacity = 1,\n}: TLCollaboratorHintProps) {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tuseTransform(\n\t\trSvg,\n\t\tclamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),\n\t\tclamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),\n\t\t1 / zoom,\n\t\tVec.Angle(viewport.center, point)\n\t)\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\n\treturn (\n\t\t<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<use\n\t\t\t\thref={`#${cursorHintId}`}\n\t\t\t\tcolor={color}\n\t\t\t\tstrokeWidth={3}\n\t\t\t\tstroke=\"var(--tl-color-background)\"\n\t\t\t/>\n\t\t\t<use href={`#${cursorHintId}`} color={color} opacity={opacity} />\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AAyCE,SACC,KADD;AAxCF,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAE7B,SAAS,WAAW;AACpB,SAAS,aAAa;AAcf,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACX,GAA4B;AAC3B,QAAM,OAAO,OAAsB,IAAI;AAEvC;AAAA,IACC;AAAA,IACA,MAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,MAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,IAAI;AAAA,IACJ,IAAI,MAAM,SAAS,QAAQ,KAAK;AAAA,EACjC;AACA,QAAM,eAAe,gBAAgB,aAAa;AAElD,SACC,qBAAC,SAAI,KAAK,MAAM,WAAW,WAAW,qBAAqB,SAAS,GAAG,eAAY,QAClF;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,IAAI,YAAY;AAAA,QACtB;AAAA,QACA,aAAa;AAAA,QACb,QAAO;AAAA;AAAA,IACR;AAAA,IACA,oBAAC,SAAI,MAAM,IAAI,YAAY,IAAI,OAAc,SAAkB;AAAA,KAChE;AAEF;",
   "names": []
 }

package/dist-esm/lib/components/default-components/DefaultCursor.mjs CHANGED Viewed

@@ -16,7 +16,7 @@ const DefaultCursor = memo(function DefaultCursor2({
   const cursorId = useSharedSafeId("cursor");
   if (!point) return null;
   return /* @__PURE__ */ jsxs("div", { ref: rCursor, className: classNames("tl-overlays__item", className), children: [
-    /* @__PURE__ */ jsx("svg", { className: "tl-cursor", children: /* @__PURE__ */ jsx("use", { href: `#${cursorId}`, color }) }),
+    /* @__PURE__ */ jsx("svg", { className: "tl-cursor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { href: `#${cursorId}`, color }) }),
     chatMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [
       name && /* @__PURE__ */ jsx("div", { className: "tl-nametag-title", style: { color }, children: name }),
       /* @__PURE__ */ jsx("div", { className: "tl-nametag-chat", style: { backgroundColor: color }, children: chatMessage })

package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCursor.tsx"],
-  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\n\n/** @public */\nexport interface TLCursorProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel | null\n\tzoom: number\n\tcolor?: string\n\tname: string | null\n\tchatMessage: string\n}\n\n/** @public @react */\nexport const DefaultCursor = memo(function DefaultCursor({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tname,\n\tchatMessage,\n}: TLCursorProps) {\n\tconst rCursor = useRef<HTMLDivElement>(null)\n\tuseTransform(rCursor, point?.x, point?.y, 1 / zoom)\n\n\tconst cursorId = useSharedSafeId('cursor')\n\n\tif (!point) return null\n\n\treturn (\n\t\t<div ref={rCursor} className={classNames('tl-overlays__item', className)}>\n\t\t\t<svg className=\"tl-cursor\">\n\t\t\t\t<use href={`#${cursorId}`} color={color} />\n\t\t\t</svg>\n\t\t\t{chatMessage ? (\n\t\t\t\t<>\n\t\t\t\t\t{name && (\n\t\t\t\t\t\t<div className=\"tl-nametag-title\" style={{ color }}>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"tl-nametag-chat\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{chatMessage}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tname && (\n\t\t\t\t\t<div className=\"tl-nametag\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAoCI,SAGA,UAHA,KAGA,YAHA;AAnCJ,OAAO,gBAAgB;AACvB,SAAS,MAAM,cAAc;AAC7B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AActB,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,QAAM,UAAU,OAAuB,IAAI;AAC3C,eAAa,SAAS,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI;AAElD,QAAM,WAAW,gBAAgB,QAAQ;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,qBAAC,SAAI,KAAK,SAAS,WAAW,WAAW,qBAAqB,SAAS,GACtE;AAAA,wBAAC,SAAI,WAAU,aACd,8BAAC,SAAI,MAAM,IAAI,QAAQ,IAAI,OAAc,GAC1C;AAAA,IACC,cACA,iCACE;AAAA,cACA,oBAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,MAAM,GAC/C,gBACF;AAAA,MAED,oBAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,iBAAiB,MAAM,GAC/D,uBACF;AAAA,OACD,IAEA,QACC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,iBAAiB,MAAM,GAC1D,gBACF;AAAA,KAGH;AAEF,CAAC;",
+  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\n\n/** @public */\nexport interface TLCursorProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel | null\n\tzoom: number\n\tcolor?: string\n\tname: string | null\n\tchatMessage: string\n}\n\n/** @public @react */\nexport const DefaultCursor = memo(function DefaultCursor({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tname,\n\tchatMessage,\n}: TLCursorProps) {\n\tconst rCursor = useRef<HTMLDivElement>(null)\n\tuseTransform(rCursor, point?.x, point?.y, 1 / zoom)\n\n\tconst cursorId = useSharedSafeId('cursor')\n\n\tif (!point) return null\n\n\treturn (\n\t\t<div ref={rCursor} className={classNames('tl-overlays__item', className)}>\n\t\t\t<svg className=\"tl-cursor\" aria-hidden=\"true\">\n\t\t\t\t<use href={`#${cursorId}`} color={color} />\n\t\t\t</svg>\n\t\t\t{chatMessage ? (\n\t\t\t\t<>\n\t\t\t\t\t{name && (\n\t\t\t\t\t\t<div className=\"tl-nametag-title\" style={{ color }}>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"tl-nametag-chat\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{chatMessage}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tname && (\n\t\t\t\t\t<div className=\"tl-nametag\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAoCI,SAGA,UAHA,KAGA,YAHA;AAnCJ,OAAO,gBAAgB;AACvB,SAAS,MAAM,cAAc;AAC7B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AActB,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,QAAM,UAAU,OAAuB,IAAI;AAC3C,eAAa,SAAS,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI;AAElD,QAAM,WAAW,gBAAgB,QAAQ;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,qBAAC,SAAI,KAAK,SAAS,WAAW,WAAW,qBAAqB,SAAS,GACtE;AAAA,wBAAC,SAAI,WAAU,aAAY,eAAY,QACtC,8BAAC,SAAI,MAAM,IAAI,QAAQ,IAAI,OAAc,GAC1C;AAAA,IACC,cACA,iCACE;AAAA,cACA,oBAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,MAAM,GAC/C,gBACF;AAAA,MAED,oBAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,iBAAiB,MAAM,GAC/D,uBACF;AAAA,OACD,IAEA,QACC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,iBAAiB,MAAM,GAC1D,gBACF;AAAA,KAGH;AAEF,CAAC;",
   "names": ["DefaultCursor"]
 }

package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs CHANGED Viewed

@@ -53,7 +53,7 @@ const DefaultErrorFallback = ({ error, editor }) => {
       setIsDarkMode(null);
       return;
     }
-    if (typeof window !== "undefined" && "matchMedia" in window) {
+    if (typeof window !== "undefined" && window.matchMedia) {
       setIsDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
     }
   }, [isDarkModeFromApp]);

package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultErrorFallback.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { noop } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { EditorProvider } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { hardResetEditor } from '../../utils/hardResetEditor'\nimport { refreshPage } from '../../utils/refreshPage'\nimport { ErrorBoundary } from '../ErrorBoundary'\n\nconst BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'\n\n/** @public */\nexport type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>\n\n/** @public @react */\nexport const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')\n\tconst [didCopy, setDidCopy] = useState(false)\n\tconst [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)\n\n\tlet Canvas: React.ComponentType | null = null\n\ttry {\n\t\tconst components = useEditorComponents()\n\t\tCanvas = components.Canvas ?? null\n\t} catch {\n\t\t// allow this to fail silently\n\t}\n\n\tconst errorMessage = error instanceof Error ? error.message : String(error)\n\tconst errorStack = error instanceof Error ? error.stack : null\n\n\tconst isDarkModeFromApp = useValue(\n\t\t'isDarkMode',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tif (editor) {\n\t\t\t\t\treturn editor.user.getIsDarkMode()\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// we're in a funky error state so this might not work for spooky\n\t\t\t\t// reasons. if not, we'll have another attempt later:\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isDarkMode, setIsDarkMode] = useState<null | boolean>(null)\n\tuseLayoutEffect(() => {\n\t\t// if we found a theme class from the app, we can just use that\n\t\tif (isDarkModeFromApp !== null) {\n\t\t\tsetIsDarkMode(isDarkModeFromApp)\n\t\t}\n\n\t\t// do any of our parents have a theme class? if yes then we can just\n\t\t// rely on that and don't need to set our own class\n\t\tlet parent = containerRef.current?.parentElement\n\t\tlet foundParentThemeClass = false\n\t\twhile (parent) {\n\t\t\tif (\n\t\t\t\tparent.classList.contains('tl-theme__dark') ||\n\t\t\t\tparent.classList.contains('tl-theme__light')\n\t\t\t) {\n\t\t\t\tfoundParentThemeClass = true\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tparent = parent.parentElement\n\t\t}\n\t\tif (foundParentThemeClass) {\n\t\t\tsetIsDarkMode(null)\n\t\t\treturn\n\t\t}\n\n\t\t// if we can't find a theme class from the app or from a parent, we have\n\t\t// to fall back on using a media query:\n\t\tif (typeof window !== 'undefined' && 'matchMedia' in window) {\n\t\t\tsetIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)\n\t\t}\n\t}, [isDarkModeFromApp])\n\n\tuseEffect(() => {\n\t\tif (didCopy) {\n\t\t\tconst timeout = editor?.timers.setTimeout(() => {\n\t\t\t\tsetDidCopy(false)\n\t\t\t}, 2000)\n\t\t\treturn () => clearTimeout(timeout)\n\t\t}\n\t}, [didCopy, editor])\n\n\tconst copyError = () => {\n\t\tconst textarea = document.createElement('textarea')\n\t\ttextarea.value = errorStack ?? errorMessage\n\t\tdocument.body.appendChild(textarea)\n\t\ttextarea.select()\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tdocument.execCommand('copy')\n\t\ttextarea.remove()\n\t\tsetDidCopy(true)\n\t}\n\n\tconst refresh = () => {\n\t\trefreshPage()\n\t}\n\n\tconst resetLocalState = async () => {\n\t\thardResetEditor()\n\t}\n\n\tconst url = new URL(BASE_ERROR_URL)\n\turl.searchParams.set('title', errorMessage)\n\turl.searchParams.set('labels', `bug`)\n\turl.searchParams.set(\n\t\t'body',\n\t\t`Hey, I ran into an error while using tldraw:\n\n\\`\\`\\`js\n${errorStack ?? errorMessage}\n\\`\\`\\`\n\nMy browser: ${navigator.userAgent}`\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-container tl-error-boundary',\n\t\t\t\t// error-boundary is sometimes used outside of the theme\n\t\t\t\t// container, so we need to provide it with a theme for our\n\t\t\t\t// styles to work correctly\n\t\t\t\tisDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"tl-error-boundary__overlay\" />\n\t\t\t{editor && (\n\t\t\t\t// opportunistically attempt to render the canvas to reassure\n\t\t\t\t// the user that their document is still there. there's a good\n\t\t\t\t// chance this won't work (ie the error that we're currently\n\t\t\t\t// notifying the user about originates in the canvas) so it's\n\t\t\t\t// not a big deal if it doesn't work - in that case we just have\n\t\t\t\t// a plain grey background.\n\t\t\t\t<ErrorBoundary onError={noop} fallback={() => null}>\n\t\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t\t<div className=\"tl-overlay tl-error-boundary__canvas\">{Canvas ? <Canvas /> : null}</div>\n\t\t\t\t\t</EditorProvider>\n\t\t\t\t</ErrorBoundary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames('tl-modal', 'tl-error-boundary__content', {\n\t\t\t\t\t'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{shouldShowResetConfirmation ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Are you sure?</h2>\n\t\t\t\t\t\t<p>Resetting your data will delete your drawing and cannot be undone.</p>\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowResetConfirmation(false)}>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__reset\" onClick={resetLocalState}>\n\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Something went wrong</h2>\n\t\t\t\t\t\t<p>Please refresh your browser.</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf the issue continues after refreshing, you may need to reset the tldraw data stored\n\t\t\t\t\t\t\ton your device.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Note:</strong> Resetting will erase your current project and any unsaved work.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{process.env.NODE_ENV !== 'production' && (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tIf you&apos;re developing with the SDK and need help, join us on{' '}\n\t\t\t\t\t\t\t\t<a href=\"https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen\">\n\t\t\t\t\t\t\t\t\tDiscord\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{shouldShowError && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tMessage:\n\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t<code>{errorMessage}</code>\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\tStack trace:\n\t\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__error\">\n\t\t\t\t\t\t\t\t\t<pre>\n\t\t\t\t\t\t\t\t\t\t<code>{errorStack ?? errorMessage}</code>\n\t\t\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={copyError}>\n\t\t\t\t\t\t\t\t\t\t{didCopy ? 'Copied!' : 'Copy'}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowError(!shouldShowError)}>\n\t\t\t\t\t\t\t\t{shouldShowError ? 'Hide details' : 'Show details'}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions__group\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-button tl-error-boundary__reset\"\n\t\t\t\t\t\t\t\t\tonClick={() => setShouldShowResetConfirmation(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__refresh\" onClick={refresh}>\n\t\t\t\t\t\t\t\t\tRefresh Page\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { noop } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { EditorProvider } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { hardResetEditor } from '../../utils/hardResetEditor'\nimport { refreshPage } from '../../utils/refreshPage'\nimport { ErrorBoundary } from '../ErrorBoundary'\n\nconst BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'\n\n/** @public */\nexport type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>\n\n/** @public @react */\nexport const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')\n\tconst [didCopy, setDidCopy] = useState(false)\n\tconst [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)\n\n\tlet Canvas: React.ComponentType | null = null\n\ttry {\n\t\tconst components = useEditorComponents()\n\t\tCanvas = components.Canvas ?? null\n\t} catch {\n\t\t// allow this to fail silently\n\t}\n\n\tconst errorMessage = error instanceof Error ? error.message : String(error)\n\tconst errorStack = error instanceof Error ? error.stack : null\n\n\tconst isDarkModeFromApp = useValue(\n\t\t'isDarkMode',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tif (editor) {\n\t\t\t\t\treturn editor.user.getIsDarkMode()\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// we're in a funky error state so this might not work for spooky\n\t\t\t\t// reasons. if not, we'll have another attempt later:\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isDarkMode, setIsDarkMode] = useState<null | boolean>(null)\n\tuseLayoutEffect(() => {\n\t\t// if we found a theme class from the app, we can just use that\n\t\tif (isDarkModeFromApp !== null) {\n\t\t\tsetIsDarkMode(isDarkModeFromApp)\n\t\t}\n\n\t\t// do any of our parents have a theme class? if yes then we can just\n\t\t// rely on that and don't need to set our own class\n\t\tlet parent = containerRef.current?.parentElement\n\t\tlet foundParentThemeClass = false\n\t\twhile (parent) {\n\t\t\tif (\n\t\t\t\tparent.classList.contains('tl-theme__dark') ||\n\t\t\t\tparent.classList.contains('tl-theme__light')\n\t\t\t) {\n\t\t\t\tfoundParentThemeClass = true\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tparent = parent.parentElement\n\t\t}\n\t\tif (foundParentThemeClass) {\n\t\t\tsetIsDarkMode(null)\n\t\t\treturn\n\t\t}\n\n\t\t// if we can't find a theme class from the app or from a parent, we have\n\t\t// to fall back on using a media query:\n\t\tif (typeof window !== 'undefined' && window.matchMedia) {\n\t\t\tsetIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)\n\t\t}\n\t}, [isDarkModeFromApp])\n\n\tuseEffect(() => {\n\t\tif (didCopy) {\n\t\t\tconst timeout = editor?.timers.setTimeout(() => {\n\t\t\t\tsetDidCopy(false)\n\t\t\t}, 2000)\n\t\t\treturn () => clearTimeout(timeout)\n\t\t}\n\t}, [didCopy, editor])\n\n\tconst copyError = () => {\n\t\tconst textarea = document.createElement('textarea')\n\t\ttextarea.value = errorStack ?? errorMessage\n\t\tdocument.body.appendChild(textarea)\n\t\ttextarea.select()\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tdocument.execCommand('copy')\n\t\ttextarea.remove()\n\t\tsetDidCopy(true)\n\t}\n\n\tconst refresh = () => {\n\t\trefreshPage()\n\t}\n\n\tconst resetLocalState = async () => {\n\t\thardResetEditor()\n\t}\n\n\tconst url = new URL(BASE_ERROR_URL)\n\turl.searchParams.set('title', errorMessage)\n\turl.searchParams.set('labels', `bug`)\n\turl.searchParams.set(\n\t\t'body',\n\t\t`Hey, I ran into an error while using tldraw:\n\n\\`\\`\\`js\n${errorStack ?? errorMessage}\n\\`\\`\\`\n\nMy browser: ${navigator.userAgent}`\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-container tl-error-boundary',\n\t\t\t\t// error-boundary is sometimes used outside of the theme\n\t\t\t\t// container, so we need to provide it with a theme for our\n\t\t\t\t// styles to work correctly\n\t\t\t\tisDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"tl-error-boundary__overlay\" />\n\t\t\t{editor && (\n\t\t\t\t// opportunistically attempt to render the canvas to reassure\n\t\t\t\t// the user that their document is still there. there's a good\n\t\t\t\t// chance this won't work (ie the error that we're currently\n\t\t\t\t// notifying the user about originates in the canvas) so it's\n\t\t\t\t// not a big deal if it doesn't work - in that case we just have\n\t\t\t\t// a plain grey background.\n\t\t\t\t<ErrorBoundary onError={noop} fallback={() => null}>\n\t\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t\t<div className=\"tl-overlay tl-error-boundary__canvas\">{Canvas ? <Canvas /> : null}</div>\n\t\t\t\t\t</EditorProvider>\n\t\t\t\t</ErrorBoundary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames('tl-modal', 'tl-error-boundary__content', {\n\t\t\t\t\t'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{shouldShowResetConfirmation ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Are you sure?</h2>\n\t\t\t\t\t\t<p>Resetting your data will delete your drawing and cannot be undone.</p>\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowResetConfirmation(false)}>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__reset\" onClick={resetLocalState}>\n\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Something went wrong</h2>\n\t\t\t\t\t\t<p>Please refresh your browser.</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf the issue continues after refreshing, you may need to reset the tldraw data stored\n\t\t\t\t\t\t\ton your device.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>Note:</strong> Resetting will erase your current project and any unsaved work.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{process.env.NODE_ENV !== 'production' && (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tIf you&apos;re developing with the SDK and need help, join us on{' '}\n\t\t\t\t\t\t\t\t<a href=\"https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen\">\n\t\t\t\t\t\t\t\t\tDiscord\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{shouldShowError && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tMessage:\n\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t<code>{errorMessage}</code>\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\tStack trace:\n\t\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__error\">\n\t\t\t\t\t\t\t\t\t<pre>\n\t\t\t\t\t\t\t\t\t\t<code>{errorStack ?? errorMessage}</code>\n\t\t\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={copyError}>\n\t\t\t\t\t\t\t\t\t\t{didCopy ? 'Copied!' : 'Copy'}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button className=\"tlui-button\" onClick={() => setShouldShowError(!shouldShowError)}>\n\t\t\t\t\t\t\t\t{shouldShowError ? 'Hide details' : 'Show details'}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions__group\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-button tl-error-boundary__reset\"\n\t\t\t\t\t\t\t\t\tonClick={() => setShouldShowResetConfirmation(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button className=\"tlui-button tl-error-boundary__refresh\" onClick={refresh}>\n\t\t\t\t\t\t\t\t\tRefresh Page\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/components/default-components/DefaultGrid.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ function DefaultGrid({ x, y, z, size }) {
   const id = useUniqueSafeId("grid");
   const editor = useEditor();
   const { gridSteps } = editor.options;
-  return /* @__PURE__ */ jsxs("svg", { className: "tl-grid", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: [
+  return /* @__PURE__ */ jsxs("svg", { className: "tl-grid", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("defs", { children: gridSteps.map(({ min, mid, step }, i) => {
       const s = step * size * z;
       const xo = 0.5 + x * z;

package/dist-esm/lib/components/default-components/DefaultGrid.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultGrid.tsx"],
-  "sourcesContent": ["import { modulate } from '@tldraw/utils'\nimport { useEditor } from '../../hooks/useEditor'\nimport { suffixSafeId, useUniqueSafeId } from '../../hooks/useSafeId'\n\n/** @public */\nexport interface TLGridProps {\n\tx: number\n\ty: number\n\tz: number\n\tsize: number\n}\n\n/** @public @react */\nexport function DefaultGrid({ x, y, z, size }: TLGridProps) {\n\tconst id = useUniqueSafeId('grid')\n\tconst editor = useEditor()\n\tconst { gridSteps } = editor.options\n\treturn (\n\t\t<svg className=\"tl-grid\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<defs>\n\t\t\t\t{gridSteps.map(({ min, mid, step }, i) => {\n\t\t\t\t\tconst s = step * size * z\n\t\t\t\t\tconst xo = 0.5 + x * z\n\t\t\t\t\tconst yo = 0.5 + y * z\n\t\t\t\t\tconst gxo = xo > 0 ? xo % s : s + (xo % s)\n\t\t\t\t\tconst gyo = yo > 0 ? yo % s : s + (yo % s)\n\t\t\t\t\tconst opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<pattern\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tid={suffixSafeId(id, `${step}`)}\n\t\t\t\t\t\t\twidth={s}\n\t\t\t\t\t\t\theight={s}\n\t\t\t\t\t\t\tpatternUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<circle className=\"tl-grid-dot\" cx={gxo} cy={gyo} r={1} opacity={opacity} />\n\t\t\t\t\t\t</pattern>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</defs>\n\t\t\t{gridSteps.map(({ step }, i) => (\n\t\t\t\t<rect key={i} width=\"100%\" height=\"100%\" fill={`url(#${id}_${step})`} />\n\t\t\t))}\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AAkBE,SAkBK,KAlBL;AAlBF,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,uBAAuB;AAWvC,SAAS,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAgB;AAC3D,QAAM,KAAK,gBAAgB,MAAM;AACjC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,UAAU,IAAI,OAAO;AAC7B,SACC,qBAAC,SAAI,WAAU,WAAU,SAAQ,OAAM,OAAM,8BAC5C;AAAA,wBAAC,UACC,oBAAU,IAAI,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,MAAM;AACzC,YAAM,IAAI,OAAO,OAAO;AACxB,YAAM,KAAK,MAAM,IAAI;AACrB,YAAM,KAAK,MAAM,IAAI;AACrB,YAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;AACxC,YAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;AACxC,YAAM,UAAU,IAAI,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI;AAE5D,aACC;AAAA,QAAC;AAAA;AAAA,UAEA,IAAI,aAAa,IAAI,GAAG,IAAI,EAAE;AAAA,UAC9B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAa;AAAA,UAEb,8BAAC,YAAO,WAAU,eAAc,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,SAAkB;AAAA;AAAA,QANrE;AAAA,MAON;AAAA,IAEF,CAAC,GACF;AAAA,IACC,UAAU,IAAI,CAAC,EAAE,KAAK,GAAG,MACzB,oBAAC,UAAa,OAAM,QAAO,QAAO,QAAO,MAAM,QAAQ,EAAE,IAAI,IAAI,OAAtD,CAA2D,CACtE;AAAA,KACF;AAEF;",
+  "sourcesContent": ["import { modulate } from '@tldraw/utils'\nimport { useEditor } from '../../hooks/useEditor'\nimport { suffixSafeId, useUniqueSafeId } from '../../hooks/useSafeId'\n\n/** @public */\nexport interface TLGridProps {\n\tx: number\n\ty: number\n\tz: number\n\tsize: number\n}\n\n/** @public @react */\nexport function DefaultGrid({ x, y, z, size }: TLGridProps) {\n\tconst id = useUniqueSafeId('grid')\n\tconst editor = useEditor()\n\tconst { gridSteps } = editor.options\n\treturn (\n\t\t<svg className=\"tl-grid\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<defs>\n\t\t\t\t{gridSteps.map(({ min, mid, step }, i) => {\n\t\t\t\t\tconst s = step * size * z\n\t\t\t\t\tconst xo = 0.5 + x * z\n\t\t\t\t\tconst yo = 0.5 + y * z\n\t\t\t\t\tconst gxo = xo > 0 ? xo % s : s + (xo % s)\n\t\t\t\t\tconst gyo = yo > 0 ? yo % s : s + (yo % s)\n\t\t\t\t\tconst opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<pattern\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tid={suffixSafeId(id, `${step}`)}\n\t\t\t\t\t\t\twidth={s}\n\t\t\t\t\t\t\theight={s}\n\t\t\t\t\t\t\tpatternUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<circle className=\"tl-grid-dot\" cx={gxo} cy={gyo} r={1} opacity={opacity} />\n\t\t\t\t\t\t</pattern>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</defs>\n\t\t\t{gridSteps.map(({ step }, i) => (\n\t\t\t\t<rect key={i} width=\"100%\" height=\"100%\" fill={`url(#${id}_${step})`} />\n\t\t\t))}\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AAkBE,SAkBK,KAlBL;AAlBF,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,uBAAuB;AAWvC,SAAS,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAgB;AAC3D,QAAM,KAAK,gBAAgB,MAAM;AACjC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,UAAU,IAAI,OAAO;AAC7B,SACC,qBAAC,SAAI,WAAU,WAAU,SAAQ,OAAM,OAAM,8BAA6B,eAAY,QACrF;AAAA,wBAAC,UACC,oBAAU,IAAI,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,MAAM;AACzC,YAAM,IAAI,OAAO,OAAO;AACxB,YAAM,KAAK,MAAM,IAAI;AACrB,YAAM,KAAK,MAAM,IAAI;AACrB,YAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;AACxC,YAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;AACxC,YAAM,UAAU,IAAI,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI;AAE5D,aACC;AAAA,QAAC;AAAA;AAAA,UAEA,IAAI,aAAa,IAAI,GAAG,IAAI,EAAE;AAAA,UAC9B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAa;AAAA,UAEb,8BAAC,YAAO,WAAU,eAAc,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,SAAkB;AAAA;AAAA,QANrE;AAAA,MAON;AAAA,IAEF,CAAC,GACF;AAAA,IACC,UAAU,IAAI,CAAC,EAAE,KAAK,GAAG,MACzB,oBAAC,UAAa,OAAM,QAAO,QAAO,QAAO,MAAM,QAAQ,EAAE,IAAI,IAAI,OAAtD,CAA2D,CACtE;AAAA,KACF;AAEF;",
   "names": []
 }

package/dist-esm/lib/components/default-components/DefaultHandles.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 const DefaultHandles = ({ children }) => {
-  return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", children });
+  return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", "aria-hidden": "true", children });
 };
 export {
   DefaultHandles

package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultHandles.tsx"],
-  "sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface TLHandlesProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport const DefaultHandles = ({ children }: TLHandlesProps) => {\n\treturn <svg className=\"tl-user-handles tl-overlays__item\">{children}</svg>\n}\n"],
-  "mappings": "AASQ;AADD,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAsB;AAC/D,SAAO,oBAAC,SAAI,WAAU,qCAAqC,UAAS;AACrE;",
+  "sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface TLHandlesProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport const DefaultHandles = ({ children }: TLHandlesProps) => {\n\treturn (\n\t\t<svg className=\"tl-user-handles tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{children}\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AAUE;AAFK,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAsB;AAC/D,SACC,oBAAC,SAAI,WAAU,qCAAoC,eAAY,QAC7D,UACF;AAEF;",
   "names": []
 }

package/dist-esm/lib/components/default-components/DefaultScribble.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ function DefaultScribble({ scribble, zoom, color, opacity, className }) {
     {
       className: "tl-scribble",
       d: getSvgPathFromPoints(scribble.points, false),
-      stroke: color ?? `var(--color-${scribble.color})`,
+      stroke: color ?? `var(--tl-color-${scribble.color})`,
       fill: "none",
       strokeWidth: 8 / zoom,
       opacity: opacity ?? scribble.opacity

package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultScribble.tsx"],
-  "sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tuserId?: string\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AAoBG;AAnBH,OAAO,gBAAgB;AACvB,SAAS,4BAA4B;AAa9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,GAAG,qBAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,eAAe,SAAS,KAAK;AAAA,MAC9C,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
+  "sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tuserId?: string\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--tl-color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AAoBG;AAnBH,OAAO,gBAAgB;AACvB,SAAS,4BAA4B;AAa9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,GAAG,qBAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,kBAAkB,SAAS,KAAK;AAAA,MACjD,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
   "names": []
 }

package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs CHANGED Viewed

@@ -59,7 +59,15 @@ const DefaultShapeIndicator = memo(function DefaultShapeIndicator2({
     if (!elm) return;
     elm.style.setProperty("display", hidden ? "none" : "block");
   }, [hidden]);
-  return /* @__PURE__ */ jsx("svg", { ref: rIndicator, className: classNames("tl-overlays__item", className), children: /* @__PURE__ */ jsx("g", { className: "tl-shape-indicator", stroke: color ?? "var(--color-selected)", opacity, children: /* @__PURE__ */ jsx(InnerIndicator, { editor, id: shapeId }) }) });
+  return /* @__PURE__ */ jsx("svg", { ref: rIndicator, className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "g",
+    {
+      className: "tl-shape-indicator",
+      stroke: color ?? "var(--tl-color-selected)",
+      opacity,
+      children: /* @__PURE__ */ jsx(InnerIndicator, { editor, id: shapeId })
+    }
+  ) });
 });
 export {
   DefaultShapeIndicator