refactor(studio): place the selection chrome from rect variables on one wrapper

Author: miguel-heygen

packages/studio/src/components/editor/DomEditCropHandles.tsx

@@ -15,6 +15,7 @@ import {
 } from "./domEditOverlayCrop";
 import { buildInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
 import { readCropFollowingResize } from "./cropResize";
+import { CHROME_HEIGHT, CHROME_LEFT, CHROME_TOP, CHROME_WIDTH } from "./domEditChromeRect";
 
 interface CropGestureState {
   edge: CropEdge | "move";
@@ -243,8 +244,8 @@ export function DomEditCropHandles({
       data-dom-edit-crop-frame="true"
       className="pointer-events-none absolute"
       style={{
-        left: frame.left,
-        top: frame.top,
+        left: `calc(${CHROME_LEFT} + ${CHROME_WIDTH} / 2 - ${frame.width / 2}px)`,
+        top: `calc(${CHROME_TOP} + ${CHROME_HEIGHT} / 2 - ${frame.height / 2}px)`,
         width: frame.width,
         height: frame.height,
         transform: frame.angleDeg !== 0 ? `rotate(${frame.angleDeg}deg)` : undefined,

packages/studio/src/components/editor/DomEditRotateHandle.tsx

@@ -1,5 +1,5 @@
 import type { PointerEvent as ReactPointerEvent } from "react";
-import type { OverlayRect } from "./domEditOverlayGeometry";
+import { CHROME_HEIGHT, CHROME_LEFT, CHROME_TOP, CHROME_WIDTH } from "./domEditChromeRect";
 
 /** Rotate handle below the selection: an attached circular-arrows icon chip
  *  (no connecting stem). Anchors to the crop outline when the element is
@@ -8,25 +8,20 @@ import type { OverlayRect } from "./domEditOverlayGeometry";
  *  (resolveDomEditRotationGesture), so the handle position doesn't affect the
  *  math. Sits 12px below the bbox, past the bottom crop handle's hit strip. */
 export function DomEditRotateHandle({
-  overlayRect,
   cropOutlineInsetPx,
   onStartRotate,
 }: {
-  overlayRect: OverlayRect;
   cropOutlineInsetPx?: { top: number; right: number; bottom: number; left: number };
   onStartRotate: (e: ReactPointerEvent<HTMLButtonElement>) => void;
 }) {
   const inset = cropOutlineInsetPx ?? { top: 0, right: 0, bottom: 0, left: 0 };
-  const visibleLeft = overlayRect.left + inset.left;
-  const visibleWidth = Math.max(0, overlayRect.width - inset.left - inset.right);
-  const visibleBottom = overlayRect.top + overlayRect.height - inset.bottom;
   return (
     <button
       type="button"
       className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
       style={{
-        left: visibleLeft + visibleWidth / 2,
-        top: visibleBottom + 12,
+        left: `calc(${CHROME_LEFT} + ${inset.left}px + max(0px, ${CHROME_WIDTH} - ${inset.left + inset.right}px) / 2)`,
+        top: `calc(${CHROME_TOP} + ${CHROME_HEIGHT} + ${12 - inset.bottom}px)`,
         width: 22,
         height: 22,
         transform: "translateX(-50%)",

packages/studio/src/components/editor/DomEditSelectionChrome.test.tsx

@@ -322,3 +322,79 @@ describe("DomEditSelectionChrome with body drag off", () => {
     act(() => root.unmount());
   });
 });
+
+describe("DomEditSelectionChrome rect variables", () => {
+  const rectA = { left: 40, top: 30, width: 200, height: 100, editScaleX: 1, editScaleY: 1 };
+  const rectB = { left: 75.5, top: 12, width: 120, height: 64, editScaleX: 1, editScaleY: 1 };
+
+  function renderAt(rect: typeof rectA) {
+    const element = document.createElement("div");
+    document.body.append(element);
+    const { selection, host, root } = selectionFixture(element, "#el", true);
+    act(() => {
+      root.render(
+        <DomEditSelectionChrome
+          selection={selection}
+          overlayRect={rect}
+          allowCanvasMovement
+          allowBodyDrag
+          boxRef={createRef()}
+          boxChromeClass=""
+          boxClipPath={undefined}
+          selectionKey="el"
+          groupSelectionCount={0}
+          gestures={{ startGesture: vi.fn() } as never}
+          onStyleCommit={vi.fn()}
+          onBoxClick={vi.fn()}
+        />,
+      );
+    });
+    const wrapper = host.firstElementChild as HTMLElement;
+    const handles = [
+      ...host.querySelectorAll<HTMLElement>('[aria-label="Rotate selection"], .h-4.w-4'),
+      host.querySelector<HTMLElement>("[data-dom-edit-crop-frame]")!,
+    ];
+    // Resolves a handle's position against the wrapper's variables, as the browser does.
+    const at = (value: string) => {
+      const expr = value
+        .replace(/var\((--[\w-]+)\)/g, (_, name) => wrapper.style.getPropertyValue(name))
+        .replace(/max\(/g, "Math.max(")
+        .replace(/calc\(/g, "(")
+        .replace(/px/g, "");
+      return Number(new Function(`return ${expr}`)());
+    };
+    const done = () => {
+      act(() => root.unmount());
+      host.remove();
+    };
+    return { handles, at, done };
+  }
+
+  it("moves every handle with the rect while their own styles stay the same", () => {
+    const a = renderAt(rectA);
+    const b = renderAt(rectB);
+    try {
+      expect(a.handles).toHaveLength(6);
+      const styleOf = (el: HTMLElement) => [el.style.left, el.style.top];
+      expect(b.handles.map(styleOf)).toEqual(a.handles.map(styleOf));
+      const places = (r: ReturnType<typeof renderAt>) =>
+        r.handles.map((el) => [r.at(el.style.left), r.at(el.style.top)]);
+      const dots = (r: typeof rectA) => [
+        [r.left - 8, r.top - 8],
+        [r.left + r.width - 8, r.top - 8],
+        [r.left - 8, r.top + r.height - 8],
+        [r.left + r.width - 8, r.top + r.height - 8],
+      ];
+      const expected = (r: typeof rectA) => [
+        [r.left + r.width / 2, r.top + r.height + 12],
+        ...dots(r),
+        [r.left, r.top],
+      ];
+      expect(places(a)).toEqual(expected(rectA));
+      expect(places(b)).toEqual(expected(rectB));
+    } finally {
+      a.done();
+      b.done();
+    }
+  });
+});

packages/studio/src/components/editor/DomEditSelectionChrome.tsx

@@ -11,6 +11,13 @@ import { DomEditCropHandles } from "./DomEditCropHandles";
 import { DomEditRotateHandle } from "./DomEditRotateHandle";
 import { resolveRotatedResizeCursor } from "./domEditResizeLocal";
 import { usePreviewReadOnly } from "./previewReadOnlyContext";
+import {
+  CHROME_HEIGHT,
+  CHROME_LEFT,
+  CHROME_TOP,
+  CHROME_WIDTH,
+  chromeRectVars,
+} from "./domEditChromeRect";
 
 // Corner resize handles, Canva-style: one per corner, diagonal cursors.
 // Corners scale about the element center; the translate keeps the center
@@ -32,7 +39,6 @@ const NO_CROP_INSET: CropInset = { top: 0, right: 0, bottom: 0, left: 0 };
 
 function resizeHandleStyle(
   def: (typeof RESIZE_HANDLE_DEFS)[number],
-  overlayRect: { left: number; top: number; width: number; height: number },
   cropInset?: CropInset,
 ): React.CSSProperties {
   const half = RESIZE_HANDLE_HIT_PX / 2;
@@ -44,12 +50,12 @@ function resizeHandleStyle(
   // overlap the dot circle at the corner.
   style.left =
     def.x === "left"
-      ? overlayRect.left + inset.left - half
-      : overlayRect.left + overlayRect.width - inset.right - half;
+      ? `calc(${CHROME_LEFT} + ${inset.left - half}px)`
+      : `calc(${CHROME_LEFT} + ${CHROME_WIDTH} - ${inset.right + half}px)`;
   style.top =
     def.y === "top"
-      ? overlayRect.top + inset.top - half
-      : overlayRect.top + overlayRect.height - inset.bottom - half;
+      ? `calc(${CHROME_TOP} + ${inset.top - half}px)`
+      : `calc(${CHROME_TOP} + ${CHROME_HEIGHT} - ${inset.bottom + half}px)`;
   return style;
 }
 
@@ -167,17 +173,16 @@ export function DomEditSelectionChrome({
   const canManipulate = allowCanvasMovement && !readOnly;
 
   return (
-    <>
+    <div className="contents" style={chromeRectVars(overlayRect)}>
       <div
         className="pointer-events-none absolute inset-0"
         style={{
-          transformOrigin: `${overlayRect.left + overlayRect.width / 2}px ${overlayRect.top + overlayRect.height / 2}px`,
+          transformOrigin: `calc(${CHROME_LEFT} + ${CHROME_WIDTH} / 2) calc(${CHROME_TOP} + ${CHROME_HEIGHT} / 2)`,
           transform: overlayRect.angle ? `rotate(${overlayRect.angle}deg)` : undefined,
         }}
       >
         {canManipulate && !editing && selection.capabilities.canApplyManualRotation && (
           <DomEditRotateHandle
-            overlayRect={overlayRect}
             cropOutlineInsetPx={cropOutlineInsetPx}
             onStartRotate={(e) => {
               e.stopPropagation();
@@ -247,7 +252,7 @@ export function DomEditSelectionChrome({
                 key={def.handle}
                 className="pointer-events-auto absolute flex h-4 w-4 items-center justify-center"
                 style={{
-                  ...resizeHandleStyle(def, overlayRect, cropOutlineInsetPx ?? undefined),
+                  ...resizeHandleStyle(def, cropOutlineInsetPx ?? undefined),
                   // Cursor rotates with the object: bucket the corner's base
                   // diagonal + element rotation into the 8 CSS resize cursors.
                   cursor: resolveRotatedResizeCursor(def.handle, overlayRect.angle ?? 0),
@@ -271,6 +276,6 @@ export function DomEditSelectionChrome({
           onStyleCommit={onStyleCommit}
         />
       )}
-    </>
+    </div>
   );
 }

packages/studio/src/components/editor/domEditChromeRect.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties } from "react";
+
+type Rect = { left: number; top: number; width: number; height: number };
+
+/** The selection chrome positions from these, so one style write on its wrapper moves all of it. */
+const VAR = {
+  left: "--hf-chrome-left",
+  top: "--hf-chrome-top",
+  width: "--hf-chrome-width",
+  height: "--hf-chrome-height",
+} as const;
+
+export const CHROME_LEFT = `var(${VAR.left})`;
+export const CHROME_TOP = `var(${VAR.top})`;
+export const CHROME_WIDTH = `var(${VAR.width})`;
+export const CHROME_HEIGHT = `var(${VAR.height})`;
+
+export function chromeRectVars(rect: Rect): CSSProperties {
+  return {
+    [VAR.left]: `${rect.left}px`,
+    [VAR.top]: `${rect.top}px`,
+    [VAR.width]: `${rect.width}px`,
+    [VAR.height]: `${rect.height}px`,
+  } as CSSProperties;
+}