sketchmark 2.1.7 → 2.1.8

package/bin/editor-ui.d.ts

@@ -5,7 +5,6 @@ export function editorHtml(
     mp4MuxerUrl?: string;
     mp4MuxerSource?: string | false;
     serverExportFallback?: boolean;
-    canvasStageRender?: boolean;
     localDocumentControls?: boolean;
     bootstrapScript?: string;
   }

package/bin/sketchmark.cjs

@@ -134,22 +134,68 @@ async function edit(args, options = {}) {
         sendJson(response, 200, editorDocumentPayload(doc));
         return;
       }
-      if (request.method === "POST" && url.pathname === "/api/property") {
-        if (options.readOnly) {
-          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
-          return;
-        }
-        const payload = await readJson(request);
-        const doc = core.setElementProperty(loadDocument(inputPath), requiredString(payload.id, "id"), requiredString(payload.property, "property"), normalizeMotionValue(payload.value));
-        saveDocument(inputPath, doc);
-        sendJson(response, 200, editorDocumentPayload(doc));
-        return;
-      }
-      if (request.method === "POST" && url.pathname === "/api/keyframe") {
-        if (options.readOnly) {
-          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
-          return;
-        }
+      if (request.method === "POST" && url.pathname === "/api/property") {
+        if (options.readOnly) {
+          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
+          return;
+        }
+        const payload = await readJson(request);
+        const doc = core.setElementProperty(loadDocument(inputPath), requiredString(payload.id, "id"), requiredString(payload.property, "property"), normalizeMotionValue(payload.value));
+        saveDocument(inputPath, doc);
+        sendJson(response, 200, editorDocumentPayload(doc));
+        return;
+      }
+      if (request.method === "POST" && url.pathname === "/api/element") {
+        if (options.readOnly) {
+          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
+          return;
+        }
+        const payload = await readJson(request);
+        const result = core.insertElementPreset(loadDocument(inputPath), requiredString(payload.preset, "preset"), {
+          parentId: optionalString(payload.parentId),
+          id: optionalString(payload.id),
+          index: optionalNumber(payload.index)
+        });
+        saveDocument(inputPath, result.document);
+        sendJson(response, 200, { ...editorDocumentPayload(result.document), insertedId: result.element.id, parentId: result.parentId || "" });
+        return;
+      }
+      if (request.method === "POST" && url.pathname === "/api/reorder") {
+        if (options.readOnly) {
+          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
+          return;
+        }
+        const payload = await readJson(request);
+        const result = core.reorderElement(loadDocument(inputPath), requiredString(payload.id, "id"), {
+          direction: optionalString(payload.direction),
+          toIndex: optionalNumber(payload.index)
+        });
+        saveDocument(inputPath, result.document);
+        sendJson(response, 200, {
+          ...editorDocumentPayload(result.document),
+          reorderedId: result.id,
+          parentId: result.parentId || "",
+          layerIndex: result.index,
+          previousLayerIndex: result.previousIndex
+        });
+        return;
+      }
+      if (request.method === "POST" && url.pathname === "/api/delete-element") {
+        if (options.readOnly) {
+          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
+          return;
+        }
+        const payload = await readJson(request);
+        const result = core.deleteElement(loadDocument(inputPath), requiredString(payload.id, "id"));
+        saveDocument(inputPath, result.document);
+        sendJson(response, 200, { ...editorDocumentPayload(result.document), deletedId: result.id, parentId: result.parentId || "" });
+        return;
+      }
+      if (request.method === "POST" && url.pathname === "/api/keyframe") {
+        if (options.readOnly) {
+          sendJson(response, 403, { ok: false, error: "Preview mode is read-only." });
+          return;
+        }
         const payload = await readJson(request);
         const curve = curveFromPayload(payload);
         const doc = core.setTimelineKeyframe(
@@ -538,18 +584,28 @@ function readJson(request) {
   });
 }
 
-function requiredString(value, name) {
-  if (typeof value !== "string" || !value) throw new Error(`${name} must be a non-empty string.`);
-  return value;
-}
-
-function requiredNumber(value, name) {
-  const number = Number(value);
-  if (!Number.isFinite(number)) throw new Error(`${name} must be a finite number.`);
-  return number;
-}
-
-function applyCanvasPatch(document, payload) {
+function requiredString(value, name) {
+  if (typeof value !== "string" || !value) throw new Error(`${name} must be a non-empty string.`);
+  return value;
+}
+
+function optionalString(value) {
+  return typeof value === "string" && value ? value : undefined;
+}
+
+function requiredNumber(value, name) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) throw new Error(`${name} must be a finite number.`);
+  return number;
+}
+
+function optionalNumber(value) {
+  if (value === undefined || value === null || value === "") return undefined;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : undefined;
+}
+
+function applyCanvasPatch(document, payload) {
   if (!payload || typeof payload !== "object" || Array.isArray(payload)) {
     throw new Error("canvas payload must be an object.");
   }

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;

package/dist/src/edit.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listElementReferences = listElementReferences;
 exports.findElementById = findElementById;
+exports.insertElementPreset = insertElementPreset;
+exports.reorderElement = reorderElement;
+exports.deleteElement = deleteElement;
 exports.setElementProperty = setElementProperty;
 exports.setTimelineKeyframe = setTimelineKeyframe;
 exports.removeTimelineKeyframe = removeTimelineKeyframe;
@@ -28,6 +31,67 @@ function findElementById(document, id) {
     });
     return found;
 }
