@hyperframes/studio 0.6.0 → 0.6.1

package/src/components/editor/domEditOverlayGeometry.ts

@@ -0,0 +1,211 @@
+import { type DomEditSelection, findElementForSelection } from "./domEditing";
+
+export interface OverlayRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  editScaleX: number;
+  editScaleY: number;
+}
+
+export interface GroupOverlayItem {
+  key: string;
+  selection: DomEditSelection;
+  element: HTMLElement;
+  rect: OverlayRect;
+}
+
+export type ResolvedElementRef = {
+  current: { key: string; element: HTMLElement } | null;
+};
+
+export function isElementVisibleForOverlay(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return true;
+  let current: HTMLElement | null = el;
+  while (current) {
+    const computed = win.getComputedStyle(current);
+    if (computed.display === "none" || computed.visibility === "hidden") return false;
+    const opacity = Number.parseFloat(computed.opacity);
+    if (Number.isFinite(opacity) && opacity <= 0.01) return false;
+    current = current.parentElement;
+  }
+  return true;
+}
+
+function readPositiveDimension(value: string | null): number | null {
+  if (!value) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function findSourceBoundary(element: HTMLElement): HTMLElement | null {
+  let current: HTMLElement | null = element;
+  while (current) {
+    if (
+      current.hasAttribute("data-composition-file") ||
+      current.hasAttribute("data-composition-src")
+    ) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
+export function resolveDomEditCoordinateScale(input: {
+  rootScaleX: number;
+  rootScaleY: number;
+  sourceRectWidth?: number;
+  sourceRectHeight?: number;
+  sourceWidth?: number | null;
+  sourceHeight?: number | null;
+}): { scaleX: number; scaleY: number } {
+  const rootScaleX = input.rootScaleX > 0 ? input.rootScaleX : 1;
+  const rootScaleY = input.rootScaleY > 0 ? input.rootScaleY : 1;
+  const sourceScaleX =
+    input.sourceRectWidth && input.sourceRectWidth > 0 && input.sourceWidth && input.sourceWidth > 0
+      ? (input.sourceRectWidth * rootScaleX) / input.sourceWidth
+      : rootScaleX;
+  const sourceScaleY =
+    input.sourceRectHeight &&
+    input.sourceRectHeight > 0 &&
+    input.sourceHeight &&
+    input.sourceHeight > 0
+      ? (input.sourceRectHeight * rootScaleY) / input.sourceHeight
+      : rootScaleY;
+  return {
+    scaleX: sourceScaleX > 0 ? sourceScaleX : rootScaleX,
+    scaleY: sourceScaleY > 0 ? sourceScaleY : rootScaleY,
+  };
+}
+
+export function toOverlayRect(
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+  element: HTMLElement,
+): OverlayRect | null {
+  const iframeRect = iframe.getBoundingClientRect();
+  const overlayRect = overlayEl.getBoundingClientRect();
+  const doc = iframe.contentDocument;
+  const root =
+    doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
+  const rootRect = root?.getBoundingClientRect();
+  const rootWidth = rootRect?.width;
+  const rootHeight = rootRect?.height;
+  if (!rootWidth || !rootHeight) return null;
+
+  const elementRect = element.getBoundingClientRect();
+  const rootScaleX = iframeRect.width / rootWidth;
+  const rootScaleY = iframeRect.height / rootHeight;
+  const sourceBoundary = findSourceBoundary(element);
+  const sourceBoundaryRect = sourceBoundary?.getBoundingClientRect();
+  const editScale = resolveDomEditCoordinateScale({
+    rootScaleX,
+    rootScaleY,
+    sourceRectWidth: sourceBoundaryRect?.width,
+    sourceRectHeight: sourceBoundaryRect?.height,
+    sourceWidth: readPositiveDimension(sourceBoundary?.getAttribute("data-width") ?? null),
+    sourceHeight: readPositiveDimension(sourceBoundary?.getAttribute("data-height") ?? null),
+  });
+
+  return {
+    left: iframeRect.left - overlayRect.left + (elementRect.left - rootRect.left) * rootScaleX,
+    top: iframeRect.top - overlayRect.top + (elementRect.top - rootRect.top) * rootScaleY,
+    width: elementRect.width * rootScaleX,
+    height: elementRect.height * rootScaleY,
+    editScaleX: editScale.scaleX,
+    editScaleY: editScale.scaleY,
+  };
+}
+
+const OVERLAY_RECT_EPSILON_PX = 0.5;
+
+export function rectsEqual(a: OverlayRect | null, b: OverlayRect | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    Math.abs(a.left - b.left) < OVERLAY_RECT_EPSILON_PX &&
+    Math.abs(a.top - b.top) < OVERLAY_RECT_EPSILON_PX &&
+    Math.abs(a.width - b.width) < OVERLAY_RECT_EPSILON_PX &&
+    Math.abs(a.height - b.height) < OVERLAY_RECT_EPSILON_PX &&
+    Math.abs(a.editScaleX - b.editScaleX) < 0.001 &&
+    Math.abs(a.editScaleY - b.editScaleY) < 0.001
+  );
+}
+
+export function groupOverlayItemsEqual(a: GroupOverlayItem[], b: GroupOverlayItem[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((item, index) => {
+    const other = b[index];
+    return Boolean(
+      other &&
+      item.key === other.key &&
+      item.element === other.element &&
+      item.selection === other.selection &&
+      rectsEqual(item.rect, other.rect),
+    );
+  });
+}
+
+export function resolveDomEditGroupOverlayRect(rects: OverlayRect[]): OverlayRect | null {
+  const first = rects[0];
+  if (!first) return null;
+
+  let left = first.left;
+  let top = first.top;
+  let right = first.left + first.width;
+  let bottom = first.top + first.height;
+
+  for (const rect of rects.slice(1)) {
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.left + rect.width);
+    bottom = Math.max(bottom, rect.top + rect.height);
+  }
+
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top,
+    editScaleX: 1,
+    editScaleY: 1,
+  };
+}
+
+export function filterNestedDomEditGroupItems<T extends { element: HTMLElement }>(items: T[]): T[] {
+  return items.filter(
+    (item) => !items.some((other) => other !== item && other.element.contains(item.element)),
+  );
+}
+
+export function selectionCacheKey(
+  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
+): string {
+  return [
+    selection.sourceFile ?? "",
+    selection.id ?? "",
+    selection.selector ?? "",
+    selection.selectorIndex ?? "",
+  ].join("|");
+}
+
+export function resolveElementForOverlay(
+  doc: Document,
+  sel: DomEditSelection,
+  activeCompositionPath: string | null,
+  cacheRef: ResolvedElementRef,
+): HTMLElement | null {
+  const key = selectionCacheKey(sel);
+  const cached = cacheRef.current;
+  if (cached?.key === key && cached.element.isConnected && cached.element.ownerDocument === doc) {
+    return cached.element;
+  }
+
+  const next = findElementForSelection(doc, sel, activeCompositionPath);
+  cacheRef.current = next ? { key, element: next } : null;
+  return next;
+}

package/src/components/editor/domEditOverlayGestures.ts

@@ -0,0 +1,138 @@
+import type { DomEditSelection } from "./domEditing";
+import type {
+  StudioBoxSizeSnapshot,
+  StudioPathOffsetSnapshot,
+  StudioRotationSnapshot,
+} from "./manualEdits";
+import type { ManualOffsetDragMember } from "./manualOffsetDrag";
+import type { GroupOverlayItem } from "./domEditOverlayGeometry";
+
+export type GestureKind = "drag" | "resize" | "rotate";
+
+export const BLOCKED_MOVE_THRESHOLD_PX = 4;
+export const MIN_RESIZE_EDGE_PX = 20;
+const ROTATION_COMMIT_EPSILON_DEGREES = 0.05;
+const ROTATION_SNAP_DEGREES = 15;
+
+export interface GestureState {
+  kind: GestureKind;
+  mode: "path-offset" | "box-size" | "rotation";
+  selection: DomEditSelection;
+  startX: number;
+  startY: number;
+  centerX: number;
+  centerY: number;
+  initialPathOffset: StudioPathOffsetSnapshot;
+  initialRotation: StudioRotationSnapshot;
+  initialBoxSize: StudioBoxSizeSnapshot;
+  pathOffsetMember?: ManualOffsetDragMember;
+  originLeft: number;
+  originTop: number;
+  originWidth: number;
+  originHeight: number;
+  actualWidth: number;
+  actualHeight: number;
+  actualRotation: number;
+  editScaleX: number;
+  editScaleY: number;
+  manualEditDragToken?: string;
+}
+
+export interface GroupGestureState {
+  startX: number;
+  startY: number;
+  originItems: GroupOverlayItem[];
+  members: ManualOffsetDragMember[];
+}
+
+export interface BlockedMoveState {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  notified: boolean;
+}
+
+export type FocusableDomEditOverlay = {
+  focus(options?: FocusOptions): void;
+};
+
+export function focusDomEditOverlayElement(element: FocusableDomEditOverlay | null): void {
+  element?.focus({ preventScroll: true });
+}
+
+export function resolveDomEditResizeGesture(input: {
+  originWidth: number;
+  originHeight: number;
+  actualWidth: number;
+  actualHeight: number;
+  scaleX: number;
+  scaleY: number;
+  dx: number;
+  dy: number;
+  uniform: boolean;
+}): { overlayWidth: number; overlayHeight: number; width: number; height: number } {
+  const scaleX = input.scaleX > 0 ? input.scaleX : 1;
+  const scaleY = input.scaleY > 0 ? input.scaleY : 1;
+
+  if (input.uniform) {
+    const deltaX = input.dx / scaleX;
+    const deltaY = input.dy / scaleY;
+    const delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
+    const side = Math.max(1, Math.max(input.actualWidth, input.actualHeight) + delta);
+    return {
+      overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX),
+      overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY),
+      width: side,
+      height: side,
+    };
+  }
+
+  return {
+    overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, input.originWidth + input.dx),
+    overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, input.originHeight + input.dy),
+    width: Math.max(1, input.actualWidth + input.dx / scaleX),
+    height: Math.max(1, input.actualHeight + input.dy / scaleY),
+  };
+}
+
+function pointerAngleDegrees(centerX: number, centerY: number, x: number, y: number): number {
+  return (Math.atan2(y - centerY, x - centerX) * 180) / Math.PI;
+}
+
+function normalizeAngleDelta(delta: number): number {
+  return ((((delta + 180) % 360) + 360) % 360) - 180;
+}
+
+function roundAngle(angle: number): number {
+  return Math.round(angle * 10) / 10;
+}
+
+export function resolveDomEditRotationGesture(input: {
+  centerX: number;
+  centerY: number;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  actualAngle: number;
+  snap: boolean;
+}): { angle: number } {
+  const startAngle = pointerAngleDegrees(input.centerX, input.centerY, input.startX, input.startY);
+  const currentAngle = pointerAngleDegrees(
+    input.centerX,
+    input.centerY,
+    input.currentX,
+    input.currentY,
+  );
+  const delta = normalizeAngleDelta(currentAngle - startAngle);
+  const angle = input.actualAngle + delta;
+  return {
+    angle: input.snap
+      ? Math.round(angle / ROTATION_SNAP_DEGREES) * ROTATION_SNAP_DEGREES
+      : roundAngle(angle),
+  };
+}
+
+export function hasDomEditRotationChanged(initialAngle: number, nextAngle: number): boolean {
+  return Math.abs(nextAngle - initialAngle) >= ROTATION_COMMIT_EPSILON_DEGREES;
+}

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -0,0 +1,155 @@
+/**
+ * Gesture-begin functions: startGroupDrag and startGesture.
+ * These are pure "start a new gesture" operations — no draft rect updates.
+ */
+import { type DomEditSelection } from "./domEditing";
+import {
+  createManualOffsetDragMember,
+  restoreManualOffsetDragMembers,
+  type ManualOffsetDragMember,
+} from "./manualOffsetDrag";
+import {
+  beginStudioManualEditGesture,
+  captureStudioBoxSize,
+  captureStudioPathOffset,
+  captureStudioRotation,
+  readStudioBoxSize,
+  readStudioRotation,
+} from "./manualEdits";
+import {
+  type OverlayRect,
+  filterNestedDomEditGroupItems,
+  selectionCacheKey,
+} from "./domEditOverlayGeometry";
+import { type GestureKind, type GestureState } from "./domEditOverlayGestures";
+import type { UseDomEditOverlayGesturesOptions } from "./useDomEditOverlayGestures";
+
+export function startGroupDrag(
+  e: React.PointerEvent<HTMLElement>,
+  opts: UseDomEditOverlayGesturesOptions,
+): boolean {
+  const items = opts.groupOverlayItemsRef.current;
+  if (items.length <= 1) return false;
+
+  const blockedSelection = items.find(
+    (item) => !item.selection.capabilities.canApplyManualOffset,
+  )?.selection;
+  if (blockedSelection) {
+    e.preventDefault();
+    e.stopPropagation();
+    opts.onBlockedMoveRef.current(blockedSelection);
+    return false;
+  }
+
+  opts.onManualDragStartRef.current?.();
+  const dragItems = filterNestedDomEditGroupItems(items);
+  const members: ManualOffsetDragMember[] = [];
+  for (const item of dragItems) {
+    const result = createManualOffsetDragMember({
+      key: item.key,
+      selection: item.selection,
+      element: item.element,
+      rect: item.rect,
+    });
+    if (!result.ok) {
+      restoreManualOffsetDragMembers(members);
+      e.preventDefault();
+      e.stopPropagation();
+      opts.onBlockedMoveRef.current(result.selection);
+      return false;
+    }
+    members.push(result.member);
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+  e.currentTarget.setPointerCapture(e.pointerId);
+  opts.rafPausedRef.current = true;
+  opts.groupGestureRef.current = {
+    startX: e.clientX,
+    startY: e.clientY,
+    originItems: items,
+    members,
+  };
+  return true;
+}
+
+export function startGesture(
+  kind: GestureKind,
+  e: React.PointerEvent<HTMLElement>,
+  opts: UseDomEditOverlayGesturesOptions,
+  options?: { selection?: DomEditSelection; rect?: OverlayRect | null },
+): boolean {
+  const sel = options?.selection ?? opts.selectionRef.current;
+  const rect = options?.rect ?? opts.overlayRectRef.current;
+  const box = opts.boxRef.current;
+  const overlayEl = opts.overlayRef.current;
+  if (!sel || !rect) return false;
+  if (kind !== "drag" && !box) return false;
+  const mode: GestureState["mode"] =
+    kind === "rotate" ? "rotation" : kind === "drag" ? "path-offset" : "box-size";
+  if (kind === "drag" && !sel.capabilities.canApplyManualOffset) return false;
+  if (kind === "resize" && !sel.capabilities.canApplyManualSize) return false;
+  if (kind === "rotate" && !sel.capabilities.canApplyManualRotation) return false;
+  if (kind === "resize" && (!Number.isFinite(rect.width) || !Number.isFinite(rect.height)))
+    return false;
+
+  const size = readStudioBoxSize(sel.element);
+  const rotation = readStudioRotation(sel.element);
+  const actualWidth = size.width > 0 ? size.width : rect.width / rect.editScaleX;
+  const actualHeight = size.height > 0 ? size.height : rect.height / rect.editScaleY;
+  let initialPathOffset = captureStudioPathOffset(sel.element);
+  let manualEditDragToken: string | undefined;
+  let pathOffsetMember: ManualOffsetDragMember | undefined;
+
+  if (kind === "drag") {
+    opts.onManualDragStartRef.current?.();
+    const result = createManualOffsetDragMember({
+      key: selectionCacheKey(sel),
+      selection: sel,
+      element: sel.element,
+      rect,
+    });
+    if (!result.ok) {
+      opts.onBlockedMoveRef.current(result.selection);
+      return false;
+    }
+    pathOffsetMember = result.member;
+    initialPathOffset = result.member.initialPathOffset;
+    manualEditDragToken = result.member.gestureToken;
+  } else {
+    manualEditDragToken = beginStudioManualEditGesture(sel.element);
+  }
+
+  const overlayBounds = overlayEl?.getBoundingClientRect();
+  const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
+  const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
+  e.preventDefault();
+  e.stopPropagation();
+  e.currentTarget.setPointerCapture(e.pointerId);
+  opts.rafPausedRef.current = true;
+  opts.gestureRef.current = {
+    kind,
+    mode,
+    selection: sel,
+    startX: e.clientX,
+    startY: e.clientY,
+    centerX,
+    centerY,
+    initialPathOffset,
+    initialRotation: captureStudioRotation(sel.element),
+    initialBoxSize: captureStudioBoxSize(sel.element),
+    pathOffsetMember,
+    originLeft: rect.left,
+    originTop: rect.top,
+    originWidth: rect.width,
+    originHeight: rect.height,
+    actualWidth,
+    actualHeight,
+    actualRotation: rotation.angle,
+    editScaleX: rect.editScaleX,
+    editScaleY: rect.editScaleY,
+    manualEditDragToken,
+  };
+  return true;
+}