windcraft-editor 0.0.0-stage → 0.1.0

package/design/editor/pages-panel.js

@@ -0,0 +1,161 @@
+import { host } from "../host.js";
+import { $, S, collapsed, data, esc, send } from "./base.js";
+import { fitTo, pageGroupOf, view } from "./plane.js";
+import { activate, deletePage, docDirty, docs, renameFrame, selectFrame } from "./designs.js";
+import { PAGE_ICON, parsePath, renderLayers } from "./layers.js";
+import { cmd } from "./frame-messages.js";
+
+// ── Pages section (left panel) ───────────────────────────────────────────────
+/** The project and the current page, always visible above the Pages list. */
+function renderDetailsBlock() {
+    const pr = $("leftProject");
+    const ARROW = '<svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 2.5h5v5M9.5 2.5l-6 6"/></svg>';
+    if (data.project) {
+        pr.href = (host.projectUrl && host.projectUrl(data.project.id)) || "#";
+        pr.innerHTML = `<span class="truncate">${esc(data.project.name)}</span><span class="sub2">${ARROW}</span>`;
+    } else {
+        pr.href = "#";
+        pr.innerHTML = '<span class="mut truncate">No project</span>';
+    }
+}
+
+export const PAGE_EDIT = '<button type="button" data-pedit class="ml-auto flex h-5 w-5 shrink-0 items-center justify-center rounded text-neutral-500 hover:bg-white/70" title="Page details: name, category, tags, visibility"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>';
+/** The trash at the end of a page's row (faint until the row is pointed at); a project keeps at least one page. */
+export const pageDelete = (d, active, count) => (count > 1 ? `<button type="button" data-pdel="${d.key}" class="layer-act ${active ? "" : "ml-auto"}" title="Delete this page"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3"/></svg></button>` : "");
+/** A heading in a list of pages where the group changes ("Public site", then "Customer area"). `state.prev` is the group of the page before. */
+export const headingState = { prev: "" };
+export function groupHeading(d) {
+    const g = pageGroupOf(d.key);
+    const html = g !== headingState.prev && (g || headingState.prev) ? `<div class="group-head">${esc(g || "No group")}</div>` : "";
+    headingState.prev = g;
+    return html;
+}
+export function renderPagesList() {
+    const el = $("pagesList");
+    if (!S.leftOpen) return;
+    renderDetailsBlock();
+    if (el.querySelector(".frename")) return; // not while a name is being typed
+    const list = [...docs.values()];
+    const tops = list.filter((d) => d.kind !== "section" || !list.some((p) => p.key === d.parent));
+    headingState.prev = "";
+    const row = (d, depth) => {
+        const active = d.key === S.curKey;
+        const title = (active ? data.title : d.meta.title) || "Untitled page";
+        return `<div class="layer-row cursor-pointer gap-1.5 px-1 ${active ? "is-selected" : ""}" style="padding-left:${depth * 12 + 8}px" data-page="${d.key}" title="Double-click to rename">${d.kind === "section" ? '<span class="shrink-0 font-mono text-[11px] text-neutral-500">section</span>' : PAGE_ICON}<span class="truncate">${esc(title)}</span>${docDirty(d) ? '<i class="dirty-dot" title="Unsaved changes"></i>' : ""}${active ? PAGE_EDIT : ""}${pageDelete(d, active, list.length)}</div>`;
+    };
+    el.innerHTML = tops.map((d) => groupHeading(d) + row(d, 0) + list.filter((c) => c.kind === "section" && c.parent === d.key).map((c) => row(c, 1)).join("")).join("");
+}
+
+let dragPath = null;
+const clearDrop = () => document.querySelectorAll(".drop-before,.drop-after,.drop-inside").forEach((r) => r.classList.remove("drop-before", "drop-after", "drop-inside"));
+const dropZone = (e, row) => { const r = row.getBoundingClientRect(); const y = (e.clientY - r.top) / r.height; return y < 0.28 ? "before" : y > 0.72 ? "after" : "inside"; };
+// an element can't be dropped on itself or inside what it contains
+const badDrop = (target) => dragPath === target || (dragPath !== "" && target.startsWith(`${dragPath}.`));
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+export function init() {
+    $("pagesList").addEventListener("click", (e) => {
+        if (!e.target.closest("[data-pedit]")) return;
+        e.stopImmediatePropagation();
+        if (S.mode === "edit") $("detailsBtn").click(); // not in Interact
+    }, true);
+    $("leftProject").addEventListener("click", (e) => { if (!data.project) { e.preventDefault(); $("detailsBtn").click(); } });
+    $("pagesList").addEventListener("click", (e) => {
+        const del = e.target.closest("[data-pdel]");
+        if (!del) return;
+        e.stopImmediatePropagation();
+        deletePage(del.dataset.pdel);
+    }, true);
+    $("pagesList").addEventListener("click", (e) => {
+        const row = e.target.closest("[data-page]");
+        if (!row || e.target.closest(".frename")) return;
+        S.viewTouched = true;
+        activate(row.dataset.page);
+        fitTo([row.dataset.page], Math.max(view.z, 0.5));
+    });
+    $("pagesList").addEventListener("dblclick", (e) => {
+        const row = e.target.closest("[data-page]");
+        if (S.mode !== "edit" || !row || e.target.closest(".frename, [data-pedit]")) return; // not in Interact
+        const key = row.dataset.page;
+        const d = docs.get(key);
+        const current = (key === S.curKey ? data.title : d.meta.title) || "";
+        const label = row.querySelector("span.truncate");
+        const input = document.createElement("input");
+        input.className = "frename";
+        input.style.cssText = "min-width:0;width:100%;height:20px;font-size:12px";
+        input.value = current;
+        input.maxLength = 80;
+        label.replaceWith(input);
+        input.focus();
+        input.select();
+        let done = false;
+        const finish = (save) => {
+            if (done) return;
+            done = true;
+            const name = input.value.trim();
+            input.remove();
+            renderPagesList();
+            if (save && name && name !== current) renameFrame(key, name, current);
+        };
+        input.addEventListener("keydown", (ev) => { ev.stopPropagation(); if (ev.key === "Enter") { ev.preventDefault(); finish(true); } if (ev.key === "Escape") { ev.preventDefault(); finish(false); } });
+        input.addEventListener("blur", () => finish(true));
+    });
+    $("pagesAdd").addEventListener("click", () => $("newDesignBtn").click());
+
+    $("layers").addEventListener("click", (e) => {
+        const fr = e.target.closest("[data-frame]");
+        if (fr) {
+            if (fr.dataset.frame !== S.curKey) activate(fr.dataset.frame);
+            return selectFrame();
+        }
+        const caret = e.target.closest("[data-caret]");
+        if (caret) {
+            const k = caret.dataset.caret;
+            collapsed.has(k) ? collapsed.delete(k) : collapsed.add(k);
+            return renderLayers();
+        }
+        const eye = e.target.closest("[data-eye]"), lock = e.target.closest("[data-lock]");
+        if (eye) return cmd({ cmd: "toggleHidden", path: parsePath(eye.dataset.eye) });
+        if (lock) return cmd({ cmd: "toggleLock", path: parsePath(lock.dataset.lock) });
+        const row = e.target.closest("[data-path]");
+        if (row) { send({ cmd: "select", path: parsePath(row.dataset.path) }); send({ cmd: "scrollTo", path: parsePath(row.dataset.path) }); }
+    });
+    $("layers").addEventListener("mouseover", (e) => { const row = e.target.closest("[data-path]"); if (row) send({ cmd: "hover", path: parsePath(row.dataset.path) }); });
+    $("layers").addEventListener("mouseleave", () => send({ cmd: "hover", path: null }));
+    $("layers").addEventListener("dragstart", (e) => {
+        const row = e.target.closest("[data-path]");
+        if (!row) return;
+        dragPath = row.dataset.path;
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", dragPath);
+        // a small label follows the pointer (not a smeared copy of the row), and the row itself dims so it is clear what is moving
+        const chip = document.createElement("div");
+        chip.textContent = row.textContent.replace(/\s+/g, " ").trim();
+        chip.style.cssText = "position:fixed;top:-100px;left:-100px;padding:3px 10px;border-radius:6px;background:rgba(17,17,17,.7);color:#fff;font:12px system-ui,sans-serif;white-space:nowrap";
+        document.body.appendChild(chip);
+        e.dataTransfer.setDragImage(chip, -14, -10); // offset to the lower right, so the pointer and the drop line stay visible
+        setTimeout(() => { chip.remove(); row.classList.add("is-dragging"); }, 0);
+    });
+$("layers").addEventListener("dragover", (e) => {
+    const row = e.target.closest("[data-path]");
+    if (!row || dragPath === null) return;
+    clearDrop();
+    if (badDrop(row.dataset.path)) return;
+    e.preventDefault();
+    const zone = dropZone(e, row);
+    if (row.dataset.path === "" && zone !== "inside") return;
+    row.style.setProperty("--ind", row.style.paddingLeft || "0px"); // the insertion line starts at the row's own indent, so the new depth is readable
+    row.classList.add(`drop-${zone}`);
+});
+    $("layers").addEventListener("dragleave", (e) => { if (!e.relatedTarget || !$("layers").contains(e.relatedTarget)) clearDrop(); });
+    $("layers").addEventListener("drop", (e) => {
+        const row = e.target.closest("[data-path]");
+        if (!row || dragPath === null || badDrop(row.dataset.path)) return;
+        e.preventDefault();
+        const zone = row.dataset.path === "" ? "inside" : dropZone(e, row);
+        clearDrop();
+        cmd({ cmd: "moveTo", path: parsePath(dragPath), targetPath: parsePath(row.dataset.path), position: zone });
+        dragPath = null;
+    });
+    $("layers").addEventListener("dragend", () => { clearDrop(); dragPath = null; document.querySelectorAll(".is-dragging").forEach((r) => r.classList.remove("is-dragging")); });
+}