+function insertElementPreset(document, preset, options = {}) {
+    const next = (0, utils_1.clone)(document);
+    repairLegacyTimelineCurves(next);
+    next.elements ?? (next.elements = []);
+    const parentId = typeof options.parentId === "string" && options.parentId ? options.parentId : "";
+    const parent = parentId ? requireElement(next, parentId) : undefined;
+    if (parent && parent.type !== "group")
+        throw new Error(`Element '${parentId}' is not a group.`);
+    const id = uniqueElementId(next, options.id || presetBaseId(preset));
+    const element = createPresetElement(preset, id, insertionPoint(next, parent));
+    const target = parent ? parent.children : next.elements;
+    insertAt(target, element, options.index);
+    assertValid(next);
+    return { document: next, element: (0, utils_1.clone)(element), ...(parentId ? { parentId } : {}) };
+}
+function reorderElement(document, id, options = {}) {
+    if (!id)
+        throw new Error("id must be a non-empty string.");
+    const next = (0, utils_1.clone)(document);
+    repairLegacyTimelineCurves(next);
+    next.elements ?? (next.elements = []);
+    const slot = findElementSlot(next.elements, id);
+    if (!slot)
+        throw new Error(`Unknown element '${id}'.`);
+    const previousIndex = slot.index;
+    const nextIndex = layerTargetIndex(slot.index, slot.elements.length, options);
+    if (nextIndex !== slot.index) {
+        const [element] = slot.elements.splice(slot.index, 1);
+        if (element)
+            slot.elements.splice(nextIndex, 0, element);
+    }
+    assertValid(next);
+    return {
+        document: next,
+        id,
+        previousIndex,
+        index: nextIndex,
+        ...(slot.parentId ? { parentId: slot.parentId } : {})
+    };
+}
+function deleteElement(document, id) {
+    if (!id)
+        throw new Error("id must be a non-empty string.");
+    const next = (0, utils_1.clone)(document);
+    repairLegacyTimelineCurves(next);
+    next.elements ?? (next.elements = []);
+    const slot = findElementSlot(next.elements, id);
+    if (!slot)
+        throw new Error(`Unknown element '${id}'.`);
+    const [element] = slot.elements.splice(slot.index, 1);
+    if (!element)
+        throw new Error(`Unknown element '${id}'.`);
+    assertValid(next);
+    return {
+        document: next,
+        element: (0, utils_1.clone)(element),
+        id,
+        index: slot.index,
+        ...(slot.parentId ? { parentId: slot.parentId } : {})
+    };
+}
 function setElementProperty(document, id, property, value) {
     const next = (0, utils_1.clone)(document);
     repairLegacyTimelineCurves(next);
@@ -127,6 +191,158 @@ function requireElement(document, id) {
         throw new Error(`Unknown element '${id}'.`);
     return element;
 }
+function findElementSlot(elements, id, parentId = "") {
+    for (let index = 0; index < elements.length; index += 1) {
+        const element = elements[index];
+        if (!element)
+            continue;
+        if (element.id === id)
+            return { elements, index, parentId };
+        if (element.type === "group") {
+            const found = findElementSlot(element.children, id, element.id || parentId);
+            if (found)
+                return found;
+        }
+    }
+}
+function layerTargetIndex(index, length, options) {
+    if (length <= 1)
+        return index;
+    if (options.toIndex !== undefined) {
+        const nextIndex = Math.round(Number(options.toIndex));
+        if (!Number.isFinite(nextIndex))
+            throw new Error("toIndex must be a finite number.");
+        return Math.max(0, Math.min(length - 1, nextIndex));
+    }
+    switch (options.direction || "forward") {
+        case "backward":
+            return Math.max(0, index - 1);
+        case "forward":
+            return Math.min(length - 1, index + 1);
+        case "back":
+            return 0;
+        case "front":
+            return length - 1;
+        default:
+            throw new Error(`Unknown reorder direction '${options.direction}'.`);
+    }
+}
+function createPresetElement(preset, id, point) {
+    const x = Math.round(point[0]);
+    const y = Math.round(point[1]);
+    switch (preset) {
+        case "text":
+            return {
+                id,
+                type: "text",
+                x,
+                y,
+                text: "Text",
+                align: "center",
+                valign: "middle",
+                fontSize: 36,
+                weight: 700,
+                fill: "#111827"
+            };
+        case "rectangle":
+            return {
+                id,
+                type: "path",
+                x,
+                y,
+                d: "M -80 -50 H 80 V 50 H -80 Z",
+                fill: "#dbeafe",
+                stroke: "#2563eb",
+                strokeWidth: 3
+            };
+        case "circle":
+            return {
+                id,
+                type: "path",
+                x,
+                y,
+                d: "M 0 -55 A 55 55 0 1 1 0 55 A 55 55 0 1 1 0 -55 Z",
+                fill: "#dcfce7",
+                stroke: "#16a34a",
+                strokeWidth: 3
+            };
+        case "line":
+            return {
+                id,
+                type: "path",
+                x,
+                y,
+                d: "M -90 0 H 90",
+                fill: "none",
+                stroke: "#111827",
+                strokeWidth: 5,
+                strokeCap: "round"
+            };
+        case "path":
+            return {
+                id,
+                type: "path",
+                x,
+                y,
+                d: "M -80 40 C -40 -50 40 -50 80 40",
+                fill: "none",
+                stroke: "#7c3aed",
+                strokeWidth: 5,
+                strokeCap: "round"
+            };
+        case "point":
+            return { id, type: "point", x, y };
+        case "group":
+            return {
+                id,
+                type: "group",
+                x: Math.round(x - 100),
+                y: Math.round(y - 80),
+                width: 200,
+                height: 160,
+                children: []
+            };
+        default:
+            throw new Error(`Unknown element preset '${preset}'.`);
+    }
+}
+function insertionPoint(document, parent) {
+    if (parent && parent.type === "group") {
+        return [Math.max(0, Number(parent.width ?? 0)) / 2, Math.max(0, Number(parent.height ?? 0)) / 2];
+    }
+    return [Math.max(1, Number(document.canvas?.width ?? 1)) / 2, Math.max(1, Number(document.canvas?.height ?? 1)) / 2];
+}
+function insertAt(elements, element, index) {
+    if (Number.isInteger(index) && Number(index) >= 0 && Number(index) <= elements.length)
+        elements.splice(Number(index), 0, element);
+    else
+        elements.push(element);
+}
+function uniqueElementId(document, base) {
+    const ids = new Set();
+    visitElements(document.elements ?? [], (element) => {
+        if (element.id)
+            ids.add(element.id);
+    });
+    const normalized = presetBaseId(base);
+    if (!ids.has(normalized))
+        return normalized;
+    for (let index = 2; index < 10000; index += 1) {
+        const candidate = `${normalized}_${index}`;
+        if (!ids.has(candidate))
+            return candidate;
+    }
+    throw new Error(`Could not generate a unique id for '${normalized}'.`);
+}
+function presetBaseId(value) {
+    const text = String(value || "element")
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9_.-]+/g, "_")
+        .replace(/^[^a-z_]+/i, "")
+        .replace(/^_+|_+$/g, "");
+    return text || "element";
+}
 function applyProperty(element, property, value) {
     (0, animatable_1.applyPropertyValue)(element, property, value);
 }

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ export * from "./diagnostics";
 export * from "./schema";
 export * from "./keyframes";
 export * from "./edit";
