@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx"],
-  "sourcesContent": ["import { ComponentType } from 'react'\n\n/** @public */\nexport type TLShapeIndicatorErrorFallbackComponent = ComponentType<{ error: unknown }>\n\n/** @internal */\nexport const DefaultShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallbackComponent = () => {\n\treturn <circle cx={4} cy={4} r={8} strokeWidth=\"1\" stroke=\"red\" />\n}\n"],
-  "mappings": "AAOQ;AADD,MAAM,qCAA6E,MAAM;AAC/F,SAAO,oBAAC,YAAO,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,aAAY,KAAI,QAAO,OAAM;AACjE;",
-  "names": []
-}

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

@@ -1,82 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useValue } from "@tldraw/state-react";
-import { memo, useRef } from "react";
-import { useEditorComponents } from "../../hooks/EditorComponentsContext.mjs";
-import { useEditor } from "../../hooks/useEditor.mjs";
-const DefaultShapeIndicators = memo(function DefaultShapeIndicators2({
-  hideAll,
-  showAll
-}) {
-  const editor = useEditor();
-  if (hideAll && showAll)
-    throw Error("You cannot set both hideAll and showAll props to true, cmon now");
-  const rPreviousSelectedShapeIds = useRef(/* @__PURE__ */ new Set());
-  const idsToDisplay = useValue(
-    "should display selected ids",
-    () => {
-      const prev = rPreviousSelectedShapeIds.current;
-      const next = /* @__PURE__ */ new Set();
-      const instanceState = editor.getInstanceState();
-      const isChangingStyle = instanceState.isChangingStyle;
-      const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
-      const isInSelectState = editor.isInAny(
-        "select.brushing",
-        "select.scribble_brushing",
-        "select.pointing_shape",
-        "select.pointing_selection",
-        "select.pointing_handle"
-      );
-      if (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {
-        rPreviousSelectedShapeIds.current = next;
-        return next;
-      }
-      for (const id of editor.getSelectedShapeIds()) {
-        next.add(id);
-      }
-      if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
-        const hovered = editor.getHoveredShapeId();
-        if (hovered) next.add(hovered);
-      }
-      if (prev.size !== next.size) {
-        rPreviousSelectedShapeIds.current = next;
-        return next;
-      }
-      for (const id of next) {
-        if (!prev.has(id)) {
-          rPreviousSelectedShapeIds.current = next;
-          return next;
-        }
-      }
-      return prev;
-    },
-    [editor]
-  );
-  const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
-  const { ShapeIndicator } = useEditorComponents();
-  const shapesToRender = useValue(
-    "shapes to render for svg indicators",
-    () => {
-      if (!editor.options.useCanvasIndicators) return renderingShapes;
-      return renderingShapes.filter(({ id }) => {
-        const shape = editor.getShape(id);
-        if (!shape) return false;
-        const util = editor.getShapeUtil(shape);
-        return util.useLegacyIndicator();
-      });
-    },
-    [editor, renderingShapes]
-  );
-  if (!ShapeIndicator) return null;
-  return shapesToRender.map(({ id }) => /* @__PURE__ */ jsx(
-    ShapeIndicator,
-    {
-      shapeId: id,
-      hidden: !showAll && (hideAll || !idsToDisplay.has(id))
-    },
-    id + "_indicator"
-  ));
-});
-export {
-  DefaultShapeIndicators
-};
-//# sourceMappingURL=DefaultShapeIndicators.mjs.map

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

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

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

