@sliiu/present-renderer 0.0.0-stage → 0.1.1

package/dist/cjs/metafile-preview.js

@@ -0,0 +1,142 @@
+"use strict";
+// EMF / WMF 浏览器画不出来。上屏前转成 SVG，原 src 不动，导出仍写回图元文件。
+// 转出来的 SVG 不放进 shape.svgSrc：那个字段会写成 asvg:svgBlip，文件就会多出一个部件。
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.METAFILE_MARKER_SRC = void 0;
+exports.isMetafileDataUrl = isMetafileDataUrl;
+exports.isMetafileBytes = isMetafileBytes;
+exports.previewImageSrc = previewImageSrc;
+exports.waitForMetafilePreviews = waitForMetafilePreviews;
+const emf_converter_1 = require("emf-converter");
+exports.METAFILE_MARKER_SRC = "data:image/svg+xml," +
+    encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect x="1.5" y="1.5" width="61" height="61" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" stroke-dasharray="4 3"/></svg>`);
+const cache = new Map();
+const jobs = new Map();
+const watched = new WeakSet();
+function isMetafileDataUrl(src) {
+    return /^data:image\/(?:x-)?(?:emf|wmf)(?:;|,)/i.test(src);
+}
+/** EMF 签名在偏移 40（" EMF"）。可放置 WMF 以 0x9AC6CDD7 开头。 */
+function isMetafileBytes(bytes, mime = "") {
+    if (/emf|wmf/i.test(mime))
+        return true;
+    if (bytes.length >= 4) {
+        const key = bytes[0] | (bytes[1] << 8) | (bytes[2] << 16) | (bytes[3] << 24);
+        if (key === 0x9ac6cdd7)
+            return true;
+    }
+    if (bytes.length >= 44) {
+        const sig = bytes[40] | (bytes[41] << 8) | (bytes[42] << 16) | (bytes[43] << 24);
+        if (sig === 0x464d4520)
+            return true;
+    }
+    return false;
+}
+/**
+ * 画布该用的地址。
+ * 返回空字符串表示图元文件还在转，调用方先留白，完成后再画。
+ * 转失败返回虚线占位。普通图片原样返回。
+ */
+function previewImageSrc(src, img, onReady) {
+    const hit = cache.get(src);
+    if (hit?.kind === "native")
+        return src;
+    if (hit?.kind === "svg" || hit?.kind === "marker")
+        return hit.url;
+    if (jobs.has(src))
+        return "";
+    if (isMetafileDataUrl(src)) {
+        ensure(src, onReady);
+        return "";
+    }
+    if (img && !img.complete && onReady && !watched.has(img)) {
+        watched.add(img);
+        img.addEventListener("error", () => {
+            ensure(src, onReady);
+        }, { once: true });
+    }
+    if (!img || !img.complete)
+        return src;
+    if (img.naturalWidth > 0) {
+        cache.set(src, { kind: "native" });
+        return src;
+    }
+    ensure(src, onReady);
+    return "";
+}
+function waitForMetafilePreviews() {
+    return Promise.all([...jobs.values()]).then(() => undefined);
+}
+function ensure(src, onReady) {
+    let job = jobs.get(src);
+    if (!job) {
+        job = run(src);
+        jobs.set(src, job);
+        void job.finally(() => {
+            jobs.delete(src);
+        });
+    }
+    if (onReady)
+        void job.then(() => onReady());
+}
+async function run(src) {
+    if (cache.has(src))
+        return;
+    const claimed = isMetafileDataUrl(src);
+    try {
+        const loaded = await loadBytes(src);
+        if (!loaded) {
+            cache.set(src, claimed ? { kind: "marker", url: exports.METAFILE_MARKER_SRC } : { kind: "native" });
+            return;
+        }
+        if (!claimed && !isMetafileBytes(loaded.bytes, loaded.mime)) {
+            cache.set(src, { kind: "native" });
+            return;
+        }
+        const svg = await (0, emf_converter_1.convertMetafileToSvgDataUrl)(toArrayBuffer(loaded.bytes));
+        cache.set(src, svg ? { kind: "svg", url: svg } : { kind: "marker", url: exports.METAFILE_MARKER_SRC });
+    }
+    catch {
+        cache.set(src, claimed ? { kind: "marker", url: exports.METAFILE_MARKER_SRC } : { kind: "native" });
+    }
+}
+function toArrayBuffer(bytes) {
+    const copy = new ArrayBuffer(bytes.byteLength);
+    new Uint8Array(copy).set(bytes);
+    return copy;
+}
+async function loadBytes(src) {
+    if (src.startsWith("data:")) {
+        const bytes = decodeDataUrl(src);
+        return bytes ? { bytes, mime: "" } : undefined;
+    }
+    if (typeof fetch !== "function")
+        return undefined;
+    const res = await fetch(src);
+    if (!res.ok)
+        return undefined;
+    return {
+        bytes: new Uint8Array(await res.arrayBuffer()),
+        mime: res.headers.get("content-type") ?? "",
+    };
+}
+function decodeDataUrl(src) {
+    const comma = src.indexOf(",");
+    if (comma < 0)
+        return undefined;
+    const head = src.slice(0, comma);
+    const body = src.slice(comma + 1);
+    try {
+        if (/;base64/i.test(head)) {
+            const bin = atob(body);
+            const out = new Uint8Array(bin.length);
+            for (let i = 0; i < bin.length; i++)
+                out[i] = bin.charCodeAt(i) & 0xff;
+            return out;
+        }
+        return new TextEncoder().encode(decodeURIComponent(body));
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/cjs/model3d-frame.js

@@ -0,0 +1,199 @@
+"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.loadGltfScene = loadGltfScene;
+exports.applyModel3DCameraPose = applyModel3DCameraPose;
+exports.applyModel3DCamera = applyModel3DCamera;
+exports.applyModel3DTransform = applyModel3DTransform;
+exports.getModel3DPreviewFrame = getModel3DPreviewFrame;
+exports.waitForModel3DFrames = waitForModel3DFrames;
+const THREE = __importStar(require("three"));
+const GLTFLoader_js_1 = require("three/examples/jsm/loaders/GLTFLoader.js");
+const gltfCache = new Map();
+function loadGltfScene(src) {
+    let hit = gltfCache.get(src);
+    if (!hit) {
+        const loader = new GLTFLoader_js_1.GLTFLoader();
+        hit = new Promise((resolve, reject) => {
+            loader.load(src, (gltf) => {
+                const root = gltf.scene;
+                const box = new THREE.Box3().setFromObject(root);
+                const size = new THREE.Vector3();
+                const center = new THREE.Vector3();
+                box.getSize(size);
+                box.getCenter(center);
+                root.position.sub(center);
+                const maxDim = Math.max(size.x, size.y, size.z, 1e-6);
+                root.scale.setScalar(1 / maxDim);
+                resolve(root);
+            }, undefined, reject);
+        });
+        gltfCache.set(src, hit);
+    }
+    return hit;
+}
+function deg(v) {
+    return ((v ?? 0) * Math.PI) / 180;
+}
+function applyModel3DCameraPose(cam, latDeg, lonDeg, dist = 2.8) {
+    const lat = deg(latDeg);
+    const lon = deg(lonDeg);
+    cam.position.set(dist * Math.cos(lat) * Math.sin(lon), dist * Math.sin(lat), dist * Math.cos(lat) * Math.cos(lon));
+    cam.lookAt(0, 0, 0);
+    cam.updateProjectionMatrix();
+}
+function applyModel3DCamera(cam, s) {
+    applyModel3DCameraPose(cam, s.camera?.rot?.lat ?? 15, s.camera?.rot?.lon ?? 25);
+}
+function applyModel3DTransform(root, s) {
+    const t = s.modelTransform;
+    if (!t)
+        return;
+    const sc = t.scale;
+    if (sc)
+        root.scale.multiply(new THREE.Vector3(sc.x || 1, sc.y || 1, sc.z || 1));
+    const r = t.rot;
+    if (r)
+        root.rotation.set(deg(r.lat), deg(r.lon), deg(r.rev), "YXZ");
+    const o = t.off;
+    if (o)
+        root.position.add(new THREE.Vector3(o.x, o.y, o.z));
+}
+const previewCache = new Map();
+let previewRenderer = null;
+let previewRendererFailed = false;
+function getPreviewRenderer() {
+    if (previewRenderer)
+        return previewRenderer;
+    if (previewRendererFailed)
+        return null;
+    if (typeof document === "undefined") {
+        previewRendererFailed = true;
+        return null;
+    }
+    try {
+        const r = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
+        r.setPixelRatio(1);
+        r.setClearColor(0x000000, 0);
+        r.outputColorSpace = THREE.SRGBColorSpace;
+        previewRenderer = r;
+    }
+    catch {
+        previewRendererFailed = true;
+    }
+    return previewRenderer;
+}
+function previewKey(s) {
+    return JSON.stringify({
+        src: s.glbSrc,
+        cam: s.camera ?? null,
+        xf: s.modelTransform ?? null,
+        ar: s.bbox.h > 0 ? Math.round((s.bbox.w / s.bbox.h) * 1000) / 1000 : 1,
+    });
+}
+function rasterize(s, root) {
+    const renderer = getPreviewRenderer();
+    if (!renderer)
+        return null;
+    const aspect = s.bbox.h > 0 ? s.bbox.w / s.bbox.h : 1;
+    const w = 256;
+    const h = Math.max(1, Math.round(w / Math.max(aspect, 0.2)));
+    const scene = new THREE.Scene();
+    const clone = root.clone(true);
+    applyModel3DTransform(clone, s);
+    scene.add(clone);
+    const light = new THREE.DirectionalLight(0xffffff, 1.1);
+    light.position.set(2, 3, 4);
+    scene.add(light);
+    scene.add(new THREE.AmbientLight(0xffffff, 0.45));
+    const cam = new THREE.PerspectiveCamera(35, w / h, 0.01, 100);
+    applyModel3DCamera(cam, s);
+    renderer.setSize(w, h, false);
+    renderer.render(scene, cam);
+    return renderer.domElement.toDataURL("image/png");
+}
+function getModel3DPreviewFrame(s, onReady) {
+    if (typeof document === "undefined" || !s.glbSrc)
+        return null;
+    const key = previewKey(s);
+    const hit = previewCache.get(key);
+    if (hit?.status === "ready")
+        return hit.img;
+    if (hit?.status === "failed")
+        return null;
+    if (hit?.status === "pending") {
+        if (onReady)
+            void hit.wait.then(() => onReady());
+        return null;
+    }
+    const wait = loadGltfScene(s.glbSrc)
+        .then((root) => new Promise((resolve) => {
+        const url = rasterize(s, root);
+        if (!url) {
+            previewCache.set(key, { status: "failed" });
+            resolve();
+            return;
+        }
+        const img = new Image();
+        img.onload = () => {
+            previewCache.set(key, { status: "ready", img });
+            onReady?.();
+            resolve();
+        };
+        img.onerror = () => {
+            previewCache.set(key, { status: "failed" });
+            resolve();
+        };
+        img.src = url;
+    }))
+        .catch(() => {
+        previewCache.set(key, { status: "failed" });
+    });
+    previewCache.set(key, { status: "pending", wait });
+    return null;
+}
+function waitForModel3DFrames(timeoutMs = 8000) {
+    const pending = [];
+    for (const e of previewCache.values()) {
+        if (e.status === "pending")
+            pending.push(e.wait);
+    }
+    if (!pending.length)
+        return Promise.resolve();
+    return Promise.race([
+        Promise.all(pending).then(() => undefined),
+        new Promise((resolve) => setTimeout(resolve, timeoutMs)),
+    ]);
+}

package/dist/cjs/model3d-render.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.model3DDisplaySrc = model3DDisplaySrc;
+exports.drawModel3DCanvas = drawModel3DCanvas;
+exports.renderModel3DSvg = renderModel3DSvg;
+const paint_canvas_1 = require("./paint-canvas");
+const model3d_frame_1 = require("./model3d-frame");
+function model3DDisplaySrc(s, onReady) {
+    const frame = s.glbSrc ? (0, model3d_frame_1.getModel3DPreviewFrame)(s, onReady) : null;
+    return frame?.src ?? s.rasterSrc;
+}
+function drawModel3DCanvas(ctx, s, onReady) {
+    const { x, y, w, h } = s.bbox;
+    const src = model3DDisplaySrc(s, onReady);
+    ctx.save();
+    if (src) {
+        const img = (0, paint_canvas_1.getImage)(src, onReady);
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(x, y, w, h);
+        if (img.complete && img.naturalWidth > 0) {
+            const scale = Math.max(w / img.naturalWidth, h / img.naturalHeight);
+            const dw = img.naturalWidth * scale;
+            const dh = img.naturalHeight * scale;
+            ctx.drawImage(img, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
+        }
+    }
+    else {
+        ctx.fillStyle = "#e2e8f0";
+        ctx.fillRect(x, y, w, h);
+        ctx.fillStyle = "#475569";
+        ctx.font = `600 ${Math.max(11, Math.min(16, h * 0.12))}px system-ui, sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(s.objectName ?? "3D Model", x + w / 2, y + h / 2);
+    }
+    ctx.strokeStyle = "#94a3b8";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
+    ctx.restore();
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+function renderModel3DSvg(container, s, onReady) {
+    while (container.firstChild)
+        container.removeChild(container.firstChild);
+    const { x, y, w, h } = s.bbox;
+    const src = model3DDisplaySrc(s, onReady);
+    if (src) {
+        const im = document.createElementNS(SVG_NS, "image");
+        im.setAttribute("x", String(x));
+        im.setAttribute("y", String(y));
+        im.setAttribute("width", String(w));
+        im.setAttribute("height", String(h));
+        im.setAttribute("href", src);
+        im.setAttributeNS("http://www.w3.org/1999/xlink", "href", src);
+        im.setAttribute("preserveAspectRatio", "xMidYMid slice");
+        container.appendChild(im);
+    }
+    else {
+        const bg = document.createElementNS(SVG_NS, "rect");
+        bg.setAttribute("x", String(x));
+        bg.setAttribute("y", String(y));
+        bg.setAttribute("width", String(w));
+        bg.setAttribute("height", String(h));
+        bg.setAttribute("fill", "#e2e8f0");
+        bg.setAttribute("stroke", "#94a3b8");
+        container.appendChild(bg);
+        const label = document.createElementNS(SVG_NS, "text");
+        label.setAttribute("x", String(x + w / 2));
+        label.setAttribute("y", String(y + h / 2));
+        label.setAttribute("fill", "#475569");
+        label.setAttribute("font-size", String(Math.max(11, Math.min(16, h * 0.12))));
+        label.setAttribute("font-weight", "600");
+        label.setAttribute("text-anchor", "middle");
+        label.setAttribute("dominant-baseline", "middle");
+        label.textContent = s.objectName ?? "3D Model";
+        container.appendChild(label);
+    }
+}

package/dist/cjs/morph-transition.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountMorphTransitionLayers = mountMorphTransitionLayers;
+const svg_backend_1 = require("./svg-backend");
+function overlayBoxStyle(stage) {
+    return [
+        "position:absolute",
+        `left:${stage.offsetLeft}px`,
+        `top:${stage.offsetTop}px`,
+        `width:${stage.style.width || `${stage.clientWidth}px`}`,
+        `height:${stage.style.height || `${stage.clientHeight}px`}`,
+        "pointer-events:none",
+        "overflow:hidden",
+    ].join(";");
+}
+/**
+ * Mount SVG shape layers for morph (FLIP) when the live stage lacks per-shape DOM
+ * ids (canvas / hybrid bitmap segments). Pure-SVG stages only need the ghost overlay.
+ */
+function mountMorphTransitionLayers(stageWrap, stage, prevScene, curScene, opts = {}) {
+    const ghostZ = opts.ghostZIndex ?? 1000;
+    const stageZ = opts.stageZIndex ?? 1001;
+    const ghostWrap = document.createElement("div");
+    ghostWrap.style.cssText = `${overlayBoxStyle(stage)};z-index:${ghostZ}`;
+    if (opts.chromeBg)
+        ghostWrap.style.background = opts.chromeBg;
+    stageWrap.appendChild(ghostWrap);
+    const ghostBe = new svg_backend_1.SvgBackend(prevScene, ghostWrap, { transparent: true });
+    ghostBe.flush();
+    const needsStageOverlay = !stage.querySelector("[data-id],[data-shape-id]");
+    let stageOverlay = null;
+    let stageBe = null;
+    let target = stage;
+    let hidStage = false;
+    if (needsStageOverlay) {
+        stageOverlay = document.createElement("div");
+        stageOverlay.style.cssText = `${overlayBoxStyle(stage)};z-index:${stageZ}`;
+        stageWrap.appendChild(stageOverlay);
+        stageBe = new svg_backend_1.SvgBackend(curScene, stageOverlay, { transparent: true });
+        stageBe.flush();
+        target = stageOverlay;
+        stage.style.visibility = "hidden";
+        hidStage = true;
+    }
+    return {
+        ghost: ghostWrap,
+        target,
+        cleanup() {
+            ghostBe.destroy();
+            stageBe?.destroy();
+            ghostWrap.remove();
+            stageOverlay?.remove();
+            if (hidStage)
+                stage.style.visibility = "";
+        },
+    };
+}

package/dist/cjs/node-affine.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.affMul = affMul;
+exports.nodeAffine = nodeAffine;
+exports.accumulatedAffine = accumulatedAffine;
+exports.cssAffineForBox = cssAffineForBox;
+exports.chainOpacity = chainOpacity;
+exports.chainHidden = chainHidden;
+function affMul(m, n) {
+    return {
+        a: m.a * n.a + m.c * n.b,
+        b: m.b * n.a + m.d * n.b,
+        c: m.a * n.c + m.c * n.d,
+        d: m.b * n.c + m.d * n.d,
+        e: m.a * n.e + m.c * n.f + m.e,
+        f: m.b * n.e + m.d * n.f + m.f,
+    };
+}
+function affTranslate(x, y) {
+    return { a: 1, b: 0, c: 0, d: 1, e: x, f: y };
+}
+/** 单个节点的 SVG 变换：先绕 bbox 中心旋转缩放，再平移 tx/ty。 */
+function nodeAffine(node) {
+    const s = node.shape;
+    const cx = s.bbox.x + s.bbox.w / 2;
+    const cy = s.bbox.y + s.bbox.h / 2;
+    const flipX = s.transform?.scaleX ?? 1;
+    const flipY = s.transform?.scaleY ?? 1;
+    const sx = node.scale * node.scaleX * node.widthScale * (flipX < 0 ? -1 : 1);
+    const sy = node.scale * node.scaleY * node.heightScale * (flipY < 0 ? -1 : 1);
+    const rad = ((node.rotation || 0) * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const a = cos * sx;
+    const b = sin * sx;
+    const c = -sin * sy;
+    const d = cos * sy;
+    const e = cx - (a * cx + c * cy) + node.tx;
+    const f = cy - (b * cx + d * cy) + node.ty;
+    return { a, b, c, d, e, f };
+}
+/** 从最外层祖先乘到自身。幻灯片根是恒等变换，乘进去不改变结果。 */
+function accumulatedAffine(node) {
+    const chain = [];
+    let cur = node;
+    while (cur) {
+        chain.push(cur);
+        cur = cur.parent;
+    }
+    let m = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+    for (let i = chain.length - 1; i >= 0; i--)
+        m = affMul(m, nodeAffine(chain[i]));
+    return m;
+}
+/**
+ * wrapper 已放在 slide 坐标 (originX, originY)。CSS transform-origin 为 0 0 时，
+ * 用这个矩阵才能让视觉位置等于 accumulatedAffine。
+ */
+function cssAffineForBox(m, originX, originY) {
+    return affMul(affMul(affTranslate(-originX, -originY), m), affTranslate(originX, originY));
+}
+function chainOpacity(node) {
+    let alpha = 1;
+    let cur = node;
+    while (cur) {
+        alpha *= cur.opacity;
+        cur = cur.parent;
+    }
+    return alpha;
+}
+function chainHidden(node) {
+    let cur = node;
+    while (cur) {
+        if ((cur.visibleOverride ?? cur.shape.visible) === false)
+            return true;
+        cur = cur.parent;
+    }
+    return false;
+}