@sliiu/present-renderer 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,285 @@
+"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.WebGLModel3DBackend = void 0;
+const THREE = __importStar(require("three"));
+const model3d_frame_1 = require("./model3d-frame");
+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;
+}
+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 (0, model3d_frame_1.loadGltfScene)(s.glbSrc).then((root) => {
+            const sc = new THREE.Scene();
+            const clone = root.clone(true);
+            (0, model3d_frame_1.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);
+            (0, model3d_frame_1.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) {
+            (0, model3d_frame_1.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 = [];
+    }
+}
+exports.WebGLModel3DBackend = WebGLModel3DBackend;

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

@@ -0,0 +1,360 @@
+"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.WebGLShapeBackend = void 0;
+const THREE = __importStar(require("three"));
+const three_bake_1 = require("@sliiu/present-three-bake");
+const node_affine_1 = require("./node-affine");
+const shape_front_1 = require("./shape-front");
+// ════════════════════════════════════════════════════════════════════════════
+// 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,
+    };
+}
+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 (!(0, three_bake_1.shapeSupports3D)(s))
+                return;
+            if (!filter(s))
+                return;
+            if (!(0, three_bake_1.needs3DRender)((0, three_bake_1.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 = (0, three_bake_1.shape3DInfo)(s);
+        if (!meta)
+            return;
+        const pad = (0, three_bake_1.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 = (0, three_bake_1.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" ? (0, shape_front_1.shapeFrontImageSrc)(this.scene, s) : undefined;
+        // 贴图此前已解码过（典型：初次加载已经走过一遍）→ 同步构建场景并 built 就绪，
+        // 这样紧随其后的 flush() 能当帧首渲，drawSlide 双缓冲不会出现 3D 空一帧的闪屏。
+        const cachedTex = src ? (0, three_bake_1.getCachedImageTexture)(src) : null;
+        if (src ? cachedTex !== null : true) {
+            this.buildManaged(m, s, cachedTex);
+        }
+        else {
+            // 首次（未缓存）走异步解码；解码完成后会缓存，后续重建即走上面的同步路径。
+            void (async () => {
+                const texture = src ? await (0, three_bake_1.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)
+            (0, three_bake_1.applyTextureCrop)(texture, s.cropRect);
+        m.texture = texture;
+        m.built = (0, three_bake_1.buildThreeScene)({
+            baseW: Math.max(8, m.baseBBox.w),
+            baseH: Math.max(8, m.baseBBox.h),
+            pathD: isPicture ? undefined : (0, three_bake_1.shape3DPathD)(s),
+            fill: s.fill,
+            stroke: s.stroke,
+            resolved: m.resolved,
+            texture: isPicture ? texture : null,
+            isImage: isPicture,
+        });
+        m.camera = (0, three_bake_1.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 = !(0, node_affine_1.chainHidden)(node);
+        m.wrapper.style.display = visible ? "block" : "none";
+        if (!visible)
+            return;
+        // wrapper 放在 paddedBBox。CSS 原点取左上角，矩阵里已经包含祖先组合的旋转。
+        const css = (0, node_affine_1.cssAffineForBox)((0, node_affine_1.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 = (0, node_affine_1.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();
+    }
+}
+exports.WebGLShapeBackend = WebGLShapeBackend;

package/dist/esm/arrow-geom.js

@@ -0,0 +1,33 @@
+// 线端箭头（headEnd / tailEnd）的几何，SVG 与 Canvas 两个 backend 共用，保证导出一致。
+// 尺寸单位为 strokeWidth 的倍数（与 SVG markerUnits="strokeWidth" 一致）。
+export function arrowSize(spec) {
+    const wMap = { sm: 3, med: 5, lg: 8 };
+    const lMap = { sm: 3, med: 5, lg: 8 };
+    return { w: wMap[spec.w ?? "med"], l: lMap[spec.len ?? "med"] };
+}
+export function arrowPathD(kind, w, l, side) {
+    if (kind === "oval") {
+        return `M 0 ${-w / 2} a ${l / 2} ${w / 2} 0 1 0 0 ${w} a ${l / 2} ${w / 2} 0 1 0 0 ${-w} z`;
+    }
+    if (kind === "diamond") {
+        return `M 0 0 L ${l / 2} ${-w / 2} L ${l} 0 L ${l / 2} ${w / 2} Z`;
+    }
+    if (kind === "stealth") {
+        return side === "end"
+            ? `M 0 ${-w / 2} L ${l} 0 L 0 ${w / 2} L ${l * 0.3} 0 Z`
+            : `M ${l} ${-w / 2} L 0 0 L ${l} ${w / 2} L ${l * 0.7} 0 Z`;
+    }
+    return side === "end"
+        ? `M 0 ${-w / 2} L ${l} 0 L 0 ${w / 2} Z`
+        : `M ${l} ${-w / 2} L 0 0 L ${l} ${w / 2} Z`;
+}
+// PowerPoint / WPS 约定下，三角 / 隐身箭头的"基底"锚定在线端点，"尖端"向外延伸；
+// 圆 / 菱形等中心对称形状骑跨在线端点上（中心 = 端点）。orient="auto" 让 +X 沿线方向，
+// 因此 end 侧 refX=0（基底在端点、尖端向 +X 外延），start 侧 path 已镜像、refX=l。
+export function arrowRefX(kind, side, l) {
+    if (kind === "oval")
+        return 0;
+    if (kind === "diamond")
+        return l / 2;
+    return side === "end" ? 0 : l;
+}