package/design/editor/panel-resize.js

@@ -0,0 +1,47 @@
+import { $ } from "./base.js";
+import { layout } from "./plane.js";
+
+// ── Side panels: drag the edge to widen them (never narrower than they start); the width is remembered, a double-click resets it ─────────────
+const MIN = 240;
+const maxWidth = () => Math.max(MIN, Math.min(640, Math.round(innerWidth * 0.45)));
+
+function resizable(panel, side, key) {
+    panel.classList.add("relative");
+    const handle = document.createElement("div");
+    handle.className = `rz ${side}`;
+    handle.title = "Drag to resize, double-click to reset";
+    panel.append(handle);
+    const set = (w) => { panel.style.width = `${Math.round(Math.min(maxWidth(), Math.max(MIN, w)))}px`; };
+    try { const w = Number(localStorage.getItem(key)); if (w) set(w); } catch { /* storage is optional */ }
+    let drag = null;
+    handle.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        drag = { x: e.clientX, w: panel.offsetWidth };
+        handle.setPointerCapture(e.pointerId); // keeps the drag over the design's iframe too
+        handle.classList.add("on");
+        document.body.style.cursor = "col-resize";
+    });
+    handle.addEventListener("pointermove", (e) => {
+        if (!drag) return;
+        set(drag.w + (side === "l" ? e.clientX - drag.x : drag.x - e.clientX)); // the left panel grows to the right, the right one to the left
+        layout();
+    });
+    const end = (e) => {
+        if (!drag) return;
+        drag = null;
+        handle.classList.remove("on");
+        document.body.style.cursor = "";
+        try { handle.releasePointerCapture(e.pointerId); } catch { /* already released */ }
+        try { localStorage.setItem(key, String(panel.offsetWidth)); } catch { /* storage is optional */ }
+    };
+    handle.addEventListener("pointerup", end);
+    handle.addEventListener("pointercancel", end);
+    handle.addEventListener("lostpointercapture", end);
+    handle.addEventListener("dblclick", () => { set(MIN); try { localStorage.removeItem(key); } catch { /* storage is optional */ } layout(); });
+}
+
+/** Registers this part's listeners (called once, in order, by editor.js). */
+export function init() {
+    resizable($("leftPanel"), "l", "wc:leftW");
+    resizable($("panel"), "r", "wc:panelW");
+}

