@hyperframes/studio 0.5.0-alpha.13 → 0.5.0-alpha.15

package/src/components/editor/domEditing.ts

@@ -35,9 +35,13 @@ const CURATED_STYLE_PROPERTIES = [
 export interface DomEditCapabilities {
   canSelect: boolean;
   canEditStyles: boolean;
+  /** Directly editable authored left/top style fields. Canvas drag uses manual edits instead. */
   canMove: boolean;
+  /** Directly editable authored width/height style fields. Canvas resize uses manual edits instead. */
   canResize: boolean;
-  canDetachFromLayout: boolean;
+  canApplyManualOffset: boolean;
+  canApplyManualSize: boolean;
+  canApplyManualRotation: boolean;
   reasonIfDisabled?: string;
 }
 
@@ -119,54 +123,6 @@ function isIdentityTransform(value: string | undefined): boolean {
   return values.every((part, index) => Math.abs(part - identity[index]) < 0.0001);
 }
 
-function isClipClassName(className: string | undefined): boolean {
-  return Boolean(className?.split(/\s+/).includes("clip"));
-}
-
-function isInlineTextTag(tagName: string | undefined): boolean {
-  return Boolean(
-    tagName &&
-    ["a", "b", "em", "i", "small", "span", "strong", "sub", "sup"].includes(tagName.toLowerCase()),
-  );
-}
-
-function isBlockishTag(tagName: string | undefined): boolean {
-  return Boolean(
-    tagName &&
-    [
-      "article",
-      "aside",
-      "canvas",
-      "div",
-      "figure",
-      "footer",
-      "header",
-      "img",
-      "main",
-      "section",
-      "svg",
-      "video",
-    ].includes(tagName.toLowerCase()),
-  );
-}
-
-function isBlockishDisplay(display: string | undefined): boolean {
-  return Boolean(
-    display &&
-    [
-      "block",
-      "flex",
-      "flow-root",
-      "grid",
-      "inline-block",
-      "inline-flex",
-      "inline-grid",
-      "list-item",
-      "table",
-    ].includes(display),
-  );
-}
-
 function isTextBearingTag(tagName: string): boolean {
   return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
 }
@@ -196,16 +152,15 @@ function findClosestByAttribute(el: HTMLElement, attributeNames: string[]): HTML
   return null;
 }
 
-function getCompositionHost(el: HTMLElement): HTMLElement | null {
-  return findClosestByAttribute(el, ["data-composition-src", "data-composition-file"]);
-}
-
 function getSourceFileForElement(
   el: HTMLElement,
   activeCompositionPath: string | null,
 ): { sourceFile: string; compositionPath: string } {
+  const sourceHost = findClosestByAttribute(el, ["data-composition-file", "data-composition-src"]);
   const ownerRoot = findClosestByAttribute(el, ["data-composition-id"]);
   const sourceFile =
+    sourceHost?.getAttribute("data-composition-file") ??
+    sourceHost?.getAttribute("data-composition-src") ??
     ownerRoot?.getAttribute("data-composition-file") ??
     ownerRoot?.getAttribute("data-composition-src") ??
     activeCompositionPath ??
@@ -217,21 +172,28 @@ function getSourceFileForElement(
   };
 }
 
