Canvas & Preview Integration

import { openComposition, createIframePreviewAdapter } from "@hyperframes/sdk";

// Assume `compositionHtml` is the composition's source HTML string.
const iframe = document.querySelector<HTMLIFrameElement>("#composition-frame")!;

// Build the adapter first so you can pass it to openComposition.
// The dispatch callback is called by commitPreview() after a drag completes.
const preview = createIframePreviewAdapter(iframe, (op) => {
  comp.dispatch(op);
});

const comp = await openComposition(compositionHtml, { preview });

const detach = preview.attachSync(comp);

// later, when the editor unmounts or swaps compositions:
detach();

iframe.addEventListener("load", () => {
  const frameDocument = iframe.contentDocument;
  if (!frameDocument) return;

  // Events inside an iframe do not bubble to the outer <iframe> element.
  frameDocument.addEventListener("click", (event) => {
    const hit = preview.elementAtPoint(event.clientX, event.clientY);
    if (hit) {
      // hit.id  — the data-hf-id value
      // hit.tag — the lowercased tag name (e.g. "div", "img", "video")
      preview.select([hit.id]);
    }
  });
});

import { resolveNearestHfElement } from "@hyperframes/sdk";

// Inside the iframe's own document context:
iframeDoc.addEventListener("click", (e) => {
  const result = resolveNearestHfElement(
    e.target as Element | null,
    (el) => {
      // Return false to treat this element as invisible and continue the walk.
      const style = el.ownerDocument.defaultView?.getComputedStyle(el);
      return style ? parseFloat(style.opacity) !== 0 : true;
    },
  );
  if (result) {
    // result.id, result.tag
  }
});

const wrapper = document.querySelector<HTMLElement>("#composition-wrapper")!;

/**
 * Host-page pointer coordinates → the iframe document's own client space, which is what
 * the paint query samples against. The iframe renders at the composition's native size and is
 * CSS-scaled to fit, so the on-screen scale has to be divided out — skip this and you
 * sample the wrong pixel, and pass-through toggles over the wrong regions.
 */
function toCompositionPoint(clientX: number, clientY: number) {
  const rect = iframe.getBoundingClientRect();
  if (!rect.width || !rect.height) return null;
  const scaleX = rect.width / compositionNativeWidth;
  const scaleY = rect.height / compositionNativeHeight;
  if (!scaleX || !scaleY) return null;
  return { x: (clientX - rect.left) / scaleX, y: (clientY - rect.top) / scaleY };
}

function updatePassThrough(clientX: number, clientY: number, altKey: boolean) {
  const point = toCompositionPoint(clientX, clientY);
  // Alt is the escape hatch for grabbing the composition itself in an empty region.
  // Every uncertain case — no point, still loading, adapter without the method — is
  // falsy here, so the composition stays clickable rather than vanishing.
  const passThrough =
    !!point && !altKey && !!preview.isProvablyEmptyAt?.(point.x, point.y);
  wrapper.style.pointerEvents = passThrough ? "none" : "";
}

let dragging = false;
let startX = 0;
let startY = 0;
let targetId: string | null = null;

iframe.addEventListener("load", () => {
  const frameDocument = iframe.contentDocument;
  if (!frameDocument) return;

  frameDocument.addEventListener("pointerdown", (event) => {
    const hit = preview.elementAtPoint(event.clientX, event.clientY);
    if (!hit) return;

    dragging = true;
    targetId = hit.id;
    startX = event.clientX;
    startY = event.clientY;
    // The target comes from the iframe's realm, so `instanceof Element` against
    // this window's constructor is always false and capture would be skipped —
    // then a pointer leaving the frame loses `pointerup` and drag state sticks.
    if (event.target && "setPointerCapture" in event.target) {
      (event.target as Element).setPointerCapture(event.pointerId);
    }
  });

  frameDocument.addEventListener("pointermove", (event) => {
    if (!dragging || !targetId) return;
    preview.applyDraft(targetId, {
      dx: event.clientX - startX,
      dy: event.clientY - startY,
    });
  });

  frameDocument.addEventListener("pointerup", () => {
    if (!dragging || !targetId) return;
    preview.commitPreview();
    dragging = false;
    targetId = null;
  });

  frameDocument.addEventListener("pointercancel", () => {
    preview.cancelPreview();
    dragging = false;
    targetId = null;
  });
});

// Replace selection
preview.select(["hf-title"]);

// Extend selection (e.g. shift-click)
preview.select(["hf-logo"], { additive: true });

// Clear selection
preview.select([]);

const comp = await openComposition(templateHtml, {
  preview,
  overrides: existingOverrides,
  history: false,
});