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

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

package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx"],
-  "sourcesContent": ["import { Box, TLArrowShape, useEditor, useValue, VecLike } from '@tldraw/editor'\nimport { SVGProps } from 'react'\nimport { getArrowBindings } from '../shared'\nimport { ElbowArrowEdge } from './definitions'\nimport { getElbowArrowInfo } from './getElbowArrowInfo'\n\nexport function ElbowArrowDebug({ arrow }: { arrow: TLArrowShape }) {\n\tconst editor = useEditor()\n\tconst info = useValue(\n\t\t'elbow arrow grid',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tconst info = getElbowArrowInfo(\n\t\t\t\t\teditor,\n\t\t\t\t\teditor.getShape(arrow.id)!,\n\t\t\t\t\tgetArrowBindings(editor, arrow)\n\t\t\t\t)\n\t\t\t\treturn info\n\t\t\t} catch (err) {\n\t\t\t\tconsole.error(err)\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t},\n\t\t[editor, arrow.id]\n\t)\n\n\tif (!info) return null\n\n\tconst fullBox = Box.Common([info.A.original, info.B.original]).expandBy(50)\n\n\tconst label = info.route?.name ?? ''\n\n\tconst midPoint = info.route?.midpointHandle\n\n\treturn (\n\t\t<>\n\t\t\t{info.midX !== null && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: info.midX, y: fullBox.minY }}\n\t\t\t\t\tb={{ x: info.midX, y: fullBox.maxY }}\n\t\t\t\t\tstroke=\"red\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{info.midY !== null && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: fullBox.minX, y: info.midY }}\n\t\t\t\t\tb={{ x: fullBox.maxX, y: info.midY }}\n\t\t\t\t\tstroke=\"blue\"\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{midPoint?.axis === 'x' && info.midXRange && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: info.midXRange.lo, y: midPoint.point.y }}\n\t\t\t\t\tb={{ x: info.midXRange.hi, y: midPoint.point.y }}\n\t\t\t\t\tstroke=\"red\"\n\t\t\t\t\tstrokeDasharray={'0 2'}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{midPoint?.axis === 'y' && info.midYRange && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: midPoint.point.x, y: info.midYRange.lo }}\n\t\t\t\t\tb={{ x: midPoint.point.x, y: info.midYRange.hi }}\n\t\t\t\t\tstroke=\"blue\"\n\t\t\t\t\tstrokeDasharray={'0 2'}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<DebugBox box={info.A.original} stroke=\"orange\" />\n\t\t\t<DebugBox box={info.A.expanded} stroke=\"orange\" strokeWidth={0.5} />\n\t\t\t<DebugBox\n\t\t\t\tbox={info.A.original.clone().expandBy(info.options.minElbowLegLength)}\n\t\t\t\tstroke=\"orange\"\n\t\t\t\tstrokeWidth={0.5}\n\t\t\t/>\n\t\t\t<DebugBox box={info.B.original} stroke=\"lightskyblue\" />\n\t\t\t<DebugBox box={info.B.expanded} stroke=\"lightskyblue\" strokeWidth={0.5} />\n\t\t\t<DebugBox\n\t\t\t\tbox={info.B.original.clone().expandBy(info.options.minElbowLegLength)}\n\t\t\t\tstroke=\"lightskyblue\"\n\t\t\t\tstrokeWidth={0.5}\n\t\t\t/>\n\n\t\t\t<DebugEdge edge={info.A.edges.top} axis=\"x\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.top} axis=\"x\" stroke=\"lightskyblue\" />\n\t\t\t<DebugEdge edge={info.A.edges.right} axis=\"y\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.right} axis=\"y\" stroke=\"lightskyblue\" />\n\t\t\t<DebugEdge edge={info.A.edges.bottom} axis=\"x\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.bottom} axis=\"x\" stroke=\"lightskyblue\" />\n\t\t\t<DebugEdge edge={info.A.edges.left} axis=\"y\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.left} axis=\"y\" stroke=\"lightskyblue\" />\n\n\t\t\t{info.route && <DebugRoute route={info.route.points} strokeWidth={10} />}\n\n\t\t\t<text\n\t\t\t\tx={fullBox.minX + 5}\n\t\t\t\ty={fullBox.minY - 3}\n\t\t\t\tfontSize={10}\n\t\t\t\tfill=\"black\"\n\t\t\t\tstroke=\"var(--color-background)\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpaintOrder=\"stroke\"\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</text>\n\t\t\t<text\n\t\t\t\tx={info.A.expanded.x}\n\t\t\t\ty={info.A.expanded.y}\n\t\t\t\tfontSize={10}\n\t\t\t\tfill=\"black\"\n\t\t\t\tstroke=\"var(--color-background)\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpaintOrder=\"stroke\"\n\t\t\t>\n\t\t\t\tA{info.route && `, ${info.route.aEdgePicking}`}\n\t\t\t\t{info.A.isPoint && `, point`}\n\t\t\t</text>\n\t\t\t<text\n\t\t\t\tx={info.B.expanded.x}\n\t\t\t\ty={info.B.expanded.y}\n\t\t\t\tfontSize={10}\n\t\t\t\tfill=\"black\"\n\t\t\t\tstroke=\"var(--color-background)\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpaintOrder=\"stroke\"\n\t\t\t>\n\t\t\t\tB{info.route && `, ${info.route.bEdgePicking}`}\n\t\t\t\t{info.B.isPoint && `, point`}\n\t\t\t</text>\n\t\t</>\n\t)\n}\n\nfunction DebugLine({ a, b, ...props }: { a: VecLike; b: VecLike } & SVGProps<SVGLineElement>) {\n\treturn (\n\t\t<line\n\t\t\tfill=\"none\"\n\t\t\tstrokeWidth={1}\n\t\t\tstrokeDasharray=\"4,4\"\n\t\t\tstroke=\"green\"\n\t\t\tx1={a.x}\n\t\t\ty1={a.y}\n\t\t\tx2={b.x}\n\t\t\ty2={b.y}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction DebugRoute({ route, ...props }: { route: VecLike[] } & SVGProps<SVGPolylineElement>) {\n\treturn (\n\t\t<polyline\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"darkorchid\"\n\t\t\tstrokeWidth={3}\n\t\t\topacity={0.5}\n\t\t\tpoints={route.map((r) => `${r.x},${r.y}`).join(' ')}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction DebugEdge({\n\tedge,\n\taxis,\n\t...props\n}: {\n\tedge: ElbowArrowEdge | null\n\taxis: 'x' | 'y'\n} & Omit<SVGProps<SVGLineElement>, 'scale'>) {\n\tif (!edge || edge.expanded === null) return null\n\tconst vec = (vec: VecLike) => (axis === 'x' ? { x: vec.y, y: vec.x } : vec)\n\n\treturn (\n\t\t<g>\n\t\t\t<DebugLine\n\t\t\t\ta={vec({ x: edge.expanded, y: edge.cross.min })}\n\t\t\t\tb={vec({ x: edge.expanded, y: edge.cross.max })}\n\t\t\t\tstrokeDasharray=\"0\"\n\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t\t<DebugLine\n\t\t\t\ta={vec({ x: edge.expanded - 4, y: edge.cross.min })}\n\t\t\t\tb={vec({ x: edge.expanded + 4, y: edge.cross.min })}\n\t\t\t\tstrokeDasharray=\"0\"\n\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t\t<DebugLine\n\t\t\t\ta={vec({ x: edge.expanded - 4, y: edge.cross.max })}\n\t\t\t\tb={vec({ x: edge.expanded + 4, y: edge.cross.max })}\n\t\t\t\tstrokeDasharray=\"0\"\n\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</g>\n\t)\n}\n\nfunction DebugBox({ box, ...props }: { box: Box } & SVGProps<SVGRectElement>) {\n\treturn (\n\t\t<rect\n\t\t\tx={box.minX}\n\t\t\ty={box.minY}\n\t\t\twidth={box.width}\n\t\t\theight={box.height}\n\t\t\tstrokeDasharray=\"4,4\"\n\t\t\tstrokeWidth={1}\n\t\t\tfill=\"none\"\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],
+  "sourcesContent": ["import { Box, TLArrowShape, useEditor, useValue, VecLike } from '@tldraw/editor'\nimport { SVGProps } from 'react'\nimport { getArrowBindings } from '../shared'\nimport { ElbowArrowEdge } from './definitions'\nimport { getElbowArrowInfo } from './getElbowArrowInfo'\n\nexport function ElbowArrowDebug({ arrow }: { arrow: TLArrowShape }) {\n\tconst editor = useEditor()\n\tconst info = useValue(\n\t\t'elbow arrow grid',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tconst info = getElbowArrowInfo(\n\t\t\t\t\teditor,\n\t\t\t\t\teditor.getShape(arrow.id)!,\n\t\t\t\t\tgetArrowBindings(editor, arrow)\n\t\t\t\t)\n\t\t\t\treturn info\n\t\t\t} catch (err) {\n\t\t\t\tconsole.error(err)\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t},\n\t\t[editor, arrow.id]\n\t)\n\n\tif (!info) return null\n\n\tconst fullBox = Box.Common([info.A.original, info.B.original]).expandBy(50)\n\n\tconst label = info.route?.name ?? ''\n\n\tconst midPoint = info.route?.midpointHandle\n\n\treturn (\n\t\t<>\n\t\t\t{info.midX !== null && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: info.midX, y: fullBox.minY }}\n\t\t\t\t\tb={{ x: info.midX, y: fullBox.maxY }}\n\t\t\t\t\tstroke=\"red\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{info.midY !== null && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: fullBox.minX, y: info.midY }}\n\t\t\t\t\tb={{ x: fullBox.maxX, y: info.midY }}\n\t\t\t\t\tstroke=\"blue\"\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{midPoint?.axis === 'x' && info.midXRange && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: info.midXRange.lo, y: midPoint.point.y }}\n\t\t\t\t\tb={{ x: info.midXRange.hi, y: midPoint.point.y }}\n\t\t\t\t\tstroke=\"red\"\n\t\t\t\t\tstrokeDasharray={'0 2'}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{midPoint?.axis === 'y' && info.midYRange && (\n\t\t\t\t<DebugLine\n\t\t\t\t\ta={{ x: midPoint.point.x, y: info.midYRange.lo }}\n\t\t\t\t\tb={{ x: midPoint.point.x, y: info.midYRange.hi }}\n\t\t\t\t\tstroke=\"blue\"\n\t\t\t\t\tstrokeDasharray={'0 2'}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<DebugBox box={info.A.original} stroke=\"orange\" />\n\t\t\t<DebugBox box={info.A.expanded} stroke=\"orange\" strokeWidth={0.5} />\n\t\t\t<DebugBox\n\t\t\t\tbox={info.A.original.clone().expandBy(info.options.minElbowLegLength)}\n\t\t\t\tstroke=\"orange\"\n\t\t\t\tstrokeWidth={0.5}\n\t\t\t/>\n\t\t\t<DebugBox box={info.B.original} stroke=\"lightskyblue\" />\n\t\t\t<DebugBox box={info.B.expanded} stroke=\"lightskyblue\" strokeWidth={0.5} />\n\t\t\t<DebugBox\n\t\t\t\tbox={info.B.original.clone().expandBy(info.options.minElbowLegLength)}\n\t\t\t\tstroke=\"lightskyblue\"\n\t\t\t\tstrokeWidth={0.5}\n\t\t\t/>\n\n\t\t\t<DebugEdge edge={info.A.edges.top} axis=\"x\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.top} axis=\"x\" stroke=\"lightskyblue\" />\n\t\t\t<DebugEdge edge={info.A.edges.right} axis=\"y\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.right} axis=\"y\" stroke=\"lightskyblue\" />\n\t\t\t<DebugEdge edge={info.A.edges.bottom} axis=\"x\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.bottom} axis=\"x\" stroke=\"lightskyblue\" />\n\t\t\t<DebugEdge edge={info.A.edges.left} axis=\"y\" stroke=\"orange\" />\n\t\t\t<DebugEdge edge={info.B.edges.left} axis=\"y\" stroke=\"lightskyblue\" />\n\n\t\t\t{info.route && <DebugRoute route={info.route.points} strokeWidth={10} />}\n\n\t\t\t<text\n\t\t\t\tx={fullBox.minX + 5}\n\t\t\t\ty={fullBox.minY - 3}\n\t\t\t\tfontSize={10}\n\t\t\t\tfill=\"black\"\n\t\t\t\tstroke=\"var(--tl-color-background)\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpaintOrder=\"stroke\"\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</text>\n\t\t\t<text\n\t\t\t\tx={info.A.expanded.x}\n\t\t\t\ty={info.A.expanded.y}\n\t\t\t\tfontSize={10}\n\t\t\t\tfill=\"black\"\n\t\t\t\tstroke=\"var(--tl-color-background)\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpaintOrder=\"stroke\"\n\t\t\t>\n\t\t\t\tA{info.route && `, ${info.route.aEdgePicking}`}\n\t\t\t\t{info.A.isPoint && `, point`}\n\t\t\t</text>\n\t\t\t<text\n\t\t\t\tx={info.B.expanded.x}\n\t\t\t\ty={info.B.expanded.y}\n\t\t\t\tfontSize={10}\n\t\t\t\tfill=\"black\"\n\t\t\t\tstroke=\"var(--tl-color-background)\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpaintOrder=\"stroke\"\n\t\t\t>\n\t\t\t\tB{info.route && `, ${info.route.bEdgePicking}`}\n\t\t\t\t{info.B.isPoint && `, point`}\n\t\t\t</text>\n\t\t</>\n\t)\n}\n\nfunction DebugLine({ a, b, ...props }: { a: VecLike; b: VecLike } & SVGProps<SVGLineElement>) {\n\treturn (\n\t\t<line\n\t\t\tfill=\"none\"\n\t\t\tstrokeWidth={1}\n\t\t\tstrokeDasharray=\"4,4\"\n\t\t\tstroke=\"green\"\n\t\t\tx1={a.x}\n\t\t\ty1={a.y}\n\t\t\tx2={b.x}\n\t\t\ty2={b.y}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction DebugRoute({ route, ...props }: { route: VecLike[] } & SVGProps<SVGPolylineElement>) {\n\treturn (\n\t\t<polyline\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"darkorchid\"\n\t\t\tstrokeWidth={3}\n\t\t\topacity={0.5}\n\t\t\tpoints={route.map((r) => `${r.x},${r.y}`).join(' ')}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction DebugEdge({\n\tedge,\n\taxis,\n\t...props\n}: {\n\tedge: ElbowArrowEdge | null\n\taxis: 'x' | 'y'\n} & Omit<SVGProps<SVGLineElement>, 'scale'>) {\n\tif (!edge || edge.expanded === null) return null\n\tconst vec = (vec: VecLike) => (axis === 'x' ? { x: vec.y, y: vec.x } : vec)\n\n\treturn (\n\t\t<g>\n\t\t\t<DebugLine\n\t\t\t\ta={vec({ x: edge.expanded, y: edge.cross.min })}\n\t\t\t\tb={vec({ x: edge.expanded, y: edge.cross.max })}\n\t\t\t\tstrokeDasharray=\"0\"\n\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t\t<DebugLine\n\t\t\t\ta={vec({ x: edge.expanded - 4, y: edge.cross.min })}\n\t\t\t\tb={vec({ x: edge.expanded + 4, y: edge.cross.min })}\n\t\t\t\tstrokeDasharray=\"0\"\n\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t\t<DebugLine\n\t\t\t\ta={vec({ x: edge.expanded - 4, y: edge.cross.max })}\n\t\t\t\tb={vec({ x: edge.expanded + 4, y: edge.cross.max })}\n\t\t\t\tstrokeDasharray=\"0\"\n\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</g>\n\t)\n}\n\nfunction DebugBox({ box, ...props }: { box: Box } & SVGProps<SVGRectElement>) {\n\treturn (\n\t\t<rect\n\t\t\tx={box.minX}\n\t\t\ty={box.minY}\n\t\t\twidth={box.width}\n\t\t\theight={box.height}\n\t\t\tstrokeDasharray=\"4,4\"\n\t\t\tstrokeWidth={1}\n\t\t\tfill=\"none\"\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCE;AAnCF,oBAAgE;AAEhE,oBAAiC;AAEjC,+BAAkC;AAE3B,SAAS,gBAAgB,EAAE,MAAM,GAA4B;AACnE,QAAM,aAAS,yBAAU;AACzB,QAAM,WAAO;AAAA,IACZ;AAAA,IACA,MAAM;AACL,UAAI;AACH,cAAMA,YAAO;AAAA,UACZ;AAAA,UACA,OAAO,SAAS,MAAM,EAAE;AAAA,cACxB,gCAAiB,QAAQ,KAAK;AAAA,QAC/B;AACA,eAAOA;AAAA,MACR,SAAS,KAAK;AACb,gBAAQ,MAAM,GAAG;AACjB,eAAO;AAAA,MACR;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM,EAAE;AAAA,EAClB;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,UAAU,kBAAI,OAAO,CAAC,KAAK,EAAE,UAAU,KAAK,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE;AAE1E,QAAM,QAAQ,KAAK,OAAO,QAAQ;AAElC,QAAM,WAAW,KAAK,OAAO;AAE7B,SACC,4EACE;AAAA,SAAK,SAAS,QACd;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,QAAQ,KAAK;AAAA,QACnC,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,QAAQ,KAAK;AAAA,QACnC,QAAO;AAAA;AAAA,IACR;AAAA,IAEA,KAAK,SAAS,QACd;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,EAAE,GAAG,QAAQ,MAAM,GAAG,KAAK,KAAK;AAAA,QACnC,GAAG,EAAE,GAAG,QAAQ,MAAM,GAAG,KAAK,KAAK;AAAA,QACnC,QAAO;AAAA;AAAA,IACR;AAAA,IAGA,UAAU,SAAS,OAAO,KAAK,aAC/B;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,EAAE,GAAG,KAAK,UAAU,IAAI,GAAG,SAAS,MAAM,EAAE;AAAA,QAC/C,GAAG,EAAE,GAAG,KAAK,UAAU,IAAI,GAAG,SAAS,MAAM,EAAE;AAAA,QAC/C,QAAO;AAAA,QACP,iBAAiB;AAAA;AAAA,IAClB;AAAA,IAGA,UAAU,SAAS,OAAO,KAAK,aAC/B;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,EAAE,GAAG,SAAS,MAAM,GAAG,GAAG,KAAK,UAAU,GAAG;AAAA,QAC/C,GAAG,EAAE,GAAG,SAAS,MAAM,GAAG,GAAG,KAAK,UAAU,GAAG;AAAA,QAC/C,QAAO;AAAA,QACP,iBAAiB;AAAA;AAAA,IAClB;AAAA,IAGD,4CAAC,YAAS,KAAK,KAAK,EAAE,UAAU,QAAO,UAAS;AAAA,IAChD,4CAAC,YAAS,KAAK,KAAK,EAAE,UAAU,QAAO,UAAS,aAAa,KAAK;AAAA,IAClE;AAAA,MAAC;AAAA;AAAA,QACA,KAAK,KAAK,EAAE,SAAS,MAAM,EAAE,SAAS,KAAK,QAAQ,iBAAiB;AAAA,QACpE,QAAO;AAAA,QACP,aAAa;AAAA;AAAA,IACd;AAAA,IACA,4CAAC,YAAS,KAAK,KAAK,EAAE,UAAU,QAAO,gBAAe;AAAA,IACtD,4CAAC,YAAS,KAAK,KAAK,EAAE,UAAU,QAAO,gBAAe,aAAa,KAAK;AAAA,IACxE;AAAA,MAAC;AAAA;AAAA,QACA,KAAK,KAAK,EAAE,SAAS,MAAM,EAAE,SAAS,KAAK,QAAQ,iBAAiB;AAAA,QACpE,QAAO;AAAA,QACP,aAAa;AAAA;AAAA,IACd;AAAA,IAEA,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,KAAK,MAAK,KAAI,QAAO,UAAS;AAAA,IAC5D,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,KAAK,MAAK,KAAI,QAAO,gBAAe;AAAA,IAClE,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,OAAO,MAAK,KAAI,QAAO,UAAS;AAAA,IAC9D,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,OAAO,MAAK,KAAI,QAAO,gBAAe;AAAA,IACpE,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,QAAQ,MAAK,KAAI,QAAO,UAAS;AAAA,IAC/D,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,QAAQ,MAAK,KAAI,QAAO,gBAAe;AAAA,IACrE,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,MAAM,MAAK,KAAI,QAAO,UAAS;AAAA,IAC7D,4CAAC,aAAU,MAAM,KAAK,EAAE,MAAM,MAAM,MAAK,KAAI,QAAO,gBAAe;AAAA,IAElE,KAAK,SAAS,4CAAC,cAAW,OAAO,KAAK,MAAM,QAAQ,aAAa,IAAI;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,QAAQ,OAAO;AAAA,QAClB,GAAG,QAAQ,OAAO;AAAA,QAClB,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAa;AAAA,QACb,YAAW;AAAA,QAEV;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,KAAK,EAAE,SAAS;AAAA,QACnB,GAAG,KAAK,EAAE,SAAS;AAAA,QACnB,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAa;AAAA,QACb,YAAW;AAAA,QACX;AAAA;AAAA,UACE,KAAK,SAAS,KAAK,KAAK,MAAM,YAAY;AAAA,UAC3C,KAAK,EAAE,WAAW;AAAA;AAAA;AAAA,IACpB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,KAAK,EAAE,SAAS;AAAA,QACnB,GAAG,KAAK,EAAE,SAAS;AAAA,QACnB,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAa;AAAA,QACb,YAAW;AAAA,QACX;AAAA;AAAA,UACE,KAAK,SAAS,KAAK,KAAK,MAAM,YAAY;AAAA,UAC3C,KAAK,EAAE,WAAW;AAAA;AAAA;AAAA,IACpB;AAAA,KACD;AAEF;AAEA,SAAS,UAAU,EAAE,GAAG,GAAG,GAAG,MAAM,GAA0D;AAC7F,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,aAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,QAAO;AAAA,MACP,IAAI,EAAE;AAAA,MACN,IAAI,EAAE;AAAA,MACN,IAAI,EAAE;AAAA,MACN,IAAI,EAAE;AAAA,MACL,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,WAAW,EAAE,OAAO,GAAG,MAAM,GAAwD;AAC7F,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,MACT,QAAQ,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG;AAAA,MACjD,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,UAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAG6C;AAC5C,MAAI,CAAC,QAAQ,KAAK,aAAa,KAAM,QAAO;AAC5C,QAAM,MAAM,CAACC,SAAkB,SAAS,MAAM,EAAE,GAAGA,KAAI,GAAG,GAAGA,KAAI,EAAE,IAAIA;AAEvE,SACC,6CAAC,OACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,IAAI,EAAE,GAAG,KAAK,UAAU,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,QAC9C,GAAG,IAAI,EAAE,GAAG,KAAK,UAAU,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,QAC9C,iBAAgB;AAAA,QAChB,aAAa;AAAA,QACZ,GAAG;AAAA;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,IAAI,EAAE,GAAG,KAAK,WAAW,GAAG,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,QAClD,GAAG,IAAI,EAAE,GAAG,KAAK,WAAW,GAAG,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,QAClD,iBAAgB;AAAA,QAChB,aAAa;AAAA,QACZ,GAAG;AAAA;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,GAAG,IAAI,EAAE,GAAG,KAAK,WAAW,GAAG,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,QAClD,GAAG,IAAI,EAAE,GAAG,KAAK,WAAW,GAAG,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,QAClD,iBAAgB;AAAA,QAChB,aAAa;AAAA,QACZ,GAAG;AAAA;AAAA,IACL;AAAA,KACD;AAEF;AAEA,SAAS,SAAS,EAAE,KAAK,GAAG,MAAM,GAA4C;AAC7E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,GAAG,IAAI;AAAA,MACP,GAAG,IAAI;AAAA,MACP,OAAO,IAAI;AAAA,MACX,QAAQ,IAAI;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,MAAK;AAAA,MACJ,GAAG;AAAA;AAAA,EACL;AAEF;",
   "names": ["info", "vec"]
 }

package/dist-cjs/lib/shapes/arrow/elbow/elbowArrowSnapLines.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/arrow/elbow/elbowArrowSnapLines.tsx"],
-  "sourcesContent": ["import {\n\tcomputed,\n\tComputed,\n\tEditor,\n\tTLArrowShape,\n\tTLShapeId,\n\tVec,\n\tVecLike,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { getArrowBindings } from '../shared'\n\n/**\n * A snap line for an elbow arrow segment.\n *\n * This should already belong to ElbowArrowSnapLines establishing an angle of the line.\n */\ninterface ElbowArrowSnapLine {\n\t/** The id of the shape that the snap line starts from. */\n\tstartBoundShapeId: TLShapeId | undefined\n\t/** The id of the shape that the snap line ends at. */\n\tendBoundShapeId: TLShapeId | undefined\n\t/** The perpendicular distance from the snap line to the origin. */\n\tperpDistance: number\n}\n\n/**\n * A map from an angle (0-\u03C0) to a set of snap lines. Snap lines are stored in page space. They're\n * modelled as an angle (the angle of the line itself) and a perpendicular signed distance from the\n * page origin. Each line is effectively infinite in length, but modelling them in this way makes it\n * pretty efficient for us to query for relevant snap lines.\n */\ntype ElbowArrowSnapLines = Map<number, Set<ElbowArrowSnapLine>>\n\nconst snapLinesStore = new WeakCache<Editor, Computed<ElbowArrowSnapLines>>()\n\nexport function getElbowArrowSnapLines(editor: Editor) {\n\treturn snapLinesStore\n\t\t.get(editor, (editor) => {\n\t\t\tconst currentSelectedArrowShape = computed('current selected arrow shape', () => {\n\t\t\t\tconst shape = editor.getOnlySelectedShape()\n\t\t\t\tif (!shape || !editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return null\n\t\t\t\treturn shape.id\n\t\t\t})\n\n\t\t\tconst unselectedArrowShapeIds = editor.store.query.ids('shape', () => {\n\t\t\t\tconst activeArrowShapeId = currentSelectedArrowShape.get()\n\t\t\t\tif (!activeArrowShapeId) return { type: { eq: 'arrow' } }\n\t\t\t\treturn {\n\t\t\t\t\ttype: { eq: 'arrow' },\n\t\t\t\t\tid: { neq: activeArrowShapeId },\n\t\t\t\t}\n\t\t\t})\n\n\t\t\treturn computed('elbow arrow snap lines', () => {\n\t\t\t\t// the result is a map from angle (0-\u03C0), to a set of single-axis co-ordinates. For\n\t\t\t\t// example, if a line from (0, 1) to (1, 1) is found (ie a horizontal line at y-coord 1),\n\t\t\t\t// we'll add an entry to the map with the key 0 (horizontal), and the set containing 1.\n\t\t\t\tconst result = new Map<number, Set<ElbowArrowSnapLine>>()\n\n\t\t\t\tconst currentPageShapeIds = editor.getCurrentPageShapeIds()\n\t\t\t\tconst viewportBounds = editor.getViewportPageBounds()\n\n\t\t\t\tfor (const id of unselectedArrowShapeIds.get()) {\n\t\t\t\t\tif (!currentPageShapeIds.has(id)) continue\n\n\t\t\t\t\tconst shape = editor.getShape<TLArrowShape>(id)\n\t\t\t\t\tif (shape?.type !== 'arrow') continue\n\n\t\t\t\t\tconst shapeBounds = editor.getShapePageBounds(id)\n\t\t\t\t\tif (!shapeBounds || !viewportBounds.includes(shapeBounds)) continue\n\n\t\t\t\t\tconst bindings = getArrowBindings(editor, shape)\n\t\t\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\t\t\tif (!pageTransform) continue\n\n\t\t\t\t\tconst geometry = editor.getShapeGeometry(id)\n\n\t\t\t\t\tconst pageVertices = pageTransform.applyToPoints(geometry.vertices)\n\n\t\t\t\t\tfor (let i = 1; i < pageVertices.length; i++) {\n\t\t\t\t\t\tconst prev = pageVertices[i - 1]\n\t\t\t\t\t\tconst curr = pageVertices[i]\n\n\t\t\t\t\t\tlet angle = Vec.Angle(prev, curr)\n\n\t\t\t\t\t\t// we don't care if the angle is going \"up\" or \"down\" - so we only care\n\t\t\t\t\t\t// about the 0-\u03C0 range\n\t\t\t\t\t\tif (angle < 0) angle += Math.PI\n\n\t\t\t\t\t\tlet set = result.get(angle)\n\t\t\t\t\t\tif (!set) {\n\t\t\t\t\t\t\tset = new Set()\n\t\t\t\t\t\t\tresult.set(angle, set)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst perpDistance = perpDistanceToLineAngle(prev, angle)\n\n\t\t\t\t\t\tset.add({\n\t\t\t\t\t\t\tperpDistance,\n\t\t\t\t\t\t\tstartBoundShapeId: bindings.start?.toId,\n\t\t\t\t\t\t\tendBoundShapeId: bindings.end?.toId,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn result\n\t\t\t})\n\t\t})\n\t\t.get()\n}\n\n/**\n * Return the signed distance from the origin to a point on a line of angle `lineAngle` that passes\n * through the point `pointOnLine`.\n */\nexport function perpDistanceToLineAngle(pointOnLine: VecLike, lineAngle: number): number {\n\t// The perpendicular unit vector to the line direction\n\tconst perpDir = Vec.FromAngle(lineAngle).per()\n\t// Project the point onto the perpendicular vector\n\treturn Vec.Dpr(pointOnLine, perpDir)\n}\n\n/**\n * Return the signed distance from the origin to the line segment defined by `A` and `B`.\n */\nexport function perpDistanceToLine(A: VecLike, B: VecLike): number {\n\treturn perpDistanceToLineAngle(A, Vec.Angle(A, B))\n}\n"],
+  "sourcesContent": ["import {\n\tcomputed,\n\tComputed,\n\tEditor,\n\tTLArrowShape,\n\tTLShapeId,\n\tVec,\n\tVecLike,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { getArrowBindings } from '../shared'\n\n/**\n * A snap line for an elbow arrow segment.\n *\n * This should already belong to ElbowArrowSnapLines establishing an angle of the line.\n */\ninterface ElbowArrowSnapLine {\n\t/** The id of the shape that the snap line starts from. */\n\tstartBoundShapeId: TLShapeId | undefined\n\t/** The id of the shape that the snap line ends at. */\n\tendBoundShapeId: TLShapeId | undefined\n\t/** The perpendicular distance from the snap line to the origin. */\n\tperpDistance: number\n}\n\n/**\n * A map from an angle (0-\u03C0) to a set of snap lines. Snap lines are stored in page space. They're\n * modelled as an angle (the angle of the line itself) and a perpendicular signed distance from the\n * page origin. Each line is effectively infinite in length, but modelling them in this way makes it\n * pretty efficient for us to query for relevant snap lines.\n */\ntype ElbowArrowSnapLines = Map<number, Set<ElbowArrowSnapLine>>\n\nconst snapLinesStore = new WeakCache<Editor, Computed<ElbowArrowSnapLines>>()\n\nexport function getElbowArrowSnapLines(editor: Editor) {\n\treturn snapLinesStore\n\t\t.get(editor, (editor) => {\n\t\t\tconst currentSelectedArrowShape = computed('current selected arrow shape', () => {\n\t\t\t\tconst shape = editor.getOnlySelectedShape()\n\t\t\t\tif (!shape || !editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return null\n\t\t\t\treturn shape.id\n\t\t\t})\n\n\t\t\tconst unselectedArrowShapeIds = editor.store.query.ids('shape', () => {\n\t\t\t\tconst activeArrowShapeId = currentSelectedArrowShape.get()\n\t\t\t\tif (!activeArrowShapeId) return { type: { eq: 'arrow' } } as const\n\t\t\t\treturn {\n\t\t\t\t\ttype: { eq: 'arrow' },\n\t\t\t\t\tid: { neq: activeArrowShapeId },\n\t\t\t\t} as const\n\t\t\t})\n\n\t\t\treturn computed('elbow arrow snap lines', () => {\n\t\t\t\t// the result is a map from angle (0-\u03C0), to a set of single-axis co-ordinates. For\n\t\t\t\t// example, if a line from (0, 1) to (1, 1) is found (ie a horizontal line at y-coord 1),\n\t\t\t\t// we'll add an entry to the map with the key 0 (horizontal), and the set containing 1.\n\t\t\t\tconst result = new Map<number, Set<ElbowArrowSnapLine>>()\n\n\t\t\t\tconst currentPageShapeIds = editor.getCurrentPageShapeIds()\n\t\t\t\tconst viewportBounds = editor.getViewportPageBounds()\n\n\t\t\t\tfor (const id of unselectedArrowShapeIds.get()) {\n\t\t\t\t\tif (!currentPageShapeIds.has(id)) continue\n\n\t\t\t\t\tconst shape = editor.getShape<TLArrowShape>(id)\n\t\t\t\t\tif (shape?.type !== 'arrow') continue\n\n\t\t\t\t\tconst shapeBounds = editor.getShapePageBounds(id)\n\t\t\t\t\tif (!shapeBounds || !viewportBounds.includes(shapeBounds)) continue\n\n\t\t\t\t\tconst bindings = getArrowBindings(editor, shape)\n\t\t\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\t\t\tif (!pageTransform) continue\n\n\t\t\t\t\tconst geometry = editor.getShapeGeometry(id)\n\n\t\t\t\t\tconst pageVertices = pageTransform.applyToPoints(geometry.vertices)\n\n\t\t\t\t\tfor (let i = 1; i < pageVertices.length; i++) {\n\t\t\t\t\t\tconst prev = pageVertices[i - 1]\n\t\t\t\t\t\tconst curr = pageVertices[i]\n\n\t\t\t\t\t\tlet angle = Vec.Angle(prev, curr)\n\n\t\t\t\t\t\t// we don't care if the angle is going \"up\" or \"down\" - so we only care\n\t\t\t\t\t\t// about the 0-\u03C0 range\n\t\t\t\t\t\tif (angle < 0) angle += Math.PI\n\n\t\t\t\t\t\tlet set = result.get(angle)\n\t\t\t\t\t\tif (!set) {\n\t\t\t\t\t\t\tset = new Set()\n\t\t\t\t\t\t\tresult.set(angle, set)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst perpDistance = perpDistanceToLineAngle(prev, angle)\n\n\t\t\t\t\t\tset.add({\n\t\t\t\t\t\t\tperpDistance,\n\t\t\t\t\t\t\tstartBoundShapeId: bindings.start?.toId,\n\t\t\t\t\t\t\tendBoundShapeId: bindings.end?.toId,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn result\n\t\t\t})\n\t\t})\n\t\t.get()\n}\n\n/**\n * Return the signed distance from the origin to a point on a line of angle `lineAngle` that passes\n * through the point `pointOnLine`.\n */\nexport function perpDistanceToLineAngle(pointOnLine: VecLike, lineAngle: number): number {\n\t// The perpendicular unit vector to the line direction\n\tconst perpDir = Vec.FromAngle(lineAngle).per()\n\t// Project the point onto the perpendicular vector\n\treturn Vec.Dpr(pointOnLine, perpDir)\n}\n\n/**\n * Return the signed distance from the origin to the line segment defined by `A` and `B`.\n */\nexport function perpDistanceToLine(A: VecLike, B: VecLike): number {\n\treturn perpDistanceToLineAngle(A, Vec.Angle(A, B))\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASO;AACP,oBAAiC;AAwBjC,MAAM,iBAAiB,IAAI,wBAAiD;AAErE,SAAS,uBAAuB,QAAgB;AACtD,SAAO,eACL,IAAI,QAAQ,CAACA,YAAW;AACxB,UAAM,gCAA4B,wBAAS,gCAAgC,MAAM;AAChF,YAAM,QAAQA,QAAO,qBAAqB;AAC1C,UAAI,CAAC,SAAS,CAACA,QAAO,cAA4B,OAAO,OAAO,EAAG,QAAO;AAC1E,aAAO,MAAM;AAAA,IACd,CAAC;AAED,UAAM,0BAA0BA,QAAO,MAAM,MAAM,IAAI,SAAS,MAAM;AACrE,YAAM,qBAAqB,0BAA0B,IAAI;AACzD,UAAI,CAAC,mBAAoB,QAAO,EAAE,MAAM,EAAE,IAAI,QAAQ,EAAE;AACxD,aAAO;AAAA,QACN,MAAM,EAAE,IAAI,QAAQ;AAAA,QACpB,IAAI,EAAE,KAAK,mBAAmB;AAAA,MAC/B;AAAA,IACD,CAAC;AAED,eAAO,wBAAS,0BAA0B,MAAM;AAI/C,YAAM,SAAS,oBAAI,IAAqC;AAExD,YAAM,sBAAsBA,QAAO,uBAAuB;AAC1D,YAAM,iBAAiBA,QAAO,sBAAsB;AAEpD,iBAAW,MAAM,wBAAwB,IAAI,GAAG;AAC/C,YAAI,CAAC,oBAAoB,IAAI,EAAE,EAAG;AAElC,cAAM,QAAQA,QAAO,SAAuB,EAAE;AAC9C,YAAI,OAAO,SAAS,QAAS;AAE7B,cAAM,cAAcA,QAAO,mBAAmB,EAAE;AAChD,YAAI,CAAC,eAAe,CAAC,eAAe,SAAS,WAAW,EAAG;AAE3D,cAAM,eAAW,gCAAiBA,SAAQ,KAAK;AAC/C,cAAM,gBAAgBA,QAAO,sBAAsB,EAAE;AACrD,YAAI,CAAC,cAAe;AAEpB,cAAM,WAAWA,QAAO,iBAAiB,EAAE;AAE3C,cAAM,eAAe,cAAc,cAAc,SAAS,QAAQ;AAElE,iBAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK;AAC7C,gBAAM,OAAO,aAAa,IAAI,CAAC;AAC/B,gBAAM,OAAO,aAAa,CAAC;AAE3B,cAAI,QAAQ,kBAAI,MAAM,MAAM,IAAI;AAIhC,cAAI,QAAQ,EAAG,UAAS,KAAK;AAE7B,cAAI,MAAM,OAAO,IAAI,KAAK;AAC1B,cAAI,CAAC,KAAK;AACT,kBAAM,oBAAI,IAAI;AACd,mBAAO,IAAI,OAAO,GAAG;AAAA,UACtB;AAEA,gBAAM,eAAe,wBAAwB,MAAM,KAAK;AAExD,cAAI,IAAI;AAAA,YACP;AAAA,YACA,mBAAmB,SAAS,OAAO;AAAA,YACnC,iBAAiB,SAAS,KAAK;AAAA,UAChC,CAAC;AAAA,QACF;AAAA,MACD;AAEA,aAAO;AAAA,IACR,CAAC;AAAA,EACF,CAAC,EACA,IAAI;AACP;AAMO,SAAS,wBAAwB,aAAsB,WAA2B;AAExF,QAAM,UAAU,kBAAI,UAAU,SAAS,EAAE,IAAI;AAE7C,SAAO,kBAAI,IAAI,aAAa,OAAO;AACpC;AAKO,SAAS,mBAAmB,GAAY,GAAoB;AAClE,SAAO,wBAAwB,GAAG,kBAAI,MAAM,GAAG,CAAC,CAAC;AAClD;",
   "names": ["editor"]
 }

package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js CHANGED Viewed

@@ -115,6 +115,7 @@ class Pointing extends import_editor.StateNode {
     const change = util.onHandleDrag?.(shape, {
       handle: { ...startHandle, x: 0, y: 0 },
       isPrecise: true,
+      isCreatingShape: true,
       initial
     });
     if (change) {
@@ -135,6 +136,7 @@ class Pointing extends import_editor.StateNode {
       const change = util.onHandleDrag?.(shape, {
         handle: { ...startHandle, x: 0, y: 0 },
         isPrecise: this.isPrecise,
+        isCreatingShape: true,
         initial
       });
       if (change) {
@@ -149,6 +151,7 @@ class Pointing extends import_editor.StateNode {
       const change = util.onHandleDrag?.(this.editor.getShape(shape), {
         handle: { ...endHandle, x: point.x, y: point.y },
         isPrecise: false,
+        isCreatingShape: true,
         initial
       });
       if (change) {

package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/arrow/toolStates/Pointing.tsx"],
-  "sourcesContent": ["import { StateNode, TLArrowShape, createShapeId, maybeSnapToGrid } from '@tldraw/editor'\nimport { ArrowShapeUtil } from '../ArrowShapeUtil'\nimport { clearArrowTargetState, updateArrowTargetState } from '../arrowTargetState'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tshape?: TLArrowShape\n\n\tisPrecise = false\n\tisPreciseTimerId: number | null = null\n\n\tmarkId = ''\n\n\toverride onEnter(info: { isPrecise?: boolean }) {\n\t\tthis.markId = ''\n\t\tthis.isPrecise = !!info.isPrecise\n\n\t\tconst targetState = updateArrowTargetState({\n\t\t\teditor: this.editor,\n\t\t\tpointInPageSpace: this.editor.inputs.currentPagePoint,\n\t\t\tarrow: undefined,\n\t\t\tisPrecise: this.isPrecise,\n\t\t\tcurrentBinding: undefined,\n\t\t\toppositeBinding: undefined,\n\t\t})\n\n\t\tif (!targetState) {\n\t\t\tthis.createArrowShape()\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\tthis.startPreciseTimeout()\n\t}\n\n\toverride onExit() {\n\t\tthis.shape = undefined\n\t\tclearArrowTargetState(this.editor)\n\t\tthis.clearPreciseTimeout()\n\t}\n\n\toverride onPointerMove() {\n\t\tif (this.editor.inputs.isDragging) {\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.createArrowShape()\n\t\t\t}\n\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.updateArrowShapeEndHandle()\n\n\t\t\tthis.editor.setCurrentTool('select.dragging_handle', {\n\t\t\t\tshape: this.shape,\n\t\t\t\thandle: { id: 'end', type: 'vertex', index: 'a3', x: 0, y: 0 },\n\t\t\t\tisCreating: true,\n\t\t\t\tcreatingMarkId: this.markId || undefined,\n\t\t\t\tonInteractionEnd: 'arrow',\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.cancel()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tcancel() {\n\t\tif (this.shape) {\n\t\t\t// the arrow might not have been created yet!\n\t\t\tthis.editor.bailToMark(this.markId)\n\t\t}\n\t\tthis.parent.transition('idle')\n\t}\n\n\tcreateArrowShape() {\n\t\tconst { originPagePoint } = this.editor.inputs\n\n\t\tconst id = createShapeId()\n\n\t\tthis.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`)\n\t\tconst newPoint = maybeSnapToGrid(originPagePoint, this.editor)\n\t\tthis.editor.createShape<TLArrowShape>({\n\t\t\tid,\n\t\t\ttype: 'arrow',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t\tprops: {\n\t\t\t\tscale: this.editor.user.getIsDynamicResizeMode() ? 1 / this.editor.getZoomLevel() : 1,\n\t\t\t},\n\t\t})\n\n\t\tconst shape = this.editor.getShape<TLArrowShape>(id)\n\t\tif (!shape) return\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\tconst initial = this.shape\n\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\tisPrecise: true,\n\t\t\tinitial: initial,\n\t\t})\n\n\t\tif (change) {\n\t\t\tthis.editor.updateShapes([change])\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(id)\n\t\tthis.editor.select(id)\n\t}\n\n\tupdateArrowShapeEndHandle() {\n\t\tconst shape = this.shape\n\t\tif (!shape) throw Error(`expected shape`)\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\t// start update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\t\tisPrecise: this.isPrecise,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// end update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst point = this.editor.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)\n\t\t\tconst endHandle = handles.find((h) => h.id === 'end')!\n\t\t\tconst change = util.onHandleDrag?.(this.editor.getShape(shape)!, {\n\t\t\t\thandle: { ...endHandle, x: point.x, y: point.y },\n\t\t\t\tisPrecise: false,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(shape.id)\n\t}\n\n\tprivate startPreciseTimeout() {\n\t\tconst arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')\n\n\t\tthis.isPreciseTimerId = this.editor.timers.setTimeout(() => {\n\t\t\tif (!this.getIsActive()) return\n\t\t\tthis.isPrecise = true\n\t\t}, arrowUtil.options.pointingPreciseTimeout)\n\t}\n\n\tprivate clearPreciseTimeout() {\n\t\tif (this.isPreciseTimerId !== null) {\n\t\t\tclearTimeout(this.isPreciseTimerId)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { StateNode, TLArrowShape, createShapeId, maybeSnapToGrid } from '@tldraw/editor'\nimport { ArrowShapeUtil } from '../ArrowShapeUtil'\nimport { clearArrowTargetState, updateArrowTargetState } from '../arrowTargetState'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tshape?: TLArrowShape\n\n\tisPrecise = false\n\tisPreciseTimerId: number | null = null\n\n\tmarkId = ''\n\n\toverride onEnter(info: { isPrecise?: boolean }) {\n\t\tthis.markId = ''\n\t\tthis.isPrecise = !!info.isPrecise\n\n\t\tconst targetState = updateArrowTargetState({\n\t\t\teditor: this.editor,\n\t\t\tpointInPageSpace: this.editor.inputs.currentPagePoint,\n\t\t\tarrow: undefined,\n\t\t\tisPrecise: this.isPrecise,\n\t\t\tcurrentBinding: undefined,\n\t\t\toppositeBinding: undefined,\n\t\t})\n\n\t\tif (!targetState) {\n\t\t\tthis.createArrowShape()\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\tthis.startPreciseTimeout()\n\t}\n\n\toverride onExit() {\n\t\tthis.shape = undefined\n\t\tclearArrowTargetState(this.editor)\n\t\tthis.clearPreciseTimeout()\n\t}\n\n\toverride onPointerMove() {\n\t\tif (this.editor.inputs.isDragging) {\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.createArrowShape()\n\t\t\t}\n\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.updateArrowShapeEndHandle()\n\n\t\t\tthis.editor.setCurrentTool('select.dragging_handle', {\n\t\t\t\tshape: this.shape,\n\t\t\t\thandle: { id: 'end', type: 'vertex', index: 'a3', x: 0, y: 0 },\n\t\t\t\tisCreating: true,\n\t\t\t\tcreatingMarkId: this.markId || undefined,\n\t\t\t\tonInteractionEnd: 'arrow',\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.cancel()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tcancel() {\n\t\tif (this.shape) {\n\t\t\t// the arrow might not have been created yet!\n\t\t\tthis.editor.bailToMark(this.markId)\n\t\t}\n\t\tthis.parent.transition('idle')\n\t}\n\n\tcreateArrowShape() {\n\t\tconst { originPagePoint } = this.editor.inputs\n\n\t\tconst id = createShapeId()\n\n\t\tthis.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`)\n\t\tconst newPoint = maybeSnapToGrid(originPagePoint, this.editor)\n\t\tthis.editor.createShape<TLArrowShape>({\n\t\t\tid,\n\t\t\ttype: 'arrow',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t\tprops: {\n\t\t\t\tscale: this.editor.user.getIsDynamicResizeMode() ? 1 / this.editor.getZoomLevel() : 1,\n\t\t\t},\n\t\t})\n\n\t\tconst shape = this.editor.getShape<TLArrowShape>(id)\n\t\tif (!shape) return\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\tconst initial = this.shape\n\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\tisPrecise: true,\n\t\t\tisCreatingShape: true,\n\t\t\tinitial: initial,\n\t\t})\n\n\t\tif (change) {\n\t\t\tthis.editor.updateShapes([change])\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(id)\n\t\tthis.editor.select(id)\n\t}\n\n\tupdateArrowShapeEndHandle() {\n\t\tconst shape = this.shape\n\t\tif (!shape) throw Error(`expected shape`)\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\t// start update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\t\tisPrecise: this.isPrecise,\n\t\t\t\tisCreatingShape: true,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// end update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst point = this.editor.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)\n\t\t\tconst endHandle = handles.find((h) => h.id === 'end')!\n\t\t\tconst change = util.onHandleDrag?.(this.editor.getShape(shape)!, {\n\t\t\t\thandle: { ...endHandle, x: point.x, y: point.y },\n\t\t\t\tisPrecise: false,\n\t\t\t\tisCreatingShape: true,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(shape.id)\n\t}\n\n\tprivate startPreciseTimeout() {\n\t\tconst arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')\n\n\t\tthis.isPreciseTimerId = this.editor.timers.setTimeout(() => {\n\t\t\tif (!this.getIsActive()) return\n\t\t\tthis.isPrecise = true\n\t\t}, arrowUtil.options.pointingPreciseTimeout)\n\t}\n\n\tprivate clearPreciseTimeout() {\n\t\tif (this.isPreciseTimerId !== null) {\n\t\t\tclearTimeout(this.isPreciseTimerId)\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js CHANGED Viewed

@@ -115,9 +115,9 @@ function BookmarkShapeComponent({ shape }) {
   const address = getHumanReadableAddress(shape);
   const [isFaviconValid, setIsFaviconValid] = (0, import_react.useState)(true);
   const onFaviconError = () => setIsFaviconValid(false);
-  const useStopPropagationOnShiftKey = (0, import_react.useCallback)(
+  const markAsHandledOnShiftKey = (0, import_react.useCallback)(
     (e) => {
-      if (!editor.inputs.shiftKey) (0, import_editor.stopEventPropagation)(e);
+      if (!editor.inputs.shiftKey) (0, import_editor.markEventAsHandled)(e);
     },
     [editor]
   );
@@ -157,8 +157,8 @@ function BookmarkShapeComponent({ shape }) {
               target: "_blank",
               rel: "noopener noreferrer",
               draggable: false,
-              onPointerDown: useStopPropagationOnShiftKey,
-              onPointerUp: useStopPropagationOnShiftKey,
+              onPointerDown: markAsHandledOnShiftKey,
+              onPointerUp: markAsHandledOnShiftKey,
               children: [
                 isFaviconValid && asset?.props.favicon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "img",

package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/bookmark/BookmarkShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tAssetRecordType,\n\tBaseBoxShapeUtil,\n\tEditor,\n\tHTMLContainer,\n\tT,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLBookmarkShapeProps,\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\tdebounce,\n\tgetHashForString,\n\tlerp,\n\tstopEventPropagation,\n\ttlenv,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseSvgExportContext,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PointerEventHandler, useCallback, useState } from 'react'\nimport { convertCommonTitleHTMLEntities } from '../../utils/text/text'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { LINK_ICON } from '../shared/icons-editor'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\nconst BOOKMARK_WIDTH = 300\nconst BOOKMARK_HEIGHT = 320\nconst BOOKMARK_JUST_URL_HEIGHT = 46\nconst SHORT_BOOKMARK_HEIGHT = 101\n\n/** @public */\nexport class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {\n\tstatic override type = 'bookmark' as const\n\tstatic override props = bookmarkShapeProps\n\tstatic override migrations = bookmarkShapeMigrations\n\n\toverride canResize() {\n\t\treturn false\n\t}\n\n\toverride hideSelectionBoundsFg() {\n\t\treturn true\n\t}\n\n\toverride getText(shape: TLBookmarkShape) {\n\t\treturn shape.props.url\n\t}\n\n\toverride getAriaDescriptor(shape: TLBookmarkShape) {\n\t\tconst asset = (\n\t\t\tshape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\t\t) as TLBookmarkAsset | null\n\n\t\tif (!asset?.props.title) return undefined\n\n\t\treturn (\n\t\t\tconvertCommonTitleHTMLEntities(asset.props.title) +\n\t\t\t(asset.props.description ? ', ' + asset.props.description : '')\n\t\t)\n\t}\n\n\toverride getDefaultProps(): TLBookmarkShape['props'] {\n\t\treturn {\n\t\t\turl: '',\n\t\t\tw: BOOKMARK_WIDTH,\n\t\t\th: BOOKMARK_HEIGHT,\n\t\t\tassetId: null,\n\t\t}\n\t}\n\n\toverride component(shape: TLBookmarkShape) {\n\t\treturn <BookmarkShapeComponent shape={shape} />\n\t}\n\n\toverride indicator(shape: TLBookmarkShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx=\"6\"\n\t\t\t\try=\"6\"\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride onBeforeCreate(next: TLBookmarkShape) {\n\t\treturn getBookmarkSize(this.editor, next)\n\t}\n\n\toverride onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {\n\t\tif (prev.props.url !== shape.props.url) {\n\t\t\tif (!T.linkUrl.isValid(shape.props.url)) {\n\t\t\t\treturn { ...shape, props: { ...shape.props, url: prev.props.url } }\n\t\t\t} else {\n\t\t\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t\t\t}\n\t\t}\n\n\t\tif (prev.props.assetId !== shape.props.assetId) {\n\t\t\treturn getBookmarkSize(this.editor, shape)\n\t\t}\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLBookmarkShape,\n\t\tendShape: TLBookmarkShape,\n\t\tt: number\n\t): TLBookmarkShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n}\n\nfunction BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {\n\tconst editor = useEditor()\n\n\tconst asset = (\n\t\tshape.props.assetId ? editor.getAsset(shape.props.assetId) : null\n\t) as TLBookmarkAsset\n\n\tconst isSafariExport = !!useSvgExportContext() && tlenv.isSafari\n\n\tconst pageRotation = editor.getShapePageTransform(shape)!.rotation()\n\n\tconst address = getHumanReadableAddress(shape)\n\n\tconst [isFaviconValid, setIsFaviconValid] = useState(true)\n\tconst onFaviconError = () => setIsFaviconValid(false)\n\n\tconst useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(\n\t\t(e) => {\n\t\t\tif (!editor.inputs.shiftKey) stopEventPropagation(e)\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<HTMLContainer>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tl-bookmark__container',\n\t\t\t\t\tisSafariExport && 'tl-bookmark__container--safariExport'\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tboxShadow: isSafariExport ? undefined : getRotatedBoxShadow(pageRotation),\n\t\t\t\t\tmaxHeight: shape.props.h,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{(!asset || asset.props.image) && (\n\t\t\t\t\t<div className=\"tl-bookmark__image_container\">\n\t\t\t\t\t\t{asset ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__image\"\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.image}\n\t\t\t\t\t\t\t\talt={asset?.props.title || ''}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tl-bookmark__placeholder\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{asset?.props.image && <HyperlinkButton url={shape.props.url} />}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div className=\"tl-bookmark__copy_container\">\n\t\t\t\t\t{asset?.props.title ? (\n\t\t\t\t\t\t<h2 className=\"tl-bookmark__heading\">\n\t\t\t\t\t\t\t{convertCommonTitleHTMLEntities(asset.props.title)}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{asset?.props.description && asset?.props.image ? (\n\t\t\t\t\t\t<p className=\"tl-bookmark__description\">{asset.props.description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\thref={shape.props.url || ''}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\tonPointerDown={useStopPropagationOnShiftKey}\n\t\t\t\t\t\tonPointerUp={useStopPropagationOnShiftKey}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isFaviconValid && asset?.props.favicon ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__favicon\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.favicon}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tonError={onFaviconError}\n\t\t\t\t\t\t\t\talt={`favicon of ${address}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tl-hyperlink__icon\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t\tWebkitMask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{address}</span>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</HTMLContainer>\n\t)\n}\n\nfunction getBookmarkSize(editor: Editor, shape: TLBookmarkShape) {\n\tconst asset = (\n\t\tshape.props.assetId ? editor.getAsset(shape.props.assetId) : null\n\t) as TLBookmarkAsset\n\n\tlet h = BOOKMARK_HEIGHT\n\n\tif (asset) {\n\t\tif (!asset.props.image) {\n\t\t\tif (!asset.props.title) {\n\t\t\t\th = BOOKMARK_JUST_URL_HEIGHT\n\t\t\t} else {\n\t\t\t\th = SHORT_BOOKMARK_HEIGHT\n\t\t\t}\n\t\t}\n\t}\n\n\treturn {\n\t\t...shape,\n\t\tprops: {\n\t\t\t...shape.props,\n\t\t\th,\n\t\t},\n\t}\n}\n\n/** @internal */\nexport const getHumanReadableAddress = (shape: TLBookmarkShape) => {\n\ttry {\n\t\tconst url = new URL(shape.props.url)\n\t\t// we want the hostname without any www\n\t\treturn url.hostname.replace(/^www\\./, '')\n\t} catch {\n\t\treturn shape.props.url\n\t}\n}\n\nfunction updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tconst { url } = shape.props\n\n\t// Derive the asset id from the URL\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\n\tif (editor.getAsset(assetId)) {\n\t\t// Existing asset for this URL?\n\t\tif (shape.props.assetId !== assetId) {\n\t\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t\t{\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tprops: { assetId },\n\t\t\t\t},\n\t\t\t])\n\t\t}\n\t} else {\n\t\t// No asset for this URL?\n\n\t\t// First, clear out the existing asset reference\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: null },\n\t\t\t},\n\t\t])\n\n\t\t// Then try to asyncronously create a new one\n\t\tcreateBookmarkAssetOnUrlChange(editor, shape)\n\t}\n}\n\nconst createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {\n\tif (editor.isDisposed) return\n\n\tconst { url } = shape.props\n\n\t// Create the asset using the external content manager's createAssetFromUrl method.\n\t// This may be overwritten by the user (for example, we overwrite it on tldraw.com)\n\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\tif (!asset) {\n\t\t// No asset? Just leave the bookmark as a null assetId.\n\t\treturn\n\t}\n\n\teditor.run(() => {\n\t\t// Create the new asset\n\t\teditor.createAssets([asset])\n\n\t\t// And update the shape\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: asset.id },\n\t\t\t},\n\t\t])\n\t})\n}, 500)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tAssetRecordType,\n\tBaseBoxShapeUtil,\n\tEditor,\n\tHTMLContainer,\n\tT,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLBookmarkShapeProps,\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\tdebounce,\n\tgetHashForString,\n\tlerp,\n\tmarkEventAsHandled,\n\ttlenv,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseSvgExportContext,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PointerEventHandler, useCallback, useState } from 'react'\nimport { convertCommonTitleHTMLEntities } from '../../utils/text/text'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { LINK_ICON } from '../shared/icons-editor'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\nconst BOOKMARK_WIDTH = 300\nconst BOOKMARK_HEIGHT = 320\nconst BOOKMARK_JUST_URL_HEIGHT = 46\nconst SHORT_BOOKMARK_HEIGHT = 101\n\n/** @public */\nexport class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {\n\tstatic override type = 'bookmark' as const\n\tstatic override props = bookmarkShapeProps\n\tstatic override migrations = bookmarkShapeMigrations\n\n\toverride canResize() {\n\t\treturn false\n\t}\n\n\toverride hideSelectionBoundsFg() {\n\t\treturn true\n\t}\n\n\toverride getText(shape: TLBookmarkShape) {\n\t\treturn shape.props.url\n\t}\n\n\toverride getAriaDescriptor(shape: TLBookmarkShape) {\n\t\tconst asset = (\n\t\t\tshape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\t\t) as TLBookmarkAsset | null\n\n\t\tif (!asset?.props.title) return undefined\n\n\t\treturn (\n\t\t\tconvertCommonTitleHTMLEntities(asset.props.title) +\n\t\t\t(asset.props.description ? ', ' + asset.props.description : '')\n\t\t)\n\t}\n\n\toverride getDefaultProps(): TLBookmarkShape['props'] {\n\t\treturn {\n\t\t\turl: '',\n\t\t\tw: BOOKMARK_WIDTH,\n\t\t\th: BOOKMARK_HEIGHT,\n\t\t\tassetId: null,\n\t\t}\n\t}\n\n\toverride component(shape: TLBookmarkShape) {\n\t\treturn <BookmarkShapeComponent shape={shape} />\n\t}\n\n\toverride indicator(shape: TLBookmarkShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx=\"6\"\n\t\t\t\try=\"6\"\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride onBeforeCreate(next: TLBookmarkShape) {\n\t\treturn getBookmarkSize(this.editor, next)\n\t}\n\n\toverride onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {\n\t\tif (prev.props.url !== shape.props.url) {\n\t\t\tif (!T.linkUrl.isValid(shape.props.url)) {\n\t\t\t\treturn { ...shape, props: { ...shape.props, url: prev.props.url } }\n\t\t\t} else {\n\t\t\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t\t\t}\n\t\t}\n\n\t\tif (prev.props.assetId !== shape.props.assetId) {\n\t\t\treturn getBookmarkSize(this.editor, shape)\n\t\t}\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLBookmarkShape,\n\t\tendShape: TLBookmarkShape,\n\t\tt: number\n\t): TLBookmarkShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n}\n\nfunction BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {\n\tconst editor = useEditor()\n\n\tconst asset = (\n\t\tshape.props.assetId ? editor.getAsset(shape.props.assetId) : null\n\t) as TLBookmarkAsset\n\n\tconst isSafariExport = !!useSvgExportContext() && tlenv.isSafari\n\n\tconst pageRotation = editor.getShapePageTransform(shape)!.rotation()\n\n\tconst address = getHumanReadableAddress(shape)\n\n\tconst [isFaviconValid, setIsFaviconValid] = useState(true)\n\tconst onFaviconError = () => setIsFaviconValid(false)\n\n\tconst markAsHandledOnShiftKey = useCallback<PointerEventHandler>(\n\t\t(e) => {\n\t\t\tif (!editor.inputs.shiftKey) markEventAsHandled(e)\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<HTMLContainer>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tl-bookmark__container',\n\t\t\t\t\tisSafariExport && 'tl-bookmark__container--safariExport'\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tboxShadow: isSafariExport ? undefined : getRotatedBoxShadow(pageRotation),\n\t\t\t\t\tmaxHeight: shape.props.h,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{(!asset || asset.props.image) && (\n\t\t\t\t\t<div className=\"tl-bookmark__image_container\">\n\t\t\t\t\t\t{asset ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__image\"\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.image}\n\t\t\t\t\t\t\t\talt={asset?.props.title || ''}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tl-bookmark__placeholder\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{asset?.props.image && <HyperlinkButton url={shape.props.url} />}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div className=\"tl-bookmark__copy_container\">\n\t\t\t\t\t{asset?.props.title ? (\n\t\t\t\t\t\t<h2 className=\"tl-bookmark__heading\">\n\t\t\t\t\t\t\t{convertCommonTitleHTMLEntities(asset.props.title)}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{asset?.props.description && asset?.props.image ? (\n\t\t\t\t\t\t<p className=\"tl-bookmark__description\">{asset.props.description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\thref={shape.props.url || ''}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\tonPointerDown={markAsHandledOnShiftKey}\n\t\t\t\t\t\tonPointerUp={markAsHandledOnShiftKey}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isFaviconValid && asset?.props.favicon ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__favicon\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.favicon}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tonError={onFaviconError}\n\t\t\t\t\t\t\t\talt={`favicon of ${address}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tl-hyperlink__icon\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t\tWebkitMask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{address}</span>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</HTMLContainer>\n\t)\n}\n\nfunction getBookmarkSize(editor: Editor, shape: TLBookmarkShape) {\n\tconst asset = (\n\t\tshape.props.assetId ? editor.getAsset(shape.props.assetId) : null\n\t) as TLBookmarkAsset\n\n\tlet h = BOOKMARK_HEIGHT\n\n\tif (asset) {\n\t\tif (!asset.props.image) {\n\t\t\tif (!asset.props.title) {\n\t\t\t\th = BOOKMARK_JUST_URL_HEIGHT\n\t\t\t} else {\n\t\t\t\th = SHORT_BOOKMARK_HEIGHT\n\t\t\t}\n\t\t}\n\t}\n\n\treturn {\n\t\t...shape,\n\t\tprops: {\n\t\t\t...shape.props,\n\t\t\th,\n\t\t},\n\t}\n}\n\n/** @internal */\nexport const getHumanReadableAddress = (shape: TLBookmarkShape) => {\n\ttry {\n\t\tconst url = new URL(shape.props.url)\n\t\t// we want the hostname without any www\n\t\treturn url.hostname.replace(/^www\\./, '')\n\t} catch {\n\t\treturn shape.props.url\n\t}\n}\n\nfunction updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tconst { url } = shape.props\n\n\t// Derive the asset id from the URL\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\n\tif (editor.getAsset(assetId)) {\n\t\t// Existing asset for this URL?\n\t\tif (shape.props.assetId !== assetId) {\n\t\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t\t{\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tprops: { assetId },\n\t\t\t\t},\n\t\t\t])\n\t\t}\n\t} else {\n\t\t// No asset for this URL?\n\n\t\t// First, clear out the existing asset reference\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: null },\n\t\t\t},\n\t\t])\n\n\t\t// Then try to asyncronously create a new one\n\t\tcreateBookmarkAssetOnUrlChange(editor, shape)\n\t}\n}\n\nconst createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {\n\tif (editor.isDisposed) return\n\n\tconst { url } = shape.props\n\n\t// Create the asset using the external content manager's createAssetFromUrl method.\n\t// This may be overwritten by the user (for example, we overwrite it on tldraw.com)\n\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\tif (!asset) {\n\t\t// No asset? Just leave the bookmark as a null assetId.\n\t\treturn\n\t}\n\n\teditor.run(() => {\n\t\t// Create the new asset\n\t\teditor.createAssets([asset])\n\n\t\t// And update the shape\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: asset.id },\n\t\t\t},\n\t\t])\n\t})\n}, 500)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0ES;AA1ET,oBAoBO;AACP,wBAAuB;AACvB,mBAA2D;AAC3D,kBAA+C;AAC/C,6BAAgC;AAChC,0BAA0B;AAC1B,gCAAoC;AAEpC,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,2BAA2B;AACjC,MAAM,wBAAwB;AAGvB,MAAM,0BAA0B,+BAAkC;AAAA,EACxE,OAAgB,OAAO;AAAA,EACvB,OAAgB,QAAQ;AAAA,EACxB,OAAgB,aAAa;AAAA,EAEpB,YAAY;AACpB,WAAO;AAAA,EACR;AAAA,EAES,wBAAwB;AAChC,WAAO;AAAA,EACR;AAAA,EAES,QAAQ,OAAwB;AACxC,WAAO,MAAM,MAAM;AAAA,EACpB;AAAA,EAES,kBAAkB,OAAwB;AAClD,UAAM,QACL,MAAM,MAAM,UAAU,KAAK,OAAO,SAAS,MAAM,MAAM,OAAO,IAAI;AAGnE,QAAI,CAAC,OAAO,MAAM,MAAO,QAAO;AAEhC,eACC,4CAA+B,MAAM,MAAM,KAAK,KAC/C,MAAM,MAAM,cAAc,OAAO,MAAM,MAAM,cAAc;AAAA,EAE9D;AAAA,EAES,kBAA4C;AACpD,WAAO;AAAA,MACN,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,IACV;AAAA,EACD;AAAA,EAES,UAAU,OAAwB;AAC1C,WAAO,4CAAC,0BAAuB,OAAc;AAAA,EAC9C;AAAA,EAES,UAAU,OAAwB;AAC1C,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAO,8BAAe,MAAM,MAAM,CAAC;AAAA,QACnC,YAAQ,8BAAe,MAAM,MAAM,CAAC;AAAA,QACpC,IAAG;AAAA,QACH,IAAG;AAAA;AAAA,IACJ;AAAA,EAEF;AAAA,EAES,eAAe,MAAuB;AAC9C,WAAO,gBAAgB,KAAK,QAAQ,IAAI;AAAA,EACzC;AAAA,EAES,eAAe,MAAuB,OAAwB;AACtE,QAAI,KAAK,MAAM,QAAQ,MAAM,MAAM,KAAK;AACvC,UAAI,CAAC,gBAAE,QAAQ,QAAQ,MAAM,MAAM,GAAG,GAAG;AACxC,eAAO,EAAE,GAAG,OAAO,OAAO,EAAE,GAAG,MAAM,OAAO,KAAK,KAAK,MAAM,IAAI,EAAE;AAAA,MACnE,OAAO;AACN,uCAA+B,KAAK,QAAQ,KAAK;AAAA,MAClD;AAAA,IACD;AAEA,QAAI,KAAK,MAAM,YAAY,MAAM,MAAM,SAAS;AAC/C,aAAO,gBAAgB,KAAK,QAAQ,KAAK;AAAA,IAC1C;AAAA,EACD;AAAA,EACS,qBACR,YACA,UACA,GACuB;AACvB,WAAO;AAAA,MACN,GAAI,IAAI,MAAM,SAAS,QAAQ,WAAW;AAAA,MAC1C,OAAG,oBAAK,WAAW,MAAM,GAAG,SAAS,MAAM,GAAG,CAAC;AAAA,MAC/C,OAAG,oBAAK,WAAW,MAAM,GAAG,SAAS,MAAM,GAAG,CAAC;AAAA,IAChD;AAAA,EACD;AACD;AAEA,SAAS,uBAAuB,EAAE,MAAM,GAA+B;AACtE,QAAM,aAAS,yBAAU;AAEzB,QAAM,QACL,MAAM,MAAM,UAAU,OAAO,SAAS,MAAM,MAAM,OAAO,IAAI;AAG9D,QAAM,iBAAiB,CAAC,KAAC,mCAAoB,KAAK,oBAAM;AAExD,QAAM,eAAe,OAAO,sBAAsB,KAAK,EAAG,SAAS;AAEnE,QAAM,UAAU,wBAAwB,KAAK;AAE7C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,IAAI;AACzD,QAAM,iBAAiB,MAAM,kBAAkB,KAAK;AAEpD,QAAM,8BAA0B;AAAA,IAC/B,CAAC,MAAM;AACN,UAAI,CAAC,OAAO,OAAO,SAAU,uCAAmB,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,SACC,4CAAC,+BACA;AAAA,IAAC;AAAA;AAAA,MACA,eAAW,kBAAAA;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACN,WAAW,iBAAiB,aAAY,+CAAoB,YAAY;AAAA,QACxE,WAAW,MAAM,MAAM;AAAA,MACxB;AAAA,MAEE;AAAA,UAAC,SAAS,MAAM,MAAM,UACvB,6CAAC,SAAI,WAAU,gCACb;AAAA,kBACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,WAAW;AAAA,cACX,gBAAe;AAAA,cACf,KAAK,OAAO,MAAM;AAAA,cAClB,KAAK,OAAO,MAAM,SAAS;AAAA;AAAA,UAC5B,IAEA,4CAAC,SAAI,WAAU,4BAA2B;AAAA,UAE1C,OAAO,MAAM,SAAS,4CAAC,0CAAgB,KAAK,MAAM,MAAM,KAAK;AAAA,WAC/D;AAAA,QAED,6CAAC,SAAI,WAAU,+BACb;AAAA,iBAAO,MAAM,QACb,4CAAC,QAAG,WAAU,wBACZ,0DAA+B,MAAM,MAAM,KAAK,GAClD,IACG;AAAA,UACH,OAAO,MAAM,eAAe,OAAO,MAAM,QACzC,4CAAC,OAAE,WAAU,4BAA4B,gBAAM,MAAM,aAAY,IAC9D;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,MAAM,MAAM,MAAM,OAAO;AAAA,cACzB,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,WAAW;AAAA,cACX,eAAe;AAAA,cACf,aAAa;AAAA,cAEZ;AAAA,kCAAkB,OAAO,MAAM,UAC/B;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAU;AAAA,oBACV,KAAK,OAAO,MAAM;AAAA,oBAClB,gBAAe;AAAA,oBACf,SAAS;AAAA,oBACT,KAAK,cAAc,OAAO;AAAA;AAAA,gBAC3B,IAEA;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAU;AAAA,oBACV,OAAO;AAAA,sBACN,MAAM,QAAQ,6BAAS;AAAA,sBACvB,YAAY,QAAQ,6BAAS;AAAA,oBAC9B;AAAA;AAAA,gBACD;AAAA,gBAED,4CAAC,UAAM,mBAAQ;AAAA;AAAA;AAAA,UAChB;AAAA,WACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAEA,SAAS,gBAAgB,QAAgB,OAAwB;AAChE,QAAM,QACL,MAAM,MAAM,UAAU,OAAO,SAAS,MAAM,MAAM,OAAO,IAAI;AAG9D,MAAI,IAAI;AAER,MAAI,OAAO;AACV,QAAI,CAAC,MAAM,MAAM,OAAO;AACvB,UAAI,CAAC,MAAM,MAAM,OAAO;AACvB,YAAI;AAAA,MACL,OAAO;AACN,YAAI;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,MACN,GAAG,MAAM;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACD;AAGO,MAAM,0BAA0B,CAAC,UAA2B;AAClE,MAAI;AACH,UAAM,MAAM,IAAI,IAAI,MAAM,MAAM,GAAG;AAEnC,WAAO,IAAI,SAAS,QAAQ,UAAU,EAAE;AAAA,EACzC,QAAQ;AACP,WAAO,MAAM,MAAM;AAAA,EACpB;AACD;AAEA,SAAS,+BAA+B,QAAgB,OAAwB;AAC/E,QAAM,EAAE,IAAI,IAAI,MAAM;AAGtB,QAAM,UAAqB,8BAAgB,aAAS,gCAAiB,GAAG,CAAC;AAEzE,MAAI,OAAO,SAAS,OAAO,GAAG;AAE7B,QAAI,MAAM,MAAM,YAAY,SAAS;AACpC,aAAO,aAA8B;AAAA,QACpC;AAAA,UACC,IAAI,MAAM;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,OAAO,EAAE,QAAQ;AAAA,QAClB;AAAA,MACD,CAAC;AAAA,IACF;AAAA,EACD,OAAO;AAIN,WAAO,aAA8B;AAAA,MACpC;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,SAAS,KAAK;AAAA,MACxB;AAAA,IACD,CAAC;AAGD,mCAA+B,QAAQ,KAAK;AAAA,EAC7C;AACD;AAEA,MAAM,qCAAiC,wBAAS,OAAO,QAAgB,UAA2B;AACjG,MAAI,OAAO,WAAY;AAEvB,QAAM,EAAE,IAAI,IAAI,MAAM;AAItB,QAAM,QAAQ,MAAM,OAAO,2BAA2B,EAAE,MAAM,OAAO,IAAI,CAAC;AAE1E,MAAI,CAAC,OAAO;AAEX;AAAA,EACD;AAEA,SAAO,IAAI,MAAM;AAEhB,WAAO,aAAa,CAAC,KAAK,CAAC;AAG3B,WAAO,aAA8B;AAAA,MACpC;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,SAAS,MAAM,GAAG;AAAA,MAC5B;AAAA,IACD,CAAC;AAAA,EACF,CAAC;AACF,GAAG,GAAG;",
   "names": ["classNames"]
 }

package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js CHANGED Viewed

@@ -39,9 +39,6 @@ class DrawShapeUtil extends import_editor.ShapeUtil {
   options = {
     maxPointsPerShape: 600
   };
-  canTabTo() {
-    return false;
-  }
   hideResizeHandles(shape) {
     return getIsDot(shape);
   }
@@ -217,7 +214,7 @@ function DrawShapeSvg({ shape, zoomOverride }) {
         {
           d: (0, import_svgInk.svgInk)(allPointsFromSegments, options),
           strokeLinecap: "round",
-          fill: theme[shape.props.color].solid
+          fill: (0, import_editor.getColorValue)(theme, shape.props.color, "solid")
         }
       )
     ] });
@@ -241,8 +238,8 @@ function DrawShapeSvg({ shape, zoomOverride }) {
       {
         d: solidStrokePath,
         strokeLinecap: "round",
-        fill: isDot ? theme[shape.props.color].solid : "none",
-        stroke: theme[shape.props.color].solid,
+        fill: isDot ? (0, import_editor.getColorValue)(theme, shape.props.color, "solid") : "none",
+        stroke: (0, import_editor.getColorValue)(theme, shape.props.color, "solid"),
         strokeWidth: sw,
         strokeDasharray: isDot ? "none" : (0, import_getPath.getDrawShapeStrokeDashArray)(shape, sw, dotAdjustment),
         strokeDashoffset: "0"

package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/draw/DrawShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tCircle2d,\n\tPolygon2d,\n\tPolyline2d,\n\tSVGContainer,\n\tShapeUtil,\n\tSvgExportContext,\n\tTLDrawShape,\n\tTLDrawShapeProps,\n\tTLDrawShapeSegment,\n\tTLResizeInfo,\n\tTLShapeUtilCanvasSvgDef,\n\tVecLike,\n\tdrawShapeMigrations,\n\tdrawShapeProps,\n\tlast,\n\tlerp,\n\trng,\n\ttoFixed,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\n\nimport { ShapeFill } from '../shared/ShapeFill'\nimport { STROKE_SIZES } from '../shared/default-shape-constants'\nimport { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'\nimport { getStrokePoints } from '../shared/freehand/getStrokePoints'\nimport { getSvgPathFromStrokePoints } from '../shared/freehand/svg'\nimport { svgInk } from '../shared/freehand/svgInk'\nimport { interpolateSegments } from '../shared/interpolate-props'\nimport { useDefaultColorTheme } from '../shared/useDefaultColorTheme'\nimport { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath'\n\n/** @public */\nexport interface DrawShapeOptions {\n\t/**\n\t * The maximum number of points in a line before the draw tool will begin a new shape.\n\t * A higher number will lead to poor performance while drawing very long lines.\n\t */\n\treadonly maxPointsPerShape: number\n}\n\n/** @public */\nexport class DrawShapeUtil extends ShapeUtil<TLDrawShape> {\n\tstatic override type = 'draw' as const\n\tstatic override props = drawShapeProps\n\tstatic override migrations = drawShapeMigrations\n\n\toverride options: DrawShapeOptions = {\n\t\tmaxPointsPerShape: 600,\n\t}\n\n\toverride canTabTo() {\n\t\treturn false\n\t}\n\n\toverride hideResizeHandles(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideRotateHandle(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideSelectionBoundsFg(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\n\toverride getDefaultProps(): TLDrawShape['props'] {\n\t\treturn {\n\t\t\tsegments: [],\n\t\t\tcolor: 'black',\n\t\t\tfill: 'none',\n\t\t\tdash: 'draw',\n\t\t\tsize: 'm',\n\t\t\tisComplete: false,\n\t\t\tisClosed: false,\n\t\t\tisPen: false,\n\t\t\tscale: 1,\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLDrawShape) {\n\t\tconst points = getPointsFromSegments(shape.props.segments)\n\n\t\tconst sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale\n\n\t\t// A dot\n\t\tif (shape.props.segments.length === 1) {\n\t\t\tconst box = Box.FromPoints(points)\n\t\t\tif (box.width < sw * 2 && box.height < sw * 2) {\n\t\t\t\treturn new Circle2d({\n\t\t\t\t\tx: -sw,\n\t\t\t\t\ty: -sw,\n\t\t\t\t\tradius: sw,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst strokePoints = getStrokePoints(\n\t\t\tpoints,\n\t\t\tgetFreehandOptions(shape.props, sw, shape.props.isPen, true)\n\t\t).map((p) => p.point)\n\n\t\t// A closed draw stroke\n\t\tif (shape.props.isClosed && strokePoints.length > 2) {\n\t\t\treturn new Polygon2d({\n\t\t\t\tpoints: strokePoints,\n\t\t\t\tisFilled: shape.props.fill !== 'none',\n\t\t\t})\n\t\t}\n\n\t\tif (strokePoints.length === 1) {\n\t\t\treturn new Circle2d({\n\t\t\t\tx: -sw,\n\t\t\t\ty: -sw,\n\t\t\t\tradius: sw,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\t// An open draw stroke\n\t\treturn new Polyline2d({\n\t\t\tpoints: strokePoints,\n\t\t})\n\t}\n\n\tcomponent(shape: TLDrawShape) {\n\t\treturn (\n\t\t\t<SVGContainer>\n\t\t\t\t<DrawShapeSvg shape={shape} />\n\t\t\t</SVGContainer>\n\t\t)\n\t}\n\n\tindicator(shape: TLDrawShape) {\n\t\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\n\t\tlet sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst forceSolid = useValue(\n\t\t\t'force solid',\n\t\t\t() => {\n\t\t\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\t\t\treturn zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\t\t\t},\n\t\t\t[this.editor, sw]\n\t\t)\n\n\t\tif (\n\t\t\t!forceSolid &&\n\t\t\t!shape.props.isPen &&\n\t\t\tshape.props.dash === 'draw' &&\n\t\t\tallPointsFromSegments.length === 1\n\t\t) {\n\t\t\tsw += rng(shape.id)() * (sw / 6)\n\t\t}\n\n\t\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\t\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, true)\n\t\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\t\tconst solidStrokePath =\n\t\t\tstrokePoints.length > 1\n\t\t\t\t? getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\t\t\t\t: getDot(allPointsFromSegments[0], sw)\n\n\t\treturn <path d={solidStrokePath} />\n\t}\n\n\toverride toSvg(shape: TLDrawShape, ctx: SvgExportContext) {\n\t\tctx.addExportDef(getFillDefForExport(shape.props.fill))\n\t\tconst scaleFactor = 1 / shape.props.scale\n\t\treturn (\n\t\t\t<g transform={`scale(${scaleFactor})`}>\n\t\t\t\t<DrawShapeSvg shape={shape} zoomOverride={1} />\n\t\t\t</g>\n\t\t)\n\t}\n\n\toverride getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[] {\n\t\treturn [getFillDefForCanvas()]\n\t}\n\n\toverride onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>) {\n\t\tconst { scaleX, scaleY } = info\n\n\t\tconst newSegments: TLDrawShapeSegment[] = []\n\n\t\tfor (const segment of shape.props.segments) {\n\t\t\tnewSegments.push({\n\t\t\t\t...segment,\n\t\t\t\tpoints: segment.points.map(({ x, y, z }) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tx: toFixed(scaleX * x),\n\t\t\t\t\t\ty: toFixed(scaleY * y),\n\t\t\t\t\t\tz,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\tsegments: newSegments,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride expandSelectionOutlinePx(shape: TLDrawShape): number {\n\t\tconst multiplier = shape.props.dash === 'draw' ? 1.6 : 1\n\t\treturn ((STROKE_SIZES[shape.props.size] * multiplier) / 2) * shape.props.scale\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLDrawShape,\n\t\tendShape: TLDrawShape,\n\t\tt: number\n\t): TLDrawShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tsegments: interpolateSegments(startShape.props.segments, endShape.props.segments, t),\n\t\t\tscale: lerp(startShape.props.scale, endShape.props.scale, t),\n\t\t}\n\t}\n}\n\nfunction getDot(point: VecLike, sw: number) {\n\tconst r = (sw + 1) * 0.5\n\treturn `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${\n\t\tr * 2\n\t},0`\n}\n\nfunction getIsDot(shape: TLDrawShape) {\n\treturn shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2\n}\n\nfunction DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverride?: number }) {\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\n\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\n\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\n\tlet sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale\n\tconst forceSolid = useValue(\n\t\t'force solid',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getZoomLevel()\n\t\t\treturn zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\t\t},\n\t\t[editor, sw, zoomOverride]\n\t)\n\n\tconst dotAdjustment = useValue(\n\t\t'dot adjustment',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getZoomLevel()\n\t\t\t// If we're zoomed way out (10%), then we need to make the dotted line go to 9 instead 0.1\n\t\t\t// Chrome doesn't render anything otherwise.\n\t\t\treturn zoomLevel < 0.2 ? 0 : 0.1\n\t\t},\n\t\t[editor, zoomOverride]\n\t)\n\n\tif (\n\t\t!forceSolid &&\n\t\t!shape.props.isPen &&\n\t\tshape.props.dash === 'draw' &&\n\t\tallPointsFromSegments.length === 1\n\t) {\n\t\tsw += rng(shape.id)() * (sw / 6)\n\t}\n\n\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, forceSolid)\n\n\tif (!forceSolid && shape.props.dash === 'draw') {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{shape.props.isClosed && shape.props.fill && allPointsFromSegments.length > 1 ? (\n\t\t\t\t\t<ShapeFill\n\t\t\t\t\t\td={getSvgPathFromStrokePoints(\n\t\t\t\t\t\t\tgetStrokePoints(allPointsFromSegments, options),\n\t\t\t\t\t\t\tshape.props.isClosed\n\t\t\t\t\t\t)}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tcolor={shape.props.color}\n\t\t\t\t\t\tfill={shape.props.isClosed ? shape.props.fill : 'none'}\n\t\t\t\t\t\tscale={shape.props.scale}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t<path\n\t\t\t\t\td={svgInk(allPointsFromSegments, options)}\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tfill={theme[shape.props.color].solid}\n\t\t\t\t/>\n\t\t\t</>\n\t\t)\n\t}\n\n\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\tconst isDot = strokePoints.length < 2\n\tconst solidStrokePath = isDot\n\t\t? getDot(allPointsFromSegments[0], 0)\n\t\t: getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\n\treturn (\n\t\t<>\n\t\t\t<ShapeFill\n\t\t\t\td={solidStrokePath}\n\t\t\t\ttheme={theme}\n\t\t\t\tcolor={shape.props.color}\n\t\t\t\tfill={isDot || shape.props.isClosed ? shape.props.fill : 'none'}\n\t\t\t\tscale={shape.props.scale}\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td={solidStrokePath}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tfill={isDot ? theme[shape.props.color].solid : 'none'}\n\t\t\t\tstroke={theme[shape.props.color].solid}\n\t\t\t\tstrokeWidth={sw}\n\t\t\t\tstrokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}\n\t\t\t\tstrokeDashoffset=\"0\"\n\t\t\t/>\n\t\t</>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tCircle2d,\n\tPolygon2d,\n\tPolyline2d,\n\tSVGContainer,\n\tShapeUtil,\n\tSvgExportContext,\n\tTLDrawShape,\n\tTLDrawShapeProps,\n\tTLDrawShapeSegment,\n\tTLResizeInfo,\n\tTLShapeUtilCanvasSvgDef,\n\tVecLike,\n\tdrawShapeMigrations,\n\tdrawShapeProps,\n\tgetColorValue,\n\tlast,\n\tlerp,\n\trng,\n\ttoFixed,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\n\nimport { ShapeFill } from '../shared/ShapeFill'\nimport { STROKE_SIZES } from '../shared/default-shape-constants'\nimport { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'\nimport { getStrokePoints } from '../shared/freehand/getStrokePoints'\nimport { getSvgPathFromStrokePoints } from '../shared/freehand/svg'\nimport { svgInk } from '../shared/freehand/svgInk'\nimport { interpolateSegments } from '../shared/interpolate-props'\nimport { useDefaultColorTheme } from '../shared/useDefaultColorTheme'\nimport { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath'\n\n/** @public */\nexport interface DrawShapeOptions {\n\t/**\n\t * The maximum number of points in a line before the draw tool will begin a new shape.\n\t * A higher number will lead to poor performance while drawing very long lines.\n\t */\n\treadonly maxPointsPerShape: number\n}\n\n/** @public */\nexport class DrawShapeUtil extends ShapeUtil<TLDrawShape> {\n\tstatic override type = 'draw' as const\n\tstatic override props = drawShapeProps\n\tstatic override migrations = drawShapeMigrations\n\n\toverride options: DrawShapeOptions = {\n\t\tmaxPointsPerShape: 600,\n\t}\n\n\toverride hideResizeHandles(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideRotateHandle(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideSelectionBoundsFg(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\n\toverride getDefaultProps(): TLDrawShape['props'] {\n\t\treturn {\n\t\t\tsegments: [],\n\t\t\tcolor: 'black',\n\t\t\tfill: 'none',\n\t\t\tdash: 'draw',\n\t\t\tsize: 'm',\n\t\t\tisComplete: false,\n\t\t\tisClosed: false,\n\t\t\tisPen: false,\n\t\t\tscale: 1,\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLDrawShape) {\n\t\tconst points = getPointsFromSegments(shape.props.segments)\n\n\t\tconst sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale\n\n\t\t// A dot\n\t\tif (shape.props.segments.length === 1) {\n\t\t\tconst box = Box.FromPoints(points)\n\t\t\tif (box.width < sw * 2 && box.height < sw * 2) {\n\t\t\t\treturn new Circle2d({\n\t\t\t\t\tx: -sw,\n\t\t\t\t\ty: -sw,\n\t\t\t\t\tradius: sw,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst strokePoints = getStrokePoints(\n\t\t\tpoints,\n\t\t\tgetFreehandOptions(shape.props, sw, shape.props.isPen, true)\n\t\t).map((p) => p.point)\n\n\t\t// A closed draw stroke\n\t\tif (shape.props.isClosed && strokePoints.length > 2) {\n\t\t\treturn new Polygon2d({\n\t\t\t\tpoints: strokePoints,\n\t\t\t\tisFilled: shape.props.fill !== 'none',\n\t\t\t})\n\t\t}\n\n\t\tif (strokePoints.length === 1) {\n\t\t\treturn new Circle2d({\n\t\t\t\tx: -sw,\n\t\t\t\ty: -sw,\n\t\t\t\tradius: sw,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\t// An open draw stroke\n\t\treturn new Polyline2d({\n\t\t\tpoints: strokePoints,\n\t\t})\n\t}\n\n\tcomponent(shape: TLDrawShape) {\n\t\treturn (\n\t\t\t<SVGContainer>\n\t\t\t\t<DrawShapeSvg shape={shape} />\n\t\t\t</SVGContainer>\n\t\t)\n\t}\n\n\tindicator(shape: TLDrawShape) {\n\t\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\n\t\tlet sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale\n\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst forceSolid = useValue(\n\t\t\t'force solid',\n\t\t\t() => {\n\t\t\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\t\t\treturn zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\t\t\t},\n\t\t\t[this.editor, sw]\n\t\t)\n\n\t\tif (\n\t\t\t!forceSolid &&\n\t\t\t!shape.props.isPen &&\n\t\t\tshape.props.dash === 'draw' &&\n\t\t\tallPointsFromSegments.length === 1\n\t\t) {\n\t\t\tsw += rng(shape.id)() * (sw / 6)\n\t\t}\n\n\t\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\t\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, true)\n\t\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\t\tconst solidStrokePath =\n\t\t\tstrokePoints.length > 1\n\t\t\t\t? getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\t\t\t\t: getDot(allPointsFromSegments[0], sw)\n\n\t\treturn <path d={solidStrokePath} />\n\t}\n\n\toverride toSvg(shape: TLDrawShape, ctx: SvgExportContext) {\n\t\tctx.addExportDef(getFillDefForExport(shape.props.fill))\n\t\tconst scaleFactor = 1 / shape.props.scale\n\t\treturn (\n\t\t\t<g transform={`scale(${scaleFactor})`}>\n\t\t\t\t<DrawShapeSvg shape={shape} zoomOverride={1} />\n\t\t\t</g>\n\t\t)\n\t}\n\n\toverride getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[] {\n\t\treturn [getFillDefForCanvas()]\n\t}\n\n\toverride onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>) {\n\t\tconst { scaleX, scaleY } = info\n\n\t\tconst newSegments: TLDrawShapeSegment[] = []\n\n\t\tfor (const segment of shape.props.segments) {\n\t\t\tnewSegments.push({\n\t\t\t\t...segment,\n\t\t\t\tpoints: segment.points.map(({ x, y, z }) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tx: toFixed(scaleX * x),\n\t\t\t\t\t\ty: toFixed(scaleY * y),\n\t\t\t\t\t\tz,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\tsegments: newSegments,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride expandSelectionOutlinePx(shape: TLDrawShape): number {\n\t\tconst multiplier = shape.props.dash === 'draw' ? 1.6 : 1\n\t\treturn ((STROKE_SIZES[shape.props.size] * multiplier) / 2) * shape.props.scale\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLDrawShape,\n\t\tendShape: TLDrawShape,\n\t\tt: number\n\t): TLDrawShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tsegments: interpolateSegments(startShape.props.segments, endShape.props.segments, t),\n\t\t\tscale: lerp(startShape.props.scale, endShape.props.scale, t),\n\t\t}\n\t}\n}\n\nfunction getDot(point: VecLike, sw: number) {\n\tconst r = (sw + 1) * 0.5\n\treturn `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${\n\t\tr * 2\n\t},0`\n}\n\nfunction getIsDot(shape: TLDrawShape) {\n\treturn shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2\n}\n\nfunction DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverride?: number }) {\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\n\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\n\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\n\tlet sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale\n\tconst forceSolid = useValue(\n\t\t'force solid',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getZoomLevel()\n\t\t\treturn zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\t\t},\n\t\t[editor, sw, zoomOverride]\n\t)\n\n\tconst dotAdjustment = useValue(\n\t\t'dot adjustment',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getZoomLevel()\n\t\t\t// If we're zoomed way out (10%), then we need to make the dotted line go to 9 instead 0.1\n\t\t\t// Chrome doesn't render anything otherwise.\n\t\t\treturn zoomLevel < 0.2 ? 0 : 0.1\n\t\t},\n\t\t[editor, zoomOverride]\n\t)\n\n\tif (\n\t\t!forceSolid &&\n\t\t!shape.props.isPen &&\n\t\tshape.props.dash === 'draw' &&\n\t\tallPointsFromSegments.length === 1\n\t) {\n\t\tsw += rng(shape.id)() * (sw / 6)\n\t}\n\n\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, forceSolid)\n\n\tif (!forceSolid && shape.props.dash === 'draw') {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{shape.props.isClosed && shape.props.fill && allPointsFromSegments.length > 1 ? (\n\t\t\t\t\t<ShapeFill\n\t\t\t\t\t\td={getSvgPathFromStrokePoints(\n\t\t\t\t\t\t\tgetStrokePoints(allPointsFromSegments, options),\n\t\t\t\t\t\t\tshape.props.isClosed\n\t\t\t\t\t\t)}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tcolor={shape.props.color}\n\t\t\t\t\t\tfill={shape.props.isClosed ? shape.props.fill : 'none'}\n\t\t\t\t\t\tscale={shape.props.scale}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t<path\n\t\t\t\t\td={svgInk(allPointsFromSegments, options)}\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tfill={getColorValue(theme, shape.props.color, 'solid')}\n\t\t\t\t/>\n\t\t\t</>\n\t\t)\n\t}\n\n\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\tconst isDot = strokePoints.length < 2\n\tconst solidStrokePath = isDot\n\t\t? getDot(allPointsFromSegments[0], 0)\n\t\t: getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\n\treturn (\n\t\t<>\n\t\t\t<ShapeFill\n\t\t\t\td={solidStrokePath}\n\t\t\t\ttheme={theme}\n\t\t\t\tcolor={shape.props.color}\n\t\t\t\tfill={isDot || shape.props.isClosed ? shape.props.fill : 'none'}\n\t\t\t\tscale={shape.props.scale}\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td={solidStrokePath}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tfill={isDot ? getColorValue(theme, shape.props.color, 'solid') : 'none'}\n\t\t\t\tstroke={getColorValue(theme, shape.props.color, 'solid')}\n\t\t\t\tstrokeWidth={sw}\n\t\t\t\tstrokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}\n\t\t\t\tstrokeDashoffset=\"0\"\n\t\t\t/>\n\t\t</>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js CHANGED Viewed

@@ -117,7 +117,7 @@ class EmbedShapeUtil extends import_editor.BaseBoxShapeUtil {
             border: 0,
             boxShadow: (0, import_rotated_box_shadow.getRotatedBoxShadow)(pageRotation),
             borderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,
-            background: embedInfo?.definition.backgroundColor ?? "var(--color-background)",
+            background: embedInfo?.definition.backgroundColor ?? "var(--tl-color-background)",
             width: w,
             height: h
           }

package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/embed/EmbedShapeUtil.tsx"],
-  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tTLEmbedShape,\n\tTLEmbedShapeProps,\n\tTLResizeInfo,\n\tembedShapeMigrations,\n\tembedShapeProps,\n\tlerp,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseIsEditing,\n\tuseSvgExportContext,\n\tuseValue,\n} from '@tldraw/editor'\n\nimport {\n\tDEFAULT_EMBED_DEFINITIONS,\n\tEmbedDefinition,\n\tTLEmbedDefinition,\n\tTLEmbedShapePermissions,\n\tembedShapePermissionDefaults,\n} from '../../defaultEmbedDefinitions'\nimport { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\nconst getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {\n\treturn Object.entries(permissions)\n\t\t.filter(([_perm, isEnabled]) => isEnabled)\n\t\t.map(([perm]) => perm)\n\t\t.join(' ')\n}\n\n/** @public */\nexport class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {\n\tstatic override type = 'embed' as const\n\tstatic override props = embedShapeProps\n\tstatic override migrations = embedShapeMigrations\n\tprivate static embedDefinitions: readonly EmbedDefinition[] = DEFAULT_EMBED_DEFINITIONS\n\n\tstatic setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]) {\n\t\tEmbedShapeUtil.embedDefinitions = embedDefinitions\n\t}\n\n\tgetEmbedDefinitions(): readonly TLEmbedDefinition[] {\n\t\treturn EmbedShapeUtil.embedDefinitions\n\t}\n\n\tgetEmbedDefinition(url: string): TLEmbedResult {\n\t\treturn getEmbedInfo(EmbedShapeUtil.embedDefinitions, url)\n\t}\n\n\toverride getText(shape: TLEmbedShape) {\n\t\treturn shape.props.url\n\t}\n\n\toverride getAriaDescriptor(shape: TLEmbedShape) {\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\treturn embedInfo?.definition.title\n\t}\n\n\toverride hideSelectionBoundsFg(shape: TLEmbedShape) {\n\t\treturn !this.canResize(shape)\n\t}\n\toverride canEdit() {\n\t\treturn true\n\t}\n\toverride canResize(shape: TLEmbedShape) {\n\t\treturn !!this.getEmbedDefinition(shape.props.url)?.definition?.doesResize\n\t}\n\toverride canEditInReadonly() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLEmbedShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\turl: '',\n\t\t}\n\t}\n\n\toverride isAspectRatioLocked(shape: TLEmbedShape) {\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\treturn embedInfo?.definition.isAspectRatioLocked ?? false\n\t}\n\n\toverride onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>) {\n\t\tconst isAspectRatioLocked = this.isAspectRatioLocked(shape)\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\tlet minWidth = embedInfo?.definition.minWidth ?? 200\n\t\tlet minHeight = embedInfo?.definition.minHeight ?? 200\n\t\tif (isAspectRatioLocked) {\n\t\t\t// Enforce aspect ratio\n\t\t\t// Neither the width or height can be less than 200\n\t\t\tconst aspectRatio = shape.props.w / shape.props.h\n\t\t\tif (aspectRatio > 1) {\n\t\t\t\t// Landscape\n\t\t\t\tminWidth *= aspectRatio\n\t\t\t} else {\n\t\t\t\t// Portrait\n\t\t\t\tminHeight /= aspectRatio\n\t\t\t}\n\t\t}\n\n\t\treturn resizeBox(shape, info, { minWidth, minHeight })\n\t}\n\n\toverride component(shape: TLEmbedShape) {\n\t\tconst svgExport = useSvgExportContext()\n\t\tconst { w, h, url } = shape.props\n\t\tconst isEditing = useIsEditing(shape.id)\n\n\t\tconst embedInfo = this.getEmbedDefinition(url)\n\n\t\tconst isHoveringWhileEditingSameShape = useValue(\n\t\t\t'is hovering',\n\t\t\t() => {\n\t\t\t\tconst { editingShapeId, hoveredShapeId } = this.editor.getCurrentPageState()\n\n\t\t\t\tif (editingShapeId && hoveredShapeId !== editingShapeId) {\n\t\t\t\t\tconst editingShape = this.editor.getShape(editingShapeId)\n\t\t\t\t\tif (editingShape && this.editor.isShapeOfType<TLEmbedShape>(editingShape, 'embed')) {\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn false\n\t\t\t},\n\t\t\t[]\n\t\t)\n\n\t\tconst pageRotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\tif (svgExport) {\n\t\t\t// for SVG exports, we show a blank embed\n\t\t\treturn (\n\t\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"tl-embed\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: 0,\n\t\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t\t\tborderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,\n\t\t\t\t\t\t\tbackground: embedInfo?.definition.backgroundColor ?? 'var(--color-background)',\n\t\t\t\t\t\t\twidth: w,\n\t\t\t\t\t\t\theight: h,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</HTMLContainer>\n\t\t\t)\n\t\t}\n\n\t\tconst isInteractive = isEditing || isHoveringWhileEditingSameShape\n\n\t\t// Prevent nested embedding of tldraw\n\t\tconst isIframe =\n\t\t\ttypeof window !== 'undefined' && (window !== window.top || window.self !== window.parent)\n\t\tif (isIframe && embedInfo?.definition.type === 'tldraw') return null\n\n\t\tif (embedInfo?.definition.type === 'github_gist') {\n\t\t\tconst idFromGistUrl = embedInfo.url.split('/').pop()\n\t\t\tif (!idFromGistUrl) throw Error('No gist id!')\n\n\t\t\treturn (\n\t\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t\t<Gist\n\t\t\t\t\t\tid={idFromGistUrl}\n\t\t\t\t\t\twidth={toDomPrecision(w)!}\n\t\t\t\t\t\theight={toDomPrecision(h)!}\n\t\t\t\t\t\tisInteractive={isInteractive}\n\t\t\t\t\t\tpageRotation={pageRotation}\n\t\t\t\t\t/>\n\t\t\t\t</HTMLContainer>\n\t\t\t)\n\t\t}\n\n\t\tconst sandbox = getSandboxPermissions({\n\t\t\t...embedShapePermissionDefaults,\n\t\t\t...(embedInfo?.definition.overridePermissions ?? {}),\n\t\t})\n\n\t\treturn (\n\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t{embedInfo?.definition ? (\n\t\t\t\t\t<iframe\n\t\t\t\t\t\tclassName=\"tl-embed\"\n\t\t\t\t\t\tsandbox={sandbox}\n\t\t\t\t\t\tsrc={embedInfo.embedUrl}\n\t\t\t\t\t\twidth={toDomPrecision(w)}\n\t\t\t\t\t\theight={toDomPrecision(h)}\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\t\t\tframeBorder=\"0\"\n\t\t\t\t\t\treferrerPolicy=\"no-referrer-when-downgrade\"\n\t\t\t\t\t\ttabIndex={isEditing ? 0 : -1}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: 0,\n\t\t\t\t\t\t\tpointerEvents: isInteractive ? 'auto' : 'none',\n\t\t\t\t\t\t\t// Fix for safari <https://stackoverflow.com/a/49150908>\n\t\t\t\t\t\t\tzIndex: isInteractive ? '' : '-1',\n\t\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t\t\tborderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,\n\t\t\t\t\t\t\tbackground: embedInfo?.definition.backgroundColor,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\toverride indicator(shape: TLEmbedShape) {\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx={embedInfo?.definition.overrideOutlineRadius ?? 8}\n\t\t\t\try={embedInfo?.definition.overrideOutlineRadius ?? 8}\n\t\t\t/>\n\t\t)\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLEmbedShape,\n\t\tendShape: TLEmbedShape,\n\t\tt: number\n\t): TLEmbedShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n}\n\nfunction Gist({\n\tid,\n\tisInteractive,\n\twidth,\n\theight,\n\tstyle,\n\tpageRotation,\n}: {\n\tid: string\n\tisInteractive: boolean\n\twidth: number\n\theight: number\n\tpageRotation: number\n\tstyle?: React.CSSProperties\n}) {\n\t// Security warning:\n\t// Gists allow adding .json extensions to the URL which return JSONP.\n\t// Furthermore, the JSONP can include callbacks that execute arbitrary JavaScript.\n\t// It _is_ sandboxed by the iframe but we still want to disable it nonetheless.\n\t// We restrict the id to only allow hexdecimal characters to prevent this.\n\t// Read more:\n\t//   https://github.com/bhaveshk90/Content-Security-Policy-CSP-Bypass-Techniques\n\t//   https://github.com/renniepak/CSPBypass\n\tif (!id.match(/^[0-9a-f]+$/)) throw Error('No gist id!')\n\n\treturn (\n\t\t<iframe\n\t\t\tclassName=\"tl-embed\"\n\t\t\tdraggable={false}\n\t\t\twidth={toDomPrecision(width)}\n\t\t\theight={toDomPrecision(height)}\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tframeBorder=\"0\"\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tscrolling=\"no\"\n\t\t\treferrerPolicy=\"no-referrer-when-downgrade\"\n\t\t\ttabIndex={isInteractive ? 0 : -1}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tpointerEvents: isInteractive ? 'all' : 'none',\n\t\t\t\t// Fix for safari <https://stackoverflow.com/a/49150908>\n\t\t\t\tzIndex: isInteractive ? '' : '-1',\n\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t}}\n\t\t\tsrcDoc={`\n\t\t\t<html>\n\t\t\t\t<head>\n\t\t\t\t\t<base target=\"_blank\">\n\t\t\t\t</head>\n\t\t\t\t<body>\n\t\t\t\t\t<script src=${`https://gist.github.com/${id}.js`}></script>\n\t\t\t\t\t<style type=\"text/css\">\n\t\t\t\t\t\t* { margin: 0px; }\n\t\t\t\t\t\ttable { height: 100%; background-color: red; }\n\t\t\t\t\t\t.gist { background-color: none; height: 100%;  }\n\t\t\t\t\t\t.gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }\n\t\t\t\t\t</style>\n\t\t\t\t</body>\n\t\t\t</html>`}\n\t\t/>\n\t)\n}\n"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tTLEmbedShape,\n\tTLEmbedShapeProps,\n\tTLResizeInfo,\n\tembedShapeMigrations,\n\tembedShapeProps,\n\tlerp,\n\tresizeBox,\n\ttoDomPrecision,\n\tuseIsEditing,\n\tuseSvgExportContext,\n\tuseValue,\n} from '@tldraw/editor'\n\nimport {\n\tDEFAULT_EMBED_DEFINITIONS,\n\tEmbedDefinition,\n\tTLEmbedDefinition,\n\tTLEmbedShapePermissions,\n\tembedShapePermissionDefaults,\n} from '../../defaultEmbedDefinitions'\nimport { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\nconst getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {\n\treturn Object.entries(permissions)\n\t\t.filter(([_perm, isEnabled]) => isEnabled)\n\t\t.map(([perm]) => perm)\n\t\t.join(' ')\n}\n\n/** @public */\nexport class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {\n\tstatic override type = 'embed' as const\n\tstatic override props = embedShapeProps\n\tstatic override migrations = embedShapeMigrations\n\tprivate static embedDefinitions: readonly EmbedDefinition[] = DEFAULT_EMBED_DEFINITIONS\n\n\tstatic setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]) {\n\t\tEmbedShapeUtil.embedDefinitions = embedDefinitions\n\t}\n\n\tgetEmbedDefinitions(): readonly TLEmbedDefinition[] {\n\t\treturn EmbedShapeUtil.embedDefinitions\n\t}\n\n\tgetEmbedDefinition(url: string): TLEmbedResult {\n\t\treturn getEmbedInfo(EmbedShapeUtil.embedDefinitions, url)\n\t}\n\n\toverride getText(shape: TLEmbedShape) {\n\t\treturn shape.props.url\n\t}\n\n\toverride getAriaDescriptor(shape: TLEmbedShape) {\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\treturn embedInfo?.definition.title\n\t}\n\n\toverride hideSelectionBoundsFg(shape: TLEmbedShape) {\n\t\treturn !this.canResize(shape)\n\t}\n\toverride canEdit() {\n\t\treturn true\n\t}\n\toverride canResize(shape: TLEmbedShape) {\n\t\treturn !!this.getEmbedDefinition(shape.props.url)?.definition?.doesResize\n\t}\n\toverride canEditInReadonly() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLEmbedShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\turl: '',\n\t\t}\n\t}\n\n\toverride isAspectRatioLocked(shape: TLEmbedShape) {\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\treturn embedInfo?.definition.isAspectRatioLocked ?? false\n\t}\n\n\toverride onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>) {\n\t\tconst isAspectRatioLocked = this.isAspectRatioLocked(shape)\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\tlet minWidth = embedInfo?.definition.minWidth ?? 200\n\t\tlet minHeight = embedInfo?.definition.minHeight ?? 200\n\t\tif (isAspectRatioLocked) {\n\t\t\t// Enforce aspect ratio\n\t\t\t// Neither the width or height can be less than 200\n\t\t\tconst aspectRatio = shape.props.w / shape.props.h\n\t\t\tif (aspectRatio > 1) {\n\t\t\t\t// Landscape\n\t\t\t\tminWidth *= aspectRatio\n\t\t\t} else {\n\t\t\t\t// Portrait\n\t\t\t\tminHeight /= aspectRatio\n\t\t\t}\n\t\t}\n\n\t\treturn resizeBox(shape, info, { minWidth, minHeight })\n\t}\n\n\toverride component(shape: TLEmbedShape) {\n\t\tconst svgExport = useSvgExportContext()\n\t\tconst { w, h, url } = shape.props\n\t\tconst isEditing = useIsEditing(shape.id)\n\n\t\tconst embedInfo = this.getEmbedDefinition(url)\n\n\t\tconst isHoveringWhileEditingSameShape = useValue(\n\t\t\t'is hovering',\n\t\t\t() => {\n\t\t\t\tconst { editingShapeId, hoveredShapeId } = this.editor.getCurrentPageState()\n\n\t\t\t\tif (editingShapeId && hoveredShapeId !== editingShapeId) {\n\t\t\t\t\tconst editingShape = this.editor.getShape(editingShapeId)\n\t\t\t\t\tif (editingShape && this.editor.isShapeOfType<TLEmbedShape>(editingShape, 'embed')) {\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn false\n\t\t\t},\n\t\t\t[]\n\t\t)\n\n\t\tconst pageRotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\tif (svgExport) {\n\t\t\t// for SVG exports, we show a blank embed\n\t\t\treturn (\n\t\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"tl-embed\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: 0,\n\t\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t\t\tborderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,\n\t\t\t\t\t\t\tbackground: embedInfo?.definition.backgroundColor ?? 'var(--tl-color-background)',\n\t\t\t\t\t\t\twidth: w,\n\t\t\t\t\t\t\theight: h,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</HTMLContainer>\n\t\t\t)\n\t\t}\n\n\t\tconst isInteractive = isEditing || isHoveringWhileEditingSameShape\n\n\t\t// Prevent nested embedding of tldraw\n\t\tconst isIframe =\n\t\t\ttypeof window !== 'undefined' && (window !== window.top || window.self !== window.parent)\n\t\tif (isIframe && embedInfo?.definition.type === 'tldraw') return null\n\n\t\tif (embedInfo?.definition.type === 'github_gist') {\n\t\t\tconst idFromGistUrl = embedInfo.url.split('/').pop()\n\t\t\tif (!idFromGistUrl) throw Error('No gist id!')\n\n\t\t\treturn (\n\t\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t\t<Gist\n\t\t\t\t\t\tid={idFromGistUrl}\n\t\t\t\t\t\twidth={toDomPrecision(w)!}\n\t\t\t\t\t\theight={toDomPrecision(h)!}\n\t\t\t\t\t\tisInteractive={isInteractive}\n\t\t\t\t\t\tpageRotation={pageRotation}\n\t\t\t\t\t/>\n\t\t\t\t</HTMLContainer>\n\t\t\t)\n\t\t}\n\n\t\tconst sandbox = getSandboxPermissions({\n\t\t\t...embedShapePermissionDefaults,\n\t\t\t...(embedInfo?.definition.overridePermissions ?? {}),\n\t\t})\n\n\t\treturn (\n\t\t\t<HTMLContainer className=\"tl-embed-container\" id={shape.id}>\n\t\t\t\t{embedInfo?.definition ? (\n\t\t\t\t\t<iframe\n\t\t\t\t\t\tclassName=\"tl-embed\"\n\t\t\t\t\t\tsandbox={sandbox}\n\t\t\t\t\t\tsrc={embedInfo.embedUrl}\n\t\t\t\t\t\twidth={toDomPrecision(w)}\n\t\t\t\t\t\theight={toDomPrecision(h)}\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\t\t\t\tframeBorder=\"0\"\n\t\t\t\t\t\treferrerPolicy=\"no-referrer-when-downgrade\"\n\t\t\t\t\t\ttabIndex={isEditing ? 0 : -1}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: 0,\n\t\t\t\t\t\t\tpointerEvents: isInteractive ? 'auto' : 'none',\n\t\t\t\t\t\t\t// Fix for safari <https://stackoverflow.com/a/49150908>\n\t\t\t\t\t\t\tzIndex: isInteractive ? '' : '-1',\n\t\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t\t\tborderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,\n\t\t\t\t\t\t\tbackground: embedInfo?.definition.backgroundColor,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\toverride indicator(shape: TLEmbedShape) {\n\t\tconst embedInfo = this.getEmbedDefinition(shape.props.url)\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx={embedInfo?.definition.overrideOutlineRadius ?? 8}\n\t\t\t\try={embedInfo?.definition.overrideOutlineRadius ?? 8}\n\t\t\t/>\n\t\t)\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLEmbedShape,\n\t\tendShape: TLEmbedShape,\n\t\tt: number\n\t): TLEmbedShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n}\n\nfunction Gist({\n\tid,\n\tisInteractive,\n\twidth,\n\theight,\n\tstyle,\n\tpageRotation,\n}: {\n\tid: string\n\tisInteractive: boolean\n\twidth: number\n\theight: number\n\tpageRotation: number\n\tstyle?: React.CSSProperties\n}) {\n\t// Security warning:\n\t// Gists allow adding .json extensions to the URL which return JSONP.\n\t// Furthermore, the JSONP can include callbacks that execute arbitrary JavaScript.\n\t// It _is_ sandboxed by the iframe but we still want to disable it nonetheless.\n\t// We restrict the id to only allow hexdecimal characters to prevent this.\n\t// Read more:\n\t//   https://github.com/bhaveshk90/Content-Security-Policy-CSP-Bypass-Techniques\n\t//   https://github.com/renniepak/CSPBypass\n\tif (!id.match(/^[0-9a-f]+$/)) throw Error('No gist id!')\n\n\treturn (\n\t\t<iframe\n\t\t\tclassName=\"tl-embed\"\n\t\t\tdraggable={false}\n\t\t\twidth={toDomPrecision(width)}\n\t\t\theight={toDomPrecision(height)}\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tframeBorder=\"0\"\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tscrolling=\"no\"\n\t\t\treferrerPolicy=\"no-referrer-when-downgrade\"\n\t\t\ttabIndex={isInteractive ? 0 : -1}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tpointerEvents: isInteractive ? 'all' : 'none',\n\t\t\t\t// Fix for safari <https://stackoverflow.com/a/49150908>\n\t\t\t\tzIndex: isInteractive ? '' : '-1',\n\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t}}\n\t\t\tsrcDoc={`\n\t\t\t<html>\n\t\t\t\t<head>\n\t\t\t\t\t<base target=\"_blank\">\n\t\t\t\t</head>\n\t\t\t\t<body>\n\t\t\t\t\t<script src=${`https://gist.github.com/${id}.js`}></script>\n\t\t\t\t\t<style type=\"text/css\">\n\t\t\t\t\t\t* { margin: 0px; }\n\t\t\t\t\t\ttable { height: 100%; background-color: red; }\n\t\t\t\t\t\t.gist { background-color: none; height: 100%;  }\n\t\t\t\t\t\t.gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }\n\t\t\t\t\t</style>\n\t\t\t\t</body>\n\t\t\t</html>`}\n\t\t/>\n\t)\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/shapes/frame/FrameShapeTool.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/frame/FrameShapeTool.ts"],
-  "sourcesContent": ["import { BaseBoxShapeTool, TLShape, TLShapeId } from '@tldraw/editor'\n\n/** @public */\nexport class FrameShapeTool extends BaseBoxShapeTool {\n\tstatic override id = 'frame'\n\tstatic override initial = 'idle'\n\toverride shapeType = 'frame'\n\n\toverride onCreate(shape: TLShape | null): void {\n\t\tif (!shape) return\n\n\t\tconst bounds = this.editor.getShapePageBounds(shape)!\n\t\tconst shapesToAddToFrame: TLShapeId[] = []\n\t\tconst ancestorIds = this.editor.getShapeAncestors(shape).map((shape) => shape.id)\n\n\t\tthis.editor.getSortedChildIdsForParent(shape.parentId).map((siblingShapeId) => {\n\t\t\tconst siblingShape = this.editor.getShape(siblingShapeId)\n\t\t\tif (!siblingShape) return\n\t\t\t// We don't want to frame the frame itself\n\t\t\tif (siblingShape.id === shape.id) return\n\t\t\tif (siblingShape.isLocked) return\n\n\t\t\tconst pageShapeBounds = this.editor.getShapePageBounds(siblingShape)\n\t\t\tif (!pageShapeBounds) return\n\n\t\t\t// Frame shape encloses page shape\n\t\t\tif (bounds.contains(pageShapeBounds)) {\n\t\t\t\tif (canEnclose(siblingShape, ancestorIds, shape)) {\n\t\t\t\t\tshapesToAddToFrame.push(siblingShape.id)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\tthis.editor.reparentShapes(shapesToAddToFrame, shape.id)\n\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.editor.setCurrentTool('frame')\n\t\t} else {\n\t\t\tthis.editor.setCurrentTool('select.idle')\n\t\t}\n\t}\n}\n\n/** @internal */\nfunction canEnclose(shape: TLShape, ancestorIds: TLShapeId[], frame: TLShape): boolean {\n\t// We don't want to pull in shapes that are ancestors of the frame (can create a cycle)\n\tif (ancestorIds.includes(shape.id)) {\n\t\treturn false\n\t}\n\t// We only want to pull in shapes that are siblings of the frame\n\tif (shape.parentId === frame.parentId) {\n\t\treturn true\n\t}\n\treturn false\n}\n"],
+  "sourcesContent": ["import { BaseBoxShapeTool, TLShape, TLShapeId } from '@tldraw/editor'\n\n/** @public */\nexport class FrameShapeTool extends BaseBoxShapeTool {\n\tstatic override id = 'frame'\n\tstatic override initial = 'idle'\n\toverride shapeType = 'frame' as const\n\n\toverride onCreate(shape: TLShape | null): void {\n\t\tif (!shape) return\n\n\t\tconst bounds = this.editor.getShapePageBounds(shape)!\n\t\tconst shapesToAddToFrame: TLShapeId[] = []\n\t\tconst ancestorIds = this.editor.getShapeAncestors(shape).map((shape) => shape.id)\n\n\t\tthis.editor.getSortedChildIdsForParent(shape.parentId).map((siblingShapeId) => {\n\t\t\tconst siblingShape = this.editor.getShape(siblingShapeId)\n\t\t\tif (!siblingShape) return\n\t\t\t// We don't want to frame the frame itself\n\t\t\tif (siblingShape.id === shape.id) return\n\t\t\tif (siblingShape.isLocked) return\n\n\t\t\tconst pageShapeBounds = this.editor.getShapePageBounds(siblingShape)\n\t\t\tif (!pageShapeBounds) return\n\n\t\t\t// Frame shape encloses page shape\n\t\t\tif (bounds.contains(pageShapeBounds)) {\n\t\t\t\tif (canEnclose(siblingShape, ancestorIds, shape)) {\n\t\t\t\t\tshapesToAddToFrame.push(siblingShape.id)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\tthis.editor.reparentShapes(shapesToAddToFrame, shape.id)\n\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.editor.setCurrentTool('frame')\n\t\t} else {\n\t\t\tthis.editor.setCurrentTool('select.idle')\n\t\t}\n\t}\n}\n\n/** @internal */\nfunction canEnclose(shape: TLShape, ancestorIds: TLShapeId[], frame: TLShape): boolean {\n\t// We don't want to pull in shapes that are ancestors of the frame (can create a cycle)\n\tif (ancestorIds.includes(shape.id)) {\n\t\treturn false\n\t}\n\t// We only want to pull in shapes that are siblings of the frame\n\tif (shape.parentId === frame.parentId) {\n\t\treturn true\n\t}\n\treturn false\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAqD;AAG9C,MAAM,uBAAuB,+BAAiB;AAAA,EACpD,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EACjB,YAAY;AAAA,EAEZ,SAAS,OAA6B;AAC9C,QAAI,CAAC,MAAO;AAEZ,UAAM,SAAS,KAAK,OAAO,mBAAmB,KAAK;AACnD,UAAM,qBAAkC,CAAC;AACzC,UAAM,cAAc,KAAK,OAAO,kBAAkB,KAAK,EAAE,IAAI,CAACA,WAAUA,OAAM,EAAE;AAEhF,SAAK,OAAO,2BAA2B,MAAM,QAAQ,EAAE,IAAI,CAAC,mBAAmB;AAC9E,YAAM,eAAe,KAAK,OAAO,SAAS,cAAc;AACxD,UAAI,CAAC,aAAc;AAEnB,UAAI,aAAa,OAAO,MAAM,GAAI;AAClC,UAAI,aAAa,SAAU;AAE3B,YAAM,kBAAkB,KAAK,OAAO,mBAAmB,YAAY;AACnE,UAAI,CAAC,gBAAiB;AAGtB,UAAI,OAAO,SAAS,eAAe,GAAG;AACrC,YAAI,WAAW,cAAc,aAAa,KAAK,GAAG;AACjD,6BAAmB,KAAK,aAAa,EAAE;AAAA,QACxC;AAAA,MACD;AAAA,IACD,CAAC;AAED,SAAK,OAAO,eAAe,oBAAoB,MAAM,EAAE;AAEvD,QAAI,KAAK,OAAO,iBAAiB,EAAE,cAAc;AAChD,WAAK,OAAO,eAAe,OAAO;AAAA,IACnC,OAAO;AACN,WAAK,OAAO,eAAe,aAAa;AAAA,IACzC;AAAA,EACD;AACD;AAGA,SAAS,WAAW,OAAgB,aAA0B,OAAyB;AAEtF,MAAI,YAAY,SAAS,MAAM,EAAE,GAAG;AACnC,WAAO;AAAA,EACR;AAEA,MAAI,MAAM,aAAa,MAAM,UAAU;AACtC,WAAO;AAAA,EACR;AACA,SAAO;AACR;",
   "names": ["shape"]
 }

package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js CHANGED Viewed

@@ -79,6 +79,9 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
   canResizeChildren() {
     return false;
   }
+  isExportBoundsContainer() {
+    return true;
+  }
   getDefaultProps() {
     return { w: 160 * 2, h: 90 * 2, name: "", color: "black" };
   }
@@ -140,7 +143,8 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
           width,
           height,
           isFilled: true,
-          isLabel: true
+          isLabel: true,
+          excludeFromShapeBounds: true
         })
       ]
     });
@@ -162,25 +166,25 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
       },
       [shape.id]
     );
-    const zoomLevel = (0, import_editor.useValue)("zoom level", () => this.editor.getZoomLevel(), [this.editor]);
     const showFrameColors = this.options.showColors;
-    const color = theme[shape.props.color];
-    const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill;
-    const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke;
-    const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background;
-    const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background;
-    const frameHeadingText = showFrameColors ? color.frame.text : theme.text;
+    const colorToUse = showFrameColors ? shape.props.color : "black";
+    const frameFill = (0, import_editor.getColorValue)(theme, colorToUse, "frameFill");
+    const frameStroke = (0, import_editor.getColorValue)(theme, colorToUse, "frameStroke");
+    const frameHeadingStroke = showFrameColors ? (0, import_editor.getColorValue)(theme, colorToUse, "frameHeadingStroke") : theme.background;
+    const frameHeadingFill = showFrameColors ? (0, import_editor.getColorValue)(theme, colorToUse, "frameHeadingFill") : theme.background;
+    const frameHeadingText = (0, import_editor.getColorValue)(theme, colorToUse, "frameText");
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.SVGContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "rect",
         {
           className: (0, import_classnames.default)("tl-frame__body", { "tl-frame__creating": isCreating }),
-          width: shape.props.w + 1 / zoomLevel,
-          height: shape.props.h + 1 / zoomLevel,
           fill: frameFill,
           stroke: frameStroke,
-          y: -0.5 / zoomLevel,
-          x: -0.5 / zoomLevel
+          style: {
+            width: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,
+            height: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,
+            transform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`
+          }
         }
       ) }),
       isCreating ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -211,12 +215,12 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
     const spans = this.editor.textMeasure.measureTextSpans(frameTitle, opts);
     const text = (0, import_createTextJsxFromSpans.createTextJsxFromSpans)(this.editor, spans, opts);
     const showFrameColors = this.options.showColors;
-    const color = theme[shape.props.color];
-    const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill;
-    const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke;
-    const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background;
-    const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background;
-    const frameHeadingText = showFrameColors ? color.frame.text : theme.text;
+    const colorToUse = showFrameColors ? shape.props.color : "black";
+    const frameFill = (0, import_editor.getColorValue)(theme, colorToUse, "frameFill");
+    const frameStroke = (0, import_editor.getColorValue)(theme, colorToUse, "frameStroke");
+    const frameHeadingStroke = showFrameColors ? (0, import_editor.getColorValue)(theme, colorToUse, "frameHeadingStroke") : theme.background;
+    const frameHeadingFill = showFrameColors ? (0, import_editor.getColorValue)(theme, colorToUse, "frameHeadingFill") : theme.background;
+    const frameHeadingText = (0, import_editor.getColorValue)(theme, colorToUse, "frameText");
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "rect",
@@ -262,6 +266,9 @@ class FrameShapeUtil extends import_editor.BaseBoxShapeUtil {
   providesBackgroundForChildren() {
     return true;
   }
+  getClipPath(shape) {
+    return this.editor.getShapeGeometry(shape.id).vertices;
+  }
   canReceiveNewChildrenOfType(shape) {
     return !shape.isLocked;
   }