+function getPreferredClipAncestor(startEl: HTMLElement): HTMLElement | null {
+  let current: HTMLElement | null = startEl;
+  while (current) {
+    if (current.classList.contains("clip")) {
+      const isCompositionHost =
+        current.hasAttribute("data-composition-src") ||
+        current.hasAttribute("data-composition-file");
+      if (!isCompositionHost || current === startEl) return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
 function getSelectionCandidate(startEl: HTMLElement, options: DomEditContextOptions): HTMLElement {
   if (options.preferClipAncestor) {
-    const clipAncestor = startEl.closest(".clip");
-    if (isHtmlElement(clipAncestor)) {
+    const clipAncestor = getPreferredClipAncestor(startEl);
+    if (clipAncestor) {
       return clipAncestor;
     }
   }
 
-  if (!options.isMasterView) return startEl;
-
-  const compositionHost = getCompositionHost(startEl);
-  if (compositionHost && compositionHost !== startEl) {
-    return compositionHost;
-  }
-
   return startEl;
 }
 
@@ -442,7 +404,9 @@ export function resolveDomEditCapabilities(args: {
       canEditStyles: false,
       canMove: false,
       canResize: false,
-      canDetachFromLayout: false,
+      canApplyManualOffset: false,
+      canApplyManualSize: false,
+      canApplyManualRotation: false,
       reasonIfDisabled: "Studio could not resolve a stable patch target for this element.",
     };
   }
@@ -461,21 +425,13 @@ export function resolveDomEditCapabilities(args: {
     !hasTransformDrivenGeometry;
 
   const canResize = canMove && (width != null || height != null);
-  const isBlockishLayer =
-    args.isCompositionHost ||
-    isClipClassName(args.className) ||
-    isBlockishTag(args.tagName) ||
-    isBlockishDisplay(args.computedStyles.display);
-  const canDetachFromLayout =
-    !canMove &&
-    !hasTransformDrivenGeometry &&
-    isBlockishLayer &&
-    (!isInlineTextTag(args.tagName) || isClipClassName(args.className));
-  const reasonIfDisabled = !canMove
-    ? canDetachFromLayout
-      ? "This layer is controlled by layout."
-      : "Direct move/resize is limited to absolute or fixed elements with px geometry and no transform-driven layout."
-    : undefined;
+  const canApplyManualGeometry = !args.isCompositionHost;
+  const canApplyManualOffset = canApplyManualGeometry;
+  const canApplyManualSize = canApplyManualGeometry;
+  const canApplyManualRotation = canApplyManualGeometry;
+  const reasonIfDisabled = canApplyManualGeometry
+    ? undefined
+    : "Select an internal layer to transform it.";
 
   if (args.isCompositionHost && args.isMasterView) {
     return {
@@ -483,7 +439,9 @@ export function resolveDomEditCapabilities(args: {
       canEditStyles: false,
       canMove,
       canResize,
-      canDetachFromLayout,
+      canApplyManualOffset,
+      canApplyManualSize,
+      canApplyManualRotation,
       reasonIfDisabled,
     };
   }
@@ -493,7 +451,9 @@ export function resolveDomEditCapabilities(args: {
     canEditStyles: true,
     canMove,
     canResize,
-    canDetachFromLayout,
+    canApplyManualOffset,
+    canApplyManualSize,
+    canApplyManualRotation,
     reasonIfDisabled,
   };
 }
@@ -585,6 +545,49 @@ export function refreshDomEditSelection(
     : null;
 }
 
+export function getDomEditTargetKey(
+  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
+): string {
+  return [
+    selection.sourceFile || "index.html",
+    selection.id ?? "",
+    selection.selector ?? "",
+    selection.selectorIndex ?? "",
+  ].join("|");
+}
+
+function hasSupportedDirectEdit(capabilities: DomEditCapabilities): boolean {
+  return (
+    capabilities.canEditStyles ||
+    capabilities.canMove ||
+    capabilities.canResize ||
+    capabilities.canApplyManualOffset ||
+    capabilities.canApplyManualSize ||
+    capabilities.canApplyManualRotation
+  );
+}
+
+export function getDomEditNonEditableReason(
+  element: HTMLElement,
+  selection: DomEditSelection | null,
+): string | null {
+  if (!selection) {
+    return "No stable source target";
+  }
+
+  if (selection.element !== element) {
+    return selection.isCompositionHost
+      ? "Nested composition boundary"
+      : `Selection resolves to ${selection.label}`;
+  }
+
+  if (!hasSupportedDirectEdit(selection.capabilities)) {
+    return selection.capabilities.reasonIfDisabled ?? "No supported direct edits";
+  }
+
+  return null;
+}
+
 export function findElementForSelection(
   doc: Document,
   selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
@@ -624,38 +627,6 @@ export function findElementForSelection(
   return matches[0] ?? null;
 }
 
-export function buildDomEditMovePatchOperations(left: number, top: number): PatchOperation[] {
-  return [
-    { type: "inline-style", property: "left", value: `${Math.round(left)}px` },
-    { type: "inline-style", property: "top", value: `${Math.round(top)}px` },
-  ];
-}
-
-export function buildDomEditResizePatchOperations(width: number, height: number): PatchOperation[] {
-  return [
-    { type: "inline-style", property: "width", value: `${Math.round(width)}px` },
-    { type: "inline-style", property: "height", value: `${Math.round(height)}px` },
-  ];
-}
-
-export function buildDomEditDetachPatchOperations(rect: {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}): PatchOperation[] {
-  return [
-    { type: "inline-style", property: "position", value: "absolute" },
-    { type: "inline-style", property: "left", value: `${Math.round(rect.left)}px` },
-    { type: "inline-style", property: "top", value: `${Math.round(rect.top)}px` },
-    { type: "inline-style", property: "width", value: `${Math.round(rect.width)}px` },
-    { type: "inline-style", property: "height", value: `${Math.round(rect.height)}px` },
-    { type: "inline-style", property: "margin", value: "0" },
-    { type: "inline-style", property: "right", value: "auto" },
-    { type: "inline-style", property: "bottom", value: "auto" },
-  ];
-}
-
 export function buildDomEditStylePatchOperation(property: string, value: string): PatchOperation {
   return {
     type: "inline-style",
@@ -687,7 +658,7 @@ function formatTextFields(fields: DomEditTextField[]): string {
   return fields
     .map(
       (field) =>
-        `- key=${field.key}; tag=<${field.tagName}>; source=${field.source}; text="${field.value.replace(/"/g, '\\"')}"`,
+        `- key=${field.key}; tag=<${field.tagName}>; source=${field.source}; text=${JSON.stringify(field.value)}`,
     )
     .join("\n");
 }