package/design/editor/plane.js

@@ -0,0 +1,132 @@
+import { computeLayout } from "@windcraft/core/board-layout.js";
+import { $, DEFAULT_W, S, data, frame, send } from "./base.js";
+import { docs, wraps } from "./designs.js";
+import { placeFloat, renderFloat, renderFrameSel } from "./frame-handles.js";
+import { renderInspector } from "./inspector.js";
+
+// ── The plane: every design in the project on one infinite surface ───────────
+const MIN_Z = 0.02, MAX_Z = 256; // 2% to 25600%
+const GRID_FROM = 4; // the pixel grid appears at 400%
+export const view = { x: 0, y: 0, z: 1 };
+export const canvas = $("canvas");
+
+export const MIN_H = 720;
+// a frame has its own width, and a height that follows its content unless it was set by hand
+export const widthOf = (d) => (d.board && d.board.w) || d.frameW || DEFAULT_W;
+export const curWidth = () => widthOf(docs.get(S.curKey));
+/** A device's screen height for a frame width (desktop, tablet, phone): the live page (Interact) is shown on a screen that size. */
+export const deviceHeight = (w) => (w >= 1024 ? 800 : w >= 768 ? 1024 : 844);
+export const heightOfDoc = (d) => (d.board && d.board.h) || (d.key === S.curKey
+    ? (S.mode === "preview" ? deviceHeight(widthOf(d)) : Math.max(MIN_H, S.frameHeight))
+    : Math.max(MIN_H, d.height || 0));
+export const canvasSize = () => [canvas.clientWidth, canvas.clientHeight];
+
+/** The group a design belongs to in its project ("Public site"), or "". */
+export const pageGroupOf = (key) => ((key === S.curKey ? data.group : (docs.get(key) || {}).meta?.group) || "");
+
+export function positions() {
+    return computeLayout([...docs.values()].map((d) => ({ id: d.key, kind: d.kind, parent: d.parent, group: pageGroupOf(d.key), board: d.board })), { frameW: DEFAULT_W, widthOf: (it) => widthOf(docs.get(it.id)), heightOf: (it) => heightOfDoc(docs.get(it.id)) });
+}
+
+export function applyView() {
+    $("plane").style.transform = `translate(${view.x}px, ${view.y}px) scale(${view.z})`;
+    $("plane").style.setProperty("--iz", String(1 / view.z));
+    // dot grid: always about 16-32 screen pixels apart (the spacing doubles or halves as you zoom), and whole pixels so the dots stay crisp
+    let dot = 24 * view.z;
+    while (dot < 16) dot *= 2;
+    while (dot >= 32) dot /= 2;
+    dot = Math.round(dot);
+    canvas.style.backgroundSize = `${dot}px ${dot}px`;
+    canvas.style.backgroundPosition = `${Math.round(view.x)}px ${Math.round(view.y)}px`;
+    updatePixelGrid();
+    if (S.sentZoom !== view.z) { S.sentZoom = view.z; send({ cmd: "view", zoom: view.z }); }
+    renderFrameSel(); // the selection is in screen pixels, so it is redrawn on every pan and zoom
+    syncZoomSel();
+    placeFloat();
+}
+
+/** From 400% every design pixel gets a hairline, over the designs and under the selection, like Figma's pixel grid. */
+function updatePixelGrid() {
+    const g = $("pgrid");
+    if (view.z < GRID_FROM) return g.classList.add("hidden");
+    g.classList.remove("hidden");
+    // cover just what is on screen, in the plane's own units, snapped to whole pixels
+    const x0 = Math.floor(-view.x / view.z), y0 = Math.floor(-view.y / view.z);
+    Object.assign(g.style, { left: `${x0}px`, top: `${y0}px`, width: `${Math.ceil(canvas.clientWidth / view.z) + 2}px`, height: `${Math.ceil(canvas.clientHeight / view.z) + 2}px` });
+}
+
+function syncZoomSel() {
+    const sel = $("zoomSel");
+    const hit = [...sel.options].find((o) => Number(o.value) && Math.abs(Number(o.value) - view.z) < 0.005);
+    if (hit) { sel.value = hit.value; return; }
+    let custom = [...sel.options].find((o) => o.value === "custom");
+    if (!custom) { custom = new Option("", "custom"); sel.add(custom); }
+    custom.textContent = `${Math.round(view.z * 100)}%`;
+    sel.value = "custom";
+    placePills(); // the zoom label changes the right group's width
+}
+
+export function zoomAt(factor, cx, cy) {
+    const z = Math.min(MAX_Z, Math.max(MIN_Z, view.z * factor));
+    const k = z / view.z;
+    view.x = cx - (cx - view.x) * k;
+    view.y = cy - (cy - view.y) * k;
+    view.z = z;
+    applyView();
+}
+
+export function fitTo(keys, maxZ = 1) {
+    const pos = positions();
+    const list = keys.filter((k) => pos[k]);
+    if (!list.length) return;
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    list.forEach((k) => {
+        const p = pos[k];
+        x0 = Math.min(x0, p.x); y0 = Math.min(y0, p.y - 30);
+        x1 = Math.max(x1, p.x + widthOf(docs.get(k))); y1 = Math.max(y1, p.y + heightOfDoc(docs.get(k)));
+    });
+    const [W, H] = canvasSize();
+    const z = Math.min(maxZ, Math.max(MIN_Z, Math.min((W - 120) / (x1 - x0), (H - 120) / (y1 - y0))));
+    view.z = z;
+    view.x = (W - (x1 - x0) * z) / 2 - x0 * z;
+    view.y = (H - (y1 - y0) * z) / 2 - y0 * z;
+    applyView();
+}
+
+/** Sizes and places every frame. The live frame and the previews all follow the same positions. */
+export function layout() {
+    if (!S.selected) setTimeout(renderInspector, 0); // the page panel (shown while no element is selected) follows its size and position
+    const pos = positions();
+    docs.forEach((d, key) => {
+        const en = wraps.get(key);
+        const p = pos[key];
+        if (!en || !p) return;
+        const h = heightOfDoc(d);
+        Object.assign(en.wrap.style, { left: `${p.x}px`, top: `${p.y}px`, width: `${widthOf(d)}px`, height: `${h}px` });
+        // the live iframe never changes parent (that would reload it); it just sits over the active frame (over the page being
+        // left, while a switch is under way)
+        if (!S.switching) S.frameAt = S.curKey;
+        if (key === S.frameAt) Object.assign(frame.style, { left: `${p.x}px`, top: `${p.y}px`, width: `${widthOf(d)}px`, height: `${h}px` });
+    });
+    placePills();
+    applyView();
+    renderFloat();
+}
+
+/** The two tool groups share the top row; when the canvas is too narrow for both side by side, the right one drops under the left. */
+export function placePills() {
+    const left = $("pillL"), right = $("pillR");
+    right.style.top = "";
+    left.style.maxWidth = "none";
+    left.classList.remove("tight");
+    const natural = left.offsetWidth; // the left group at its full width
+    left.style.maxWidth = "calc(100% - 24px)"; // beyond that the design name shrinks...
+    if (canvas.clientWidth < natural - 100) left.classList.add("tight"); // ...and finally disappears
+    if (canvas.clientWidth < natural + right.offsetWidth + 12 * 3) right.style.top = "60px";
+}
+
+export function handleWheel({ dx, dy, zoomKey, cx, cy }) {
+    S.viewTouched = true;
+    if (zoomKey) zoomAt(Math.exp(-dy * 0.01), cx, cy);
+    else { view.x -= dx; view.y -= dy; applyView(); }
+}

