sketchmark 2.1.6 → 2.1.8

package/dist/src/authoring/states.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.at = at;
+exports.spec = spec;
+exports.compile = compile;
+const keyframes_1 = require("../keyframes");
+const utils_1 = require("../utils");
+function at(time, set, options = {}) {
+    return {
+        time,
+        set: (0, utils_1.clone)(set),
+        ...(options.curve ? { curve: (0, utils_1.clone)(options.curve) } : {}),
+        ...(options.offsets ? { offsets: (0, utils_1.clone)(options.offsets) } : {})
+    };
+}
+function spec(value, options = {}) {
+    return {
+        value: (0, utils_1.clone)(value),
+        ...(options.curve ? { curve: (0, utils_1.clone)(options.curve) } : {}),
+        ...(options.offset !== undefined ? { offset: options.offset } : {}),
+        ...(options.in ? { in: (0, utils_1.clone)(options.in) } : {}),
+        ...(options.out ? { out: (0, utils_1.clone)(options.out) } : {}),
+        ...(options.interpolation ? { interpolation: (0, utils_1.clone)(options.interpolation) } : {})
+    };
+}
+function compile(document, steps, options = {}) {
+    return (0, keyframes_1.compileKeyframeStates)(document, steps, options);
+}

package/dist/src/authoring/types.d.ts

@@ -0,0 +1,14 @@
+import type { CompileKeyframeStateOptions, KeyframeState } from "../keyframes";
+import type { VisualCanvas, VisualDocument } from "../types";
+import type { ApplyPresetOptions, PresetFragment } from "../presets/types";
+export type AuthoringFragment = PresetFragment;
+export type AuthoringStep = PresetFragment | KeyframeState;
+export type AuthoringInput = AuthoringStep | AuthoringStep[];
+export interface CreateDocumentOptions extends ApplyPresetOptions {
+}
+export interface ApplyAuthoringOptions extends ApplyPresetOptions, CompileKeyframeStateOptions {
+}
+export interface CreatedVisualDocument extends VisualDocument {
+    version: 1;
+    canvas: VisualCanvas;
+}

package/dist/src/authoring/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/browser-editor.d.ts

@@ -0,0 +1,15 @@
+import type { VisualDocument } from "./types";
+export interface BrowserEditorOptions {
+    document: VisualDocument;
+    title?: string;
+    autoSaveDelay?: number | false;
+    onChange?: (document: VisualDocument) => void;
+    onSave?: (document: VisualDocument) => void | Promise<void>;
+}
+export interface BrowserEditorInstance {
+    getDocument(): VisualDocument;
+    setDocument(document: VisualDocument): void;
+    save(): Promise<void>;
+    destroy(): void;
+}
+export declare function createSketchmarkBrowserEditor(root: HTMLElement, options: BrowserEditorOptions): BrowserEditorInstance;

package/dist/src/browser-editor.js