+export { deleteElement, insertElementPreset, reorderElement } from "./edit";
 export * from "./animatable";
 export * from "./render/svg";
 export * from "./render/html";

package/dist/src/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.reorderElement = exports.insertElementPreset = exports.deleteElement = void 0;
 __exportStar(require("./types"), exports);
 __exportStar(require("./validate"), exports);
 __exportStar(require("./normalize"), exports);
@@ -21,6 +22,10 @@ __exportStar(require("./diagnostics"), exports);
 __exportStar(require("./schema"), exports);
 __exportStar(require("./keyframes"), exports);
 __exportStar(require("./edit"), exports);
+var edit_1 = require("./edit");
+Object.defineProperty(exports, "deleteElement", { enumerable: true, get: function () { return edit_1.deleteElement; } });
+Object.defineProperty(exports, "insertElementPreset", { enumerable: true, get: function () { return edit_1.insertElementPreset; } });
+Object.defineProperty(exports, "reorderElement", { enumerable: true, get: function () { return edit_1.reorderElement; } });
 __exportStar(require("./animatable"), exports);
 __exportStar(require("./render/svg"), exports);
 __exportStar(require("./render/html"), exports);

package/dist/tests/run.js

@@ -462,6 +462,58 @@ test("compiles per-property curves and timing offsets", () => {
     assert(keyframes[1].time === 1.5, `global and property offsets should shift the target keyframe, got ${keyframes[1].time}`);
     assert(near((0, src_1.resolveVisualFrame)(animated, 1).elements[0].x, 0), "hold curve should keep the point at the base value before the target");
 });
