@visactor/vrender-kits 1.1.0-alpha.22 → 1.1.0-alpha.23

package/dist/index.es.js

@@ -3442,6 +3442,16 @@ class HarmonyCanvas extends BaseCanvas {
         this._context = new HarmonyContext2d(this, this._dpr);
     }
     resize(width, height) {
+        if (!this.controled) {
+            return;
+        }
+        this._pixelWidth = width * this._dpr;
+        this._pixelHeight = height * this._dpr;
+        this._displayWidth = width;
+        this._displayHeight = height;
+        this._nativeCanvas.width = this._pixelWidth;
+        this._nativeCanvas.height = this._pixelHeight;
+        this._context.dpr = this._dpr;
         return;
     }
     release(...params) {
@@ -5381,6 +5391,14 @@ class FeishuWindowHandlerContribution extends BaseWindowHandlerContribution {
         let canvas;
         if (typeof params.canvas === 'string') {
             canvas = this.global.getElementById(params.canvas);
+            if (!canvas) {
+                canvas = this.global.createCanvas({
+                    id: params.canvas,
+                    width: params.width,
+                    height: params.height,
+                    dpr: params.dpr
+                });
+            }
             if (!canvas) {
                 throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');
             }
@@ -5955,17 +5973,65 @@ class CanvasWrapEnableWH {
     }
 }
 
-function makeUpCanvas$4(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, pixelRatio) {
-    const dpr = pixelRatio !== null && pixelRatio !== void 0 ? pixelRatio : tt.getSystemInfoSync().pixelRatio;
-    canvasIdLists.forEach((id, i) => {
-        const ctx = tt.createCanvasContext(id);
-        const canvas = new CanvasWrapDisableWH(ctx.canvas || {}, ctx, dpr, domref.width, domref.height, id);
-        ctx.canvas = canvas;
-        canvasMap.set(id, canvas);
-        if (i >= freeCanvasIdx) {
-            freeCanvasList.push(canvas);
+function getMiniAppCanvasOptions(params, pixelRatio, offscreen = params.id == null) {
+    var _a, _b, _c;
+    return {
+        id: params.id == null ? undefined : String(params.id),
+        width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
+        height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
+        dpr: (_c = params.dpr) !== null && _c !== void 0 ? _c : pixelRatio,
+        offscreen
+    };
+}
+function wrapMiniAppNativeCanvas(nativeCanvas, options) {
+    var _a;
+    const ctx = (_a = nativeCanvas === null || nativeCanvas === void 0 ? void 0 : nativeCanvas.getContext) === null || _a === void 0 ? void 0 : _a.call(nativeCanvas, '2d');
+    if (!ctx) {
+        throw new Error('MiniApp canvas bridge returned a canvas without getContext("2d").');
+    }
+    return new CanvasWrapEnableWH(nativeCanvas, ctx, options.dpr, options.width, options.height, options.id);
+}
+function wrapMiniAppContextCanvas(ctx, options) {
+    if (!ctx) {
+        throw new Error('MiniApp canvas bridge returned an empty 2d context.');
+    }
+    const canvas = new CanvasWrapDisableWH(ctx.canvas || {}, ctx, options.dpr, options.width, options.height, options.id);
+    ctx.canvas = canvas;
+    return canvas;
+}
+function createCanvasWithFactory(params, pixelRatio, canvasMap, factory) {
+    const options = getMiniAppCanvasOptions(params, pixelRatio);
+    const id = options.id;
+    if (id != null) {
+        const existing = canvasMap.get(id);
+        if (existing) {
+            return existing;
         }
-    });
+    }
+    if (!factory) {
+        return null;
+    }
+    const canvas = wrapMiniAppNativeCanvas(factory(options), options);
+    if (id != null) {
+        canvasMap.set(id, canvas);
+    }
+    return canvas;
+}
+
+const FEISHU_CANVAS_BRIDGE_ERROR = 'Feishu canvas bridge is unavailable. VRender feishu env requires envParams.canvasFactory, ' +
+    'a Stage canvas object, or a feishu/tt runtime that exposes createCanvasContext(id).';
+function getFeishuRuntime(params) {
+    var _a, _b, _c, _d, _e;
+    try {
+        return (_c = (_b = (_a = params === null || params === void 0 ? void 0 : params.feishu) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.tt) !== null && _b !== void 0 ? _b : params === null || params === void 0 ? void 0 : params.runtime) !== null && _c !== void 0 ? _c : (typeof tt !== 'undefined' ? tt : undefined);
+    }
+    catch (_f) {
+        return (_e = (_d = params === null || params === void 0 ? void 0 : params.feishu) !== null && _d !== void 0 ? _d : params === null || params === void 0 ? void 0 : params.tt) !== null && _e !== void 0 ? _e : params === null || params === void 0 ? void 0 : params.runtime;
+    }
+}
+function getFeishuPixelRatio(params, runtime = getFeishuRuntime(params)) {
+    var _a, _b, _c, _d;
+    return (_d = (_a = params === null || params === void 0 ? void 0 : params.pixelRatio) !== null && _a !== void 0 ? _a : (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.getSystemInfoSync) === null || _b === void 0 ? void 0 : _b.call(runtime)) === null || _c === void 0 ? void 0 : _c.pixelRatio) !== null && _d !== void 0 ? _d : 1;
 }
 class FeishuEnvContribution extends BaseEnvContribution {
     constructor() {
@@ -5973,8 +6039,7 @@ class FeishuEnvContribution extends BaseEnvContribution {
         this.type = 'feishu';
         this.supportEvent = true;
         this.canvasMap = new Map();
-        this.freeCanvasList = [];
-        this.canvasIdx = 0;
+        this.feishuEnvParams = {};
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -5987,15 +6052,15 @@ class FeishuEnvContribution extends BaseEnvContribution {
         this.applyStyles = true;
     }
     getDynamicCanvasCount() {
-        return this.freeCanvasList.length;
+        return 0;
     }
     getStaticCanvasCount() {
         return 9999;
     }
-    configure(service, params) {
+    configure(service, params = {}) {
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
-            makeUpCanvas$4(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.pixelRatio);
+            this.feishuEnvParams = params;
         }
     }
     loadImage(url) {
@@ -6008,9 +6073,21 @@ class FeishuEnvContribution extends BaseEnvContribution {
         return Promise.reject();
     }
     createCanvas(params) {
-        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
-        this.canvasIdx++;
-        return result;
+        var _a;
+        const envParams = this.feishuEnvParams;
+        const runtime = getFeishuRuntime(envParams);
+        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : getFeishuPixelRatio(envParams, runtime);
+        const factoryCanvas = createCanvasWithFactory(params, dpr, this.canvasMap, envParams.canvasFactory);
+        if (factoryCanvas) {
+            return factoryCanvas;
+        }
+        const options = getMiniAppCanvasOptions(params, dpr, false);
+        if (options.id == null || typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvasContext) !== 'function') {
+            throw new Error(FEISHU_CANVAS_BRIDGE_ERROR);
+        }
+        const canvas = wrapMiniAppContextCanvas(runtime.createCanvasContext(options.id), options);
+        this.canvasMap.set(options.id, canvas);
+        return canvas;
     }
     createOffscreenCanvas(params) {
         return;
@@ -6019,7 +6096,7 @@ class FeishuEnvContribution extends BaseEnvContribution {
         return;
     }
     getDevicePixelRatio() {
-        return tt.getSystemInfoSync().pixelRatio;
+        return getFeishuPixelRatio(this.feishuEnvParams);
     }
     getRequestAnimationFrame() {
         return function (callback) {
@@ -6111,6 +6188,73 @@ let MiniAppEventManager$4 = class MiniAppEventManager {
         this.cache = {};
     }
 };
+function setMiniAppEventTarget$2(event, key, value) {
+    if (!event || !value) {
+        return;
+    }
+    try {
+        event[key] = value;
+    }
+    catch (_a) {
+        Object.defineProperty(event, key, {
+            configurable: true,
+            value
+        });
+    }
+}
+function isValidCoordinate$3(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function pickCoordinate$3(...values) {
+    for (let i = 0; i < values.length; i++) {
+        if (isValidCoordinate$3(values[i])) {
+            return values[i];
+        }
+    }
+    return undefined;
+}
+function setHarmonyEventValue(event, key, value) {
+    try {
+        event[key] = value;
+    }
+    catch (_a) {
+        Object.defineProperty(event, key, {
+            configurable: true,
+            value
+        });
+    }
+}
+function normalizeHarmonyTouchEventPoint(event) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const touch = (_b = (_a = event === null || event === void 0 ? void 0 : event.changedTouches) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (_c = event === null || event === void 0 ? void 0 : event.touches) === null || _c === void 0 ? void 0 : _c[0];
+    if (!touch) {
+        return;
+    }
+    const x = pickCoordinate$3(event.x, event.offsetX, event.clientX, event.pageX, touch.x, touch.offsetX, touch.clientX, touch.pageX);
+    const y = pickCoordinate$3(event.y, event.offsetY, event.clientY, event.pageY, touch.y, touch.offsetY, touch.clientY, touch.pageY);
+    if (x == null || y == null) {
+        return;
+    }
+    if (!event.touches && event.changedTouches) {
+        setHarmonyEventValue(event, 'touches', event.type === 'touchend' || event.type === 'touchcancel' ? [] : event.changedTouches);
+    }
+    setHarmonyEventValue(event, 'x', x);
+    setHarmonyEventValue(event, 'y', y);
+    setHarmonyEventValue(event, 'offsetX', (_d = event.offsetX) !== null && _d !== void 0 ? _d : x);
+    setHarmonyEventValue(event, 'offsetY', (_e = event.offsetY) !== null && _e !== void 0 ? _e : y);
+    setHarmonyEventValue(event, 'clientX', (_f = event.clientX) !== null && _f !== void 0 ? _f : x);
+    setHarmonyEventValue(event, 'clientY', (_g = event.clientY) !== null && _g !== void 0 ? _g : y);
+    setHarmonyEventValue(event, 'pageX', (_h = event.pageX) !== null && _h !== void 0 ? _h : x);
+    setHarmonyEventValue(event, 'pageY', (_j = event.pageY) !== null && _j !== void 0 ? _j : y);
+    touch.x = (_k = touch.x) !== null && _k !== void 0 ? _k : x;
+    touch.y = (_l = touch.y) !== null && _l !== void 0 ? _l : y;
+    touch.offsetX = (_m = touch.offsetX) !== null && _m !== void 0 ? _m : x;
+    touch.offsetY = (_o = touch.offsetY) !== null && _o !== void 0 ? _o : y;
+    touch.clientX = (_p = touch.clientX) !== null && _p !== void 0 ? _p : x;
+    touch.clientY = (_q = touch.clientY) !== null && _q !== void 0 ? _q : y;
+    touch.pageX = (_r = touch.pageX) !== null && _r !== void 0 ? _r : x;
+    touch.pageY = (_s = touch.pageY) !== null && _s !== void 0 ? _s : y;
+}
 class HarmonyWindowHandlerContribution extends BaseWindowHandlerContribution {
     get container() {
         return null;
@@ -6144,7 +6288,8 @@ class HarmonyWindowHandlerContribution extends BaseWindowHandlerContribution {
     createWindowByConfig(params) {
         const nativeCanvas = this.global.createCanvas({
             width: params.width,
-            height: params.height
+            height: params.height,
+            dpr: params.dpr
         });
         const options = {
             width: params.width,
@@ -6160,6 +6305,14 @@ class HarmonyWindowHandlerContribution extends BaseWindowHandlerContribution {
         let canvas;
         if (typeof params.canvas === 'string') {
             canvas = this.global.getElementById(params.canvas);
+            if (!canvas) {
+                canvas = this.global.createCanvas({
+                    id: params.canvas,
+                    width: params.width,
+                    height: params.height,
+                    dpr: params.dpr
+                });
+            }
             if (!canvas) {
                 throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');
             }
@@ -6174,15 +6327,22 @@ class HarmonyWindowHandlerContribution extends BaseWindowHandlerContribution {
             width = data.width;
             height = data.height;
         }
+        let dpr = params.dpr;
+        if (dpr == null) {
+            dpr = canvas.width / width;
+        }
         this.canvas = new HarmonyCanvas({
             width: width,
             height: height,
-            dpr: 1,
+            dpr: dpr,
             nativeCanvas: canvas,
             canvasControled: params.canvasControled
         });
     }
     releaseWindow() {
+        var _a, _b;
+        this.eventManager.cleanEvent();
+        (_b = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.release) === null || _b === void 0 ? void 0 : _b.call(_a);
         return;
     }
     resizeWindow(width, height) {
@@ -6207,18 +6367,15 @@ class HarmonyWindowHandlerContribution extends BaseWindowHandlerContribution {
         this.eventManager.removeEventListener(type, listener);
     }
     dispatchEvent(event) {
+        var _a;
         const { type } = event;
         if (!this.eventManager.cache[type]) {
             return false;
         }
-        if (event.changedTouches && event.changedTouches[0]) {
-            event.offsetX = event.changedTouches[0].x;
-            event.changedTouches[0].offsetX = event.changedTouches[0].x;
-            event.changedTouches[0].clientX = event.changedTouches[0].x;
-            event.offsetY = event.changedTouches[0].y;
-            event.changedTouches[0].offsetY = event.changedTouches[0].y;
-            event.changedTouches[0].clientY = event.changedTouches[0].y;
-        }
+        const nativeCanvas = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.nativeCanvas;
+        setMiniAppEventTarget$2(event, 'target', nativeCanvas);
+        setMiniAppEventTarget$2(event, 'currentTarget', nativeCanvas);
+        normalizeHarmonyTouchEventPoint(event);
         event.preventDefault = () => {
             return;
         };
@@ -6279,31 +6436,114 @@ function bindHarmonyWindowContribution(container) {
     }
 }
 
-function createCanvas(width, height, id) {
-    const _c = new OffscreenCanvas(width, height);
-    const context = _c.getContext('2d');
-    const nativeCanvas = {
+const HARMONY_CANVAS_BRIDGE_ERROR = 'Harmony canvas bridge is unavailable. VRender Harmony env requires envParams.canvasFactory ' +
+    'or a Harmony runtime that exposes a global createCanvas/createOffscreenCanvas capability.';
+const HARMONY_CANVAS_SIZE_ERROR = 'Harmony canvas size is unavailable. Pass stage width/height when creating a Harmony stage canvas.';
+function isValidCoordinate$2(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function pickCoordinate$2(...values) {
+    for (let i = 0; i < values.length; i++) {
+        if (isValidCoordinate$2(values[i])) {
+            return values[i];
+        }
+    }
+    return undefined;
+}
+function getPrimaryTouch$1(event) {
+    var _a, _b, _c;
+    return (_b = (_a = event === null || event === void 0 ? void 0 : event.changedTouches) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (_c = event === null || event === void 0 ? void 0 : event.touches) === null || _c === void 0 ? void 0 : _c[0];
+}
+function getHarmonyEventPoint(event) {
+    const touch = getPrimaryTouch$1(event);
+    const x = pickCoordinate$2(event === null || event === void 0 ? void 0 : event.x, event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.clientX, event === null || event === void 0 ? void 0 : event.pageX, touch === null || touch === void 0 ? void 0 : touch.x, touch === null || touch === void 0 ? void 0 : touch.offsetX, touch === null || touch === void 0 ? void 0 : touch.clientX, touch === null || touch === void 0 ? void 0 : touch.pageX);
+    const y = pickCoordinate$2(event === null || event === void 0 ? void 0 : event.y, event === null || event === void 0 ? void 0 : event.offsetY, event === null || event === void 0 ? void 0 : event.clientY, event === null || event === void 0 ? void 0 : event.pageY, touch === null || touch === void 0 ? void 0 : touch.y, touch === null || touch === void 0 ? void 0 : touch.offsetY, touch === null || touch === void 0 ? void 0 : touch.clientY, touch === null || touch === void 0 ? void 0 : touch.pageY);
+    return x == null || y == null ? null : { x, y };
+}
+function getHarmonyRuntime(params) {
+    var _a;
+    return (_a = params === null || params === void 0 ? void 0 : params.harmony) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.runtime;
+}
+function getHarmonyPixelRatio(params) {
+    var _a;
+    return (_a = params === null || params === void 0 ? void 0 : params.pixelRatio) !== null && _a !== void 0 ? _a : 1;
+}
+function getCanvasSize$1(width, height) {
+    if (!isValidCoordinate$2(width) || !isValidCoordinate$2(height)) {
+        throw new Error(HARMONY_CANVAS_SIZE_ERROR);
+    }
+    return { width, height };
+}
+function getGlobalOffscreenCanvasCtor() {
+    try {
+        return typeof OffscreenCanvas !== 'undefined' ? OffscreenCanvas : undefined;
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+function createFallbackOffscreenCanvas(width, height) {
+    const OffscreenCanvasCtor = getGlobalOffscreenCanvasCtor();
+    if (typeof OffscreenCanvasCtor !== 'function') {
+        return null;
+    }
+    return new OffscreenCanvasCtor(width, height);
+}
+function wrapHarmonyNativeCanvas(nativeCanvas, id, width, height, dpr) {
+    var _a, _b, _c;
+    nativeCanvas.width = width * dpr;
+    nativeCanvas.height = height * dpr;
+    const context = (_b = (_a = nativeCanvas.getContext) === null || _a === void 0 ? void 0 : _a.call(nativeCanvas, '2d')) !== null && _b !== void 0 ? _b : (_c = nativeCanvas.getContext) === null || _c === void 0 ? void 0 : _c.call(nativeCanvas);
+    if (!context) {
+        throw new Error(HARMONY_CANVAS_BRIDGE_ERROR);
+    }
+    if (typeof nativeCanvas.getBoundingClientRect !== 'function') {
+        nativeCanvas.getBoundingClientRect = () => ({
+            width,
+            height
+        });
+    }
+    return new CanvasWrapEnableWH(nativeCanvas, context, dpr, width, height, id);
+}
+function createHarmonyNativeCanvas(id, width, height, dpr, offscreen, params, runtime) {
+    const options = {
+        id,
         width,
         height,
-        context,
-        _c,
-        getBoundingClientRect() {
-            return {
-                width,
-                height
-            };
-        },
-        getContext() {
-            return context;
-        }
+        dpr,
+        offscreen
     };
-    return new CanvasWrapDisableWH(nativeCanvas, context, 1, width, height, id);
+    if (params.canvasFactory) {
+        return params.canvasFactory(options);
+    }
+    if (offscreen && typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createOffscreenCanvas) === 'function') {
+        const canvas = runtime.createOffscreenCanvas(options);
+        if (canvas) {
+            return canvas;
+        }
+    }
+    if (!offscreen && typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvas) === 'function') {
+        const canvas = runtime.createCanvas(options);
+        if (canvas) {
+            return canvas;
+        }
+    }
+    if (offscreen) {
+        const canvas = createFallbackOffscreenCanvas(width * dpr, height * dpr);
+        if (canvas) {
+            return canvas;
+        }
+    }
+    throw new Error(HARMONY_CANVAS_BRIDGE_ERROR);
 }
 class HarmonyEnvContribution extends BaseEnvContribution {
     constructor() {
         super();
         this.type = 'harmony';
         this.supportEvent = true;
+        this.canvasMap = new Map();
+        this.freeCanvasList = [];
+        this.canvasIdx = 0;
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -6316,9 +6556,11 @@ class HarmonyEnvContribution extends BaseEnvContribution {
         this.applyStyles = true;
         this.rafSTO = new RafBasedSTO(0);
     }
-    configure(service, params) {
+    configure(service, params = {}) {
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
+            this.harmonyEnvParams = params;
+            this.harmonyRuntime = getHarmonyRuntime(params);
         }
     }
     getDynamicCanvasCount() {
@@ -6328,13 +6570,63 @@ class HarmonyEnvContribution extends BaseEnvContribution {
         return 9999;
     }
     loadImage(url) {
-        return;
+        var _a;
+        if (typeof ((_a = this.harmonyRuntime) === null || _a === void 0 ? void 0 : _a.createImage) !== 'function') {
+            return Promise.resolve({
+                data: null,
+                loadState: 'fail'
+            });
+        }
+        const img = this.harmonyRuntime.createImage(url);
+        return new Promise(resolve => {
+            img.onload = () => {
+                resolve({
+                    data: img,
+                    loadState: 'success'
+                });
+            };
+            img.onerror = () => {
+                resolve({
+                    data: null,
+                    loadState: 'fail'
+                });
+            };
+        });
     }
     loadSvg(url) {
-        return Promise.reject();
+        return Promise.resolve({
+            data: null,
+            loadState: 'fail'
+        });
     }
     createCanvas(params) {
-        return createCanvas(params.width, params.height, params.id);
+        var _a, _b;
+        const envParams = (_a = this.harmonyEnvParams) !== null && _a !== void 0 ? _a : {};
+        const runtime = getHarmonyRuntime(envParams);
+        const dpr = (_b = params.dpr) !== null && _b !== void 0 ? _b : getHarmonyPixelRatio(envParams);
+        const size = getCanvasSize$1(params.width, params.height);
+        if (params.id != null) {
+            const id = String(params.id);
+            const existing = this.canvasMap.get(id);
+            if (existing) {
+                return existing;
+            }
+            const nativeCanvas = createHarmonyNativeCanvas(id, size.width, size.height, dpr, false, envParams, runtime);
+            const canvas = wrapHarmonyNativeCanvas(nativeCanvas, id, size.width, size.height, dpr);
+            this.canvasMap.set(id, canvas);
+            return canvas;
+        }
+        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
+        this.canvasIdx++;
+        if (result) {
+            return result;
+        }
+        const id = Math.random().toString();
+        const nativeCanvas = createHarmonyNativeCanvas(id, size.width, size.height, dpr, true, envParams, runtime);
+        const canvas = wrapHarmonyNativeCanvas(nativeCanvas, id, size.width, size.height, dpr);
+        this.canvasMap.set(id, canvas);
+        this.freeCanvasList.push(canvas);
+        return canvas;
     }
     createOffscreenCanvas(params) {
         return;
@@ -6343,7 +6635,7 @@ class HarmonyEnvContribution extends BaseEnvContribution {
         return;
     }
     getDevicePixelRatio() {
-        return 1;
+        return getHarmonyPixelRatio(this.harmonyEnvParams);
     }
     getRequestAnimationFrame() {
         return (callback) => {
@@ -6357,10 +6649,7 @@ class HarmonyEnvContribution extends BaseEnvContribution {
     }
     mapToCanvasPoint(event) {
         var _a;
-        if ((_a = event === null || event === void 0 ? void 0 : event.type) === null || _a === void 0 ? void 0 : _a.startsWith('mouse')) {
-            return event;
-        }
-        return event;
+        return (_a = getHarmonyEventPoint(event)) !== null && _a !== void 0 ? _a : event;
     }
     addEventListener(type, listener, options) {
         return null;
@@ -6372,7 +6661,8 @@ class HarmonyEnvContribution extends BaseEnvContribution {
         return null;
     }
     getElementById(str) {
-        return null;
+        var _a;
+        return (_a = this.canvasMap.get(str)) !== null && _a !== void 0 ? _a : null;
     }
     getRootElement() {
         return null;
@@ -6763,13 +7053,11 @@ function createBoundLynxCanvas(id, runtime) {
     }
     return null;
 }
-function getCanvasSize(domref, width, height) {
-    const resolvedWidth = width !== null && width !== void 0 ? width : domref === null || domref === void 0 ? void 0 : domref.width;
-    const resolvedHeight = height !== null && height !== void 0 ? height : domref === null || domref === void 0 ? void 0 : domref.height;
-    if (!isValidCoordinate(resolvedWidth) || !isValidCoordinate(resolvedHeight)) {
+function getCanvasSize(width, height) {
+    if (!isValidCoordinate(width) || !isValidCoordinate(height)) {
         throw new Error(LYNX_CANVAS_SIZE_ERROR);
     }
-    return { width: resolvedWidth, height: resolvedHeight };
+    return { width, height };
 }
 function wrapLynxNativeCanvas(nativeCanvas, id, width, height, dpr) {
     nativeCanvas.width = width * dpr;
@@ -6800,32 +7088,6 @@ function createLynxNativeCanvas(id, width, height, dpr, offscreen, params, runti
     }
     throw new Error(LYNX_CANVAS_BRIDGE_ERROR);
 }
-function makeUpCanvas$3(params = {}, canvasMap, freeCanvasList) {
-    const runtime = getLynxRuntime(params);
-    const { domref, canvasIdLists = [], freeCanvasIdx = 0 } = params;
-    const offscreen = !!params.offscreen;
-    const dpr = getLynxPixelRatio(params, runtime);
-    canvasIdLists.forEach((id, i) => {
-        const size = getCanvasSize(domref);
-        const _canvas = createLynxNativeCanvas(id, size.width, size.height, dpr, offscreen, params, runtime);
-        const canvas = wrapLynxNativeCanvas(_canvas, id, size.width, size.height, dpr);
-        canvasMap.set(id, canvas);
-        if (i > freeCanvasIdx) {
-            freeCanvasList.push(canvas);
-        }
-    });
-    if (!freeCanvasList.length && domref && typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createOffscreenCanvas) === 'function') {
-        const size = getCanvasSize(domref);
-        const _canvas = runtime.createOffscreenCanvas();
-        _canvas.width = size.width * dpr;
-        _canvas.height = size.height * dpr;
-        const ctx = _canvas.getContext('2d');
-        const id = Math.random().toString();
-        const canvas = new CanvasWrapEnableWH(_canvas, ctx, dpr, size.width, size.height, id);
-        canvasMap.set(id, canvas);
-        freeCanvasList.push(canvas);
-    }
-}
 function createImageElement(src, isSvg = false, runtime = getGlobalLynxRuntime()) {
     if (isSvg) {
         return Promise.reject();
@@ -6868,7 +7130,6 @@ class LynxEnvContribution extends BaseEnvContribution {
             service.setActiveEnvContribution(this);
             this.lynxEnvParams = params;
             this.lynxRuntime = getLynxRuntime(params);
-            makeUpCanvas$3(params, this.canvasMap, this.freeCanvasList);
         }
     }
     getDynamicCanvasCount() {
@@ -6910,7 +7171,7 @@ class LynxEnvContribution extends BaseEnvContribution {
             const envParams = (_a = this.lynxEnvParams) !== null && _a !== void 0 ? _a : {};
             const runtime = getLynxRuntime(envParams);
             const dpr = (_b = params.dpr) !== null && _b !== void 0 ? _b : getLynxPixelRatio(envParams, runtime);
-            const size = getCanvasSize(envParams.domref, params.width, params.height);
+            const size = getCanvasSize(params.width, params.height);
             const nativeCanvas = createLynxNativeCanvas(id, size.width, size.height, dpr, false, envParams, runtime);
             const canvas = wrapLynxNativeCanvas(nativeCanvas, id, size.width, size.height, dpr);
             this.canvasMap.set(id, canvas);
@@ -6924,7 +7185,7 @@ class LynxEnvContribution extends BaseEnvContribution {
         const envParams = (_c = this.lynxEnvParams) !== null && _c !== void 0 ? _c : {};
         const runtime = getLynxRuntime(envParams);
         const dpr = (_d = params.dpr) !== null && _d !== void 0 ? _d : getLynxPixelRatio(envParams, runtime);
-        const size = getCanvasSize(envParams.domref, params.width, params.height);
+        const size = getCanvasSize(params.width, params.height);
         const id = Math.random().toString();
         const nativeCanvas = createLynxNativeCanvas(id, size.width, size.height, dpr, true, envParams, runtime);
         const canvas = wrapLynxNativeCanvas(nativeCanvas, id, size.width, size.height, dpr);
@@ -7347,6 +7608,14 @@ class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
         let canvas;
         if (typeof params.canvas === 'string') {
             canvas = this.global.getElementById(params.canvas);
+            if (!canvas) {
+                canvas = this.global.createCanvas({
+                    id: params.canvas,
+                    width: params.width,
+                    height: params.height,
+                    dpr: params.dpr
+                });
+            }
             if (!canvas) {
                 throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');
             }
@@ -7474,26 +7743,16 @@ function bindTaroWindowContribution(container) {
     }
 }
 
-function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, taro, dpr) {
-    canvasIdLists.forEach((id, i) => {
-        const ctx = taro.createCanvasContext(id);
-        const canvas = new CanvasWrapDisableWH(ctx.canvas || {}, ctx, dpr, domref.width, domref.height, id);
-        ctx.canvas = canvas;
-        canvasMap.set(id, canvas);
-        if (i >= freeCanvasIdx) {
-            freeCanvasList.push(canvas);
-        }
-        return canvas;
-    });
-}
+const TARO_CANVAS_BRIDGE_ERROR = 'Taro canvas bridge is unavailable. VRender taro env requires envParams.canvasFactory, ' +
+    'a Stage canvas object, or envParams.taro.createCanvasContext(id).';
 class TaroEnvContribution extends BaseEnvContribution {
     constructor() {
         super();
         this.type = 'taro';
         this.supportEvent = true;
         this.canvasMap = new Map();
-        this.freeCanvasList = [];
-        this.canvasIdx = 0;
+        this.pixelRatio = 1;
+        this.taroEnvParams = {};
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -7506,7 +7765,7 @@ class TaroEnvContribution extends BaseEnvContribution {
         this.applyStyles = true;
     }
     getDynamicCanvasCount() {
-        return this.freeCanvasList.length;
+        return 0;
     }
     getStaticCanvasCount() {
         return 9999;
@@ -7518,12 +7777,13 @@ class TaroEnvContribution extends BaseEnvContribution {
         }
         return event;
     }
-    configure(service, params) {
+    configure(service, params = {}) {
+        var _a;
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
-            makeUpCanvas$2(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.taro, params.pixelRatio);
+            this.taroEnvParams = params;
             this.taro = params.taro;
-            this.pixelRatio = params.pixelRatio;
+            this.pixelRatio = (_a = params.pixelRatio) !== null && _a !== void 0 ? _a : 1;
         }
     }
     loadImage(url) {
@@ -7533,7 +7793,7 @@ class TaroEnvContribution extends BaseEnvContribution {
         });
     }
     loadSvg(svgStr) {
-        const _window = window || globalThis;
+        const _window = typeof window !== 'undefined' ? window : globalThis;
         if (_window.DOMParser) {
             const parser = new _window.DOMParser();
             const svg = parser.parseFromString(svgStr, 'image/svg+xml').children[0];
@@ -7555,9 +7815,20 @@ class TaroEnvContribution extends BaseEnvContribution {
         return Promise.reject();
     }
     createCanvas(params) {
-        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
-        this.canvasIdx++;
-        return result;
+        var _a, _b;
+        const envParams = this.taroEnvParams;
+        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : this.getDevicePixelRatio();
+        const factoryCanvas = createCanvasWithFactory(params, dpr, this.canvasMap, envParams.canvasFactory);
+        if (factoryCanvas) {
+            return factoryCanvas;
+        }
+        const options = getMiniAppCanvasOptions(params, dpr, false);
+        if (options.id == null || typeof ((_b = envParams.taro) === null || _b === void 0 ? void 0 : _b.createCanvasContext) !== 'function') {
+            throw new Error(TARO_CANVAS_BRIDGE_ERROR);
+        }
+        const canvas = wrapMiniAppContextCanvas(envParams.taro.createCanvasContext(options.id), options);
+        this.canvasMap.set(options.id, canvas);
+        return canvas;
     }
     createOffscreenCanvas(params) {
         return;
@@ -7696,6 +7967,14 @@ class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
         let canvas;
         if (typeof params.canvas === 'string') {
             canvas = this.global.getElementById(params.canvas);
+            if (!canvas) {
+                canvas = this.global.createCanvas({
+                    id: params.canvas,
+                    width: params.width,
+                    height: params.height,
+                    dpr: params.dpr
+                });
+            }
             if (!canvas) {
                 throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');
             }
@@ -7819,34 +8098,20 @@ function bindTTWindowContribution(container) {
     }
 }
 
-function makeUpCanvas$1(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, component) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const dpr = tt.getSystemInfoSync().pixelRatio;
-        for (let i = 0; i < canvasIdLists.length; i++) {
-            const id = canvasIdLists[i];
-            yield new Promise(resolve => {
-                let data = tt.createSelectorQuery();
-                if (component) {
-                    data = data.in(component);
-                }
-                data
-                    .select(`#${id}`)
-                    .node()
-                    .exec((res) => {
-                    const canvas = res[0].node;
-                    const width = canvas.width;
-                    const height = canvas.height;
-                    canvas.width = width * dpr;
-                    canvas.height = height * dpr;
-                    canvasMap.set(id, canvas);
-                    if (i >= freeCanvasIdx) {
-                        freeCanvasList.push(canvas);
-                    }
-                    resolve(null);
-                });
-            });
-        }
-    });
+const TT_CANVAS_BRIDGE_ERROR = 'TT canvas bridge is unavailable. VRender tt env requires envParams.canvasFactory, ' +
+    'a Stage canvas object, or a tt runtime that exposes createCanvasContext(id).';
+function getTTRuntime(params) {
+    var _a, _b, _c;
+    try {
+        return (_b = (_a = params === null || params === void 0 ? void 0 : params.tt) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.runtime) !== null && _b !== void 0 ? _b : (typeof tt !== 'undefined' ? tt : undefined);
+    }
+    catch (_d) {
+        return (_c = params === null || params === void 0 ? void 0 : params.tt) !== null && _c !== void 0 ? _c : params === null || params === void 0 ? void 0 : params.runtime;
+    }
+}
+function getTTPixelRatio(params, runtime = getTTRuntime(params)) {
+    var _a, _b, _c, _d;
+    return (_d = (_a = params === null || params === void 0 ? void 0 : params.pixelRatio) !== null && _a !== void 0 ? _a : (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.getSystemInfoSync) === null || _b === void 0 ? void 0 : _b.call(runtime)) === null || _c === void 0 ? void 0 : _c.pixelRatio) !== null && _d !== void 0 ? _d : 1;
 }
 class TTEnvContribution extends BaseEnvContribution {
     constructor() {
@@ -7854,8 +8119,7 @@ class TTEnvContribution extends BaseEnvContribution {
         this.type = 'tt';
         this.supportEvent = true;
         this.canvasMap = new Map();
-        this.freeCanvasList = [];
-        this.canvasIdx = 0;
+        this.ttEnvParams = {};
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -7867,11 +8131,10 @@ class TTEnvContribution extends BaseEnvContribution {
         }
         this.applyStyles = true;
     }
-    configure(service, params) {
+    configure(service, params = {}) {
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
-            return makeUpCanvas$1(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.component).then(() => {
-            });
+            this.ttEnvParams = params;
         }
     }
     loadImage(url) {
@@ -7884,9 +8147,21 @@ class TTEnvContribution extends BaseEnvContribution {
         return Promise.reject();
     }
     createCanvas(params) {
-        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
-        this.canvasIdx++;
-        return result;
+        var _a;
+        const envParams = this.ttEnvParams;
+        const runtime = getTTRuntime(envParams);
+        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : getTTPixelRatio(envParams, runtime);
+        const factoryCanvas = createCanvasWithFactory(params, dpr, this.canvasMap, envParams.canvasFactory);
+        if (factoryCanvas) {
+            return factoryCanvas;
+        }
+        const options = getMiniAppCanvasOptions(params, dpr, false);
+        if (options.id == null || typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvasContext) !== 'function') {
+            throw new Error(TT_CANVAS_BRIDGE_ERROR);
+        }
+        const canvas = wrapMiniAppContextCanvas(runtime.createCanvasContext(options.id), options);
+        this.canvasMap.set(options.id, canvas);
+        return canvas;
     }
     createOffscreenCanvas(params) {
         return;
@@ -7895,7 +8170,7 @@ class TTEnvContribution extends BaseEnvContribution {
         return;
     }
     getDevicePixelRatio() {
-        return tt.getSystemInfoSync().pixelRatio;
+        return getTTPixelRatio(this.ttEnvParams);
     }
     getRequestAnimationFrame() {
         return function (callback) {
@@ -8050,6 +8325,14 @@ class WxWindowHandlerContribution extends BaseWindowHandlerContribution {
         let canvas;
         if (typeof params.canvas === 'string') {
             canvas = this.global.getElementById(params.canvas);
+            if (!canvas) {
+                canvas = this.global.createCanvas({
+                    id: params.canvas,
+                    width: params.width,
+                    height: params.height,
+                    dpr: params.dpr
+                });
+            }
             if (!canvas) {
                 throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');
             }
@@ -8177,40 +8460,20 @@ function bindWxWindowContribution(container) {
     }
 }
 
-function makeUpCanvas(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, component, forceUpdate) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const dpr = wx.getSystemInfoSync().pixelRatio;
-        for (let i = 0; i < canvasIdLists.length; i++) {
-            const id = canvasIdLists[i];
-            if (!forceUpdate && canvasMap.has(id)) {
-                continue;
-            }
-            yield new Promise(resolve => {
-                let data = wx.createSelectorQuery();
-                if (component) {
-                    data = data.in(component);
-                }
-                data
-                    .select(`#${id}`)
-                    .fields({ node: true, size: true })
-                    .exec((res) => {
-                    if (!res[0]) {
-                        return;
-                    }
-                    const canvas = res[0].node;
-                    const width = res[0].width;
-                    const height = res[0].height;
-                    canvas.width = width * dpr;
-                    canvas.height = height * dpr;
-                    canvasMap.set(id, canvas);
-                    if (i >= freeCanvasIdx) {
-                        freeCanvasList.push(canvas);
-                    }
-                    resolve(null);
-                });
-            });
-        }
-    });
+const WX_CANVAS_BRIDGE_ERROR = 'Wx canvas bridge is unavailable. VRender wx env requires envParams.canvasFactory, ' +
+    'a Stage canvas object, or a wx runtime that exposes createCanvasContext(id).';
+function getWxRuntime(params) {
+    var _a, _b, _c;
+    try {
+        return (_b = (_a = params === null || params === void 0 ? void 0 : params.wx) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.runtime) !== null && _b !== void 0 ? _b : (typeof wx !== 'undefined' ? wx : undefined);
+    }
+    catch (_d) {
+        return (_c = params === null || params === void 0 ? void 0 : params.wx) !== null && _c !== void 0 ? _c : params === null || params === void 0 ? void 0 : params.runtime;
+    }
+}
+function getWxPixelRatio(params, runtime = getWxRuntime(params)) {
+    var _a, _b, _c, _d;
+    return (_d = (_a = params === null || params === void 0 ? void 0 : params.pixelRatio) !== null && _a !== void 0 ? _a : (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.getSystemInfoSync) === null || _b === void 0 ? void 0 : _b.call(runtime)) === null || _c === void 0 ? void 0 : _c.pixelRatio) !== null && _d !== void 0 ? _d : 1;
 }
 class WxEnvContribution extends BaseEnvContribution {
     constructor() {
@@ -8218,8 +8481,7 @@ class WxEnvContribution extends BaseEnvContribution {
         this.type = 'wx';
         this.supportEvent = true;
         this.canvasMap = new Map();
-        this.freeCanvasList = [];
-        this.canvasIdx = 0;
+        this.wxEnvParams = {};
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -8231,11 +8493,10 @@ class WxEnvContribution extends BaseEnvContribution {
         }
         this.applyStyles = true;
     }
-    configure(service, params) {
+    configure(service, params = {}) {
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
-            return makeUpCanvas(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.component, params.forceUpdate).then(() => {
-            });
+            this.wxEnvParams = params;
         }
     }
     loadImage(url) {
@@ -8251,9 +8512,21 @@ class WxEnvContribution extends BaseEnvContribution {
         });
     }
     createCanvas(params) {
-        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
-        this.canvasIdx++;
-        return result;
+        var _a;
+        const envParams = this.wxEnvParams;
+        const runtime = getWxRuntime(envParams);
+        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : getWxPixelRatio(envParams, runtime);
+        const factoryCanvas = createCanvasWithFactory(params, dpr, this.canvasMap, envParams.canvasFactory);
+        if (factoryCanvas) {
+            return factoryCanvas;
+        }
+        const options = getMiniAppCanvasOptions(params, dpr, false);
+        if (options.id == null || typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvasContext) !== 'function') {
+            throw new Error(WX_CANVAS_BRIDGE_ERROR);
+        }
+        const canvas = wrapMiniAppContextCanvas(runtime.createCanvasContext(options.id), options);
+        this.canvasMap.set(options.id, canvas);
+        return canvas;
     }
     createOffscreenCanvas(params) {
         return;
@@ -8262,7 +8535,7 @@ class WxEnvContribution extends BaseEnvContribution {
         return;
     }
     getDevicePixelRatio() {
-        return wx.getSystemInfoSync().pixelRatio;
+        return getWxPixelRatio(this.wxEnvParams);
     }
     getRequestAnimationFrame() {
         return function (callback) {