sketchmark 2.1.3 → 2.1.5

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

@@ -9,6 +9,7 @@ exports.listTimelineTracks = listTimelineTracks;
 exports.roundedRectClipPath = roundedRectClipPath;
 exports.imageRoundedClip = imageRoundedClip;
 const animatable_1 = require("./animatable");
+const keyframes_1 = require("./keyframes");
 const utils_1 = require("./utils");
 const validate_1 = require("./validate");
 function listElementReferences(document) {
@@ -29,6 +30,7 @@ function findElementById(document, id) {
 }
 function setElementProperty(document, id, property, value) {
     const next = (0, utils_1.clone)(document);
+    repairLegacyTimelineCurves(next);
     const element = requireElement(next, id);
     applyProperty(element, property, value);
     assertValid(next);
@@ -39,6 +41,7 @@ function setTimelineKeyframe(document, id, property, time, value, options = {})
     if (!(0, utils_1.isFiniteNumber)(time) || time < 0)
         throw new Error("Keyframe time must be a non-negative finite number.");
     const next = (0, utils_1.clone)(document);
+    repairLegacyTimelineCurves(next);
     const element = requireElement(next, id);
     element.timeline ?? (element.timeline = {});
     (_a = element.timeline).tracks ?? (_a.tracks = {});
@@ -157,6 +160,42 @@ function assertValid(document) {
         throw new Error(first ? `${first.path}: ${first.message}` : "Invalid visual document.");
     }
 }
+function repairLegacyTimelineCurves(document) {
+    visitElements(document.elements ?? [], (element) => {
+        for (const track of Object.values(element.timeline?.tracks ?? {})) {
+            repairTrackCurve(track);
+            for (const frame of track.keyframes ?? [])
+                repairKeyframeCurve(frame);
+        }
+    });
+}
+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;
+    }
+}
+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];
+    }
+}
+function legacyCurve(value) {
+    return (0, keyframes_1.timelineCurvePreset)(value);
+}
 function finiteOrZero(value) {
     return (0, utils_1.isFiniteNumber)(value) ? value : 0;
 }

package/package.json

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