tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/dist-esm/lib/canvas/TldrawScribble.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawScribble.tsx"],
-  "sourcesContent": ["import { EASINGS, TLScribbleProps, getSvgPathFromPoints } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { getStroke } from '../shapes/shared/freehand/getStroke'\n\n/** @public @react */\nexport function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\tconst stroke = getStroke(scribble.points, {\n\t\tsize: scribble.size / zoom,\n\t\tstart: { taper: scribble.taper, easing: EASINGS.linear },\n\t\tlast: scribble.state === 'stopping',\n\t\tsimulatePressure: false,\n\t\tstreamline: 0.32,\n\t})\n\n\tlet d: string\n\n\tif (stroke.length < 4) {\n\t\t// the stroke will be 3 points as a sort of shrugging fail state, so let's draw a dot instead\n\t\tconst r = scribble.size / zoom / 2\n\t\tconst { x, y } = scribble.points[scribble.points.length - 1]\n\t\td = `M ${x - r},${y} a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 ${-r * 2},0`\n\t} else {\n\t\t// If we do have a stroke, then draw the stroke path\n\t\td = getSvgPathFromPoints(stroke)\n\t}\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={d}\n\t\t\t\tfill={color ?? `var(--tl-color-${scribble.color})`}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AA8BG;AA9BH,SAAS,SAA0B,4BAA4B;AAC/D,OAAO,gBAAgB;AACvB,SAAS,iBAAiB;AAGnB,SAAS,eAAe,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC9F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,QAAM,SAAS,UAAU,SAAS,QAAQ;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,EAAE,OAAO,SAAS,OAAO,QAAQ,QAAQ,OAAO;AAAA,IACvD,MAAM,SAAS,UAAU;AAAA,IACzB,kBAAkB;AAAA,IAClB,YAAY;AAAA,EACb,CAAC;AAED,MAAI;AAEJ,MAAI,OAAO,SAAS,GAAG;AAEtB,UAAM,IAAI,SAAS,OAAO,OAAO;AACjC,UAAM,EAAE,GAAG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,SAAS,CAAC;AAC3D,QAAI,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AAAA,EAC7E,OAAO;AAEN,QAAI,qBAAqB,MAAM;AAAA,EAChC;AAEA,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,MAAM,SAAS,kBAAkB,SAAS,KAAK;AAAA,MAC/C,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
+  "sourcesContent": ["import { EASINGS, TLScribbleProps, getSvgPathFromPoints } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { getStroke } from '../shapes/shared/freehand/getStroke'\n\n/** @public @react */\nexport function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\tconst stroke = getStroke(scribble.points, {\n\t\tsize: scribble.size / zoom,\n\t\tstart: { taper: scribble.taper, easing: EASINGS.linear },\n\t\tlast: scribble.state === 'stopping',\n\t\tsimulatePressure: false,\n\t\tstreamline: 0.32,\n\t})\n\n\tlet d: string\n\n\tif (stroke.length < 4) {\n\t\t// the stroke will be 3 points as a sort of shrugging fail state, so let's draw a dot instead\n\t\tconst r = scribble.size / zoom / 2\n\t\tconst { x, y } = scribble.points[scribble.points.length - 1]\n\t\td = `M ${x - r},${y} a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 ${-r * 2},0`\n\t} else {\n\t\t// If we do have a stroke, then draw the stroke path\n\t\td = getSvgPathFromPoints(stroke)\n\t}\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={d}\n\t\t\t\tfill={color ?? `var(--color-${scribble.color})`}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AA8BG;AA9BH,SAAS,SAA0B,4BAA4B;AAC/D,OAAO,gBAAgB;AACvB,SAAS,iBAAiB;AAGnB,SAAS,eAAe,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC9F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,QAAM,SAAS,UAAU,SAAS,QAAQ;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,EAAE,OAAO,SAAS,OAAO,QAAQ,QAAQ,OAAO;AAAA,IACvD,MAAM,SAAS,UAAU;AAAA,IACzB,kBAAkB;AAAA,IAClB,YAAY;AAAA,EACb,CAAC;AAED,MAAI;AAEJ,MAAI,OAAO,SAAS,GAAG;AAEtB,UAAM,IAAI,SAAS,OAAO,OAAO;AACjC,UAAM,EAAE,GAAG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,SAAS,CAAC;AAC3D,QAAI,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AAAA,EAC7E,OAAO;AAEN,QAAI,qBAAqB,MAAM;AAAA,EAChC;AAEA,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,MAAM,SAAS,eAAe,SAAS,KAAK;AAAA,MAC5C,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
   "names": []
 }

package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs

@@ -111,285 +111,277 @@ const TldrawSelectionForeground = track(function TldrawSelectionForeground2({
   }
   const textHandleHeight = Math.min(24 / zoom, height - targetSizeY * 3);
   const showTextResizeHandles = shouldDisplayControls && isCoarsePointer && onlyShape && editor.isShapeOfType(onlyShape, "text") && textHandleHeight * zoom >= 4;
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "tl-overlays__item tl-selection__fg",
-      "data-testid": "selection-foreground",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxs("g", { ref: rSvg, children: [
-        shouldDisplayBox && /* @__PURE__ */ jsx(
-          "rect",
-          {
-            className: "tl-selection__fg__outline",
-            width: toDomPrecision(width),
-            height: toDomPrecision(height)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RotateCornerHandle,
-          {
-            "data-testid": "selection.rotate.top-left",
-            cx: 0,
-            cy: 0,
-            targetSize,
-            corner: "top_left_rotate",
-            cursor: isDefaultCursor ? getCursor("nwse-rotate", rotation) : void 0,
-            isHidden: hideRotateCornerHandles
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RotateCornerHandle,
-          {
-            "data-testid": "selection.rotate.top-right",
-            cx: width + targetSize * 3,
-            cy: 0,
-            targetSize,
-            corner: "top_right_rotate",
-            cursor: isDefaultCursor ? getCursor("nesw-rotate", rotation) : void 0,
-            isHidden: hideRotateCornerHandles
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RotateCornerHandle,
-          {
-            "data-testid": "selection.rotate.bottom-left",
-            cx: 0,
-            cy: height + targetSize * 3,
-            targetSize,
-            corner: "bottom_left_rotate",
-            cursor: isDefaultCursor ? getCursor("swne-rotate", rotation) : void 0,
-            isHidden: hideRotateCornerHandles
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RotateCornerHandle,
-          {
-            "data-testid": "selection.rotate.bottom-right",
-            cx: width + targetSize * 3,
-            cy: height + targetSize * 3,
-            targetSize,
-            corner: "bottom_right_rotate",
-            cursor: isDefaultCursor ? getCursor("senw-rotate", rotation) : void 0,
-            isHidden: hideRotateCornerHandles
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MobileRotateHandle,
-          {
-            "data-testid": "selection.rotate.mobile",
-            cx: isSmallX ? -targetSize * 1.5 : width / 2,
-            cy: isSmallX ? height / 2 : -targetSize * 1.5,
-            size,
-            isHidden: hideMobileRotateHandle
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideVerticalEdgeTargets,
-            dataTestId: "selection.resize.top",
-            ariaLabel: msg("handle.resize-top"),
-            x: 0,
-            y: toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY)),
-            width: toDomPrecision(width),
-            height: toDomPrecision(Math.max(1, targetSizeY * 2)),
-            cursor: isDefaultCursor ? getCursor("ns-resize", rotation) : void 0,
-            events: topEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideHorizontalEdgeTargets,
-            dataTestId: "selection.resize.right",
-            ariaLabel: msg("handle.resize-right"),
-            x: toDomPrecision(width - (isSmallX ? 0 : targetSizeX)),
-            y: 0,
-            height: toDomPrecision(height),
-            width: toDomPrecision(Math.max(1, targetSizeX * 2)),
-            cursor: isDefaultCursor ? getCursor("ew-resize", rotation) : void 0,
-            events: rightEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideVerticalEdgeTargets,
-            dataTestId: "selection.resize.bottom",
-            ariaLabel: msg("handle.resize-bottom"),
-            x: 0,
-            y: toDomPrecision(height - (isSmallY ? 0 : targetSizeY)),
-            width: toDomPrecision(width),
-            height: toDomPrecision(Math.max(1, targetSizeY * 2)),
-            cursor: isDefaultCursor ? getCursor("ns-resize", rotation) : void 0,
-            events: bottomEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideHorizontalEdgeTargets,
-            dataTestId: "selection.resize.left",
-            ariaLabel: msg("handle.resize-left"),
-            x: toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX)),
-            y: 0,
-            height: toDomPrecision(height),
-            width: toDomPrecision(Math.max(1, targetSizeX * 2)),
-            cursor: isDefaultCursor ? getCursor("ew-resize", rotation) : void 0,
-            events: leftEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideTopLeftCorner,
-            dataTestId: "selection.target.top-left",
-            ariaLabel: msg("handle.resize-top-left"),
-            x: toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX * 1.5)),
-            y: toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5)),
-            width: toDomPrecision(targetSizeX * 3),
-            height: toDomPrecision(targetSizeY * 3),
-            cursor: isDefaultCursor ? getCursor("nwse-resize", rotation) : void 0,
-            events: topLeftEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideTopRightCorner,
-            dataTestId: "selection.target.top-right",
-            ariaLabel: msg("handle.resize-top-right"),
-            x: toDomPrecision(width - (isSmallX ? 0 : targetSizeX * 1.5)),
-            y: toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5)),
-            width: toDomPrecision(targetSizeX * 3),
-            height: toDomPrecision(targetSizeY * 3),
-            cursor: isDefaultCursor ? getCursor("nesw-resize", rotation) : void 0,
-            events: topRightEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideBottomRightCorner,
-            dataTestId: "selection.target.bottom-right",
-            ariaLabel: msg("handle.resize-bottom-right"),
-            x: toDomPrecision(width - (isSmallX ? targetSizeX : targetSizeX * 1.5)),
-            y: toDomPrecision(height - (isSmallY ? targetSizeY : targetSizeY * 1.5)),
-            width: toDomPrecision(targetSizeX * 3),
-            height: toDomPrecision(targetSizeY * 3),
-            cursor: isDefaultCursor ? getCursor("nwse-resize", rotation) : void 0,
-            events: bottomRightEvents
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ResizeHandle,
-          {
-            hide: hideBottomLeftCorner,
-            dataTestId: "selection.target.bottom-left",
-            ariaLabel: msg("handle.resize-bottom-left"),
-            x: toDomPrecision(0 - (isSmallX ? targetSizeX * 3 : targetSizeX * 1.5)),
-            y: toDomPrecision(height - (isSmallY ? 0 : targetSizeY * 1.5)),
-            width: toDomPrecision(targetSizeX * 3),
-            height: toDomPrecision(targetSizeY * 3),
-            cursor: isDefaultCursor ? getCursor("nesw-resize", rotation) : void 0,
-            events: bottomLeftEvents
-          }
-        ),
-        showResizeHandles && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-testid": "selection.resize.top-left",
-              className: classNames("tl-corner-handle", {
-                "tl-hidden": hideTopLeftCorner
-              }),
-              x: toDomPrecision(0 - size / 2),
-              y: toDomPrecision(0 - size / 2),
-              width: toDomPrecision(size),
-              height: toDomPrecision(size)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-testid": "selection.resize.top-right",
-              className: classNames("tl-corner-handle", {
-                "tl-hidden": hideTopRightCorner
-              }),
-              x: toDomPrecision(width - size / 2),
-              y: toDomPrecision(0 - size / 2),
-              width: toDomPrecision(size),
-              height: toDomPrecision(size)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-testid": "selection.resize.bottom-right",
-              className: classNames("tl-corner-handle", {
-                "tl-hidden": hideBottomRightCorner
-              }),
-              x: toDomPrecision(width - size / 2),
-              y: toDomPrecision(height - size / 2),
-              width: toDomPrecision(size),
-              height: toDomPrecision(size)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-testid": "selection.resize.bottom-left",
-              className: classNames("tl-corner-handle", {
-                "tl-hidden": hideBottomLeftCorner
-              }),
-              x: toDomPrecision(0 - size / 2),
-              y: toDomPrecision(height - size / 2),
-              width: toDomPrecision(size),
-              height: toDomPrecision(size)
-            }
-          )
-        ] }),
-        showTextResizeHandles && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-testid": "selection.text-resize.left.handle",
-              className: "tl-text-handle",
-              x: toDomPrecision(0 - size / 4),
-              y: toDomPrecision(height / 2 - textHandleHeight / 2),
-              rx: size / 4,
-              width: toDomPrecision(size / 2),
-              height: toDomPrecision(textHandleHeight)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-testid": "selection.text-resize.right.handle",
-              className: "tl-text-handle",
-              rx: size / 4,
-              x: toDomPrecision(width - size / 4),
-              y: toDomPrecision(height / 2 - textHandleHeight / 2),
-              width: toDomPrecision(size / 2),
-              height: toDomPrecision(textHandleHeight)
-            }
-          )
-        ] }),
-        showCropHandles && /* @__PURE__ */ jsx(
-          TldrawCropHandles,
-          {
-            ...{
-              size,
-              width,
-              height,
-              hideAlternateHandles: hideAlternateCropHandles
-            }
-          }
-        )
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx("svg", { className: "tl-overlays__item tl-selection__fg", "data-testid": "selection-foreground", children: /* @__PURE__ */ jsxs("g", { ref: rSvg, children: [
+    shouldDisplayBox && /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: "tl-selection__fg__outline",
+        width: toDomPrecision(width),
+        height: toDomPrecision(height)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RotateCornerHandle,
+      {
+        "data-testid": "selection.rotate.top-left",
+        cx: 0,
+        cy: 0,
+        targetSize,
+        corner: "top_left_rotate",
+        cursor: isDefaultCursor ? getCursor("nwse-rotate", rotation) : void 0,
+        isHidden: hideRotateCornerHandles
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RotateCornerHandle,
+      {
+        "data-testid": "selection.rotate.top-right",
+        cx: width + targetSize * 3,
+        cy: 0,
+        targetSize,
+        corner: "top_right_rotate",
+        cursor: isDefaultCursor ? getCursor("nesw-rotate", rotation) : void 0,
+        isHidden: hideRotateCornerHandles
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RotateCornerHandle,
+      {
+        "data-testid": "selection.rotate.bottom-left",
+        cx: 0,
+        cy: height + targetSize * 3,
+        targetSize,
+        corner: "bottom_left_rotate",
+        cursor: isDefaultCursor ? getCursor("swne-rotate", rotation) : void 0,
+        isHidden: hideRotateCornerHandles
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RotateCornerHandle,
+      {
+        "data-testid": "selection.rotate.bottom-right",
+        cx: width + targetSize * 3,
+        cy: height + targetSize * 3,
+        targetSize,
+        corner: "bottom_right_rotate",
+        cursor: isDefaultCursor ? getCursor("senw-rotate", rotation) : void 0,
+        isHidden: hideRotateCornerHandles
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileRotateHandle,
+      {
+        "data-testid": "selection.rotate.mobile",
+        cx: isSmallX ? -targetSize * 1.5 : width / 2,
+        cy: isSmallX ? height / 2 : -targetSize * 1.5,
+        size,
+        isHidden: hideMobileRotateHandle
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideVerticalEdgeTargets,
+        dataTestId: "selection.resize.top",
+        ariaLabel: msg("handle.resize-top"),
+        x: 0,
+        y: toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY)),
+        width: toDomPrecision(width),
+        height: toDomPrecision(Math.max(1, targetSizeY * 2)),
+        cursor: isDefaultCursor ? getCursor("ns-resize", rotation) : void 0,
+        events: topEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideHorizontalEdgeTargets,
+        dataTestId: "selection.resize.right",
+        ariaLabel: msg("handle.resize-right"),
+        x: toDomPrecision(width - (isSmallX ? 0 : targetSizeX)),
+        y: 0,
+        height: toDomPrecision(height),
+        width: toDomPrecision(Math.max(1, targetSizeX * 2)),
+        cursor: isDefaultCursor ? getCursor("ew-resize", rotation) : void 0,
+        events: rightEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideVerticalEdgeTargets,
+        dataTestId: "selection.resize.bottom",
+        ariaLabel: msg("handle.resize-bottom"),
+        x: 0,
+        y: toDomPrecision(height - (isSmallY ? 0 : targetSizeY)),
+        width: toDomPrecision(width),
+        height: toDomPrecision(Math.max(1, targetSizeY * 2)),
+        cursor: isDefaultCursor ? getCursor("ns-resize", rotation) : void 0,
+        events: bottomEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideHorizontalEdgeTargets,
+        dataTestId: "selection.resize.left",
+        ariaLabel: msg("handle.resize-left"),
+        x: toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX)),
+        y: 0,
+        height: toDomPrecision(height),
+        width: toDomPrecision(Math.max(1, targetSizeX * 2)),
+        cursor: isDefaultCursor ? getCursor("ew-resize", rotation) : void 0,
+        events: leftEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideTopLeftCorner,
+        dataTestId: "selection.target.top-left",
+        ariaLabel: msg("handle.resize-top-left"),
+        x: toDomPrecision(0 - (isSmallX ? targetSizeX * 2 : targetSizeX * 1.5)),
+        y: toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5)),
+        width: toDomPrecision(targetSizeX * 3),
+        height: toDomPrecision(targetSizeY * 3),
+        cursor: isDefaultCursor ? getCursor("nwse-resize", rotation) : void 0,
+        events: topLeftEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideTopRightCorner,
+        dataTestId: "selection.target.top-right",
+        ariaLabel: msg("handle.resize-top-right"),
+        x: toDomPrecision(width - (isSmallX ? 0 : targetSizeX * 1.5)),
+        y: toDomPrecision(0 - (isSmallY ? targetSizeY * 2 : targetSizeY * 1.5)),
+        width: toDomPrecision(targetSizeX * 3),
+        height: toDomPrecision(targetSizeY * 3),
+        cursor: isDefaultCursor ? getCursor("nesw-resize", rotation) : void 0,
+        events: topRightEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideBottomRightCorner,
+        dataTestId: "selection.target.bottom-right",
+        ariaLabel: msg("handle.resize-bottom-right"),
+        x: toDomPrecision(width - (isSmallX ? targetSizeX : targetSizeX * 1.5)),
+        y: toDomPrecision(height - (isSmallY ? targetSizeY : targetSizeY * 1.5)),
+        width: toDomPrecision(targetSizeX * 3),
+        height: toDomPrecision(targetSizeY * 3),
+        cursor: isDefaultCursor ? getCursor("nwse-resize", rotation) : void 0,
+        events: bottomRightEvents
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeHandle,
+      {
+        hide: hideBottomLeftCorner,
+        dataTestId: "selection.target.bottom-left",
+        ariaLabel: msg("handle.resize-bottom-left"),
+        x: toDomPrecision(0 - (isSmallX ? targetSizeX * 3 : targetSizeX * 1.5)),
+        y: toDomPrecision(height - (isSmallY ? 0 : targetSizeY * 1.5)),
+        width: toDomPrecision(targetSizeX * 3),
+        height: toDomPrecision(targetSizeY * 3),
+        cursor: isDefaultCursor ? getCursor("nesw-resize", rotation) : void 0,
+        events: bottomLeftEvents
+      }
+    ),
+    showResizeHandles && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "selection.resize.top-left",
+          className: classNames("tl-corner-handle", {
+            "tl-hidden": hideTopLeftCorner
+          }),
+          x: toDomPrecision(0 - size / 2),
+          y: toDomPrecision(0 - size / 2),
+          width: toDomPrecision(size),
+          height: toDomPrecision(size)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "selection.resize.top-right",
+          className: classNames("tl-corner-handle", {
+            "tl-hidden": hideTopRightCorner
+          }),
+          x: toDomPrecision(width - size / 2),
+          y: toDomPrecision(0 - size / 2),
+          width: toDomPrecision(size),
+          height: toDomPrecision(size)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "selection.resize.bottom-right",
+          className: classNames("tl-corner-handle", {
+            "tl-hidden": hideBottomRightCorner
+          }),
+          x: toDomPrecision(width - size / 2),
+          y: toDomPrecision(height - size / 2),
+          width: toDomPrecision(size),
+          height: toDomPrecision(size)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "selection.resize.bottom-left",
+          className: classNames("tl-corner-handle", {
+            "tl-hidden": hideBottomLeftCorner
+          }),
+          x: toDomPrecision(0 - size / 2),
+          y: toDomPrecision(height - size / 2),
+          width: toDomPrecision(size),
+          height: toDomPrecision(size)
+        }
+      )
+    ] }),
+    showTextResizeHandles && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "selection.text-resize.left.handle",
+          className: "tl-text-handle",
+          x: toDomPrecision(0 - size / 4),
+          y: toDomPrecision(height / 2 - textHandleHeight / 2),
+          rx: size / 4,
+          width: toDomPrecision(size / 2),
+          height: toDomPrecision(textHandleHeight)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "selection.text-resize.right.handle",
+          className: "tl-text-handle",
+          rx: size / 4,
+          x: toDomPrecision(width - size / 4),
+          y: toDomPrecision(height / 2 - textHandleHeight / 2),
+          width: toDomPrecision(size / 2),
+          height: toDomPrecision(textHandleHeight)
+        }
+      )
+    ] }),
+    showCropHandles && /* @__PURE__ */ jsx(
+      TldrawCropHandles,
+      {
+        ...{
+          size,
+          width,
+          height,
+          hideAlternateHandles: hideAlternateCropHandles
+        }
+      }
+    )
+  ] }) });
 });
 const ResizeHandle = function ResizeHandle2({
   hide,