@hyperframes/studio 0.7.105 → 0.7.107

package/src/components/editor/domEditOverlayTransform.ts

@@ -0,0 +1,88 @@
+/**
+ * One walk from an element up to its composition root, composing the transform
+ * it actually paints under.
+ *
+ * The overlay measures an element's angle in two places — the selection box and
+ * the crop frame — and they need different arithmetic: one works in DOMMatrix
+ * because it goes on to transform corner points, the other in plain 2D
+ * components because it only needs an angle and a scale. What they must never
+ * differ on is *which* transforms count and in what order, because when they
+ * disagree the chrome disagrees with itself: the selection box drawn at one
+ * angle and the crop outline at another, on the same element.
+ *
+ * So the walk lives here once and takes the arithmetic as a parameter. Adding
+ * an individual property CSS grew later — `translate`, `scale` — means adding
+ * one step here and one method to each algebra, rather than finding both walks
+ * and hoping.
+ */
+
+/** The composition's own root; the walk stops there rather than at the document. */
+const COMPOSITION_ROOT_ATTR = "data-composition-id";
+
+/**
+ * The arithmetic the walk needs, whatever the caller's matrix type is.
+ *
+ * `fromTransform` returns null for a transform the caller cannot use — a
+ * perspective matrix, say — which aborts the walk rather than composing a
+ * matrix that describes something other than what is painted.
+ */
+export interface PlanarTransformOps<M> {
+  identity(): M;
+  fromTransform(value: string): M | null;
+  fromRotate(degrees: number): M;
+  /** `outer` applied around `inner`, as an ancestor composes over a child. */
+  compose(outer: M, inner: M): M;
+}
+
+/**
+ * The planar rotation in the CSS `rotate` property, in degrees.
+ *
+ * Computes to `none`, an angle (`-22deg`), or an axis plus an angle
+ * (`0 0 1 -22deg`). Only a rotation about z stays in the overlay's plane; any
+ * other axis is 3D and reports 0, which leaves the caller on its axis-aligned
+ * fallback rather than drawing a box at a plausible-looking wrong angle.
+ */
+export function individualRotateDegrees(value: string | undefined): number {
+  if (!value || value === "none") return 0;
+  const parts = value.trim().split(/\s+/);
+  const angle = parts.at(-1);
+  if (!angle?.endsWith("deg")) return 0;
+  if (parts.length === 4) {
+    const [x, y, z] = parts;
+    if (Number(x) !== 0 || Number(y) !== 0 || Math.abs(Number(z)) !== 1) return 0;
+    const deg = Number.parseFloat(angle);
+    return Number.isFinite(deg) ? deg * Math.sign(Number(z)) : 0;
+  }
+  if (parts.length !== 1) return 0;
+  const deg = Number.parseFloat(angle);
+  return Number.isFinite(deg) ? deg : 0;
+}
+
+/**
+ * The element's transform composed with every ancestor's, up to the composition
+ * root.
+ *
+ * Within a node, CSS applies the individual properties before `transform`, so
+ * `rotate` composes on the left of it. Between nodes, an ancestor applies
+ * outside its child. Null means some node's transform was unusable and the
+ * caller should fall back rather than guess.
+ */
+export function composeElementTransform<M>(
+  element: HTMLElement,
+  ops: PlanarTransformOps<M>,
+  getStyle: (node: HTMLElement) => CSSStyleDeclaration | null,
+): M | null {
+  let acc = ops.identity();
+  for (let node: HTMLElement | null = element; node; node = node.parentElement) {
+    const style = getStyle(node);
+    if (!style) return null;
+    const transform = style.transform;
+    let own = transform && transform !== "none" ? ops.fromTransform(transform) : ops.identity();
+    if (!own) return null;
+    const spin = individualRotateDegrees(style.rotate);
+    if (spin !== 0) own = ops.compose(ops.fromRotate(spin), own);
+    acc = ops.compose(own, acc);
+    if (node.hasAttribute(COMPOSITION_ROOT_ATTR)) break;
+  }
+  return acc;
+}

package/src/components/editor/domEditing.ts

@@ -27,6 +27,7 @@ export {
 export {
   buildDefaultDomEditTextField,
   buildDomEditPatchTarget,
+  buildDomEditRichTextPatchOperation,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   collectDomEditLayerItems,

package/src/components/editor/domEditingLayers.ts

@@ -519,12 +519,13 @@ export function buildDomEditTextPatchOperation(
   value: string,
   childLocator?: DomEditChildLocator,
 ): PatchOperation {
-  return {
-    type: "text-content",
-    property: "text",
-    value,
-    ...childLocator,
-  };
+  return { type: "text-content", property: "text", value, ...childLocator };
+}
+
+/** Replace an element's contents with markup, for a change no per-child operation
+ * can express (a text layer added, removed or reordered). Sanitized at both ends. */
+export function buildDomEditRichTextPatchOperation(value: string): PatchOperation {
+  return { type: "rich-text", property: "", value };
 }
 
 // ─── Non-editable reason ─────────────────────────────────────────────────────