tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

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,