@sliiu/present-renderer 0.0.0-stage → 0.1.0

package/dist/esm/webgl-model3d-backend.js

@@ -0,0 +1,248 @@
+import * as THREE from "three";
+import { applyModel3DCameraPose, applyModel3DTransform, loadGltfScene } from "./model3d-frame.js";
+let sharedRenderer = null;
+let sharedRendererFailed = false;
+function getSharedRenderer() {
+    if (sharedRenderer)
+        return sharedRenderer;
+    if (sharedRendererFailed)
+        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;
+        sharedRenderer = r;
+    }
+    catch {
+        sharedRendererFailed = true;
+    }
+    return sharedRenderer;
+}
+export class WebGLModel3DBackend {
+    space;
+    managed = [];
+    dispose = [];
+    k = 1;
+    rafId = 0;
+    readyResolvers = [];
+    constructor(scene, container, opts = {}) {
+        const shapeFilter = opts.shapeFilter ?? (() => true);
+        const interactive = opts.interactive === true;
+        this.space = document.createElement("div");
+        this.space.style.cssText = "position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none";
+        this.space.style.width = `${scene.width}px`;
+        this.space.style.height = `${scene.height}px`;
+        container.appendChild(this.space);
+        scene.root.walk((n) => {
+            if (n.shape.kind !== "model3d")
+                return;
+            const s = n.shape;
+            if (!shapeFilter(s))
+                return;
+            if (!s.glbSrc)
+                return;
+            this.add(n, s, interactive);
+        });
+        const updateScale = () => {
+            const w = container.clientWidth || scene.width;
+            const k = w / scene.width;
+            if (!Number.isFinite(k) || k <= 0)
+                return;
+            this.k = k;
+            this.space.style.transform = `scale(${k})`;
+            this.scheduleRender();
+        };
+        if (typeof ResizeObserver !== "undefined") {
+            const ro = new ResizeObserver(updateScale);
+            ro.observe(container);
+            this.dispose.push(() => ro.disconnect());
+        }
+        updateScale();
+        this.scheduleRender();
+    }
+    add(node, s, interactive) {
+        const wrapper = document.createElement("div");
+        wrapper.style.position = "absolute";
+        wrapper.style.overflow = "hidden";
+        const canvas = document.createElement("canvas");
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        canvas.style.display = "block";
+        wrapper.appendChild(canvas);
+        this.space.appendChild(wrapper);
+        const m = {
+            node,
+            bbox: { ...s.bbox },
+            wrapper,
+            canvas,
+            ctx: canvas.getContext("2d"),
+            scene: null,
+            camera: null,
+            lat: s.camera?.rot?.lat ?? 15,
+            lon: s.camera?.rot?.lon ?? 25,
+            lastW: 0,
+            lastH: 0,
+        };
+        this.managed.push(m);
+        if (interactive)
+            this.bindOrbit(m);
+        void loadGltfScene(s.glbSrc).then((root) => {
+            const sc = new THREE.Scene();
+            const clone = root.clone(true);
+            applyModel3DTransform(clone, s);
+            sc.add(clone);
+            const light = new THREE.DirectionalLight(0xffffff, 1.1);
+            light.position.set(2, 3, 4);
+            sc.add(light);
+            sc.add(new THREE.AmbientLight(0xffffff, 0.45));
+            const cam = new THREE.PerspectiveCamera(35, 1, 0.01, 100);
+            applyModel3DCameraPose(cam, m.lat, m.lon);
+            m.scene = sc;
+            m.camera = cam;
+            this.syncWrapper(m);
+            this.scheduleRender();
+            this.resolveReady();
+        }).catch(() => this.resolveReady());
+        const off = node.on(() => this.syncWrapper(m));
+        this.dispose.push(off);
+    }
+    bindOrbit(m) {
+        const el = m.wrapper;
+        el.style.pointerEvents = "auto";
+        el.style.cursor = "grab";
+        el.style.touchAction = "none";
+        let dragging = false;
+        let lastX = 0;
+        let lastY = 0;
+        const stop = (e) => e.stopPropagation();
+        el.addEventListener("pointerdown", (e) => {
+            if (e.button !== 0)
+                return;
+            e.stopPropagation();
+            e.preventDefault();
+            dragging = true;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            try {
+                el.setPointerCapture(e.pointerId);
+            }
+            catch { }
+            el.style.cursor = "grabbing";
+        });
+        el.addEventListener("pointermove", (e) => {
+            if (!dragging)
+                return;
+            e.stopPropagation();
+            const dx = e.clientX - lastX;
+            const dy = e.clientY - lastY;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            this.orbitModel3D(m.node.shape.id, -dx * 0.45, dy * 0.45);
+        });
+        const end = (e) => {
+            if (!dragging)
+                return;
+            dragging = false;
+            el.style.cursor = "grab";
+            try {
+                el.releasePointerCapture(e.pointerId);
+            }
+            catch { }
+            e.stopPropagation();
+        };
+        el.addEventListener("pointerup", end);
+        el.addEventListener("pointercancel", end);
+        el.addEventListener("mousedown", stop);
+        el.addEventListener("click", stop);
+        el.addEventListener("dblclick", stop);
+        el.addEventListener("touchstart", stop, { passive: true });
+    }
+    syncWrapper(m) {
+        const n = m.node;
+        const s = n.shape;
+        const b = s.bbox;
+        m.bbox = { ...b };
+        m.wrapper.style.left = `${b.x}px`;
+        m.wrapper.style.top = `${b.y}px`;
+        m.wrapper.style.width = `${b.w}px`;
+        m.wrapper.style.height = `${b.h}px`;
+        m.wrapper.style.opacity = String(n.opacity * ((n.visibleOverride ?? s.visible) !== false ? 1 : 0));
+        m.wrapper.style.transform = `translate(${n.tx}px,${n.ty}px) rotate(${n.rotation}deg) scale(${n.scale})`;
+    }
+    scheduleRender() {
+        if (this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = 0;
+            this.renderAll();
+        });
+    }
+    renderAll() {
+        const renderer = getSharedRenderer();
+        if (!renderer)
+            return;
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        for (const m of this.managed) {
+            if (!m.scene || !m.camera || !m.ctx)
+                continue;
+            const w = Math.max(1, Math.ceil(m.bbox.w * this.k * dpr));
+            const h = Math.max(1, Math.ceil(m.bbox.h * this.k * dpr));
+            m.lastW = w;
+            m.lastH = h;
+            if (m.canvas.width !== w)
+                m.canvas.width = w;
+            if (m.canvas.height !== h)
+                m.canvas.height = h;
+            m.camera.aspect = w / h;
+            m.camera.updateProjectionMatrix();
+            renderer.setSize(w, h, false);
+            renderer.render(m.scene, m.camera);
+            m.ctx.clearRect(0, 0, w, h);
+            m.ctx.drawImage(renderer.domElement, 0, 0, w, h);
+        }
+    }
+    resolveReady() {
+        const rs = this.readyResolvers.splice(0);
+        for (const r of rs)
+            r();
+    }
+    orbitModel3D(shapeId, dLon, dLat) {
+        const m = this.managed.find((x) => x.node.shape.id === shapeId);
+        if (!m)
+            return false;
+        if (dLon === 0 && dLat === 0)
+            return true;
+        m.lon += dLon;
+        m.lat = Math.max(-85, Math.min(85, m.lat + dLat));
+        if (m.camera) {
+            applyModel3DCameraPose(m.camera, m.lat, m.lon);
+            this.scheduleRender();
+        }
+        return true;
+    }
+    flush() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        for (const m of this.managed)
+            this.syncWrapper(m);
+        this.renderAll();
+    }
+    whenReady() {
+        return new Promise((res) => {
+            if (this.managed.every((m) => m.scene || !m.node.shape.glbSrc))
+                res();
+            else
+                this.readyResolvers.push(res);
+        });
+    }
+    destroy() {
+        for (const d of this.dispose)
+            d();
+        this.dispose = [];
+        this.space.remove();
+        this.managed = [];
+    }
+}