package/design/editor/present.js

@@ -0,0 +1,52 @@
+import { host } from "../host.js";
+import { createPresenter } from "../presenter.js";
+import { $, S, data, model } from "./base.js";
+import { anyDirty, docs } from "./designs.js";
+import { heightOfDoc, widthOf } from "./plane.js";
+
+// ── Preview (the play button) ───────────────────────────────────────────────────────────────────────────────────
+// With an app that has a prototype page (host.previewUrl), the preview is that page, in its own tab: the same page a shared link
+// opens, as Figma's prototype is its own view. Without one (the demo, an embedded editor, a design not saved yet) the same viewer
+// opens over the editor, showing what is on the canvas now.
+// (The Interact tool is different: it runs the one page you are editing, on the canvas.)
+
+let viewer = null;
+
+/** The pages to show: whole pages in the order of the Pages list (parts of a page are left out); the components when there are no pages. */
+function pagesToShow() {
+    const all = [...docs.values()];
+    const tops = all.filter((d) => d.kind !== "section" || !all.some((p) => p.key === d.parent));
+    const pages = tops.filter((d) => d.kind === "page");
+    return pages.length ? pages : tops;
+}
+
+const sourceOf = (d) => {
+    if (d.key === S.curKey) return { ...S.parsed, markup: model.markup }; // what is on the canvas now, saved or not
+    return d.loaded ? { ...d.parsed, markup: d.markup } : d.source;
+};
+
+export function openPreview() {
+    if (viewer) return;
+    const cur = docs.get(S.curKey);
+    if (host.previewUrl && data.project && cur && !S.isNew && cur.meta && cur.meta.id) {
+        if (anyDirty() && !confirm("The preview shows the saved version of your pages. Open it without your unsaved changes?")) return;
+        window.open(host.previewUrl({ projectId: data.project.id, designId: cur.meta.id }), "_blank", "noopener");
+        return;
+    }
+    const list = pagesToShow();
+    if (!list.length) return;
+    viewer = createPresenter({
+        pages: list.map((d) => ({ key: d.key, title: (d.key === S.curKey ? data.title : d.meta.title) || "Untitled page", width: widthOf(d), height: heightOfDoc(d), source: () => sourceOf(d) })),
+        start: Math.max(0, list.findIndex((d) => d.key === S.curKey)), // starts on the page you are on
+        onClose: closePreview,
+    });
+    $("playBtn").classList.add("on");
+}
+
+export function closePreview() {
+    if (!viewer) return;
+    viewer.destroy();
+    viewer = null;
+    $("playBtn").classList.remove("on");
+}
+export const previewOpen = () => Boolean(viewer);