keyframes 0.1.0__py3-none-any.whl

keyframes/static/editor/editor.js

@@ -0,0 +1,594 @@
+const deck = window.keyframes;
+const params = new URLSearchParams(location.search);
+const SNAP_PX = 6;
+const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+
+const state = {
+  on: false,
+  selection: [],
+  drag: null,
+  history: [],
+  future: [],
+  nudge: null,
+};
+
+const ui = {};
+
+function slide() {
+  return deck.current;
+}
+
+function section() {
+  return slide().querySelector(":scope > section");
+}
+
+function blocks() {
+  return [...section().querySelectorAll("[data-block]")];
+}
+
+function toSlide(e) {
+  const rect = section().getBoundingClientRect();
+  return { x: (e.clientX - rect.left) / deck.scale, y: (e.clientY - rect.top) / deck.scale };
+}
+
+function readGeom(el) {
+  if (el.dataset.x == null) pin(el);
+  const { x, y, w, h } = el.dataset;
+  return { x: Number(x), y: Number(y), w: Number(w), h: Number(h) };
+}
+
+function pin(el) {
+  const outer = section().getBoundingClientRect();
+  const rect = el.getBoundingClientRect();
+  writeGeom(el, {
+    x: (rect.left - outer.left) / deck.scale,
+    y: (rect.top - outer.top) / deck.scale,
+    w: rect.width / deck.scale,
+    h: rect.height / deck.scale,
+  });
+}
+
+function writeGeom(el, g) {
+  for (const key of ["x", "y", "w", "h"]) {
+    if (g[key] == null) continue;
+    el.dataset[key] = String(Math.round(g[key]));
+    const prop = { x: "left", y: "top", w: "width", h: "height" }[key];
+    el.style[prop] = `${el.dataset[key]}px`;
+  }
+}
+
+function findBlock(slideName, id) {
+  return document.querySelector(
+    `.keyframes-slide[data-slide="${CSS.escape(slideName)}"] [data-block="${CSS.escape(id)}"]`,
+  );
+}
+
+async function save(slideName, changes) {
+  setStatus("Saving…");
+  try {
+    const response = await fetch("_api/geometry", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ slide: slideName, blocks: changes }),
+    });
+    const result = await response.json();
+    if (!response.ok) throw new Error(result.error);
+    setStatus("Saved");
+    deck.dispatchEvent(new CustomEvent("saved", { detail: { slide: slideName } }));
+  } catch (e) {
+    setStatus("Save failed", true);
+    toast(`Save failed: ${e.message}`);
+  }
+}
+
+function snapshot(els) {
+  return Object.fromEntries(els.map((el) => [el.dataset.block, readGeom(el)]));
+}
+
+function commit(slideName, before, after) {
+  const changed = Object.keys(after).filter(
+    (id) => JSON.stringify(roundGeom(before[id])) !== JSON.stringify(roundGeom(after[id])),
+  );
+  if (!changed.length) return;
+  const pick = (g) => Object.fromEntries(changed.map((id) => [id, roundGeom(g[id])]));
+  state.history.push({ slide: slideName, before: pick(before), after: pick(after) });
+  state.future = [];
+  save(slideName, pick(after));
+}
+
+function roundGeom(g) {
+  return Object.fromEntries(Object.entries(g).map(([k, v]) => [k, Math.round(v)]));
+}
+
+function applyEntry(entry, side) {
+  const geoms = entry[side];
+  for (const [id, g] of Object.entries(geoms)) {
+    const el = findBlock(entry.slide, id);
+    if (el) writeGeom(el, g);
+  }
+  save(entry.slide, geoms);
+  const index = deck.slides.findIndex((s) => s.dataset.slide === entry.slide);
+  if (index !== deck.index) deck.goTo(index);
+  state.selection = Object.keys(geoms).map((id) => findBlock(entry.slide, id)).filter(Boolean);
+  render();
+}
+
+function undo() {
+  const entry = state.history.pop();
+  if (!entry) return toast("Nothing to undo");
+  state.future.push(entry);
+  applyEntry(entry, "before");
+}
+
+function redo() {
+  const entry = state.future.pop();
+  if (!entry) return toast("Nothing to redo");
+  state.history.push(entry);
+  applyEntry(entry, "after");
+}
+
+function snapTargets(exclude) {
+  const { width: W, height: H } = deck.config;
+  const xs = [0, W / 2, W];
+  const ys = [0, H / 2, H];
+  for (const el of blocks()) {
+    if (exclude.includes(el) || el.dataset.x == null || !el.offsetParent) continue;
+    const g = readGeom(el);
+    xs.push(g.x, g.x + g.w / 2, g.x + g.w);
+    ys.push(g.y, g.y + g.h / 2, g.y + g.h);
+  }
+  return { xs, ys };
+}
+
+function bestSnap(edges, targets, threshold) {
+  let best = null;
+  for (const edge of edges) {
+    for (const t of targets) {
+      const d = t - edge;
+      if (Math.abs(d) <= threshold && (!best || Math.abs(d) < Math.abs(best.d))) best = { d, at: t };
+    }
+  }
+  return best;
+}
+
+function bounds(geoms) {
+  const list = Object.values(geoms);
+  const x = Math.min(...list.map((g) => g.x));
+  const y = Math.min(...list.map((g) => g.y));
+  return {
+    x,
+    y,
+    w: Math.max(...list.map((g) => g.x + g.w)) - x,
+    h: Math.max(...list.map((g) => g.y + g.h)) - y,
+  };
+}
+
+function startMove(e) {
+  const els = state.selection;
+  state.drag = {
+    kind: "move",
+    start: toSlide(e),
+    before: snapshot(els),
+    targets: snapTargets(els),
+  };
+}
+
+function startResize(e, handle) {
+  const el = state.selection[0];
+  state.drag = {
+    kind: "resize",
+    handle,
+    start: toSlide(e),
+    before: snapshot([el]),
+    targets: snapTargets([el]),
+  };
+}
+
+function startMarquee(e) {
+  state.drag = { kind: "marquee", start: toSlide(e), additive: e.shiftKey, base: [...state.selection] };
+}
+
+function onDrag(e) {
+  const drag = state.drag;
+  const p = toSlide(e);
+  const dx = p.x - drag.start.x;
+  const dy = p.y - drag.start.y;
+  const threshold = SNAP_PX / deck.scale;
+  const guides = [];
+
+  if (drag.kind === "move") {
+    const box = bounds(drag.before);
+    let ox = dx;
+    let oy = dy;
+    if (!e.altKey) {
+      const sx = bestSnap([box.x + dx, box.x + dx + box.w / 2, box.x + dx + box.w], drag.targets.xs, threshold);
+      const sy = bestSnap([box.y + dy, box.y + dy + box.h / 2, box.y + dy + box.h], drag.targets.ys, threshold);
+      if (sx) (ox += sx.d), guides.push({ x: sx.at });
+      if (sy) (oy += sy.d), guides.push({ y: sy.at });
+    }
+    if (e.shiftKey) Math.abs(dx) > Math.abs(dy) ? (oy = 0) : (ox = 0);
+    for (const el of state.selection) {
+      const g = drag.before[el.dataset.block];
+      writeGeom(el, { x: g.x + ox, y: g.y + oy });
+    }
+    drag.moved = drag.moved || Math.hypot(dx, dy) * deck.scale > 2;
+    label(e, `${Math.round(box.x + ox)}, ${Math.round(box.y + oy)}`);
+  }
+
+  if (drag.kind === "resize") {
+    const el = state.selection[0];
+    const g0 = drag.before[el.dataset.block];
+    const h = drag.handle;
+    let left = g0.x;
+    let top = g0.y;
+    let right = g0.x + g0.w;
+    let bottom = g0.y + g0.h;
+    if (h.includes("w")) left += dx;
+    if (h.includes("e")) right += dx;
+    if (h.includes("n")) top += dy;
+    if (h.includes("s")) bottom += dy;
+    if (!e.altKey) {
+      const snapEdge = (value, axis) => {
+        const s = bestSnap([value], drag.targets[axis], threshold);
+        if (!s) return value;
+        guides.push(axis === "xs" ? { x: s.at } : { y: s.at });
+        return value + s.d;
+      };
+      if (h.includes("w")) left = snapEdge(left, "xs");
+      if (h.includes("e")) right = snapEdge(right, "xs");
+      if (h.includes("n")) top = snapEdge(top, "ys");
+      if (h.includes("s")) bottom = snapEdge(bottom, "ys");
+    }
+    let w = Math.max(16, right - left);
+    let hh = Math.max(16, bottom - top);
+    if (e.shiftKey && h.length === 2) {
+      const ratio = g0.w / g0.h;
+      if (w / hh > ratio) hh = w / ratio;
+      else w = hh * ratio;
+    }
+    if (h.includes("w")) left = right - w;
+    if (h.includes("n")) top = bottom - hh;
+    writeGeom(el, { x: left, y: top, w, h: hh });
+    drag.moved = true;
+    label(e, `${Math.round(w)} × ${Math.round(hh)}`);
+  }
+
+  if (drag.kind === "marquee") {
+    const box = {
+      x: Math.min(p.x, drag.start.x),
+      y: Math.min(p.y, drag.start.y),
+      w: Math.abs(dx),
+      h: Math.abs(dy),
+    };
+    Object.assign(ui.marquee.style, {
+      display: "block",
+      left: `${box.x}px`,
+      top: `${box.y}px`,
+      width: `${box.w}px`,
+      height: `${box.h}px`,
+    });
+    const hit = blocks().filter((el) => {
+      if (!el.offsetParent) return false;
+      const g = readGeom(el);
+      return g.x < box.x + box.w && g.x + g.w > box.x && g.y < box.y + box.h && g.y + g.h > box.y;
+    });
+    state.selection = drag.additive ? [...new Set([...drag.base, ...hit])] : hit;
+  }
+
+  render(guides);
+}
+
+function endDrag() {
+  const drag = state.drag;
+  state.drag = null;
+  ui.marquee.style.display = "none";
+  ui.label.style.display = "none";
+  if (drag.kind !== "marquee" && drag.moved) {
+    const els = state.selection;
+    commit(slide().dataset.slide, drag.before, snapshot(els));
+  }
+  render();
+}
+
+function nudge(dx, dy) {
+  const els = state.selection;
+  if (!state.nudge) state.nudge = { before: snapshot(els), slide: slide().dataset.slide };
+  for (const el of els) {
+    const g = readGeom(el);
+    writeGeom(el, { x: g.x + dx, y: g.y + dy });
+  }
+  clearTimeout(state.nudge.timer);
+  state.nudge.timer = setTimeout(() => {
+    const { before, slide: name } = state.nudge;
+    state.nudge = null;
+    commit(name, before, snapshot(els));
+  }, 400);
+  render();
+}
+
+function setZ(delta) {
+  const els = state.selection;
+  if (!els.length) return;
+  const name = slide().dataset.slide;
+  const changes = {};
+  for (const el of els) {
+    const z = Math.max(0, Number(el.dataset.z || 0) + delta);
+    el.dataset.z = String(z);
+    el.style.zIndex = String(z);
+    changes[el.dataset.block] = { z };
+  }
+  save(name, changes);
+  toast(`z-index ${els.map((el) => el.dataset.z).join(", ")}`);
+}
+
+function copyRef() {
+  const name = slide().dataset.slide;
+  const ids = state.selection.map((el) => el.dataset.block);
+  const ref = ids.length
+    ? ids.map((id) => `slides/${name}.html#${id}`).join(" ")
+    : `slides/${name}.html`;
+  navigator.clipboard.writeText(ref).then(
+    () => toast(`Copied ${ref}`),
+    () => toast(ref),
+  );
+}
+
+function ensureOverlay() {
+  if (ui.overlay.parentElement !== slide()) slide().append(ui.overlay);
+}
+
+function render(guides = []) {
+  if (!state.on) return;
+  ensureOverlay();
+  state.selection = state.selection.filter((el) => el.isConnected && slide().contains(el));
+  ui.boxes.replaceChildren(
+    ...state.selection.map((el) => {
+      const g = readGeom(el);
+      const box = document.createElement("div");
+      box.className = "keyframes-ed-box";
+      Object.assign(box.style, { left: `${g.x}px`, top: `${g.y}px`, width: `${g.w}px`, height: `${g.h}px` });
+      if (state.selection.length === 1) {
+        for (const handle of HANDLES) {
+          const knob = document.createElement("div");
+          knob.className = `keyframes-ed-handle keyframes-ed-${handle}`;
+          knob.dataset.handle = handle;
+          box.append(knob);
+        }
+      }
+      return box;
+    }),
+  );
+  announceSelection();
+  ui.guides.replaceChildren(
+    ...guides.map((g) => {
+      const line = document.createElement("div");
+      line.className = g.x != null ? "keyframes-ed-guide keyframes-ed-vguide" : "keyframes-ed-guide keyframes-ed-hguide";
+      line.style[g.x != null ? "left" : "top"] = `${g.x ?? g.y}px`;
+      return line;
+    }),
+  );
+  renderToolbar();
+}
+
+function announceSelection() {
+  const ids = state.selection.map((el) => el.dataset.block);
+  if (ids.join() === deck.selection?.join()) return;
+  deck.selection = ids;
+  deck.dispatchEvent(new CustomEvent("selection", { detail: { slide: slide().dataset.slide, ids } }));
+}
+
+function renderToolbar() {
+  const sel = state.selection;
+  ui.slideName.textContent = `${deck.index + 1} · ${slide().dataset.slide}`;
+  ui.blockName.textContent = sel.length > 1 ? `${sel.length} blocks` : sel[0]?.dataset.block ?? "—";
+  const single = sel.length === 1 ? readGeom(sel[0]) : null;
+  for (const key of ["x", "y", "w", "h"]) {
+    const input = ui.inputs[key];
+    input.disabled = !single;
+    if (document.activeElement !== input) input.value = single ? Math.round(single[key]) : "";
+  }
+}
+
+function label(e, text) {
+  ui.label.textContent = text;
+  Object.assign(ui.label.style, { display: "block", left: `${e.clientX + 14}px`, top: `${e.clientY + 14}px` });
+}
+
+function setStatus(text, error = false) {
+  ui.status.textContent = text;
+  ui.status.classList.toggle("keyframes-ed-error", error);
+}
+
+function toast(text) {
+  ui.toast.textContent = text;
+  ui.toast.classList.add("keyframes-ed-show");
+  clearTimeout(ui.toast.timer);
+  ui.toast.timer = setTimeout(() => ui.toast.classList.remove("keyframes-ed-show"), 1800);
+}
+
+function toggle(on = !state.on) {
+  state.on = on;
+  document.documentElement.classList.toggle("keyframes-editing", on);
+  ui.toolbar.hidden = !on;
+  if (on) render();
+  else {
+    state.selection = [];
+    announceSelection();
+    ui.overlay.remove();
+  }
+  deck.dispatchEvent(new CustomEvent("editmode", { detail: { on } }));
+}
+
+function onPointerDown(e) {
+  if (!state.on || e.button !== 0 || e.target.closest(".keyframes-ed-toolbar")) return;
+  const handle = e.target.closest(".keyframes-ed-handle");
+  const block = e.target.closest("[data-block]");
+  if (!handle && block?.classList.contains("keyframes-ed-live")) return;
+  if (!handle && !slide().contains(e.target)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  exitLive();
+  if (handle) startResize(e, handle.dataset.handle);
+  else if (block && slide().contains(block)) {
+    if (e.shiftKey) {
+      state.selection = state.selection.includes(block)
+        ? state.selection.filter((el) => el !== block)
+        : [...state.selection, block];
+    } else if (!state.selection.includes(block)) state.selection = [block];
+    startMove(e);
+  } else startMarquee(e);
+  render();
+  const move = (ev) => onDrag(ev);
+  const up = () => {
+    removeEventListener("pointermove", move);
+    removeEventListener("pointerup", up);
+    endDrag();
+  };
+  addEventListener("pointermove", move);
+  addEventListener("pointerup", up);
+}
+
+function enterLive(e) {
+  if (!state.on) return;
+  const block = e.target.closest("[data-block]");
+  if (!block || !slide().contains(block)) return;
+  exitLive();
+  block.classList.add("keyframes-ed-live");
+  toast(`Interacting with ${block.dataset.block} · Esc to return`);
+}
+
+function exitLive() {
+  for (const el of document.querySelectorAll(".keyframes-ed-live")) el.classList.remove("keyframes-ed-live");
+}
+
+function onKey(e) {
+  if (e.target.closest?.("input, textarea, [contenteditable], .cm-editor")) return;
+  const mod = e.metaKey || e.ctrlKey;
+  if (e.key === "e" && !mod) {
+    e.preventDefault();
+    return toggle();
+  }
+  if (!state.on) return;
+  const sel = state.selection;
+  const step = e.shiftKey ? 10 : 1;
+  const arrows = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+  let handled = true;
+  if (arrows[e.key] && sel.length) nudge(...arrows[e.key]);
+  else if (mod && e.key.toLowerCase() === "z") e.shiftKey ? redo() : undo();
+  else if (mod && e.key === "y") redo();
+  else if (mod && e.key === "a") (state.selection = blocks()), render();
+  else if (e.key === "Escape") {
+    if (document.querySelector(".keyframes-ed-live")) exitLive();
+    else if (sel.length) (state.selection = []), render();
+    else toggle(false);
+  } else if (e.key === "]") setZ(1);
+  else if (e.key === "[") setZ(-1);
+  else if (e.key === "c" && !mod) copyRef();
+  else if (e.key === "?") toggleHelp();
+  else handled = false;
+  if (handled) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
+
+function onInput(key, input) {
+  const el = state.selection[0];
+  const value = Number(input.value);
+  if (!el || !Number.isFinite(value)) return;
+  const before = snapshot([el]);
+  writeGeom(el, { [key]: value });
+  commit(slide().dataset.slide, before, snapshot([el]));
+  render();
+}
+
+function toggleHelp() {
+  ui.help.hidden = !ui.help.hidden;
+}
+
+const HELP = `
+<b>Layout editor</b>
+<table>
+<tr><td>E</td><td>toggle editor</td></tr>
+<tr><td>drag</td><td>move · <kbd>Shift</kbd> lock axis · <kbd>Alt</kbd> no snapping</td></tr>
+<tr><td>handles</td><td>resize · <kbd>Shift</kbd> keep aspect (corners)</td></tr>
+<tr><td>Shift+click / drag on empty</td><td>multi-select</td></tr>
+<tr><td>arrows</td><td>nudge 1px · <kbd>Shift</kbd> 10px</td></tr>
+<tr><td>[ / ]</td><td>send back / bring forward</td></tr>
+<tr><td>double-click</td><td>interact with a block (3D, sim, code)</td></tr>
+<tr><td>C</td><td>copy block reference for your LLM prompt</td></tr>
+<tr><td>R</td><td>insert block reference into the panel's terminal</td></tr>
+<tr><td>\`</td><td>show / hide the side panel (source, Claude, Codex, shell)</td></tr>
+<tr><td>⌘Z / ⌘⇧Z</td><td>undo / redo</td></tr>
+<tr><td>Esc</td><td>deselect · exit</td></tr>
+</table>`;
+
+function buildUi() {
+  document.body.insertAdjacentHTML(
+    "beforeend",
+    `<div class="keyframes-ed-toolbar" hidden>
+      <span class="keyframes-ed-badge">EDIT</span>
+      <span class="keyframes-ed-slide"></span>
+      <span class="keyframes-ed-block"></span>
+      ${["x", "y", "w", "h"].map((k) => `<label>${k}<input data-key="${k}" type="number"></label>`).join("")}
+      <button data-action="back" title="Send back ([)">⤓</button>
+      <button data-action="front" title="Bring forward (])">⤒</button>
+      <button data-action="ref" title="Copy block reference (C)">ref</button>
+      <button data-action="help" title="Shortcuts (?)">?</button>
+      <span class="keyframes-ed-status">Saved</span>
+    </div>
+    <div class="keyframes-ed-help" hidden>${HELP}</div>
+    <div class="keyframes-ed-toast"></div>`,
+  );
+  ui.toolbar = document.querySelector(".keyframes-ed-toolbar");
+  ui.help = document.querySelector(".keyframes-ed-help");
+  ui.toast = document.querySelector(".keyframes-ed-toast");
+  ui.slideName = ui.toolbar.querySelector(".keyframes-ed-slide");
+  ui.blockName = ui.toolbar.querySelector(".keyframes-ed-block");
+  ui.status = ui.toolbar.querySelector(".keyframes-ed-status");
+  ui.inputs = Object.fromEntries(
+    [...ui.toolbar.querySelectorAll("input")].map((input) => [input.dataset.key, input]),
+  );
+  for (const [key, input] of Object.entries(ui.inputs)) {
+    input.addEventListener("change", () => onInput(key, input));
+    input.addEventListener("keydown", (e) => e.key === "Enter" && input.blur());
+  }
+  const actions = { back: () => setZ(-1), front: () => setZ(1), ref: copyRef, help: toggleHelp };
+  ui.toolbar.addEventListener("click", (e) => actions[e.target.dataset.action]?.());
+
+  ui.overlay = document.createElement("div");
+  ui.overlay.className = "keyframes-ed-overlay";
+  ui.overlay.innerHTML = `<div class="keyframes-ed-guides"></div><div class="keyframes-ed-boxes"></div><div class="keyframes-ed-marquee"></div>`;
+  ui.guides = ui.overlay.querySelector(".keyframes-ed-guides");
+  ui.boxes = ui.overlay.querySelector(".keyframes-ed-boxes");
+  ui.marquee = ui.overlay.querySelector(".keyframes-ed-marquee");
+  ui.label = document.createElement("div");
+  ui.label.className = "keyframes-ed-label";
+  document.body.append(ui.label);
+}
+
+function start() {
+  buildUi();
+  import("./panel.js").then((m) => m.createPanel(deck));
+  document.addEventListener("keydown", onKey, true);
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("dblclick", enterLive, true);
+  deck.addEventListener("change", () => {
+    exitLive();
+    state.selection = state.selection.filter((el) => slide().contains(el));
+    render();
+  });
+  deck.addEventListener("slidereplaced", ({ detail }) => {
+    if (detail.slide !== slide()) return;
+    state.selection = state.selection
+      .map((el) => detail.slide.querySelector(`[data-block="${CSS.escape(el.dataset.block)}"]`))
+      .filter(Boolean);
+    render();
+  });
+  if (sessionStorage.getItem("keyframes-editing") === "1") toggle(true);
+  addEventListener("beforeunload", () => sessionStorage.setItem("keyframes-editing", state.on ? "1" : "0"));
+}
+
+if (!params.has("embed") && !params.has("print") && !params.has("presenter")) {
+  document.documentElement.dataset.loaded ? start() : addEventListener("load", start);
+}