sketchmark 2.1.2 → 2.1.4

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

@@ -0,0 +1,10 @@
+import type { VisualDocument } from "./types";
+export type BrowserExportFormat = "svg" | "png" | "jpg" | "html" | "json" | "mp4" | "webm";
+export type BrowserExportOptions = {
+    format: BrowserExportFormat;
+    title: string;
+    time?: number;
+    sourceDocument?: VisualDocument;
+    onProgress?: (progress: number) => void;
+};
+export declare function exportVisualInBrowser(document: VisualDocument, options: BrowserExportOptions): Promise<void>;

package/dist/src/browser-export.js

@@ -0,0 +1,220 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportVisualInBrowser = exportVisualInBrowser;
+const html_1 = require("./render/html");
+const svg_1 = require("./render/svg");
+async function exportVisualInBrowser(document, options) {
+    const format = options.format;
+    const time = Math.max(0, Number(options.time ?? 0));
+    const title = safeFileName(options.title);
+    if (format === "json") {
+        downloadBlob(new Blob([JSON.stringify(options.sourceDocument ?? document, null, 2)], { type: "application/json" }), `${title}.json`);
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "svg") {
+        downloadBlob(new Blob([(0, svg_1.renderToSvg)(document, { time })], { type: "image/svg+xml;charset=utf-8" }), `${title}.svg`);
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "html") {
+        downloadBlob(new Blob([(0, html_1.renderToHtml)(document, { time })], { type: "text/html;charset=utf-8" }), `${title}.html`);
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "png" || format === "jpg") {
+        await exportRasterFrame(document, { format, title, time });
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "mp4") {
+        await exportMp4(document, { title, onProgress: options.onProgress });
+        return;
+    }
+    throw new Error("Browser WebM export is not implemented yet. Use MP4 or a server exporter.");
+}
+async function exportRasterFrame(document, options) {
+    const { width, height } = canvasSize(document);
+    const canvas = documentCanvas(width, height);
+    const svg = (0, svg_1.renderToSvg)(document, { time: options.time });
+    await drawSvgToCanvas(svg, canvas, width, height);
+    const mimeType = options.format === "jpg" ? "image/jpeg" : "image/png";
+    const blob = await canvasToBlob(canvas, mimeType, options.format === "jpg" ? 0.92 : undefined);
+    downloadBlob(blob, `${options.title}.${options.format}`);
+}
+async function exportMp4(document, options) {
+    const globalApi = globalThis;
+    const VideoEncoderCtor = globalApi.VideoEncoder;
+    const VideoFrameCtor = globalApi.VideoFrame;
+    if (!VideoEncoderCtor || !VideoFrameCtor) {
+        throw new Error("Browser MP4 export requires WebCodecs. Try Chrome or Edge, or use a server exporter.");
+    }
+    const duration = Number(document.canvas.duration ?? 0);
+    if (!Number.isFinite(duration) || duration <= 0) {
+        throw new Error("MP4 export requires a positive canvas.duration.");
+    }
+    const fps = Math.max(1, Math.round(Number(document.canvas.fps ?? 30) || 30));
+    const { width, height } = canvasSize(document);
+    const encodeWidth = evenDimension(width);
+    const encodeHeight = evenDimension(height);
+    const totalFrames = Math.max(1, Math.ceil(duration * fps));
+    const { Muxer, ArrayBufferTarget } = await loadMp4Muxer();
+    const target = new ArrayBufferTarget();
+    const muxer = new Muxer({
+        target,
+        video: { codec: "avc", width: encodeWidth, height: encodeHeight },
+        fastStart: "in-memory"
+    });
+    let encoderError;
+    const encoder = new VideoEncoderCtor({
+        output: (chunk, metadata) => muxer.addVideoChunk(chunk, metadata),
+        error: (error) => {
+            encoderError = error;
+        }
+    });
+    encoder.configure({
+        codec: "avc1.640028",
+        width: encodeWidth,
+        height: encodeHeight,
+        bitrate: 5000000,
+        framerate: fps
+    });
+    const canvas = documentCanvas(encodeWidth, encodeHeight);
+    try {
+        for (let frameIndex = 0; frameIndex < totalFrames; frameIndex += 1) {
+            const frameTime = Math.min(duration, frameIndex / fps);
+            const svg = (0, svg_1.renderToSvg)(document, { time: frameTime });
+            await drawSvgToCanvas(svg, canvas, encodeWidth, encodeHeight);
+            const frame = new VideoFrameCtor(canvas, {
+                timestamp: Math.round((frameIndex / fps) * 1000000),
+                duration: Math.round((1 / fps) * 1000000)
+            });
+            encoder.encode(frame, { keyFrame: frameIndex % Math.max(1, fps * 2) === 0 });
+            frame.close();
+            if (encoderError)
+                throw encoderError;
+            if (frameIndex % 5 === 0 || frameIndex === totalFrames - 1) {
+                options.onProgress?.(Math.round(((frameIndex + 1) / totalFrames) * 100));
+                await yieldToBrowser();
+            }
+        }
+        await encoder.flush();
+        if (encoderError)
+            throw encoderError;
+        encoder.close();
+        muxer.finalize();
+        downloadBlob(new Blob([target.buffer], { type: "video/mp4" }), `${options.title}.mp4`);
+        options.onProgress?.(100);
+    }
+    catch (error) {
+        try {
+            encoder.close();
+        }
+        catch {
+            // Ignore close failures after encoder errors.
+        }
+        throw error;
+    }
+}
+async function loadMp4Muxer() {
+    return Promise.resolve().then(() => __importStar(require("mp4-muxer")));
+}
+function documentCanvas(width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+}
+async function drawSvgToCanvas(svg, canvas, width, height) {
+    const context = canvas.getContext("2d");
+    if (!context)
+        throw new Error("Could not create a 2D canvas context.");
+    const image = await loadSvgImage(svg);
+    context.clearRect(0, 0, width, height);
+    context.drawImage(image, 0, 0, width, height);
+}
+function loadSvgImage(svg) {
+    return new Promise((resolve, reject) => {
+        const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const image = new Image();
+        image.onload = () => {
+            URL.revokeObjectURL(url);
+            resolve(image);
+        };
+        image.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error("Could not rasterize the SVG frame in the browser."));
+        };
+        image.src = url;
+    });
+}
+function canvasToBlob(canvas, type, quality) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob)
+                resolve(blob);
+            else
+                reject(new Error("Could not export the canvas frame. Cross-origin images can block browser raster export."));
+        }, type, quality);
+    });
+}
+function canvasSize(document) {
+    return {
+        width: Math.max(1, Math.round(Number(document.canvas.width) || 1)),
+        height: Math.max(1, Math.round(Number(document.canvas.height) || 1))
+    };
+}
+function evenDimension(value) {
+    const rounded = Math.max(2, Math.round(value));
+    return rounded % 2 === 0 ? rounded : rounded + 1;
+}
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+}
+function safeFileName(value) {
+    return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 80) || "sketchmark";
+}
+function yieldToBrowser() {
+    return new Promise((resolve) => window.setTimeout(resolve, 0));
+}

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,46 +1,59 @@
-{
-  "name": "sketchmark",
-  "version": "2.1.2",
-  "description": "Render kernel for Sketchmark visual documents.",
-  "license": "MIT",
-  "type": "commonjs",
-  "main": "./dist/src/index.js",
-  "types": "./dist/src/index.d.ts",
-  "bin": {
-    "sketchmark": "./bin/sketchmark.cjs"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "require": "./dist/src/index.js",
-      "default": "./dist/src/index.js"
-    },
-    "./presets": {
-      "types": "./dist/src/presets/index.d.ts",
-      "require": "./dist/src/presets/index.js",
-      "default": "./dist/src/presets/index.js"
-    },
-    "./schema": {
-      "default": "./schema/visual.schema.json"
-    }
-  },
-  "scripts": {
-    "build": "node scripts/build.cjs",
-    "render": "node bin/sketchmark.cjs render",
-    "test": "npm run build && node dist/tests/run.js",
-    "prepublishOnly": "npm test"
-  },
-  "files": [
-    "bin",
-    "dist",
-    "schema",
-    "README.md"
-  ],
-  "devDependencies": {
-    "typescript": "^5.9.3"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "sideEffects": false
-}
+{
+  "name": "sketchmark",
+  "version": "2.1.4",
+  "description": "Render kernel for Sketchmark visual documents.",
+  "license": "MIT",
+  "type": "commonjs",
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "bin": {
+    "sketchmark": "./bin/sketchmark.cjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "require": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    },
+    "./presets": {
+      "types": "./dist/src/presets/index.d.ts",
+      "require": "./dist/src/presets/index.js",
+      "default": "./dist/src/presets/index.js"
+    },
+    "./browser-export": {
+      "types": "./dist/src/browser-export.d.ts",
+      "require": "./dist/src/browser-export.js",
+      "default": "./dist/src/browser-export.js"
+    },
+    "./editor": {
+      "types": "./bin/editor-ui.d.ts",
+      "require": "./bin/editor-ui.cjs",
+      "default": "./bin/editor-ui.cjs"
+    },
+    "./schema": {
+      "default": "./schema/visual.schema.json"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build.cjs",
+    "render": "node bin/sketchmark.cjs render",
+    "test": "npm run build && node dist/tests/run.js",
+    "prepublishOnly": "npm test"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "schema",
+    "README.md"
+  ],
+  "dependencies": {
+    "mp4-muxer": "^5.2.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false
+}