+test("inserts element presets at root and inside groups", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 320, height: 180, duration: 2 },
+        elements: [{ id: "group", type: "group", x: 20, y: 30, width: 120, height: 80, children: [] }]
+    };
+    const rootInsert = (0, src_1.insertElementPreset)(doc, "rectangle");
+    assert(rootInsert.element.id === "rectangle", "root preset should use the preset name as id");
+    assert((0, src_1.validateVisualDocument)(rootInsert.document).ok, "root preset insert should validate");
+    assert((0, src_1.findElementById)(rootInsert.document, "rectangle").type === "path", "rectangle preset should be a path");
+    const nestedInsert = (0, src_1.insertElementPreset)(rootInsert.document, "text", { parentId: "group" });
+    assert(nestedInsert.parentId === "group", "nested insert should report parent id");
+    assert((0, src_1.findElementById)(nestedInsert.document, "group").children.some((item) => item.id === "text"), "nested preset should be added to group children");
+    const duplicate = (0, src_1.insertElementPreset)(nestedInsert.document, "text", { parentId: "group" });
+    assert(duplicate.element.id === "text_2", "duplicate preset ids should be made unique");
+});
+test("reorders and deletes elements inside their sibling layer", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 320, height: 180, duration: 2 },
+        elements: [
+            { id: "a", type: "point", x: 0, y: 0 },
+            { id: "b", type: "point", x: 10, y: 0 },
+            {
+                id: "group",
+                type: "group",
+                x: 20,
+                y: 30,
+                width: 120,
+                height: 80,
+                children: [
+                    { id: "child1", type: "point", x: 0, y: 0 },
+                    { id: "child2", type: "point", x: 10, y: 0 }
+                ]
+            }
+        ]
+    };
+    const front = (0, src_1.reorderElement)(doc, "a", { direction: "front" });
+    assert(front.previousIndex === 0 && front.index === 2, "root reorder should report old and new indexes");
+    assert((front.document.elements ?? []).map((item) => item.id).join(",") === "b,group,a", "front should move the element to the end of root order");
+    const backward = (0, src_1.reorderElement)(front.document, "a", { direction: "backward" });
+    assert((backward.document.elements ?? []).map((item) => item.id).join(",") === "b,a,group", "backward should move one layer down");
+    const nested = (0, src_1.reorderElement)(backward.document, "child1", { direction: "front" });
+    assert(nested.parentId === "group", "nested reorder should report parent id");
+    assert((0, src_1.findElementById)(nested.document, "group").children.map((item) => item.id).join(",") === "child2,child1", "nested reorder should only affect group children");
+    const deleted = (0, src_1.deleteElement)(nested.document, "child2");
+    assert(deleted.parentId === "group", "nested delete should report parent id");
+    assert(!(0, src_1.findElementById)(deleted.document, "child2"), "deleted child should be removed");
+    assert((0, src_1.findElementById)(deleted.document, "group").children.map((item) => item.id).join(",") === "child1", "delete should preserve remaining siblings");
+    const deletedGroup = (0, src_1.deleteElement)(deleted.document, "group");
+    assert(!(0, src_1.findElementById)(deletedGroup.document, "group") && !(0, src_1.findElementById)(deletedGroup.document, "child1"), "deleting a group should remove its children");
+});
 test("edits nested element properties and timeline keyframes", () => {
     const doc = {
         version: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Render kernel for Sketchmark visual documents.",
   "license": "MIT",
   "type": "commonjs",
@@ -25,6 +25,11 @@
       "require": "./dist/src/browser-export.js",
       "default": "./dist/src/browser-export.js"
     },
+    "./edit": {
+      "types": "./dist/src/edit.d.ts",
+      "require": "./dist/src/edit.js",
+      "default": "./dist/src/edit.js"
+    },
     "./editor": {
       "types": "./bin/editor-ui.d.ts",
       "require": "./bin/editor-ui.cjs",