package/dist/esm/webgl-shape-backend.js

@@ -0,0 +1,323 @@
+import * as THREE from "three";
+import { applyTextureCrop, buildThreeScene, createSceneCamera, getCachedImageTexture, loadImageTexture, needs3DRender, resolveScene3D, shape3DInfo, shape3DPad, shape3DPathD, shapeSupports3D, } from "@sliiu/present-three-bake";
+import { accumulatedAffine, chainHidden, chainOpacity, cssAffineForBox } from "./node-affine.js";
+import { shapeFrontImageSrc } from "./shape-front.js";
+// ════════════════════════════════════════════════════════════════════════════
+// Live WebGL 3D backend —— player / editor 的 hybrid 视图里，每个需要 3D 的
+// image / 矩形 / 椭圆 / 路径 / 多边形用一块定位 canvas 实时渲染 three.js 3D
+// （透视 / 倒角 / 光照 / 材质）。好处：
+//   - 缩放清晰（按显示像素重渲，不再是固定分辨率位图）；
+//   - 动画（entrance/emphasis 的 tx/ty/scale/opacity）过程中 3D 形体保持立体、光照正确。
+//
+// 设计：
+//   - 一个 "slide-space" 容器（slide 像素尺寸）用 transform:scale(k) 适配 layer 实际像素，
+//     ResizeObserver 跟随更新；每个 shape 的 wrapper 用 slide 单位定位。
+//   - 共享一个 WebGLRenderer（单 GL context），逐 shape 渲染到其 backing 尺寸再 drawImage
+//     到该 shape 的 2D 展示 canvas，避免 per-shape GL context 累积。
+//   - 几何/材质/相机全部复用 @sliiu/present-three-bake 的 buildThreeScene / createSceneCamera，
+//     与离屏光栅（缩略图/截图）完全一致。
+//   - 每帧 2D 变换（tx/ty/rotation/scale/opacity）经 node.on() 同步到 wrapper CSS，
+//     不重渲 GL（3D 相机不随动画变）；仅 resize / 贴图加载完成时重渲 GL。
+// ════════════════════════════════════════════════════════════════════════════
+// ── 共享 WebGLRenderer（单 GL context，跨 backend 实例复用）──────────────────────
+// 编辑器拖动时 drawSlide 每帧重建整个 backend（含 WebGLShapeBackend）。若每个实例都
+// 自建/销毁一个 WebGLRenderer，会以 ~60fps 频繁创建 + forceContextLoss GL context：
+// 浏览器对活动 context 数量有上限、create/loss 自身也有开销，会引发掉帧甚至闪烁。
+// 这里改用一个 module 级单例 renderer，所有 WebGLShapeBackend 复用它（逐 shape
+// setSize→render→drawImage 是同步串行的，复用安全）。backend.destroy() 不再销毁它。
+let sharedRenderer = null;
+let sharedRendererFailed = false;
+function getSharedRenderer() {
+    if (sharedRenderer)
+        return sharedRenderer;
+    if (sharedRendererFailed)
+        return null;
+    try {
+        const r = new THREE.WebGLRenderer({
+            alpha: true,
+            antialias: true,
+            premultipliedAlpha: true,
+            preserveDrawingBuffer: true,
+        });
+        r.setPixelRatio(1);
+        r.setClearColor(0x000000, 0);
+        r.outputColorSpace = THREE.SRGBColorSpace;
+        sharedRenderer = r;
+    }
+    catch {
+        sharedRendererFailed = true;
+        sharedRenderer = null;
+    }
+    return sharedRenderer;
+}
+function paddedRect(bbox, pad) {
+    const padW = Math.ceil(bbox.w * (1 + pad));
+    const padH = Math.ceil(bbox.h * (1 + pad));
+    return {
+        x: bbox.x - (padW - bbox.w) / 2,
+        y: bbox.y - (padH - bbox.h) / 2,
+        w: padW,
+        h: padH,
+    };
+}
+export class WebGLShapeBackend {
+    scene;
+    space;
+    managed = [];
+    dispose = [];
+    dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    k = 1;
+    rafId = 0;
+    ro = null;
+    readyResolvers = [];
+    constructor(scene, container, opts = {}) {
+        this.scene = scene;
+        const filter = opts.shapeFilter ?? (() => true);
+        this.space = document.createElement("div");
+        this.space.style.position = "absolute";
+        this.space.style.left = "0";
+        this.space.style.top = "0";
+        this.space.style.width = `${scene.width}px`;
+        this.space.style.height = `${scene.height}px`;
+        this.space.style.transformOrigin = "0 0";
+        this.space.style.pointerEvents = "none";
+        container.appendChild(this.space);
+        scene.root.walk((n) => {
+            const s = n.shape;
+            if (!shapeSupports3D(s))
+                return;
+            if (!filter(s))
+                return;
+            if (!needs3DRender(shape3DInfo(s)))
+                return;
+            this.add(n);
+        });
+        // 适配 layer 实际像素：k = 实际宽 / slide 宽。
+        const updateScale = () => {
+            const w = container.clientWidth || scene.width;
+            const k = w / scene.width;
+            if (!Number.isFinite(k) || k <= 0)
+                return;
+            if (Math.abs(k - this.k) < 1e-4)
+                return;
+            this.k = k;
+            this.space.style.transform = `scale(${k})`;
+            this.scheduleGlRender();
+        };
+        if (typeof ResizeObserver !== "undefined") {
+            this.ro = new ResizeObserver(updateScale);
+            this.ro.observe(container);
+        }
+        updateScale();
+        this.scheduleSync();
+        this.scheduleGlRender();
+    }
+    add(node) {
+        const s = node.shape;
+        const meta = shape3DInfo(s);
+        if (!meta)
+            return;
+        const pad = shape3DPad(s.kind);
+        const baseBBox = { x: s.bbox.x, y: s.bbox.y, w: s.bbox.w, h: s.bbox.h };
+        const paddedBBox = paddedRect(baseBBox, pad);
+        const resolved = resolveScene3D(meta);
+        const wrapper = document.createElement("div");
+        wrapper.style.position = "absolute";
+        wrapper.style.left = `${paddedBBox.x}px`;
+        wrapper.style.top = `${paddedBBox.y}px`;
+        wrapper.style.width = `${paddedBBox.w}px`;
+        wrapper.style.height = `${paddedBBox.h}px`;
+        wrapper.style.pointerEvents = "none";
+        const canvas = document.createElement("canvas");
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        canvas.style.display = "block";
+        wrapper.appendChild(canvas);
+        this.space.appendChild(wrapper);
+        const m = {
+            node,
+            baseBBox,
+            paddedBBox,
+            pad,
+            resolved,
+            wrapper,
+            canvas,
+            ctx: canvas.getContext("2d"),
+            built: null,
+            camera: null,
+            texture: null,
+            lastBackingW: 0,
+            lastBackingH: 0,
+            disposed: false,
+        };
+        this.managed.push(m);
+        const src = s.kind === "image" ? s.src : s.kind === "text" ? shapeFrontImageSrc(this.scene, s) : undefined;
+        // 贴图此前已解码过（典型：初次加载已经走过一遍）→ 同步构建场景并 built 就绪，
+        // 这样紧随其后的 flush() 能当帧首渲，drawSlide 双缓冲不会出现 3D 空一帧的闪屏。
+        const cachedTex = src ? getCachedImageTexture(src) : null;
+        if (src ? cachedTex !== null : true) {
+            this.buildManaged(m, s, cachedTex);
+        }
+        else {
+            // 首次（未缓存）走异步解码；解码完成后会缓存，后续重建即走上面的同步路径。
+            void (async () => {
+                const texture = src ? await loadImageTexture(src) : null;
+                if (m.disposed) {
+                    texture?.dispose();
+                    return;
+                }
+                this.buildManaged(m, s, texture);
+            })();
+        }
+        let cur = node;
+        while (cur) {
+            const off = cur.on(() => this.scheduleSync());
+            this.dispose.push(off);
+            cur = cur.parent;
+        }
+    }
+    /** 用（可能为空的）贴图构建 three 场景 + 相机，写回 managed 并触发首渲。 */
+    buildManaged(m, s, texture) {
+        if (m.disposed) {
+            texture?.dispose();
+            return;
+        }
+        const isPicture = s.kind === "image" || (s.kind === "text" && !!texture);
+        if (s.kind === "image" && texture)
+            applyTextureCrop(texture, s.cropRect);
+        m.texture = texture;
+        m.built = buildThreeScene({
+            baseW: Math.max(8, m.baseBBox.w),
+            baseH: Math.max(8, m.baseBBox.h),
+            pathD: isPicture ? undefined : shape3DPathD(s),
+            fill: s.fill,
+            stroke: s.stroke,
+            resolved: m.resolved,
+            texture: isPicture ? texture : null,
+            isImage: isPicture,
+        });
+        m.camera = createSceneCamera(m.resolved.camera, m.built.geoW, m.built.geoH, m.paddedBBox.w, m.paddedBBox.h, m.pad, m.resolved.backdrop);
+        this.scheduleGlRender();
+        this.checkReady();
+    }
+    getRenderer() {
+        return getSharedRenderer();
+    }
+    // ── 每帧 2D 变换同步（CSS，不重渲 GL）─────────────────────────────────────────
+    scheduleSync() {
+        if (this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = 0;
+            this.syncTransforms();
+        });
+    }
+    syncTransforms() {
+        for (const m of this.managed)
+            this.syncOne(m);
+    }
+    syncOne(m) {
+        const node = m.node;
+        const visible = !chainHidden(node);
+        m.wrapper.style.display = visible ? "block" : "none";
+        if (!visible)
+            return;
+        // wrapper 放在 paddedBBox。CSS 原点取左上角，矩阵里已经包含祖先组合的旋转。
+        const css = cssAffineForBox(accumulatedAffine(node), m.paddedBBox.x, m.paddedBBox.y);
+        m.wrapper.style.transformOrigin = "0 0";
+        m.wrapper.style.transform = `matrix(${css.a}, ${css.b}, ${css.c}, ${css.d}, ${css.e}, ${css.f})`;
+        let alpha = chainOpacity(node);
+        const clip = node.clip;
+        if (clip && clip.kind === "effect" && clip.filter === "fade") {
+            const tr = clip.transition ?? "none";
+            alpha *= tr === "none" ? 1 : Math.max(0, Math.min(1, clip.progress ?? 0));
+        }
+        m.wrapper.style.opacity = String(alpha);
+    }
+    // ── GL 重渲（仅 resize / 贴图加载完成时）──────────────────────────────────────
+    scheduleGlRender() {
+        if (typeof requestAnimationFrame === "undefined") {
+            this.glRenderAll();
+            return;
+        }
+        requestAnimationFrame(() => this.glRenderAll());
+    }
+    glRenderAll() {
+        const renderer = this.getRenderer();
+        if (!renderer)
+            return;
+        for (const m of this.managed)
+            this.glRenderOne(renderer, m);
+    }
+    glRenderOne(renderer, m) {
+        if (m.disposed || !m.built || !m.camera || !m.ctx)
+            return;
+        const backingW = Math.max(1, Math.ceil(m.paddedBBox.w * this.k * this.dpr));
+        const backingH = Math.max(1, Math.ceil(m.paddedBBox.h * this.k * this.dpr));
+        if (backingW === m.lastBackingW && backingH === m.lastBackingH && m.canvas.width === backingW) {
+            // 尺寸没变也重渲一次（贴图刚加载完会走到这里）；但避免无意义的频繁循环。
+        }
+        renderer.setSize(backingW, backingH, false);
+        renderer.render(m.built.scene, m.camera);
+        if (m.canvas.width !== backingW)
+            m.canvas.width = backingW;
+        if (m.canvas.height !== backingH)
+            m.canvas.height = backingH;
+        m.ctx.clearRect(0, 0, backingW, backingH);
+        try {
+            m.ctx.drawImage(renderer.domElement, 0, 0, backingW, backingH);
+        }
+        catch {
+            // drawImage 偶发失败（context lost）忽略，下次 resize 再试。
+        }
+        m.lastBackingW = backingW;
+        m.lastBackingH = backingH;
+    }
+    flush() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        this.syncTransforms();
+        this.glRenderAll();
+    }
+    /** 所有 3D shape 的贴图都加载完、场景已构建并首渲后 resolve（截图前等待用）。 */
+    whenReady() {
+        if (this.isReady()) {
+            this.flush();
+            return Promise.resolve();
+        }
+        return new Promise((res) => this.readyResolvers.push(res));
+    }
+    isReady() {
+        return this.managed.every((m) => m.built || m.disposed);
+    }
+    checkReady() {
+        if (!this.isReady())
+            return;
+        this.flush();
+        const rs = this.readyResolvers;
+        this.readyResolvers = [];
+        for (const r of rs)
+            r();
+    }
+    destroy() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = 0;
+        for (const off of this.dispose)
+            off();
+        this.dispose = [];
+        this.ro?.disconnect();
+        this.ro = null;
+        for (const m of this.managed) {
+            m.disposed = true;
+            m.built?.dispose();
+            m.texture?.dispose();
+        }
+        this.managed = [];
+        // 不销毁 sharedRenderer：它是跨 backend 实例复用的单例 GL context（见顶部注释）。
+        // 编辑器拖动每帧重建 backend，这里若 forceContextLoss 会造成 context 抖动 / 闪屏。
+        this.space.remove();
+    }
+}