@@ -1,142 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import * as React from "react";
-import { rangeIntersection } from "../../primitives/utils.mjs";
-function PointsSnapIndicator({ points, zoom }) {
-  const l = 2.5 / zoom;
-  const minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity);
-  const maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity);
-  const minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity);
-  const maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity);
-  const useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY);
-  let firstX, firstY, secondX, secondY;
-  if (useNWtoSEdireciton) {
-    firstX = minX;
-    firstY = minY;
-    secondX = maxX;
-    secondY = maxY;
-  } else {
-    firstX = minX;
-    firstY = maxY;
-    secondX = maxX;
-    secondY = minY;
-  }
-  return /* @__PURE__ */ jsxs("g", { className: "tl-snap-indicator", stroke: "lime", children: [
-    /* @__PURE__ */ jsx("line", { x1: firstX, y1: firstY, x2: secondX, y2: secondY }),
-    points.map((p, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${p.x},${p.y})`, children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        className: "tl-snap-point",
-        d: `M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`
-      }
-    ) }, i))
-  ] });
-}
-function GapsSnapIndicator({ gaps, direction, zoom }) {
-  const l = 3.5 / zoom;
-  let edgeIntersection = [-Infinity, Infinity];
-  let nextEdgeIntersection = null;
-  const horizontal = direction === "horizontal";
-  for (const gap of gaps) {
-    nextEdgeIntersection = rangeIntersection(
-      edgeIntersection[0],
-      edgeIntersection[1],
-      horizontal ? gap.startEdge[0].y : gap.startEdge[0].x,
-      horizontal ? gap.startEdge[1].y : gap.startEdge[1].x
-    );
-    if (nextEdgeIntersection) {
-      edgeIntersection = nextEdgeIntersection;
-    } else {
-      continue;
-    }
-    nextEdgeIntersection = rangeIntersection(
-      edgeIntersection[0],
-      edgeIntersection[1],
-      horizontal ? gap.endEdge[0].y : gap.endEdge[0].x,
-      horizontal ? gap.endEdge[1].y : gap.endEdge[1].x
-    );
-    if (nextEdgeIntersection) {
-      edgeIntersection = nextEdgeIntersection;
-    } else {
-      continue;
-    }
-  }
-  if (edgeIntersection === null) {
-    return null;
-  }
-  const midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2;
-  return (
-    /* @__PURE__ */ jsx("g", { className: "tl-snap-indicator", stroke: "cyan", children: gaps.map(({ startEdge, endEdge }, i) => /* @__PURE__ */ jsx(React.Fragment, { children: horizontal ? (
-      // horizontal gap
-      /* @__PURE__ */ (jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: startEdge[0].x,
-            y1: midPoint - 2 * l,
-            x2: startEdge[1].x,
-            y2: midPoint + 2 * l
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: endEdge[0].x,
-            y1: midPoint - 2 * l,
-            x2: endEdge[1].x,
-            y2: midPoint + 2 * l
-          }
-        ),
-        /* @__PURE__ */ jsx("line", { x1: startEdge[0].x, y1: midPoint, x2: endEdge[0].x, y2: midPoint }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: (startEdge[0].x + endEdge[0].x) / 2,
-            y1: midPoint - l,
-            x2: (startEdge[0].x + endEdge[0].x) / 2,
-            y2: midPoint + l
-          }
-        )
-      ] }))
-    ) : (
-      // vertical gap
-      /* @__PURE__ */ (jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: midPoint - 2 * l,
-            y1: startEdge[0].y,
-            x2: midPoint + 2 * l,
-            y2: startEdge[1].y
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: midPoint - 2 * l,
-            y1: endEdge[0].y,
-            x2: midPoint + 2 * l,
-            y2: endEdge[1].y
-          }
-        ),
-        /* @__PURE__ */ jsx("line", { x1: midPoint, y1: startEdge[0].y, x2: midPoint, y2: endEdge[0].y }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: midPoint - l,
-            y1: (startEdge[0].y + endEdge[0].y) / 2,
-            x2: midPoint + l,
-            y2: (startEdge[0].y + endEdge[0].y) / 2
-          }
-        )
-      ] }))
-    ) }, i)) })
-  );
-}
-function DefaultSnapIndicator({ className, line, zoom }) {
-  return /* @__PURE__ */ jsx("svg", { className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: line.type === "points" ? /* @__PURE__ */ jsx(PointsSnapIndicator, { ...line, zoom }) : line.type === "gaps" ? /* @__PURE__ */ jsx(GapsSnapIndicator, { ...line, zoom }) : null });
-}
-export {
-  DefaultSnapIndicator
-};
-//# sourceMappingURL=DefaultSnapIndictor.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/components/default-components/DefaultSnapIndictor.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport * as React from 'react'\nimport {\n\ttype GapsSnapIndicator,\n\ttype PointsSnapIndicator,\n\ttype SnapIndicator,\n} from '../../editor/managers/SnapManager/SnapManager'\nimport { rangeIntersection } from '../../primitives/utils'\n\nfunction PointsSnapIndicator({ points, zoom }: { zoom: number } & PointsSnapIndicator) {\n\tconst l = 2.5 / zoom\n\n\tconst minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity)\n\tconst maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity)\n\tconst minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity)\n\tconst maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity)\n\n\tconst useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY)\n\tlet firstX: number, firstY: number, secondX: number, secondY: number\n\tif (useNWtoSEdireciton) {\n\t\tfirstX = minX\n\t\tfirstY = minY\n\t\tsecondX = maxX\n\t\tsecondY = maxY\n\t} else {\n\t\tfirstX = minX\n\t\tfirstY = maxY\n\t\tsecondX = maxX\n\t\tsecondY = minY\n\t}\n\n\treturn (\n\t\t<g className=\"tl-snap-indicator\" stroke=\"lime\">\n\t\t\t<line x1={firstX} y1={firstY} x2={secondX} y2={secondY} />\n\t\t\t{points.map((p, i) => (\n\t\t\t\t<g transform={`translate(${p.x},${p.y})`} key={i}>\n\t\t\t\t\t<path\n\t\t\t\t\t\tclassName=\"tl-snap-point\"\n\t\t\t\t\t\td={`M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`}\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t))}\n\t\t</g>\n\t)\n}\n\nfunction GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSnapIndicator) {\n\tconst l = 3.5 / zoom\n\n\tlet edgeIntersection: number[] | null = [-Infinity, +Infinity]\n\tlet nextEdgeIntersection: number[] | null = null\n\n\tconst horizontal = direction === 'horizontal'\n\n\t// find intersection of all gaps so we can render a straight line through it;\n\t// some range intersections may return null, in which case we skip that gap.\n\tfor (const gap of gaps) {\n\t\tnextEdgeIntersection = rangeIntersection(\n\t\t\tedgeIntersection[0],\n\t\t\tedgeIntersection[1],\n\t\t\thorizontal ? gap.startEdge[0].y : gap.startEdge[0].x,\n\t\t\thorizontal ? gap.startEdge[1].y : gap.startEdge[1].x\n\t\t)\n\n\t\tif (nextEdgeIntersection) {\n\t\t\tedgeIntersection = nextEdgeIntersection\n\t\t} else {\n\t\t\tcontinue\n\t\t}\n\n\t\tnextEdgeIntersection = rangeIntersection(\n\t\t\tedgeIntersection[0],\n\t\t\tedgeIntersection[1],\n\t\t\thorizontal ? gap.endEdge[0].y : gap.endEdge[0].x,\n\t\t\thorizontal ? gap.endEdge[1].y : gap.endEdge[1].x\n\t\t)\n\n\t\tif (nextEdgeIntersection) {\n\t\t\tedgeIntersection = nextEdgeIntersection\n\t\t} else {\n\t\t\tcontinue\n\t\t}\n\t}\n\n\tif (edgeIntersection === null) {\n\t\treturn null\n\t}\n\n\tconst midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2\n\n\treturn (\n\t\t<g className=\"tl-snap-indicator\" stroke=\"cyan\">\n\t\t\t{gaps.map(({ startEdge, endEdge }, i) => (\n\t\t\t\t<React.Fragment key={i}>\n\t\t\t\t\t{horizontal ? (\n\t\t\t\t\t\t// horizontal gap\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* start edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={startEdge[0].x}\n\t\t\t\t\t\t\t\ty1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\tx2={startEdge[1].x}\n\t\t\t\t\t\t\t\ty2={midPoint + 2 * l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* end edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={endEdge[0].x}\n\t\t\t\t\t\t\t\ty1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\tx2={endEdge[1].x}\n\t\t\t\t\t\t\t\ty2={midPoint + 2 * l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* joining line */}\n\t\t\t\t\t\t\t<line x1={startEdge[0].x} y1={midPoint} x2={endEdge[0].x} y2={midPoint} />\n\t\t\t\t\t\t\t{/* center point marker */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={(startEdge[0].x + endEdge[0].x) / 2}\n\t\t\t\t\t\t\t\ty1={midPoint - l}\n\t\t\t\t\t\t\t\tx2={(startEdge[0].x + endEdge[0].x) / 2}\n\t\t\t\t\t\t\t\ty2={midPoint + l}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// vertical gap\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* start edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\ty1={startEdge[0].y}\n\t\t\t\t\t\t\t\tx2={midPoint + 2 * l}\n\t\t\t\t\t\t\t\ty2={startEdge[1].y}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* end edge */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - 2 * l}\n\t\t\t\t\t\t\t\ty1={endEdge[0].y}\n\t\t\t\t\t\t\t\tx2={midPoint + 2 * l}\n\t\t\t\t\t\t\t\ty2={endEdge[1].y}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{/* joining line */}\n\t\t\t\t\t\t\t<line x1={midPoint} y1={startEdge[0].y} x2={midPoint} y2={endEdge[0].y} />\n\t\t\t\t\t\t\t{/* center point marker */}\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={midPoint - l}\n\t\t\t\t\t\t\t\ty1={(startEdge[0].y + endEdge[0].y) / 2}\n\t\t\t\t\t\t\t\tx2={midPoint + l}\n\t\t\t\t\t\t\t\ty2={(startEdge[0].y + endEdge[0].y) / 2}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</React.Fragment>\n\t\t\t))}\n\t\t</g>\n\t)\n}\n\n/** @public */\nexport interface TLSnapIndicatorProps {\n\tclassName?: string\n\tline: SnapIndicator\n\tzoom: number\n}\n\n/** @public @react */\nexport function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {\n\treturn (\n\t\t<svg className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t{line.type === 'points' ? (\n\t\t\t\t<PointsSnapIndicator {...line} zoom={zoom} />\n\t\t\t) : line.type === 'gaps' ? (\n\t\t\t\t<GapsSnapIndicator {...line} zoom={zoom} />\n\t\t\t) : null}\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AAgCE,SAgEI,UA/DH,KADD;AAhCF,OAAO,gBAAgB;AACvB,YAAY,WAAW;AAMvB,SAAS,yBAAyB;AAElC,SAAS,oBAAoB,EAAE,QAAQ,KAAK,GAA2C;AACtF,QAAM,IAAI,MAAM;AAEhB,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE,CAAC,GAAG,QAAQ;AACnE,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE,CAAC,GAAG,SAAS;AACpE,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE,CAAC,GAAG,QAAQ;AACnE,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE,CAAC,GAAG,SAAS;AAEpE,QAAM,qBAAqB,OAAO,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ,EAAE,MAAM,IAAI;AAC1E,MAAI,QAAgB,QAAgB,SAAiB;AACrD,MAAI,oBAAoB;AACvB,aAAS;AACT,aAAS;AACT,cAAU;AACV,cAAU;AAAA,EACX,OAAO;AACN,aAAS;AACT,aAAS;AACT,cAAU;AACV,cAAU;AAAA,EACX;AAEA,SACC,qBAAC,OAAE,WAAU,qBAAoB,QAAO,QACvC;AAAA,wBAAC,UAAK,IAAI,QAAQ,IAAI,QAAQ,IAAI,SAAS,IAAI,SAAS;AAAA,IACvD,OAAO,IAAI,CAAC,GAAG,MACf,oBAAC,OAAE,WAAW,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KACpC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAAA;AAAA,IACvD,KAJ8C,CAK/C,CACA;AAAA,KACF;AAEF;AAEA,SAAS,kBAAkB,EAAE,MAAM,WAAW,KAAK,GAAyC;AAC3F,QAAM,IAAI,MAAM;AAEhB,MAAI,mBAAoC,CAAC,WAAW,QAAS;AAC7D,MAAI,uBAAwC;AAE5C,QAAM,aAAa,cAAc;AAIjC,aAAW,OAAO,MAAM;AACvB,2BAAuB;AAAA,MACtB,iBAAiB,CAAC;AAAA,MAClB,iBAAiB,CAAC;AAAA,MAClB,aAAa,IAAI,UAAU,CAAC,EAAE,IAAI,IAAI,UAAU,CAAC,EAAE;AAAA,MACnD,aAAa,IAAI,UAAU,CAAC,EAAE,IAAI,IAAI,UAAU,CAAC,EAAE;AAAA,IACpD;AAEA,QAAI,sBAAsB;AACzB,yBAAmB;AAAA,IACpB,OAAO;AACN;AAAA,IACD;AAEA,2BAAuB;AAAA,MACtB,iBAAiB,CAAC;AAAA,MAClB,iBAAiB,CAAC;AAAA,MAClB,aAAa,IAAI,QAAQ,CAAC,EAAE,IAAI,IAAI,QAAQ,CAAC,EAAE;AAAA,MAC/C,aAAa,IAAI,QAAQ,CAAC,EAAE,IAAI,IAAI,QAAQ,CAAC,EAAE;AAAA,IAChD;AAEA,QAAI,sBAAsB;AACzB,yBAAmB;AAAA,IACpB,OAAO;AACN;AAAA,IACD;AAAA,EACD;AAEA,MAAI,qBAAqB,MAAM;AAC9B,WAAO;AAAA,EACR;AAEA,QAAM,YAAY,iBAAiB,CAAC,IAAI,iBAAiB,CAAC,KAAK;AAE/D,SACC,oBAAC,OAAE,WAAU,qBAAoB,QAAO,QACtC,eAAK,IAAI,CAAC,EAAE,WAAW,QAAQ,GAAG,MAClC,oBAAC,MAAM,UAAN,EACC;AAAA;AAAA,IAEA,iCAEC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,UAAU,CAAC,EAAE;AAAA,UACjB,IAAI,WAAW,IAAI;AAAA,UACnB,IAAI,UAAU,CAAC,EAAE;AAAA,UACjB,IAAI,WAAW,IAAI;AAAA;AAAA,MACpB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,QAAQ,CAAC,EAAE;AAAA,UACf,IAAI,WAAW,IAAI;AAAA,UACnB,IAAI,QAAQ,CAAC,EAAE;AAAA,UACf,IAAI,WAAW,IAAI;AAAA;AAAA,MACpB;AAAA,MAEA,oBAAC,UAAK,IAAI,UAAU,CAAC,EAAE,GAAG,IAAI,UAAU,IAAI,QAAQ,CAAC,EAAE,GAAG,IAAI,UAAU;AAAA,MAExE;AAAA,QAAC;AAAA;AAAA,UACA,KAAK,UAAU,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK;AAAA,UACtC,IAAI,WAAW;AAAA,UACf,KAAK,UAAU,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK;AAAA,UACtC,IAAI,WAAW;AAAA;AAAA,MAChB;AAAA,OACD;AAAA;AAAA;AAAA,IAGA,iCAEC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,WAAW,IAAI;AAAA,UACnB,IAAI,UAAU,CAAC,EAAE;AAAA,UACjB,IAAI,WAAW,IAAI;AAAA,UACnB,IAAI,UAAU,CAAC,EAAE;AAAA;AAAA,MAClB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,WAAW,IAAI;AAAA,UACnB,IAAI,QAAQ,CAAC,EAAE;AAAA,UACf,IAAI,WAAW,IAAI;AAAA,UACnB,IAAI,QAAQ,CAAC,EAAE;AAAA;AAAA,MAChB;AAAA,MAEA,oBAAC,UAAK,IAAI,UAAU,IAAI,UAAU,CAAC,EAAE,GAAG,IAAI,UAAU,IAAI,QAAQ,CAAC,EAAE,GAAG;AAAA,MAExE;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,WAAW;AAAA,UACf,KAAK,UAAU,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK;AAAA,UACtC,IAAI,WAAW;AAAA,UACf,KAAK,UAAU,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK;AAAA;AAAA,MACvC;AAAA,OACD;AAAA,OAtDmB,CAwDrB,CACA,GACF;AAEF;AAUO,SAAS,qBAAqB,EAAE,WAAW,MAAM,KAAK,GAAyB;AACrF,SACC,oBAAC,SAAI,WAAW,WAAW,qBAAqB,SAAS,GAAG,eAAY,QACtE,eAAK,SAAS,WACd,oBAAC,uBAAqB,GAAG,MAAM,MAAY,IACxC,KAAK,SAAS,SACjB,oBAAC,qBAAmB,GAAG,MAAM,MAAY,IACtC,MACL;AAEF;",
-  "names": []
-}

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

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from "../utils/dom.mjs";
-import { getPointerInfo } from "../utils/getPointerInfo.mjs";
-import { useEditor } from "./useEditor.mjs";
-function getHandle(editor, id, handleId) {
-  const shape = editor.getShape(id);
-  const handles = editor.getShapeHandles(shape);
-  return { shape, handle: handles.find((h) => h.id === handleId) };
-}
-function useHandleEvents(id, handleId) {
-  const editor = useEditor();
-  return React.useMemo(() => {
-    const onPointerDown = (e) => {
-      if (editor.wasEventAlreadyHandled(e)) return;
-      const target = loopToHtmlElement(e.currentTarget);
-      setPointerCapture(target, e);
-      const { shape, handle } = getHandle(editor, id, handleId);
-      if (!handle) return;
-      editor.dispatch({
-        type: "pointer",
-        target: "handle",
-        handle,
-        shape,
-        name: "pointer_down",
-        ...getPointerInfo(editor, e)
-      });
-    };
-    let lastX, lastY;
-    const onPointerMove = (e) => {
-      if (editor.wasEventAlreadyHandled(e)) return;
-      if (e.clientX === lastX && e.clientY === lastY) return;
-      lastX = e.clientX;
-      lastY = e.clientY;
-      const { shape, handle } = getHandle(editor, id, handleId);
-      if (!handle) return;
-      editor.dispatch({
-        type: "pointer",
-        target: "handle",
-        handle,
-        shape,
-        name: "pointer_move",
-        ...getPointerInfo(editor, e)
-      });
-    };
-    const onPointerUp = (e) => {
-      if (editor.wasEventAlreadyHandled(e)) return;
-      const target = loopToHtmlElement(e.currentTarget);
-      releasePointerCapture(target, e);
-      const { shape, handle } = getHandle(editor, id, handleId);
-      if (!handle) return;
-      editor.dispatch({
-        type: "pointer",
-        target: "handle",
-        handle,
-        shape,
-        name: "pointer_up",
-        ...getPointerInfo(editor, e)
-      });
-    };
-    return {
-      onPointerDown,
-      onPointerMove,
-      onPointerUp
-    };
-  }, [editor, id, handleId]);
-}
-export {
-  useHandleEvents
-};
-//# sourceMappingURL=useHandleEvents.mjs.map

package/dist-esm/lib/hooks/useHandleEvents.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/useHandleEvents.ts"],
-  "sourcesContent": ["import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'\nimport * as React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nfunction getHandle(editor: Editor, id: TLShapeId, handleId: string) {\n\tconst shape = editor.getShape<TLArrowShape | TLLineShape>(id)!\n\tconst handles = editor.getShapeHandles(shape)!\n\treturn { shape, handle: handles.find((h) => h.id === handleId) }\n}\n\nexport function useHandleEvents(id: TLShapeId, handleId: string) {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\tconst onPointerDown = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t// Must set pointer capture on an HTML element!\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\tsetPointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_down',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\t// Track the last screen point\n\t\tlet lastX: number, lastY: number\n\n\t\tconst onPointerMove = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\tconst onPointerUp = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\treleasePointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerUp,\n\t\t}\n\t}, [editor, id, handleId])\n}\n"],
-  "mappings": "AACA,YAAY,WAAW;AAEvB,SAAS,mBAAmB,uBAAuB,yBAAyB;AAC5E,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAE1B,SAAS,UAAU,QAAgB,IAAe,UAAkB;AACnE,QAAM,QAAQ,OAAO,SAAqC,EAAE;AAC5D,QAAM,UAAU,OAAO,gBAAgB,KAAK;AAC5C,SAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE;AAChE;AAEO,SAAS,gBAAgB,IAAe,UAAkB;AAChE,QAAM,SAAS,UAAU;AAEzB,SAAO,MAAM,QAAQ,MAAM;AAC1B,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAGtC,YAAM,SAAS,kBAAkB,EAAE,aAAa;AAChD,wBAAkB,QAAQ,CAAC;AAE3B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,GAAG,eAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAGA,QAAI,OAAe;AAEnB,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,UAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,cAAQ,EAAE;AACV,cAAQ,EAAE;AAEV,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,GAAG,eAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,MAA0B;AAC9C,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAM,SAAS,kBAAkB,EAAE,aAAa;AAChD,4BAAsB,QAAQ,CAAC;AAE/B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,GAAG,eAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;AAC1B;",
-  "names": []
-}

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

@@ -1,78 +0,0 @@
-import { useMemo } from "react";
-import { RIGHT_MOUSE_BUTTON } from "../constants.mjs";
-import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from "../utils/dom.mjs";
-import { getPointerInfo } from "../utils/getPointerInfo.mjs";
-import { useEditor } from "./useEditor.mjs";
-function useSelectionEvents(handle) {
-  const editor = useEditor();
-  const events = useMemo(
-    function selectionEvents() {
-      const onPointerDown = (e) => {
-        if (editor.wasEventAlreadyHandled(e)) return;
-        if (e.button === RIGHT_MOUSE_BUTTON) {
-          editor.dispatch({
-            type: "pointer",
-            target: "selection",
-            handle,
-            name: "right_click",
-            ...getPointerInfo(editor, e)
-          });
-          return;
-        }
-        if (e.button !== 0) return;
-        const elm = loopToHtmlElement(e.currentTarget);
-        function releaseCapture() {
-          elm.removeEventListener("pointerup", releaseCapture);
-          releasePointerCapture(elm, e);
-        }
-        setPointerCapture(elm, e);
-        elm.addEventListener("pointerup", releaseCapture);
-        editor.dispatch({
-          name: "pointer_down",
-          type: "pointer",
-          target: "selection",
-          handle,
-          ...getPointerInfo(editor, e)
-        });
-        editor.markEventAsHandled(e);
-      };
-      let lastX, lastY;
-      function onPointerMove(e) {
-        if (editor.wasEventAlreadyHandled(e)) return;
-        if (e.button !== 0) return;
-        if (e.clientX === lastX && e.clientY === lastY) return;
-        lastX = e.clientX;
-        lastY = e.clientY;
-        editor.dispatch({
-          name: "pointer_move",
-          type: "pointer",
-          target: "selection",
-          handle,
-          ...getPointerInfo(editor, e)
-        });
-      }
-      const onPointerUp = (e) => {
-        if (editor.wasEventAlreadyHandled(e)) return;
-        if (e.button !== 0) return;
-        editor.dispatch({
-          name: "pointer_up",
-          type: "pointer",
-          target: "selection",
-          handle,
-          ...getPointerInfo(editor, e)
-        });
-      };
-      return {
-        onPointerDown,
-        onPointerMove,
-        onPointerUp
-      };
-    },
-    [editor, handle]
-  );
-  return events;
-}
-export {
-  useSelectionEvents
-};
-//# sourceMappingURL=useSelectionEvents.mjs.map

package/dist-esm/lib/hooks/useSelectionEvents.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/useSelectionEvents.ts"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { TLSelectionHandle } from '../editor/types/selection-types'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useSelectionEvents(handle: TLSelectionHandle) {\n\tconst editor = useEditor()\n\n\tconst events = useMemo(\n\t\tfunction selectionEvents() {\n\t\t\tconst onPointerDown: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\t\thandle,\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\t// Because the events are probably set on SVG elements,\n\t\t\t\t// we need to instead place pointer capture on the first HTML\n\t\t\t\t// element above the event's target; and set a listener to\n\t\t\t\t// remove pointer capture when the pointer is released.\n\n\t\t\t\tconst elm = loopToHtmlElement(e.currentTarget)\n\n\t\t\t\tfunction releaseCapture() {\n\t\t\t\t\telm.removeEventListener('pointerup', releaseCapture)\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\n\t\t\t\tsetPointerCapture(elm, e)\n\t\t\t\telm.addEventListener('pointerup', releaseCapture)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t}\n\n\t\t\t// Track the last screen point\n\t\t\tlet lastX: number, lastY: number\n\n\t\t\tfunction onPointerMove(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\t\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\t\tlastX = e.clientX\n\t\t\t\tlastY = e.clientY\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst onPointerUp: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerMove,\n\t\t\t\tonPointerUp,\n\t\t\t}\n\t\t},\n\t\t[editor, handle]\n\t)\n\n\treturn events\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB,uBAAuB,yBAAyB;AAC5E,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAGnB,SAAS,mBAAmB,QAA2B;AAC7D,QAAM,SAAS,UAAU;AAEzB,QAAM,SAAS;AAAA,IACd,SAAS,kBAAkB;AAC1B,YAAM,gBAA2C,CAAC,MAAM;AACvD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAI,EAAE,WAAW,oBAAoB;AACpC,iBAAO,SAAS;AAAA,YACf,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,YACA,MAAM;AAAA,YACN,GAAG,eAAe,QAAQ,CAAC;AAAA,UAC5B,CAAC;AACD;AAAA,QACD;AAEA,YAAI,EAAE,WAAW,EAAG;AAOpB,cAAM,MAAM,kBAAkB,EAAE,aAAa;AAE7C,iBAAS,iBAAiB;AACzB,cAAI,oBAAoB,aAAa,cAAc;AACnD,gCAAsB,KAAK,CAAC;AAAA,QAC7B;AAEA,0BAAkB,KAAK,CAAC;AACxB,YAAI,iBAAiB,aAAa,cAAc;AAEhD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,GAAG,eAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AACD,eAAO,mBAAmB,CAAC;AAAA,MAC5B;AAGA,UAAI,OAAe;AAEnB,eAAS,cAAc,GAAuB;AAC7C,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,gBAAQ,EAAE;AACV,gBAAQ,EAAE;AAEV,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,GAAG,eAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,YAAM,cAAyC,CAAC,MAAM;AACrD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AAEpB,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,GAAG,eAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,SAAO;AACR;",
-  "names": []
-}

package/src/lib/components/GeometryDebuggingView.tsx

@@ -1,108 +0,0 @@
-import { track } from '@tldraw/state-react'
-import { modulate } from '@tldraw/utils'
-import { useEditor } from '../hooks/useEditor'
-import { Geometry2d } from '../primitives/geometry/Geometry2d'
-import { Group2d } from '../primitives/geometry/Group2d'
-
-export const GeometryDebuggingView = track(function GeometryDebuggingView({
-	showStroke = true,
-	showVertices = true,
-	showClosestPointOnOutline = true,
-}: {
-	showStroke?: boolean
-	showVertices?: boolean
-	showClosestPointOnOutline?: boolean
-}) {
-	const editor = useEditor()
-
-	const zoomLevel = editor.getZoomLevel()
-	const renderingShapes = editor.getRenderingShapes()
-	const currentPagePoint = editor.inputs.getCurrentPagePoint()
-
-	return (
-		<svg
-			style={{
-				position: 'absolute',
-				pointerEvents: 'none',
-				zIndex: 999999999,
-				top: 0,
-				left: 0,
-				overflow: 'visible',
-			}}
-		>
-			{renderingShapes.map((result) => {
-				const shape = editor.getShape(result.id)!
-
-				if (shape.type === 'group') return null
-
-				const geometry = editor.getShapeGeometry(shape)
-				const pageTransform = editor.getShapePageTransform(shape)!
-
-				const pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint)
-				const nearestPointOnShape = geometry.nearestPoint(pointInShapeSpace)
-				const distanceToPoint = geometry.distanceToPoint(pointInShapeSpace, true)
-				const dist = Math.abs(distanceToPoint) * zoomLevel
-				const hitInside = distanceToPoint < 0
-
-				const { vertices } = geometry
-
-				return (
-					<g
-						key={result.id + '_outline'}
-						transform={pageTransform.toCssString()}
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						{showStroke && (
-							<g
-								stroke={geometry.debugColor ?? 'red'}
-								opacity="1"
-								strokeWidth={2 / zoomLevel}
-								fill="none"
-							>
-								<GeometryStroke geometry={geometry} />
-							</g>
-						)}
-						{showVertices &&
-							vertices.map((v, i) => (
-								<circle
-									key={`v${i}`}
-									cx={v.x}
-									cy={v.y}
-									r={2 / zoomLevel}
-									fill={`hsl(${modulate(i, [0, vertices.length - 1], [120, 200])}, 100%, 50%)`}
-									stroke="black"
-									strokeWidth={1 / zoomLevel}
-								/>
-							))}
-						{showClosestPointOnOutline && dist < 150 && (
-							<line
-								x1={nearestPointOnShape.x}
-								y1={nearestPointOnShape.y}
-								x2={pointInShapeSpace.x}
-								y2={pointInShapeSpace.y}
-								opacity={1 - dist / 150}
-								stroke={hitInside ? 'goldenrod' : 'dodgerblue'}
-								strokeWidth={2 / zoomLevel}
-							/>
-						)}
-					</g>
-				)
-			})}
-		</svg>
-	)
-})
-
-function GeometryStroke({ geometry }: { geometry: Geometry2d }) {
-	if (geometry instanceof Group2d) {
-		return (
-			<g stroke={geometry.debugColor}>
-				{[...geometry.children, ...geometry.ignoredChildren].map((child, i) => (
-					<GeometryStroke geometry={child} key={i} />
-				))}
-			</g>
-		)
-	}
-
-	return <path d={geometry.toSimpleSvgPath()} stroke={geometry.debugColor} />
-}