@@ -0,0 +1,450 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSketchmarkBrowserEditor = createSketchmarkBrowserEditor;
+const animatable_1 = require("./animatable");
+const browser_export_1 = require("./browser-export");
+const edit_1 = require("./edit");
+const normalize_1 = require("./normalize");
+const svg_1 = require("./render/svg");
+const utils_1 = require("./utils");
+const validate_1 = require("./validate");
+const STYLE_ID = "sketchmark-browser-editor-style";
+function createSketchmarkBrowserEditor(root, options) {
+    ensureStyle();
+    const document = (0, utils_1.clone)(options.document);
+    assertValid(document);
+    const refs = (0, edit_1.listElementReferences)(document);
+    const state = {
+        root,
+        options,
+        document,
+        selectedId: refs[0]?.id ?? "",
+        currentTime: 0,
+        playing: false,
+        raf: 0,
+        saveTimer: 0,
+        lastFrame: 0
+    };
+    root.classList.add("sketchmark-browser-editor");
+    root.innerHTML = [
+        "<aside class='skme-tree'></aside>",
+        "<main class='skme-main'>",
+        "  <div class='skme-toolbar'></div>",
+        "  <div class='skme-stage-wrap'><div class='skme-stage'></div></div>",
+        "  <div class='skme-playbar'></div>",
+        "</main>",
+        "<aside class='skme-inspector'></aside>"
+    ].join("");
+    renderAll(state);
+    return {
+        getDocument: () => (0, utils_1.clone)(state.document),
+        setDocument: (next) => {
+            assertValid(next);
+            state.document = (0, utils_1.clone)(next);
+            if (state.selectedId && !(0, edit_1.findElementById)(state.document, state.selectedId))
+                state.selectedId = "";
+            renderAll(state);
+        },
+        save: () => saveNow(state),
+        destroy: () => {
+            window.clearTimeout(state.saveTimer);
+            window.cancelAnimationFrame(state.raf);
+            root.innerHTML = "";
+            root.classList.remove("sketchmark-browser-editor");
+        }
+    };
+}
+function renderAll(state) {
+    renderTree(state);
+    renderToolbar(state);
+    renderStage(state);
+    renderPlaybar(state);
+    renderInspector(state);
+}
+function renderTree(state) {
+    const tree = requirePart(state.root, ".skme-tree");
+    const refs = (0, edit_1.listElementReferences)(state.document);
+    tree.innerHTML = `<div class="skme-panel-title">Elements</div>${refs.map((ref) => {
+        const selected = ref.id === state.selectedId ? " selected" : "";
+        const pad = Math.max(0, ref.depth) * 12;
+        return `<button class="skme-tree-row${selected}" data-select="${escapeAttr(ref.id)}" style="padding-left:${pad + 6}px"><span>${escapeHtml(ref.id)}</span><small>${escapeHtml(ref.type)}</small></button>`;
+    }).join("") || "<p class='skme-muted'>No elements.</p>"}`;
+    tree.querySelectorAll("[data-select]").forEach((button) => {
+        button.onclick = () => {
+            state.selectedId = button.dataset.select ?? "";
+            renderTree(state);
+            renderStage(state);
+            renderInspector(state);
+        };
+    });
+}
+function renderToolbar(state) {
+    const toolbar = requirePart(state.root, ".skme-toolbar");
+    toolbar.innerHTML = [
+        `<strong>${escapeHtml(state.options.title ?? "Sketchmark Editor")}</strong>`,
+        "<span class='skme-spacer'></span>",
+        "<button data-save>Save</button>",
+        "<button data-export='svg'>SVG</button>",
+        "<button data-export='png'>PNG</button>",
+        "<button data-export='jpg'>JPG</button>",
+        "<button data-export='html'>HTML</button>",
+        "<button data-export='json'>JSON</button>",
+        "<button data-export='mp4'>MP4</button>",
+        "<span class='skme-status' data-status></span>"
+    ].join("");
+    toolbar.querySelector("[data-save]").onclick = () => saveNow(state);
+    toolbar.querySelectorAll("[data-export]").forEach((button) => {
+        button.onclick = () => exportDocument(state, button.dataset.export);
+    });
+}
+function renderStage(state) {
+    const stage = requirePart(state.root, ".skme-stage");
+    try {
+        const resolved = (0, normalize_1.resolveVisualFrame)(state.document, state.currentTime);
+        stage.innerHTML = (0, svg_1.renderResolvedSvg)(resolved);
+        const svg = stage.querySelector("svg");
+        if (!svg)
+            return;
+        svg.addEventListener("pointerdown", (event) => beginDrag(state, event));
+        svg.querySelectorAll("[id]").forEach((element) => {
+            element.style.cursor = "pointer";
+            element.addEventListener("click", (event) => {
+                event.stopPropagation();
+                const id = event.currentTarget.id;
+                if (id) {
+                    state.selectedId = id;
+                    renderTree(state);
+                    renderStage(state);
+                    renderInspector(state);
+                }
+            });
+        });
+        if (state.selectedId) {
+            const selected = svg.querySelector(`#${cssEscape(state.selectedId)}`);
+            if (selected)
+                drawSelection(svg, selected);
+        }
+    }
+    catch (error) {
+        stage.innerHTML = `<pre class="skme-error">${escapeHtml(errorMessage(error))}</pre>`;
+    }
+}
+function renderPlaybar(state) {
+    const playbar = requirePart(state.root, ".skme-playbar");
+    const duration = Math.max(0, Number(state.document.canvas.duration ?? 0));
+    playbar.innerHTML = [
+        `<button data-play>${state.playing ? "Pause" : "Play"}</button>`,
+        `<input data-time type="range" min="0" max="${duration || 1}" step="0.001" value="${state.currentTime}">`,
+        `<span>${state.currentTime.toFixed(2)}s / ${duration.toFixed(2)}s</span>`
+    ].join("");
+    playbar.querySelector("[data-play]").onclick = () => togglePlayback(state);
+    const slider = playbar.querySelector("[data-time]");
+    slider.oninput = () => {
+        state.currentTime = Number(slider.value);
+        renderStage(state);
+        renderPlaybar(state);
+    };
+}
+function renderInspector(state) {
+    const inspector = requirePart(state.root, ".skme-inspector");
+    const element = state.selectedId ? (0, edit_1.findElementById)(state.document, state.selectedId) : undefined;
+    if (!element) {
+        inspector.innerHTML = "<div class='skme-panel-title'>Inspector</div><p class='skme-muted'>Select an element.</p>";
+        return;
+    }
+    const tracks = (0, edit_1.listTimelineTracks)(state.document, element.id ?? "");
+    inspector.innerHTML = [
+        "<div class='skme-panel-title'>Inspector</div>",
+        fieldText("ID", element.id ?? "", true),
+        fieldText("Type", element.type, true),
+        numberField("x", numberProp(element, "x")),
+        numberField("y", numberProp(element, "y")),
+        numberField("width", numberProp(element, "width")),
+        numberField("height", numberProp(element, "height")),
+        numberField("opacity", numberProp(element, "opacity")),
+        numberField("rotation", numberProp(element, "rotation")),
+        numberField("scale", numberProp(element, "scale")),
+        paintField("fill", element.fill),
+        paintField("stroke", element.stroke),
+        numberField("strokeWidth", numberProp(element, "strokeWidth")),
+        textAreaField("text", element.type === "text" ? element.text ?? "" : undefined),
+        "<hr>",
+        renderKeyframeEditor(element),
+        "<hr>",
+        "<div class='skme-panel-title small'>Timeline</div>",
+        tracks.length ? tracks.map((track) => `<div class='skme-track'><b>${escapeHtml(track.property)}</b><span>${track.keyframes.length} keyframes</span></div>`).join("") : "<p class='skme-muted'>No tracks.</p>"
+    ].join("");
+    inspector.querySelectorAll("[data-prop]").forEach((input) => {
+        input.oninput = () => {
+            const property = input.dataset.prop;
+            const value = input.dataset.kind === "number" ? Number(input.value) : input.value;
+            if (input.dataset.kind === "number" && !Number.isFinite(value))
+                return;
+            updateProperty(state, element.id, property, value);
+        };
+    });
+    const propertySelect = inspector.querySelector("[data-key-prop]");
+    const keyButton = inspector.querySelector("[data-add-key]");
+    if (propertySelect && keyButton) {
+        keyButton.onclick = () => addKeyframe(state, element, propertySelect.value);
+    }
+}
+function renderKeyframeEditor(element) {
+    const id = element.id;
+    if (!id)
+        return "";
+    const options = (0, animatable_1.animatablePropertiesForElement)(element)
+        .map((spec) => `<option value="${escapeAttr(spec.property)}">${escapeHtml(spec.property)}</option>`)
+        .join("");
+    return [
+        "<div class='skme-panel-title small'>Keyframe</div>",
+        "<div class='skme-row'>",
+        `<select data-key-prop>${options}</select>`,
+        "<button data-add-key>Set</button>",
+        "</div>"
+    ].join("");
+}
+function updateProperty(state, id, property, value) {
+    try {
+        state.document = (0, edit_1.setElementProperty)(state.document, id, property, value);
+        markChanged(state);
+        renderStage(state);
+    }
+    catch (error) {
+        setStatus(state, errorMessage(error), true);
+    }
+}
+function addKeyframe(state, element, property) {
+    if (!element.id)
+        return;
+    const value = (0, animatable_1.getPropertyValue)(element, property) ?? (0, animatable_1.baseValueForProperty)(element, property);
+    if (value === undefined) {
+        setStatus(state, `No value for ${property}`, true);
+        return;
+    }
+    try {
+        state.document = (0, edit_1.setTimelineKeyframe)(state.document, element.id, property, state.currentTime, value);
+        markChanged(state);
+        renderInspector(state);
+        renderStage(state);
+    }
+    catch (error) {
+        setStatus(state, errorMessage(error), true);
+    }
+}
+function beginDrag(state, event) {
+    const target = event.target;
+    const id = closestSvgId(target);
+    if (!id)
+        return;
+    const element = (0, edit_1.findElementById)(state.document, id);
+    if (!element || !("x" in element) || !("y" in element))
+        return;
+    const point = svgPoint(event);
+    if (!point)
+        return;
+    state.selectedId = id;
+    state.drag = { id, start: point, baseX: Number(element.x ?? 0), baseY: Number(element.y ?? 0) };
+    const svg = event.currentTarget;
+    svg.setPointerCapture(event.pointerId);
+    svg.addEventListener("pointermove", dragMove);
+    svg.addEventListener("pointerup", dragEnd);
+    svg.addEventListener("pointercancel", dragEnd);
+    renderTree(state);
+    renderInspector(state);
+    function dragMove(moveEvent) {
+        if (!state.drag)
+            return;
+        const nextPoint = svgPoint(moveEvent);
+        if (!nextPoint)
+            return;
+        const current = (0, edit_1.findElementById)(state.document, state.drag.id);
+        if (!current || !("x" in current) || !("y" in current))
+            return;
+        current.x = state.drag.baseX + nextPoint[0] - state.drag.start[0];
+        current.y = state.drag.baseY + nextPoint[1] - state.drag.start[1];
+        renderStage(state);
+        renderInspector(state);
+    }
+    function dragEnd(endEvent) {
+        svg.releasePointerCapture(endEvent.pointerId);
+        svg.removeEventListener("pointermove", dragMove);
+        svg.removeEventListener("pointerup", dragEnd);
+        svg.removeEventListener("pointercancel", dragEnd);
+        state.drag = undefined;
+        markChanged(state);
+    }
+}
+function togglePlayback(state) {
+    state.playing = !state.playing;
+    state.lastFrame = performance.now();
+    renderPlaybar(state);
+    if (state.playing)
+        tick(state);
+}
+function tick(state) {
+    if (!state.playing)
+        return;
+    const now = performance.now();
+    const delta = Math.max(0, (now - state.lastFrame) / 1000);
+    state.lastFrame = now;
+    const duration = Math.max(0, Number(state.document.canvas.duration ?? 0));
+    state.currentTime = duration > 0 ? (state.currentTime + delta) % duration : 0;
+    renderStage(state);
+    renderPlaybar(state);
+    state.raf = window.requestAnimationFrame(() => tick(state));
+}
+function markChanged(state) {
+    state.options.onChange?.((0, utils_1.clone)(state.document));
+    setStatus(state, "Changed");
+    if (state.options.autoSaveDelay === false || !state.options.onSave)
+        return;
+    window.clearTimeout(state.saveTimer);
+    state.saveTimer = window.setTimeout(() => {
+        saveNow(state).catch((error) => setStatus(state, errorMessage(error), true));
+    }, state.options.autoSaveDelay ?? 800);
+}
+async function saveNow(state) {
+    if (!state.options.onSave) {
+        setStatus(state, "No save handler", true);
+        return;
+    }
+    await state.options.onSave((0, utils_1.clone)(state.document));
+    setStatus(state, "Saved");
+}
+async function exportDocument(state, format) {
+    try {
+        setStatus(state, format === "mp4" ? "Exporting MP4..." : "Exporting...");
+        await (0, browser_export_1.exportVisualInBrowser)(state.document, {
+            format,
+            title: state.options.title ?? "sketchmark",
+            time: state.currentTime,
+            sourceDocument: state.document,
+            onProgress: (progress) => setStatus(state, `Export ${progress}%`)
+        });
+        setStatus(state, "Exported");
+    }
+    catch (error) {
+        setStatus(state, errorMessage(error), true);
+    }
+}
+function assertValid(document) {
+    const result = (0, validate_1.validateVisualDocument)(document);
+    if (!result.ok)
+        throw new Error(result.issues.map((issue) => `${issue.path}: ${issue.message}`).join("\n"));
+}
+function fieldText(label, value, readonly) {
+    return `<label class="skme-field"><span>${label}</span><input value="${escapeAttr(value)}"${readonly ? " readonly" : ""}></label>`;
+}
+function numberField(property, value) {
+    if (value === undefined)
+        return "";
+    return `<label class="skme-field"><span>${property}</span><input data-prop="${escapeAttr(property)}" data-kind="number" type="number" step="0.1" value="${Number(value)}"></label>`;
+}
+function paintField(property, value) {
+    if (typeof value !== "string")
+        return "";
+    return `<label class="skme-field"><span>${property}</span><input data-prop="${escapeAttr(property)}" value="${escapeAttr(value)}"></label>`;
+}
+function textAreaField(property, value) {
+    if (value === undefined)
+        return "";
+    return `<label class="skme-field"><span>${property}</span><textarea data-prop="${escapeAttr(property)}">${escapeHtml(value)}</textarea></label>`;
+}
+function numberProp(element, property) {
+    const value = element[property];
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+function closestSvgId(target) {
+    let current = target;
+    while (current && current instanceof SVGElement) {
+        if (current.id)
+            return current.id;
+        current = current.parentElement;
+    }
+    return "";
+}
+function svgPoint(event) {
+    const svg = event.currentTarget ?? event.target.ownerSVGElement;
+    if (!svg)
+        return undefined;
+    const point = svg.createSVGPoint();
+    point.x = event.clientX;
+    point.y = event.clientY;
+    const matrix = svg.getScreenCTM();
+    if (!matrix)
+        return undefined;
+    const mapped = point.matrixTransform(matrix.inverse());
+    return [mapped.x, mapped.y];
+}
+function drawSelection(svg, selected) {
+    const box = selected.getBBox();
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("x", String(box.x));
+    rect.setAttribute("y", String(box.y));
+    rect.setAttribute("width", String(box.width));
+    rect.setAttribute("height", String(box.height));
+    rect.setAttribute("fill", "none");
+    rect.setAttribute("stroke", "#0b63ff");
+    rect.setAttribute("stroke-width", "1.5");
+    rect.setAttribute("stroke-dasharray", "5 4");
+    rect.setAttribute("pointer-events", "none");
+    svg.appendChild(rect);
+}
+function setStatus(state, message, isError = false) {
+    const status = state.root.querySelector("[data-status]");
+    if (!status)
+        return;
+    status.textContent = message;
+    status.classList.toggle("error", isError);
+}
+function requirePart(root, selector) {
+    const part = root.querySelector(selector);
+    if (!part)
+        throw new Error(`Missing editor part ${selector}.`);
+    return part;
+}
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+function escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(value) {
+    return escapeHtml(value);
+}
+function cssEscape(value) {
+    const css = globalThis.CSS;
+    if (css?.escape)
+        return css.escape(value);
+    return value.replace(/[^A-Za-z0-9_-]/g, (char) => `\\${char}`);
+}
+function ensureStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+.sketchmark-browser-editor{height:100%;min-height:100vh;display:grid;grid-template-columns:240px 1fr 320px;background:#c0c0c0;color:#111;font:13px Arial,sans-serif;overflow:hidden}
+.skme-tree,.skme-inspector{overflow:auto;background:#f2f2f2;border-right:1px solid #888;padding:8px}
+.skme-inspector{border-right:0;border-left:1px solid #888}
+.skme-main{min-width:0;display:grid;grid-template-rows:auto 1fr auto}
+.skme-toolbar,.skme-playbar{display:flex;align-items:center;gap:6px;padding:6px;background:#e5e5e5;border-bottom:1px solid #999}
+.skme-playbar{border-top:1px solid #999;border-bottom:0}
+.skme-playbar input{flex:1}
+.skme-stage-wrap{min-width:0;min-height:0;display:grid;place-items:center;overflow:auto;background:#fff}
+.skme-stage svg{display:block;max-width:100%;max-height:calc(100vh - 88px);background:#fff;border:1px solid #333;overflow:visible}
+.skme-panel-title{font-weight:bold;margin:0 0 8px}.skme-panel-title.small{font-size:12px;margin-top:8px}
+.skme-tree-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid transparent;background:transparent;text-align:left;padding:3px 6px;cursor:pointer}
+.skme-tree-row small{color:#555}.skme-tree-row.selected{background:#003399;color:#fff}.skme-tree-row.selected small{color:#dbeafe}
+.skme-field{display:grid;grid-template-columns:88px 1fr;gap:6px;align-items:center;margin:5px 0}
+.skme-field input,.skme-field textarea,.skme-field select{width:100%;box-sizing:border-box;font:13px Arial,sans-serif}
+.skme-field textarea{min-height:88px}
+.skme-row{display:grid;grid-template-columns:1fr auto;gap:6px}
+.skme-track{display:flex;justify-content:space-between;border:1px solid #aaa;background:#e9e9e9;margin:4px 0;padding:4px}
+.skme-spacer{flex:1}.skme-muted{color:#555}.skme-error,.skme-status.error{color:#900}.skme-status{min-width:90px;color:#333}
+button{font:13px Arial,sans-serif;padding:3px 8px}
+hr{border:0;border-top:1px solid #bbb;margin:10px 0}
+`;
+    document.head.appendChild(style);
+}

package/dist/src/edit.d.ts

@@ -12,8 +12,41 @@ export interface SetKeyframeOptions {
     curve?: TimelineCurve;
     ease?: string;
 }
+export type ElementPresetKind = "text" | "rectangle" | "circle" | "line" | "path" | "point" | "group";
+export interface InsertElementPresetOptions {
+    id?: string;
+    parentId?: string | null;
+    index?: number;
+}
+export interface InsertElementPresetResult {
+    document: VisualDocument;
+    element: VisualElement;
+    parentId?: string;
+}
+export type ReorderElementDirection = "backward" | "forward" | "back" | "front";
+export interface ReorderElementOptions {
+    direction?: ReorderElementDirection | string;
+    toIndex?: number;
+}
+export interface ReorderElementResult {
+    document: VisualDocument;
+    id: string;
+    index: number;
+    previousIndex: number;
+    parentId?: string;
+}
+export interface DeleteElementResult {
+    document: VisualDocument;
+    element: VisualElement;
+    id: string;
+    index: number;
+    parentId?: string;
+}
 export declare function listElementReferences(document: VisualDocument): ElementReference[];
 export declare function findElementById(document: VisualDocument, id: string): VisualElement | undefined;
+export declare function insertElementPreset(document: VisualDocument, preset: ElementPresetKind | string, options?: InsertElementPresetOptions): InsertElementPresetResult;
+export declare function reorderElement(document: VisualDocument, id: string, options?: ReorderElementOptions): ReorderElementResult;
+export declare function deleteElement(document: VisualDocument, id: string): DeleteElementResult;
 export declare function setElementProperty(document: VisualDocument, id: string, property: string, value: MotionValue): VisualDocument;
 export declare function setTimelineKeyframe(document: VisualDocument, id: string, property: string, time: number, value: MotionValue, options?: SetKeyframeOptions): VisualDocument;
 export declare function removeTimelineKeyframe(document: VisualDocument, id: string, property: string, time: number): VisualDocument;