package/dist/types/arrow-geom.d.ts

@@ -0,0 +1,10 @@
+import type { ArrowKind } from "@sliiu/present-core";
+export declare function arrowSize(spec: {
+    w?: "sm" | "med" | "lg";
+    len?: "sm" | "med" | "lg";
+}): {
+    w: number;
+    l: number;
+};
+export declare function arrowPathD(kind: ArrowKind, w: number, l: number, side: "start" | "end"): string;
+export declare function arrowRefX(kind: ArrowKind, side: "start" | "end", l: number): number;

package/dist/types/canvas-backend.d.ts

@@ -0,0 +1,55 @@
+import type { Shape } from "@sliiu/present-core";
+import { type Scene } from "./scene-node.js";
+export interface CanvasBackendOptions {
+    shapeFilter?: (s: Shape) => boolean;
+    transparent?: boolean;
+    /** Offscreen export: override `devicePixelRatio` (e.g. PDF at 150 DPI → 150/96). */
+    pixelRatio?: number;
+}
+export declare class CanvasBackend {
+    readonly canvas: HTMLCanvasElement;
+    private ctx;
+    private scene;
+    private dpr;
+    private rafId;
+    private dispose;
+    private shapeFilter;
+    private transparent;
+    /** 给文字 3D 正面贴图用：画字形，不把已经烘好的 PNG 再画一遍。 */
+    private drawingFront;
+    private arrowProbe?;
+    constructor(scene: Scene, container: HTMLElement, opts?: CanvasBackendOptions);
+    resize(w: number, h: number): void;
+    private scheduleRedraw;
+    /** 同步刷新到 canvas，并取消 pending rAF。详见 SvgBackend.flush。 */
+    flush(): void;
+    private redraw;
+    private drawNode;
+    private applyClip;
+    private drawShape;
+    /** Canvas 导出 / 缩略图：audio 无 DOM；video 无 poster 且第一帧未就绪时画占位图标。 */
+    private drawMediaPlaceholder;
+    private drawArrowheads;
+    private drawOneArrow;
+    private measurePathEnds;
+    private drawText;
+    /**
+     * 单行艺术字的墨迹框。多段、项目符号、竖排不在这里估，那些仍走 SVG 的 getBBox。
+     * 估算必须和 drawTextHorizontal 的顶对齐 / 居中公式一致，否则拉伸会把字拽偏。
+     */
+    private measureCanvasWordArt;
+    private drawTextWarped;
+    private drawTextHorizontal;
+    private drawWrappedParagraphCanvas;
+    private drawTextStacked;
+    private runFillStyle;
+    private fillTextWithOutline;
+    private drawBullet;
+    private drawRunsWithCharOverrides;
+    private roundRect;
+    /** 按未旋转的 bbox 把这个 shape 画到一张独立画布，左上角对齐 bbox 原点。 */
+    renderShapeFront(shapeId: string): HTMLCanvasElement | null;
+    destroy(): void;
+}
+/** 离屏把一个 shape 的正面画成画布。调用方负责不再使用返回的 canvas 之后的生命周期。 */
+export declare function rasterizeShapeFront(scene: Scene, shapeId: string): HTMLCanvasElement | null;

package/dist/types/cell-borders.d.ts

@@ -0,0 +1,9 @@
+import type { Rect, Stroke, TableCellBorders, TextShape } from "@sliiu/present-core";
+export declare function cellHasPerSideBorders(s: TextShape): boolean;
+export declare function cellBorderSegments(bbox: Rect, borders: TableCellBorders): Array<{
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke: Stroke;
+}>;

package/dist/types/chart-canvas.d.ts

@@ -0,0 +1,2 @@
+import type { ChartShape } from "@sliiu/present-core";
+export declare function drawChartCanvas(ctx: CanvasRenderingContext2D, shape: ChartShape): void;