sketchmark 2.1.4 → 2.1.6

package/bin/editor-ui.cjs

@@ -686,7 +686,7 @@ function renderInspector() {
   const element = findElement(selectedId);
   const exportPanel = renderExportPanel();
   if (!element) {
-    inspector.innerHTML = exportPanel + "<div class='muted'>Select an element.</div>";
+    inspector.innerHTML = "<div class='muted'>Select an element.</div>" + exportPanel;
     bindPanelStates(inspector);
     bindExportButtons();
     return;
@@ -753,20 +753,20 @@ function renderInspector() {
     paintRows +
     paintHint;
   const contentRows = pathRows + textRows + sourceRows;
-  const keyframeRows =
-    "<div class='row'><label>Time<input id='kfTime' type='number' step='0.05' value='" + currentTime.toFixed(2) + "'></label><div></div></div>" +
+  const keyframeRows =
+    "<div class='row'><label>Time<input id='kfTime' type='number' step='0.05' value='" + currentTime.toFixed(2) + "'></label><div></div></div>" +
     "<p class='tiny'>Changing sidebar values updates keyframes at the current time.</p>" +
     "<p class='tiny'>Interpolation curves are edited from timeline badges.</p>" +
-    "<p class='tiny'>Drag to move. Use the square to scale and the round handle to rotate.</p>";
+    "<p class='tiny'>Drag to move. Use the square to scale and the round handle to rotate.</p>";
   inspector.innerHTML =
-    exportPanel +
     panelDetails("inspector-selected", "Selected", selectedRows, { defaultOpen: true, meta: element.type }) +
-    panelDetails("inspector-transform", "Transform", transformRows, { defaultOpen: false }) +
-    panelDetails("inspector-appearance", "Appearance", appearanceRows, { defaultOpen: false }) +
-    (contentRows ? panelDetails("inspector-content", "Path / Content", contentRows, { defaultOpen: false }) : "") +
-    (supportsEffects ? panelDetails("inspector-effects", "Effects", effectsRows, { defaultOpen: false }) : "") +
-    (structuredPaintRows ? panelDetails("inspector-structured-paint", "Structured Paint", structuredPaintRows, { defaultOpen: false }) : "") +
-    panelDetails("inspector-keyframe", "Keyframe", keyframeRows, { defaultOpen: false });
+    panelDetails("inspector-transform", "Transform", transformRows, { defaultOpen: false }) +
+    panelDetails("inspector-appearance", "Appearance", appearanceRows, { defaultOpen: false }) +
+    (contentRows ? panelDetails("inspector-content", "Path / Content", contentRows, { defaultOpen: false }) : "") +
+    (supportsEffects ? panelDetails("inspector-effects", "Effects", effectsRows, { defaultOpen: false }) : "") +
+    (structuredPaintRows ? panelDetails("inspector-structured-paint", "Structured Paint", structuredPaintRows, { defaultOpen: false }) : "") +
+    panelDetails("inspector-keyframe", "Keyframe", keyframeRows, { defaultOpen: false }) +
+    exportPanel;
   bindPanelStates(inspector);
   bindExportButtons();
   if (supportsPaint) {

package/dist/src/edit.js

@@ -142,13 +142,20 @@ function makeKeyframe(time, value, options) {
 function mergeKeyframe(existing, next) {
     if (Array.isArray(existing))
         return next;
-    return {
+    const merged = {
         ...existing,
-        ...next,
-        in: next.in ?? existing.in,
-        out: next.out ?? existing.out,
-        interpolation: next.interpolation ?? existing.interpolation
+        ...next
     };
+    mergeCurveValue(merged, "in", next.in ?? existing.in);
+    mergeCurveValue(merged, "out", next.out ?? existing.out);
+    mergeCurveValue(merged, "interpolation", next.interpolation ?? existing.interpolation);
+    return merged;
+}
+function mergeCurveValue(frame, key, value) {
+    if (value)
+        frame[key] = value;
+    else
+        delete frame[key];
 }
 function keyframeTime(frame) {
     return Array.isArray(frame) ? frame[0] : frame.time;
@@ -171,30 +178,88 @@ function repairLegacyTimelineCurves(document) {
 }
 function repairTrackCurve(track) {
     const record = track;
-    if (typeof record.curve === "string") {
-        const curve = legacyCurve(record.curve);
-        if (curve)
-            record.curve = curve;
-        else
-            delete record.curve;
-    }
+    repairCurveField(record, "curve");
 }
 function repairKeyframeCurve(frame) {
     if (Array.isArray(frame))
         return;
     const record = frame;
-    for (const key of ["in", "out", "interpolation"]) {
-        if (typeof record[key] !== "string")
-            continue;
-        const curve = legacyCurve(record[key]);
-        if (curve)
-            record[key] = curve;
-        else
-            delete record[key];
+    for (const key of ["in", "out", "interpolation"])
+        repairCurveField(record, key);
+}
+function repairCurveField(record, key) {
+    if (!(key in record))
+        return;
+    const curve = coerceTimelineCurve(record[key]);
+    if (curve)
+        record[key] = curve;
+    else
+        delete record[key];
+}
+function coerceTimelineCurve(value) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "string")
+        return legacyCurve(value);
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return undefined;
+    const record = value;
+    if (record.type === "hold")
+        return { type: "hold" };
+    if (record.type === "cubicBezier") {
+        const x1 = finiteNumber(record.x1);
+        const y1 = finiteNumber(record.y1);
+        const x2 = finiteNumber(record.x2);
+        const y2 = finiteNumber(record.y2);
+        if (x1 === undefined || y1 === undefined || x2 === undefined || y2 === undefined)
+            return undefined;
+        if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1)
+            return undefined;
+        return { type: "cubicBezier", x1, y1, x2, y2 };
+    }
+    if (record.type === "graph") {
+        const points = Array.isArray(record.points)
+            ? record.points.map(coerceCurvePoint).filter((point) => Boolean(point))
+            : [];
+        if (points.length < 2)
+            return undefined;
+        let previousX = Number.NEGATIVE_INFINITY;
+        for (const point of points) {
+            if (point[0] < 0 || point[0] > 1 || point[0] <= previousX)
+                return undefined;
+            previousX = point[0];
+        }
+        if (points[0]?.[0] !== 0 || points[points.length - 1]?.[0] !== 1)
+            return undefined;
+        return { type: "graph", points };
     }
+    return undefined;
+}
+function coerceCurvePoint(value) {
+    if (!Array.isArray(value) || value.length < 2)
+        return undefined;
+    const x = finiteNumber(value[0]);
+    const y = finiteNumber(value[1]);
+    return x === undefined || y === undefined ? undefined : [x, y];
+}
+function finiteNumber(value) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : undefined;
 }
 function legacyCurve(value) {
-    return (0, keyframes_1.timelineCurvePreset)(value);
+    switch (value.trim()) {
+        case "ease":
+        case "easeInOut":
+        case "ease-inout":
+        case "easeInout":
+            return (0, keyframes_1.timelineCurvePreset)("ease-in-out");
+        case "easeIn":
+            return (0, keyframes_1.timelineCurvePreset)("ease-in");
+        case "easeOut":
+            return (0, keyframes_1.timelineCurvePreset)("ease-out");
+        default:
+            return (0, keyframes_1.timelineCurvePreset)(value);
+    }
 }
 function finiteOrZero(value) {
     return (0, utils_1.isFiniteNumber)(value) ? value : 0;

package/dist/src/keyframes.js

@@ -151,13 +151,20 @@ function makeKeyframe(time, value, options = {}) {
 function mergeKeyframe(existing, next) {
     if (Array.isArray(existing))
         return next;
-    return {
+    const merged = {
         ...existing,
-        ...next,
-        in: next.in ?? existing.in,
-        out: next.out ?? existing.out,
-        interpolation: next.interpolation ?? existing.interpolation
+        ...next
     };
+    mergeCurveValue(merged, "in", next.in ?? existing.in);
+    mergeCurveValue(merged, "out", next.out ?? existing.out);
+    mergeCurveValue(merged, "interpolation", next.interpolation ?? existing.interpolation);
+    return merged;
+}
+function mergeCurveValue(frame, key, value) {
+    if (value)
+        frame[key] = value;
+    else
+        delete frame[key];
 }
 function keyframeTime(frame) {
     return Array.isArray(frame) ? frame[0] : frame.time;

package/dist/tests/run.js

@@ -487,6 +487,39 @@ test("edits nested element properties and timeline keyframes", () => {
     const cleaned = (0, src_1.removeTimelineKeyframe)(animated, "nested", "position", 1);
     assert(!(0, src_1.listTimelineTracks)(cleaned, "nested").length, "timeline keyframe removal should prune empty tracks");
 });
+test("editor helpers repair malformed timeline curve fields before validating", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 320, height: 180, duration: 2 },
+        elements: [
+            {
+                id: "dot",
+                type: "point",
+                x: 0,
+                y: 0,
+                timeline: {
+                    tracks: {
+                        position: {
+                            curve: "easeOut",
+                            keyframes: [
+                                { time: 0, value: [0, 0], in: null, interpolation: ["linear"] },
+                                { time: 1, value: [100, 0] }
+                            ]
+                        }
+                    }
+                }
+            }
+        ]
+    };
+    const repaired = (0, src_1.setTimelineKeyframe)(doc, "dot", "position", 0, [0, 0], { out: { type: "hold" } });
+    const result = (0, src_1.validateVisualDocument)(repaired);
+    assert(result.ok, `repaired edit document should validate: ${result.issues.map((item) => item.message).join("; ")}`);
+    const track = (repaired.elements?.[0]).timeline.tracks.position;
+    const first = track.keyframes[0];
+    assert(track.curve.type === "cubicBezier", "legacy camel-case track curve should be canonicalized");
+    assert(first.out.type === "hold", "new keyframe curve should be applied");
+    assert(!("in" in first) && !("interpolation" in first), "malformed keyframe curves should be removed");
+});
 test("edits and renders path position offsets", () => {
     const doc = {
         version: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "Render kernel for Sketchmark visual documents.",
   "license": "MIT",
   "type": "commonjs",