tldraw 3.16.0-internal.a478398270c6 → 3.16.0-next.15f085081fd5

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

@@ -111,277 +111,285 @@ 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", 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",
+      "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
+            }
+          }
+        )
+      ] })
+    }
+  );
 });
 const ResizeHandle = function ResizeHandle2({
   hide,