@visactor/vrender-kits 1.1.9 → 1.1.10

package/dist/index.es.js

@@ -19533,101 +19533,6 @@ HarmonyCanvas.env = 'harmony';
 
 const bindHarmonyCanvasModules = createModule(HarmonyCanvas, HarmonyContext2d);
 
-class LynxContext2d extends BrowserContext2d {
-    get globalAlpha() {
-        return this._globalAlpha;
-    }
-    set globalAlpha(ga) {
-        this.nativeContext.globalAlpha = ga * this.baseGlobalAlpha;
-        this._globalAlpha = ga * this.baseGlobalAlpha;
-    }
-    setLineDash(segments) {
-        const a = arguments;
-        const _context = this.nativeContext;
-        if (!!this.nativeContext.setLineDash) {
-            const lineDash = a[0];
-            if (lineDash[0] === 0 && lineDash[1] === 0) {
-                return;
-            }
-            lineDash && _context.setLineDash(lineDash);
-        }
-    }
-    _setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
-        const _context = this.nativeContext;
-        if (!defaultParams) {
-            defaultParams = this.strokeAttributes;
-        }
-        const { strokeOpacity = defaultParams.strokeOpacity, opacity = defaultParams.opacity } = attribute;
-        if (strokeOpacity > 1e-12 && opacity > 1e-12) {
-            const { lineWidth = defaultParams.lineWidth, stroke = defaultParams.stroke, lineJoin = defaultParams.lineJoin, lineDash = defaultParams.lineDash, lineCap = defaultParams.lineCap, miterLimit = defaultParams.miterLimit, keepStrokeScale = defaultParams.keepStrokeScale, lineDashOffset = defaultParams.lineDashOffset } = attribute;
-            _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha;
-            _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke$1(this, lineWidth, this.dpr);
-            _context.strokeStyle = createColor$1(this, stroke, params, offsetX, offsetY);
-            _context.lineJoin = lineJoin;
-            if (!(lineDash[0] === 0 && lineDash[1] === 0) && lineDash) {
-                _context.setLineDash(lineDash);
-                _context.lineDashOffset = lineDashOffset;
-            }
-            _context.lineCap = lineCap;
-            _context.miterLimit = miterLimit;
-        }
-    }
-    measureText(text, method = application.global.measureTextMethod) {
-        const dpr = this.dpr || 1;
-        this.setTransform(1, 0, 0, 1, 0, 0, true, dpr);
-        const metrics = super.measureText(text, method);
-        if (dpr === 1 || metrics.fontBoundingBoxAscent == null || metrics.fontBoundingBoxDescent == null) {
-            return metrics;
-        }
-        return Object.assign(Object.assign({}, metrics), { width: metrics.width, actualBoundingBoxLeft: metrics.actualBoundingBoxLeft, actualBoundingBoxRight: metrics.actualBoundingBoxRight, actualBoundingBoxAscent: metrics.actualBoundingBoxAscent, actualBoundingBoxDescent: metrics.actualBoundingBoxDescent, fontBoundingBoxAscent: metrics.fontBoundingBoxAscent / dpr, fontBoundingBoxDescent: metrics.fontBoundingBoxDescent / dpr });
-    }
-    createPattern(image, repetition) {
-        return null;
-    }
-    draw() {
-        const _context = this.nativeContext;
-        if (!_context.draw) {
-            return;
-        }
-        this.drawPromise = new Promise(resolve => {
-            _context.draw(true, () => {
-                this.drawPromise = null;
-                resolve(null);
-            });
-        });
-    }
-}
-LynxContext2d.env = 'lynx';
-
-class LynxCanvas extends BaseCanvas {
-    constructor(params) {
-        super(params);
-    }
-    init() {
-        this._context = new LynxContext2d(this, this._dpr);
-    }
-    resize(width, height) {
-        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;
-        if (this._nativeCanvas.nativeCanvas) {
-            this._nativeCanvas.nativeCanvas.width = this._pixelWidth;
-            this._nativeCanvas.nativeCanvas.height = this._pixelHeight;
-        }
-        const _context = this._context;
-        _context.dpr = this._dpr;
-    }
-    release(...params) {
-        return;
-    }
-}
-LynxCanvas.env = 'lynx';
-
-const bindLynxCanvasModules = createModule(LynxCanvas, LynxContext2d);
-
 class NodeContext2d extends BrowserContext2d {
     constructor(canvas, dpr) {
         super(canvas, dpr);
@@ -22766,119 +22671,22 @@ function initHarmonyEnv() {
     loadHarmonyEnv();
 }
 
-let MiniAppEventManager$3 = class MiniAppEventManager {
-    constructor() {
-        this.cache = {};
-    }
-    addEventListener(type, func) {
-        if (!type || !func) {
-            return;
-        }
-        this.cache[type] = this.cache[type] || {
-            listener: []
-        };
-        this.cache[type].listener.push(func);
-    }
-    removeEventListener(type, func) {
-        if (!type || !func) {
-            return;
-        }
-        if (!this.cache[type]) {
-            return;
-        }
-        const index = this.cache[type].listener.findIndex((f) => f === func);
-        if (index >= 0) {
-            this.cache[type].listener.splice(index, 1);
-        }
-    }
-    cleanEvent() {
-        this.cache = {};
-    }
-};
-function setMiniAppEventTarget$1(event, key, value) {
-    if (!event || !value) {
-        return;
-    }
-    try {
-        event[key] = value;
-    }
-    catch (_a) {
-        Object.defineProperty(event, key, {
-            configurable: true,
-            value
-        });
-    }
-}
-function isValidCoordinate$1(value) {
-    return typeof value === 'number' && Number.isFinite(value);
-}
-function pickCoordinate$1(...values) {
-    for (let i = 0; i < values.length; i++) {
-        if (isValidCoordinate$1(values[i])) {
-            return values[i];
-        }
-    }
-    return undefined;
-}
-function setLynxEventValue(event, key, value) {
-    try {
-        event[key] = value;
-    }
-    catch (_a) {
-        Object.defineProperty(event, key, {
-            configurable: true,
-            value
-        });
-    }
-}
-function normalizeLynxTouchEventPoint(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$1(event.x, event.offsetX, event.clientX, event.pageX, touch.x, touch.offsetX, touch.clientX, touch.pageX);
-    const y = pickCoordinate$1(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) {
-        setLynxEventValue(event, 'touches', event.type === 'touchend' || event.type === 'touchcancel' ? [] : event.changedTouches);
-    }
-    setLynxEventValue(event, 'x', x);
-    setLynxEventValue(event, 'y', y);
-    setLynxEventValue(event, 'offsetX', (_d = event.offsetX) !== null && _d !== void 0 ? _d : x);
-    setLynxEventValue(event, 'offsetY', (_e = event.offsetY) !== null && _e !== void 0 ? _e : y);
-    setLynxEventValue(event, 'clientX', (_f = event.clientX) !== null && _f !== void 0 ? _f : x);
-    setLynxEventValue(event, 'clientY', (_g = event.clientY) !== null && _g !== void 0 ? _g : y);
-    setLynxEventValue(event, 'pageX', (_h = event.pageX) !== null && _h !== void 0 ? _h : x);
-    setLynxEventValue(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 LynxWindowHandlerContribution extends BaseWindowHandlerContribution {
+class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
     get container() {
         return null;
     }
     constructor(global = application.global) {
         super();
         this.global = global;
-        this.type = 'lynx';
-        this.eventManager = new MiniAppEventManager$3();
+        this.type = 'node';
     }
     getTitle() {
-        return this.canvas.id && this.canvas.id.toString();
+        return '';
     }
     getWH() {
         return {
-            width: this.canvas.width / (this.canvas.dpr || 1),
-            height: this.canvas.height / (this.canvas.dpr || 1)
+            width: this.canvas.displayWidth,
+            height: this.canvas.displayHeight
         };
     }
     getXY() {
@@ -22893,51 +22701,28 @@ class LynxWindowHandlerContribution extends BaseWindowHandlerContribution {
         }
     }
     createWindowByConfig(params) {
-        const nativeCanvas = this.global.createCanvas({
-            width: params.width,
-            height: params.height
-        });
+        const nativeCanvas = this.global.createCanvas({ width: params.width, height: params.height });
         const options = {
             width: params.width,
             height: params.height,
             dpr: params.dpr,
             nativeCanvas,
             id: Generator.GenAutoIncrementId().toString(),
-            canvasControled: false
+            canvasControled: true
         };
-        this.canvas = new LynxCanvas(options);
+        this.canvas = new NodeCanvas(options);
     }
     createWindowByCanvas(params) {
-        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');
-            }
-        }
-        else {
-            canvas = params.canvas;
-        }
+        var _a;
+        const canvas = params.canvas;
+        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : 1;
         let width = params.width;
         let height = params.height;
         if (width == null || height == null || !params.canvasControled) {
-            const data = canvas.getBoundingClientRect();
-            width = data.width;
-            height = data.height;
-        }
-        let dpr = params.dpr;
-        if (dpr == null) {
-            dpr = canvas.width / width;
+            width = canvas.width / dpr;
+            height = canvas.height / dpr;
         }
-        this.canvas = new LynxCanvas({
+        this.canvas = new NodeCanvas({
             width: width,
             height: height,
             dpr: dpr,
@@ -22946,7 +22731,7 @@ class LynxWindowHandlerContribution extends BaseWindowHandlerContribution {
         });
     }
     releaseWindow() {
-        return;
+        this.canvas.release();
     }
     resizeWindow(width, height) {
         this.canvas.resize(width, height);
@@ -22963,399 +22748,245 @@ class LynxWindowHandlerContribution extends BaseWindowHandlerContribution {
     getDpr() {
         return this.canvas.dpr;
     }
-    addEventListener(type, listener) {
-        this.eventManager.addEventListener(type, listener);
+    getImageBuffer(type = 'image/png') {
+        const canvas = this.canvas.nativeCanvas;
+        return canvas.toBuffer(type);
     }
-    removeEventListener(type, listener) {
-        this.eventManager.removeEventListener(type, listener);
+    addEventListener(type, listener, options) {
+        return;
     }
     dispatchEvent(event) {
-        var _a;
-        const { type } = event;
-        if (!this.eventManager.cache[type]) {
-            return false;
-        }
-        const nativeCanvas = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.nativeCanvas;
-        setMiniAppEventTarget$1(event, 'target', nativeCanvas);
-        setMiniAppEventTarget$1(event, 'currentTarget', nativeCanvas);
-        normalizeLynxTouchEventPoint(event);
-        event.preventDefault = () => {
-            return;
-        };
-        event.stopPropagation = () => {
-            return;
-        };
-        if (this.eventManager.cache[type].listener) {
-            this.eventManager.cache[type].listener.forEach((f) => {
-                f(event);
-            });
-        }
         return true;
     }
+    removeEventListener(type, listener, options) {
+        return;
+    }
     getStyle() {
-        return {};
+        return;
     }
     setStyle(style) {
         return;
     }
     getBoundingClientRect() {
-        const wh = this.getWH();
-        return {
-            x: 0,
-            y: 0,
-            width: wh.width,
-            height: wh.height,
-            left: 0,
-            top: 0,
-            right: 0,
-            bottom: 0
-        };
+        return null;
     }
     clearViewBox(color) {
-        const vb = this.viewBox;
-        const context = this.getContext();
-        const dpr = this.getDpr();
-        context.nativeContext.save();
-        context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0);
-        context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
-        if (color) {
-            context.fillStyle = color;
-            context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
-        }
-        context.nativeContext.restore();
+        return;
     }
 }
-LynxWindowHandlerContribution.env = 'lynx';
-function bindLynxWindowContribution(container) {
+NodeWindowHandlerContribution.env = 'node';
+function bindNodeWindowContribution(container) {
     var _a, _b;
-    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, LynxWindowHandlerContribution))) {
-        container.bind(LynxWindowHandlerContribution).toSelf();
+    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, NodeWindowHandlerContribution))) {
+        container.bind(NodeWindowHandlerContribution).toSelf();
     }
-    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, LynxWindowHandlerContribution.env))) {
+    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, NodeWindowHandlerContribution.env))) {
         container
             .bind(WindowHandlerContribution$1)
-            .toService(LynxWindowHandlerContribution)
-            .whenTargetNamed(LynxWindowHandlerContribution.env);
+            .toService(NodeWindowHandlerContribution)
+            .whenTargetNamed(NodeWindowHandlerContribution.env);
     }
 }
 
-const LYNX_CANVAS_BRIDGE_ERROR = 'Lynx canvas bridge is unavailable. VRender Lynx env requires envParams.canvasFactory ' +
-    'or a Lynx runtime that exposes createCanvasNG/createCanvas/createOffscreenCanvas/krypton canvas APIs.';
-const LYNX_CANVAS_SIZE_ERROR = 'Lynx canvas size is unavailable. Pass stage width/height when creating a Lynx stage canvas.';
-function isValidCoordinate(value) {
-    return typeof value === 'number' && Number.isFinite(value);
-}
-function pickCoordinate(...values) {
-    for (let i = 0; i < values.length; i++) {
-        if (isValidCoordinate(values[i])) {
-            return values[i];
-        }
-    }
-    return undefined;
-}
-function getPrimaryTouch(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 getLynxEventPoint(event) {
-    const touch = getPrimaryTouch(event);
-    const x = pickCoordinate(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(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 getGlobalLynxRuntime() {
-    try {
-        return typeof lynx !== 'undefined' ? lynx : undefined;
-    }
-    catch (err) {
-        return undefined;
-    }
-}
-function getGlobalSystemPixelRatio() {
-    try {
-        return typeof SystemInfo !== 'undefined' ? SystemInfo.pixelRatio : undefined;
-    }
-    catch (err) {
-        return undefined;
-    }
-}
-function getLynxRuntime(params) {
-    var _a, _b;
-    return (_b = (_a = params === null || params === void 0 ? void 0 : params.lynx) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.runtime) !== null && _b !== void 0 ? _b : getGlobalLynxRuntime();
-}
-const requestAnimationFrameBasedSTO = (callback) => rafBasedSto.call(callback);
-const cancelAnimationFrameBasedSTO = (handle) => rafBasedSto.clear(handle);
-function getLynxPixelRatio(params, runtime) {
-    var _a, _b, _c, _d, _e;
-    return (_e = (_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 : getGlobalSystemPixelRatio()) !== null && _e !== void 0 ? _e : 1;
-}
-function attachLynxCanvasToView(canvas, id) {
-    var _a;
-    (_a = canvas === null || canvas === void 0 ? void 0 : canvas.attachToCanvasView) === null || _a === void 0 ? void 0 : _a.call(canvas, id);
-    return canvas;
-}
-function createBoundLynxCanvas(id, runtime) {
-    var _a, _b, _c;
-    if (typeof ((_a = runtime === null || runtime === void 0 ? void 0 : runtime.krypton) === null || _a === void 0 ? void 0 : _a.createCanvas) === 'function') {
-        const canvas = runtime.krypton.createCanvas(id);
-        if (canvas) {
-            return canvas;
-        }
+class NodeEnvContribution extends BaseEnvContribution {
+    constructor() {
+        super(...arguments);
+        this.type = 'node';
+        this._lastTime = 0;
+        this.supportEvent = false;
     }
-    if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvasNG) === 'function') {
-        const canvas = runtime.createCanvasNG(id);
-        if (canvas) {
-            return attachLynxCanvasToView(canvas, id);
+    configure(service, pkg) {
+        if (service.env === this.type) {
+            service.setActiveEnvContribution(this);
+            this.pkg = pkg;
         }
     }
-    if (typeof ((_b = runtime === null || runtime === void 0 ? void 0 : runtime.krypton) === null || _b === void 0 ? void 0 : _b.createCanvasNG) === 'function') {
-        const canvas = runtime.krypton.createCanvasNG();
-        if (canvas) {
-            return attachLynxCanvasToView(canvas, id);
+    getNodePackage(feature, requiredKey) {
+        if (!this.pkg || (requiredKey && typeof this.pkg[requiredKey] !== 'function')) {
+            throw new Error(`Node env requires node-canvas package before ${feature}. ` +
+                `Use vglobal.setEnv('node', CanvasPkg) before createNodeVRenderApp(), ` +
+                `or createNodeVRenderApp({ envParams: CanvasPkg }).`);
         }
+        return this.pkg;
     }
-    if (typeof ((_c = runtime === null || runtime === void 0 ? void 0 : runtime.krypton) === null || _c === void 0 ? void 0 : _c.CanvasElement) === 'function') {
-        return new runtime.krypton.CanvasElement(id);
+    getDynamicCanvasCount() {
+        return 0;
     }
-    if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvas) === 'function') {
-        const canvas = runtime.createCanvas(id);
-        if (canvas) {
-            return canvas;
-        }
+    getStaticCanvasCount() {
+        return 999;
     }
-    return null;
-}
-function getCanvasSize(width, height) {
-    if (!isValidCoordinate(width) || !isValidCoordinate(height)) {
-        throw new Error(LYNX_CANVAS_SIZE_ERROR);
+    loadJson(url) {
+        const jsonPromise = fetch(url).then(data => data.json());
+        jsonPromise
+            .then(json => {
+            return {
+                data: json,
+                state: 'success'
+            };
+        })
+            .catch(() => {
+            return {
+                data: null,
+                state: 'fail'
+            };
+        });
+        return jsonPromise;
     }
-    return { width, height };
-}
-function wrapLynxNativeCanvas(nativeCanvas, id, width, height, dpr) {
-    nativeCanvas.width = width * dpr;
-    nativeCanvas.height = height * dpr;
-    const ctx = nativeCanvas.getContext('2d');
-    return new CanvasWrapEnableWH(nativeCanvas, ctx, dpr, width, height, id);
-}
-function createLynxNativeCanvas(id, width, height, dpr, offscreen, params, runtime) {
-    if (params.canvasFactory) {
-        return params.canvasFactory({
-            id,
-            width,
-            height,
-            dpr,
-            offscreen
+    loadArrayBuffer(url) {
+        const arrayBufferPromise = fetch(url).then(data => data.arrayBuffer());
+        return arrayBufferPromise
+            .then((arrayBuffer) => {
+            return {
+                data: arrayBuffer,
+                loadState: 'success'
+            };
+        })
+            .catch(() => {
+            return {
+                data: null,
+                loadState: 'fail'
+            };
         });
     }
-    if (offscreen) {
-        if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createOffscreenCanvas) === 'function') {
-            return runtime.createOffscreenCanvas();
+    loadImage(url) {
+        const { loadImage } = this.getNodePackage('loadImage', 'loadImage');
+        if (loadImage) {
+            return loadImage(url)
+                .then((image) => {
+                const loadState = image ? 'success' : 'fail';
+                return {
+                    loadState,
+                    data: image
+                };
+            })
+                .catch(() => {
+                return {
+                    loadState: 'fail',
+                    data: null
+                };
+            });
         }
+        return Promise.reject(new Error('node-canvas loadImage could not be found!'));
     }
-    else {
-        const canvas = createBoundLynxCanvas(id, runtime);
-        if (canvas) {
-            return canvas;
+    loadSvg(svgStr) {
+        const Resvg = this.getNodePackage('loadSvg').Resvg;
+        if (!Resvg) {
+            return Promise.reject(new Error('@resvg/resvg-js svgParser could not be found!'));
         }
+        const resvg = new Resvg(svgStr);
+        const pngData = resvg.render().asPng();
+        return this.loadImage(pngData);
     }
-    throw new Error(LYNX_CANVAS_BRIDGE_ERROR);
-}
-function createImageElement(src, isSvg = false, runtime = getGlobalLynxRuntime()) {
-    if (isSvg) {
-        return Promise.reject();
+    createCanvas(params) {
+        const { createCanvas } = this.getNodePackage('createCanvas', 'createCanvas');
+        const canvas = createCanvas(params.width, params.height);
+        return canvas;
     }
-    if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createImage) !== 'function') {
-        return Promise.reject(new Error('Lynx image bridge is unavailable.'));
-    }
-    const img = runtime.createImage(src);
-    const promise = new Promise((resolve, reject) => {
-        img.onload = () => {
-            resolve(img);
-        };
-        img.onerror = () => {
-            reject(new Error('加载失败'));
-        };
-    });
-    return promise;
-}
-class LynxEnvContribution extends BaseEnvContribution {
-    constructor() {
-        super();
-        this.type = 'lynx';
-        this.supportEvent = true;
-        this.canvasMap = new Map();
-        this.freeCanvasList = [];
-        this.canvasIdx = 0;
-        this.requestAnimationFrame = requestAnimationFrameBasedSTO;
-        this.cancelAnimationFrame = cancelAnimationFrameBasedSTO;
-        this.supportsTouchEvents = true;
-        try {
-            this.supportsPointerEvents = !!globalThis.PointerEvent;
-            this.supportsMouseEvents = !!globalThis.MouseEvent;
-        }
-        catch (err) {
-            this.supportsPointerEvents = false;
-            this.supportsMouseEvents = false;
-        }
-        this.applyStyles = true;
-    }
-    configure(service, params = {}) {
-        var _a, _b;
-        if (service.env === this.type) {
-            service.setActiveEnvContribution(this);
-            this.lynxEnvParams = params;
-            this.lynxRuntime = getLynxRuntime(params);
-            if (typeof ((_a = this.lynxRuntime) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame) === 'function' &&
-                typeof ((_b = this.lynxRuntime) === null || _b === void 0 ? void 0 : _b.cancelAnimationFrame) === 'function') {
-                this.requestAnimationFrame = this.lynxRuntime.requestAnimationFrame.bind(this.lynxRuntime);
-                this.cancelAnimationFrame = this.lynxRuntime.cancelAnimationFrame.bind(this.lynxRuntime);
-            }
-            else {
-                this.requestAnimationFrame = requestAnimationFrameBasedSTO;
-                this.cancelAnimationFrame = cancelAnimationFrameBasedSTO;
-            }
-        }
-    }
-    getDynamicCanvasCount() {
-        return this.freeCanvasList.length;
-    }
-    getStaticCanvasCount() {
-        return 9999;
-    }
-    loadImage(url) {
-        const imagePromise = createImageElement(url, false, this.lynxRuntime);
-        return imagePromise
-            .then((img) => {
-            return {
-                data: img,
-                loadState: 'success'
-            };
-        })
-            .catch(() => {
-            return {
-                data: null,
-                loadState: 'fail'
-            };
-        });
-    }
-    loadSvg(url) {
-        return Promise.resolve({
-            data: null,
-            loadState: 'fail'
-        });
-    }
-    createCanvas(params) {
-        var _a, _b, _c, _d;
-        if (params.id != null) {
-            const id = String(params.id);
-            const existing = this.canvasMap.get(id);
-            if (existing) {
-                return existing;
-            }
-            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(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);
-            return canvas;
-        }
-        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
-        this.canvasIdx++;
-        if (result) {
-            return result;
-        }
-        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(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);
-        this.canvasMap.set(id, canvas);
-        this.freeCanvasList.push(canvas);
-        return canvas;
-    }
-    createOffscreenCanvas(params) {
-        return;
-    }
-    releaseCanvas(canvas) {
-        return;
+    releaseCanvas(canvas) {
+        return;
     }
     getDevicePixelRatio() {
-        return getLynxPixelRatio(undefined, this.lynxRuntime);
+        return 1;
     }
     getRequestAnimationFrame() {
-        return this.requestAnimationFrame;
+        return function (callback) {
+            return rafBasedSto.call(callback);
+        };
     }
     getCancelAnimationFrame() {
-        return this.cancelAnimationFrame;
-    }
-    mapToCanvasPoint(event) {
-        var _a;
-        return (_a = getLynxEventPoint(event)) !== null && _a !== void 0 ? _a : event;
+        return (h) => {
+            rafBasedSto.clear(h);
+        };
     }
     addEventListener(type, listener, options) {
-        return null;
+        return;
     }
     removeEventListener(type, listener, options) {
-        return null;
-    }
-    dispatchEvent(event) {
-        return null;
+        return;
     }
     getElementById(str) {
-        return this.canvasMap.get(str);
+        return null;
     }
     getRootElement() {
         return null;
     }
-    getDocument() {
-        return null;
+    dispatchEvent(event) {
+        return;
     }
     release(...params) {
         return;
     }
+    createOffscreenCanvas(params) {
+        return;
+    }
 }
 
-function bindLynxEnv(container) {
+function bindNodeEnv(container) {
     var _a, _b;
-    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, LynxEnvContribution))) {
-        container.bind(LynxEnvContribution).toSelf().inSingletonScope();
-        container.bind(EnvContribution$1).toService(LynxEnvContribution);
+    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, NodeEnvContribution))) {
+        container.bind(NodeEnvContribution).toSelf().inSingletonScope();
+        container.bind(EnvContribution$1).toService(NodeEnvContribution);
     }
 }
-function loadLynxEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
-    if (!loadLynxEnv.__loaded) {
-        loadLynxEnv.__loaded = true;
-        bindLynxEnv(container);
-        bindLynxCanvasModules(container);
-        bindLynxWindowContribution(container);
-        loadPicker && loadMathPicker(container);
+function loadNodeEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
+    if (!loadNodeEnv.__loaded) {
+        loadNodeEnv.__loaded = true;
+        bindNodeEnv(container);
+        bindNodeCanvasModules(container);
+        bindNodeWindowContribution(container);
     }
 }
-loadLynxEnv.__loaded = false;
-function initLynxEnv() {
-    loadLynxEnv();
+loadNodeEnv.__loaded = false;
+function initNodeEnv() {
+    loadNodeEnv();
 }
 
-class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
+let MiniAppEventManager$3 = class MiniAppEventManager {
+    constructor() {
+        this.cache = {};
+    }
+    addEventListener(type, func) {
+        if (!type || !func) {
+            return;
+        }
+        this.cache[type] = this.cache[type] || {
+            listener: []
+        };
+        this.cache[type].listener.push(func);
+    }
+    removeEventListener(type, func) {
+        if (!type || !func) {
+            return;
+        }
+        if (!this.cache[type]) {
+            return;
+        }
+        const index = this.cache[type].listener.findIndex((f) => f === func);
+        if (index >= 0) {
+            this.cache[type].listener.splice(index, 1);
+        }
+    }
+    cleanEvent() {
+        this.cache = {};
+    }
+};
+class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
     get container() {
         return null;
     }
     constructor(global = application.global) {
         super();
         this.global = global;
-        this.type = 'node';
+        this.type = 'taro';
+        this.eventManager = new MiniAppEventManager$3();
     }
     getTitle() {
-        return '';
+        return this.canvas.id.toString();
     }
     getWH() {
         return {
-            width: this.canvas.displayWidth,
-            height: this.canvas.displayHeight
+            width: this.canvas.width / (this.canvas.dpr || 1),
+            height: this.canvas.height / (this.canvas.dpr || 1)
         };
     }
     getXY() {
@@ -23370,28 +23001,51 @@ class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
         }
     }
     createWindowByConfig(params) {
-        const nativeCanvas = this.global.createCanvas({ width: params.width, height: params.height });
+        const nativeCanvas = this.global.createCanvas({
+            width: params.width,
+            height: params.height
+        });
         const options = {
             width: params.width,
             height: params.height,
             dpr: params.dpr,
             nativeCanvas,
             id: Generator.GenAutoIncrementId().toString(),
-            canvasControled: true
+            canvasControled: false
         };
-        this.canvas = new NodeCanvas(options);
+        this.canvas = new TaroCanvas(options);
     }
     createWindowByCanvas(params) {
-        var _a;
-        const canvas = params.canvas;
-        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : 1;
+        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');
+            }
+        }
+        else {
+            canvas = params.canvas;
+        }
         let width = params.width;
         let height = params.height;
         if (width == null || height == null || !params.canvasControled) {
-            width = canvas.width / dpr;
-            height = canvas.height / dpr;
+            const data = canvas.getBoundingClientRect();
+            width = data.width;
+            height = data.height;
         }
-        this.canvas = new NodeCanvas({
+        let dpr = params.dpr;
+        if (dpr == null) {
+            dpr = canvas.width / width;
+        }
+        this.canvas = new TaroCanvas({
             width: width,
             height: height,
             dpr: dpr,
@@ -23400,10 +23054,10 @@ class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
         });
     }
     releaseWindow() {
-        this.canvas.release();
+        return;
     }
     resizeWindow(width, height) {
-        this.canvas.resize(width, height);
+        return;
     }
     setDpr(dpr) {
         this.canvas.dpr = dpr;
@@ -23417,197 +23071,233 @@ class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
     getDpr() {
         return this.canvas.dpr;
     }
-    getImageBuffer(type = 'image/png') {
-        const canvas = this.canvas.nativeCanvas;
-        return canvas.toBuffer(type);
+    addEventListener(type, listener) {
+        this.eventManager.addEventListener(type, listener);
     }
-    addEventListener(type, listener, options) {
-        return;
+    removeEventListener(type, listener) {
+        this.eventManager.removeEventListener(type, listener);
     }
     dispatchEvent(event) {
+        const { type } = event;
+        if (!this.eventManager.cache[type]) {
+            return false;
+        }
+        if (event.changedTouches.length > 0) {
+            event.changedTouches.forEach((d, i) => {
+                event.changedTouches[i] = Object.assign(Object.assign({}, event.changedTouches[i]), { offsetX: d.x, offsetY: d.y });
+            });
+            event.offsetX = event.changedTouches[0].offsetX;
+            event.offsetY = event.changedTouches[0].offsetY;
+        }
+        if (event.touches.length > 0) {
+            event.touches.forEach((d, i) => {
+                event.touches[i] = Object.assign(Object.assign({}, event.touches[i]), { offsetX: d.x, offsetY: d.y });
+            });
+        }
+        event.preventDefault = () => {
+            return;
+        };
+        event.stopPropagation = () => {
+            return;
+        };
+        if (this.eventManager.cache[type].listener) {
+            this.eventManager.cache[type].listener.forEach((f) => {
+                f(event);
+            });
+        }
         return true;
     }
-    removeEventListener(type, listener, options) {
-        return;
-    }
     getStyle() {
-        return;
+        return {};
     }
     setStyle(style) {
         return;
     }
     getBoundingClientRect() {
-        return null;
+        const wh = this.getWH();
+        return {
+            x: 0,
+            y: 0,
+            width: wh.width,
+            height: wh.height,
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0
+        };
     }
     clearViewBox(color) {
-        return;
+        const vb = this.viewBox;
+        const context = this.getContext();
+        const dpr = this.getDpr();
+        context.nativeContext.save();
+        context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0);
+        context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
+        if (color) {
+            context.fillStyle = color;
+            context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
+        }
+        context.nativeContext.restore();
     }
 }
-NodeWindowHandlerContribution.env = 'node';
-function bindNodeWindowContribution(container) {
+TaroWindowHandlerContribution.env = 'taro';
+function bindTaroWindowContribution(container) {
     var _a, _b;
-    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, NodeWindowHandlerContribution))) {
-        container.bind(NodeWindowHandlerContribution).toSelf();
+    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, TaroWindowHandlerContribution))) {
+        container.bind(TaroWindowHandlerContribution).toSelf();
     }
-    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, NodeWindowHandlerContribution.env))) {
+    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, TaroWindowHandlerContribution.env))) {
         container
             .bind(WindowHandlerContribution$1)
-            .toService(NodeWindowHandlerContribution)
-            .whenTargetNamed(NodeWindowHandlerContribution.env);
+            .toService(TaroWindowHandlerContribution)
+            .whenTargetNamed(TaroWindowHandlerContribution.env);
     }
 }
 
-class NodeEnvContribution extends BaseEnvContribution {
+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(...arguments);
-        this.type = 'node';
-        this._lastTime = 0;
-        this.supportEvent = false;
-    }
-    configure(service, pkg) {
-        if (service.env === this.type) {
-            service.setActiveEnvContribution(this);
-            this.pkg = pkg;
+        super();
+        this.type = 'taro';
+        this.supportEvent = true;
+        this.canvasMap = new Map();
+        this.pixelRatio = 1;
+        this.taroEnvParams = {};
+        this.supportsTouchEvents = true;
+        try {
+            this.supportsPointerEvents = !!globalThis.PointerEvent;
+            this.supportsMouseEvents = !!globalThis.MouseEvent;
         }
-    }
-    getNodePackage(feature, requiredKey) {
-        if (!this.pkg || (requiredKey && typeof this.pkg[requiredKey] !== 'function')) {
-            throw new Error(`Node env requires node-canvas package before ${feature}. ` +
-                `Use vglobal.setEnv('node', CanvasPkg) before createNodeVRenderApp(), ` +
-                `or createNodeVRenderApp({ envParams: CanvasPkg }).`);
+        catch (err) {
+            this.supportsPointerEvents = false;
+            this.supportsMouseEvents = false;
         }
-        return this.pkg;
+        this.applyStyles = true;
     }
     getDynamicCanvasCount() {
         return 0;
     }
     getStaticCanvasCount() {
-        return 999;
+        return 9999;
     }
-    loadJson(url) {
-        const jsonPromise = fetch(url).then(data => data.json());
-        jsonPromise
-            .then(json => {
-            return {
-                data: json,
-                state: 'success'
-            };
-        })
-            .catch(() => {
-            return {
-                data: null,
-                state: 'fail'
-            };
-        });
-        return jsonPromise;
+    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;
     }
-    loadArrayBuffer(url) {
-        const arrayBufferPromise = fetch(url).then(data => data.arrayBuffer());
-        return arrayBufferPromise
-            .then((arrayBuffer) => {
-            return {
-                data: arrayBuffer,
-                loadState: 'success'
-            };
-        })
-            .catch(() => {
-            return {
-                data: null,
-                loadState: 'fail'
-            };
-        });
+    configure(service, params = {}) {
+        var _a;
+        if (service.env === this.type) {
+            service.setActiveEnvContribution(this);
+            this.taroEnvParams = params;
+            this.taro = params.taro;
+            this.pixelRatio = (_a = params.pixelRatio) !== null && _a !== void 0 ? _a : 1;
+        }
     }
     loadImage(url) {
-        const { loadImage } = this.getNodePackage('loadImage', 'loadImage');
-        if (loadImage) {
-            return loadImage(url)
-                .then((image) => {
-                const loadState = image ? 'success' : 'fail';
-                return {
-                    loadState,
-                    data: image
-                };
-            })
-                .catch(() => {
-                return {
-                    loadState: 'fail',
-                    data: null
-                };
-            });
-        }
-        return Promise.reject(new Error('node-canvas loadImage could not be found!'));
+        return Promise.resolve({
+            data: url,
+            loadState: 'success'
+        });
     }
     loadSvg(svgStr) {
-        const Resvg = this.getNodePackage('loadSvg').Resvg;
-        if (!Resvg) {
-            return Promise.reject(new Error('@resvg/resvg-js svgParser could not be found!'));
+        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];
+            const data = new XMLSerializer().serializeToString(svg);
+            const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(data)}`;
+            return Promise.resolve({
+                data: url,
+                loadState: 'success'
+            });
         }
-        const resvg = new Resvg(svgStr);
-        const pngData = resvg.render().asPng();
-        return this.loadImage(pngData);
+        else if (_window.Blob) {
+            const data = new _window.Blob([svgStr], { type: 'image/svg+xml' });
+            const url = _window.URL.createObjectURL(data);
+            return Promise.resolve({
+                data: url,
+                loadState: 'success'
+            });
+        }
+        return Promise.reject();
     }
     createCanvas(params) {
-        const { createCanvas } = this.getNodePackage('createCanvas', 'createCanvas');
-        const canvas = createCanvas(params.width, params.height);
+        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;
+    }
     releaseCanvas(canvas) {
         return;
     }
     getDevicePixelRatio() {
-        return 1;
+        return this.pixelRatio;
     }
     getRequestAnimationFrame() {
-        return function (callback) {
-            return rafBasedSto.call(callback);
-        };
+        return requestAnimationFrame;
     }
     getCancelAnimationFrame() {
-        return (h) => {
-            rafBasedSto.clear(h);
-        };
+        return cancelAnimationFrame;
     }
     addEventListener(type, listener, options) {
-        return;
+        return null;
     }
     removeEventListener(type, listener, options) {
-        return;
+        return null;
     }
-    getElementById(str) {
+    dispatchEvent(event) {
         return null;
     }
+    getElementById(str) {
+        return this.canvasMap.get(str);
+    }
     getRootElement() {
         return null;
     }
-    dispatchEvent(event) {
-        return;
+    getDocument() {
+        return null;
     }
     release(...params) {
         return;
     }
-    createOffscreenCanvas(params) {
-        return;
-    }
 }
 
-function bindNodeEnv(container) {
+function bindTaroEnv(container) {
     var _a, _b;
-    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, NodeEnvContribution))) {
-        container.bind(NodeEnvContribution).toSelf().inSingletonScope();
-        container.bind(EnvContribution$1).toService(NodeEnvContribution);
+    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, TaroEnvContribution))) {
+        container.bind(TaroEnvContribution).toSelf().inSingletonScope();
+        container.bind(EnvContribution$1).toService(TaroEnvContribution);
     }
 }
-function loadNodeEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
-    if (!loadNodeEnv.__loaded) {
-        loadNodeEnv.__loaded = true;
-        bindNodeEnv(container);
-        bindNodeCanvasModules(container);
-        bindNodeWindowContribution(container);
+function loadTaroEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
+    if (!loadTaroEnv.__loaded) {
+        loadTaroEnv.__loaded = true;
+        bindTaroEnv(container);
+        bindTaroCanvasModules(container);
+        bindTaroWindowContribution(container);
+        loadPicker && loadMathPicker(container);
     }
 }
-loadNodeEnv.__loaded = false;
-function initNodeEnv() {
-    loadNodeEnv();
+loadTaroEnv.__loaded = false;
+function initTaroEnv() {
+    loadTaroEnv();
 }
 
 let MiniAppEventManager$2 = class MiniAppEventManager {
@@ -23639,14 +23329,14 @@ let MiniAppEventManager$2 = class MiniAppEventManager {
         this.cache = {};
     }
 };
-class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
+class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
     get container() {
         return null;
     }
     constructor(global = application.global) {
         super();
         this.global = global;
-        this.type = 'taro';
+        this.type = 'tt';
         this.eventManager = new MiniAppEventManager$2();
     }
     getTitle() {
@@ -23682,7 +23372,7 @@ class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
             id: Generator.GenAutoIncrementId().toString(),
             canvasControled: false
         };
-        this.canvas = new TaroCanvas(options);
+        this.canvas = new TTCanvas(options);
     }
     createWindowByCanvas(params) {
         let canvas;
@@ -23714,7 +23404,7 @@ class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
         if (dpr == null) {
             dpr = canvas.width / width;
         }
-        this.canvas = new TaroCanvas({
+        this.canvas = new TTCanvas({
             width: width,
             height: height,
             dpr: dpr,
@@ -23751,17 +23441,13 @@ class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
         if (!this.eventManager.cache[type]) {
             return false;
         }
-        if (event.changedTouches.length > 0) {
-            event.changedTouches.forEach((d, i) => {
-                event.changedTouches[i] = Object.assign(Object.assign({}, event.changedTouches[i]), { offsetX: d.x, offsetY: d.y });
-            });
-            event.offsetX = event.changedTouches[0].offsetX;
-            event.offsetY = event.changedTouches[0].offsetY;
-        }
-        if (event.touches.length > 0) {
-            event.touches.forEach((d, i) => {
-                event.touches[i] = Object.assign(Object.assign({}, event.touches[i]), { offsetX: d.x, offsetY: d.y });
-            });
+        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;
         }
         event.preventDefault = () => {
             return;
@@ -23809,30 +23495,42 @@ class TaroWindowHandlerContribution extends BaseWindowHandlerContribution {
         context.nativeContext.restore();
     }
 }
-TaroWindowHandlerContribution.env = 'taro';
-function bindTaroWindowContribution(container) {
+TTWindowHandlerContribution.env = 'tt';
+function bindTTWindowContribution(container) {
     var _a, _b;
-    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, TaroWindowHandlerContribution))) {
-        container.bind(TaroWindowHandlerContribution).toSelf();
+    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, TTWindowHandlerContribution))) {
+        container.bind(TTWindowHandlerContribution).toSelf();
     }
-    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, TaroWindowHandlerContribution.env))) {
+    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, TTWindowHandlerContribution.env))) {
         container
             .bind(WindowHandlerContribution$1)
-            .toService(TaroWindowHandlerContribution)
-            .whenTargetNamed(TaroWindowHandlerContribution.env);
+            .toService(TTWindowHandlerContribution)
+            .whenTargetNamed(TTWindowHandlerContribution.env);
     }
 }
 
-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 {
+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() {
         super();
-        this.type = 'taro';
+        this.type = 'tt';
         this.supportEvent = true;
         this.canvasMap = new Map();
-        this.pixelRatio = 1;
-        this.taroEnvParams = {};
+        this.ttEnvParams = {};
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -23844,26 +23542,10 @@ class TaroEnvContribution extends BaseEnvContribution {
         }
         this.applyStyles = true;
     }
-    getDynamicCanvasCount() {
-        return 0;
-    }
-    getStaticCanvasCount() {
-        return 9999;
-    }
-    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;
-    }
     configure(service, params = {}) {
-        var _a;
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
-            this.taroEnvParams = params;
-            this.taro = params.taro;
-            this.pixelRatio = (_a = params.pixelRatio) !== null && _a !== void 0 ? _a : 1;
+            this.ttEnvParams = params;
         }
     }
     loadImage(url) {
@@ -23872,41 +23554,23 @@ class TaroEnvContribution extends BaseEnvContribution {
             loadState: 'success'
         });
     }
-    loadSvg(svgStr) {
-        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];
-            const data = new XMLSerializer().serializeToString(svg);
-            const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(data)}`;
-            return Promise.resolve({
-                data: url,
-                loadState: 'success'
-            });
-        }
-        else if (_window.Blob) {
-            const data = new _window.Blob([svgStr], { type: 'image/svg+xml' });
-            const url = _window.URL.createObjectURL(data);
-            return Promise.resolve({
-                data: url,
-                loadState: 'success'
-            });
-        }
+    loadSvg(url) {
         return Promise.reject();
     }
     createCanvas(params) {
-        var _a, _b;
-        const envParams = this.taroEnvParams;
-        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : this.getDevicePixelRatio();
+        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 ((_b = envParams.taro) === null || _b === void 0 ? void 0 : _b.createCanvasContext) !== 'function') {
-            throw new Error(TARO_CANVAS_BRIDGE_ERROR);
+        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(envParams.taro.createCanvasContext(options.id), options);
+        const canvas = wrapMiniAppContextCanvas(runtime.createCanvasContext(options.id), options);
         this.canvasMap.set(options.id, canvas);
         return canvas;
     }
@@ -23917,13 +23581,17 @@ class TaroEnvContribution extends BaseEnvContribution {
         return;
     }
     getDevicePixelRatio() {
-        return this.pixelRatio;
+        return getTTPixelRatio(this.ttEnvParams);
     }
     getRequestAnimationFrame() {
-        return requestAnimationFrame;
+        return function (callback) {
+            return rafBasedSto.call(callback);
+        };
     }
     getCancelAnimationFrame() {
-        return cancelAnimationFrame;
+        return (h) => {
+            rafBasedSto.clear(h);
+        };
     }
     addEventListener(type, listener, options) {
         return null;
@@ -23946,27 +23614,34 @@ class TaroEnvContribution extends BaseEnvContribution {
     release(...params) {
         return;
     }
+    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;
+    }
 }
 
-function bindTaroEnv(container) {
+function bindTTEnv(container) {
     var _a, _b;
-    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, TaroEnvContribution))) {
-        container.bind(TaroEnvContribution).toSelf().inSingletonScope();
-        container.bind(EnvContribution$1).toService(TaroEnvContribution);
+    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, TTEnvContribution))) {
+        container.bind(TTEnvContribution).toSelf().inSingletonScope();
+        container.bind(EnvContribution$1).toService(TTEnvContribution);
     }
 }
-function loadTaroEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
-    if (!loadTaroEnv.__loaded) {
-        loadTaroEnv.__loaded = true;
-        bindTaroEnv(container);
-        bindTaroCanvasModules(container);
-        bindTaroWindowContribution(container);
+function loadTTEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
+    if (!loadTTEnv.__loaded) {
+        loadTTEnv.__loaded = true;
+        bindTTEnv(container);
+        bindTTCanvasModules(container);
+        bindTTWindowContribution(container);
         loadPicker && loadMathPicker(container);
     }
 }
-loadTaroEnv.__loaded = false;
-function initTaroEnv() {
-    loadTaroEnv();
+loadTTEnv.__loaded = false;
+function initTTEnv() {
+    loadTTEnv();
 }
 
 let MiniAppEventManager$1 = class MiniAppEventManager {
@@ -23998,14 +23673,28 @@ let MiniAppEventManager$1 = class MiniAppEventManager {
         this.cache = {};
     }
 };
-class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
+function setMiniAppEventTarget$1(event, key, value) {
+    if (!event || !value) {
+        return;
+    }
+    try {
+        event[key] = value;
+    }
+    catch (_a) {
+        Object.defineProperty(event, key, {
+            configurable: true,
+            value
+        });
+    }
+}
+class WxWindowHandlerContribution extends BaseWindowHandlerContribution {
     get container() {
         return null;
     }
     constructor(global = application.global) {
         super();
         this.global = global;
-        this.type = 'tt';
+        this.type = 'wx';
         this.eventManager = new MiniAppEventManager$1();
     }
     getTitle() {
@@ -24041,7 +23730,7 @@ class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
             id: Generator.GenAutoIncrementId().toString(),
             canvasControled: false
         };
-        this.canvas = new TTCanvas(options);
+        this.canvas = new WxCanvas(options);
     }
     createWindowByCanvas(params) {
         let canvas;
@@ -24073,7 +23762,7 @@ class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
         if (dpr == null) {
             dpr = canvas.width / width;
         }
-        this.canvas = new TTCanvas({
+        this.canvas = new WxCanvas({
             width: width,
             height: height,
             dpr: dpr,
@@ -24106,17 +23795,21 @@ class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
         this.eventManager.removeEventListener(type, listener);
     }
     dispatchEvent(event) {
+        var _a, _b, _c, _d, _e;
         const { type } = event;
         if (!this.eventManager.cache[type]) {
             return false;
         }
+        const nativeCanvas = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.nativeCanvas;
+        setMiniAppEventTarget$1(event, 'target', nativeCanvas);
+        setMiniAppEventTarget$1(event, 'currentTarget', nativeCanvas);
         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.changedTouches[0].offsetX = (_b = event.changedTouches[0].x) !== null && _b !== void 0 ? _b : event.changedTouches[0].pageX;
+            event.changedTouches[0].clientX = (_c = event.changedTouches[0].x) !== null && _c !== void 0 ? _c : event.changedTouches[0].pageX;
             event.offsetY = event.changedTouches[0].y;
-            event.changedTouches[0].offsetY = event.changedTouches[0].y;
-            event.changedTouches[0].clientY = event.changedTouches[0].y;
+            event.changedTouches[0].offsetY = (_d = event.changedTouches[0].y) !== null && _d !== void 0 ? _d : event.changedTouches[0].pageY;
+            event.changedTouches[0].clientY = (_e = event.changedTouches[0].y) !== null && _e !== void 0 ? _e : event.changedTouches[0].pageY;
         }
         event.preventDefault = () => {
             return;
@@ -24164,42 +23857,42 @@ class TTWindowHandlerContribution extends BaseWindowHandlerContribution {
         context.nativeContext.restore();
     }
 }
-TTWindowHandlerContribution.env = 'tt';
-function bindTTWindowContribution(container) {
+WxWindowHandlerContribution.env = 'wx';
+function bindWxWindowContribution(container) {
     var _a, _b;
-    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, TTWindowHandlerContribution))) {
-        container.bind(TTWindowHandlerContribution).toSelf();
+    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, WxWindowHandlerContribution))) {
+        container.bind(WxWindowHandlerContribution).toSelf();
     }
-    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, TTWindowHandlerContribution.env))) {
+    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, WxWindowHandlerContribution.env))) {
         container
             .bind(WindowHandlerContribution$1)
-            .toService(TTWindowHandlerContribution)
-            .whenTargetNamed(TTWindowHandlerContribution.env);
+            .toService(WxWindowHandlerContribution)
+            .whenTargetNamed(WxWindowHandlerContribution.env);
     }
 }
 
-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) {
+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.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);
+        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.tt) !== null && _c !== void 0 ? _c : params === null || params === void 0 ? void 0 : params.runtime;
+        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 getTTPixelRatio(params, runtime = getTTRuntime(params)) {
+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 TTEnvContribution extends BaseEnvContribution {
+class WxEnvContribution extends BaseEnvContribution {
     constructor() {
         super();
-        this.type = 'tt';
+        this.type = 'wx';
         this.supportEvent = true;
         this.canvasMap = new Map();
-        this.ttEnvParams = {};
+        this.wxEnvParams = {};
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -24214,7 +23907,7 @@ class TTEnvContribution extends BaseEnvContribution {
     configure(service, params = {}) {
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
-            this.ttEnvParams = params;
+            this.wxEnvParams = params;
         }
     }
     loadImage(url) {
@@ -24224,20 +23917,23 @@ class TTEnvContribution extends BaseEnvContribution {
         });
     }
     loadSvg(url) {
-        return Promise.reject();
+        return Promise.resolve({
+            data: null,
+            loadState: 'fail'
+        });
     }
     createCanvas(params) {
         var _a;
-        const envParams = this.ttEnvParams;
-        const runtime = getTTRuntime(envParams);
-        const dpr = (_a = params.dpr) !== null && _a !== void 0 ? _a : getTTPixelRatio(envParams, runtime);
+        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(TT_CANVAS_BRIDGE_ERROR);
+            throw new Error(WX_CANVAS_BRIDGE_ERROR);
         }
         const canvas = wrapMiniAppContextCanvas(runtime.createCanvasContext(options.id), options);
         this.canvasMap.set(options.id, canvas);
@@ -24250,7 +23946,7 @@ class TTEnvContribution extends BaseEnvContribution {
         return;
     }
     getDevicePixelRatio() {
-        return getTTPixelRatio(this.ttEnvParams);
+        return getWxPixelRatio(this.wxEnvParams);
     }
     getRequestAnimationFrame() {
         return function (callback) {
@@ -24292,1199 +23988,1521 @@ class TTEnvContribution extends BaseEnvContribution {
     }
 }
 
-function bindTTEnv(container) {
+function bindWxEnv(container) {
     var _a, _b;
-    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, TTEnvContribution))) {
-        container.bind(TTEnvContribution).toSelf().inSingletonScope();
-        container.bind(EnvContribution$1).toService(TTEnvContribution);
+    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, WxEnvContribution))) {
+        container.bind(WxEnvContribution).toSelf().inSingletonScope();
+        container.bind(EnvContribution$1).toService(WxEnvContribution);
     }
 }
-function loadTTEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
-    if (!loadTTEnv.__loaded) {
-        loadTTEnv.__loaded = true;
-        bindTTEnv(container);
-        bindTTCanvasModules(container);
-        bindTTWindowContribution(container);
+function loadWxEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
+    if (!loadWxEnv.__loaded) {
+        loadWxEnv.__loaded = true;
+        bindWxEnv(container);
+        bindWxCanvasModules(container);
+        bindWxWindowContribution(container);
         loadPicker && loadMathPicker(container);
     }
 }
-loadTTEnv.__loaded = false;
-function initTTEnv() {
-    loadTTEnv();
+loadWxEnv.__loaded = false;
+function initWxEnv() {
+    loadWxEnv();
 }
 
-class MiniAppEventManager {
-    constructor() {
-        this.cache = {};
-    }
-    addEventListener(type, func) {
-        if (!type || !func) {
-            return;
-        }
-        this.cache[type] = this.cache[type] || {
-            listener: []
-        };
-        this.cache[type].listener.push(func);
-    }
-    removeEventListener(type, func) {
-        if (!type || !func) {
-            return;
-        }
-        if (!this.cache[type]) {
-            return;
-        }
-        const index = this.cache[type].listener.findIndex((f) => f === func);
-        if (index >= 0) {
-            this.cache[type].listener.splice(index, 1);
-        }
-    }
-    cleanEvent() {
-        this.cache = {};
-    }
-}
-function setMiniAppEventTarget(event, key, value) {
-    if (!event || !value) {
-        return;
-    }
-    try {
-        event[key] = value;
-    }
-    catch (_a) {
-        Object.defineProperty(event, key, {
-            configurable: true,
-            value
-        });
-    }
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
-class WxWindowHandlerContribution extends BaseWindowHandlerContribution {
-    get container() {
-        return null;
-    }
-    constructor(global = application.global) {
-        super();
-        this.global = global;
-        this.type = 'wx';
-        this.eventManager = new MiniAppEventManager();
-    }
-    getTitle() {
-        return this.canvas.id.toString();
-    }
-    getWH() {
-        return {
-            width: this.canvas.width / (this.canvas.dpr || 1),
-            height: this.canvas.height / (this.canvas.dpr || 1)
-        };
+
+var lib$1 = {};
+
+var gif = {};
+
+var lib = {};
+
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+lib.loop = lib.conditional = lib.parse = void 0;
+var parse = function parse(stream, schema) {
+  var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : result;
+  if (Array.isArray(schema)) {
+    schema.forEach(function (partSchema) {
+      return parse(stream, partSchema, result, parent);
+    });
+  } else if (typeof schema === 'function') {
+    schema(stream, result, parent, parse);
+  } else {
+    var key = Object.keys(schema)[0];
+    if (Array.isArray(schema[key])) {
+      parent[key] = {};
+      parse(stream, schema[key], result, parent[key]);
+    } else {
+      parent[key] = schema[key](stream, result, parent, parse);
     }
-    getXY() {
-        return { x: 0, y: 0 };
+  }
+  return result;
+};
+lib.parse = parse;
+var conditional = function conditional(schema, conditionFunc) {
+  return function (stream, result, parent, parse) {
+    if (conditionFunc(stream, result, parent)) {
+      parse(stream, schema, result, parent);
     }
-    createWindow(params) {
-        if (!params.canvas) {
-            this.createWindowByConfig(params);
-        }
-        else {
-            this.createWindowByCanvas(params);
-        }
+  };
+};
+lib.conditional = conditional;
+var loop = function loop(schema, continueFunc) {
+  return function (stream, result, parent, parse) {
+    var arr = [];
+    var lastStreamPos = stream.pos;
+    while (continueFunc(stream, result, parent)) {
+      var newParent = {};
+      parse(stream, schema, result, newParent); // cases when whole file is parsed but no termination is there and stream position is not getting updated as well
+      // it falls into infinite recursion, null check to avoid the same
+
+      if (stream.pos === lastStreamPos) {
+        break;
+      }
+      lastStreamPos = stream.pos;
+      arr.push(newParent);
     }
-    createWindowByConfig(params) {
-        const nativeCanvas = this.global.createCanvas({
-            width: params.width,
-            height: params.height
-        });
-        const options = {
-            width: params.width,
-            height: params.height,
-            dpr: params.dpr,
-            nativeCanvas,
-            id: Generator.GenAutoIncrementId().toString(),
-            canvasControled: false
-        };
-        this.canvas = new WxCanvas(options);
+    return arr;
+  };
+};
+lib.loop = loop;
+
+var uint8 = {};
+
+Object.defineProperty(uint8, "__esModule", {
+  value: true
+});
+uint8.readBits = uint8.readArray = uint8.readUnsigned = uint8.readString = uint8.peekBytes = uint8.readBytes = uint8.peekByte = uint8.readByte = uint8.buildStream = void 0;
+
+// Default stream and parsers for Uint8TypedArray data type
+var buildStream = function buildStream(uint8Data) {
+  return {
+    data: uint8Data,
+    pos: 0
+  };
+};
+uint8.buildStream = buildStream;
+var readByte = function readByte() {
+  return function (stream) {
+    return stream.data[stream.pos++];
+  };
+};
+uint8.readByte = readByte;
+var peekByte = function peekByte() {
+  var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return function (stream) {
+    return stream.data[stream.pos + offset];
+  };
+};
+uint8.peekByte = peekByte;
+var readBytes = function readBytes(length) {
+  return function (stream) {
+    return stream.data.subarray(stream.pos, stream.pos += length);
+  };
+};
+uint8.readBytes = readBytes;
+var peekBytes = function peekBytes(length) {
+  return function (stream) {
+    return stream.data.subarray(stream.pos, stream.pos + length);
+  };
+};
+uint8.peekBytes = peekBytes;
+var readString = function readString(length) {
+  return function (stream) {
+    return Array.from(readBytes(length)(stream)).map(function (value) {
+      return String.fromCharCode(value);
+    }).join('');
+  };
+};
+uint8.readString = readString;
+var readUnsigned = function readUnsigned(littleEndian) {
+  return function (stream) {
+    var bytes = readBytes(2)(stream);
+    return littleEndian ? (bytes[1] << 8) + bytes[0] : (bytes[0] << 8) + bytes[1];
+  };
+};
+uint8.readUnsigned = readUnsigned;
+var readArray = function readArray(byteSize, totalOrFunc) {
+  return function (stream, result, parent) {
+    var total = typeof totalOrFunc === 'function' ? totalOrFunc(stream, result, parent) : totalOrFunc;
+    var parser = readBytes(byteSize);
+    var arr = new Array(total);
+    for (var i = 0; i < total; i++) {
+      arr[i] = parser(stream);
     }
-    createWindowByCanvas(params) {
-        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');
-            }
-        }
-        else {
-            canvas = params.canvas;
-        }
-        let width = params.width;
-        let height = params.height;
-        if (width == null || height == null || !params.canvasControled) {
-            const data = canvas.getBoundingClientRect();
-            width = data.width;
-            height = data.height;
-        }
-        let dpr = params.dpr;
-        if (dpr == null) {
-            dpr = canvas.width / width;
-        }
-        this.canvas = new WxCanvas({
-            width: width,
-            height: height,
-            dpr: dpr,
-            nativeCanvas: canvas,
-            canvasControled: params.canvasControled
-        });
-    }
-    releaseWindow() {
-        return;
-    }
-    resizeWindow(width, height) {
-        return;
-    }
-    setDpr(dpr) {
-        this.canvas.dpr = dpr;
-    }
-    getContext() {
-        return this.canvas.getContext();
-    }
-    getNativeHandler() {
-        return this.canvas;
-    }
-    getDpr() {
-        return this.canvas.dpr;
-    }
-    addEventListener(type, listener) {
-        this.eventManager.addEventListener(type, listener);
-    }
-    removeEventListener(type, listener) {
-        this.eventManager.removeEventListener(type, listener);
-    }
-    dispatchEvent(event) {
-        var _a, _b, _c, _d, _e;
-        const { type } = event;
-        if (!this.eventManager.cache[type]) {
-            return false;
-        }
-        const nativeCanvas = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.nativeCanvas;
-        setMiniAppEventTarget(event, 'target', nativeCanvas);
-        setMiniAppEventTarget(event, 'currentTarget', nativeCanvas);
-        if (event.changedTouches && event.changedTouches[0]) {
-            event.offsetX = event.changedTouches[0].x;
-            event.changedTouches[0].offsetX = (_b = event.changedTouches[0].x) !== null && _b !== void 0 ? _b : event.changedTouches[0].pageX;
-            event.changedTouches[0].clientX = (_c = event.changedTouches[0].x) !== null && _c !== void 0 ? _c : event.changedTouches[0].pageX;
-            event.offsetY = event.changedTouches[0].y;
-            event.changedTouches[0].offsetY = (_d = event.changedTouches[0].y) !== null && _d !== void 0 ? _d : event.changedTouches[0].pageY;
-            event.changedTouches[0].clientY = (_e = event.changedTouches[0].y) !== null && _e !== void 0 ? _e : event.changedTouches[0].pageY;
-        }
-        event.preventDefault = () => {
-            return;
-        };
-        event.stopPropagation = () => {
-            return;
-        };
-        if (this.eventManager.cache[type].listener) {
-            this.eventManager.cache[type].listener.forEach((f) => {
-                f(event);
-            });
-        }
-        return true;
-    }
-    getStyle() {
-        return {};
-    }
-    setStyle(style) {
-        return;
-    }
-    getBoundingClientRect() {
-        const wh = this.getWH();
-        return {
-            x: 0,
-            y: 0,
-            width: wh.width,
-            height: wh.height,
-            left: 0,
-            top: 0,
-            right: 0,
-            bottom: 0
-        };
-    }
-    clearViewBox(color) {
-        const vb = this.viewBox;
-        const context = this.getContext();
-        const dpr = this.getDpr();
-        context.nativeContext.save();
-        context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0);
-        context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
-        if (color) {
-            context.fillStyle = color;
-            context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
-        }
-        context.nativeContext.restore();
-    }
-}
-WxWindowHandlerContribution.env = 'wx';
-function bindWxWindowContribution(container) {
-    var _a, _b;
-    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, WxWindowHandlerContribution))) {
-        container.bind(WxWindowHandlerContribution).toSelf();
-    }
-    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, WxWindowHandlerContribution.env))) {
-        container
-            .bind(WindowHandlerContribution$1)
-            .toService(WxWindowHandlerContribution)
-            .whenTargetNamed(WxWindowHandlerContribution.env);
-    }
-}
+    return arr;
+  };
+};
+uint8.readArray = readArray;
+var subBitsTotal = function subBitsTotal(bits, startIndex, length) {
+  var result = 0;
+  for (var i = 0; i < length; i++) {
+    result += bits[startIndex + i] && Math.pow(2, length - i - 1);
+  }
+  return result;
+};
+var readBits = function readBits(schema) {
+  return function (stream) {
+    var _byte = readByte()(stream); // convert the byte to bit array
 
-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() {
-        super();
-        this.type = 'wx';
-        this.supportEvent = true;
-        this.canvasMap = new Map();
-        this.wxEnvParams = {};
-        this.supportsTouchEvents = true;
-        try {
-            this.supportsPointerEvents = !!globalThis.PointerEvent;
-            this.supportsMouseEvents = !!globalThis.MouseEvent;
-        }
-        catch (err) {
-            this.supportsPointerEvents = false;
-            this.supportsMouseEvents = false;
+    var bits = new Array(8);
+    for (var i = 0; i < 8; i++) {
+      bits[7 - i] = !!(_byte & 1 << i);
+    } // convert the bit array to values based on the schema
+
+    return Object.keys(schema).reduce(function (res, key) {
+      var def = schema[key];
+      if (def.length) {
+        res[key] = subBitsTotal(bits, def.index, def.length);
+      } else {
+        res[key] = bits[def.index];
+      }
+      return res;
+    }, {});
+  };
+};
+uint8.readBits = readBits;
+
+(function (exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = void 0;
+  var _ = lib;
+  var _uint = uint8;
+
+  // a set of 0x00 terminated subblocks
+  var subBlocksSchema = {
+    blocks: function blocks(stream) {
+      var terminator = 0x00;
+      var chunks = [];
+      var streamSize = stream.data.length;
+      var total = 0;
+      for (var size = (0, _uint.readByte)()(stream); size !== terminator; size = (0, _uint.readByte)()(stream)) {
+        // size becomes undefined for some case when file is corrupted and  terminator is not proper 
+        // null check to avoid recursion
+        if (!size) break; // catch corrupted files with no terminator
+
+        if (stream.pos + size >= streamSize) {
+          var availableSize = streamSize - stream.pos;
+          chunks.push((0, _uint.readBytes)(availableSize)(stream));
+          total += availableSize;
+          break;
         }
-        this.applyStyles = true;
+        chunks.push((0, _uint.readBytes)(size)(stream));
+        total += size;
+      }
+      var result = new Uint8Array(total);
+      var offset = 0;
+      for (var i = 0; i < chunks.length; i++) {
+        result.set(chunks[i], offset);
+        offset += chunks[i].length;
+      }
+      return result;
     }
-    configure(service, params = {}) {
-        if (service.env === this.type) {
-            service.setActiveEnvContribution(this);
-            this.wxEnvParams = params;
+  }; // global control extension
+
+  var gceSchema = (0, _.conditional)({
+    gce: [{
+      codes: (0, _uint.readBytes)(2)
+    }, {
+      byteSize: (0, _uint.readByte)()
+    }, {
+      extras: (0, _uint.readBits)({
+        future: {
+          index: 0,
+          length: 3
+        },
+        disposal: {
+          index: 3,
+          length: 3
+        },
+        userInput: {
+          index: 6
+        },
+        transparentColorGiven: {
+          index: 7
         }
-    }
-    loadImage(url) {
-        return Promise.resolve({
-            data: url,
-            loadState: 'success'
-        });
-    }
-    loadSvg(url) {
-        return Promise.resolve({
-            data: null,
-            loadState: 'fail'
-        });
-    }
-    createCanvas(params) {
-        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;
-    }
-    releaseCanvas(canvas) {
-        return;
-    }
-    getDevicePixelRatio() {
-        return getWxPixelRatio(this.wxEnvParams);
-    }
-    getRequestAnimationFrame() {
-        return function (callback) {
-            return rafBasedSto.call(callback);
-        };
-    }
-    getCancelAnimationFrame() {
-        return (h) => {
-            rafBasedSto.clear(h);
-        };
-    }
-    addEventListener(type, listener, options) {
-        return null;
-    }
-    removeEventListener(type, listener, options) {
-        return null;
-    }
-    dispatchEvent(event) {
-        return null;
-    }
-    getElementById(str) {
-        return this.canvasMap.get(str);
-    }
-    getRootElement() {
-        return null;
-    }
-    getDocument() {
-        return null;
-    }
-    release(...params) {
-        return;
-    }
-    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;
-    }
-}
+      })
+    }, {
+      delay: (0, _uint.readUnsigned)(true)
+    }, {
+      transparentColorIndex: (0, _uint.readByte)()
+    }, {
+      terminator: (0, _uint.readByte)()
+    }]
+  }, function (stream) {
+    var codes = (0, _uint.peekBytes)(2)(stream);
+    return codes[0] === 0x21 && codes[1] === 0xf9;
+  }); // image pipeline block
 
-function bindWxEnv(container) {
-    var _a, _b;
-    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, WxEnvContribution))) {
-        container.bind(WxEnvContribution).toSelf().inSingletonScope();
-        container.bind(EnvContribution$1).toService(WxEnvContribution);
-    }
-}
-function loadWxEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
-    if (!loadWxEnv.__loaded) {
-        loadWxEnv.__loaded = true;
-        bindWxEnv(container);
-        bindWxCanvasModules(container);
-        bindWxWindowContribution(container);
-        loadPicker && loadMathPicker(container);
-    }
-}
-loadWxEnv.__loaded = false;
-function initWxEnv() {
-    loadWxEnv();
-}
+  var imageSchema = (0, _.conditional)({
+    image: [{
+      code: (0, _uint.readByte)()
+    }, {
+      descriptor: [{
+        left: (0, _uint.readUnsigned)(true)
+      }, {
+        top: (0, _uint.readUnsigned)(true)
+      }, {
+        width: (0, _uint.readUnsigned)(true)
+      }, {
+        height: (0, _uint.readUnsigned)(true)
+      }, {
+        lct: (0, _uint.readBits)({
+          exists: {
+            index: 0
+          },
+          interlaced: {
+            index: 1
+          },
+          sort: {
+            index: 2
+          },
+          future: {
+            index: 3,
+            length: 2
+          },
+          size: {
+            index: 5,
+            length: 3
+          }
+        })
+      }]
+    }, (0, _.conditional)({
+      lct: (0, _uint.readArray)(3, function (stream, result, parent) {
+        return Math.pow(2, parent.descriptor.lct.size + 1);
+      })
+    }, function (stream, result, parent) {
+      return parent.descriptor.lct.exists;
+    }), {
+      data: [{
+        minCodeSize: (0, _uint.readByte)()
+      }, subBlocksSchema]
+    }]
+  }, function (stream) {
+    return (0, _uint.peekByte)()(stream) === 0x2c;
+  }); // plain text block
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  var textSchema = (0, _.conditional)({
+    text: [{
+      codes: (0, _uint.readBytes)(2)
+    }, {
+      blockSize: (0, _uint.readByte)()
+    }, {
+      preData: function preData(stream, result, parent) {
+        return (0, _uint.readBytes)(parent.text.blockSize)(stream);
+      }
+    }, subBlocksSchema]
+  }, function (stream) {
+    var codes = (0, _uint.peekBytes)(2)(stream);
+    return codes[0] === 0x21 && codes[1] === 0x01;
+  }); // application block
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
+  var applicationSchema = (0, _.conditional)({
+    application: [{
+      codes: (0, _uint.readBytes)(2)
+    }, {
+      blockSize: (0, _uint.readByte)()
+    }, {
+      id: function id(stream, result, parent) {
+        return (0, _uint.readString)(parent.blockSize)(stream);
+      }
+    }, subBlocksSchema]
+  }, function (stream) {
+    var codes = (0, _uint.peekBytes)(2)(stream);
+    return codes[0] === 0x21 && codes[1] === 0xff;
+  }); // comment block
 
-var lib$1 = {};
+  var commentSchema = (0, _.conditional)({
+    comment: [{
+      codes: (0, _uint.readBytes)(2)
+    }, subBlocksSchema]
+  }, function (stream) {
+    var codes = (0, _uint.peekBytes)(2)(stream);
+    return codes[0] === 0x21 && codes[1] === 0xfe;
+  });
+  var schema = [{
+    header: [{
+      signature: (0, _uint.readString)(3)
+    }, {
+      version: (0, _uint.readString)(3)
+    }]
+  }, {
+    lsd: [{
+      width: (0, _uint.readUnsigned)(true)
+    }, {
+      height: (0, _uint.readUnsigned)(true)
+    }, {
+      gct: (0, _uint.readBits)({
+        exists: {
+          index: 0
+        },
+        resolution: {
+          index: 1,
+          length: 3
+        },
+        sort: {
+          index: 4
+        },
+        size: {
+          index: 5,
+          length: 3
+        }
+      })
+    }, {
+      backgroundColorIndex: (0, _uint.readByte)()
+    }, {
+      pixelAspectRatio: (0, _uint.readByte)()
+    }]
+  }, (0, _.conditional)({
+    gct: (0, _uint.readArray)(3, function (stream, result) {
+      return Math.pow(2, result.lsd.gct.size + 1);
+    })
+  }, function (stream, result) {
+    return result.lsd.gct.exists;
+  }),
+  // content frames
+  {
+    frames: (0, _.loop)([gceSchema, applicationSchema, commentSchema, imageSchema, textSchema], function (stream) {
+      var nextCode = (0, _uint.peekByte)()(stream); // rather than check for a terminator, we should check for the existence
+      // of an ext or image block to avoid infinite loops
+      //var terminator = 0x3B;
+      //return nextCode !== terminator;
 
-var gif = {};
+      return nextCode === 0x21 || nextCode === 0x2c;
+    })
+  }];
+  var _default = schema;
+  exports["default"] = _default;
+})(gif);
 
-var lib = {};
+var deinterlace$1 = {};
 
-Object.defineProperty(lib, "__esModule", {
+Object.defineProperty(deinterlace$1, "__esModule", {
   value: true
 });
-lib.loop = lib.conditional = lib.parse = void 0;
-var parse = function parse(stream, schema) {
-  var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : result;
-  if (Array.isArray(schema)) {
-    schema.forEach(function (partSchema) {
-      return parse(stream, partSchema, result, parent);
-    });
-  } else if (typeof schema === 'function') {
-    schema(stream, result, parent, parse);
-  } else {
-    var key = Object.keys(schema)[0];
-    if (Array.isArray(schema[key])) {
-      parent[key] = {};
-      parse(stream, schema[key], result, parent[key]);
-    } else {
-      parent[key] = schema[key](stream, result, parent, parse);
-    }
-  }
-  return result;
-};
-lib.parse = parse;
-var conditional = function conditional(schema, conditionFunc) {
-  return function (stream, result, parent, parse) {
-    if (conditionFunc(stream, result, parent)) {
-      parse(stream, schema, result, parent);
-    }
-  };
-};
-lib.conditional = conditional;
-var loop = function loop(schema, continueFunc) {
-  return function (stream, result, parent, parse) {
-    var arr = [];
-    var lastStreamPos = stream.pos;
-    while (continueFunc(stream, result, parent)) {
-      var newParent = {};
-      parse(stream, schema, result, newParent); // cases when whole file is parsed but no termination is there and stream position is not getting updated as well
-      // it falls into infinite recursion, null check to avoid the same
+deinterlace$1.deinterlace = void 0;
 
-      if (stream.pos === lastStreamPos) {
-        break;
-      }
-      lastStreamPos = stream.pos;
-      arr.push(newParent);
+/**
+ * Deinterlace function from https://github.com/shachaf/jsgif
+ */
+var deinterlace = function deinterlace(pixels, width) {
+  var newPixels = new Array(pixels.length);
+  var rows = pixels.length / width;
+  var cpRow = function cpRow(toRow, fromRow) {
+    var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
+    newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
+  }; // See appendix E.
+
+  var offsets = [0, 4, 2, 1];
+  var steps = [8, 8, 4, 2];
+  var fromRow = 0;
+  for (var pass = 0; pass < 4; pass++) {
+    for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
+      cpRow(toRow, fromRow);
+      fromRow++;
     }
-    return arr;
-  };
+  }
+  return newPixels;
 };
-lib.loop = loop;
+deinterlace$1.deinterlace = deinterlace;
 
-var uint8 = {};
+var lzw$1 = {};
 
-Object.defineProperty(uint8, "__esModule", {
+Object.defineProperty(lzw$1, "__esModule", {
   value: true
 });
-uint8.readBits = uint8.readArray = uint8.readUnsigned = uint8.readString = uint8.peekBytes = uint8.readBytes = uint8.peekByte = uint8.readByte = uint8.buildStream = void 0;
-
-// Default stream and parsers for Uint8TypedArray data type
-var buildStream = function buildStream(uint8Data) {
-  return {
-    data: uint8Data,
-    pos: 0
-  };
-};
-uint8.buildStream = buildStream;
-var readByte = function readByte() {
-  return function (stream) {
-    return stream.data[stream.pos++];
-  };
-};
-uint8.readByte = readByte;
-var peekByte = function peekByte() {
-  var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  return function (stream) {
-    return stream.data[stream.pos + offset];
-  };
-};
-uint8.peekByte = peekByte;
-var readBytes = function readBytes(length) {
-  return function (stream) {
-    return stream.data.subarray(stream.pos, stream.pos += length);
-  };
-};
-uint8.readBytes = readBytes;
-var peekBytes = function peekBytes(length) {
-  return function (stream) {
-    return stream.data.subarray(stream.pos, stream.pos + length);
-  };
-};
-uint8.peekBytes = peekBytes;
-var readString = function readString(length) {
-  return function (stream) {
-    return Array.from(readBytes(length)(stream)).map(function (value) {
-      return String.fromCharCode(value);
-    }).join('');
-  };
-};
-uint8.readString = readString;
-var readUnsigned = function readUnsigned(littleEndian) {
-  return function (stream) {
-    var bytes = readBytes(2)(stream);
-    return littleEndian ? (bytes[1] << 8) + bytes[0] : (bytes[0] << 8) + bytes[1];
-  };
-};
-uint8.readUnsigned = readUnsigned;
-var readArray = function readArray(byteSize, totalOrFunc) {
-  return function (stream, result, parent) {
-    var total = typeof totalOrFunc === 'function' ? totalOrFunc(stream, result, parent) : totalOrFunc;
-    var parser = readBytes(byteSize);
-    var arr = new Array(total);
-    for (var i = 0; i < total; i++) {
-      arr[i] = parser(stream);
-    }
-    return arr;
-  };
-};
-uint8.readArray = readArray;
-var subBitsTotal = function subBitsTotal(bits, startIndex, length) {
-  var result = 0;
-  for (var i = 0; i < length; i++) {
-    result += bits[startIndex + i] && Math.pow(2, length - i - 1);
-  }
-  return result;
-};
-var readBits = function readBits(schema) {
-  return function (stream) {
-    var _byte = readByte()(stream); // convert the byte to bit array
-
-    var bits = new Array(8);
-    for (var i = 0; i < 8; i++) {
-      bits[7 - i] = !!(_byte & 1 << i);
-    } // convert the bit array to values based on the schema
+lzw$1.lzw = void 0;
 
-    return Object.keys(schema).reduce(function (res, key) {
-      var def = schema[key];
-      if (def.length) {
-        res[key] = subBitsTotal(bits, def.index, def.length);
-      } else {
-        res[key] = bits[def.index];
-      }
-      return res;
-    }, {});
-  };
-};
-uint8.readBits = readBits;
+/**
+ * javascript port of java LZW decompression
+ * Original java author url: https://gist.github.com/devunwired/4479231
+ */
+var lzw = function lzw(minCodeSize, data, pixelCount) {
+  var MAX_STACK_SIZE = 4096;
+  var nullCode = -1;
+  var npix = pixelCount;
+  var available, clear, code_mask, code_size, end_of_information, in_code, old_code, bits, code, i, datum, data_size, first, top, bi, pi;
+  var dstPixels = new Array(pixelCount);
+  var prefix = new Array(MAX_STACK_SIZE);
+  var suffix = new Array(MAX_STACK_SIZE);
+  var pixelStack = new Array(MAX_STACK_SIZE + 1); // Initialize GIF data stream decoder.
 
-(function (exports) {
+  data_size = minCodeSize;
+  clear = 1 << data_size;
+  end_of_information = clear + 1;
+  available = clear + 2;
+  old_code = nullCode;
+  code_size = data_size + 1;
+  code_mask = (1 << code_size) - 1;
+  for (code = 0; code < clear; code++) {
+    prefix[code] = 0;
+    suffix[code] = code;
+  } // Decode GIF pixel stream.
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports["default"] = void 0;
-  var _ = lib;
-  var _uint = uint8;
+  var datum, bits, first, top, pi, bi;
+  datum = bits = first = top = pi = bi = 0;
+  for (i = 0; i < npix;) {
+    if (top === 0) {
+      if (bits < code_size) {
+        // get the next byte
+        datum += data[bi] << bits;
+        bits += 8;
+        bi++;
+        continue;
+      } // Get the next code.
 
-  // a set of 0x00 terminated subblocks
-  var subBlocksSchema = {
-    blocks: function blocks(stream) {
-      var terminator = 0x00;
-      var chunks = [];
-      var streamSize = stream.data.length;
-      var total = 0;
-      for (var size = (0, _uint.readByte)()(stream); size !== terminator; size = (0, _uint.readByte)()(stream)) {
-        // size becomes undefined for some case when file is corrupted and  terminator is not proper 
-        // null check to avoid recursion
-        if (!size) break; // catch corrupted files with no terminator
+      code = datum & code_mask;
+      datum >>= code_size;
+      bits -= code_size; // Interpret the code
 
-        if (stream.pos + size >= streamSize) {
-          var availableSize = streamSize - stream.pos;
-          chunks.push((0, _uint.readBytes)(availableSize)(stream));
-          total += availableSize;
-          break;
-        }
-        chunks.push((0, _uint.readBytes)(size)(stream));
-        total += size;
+      if (code > available || code == end_of_information) {
+        break;
       }
-      var result = new Uint8Array(total);
-      var offset = 0;
-      for (var i = 0; i < chunks.length; i++) {
-        result.set(chunks[i], offset);
-        offset += chunks[i].length;
+      if (code == clear) {
+        // Reset decoder.
+        code_size = data_size + 1;
+        code_mask = (1 << code_size) - 1;
+        available = clear + 2;
+        old_code = nullCode;
+        continue;
       }
-      return result;
-    }
-  }; // global control extension
+      if (old_code == nullCode) {
+        pixelStack[top++] = suffix[code];
+        old_code = code;
+        first = code;
+        continue;
+      }
+      in_code = code;
+      if (code == available) {
+        pixelStack[top++] = first;
+        code = old_code;
+      }
+      while (code > clear) {
+        pixelStack[top++] = suffix[code];
+        code = prefix[code];
+      }
+      first = suffix[code] & 0xff;
+      pixelStack[top++] = first; // add a new string to the table, but only if space is available
+      // if not, just continue with current table until a clear code is found
+      // (deferred clear code implementation as per GIF spec)
 
-  var gceSchema = (0, _.conditional)({
-    gce: [{
-      codes: (0, _uint.readBytes)(2)
-    }, {
-      byteSize: (0, _uint.readByte)()
-    }, {
-      extras: (0, _uint.readBits)({
-        future: {
-          index: 0,
-          length: 3
-        },
-        disposal: {
-          index: 3,
-          length: 3
-        },
-        userInput: {
-          index: 6
-        },
-        transparentColorGiven: {
-          index: 7
+      if (available < MAX_STACK_SIZE) {
+        prefix[available] = old_code;
+        suffix[available] = first;
+        available++;
+        if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
+          code_size++;
+          code_mask += available;
         }
-      })
-    }, {
-      delay: (0, _uint.readUnsigned)(true)
-    }, {
-      transparentColorIndex: (0, _uint.readByte)()
-    }, {
-      terminator: (0, _uint.readByte)()
-    }]
-  }, function (stream) {
-    var codes = (0, _uint.peekBytes)(2)(stream);
-    return codes[0] === 0x21 && codes[1] === 0xf9;
-  }); // image pipeline block
-
-  var imageSchema = (0, _.conditional)({
-    image: [{
-      code: (0, _uint.readByte)()
-    }, {
-      descriptor: [{
-        left: (0, _uint.readUnsigned)(true)
-      }, {
-        top: (0, _uint.readUnsigned)(true)
-      }, {
-        width: (0, _uint.readUnsigned)(true)
-      }, {
-        height: (0, _uint.readUnsigned)(true)
-      }, {
-        lct: (0, _uint.readBits)({
-          exists: {
-            index: 0
-          },
-          interlaced: {
-            index: 1
-          },
-          sort: {
-            index: 2
-          },
-          future: {
-            index: 3,
-            length: 2
-          },
-          size: {
-            index: 5,
-            length: 3
-          }
-        })
-      }]
-    }, (0, _.conditional)({
-      lct: (0, _uint.readArray)(3, function (stream, result, parent) {
-        return Math.pow(2, parent.descriptor.lct.size + 1);
-      })
-    }, function (stream, result, parent) {
-      return parent.descriptor.lct.exists;
-    }), {
-      data: [{
-        minCodeSize: (0, _uint.readByte)()
-      }, subBlocksSchema]
-    }]
-  }, function (stream) {
-    return (0, _uint.peekByte)()(stream) === 0x2c;
-  }); // plain text block
-
-  var textSchema = (0, _.conditional)({
-    text: [{
-      codes: (0, _uint.readBytes)(2)
-    }, {
-      blockSize: (0, _uint.readByte)()
-    }, {
-      preData: function preData(stream, result, parent) {
-        return (0, _uint.readBytes)(parent.text.blockSize)(stream);
-      }
-    }, subBlocksSchema]
-  }, function (stream) {
-    var codes = (0, _uint.peekBytes)(2)(stream);
-    return codes[0] === 0x21 && codes[1] === 0x01;
-  }); // application block
-
-  var applicationSchema = (0, _.conditional)({
-    application: [{
-      codes: (0, _uint.readBytes)(2)
-    }, {
-      blockSize: (0, _uint.readByte)()
-    }, {
-      id: function id(stream, result, parent) {
-        return (0, _uint.readString)(parent.blockSize)(stream);
       }
-    }, subBlocksSchema]
-  }, function (stream) {
-    var codes = (0, _uint.peekBytes)(2)(stream);
-    return codes[0] === 0x21 && codes[1] === 0xff;
-  }); // comment block
-
-  var commentSchema = (0, _.conditional)({
-    comment: [{
-      codes: (0, _uint.readBytes)(2)
-    }, subBlocksSchema]
-  }, function (stream) {
-    var codes = (0, _uint.peekBytes)(2)(stream);
-    return codes[0] === 0x21 && codes[1] === 0xfe;
-  });
-  var schema = [{
-    header: [{
-      signature: (0, _uint.readString)(3)
-    }, {
-      version: (0, _uint.readString)(3)
-    }]
-  }, {
-    lsd: [{
-      width: (0, _uint.readUnsigned)(true)
-    }, {
-      height: (0, _uint.readUnsigned)(true)
-    }, {
-      gct: (0, _uint.readBits)({
-        exists: {
-          index: 0
-        },
-        resolution: {
-          index: 1,
-          length: 3
-        },
-        sort: {
-          index: 4
-        },
-        size: {
-          index: 5,
-          length: 3
-        }
-      })
-    }, {
-      backgroundColorIndex: (0, _uint.readByte)()
-    }, {
-      pixelAspectRatio: (0, _uint.readByte)()
-    }]
-  }, (0, _.conditional)({
-    gct: (0, _uint.readArray)(3, function (stream, result) {
-      return Math.pow(2, result.lsd.gct.size + 1);
-    })
-  }, function (stream, result) {
-    return result.lsd.gct.exists;
-  }),
-  // content frames
-  {
-    frames: (0, _.loop)([gceSchema, applicationSchema, commentSchema, imageSchema, textSchema], function (stream) {
-      var nextCode = (0, _uint.peekByte)()(stream); // rather than check for a terminator, we should check for the existence
-      // of an ext or image block to avoid infinite loops
-      //var terminator = 0x3B;
-      //return nextCode !== terminator;
+      old_code = in_code;
+    } // Pop a pixel off the pixel stack.
 
-      return nextCode === 0x21 || nextCode === 0x2c;
-    })
-  }];
-  var _default = schema;
-  exports["default"] = _default;
-})(gif);
+    top--;
+    dstPixels[pi++] = pixelStack[top];
+    i++;
+  }
+  for (i = pi; i < npix; i++) {
+    dstPixels[i] = 0; // clear missing pixels
+  }
 
-var deinterlace$1 = {};
+  return dstPixels;
+};
+lzw$1.lzw = lzw;
 
-Object.defineProperty(deinterlace$1, "__esModule", {
+Object.defineProperty(lib$1, "__esModule", {
   value: true
 });
-deinterlace$1.deinterlace = void 0;
-
-/**
- * Deinterlace function from https://github.com/shachaf/jsgif
- */
-var deinterlace = function deinterlace(pixels, width) {
-  var newPixels = new Array(pixels.length);
-  var rows = pixels.length / width;
-  var cpRow = function cpRow(toRow, fromRow) {
-    var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
-    newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
-  }; // See appendix E.
-
-  var offsets = [0, 4, 2, 1];
-  var steps = [8, 8, 4, 2];
-  var fromRow = 0;
-  for (var pass = 0; pass < 4; pass++) {
-    for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
-      cpRow(toRow, fromRow);
-      fromRow++;
-    }
+var decompressFrames_1 = lib$1.decompressFrames = lib$1.decompressFrame = parseGIF_1 = lib$1.parseGIF = void 0;
+var _gif = _interopRequireDefault(gif);
+var _jsBinarySchemaParser = lib;
+var _uint = uint8;
+var _deinterlace = deinterlace$1;
+var _lzw = lzw$1;
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+var parseGIF = function parseGIF(arrayBuffer) {
+  var byteData = new Uint8Array(arrayBuffer);
+  return (0, _jsBinarySchemaParser.parse)((0, _uint.buildStream)(byteData), _gif["default"]);
+};
+var parseGIF_1 = lib$1.parseGIF = parseGIF;
+var generatePatch = function generatePatch(image) {
+  var totalPixels = image.pixels.length;
+  var patchData = new Uint8ClampedArray(totalPixels * 4);
+  for (var i = 0; i < totalPixels; i++) {
+    var pos = i * 4;
+    var colorIndex = image.pixels[i];
+    var color = image.colorTable[colorIndex] || [0, 0, 0];
+    patchData[pos] = color[0];
+    patchData[pos + 1] = color[1];
+    patchData[pos + 2] = color[2];
+    patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;
   }
-  return newPixels;
+  return patchData;
 };
-deinterlace$1.deinterlace = deinterlace;
+var decompressFrame = function decompressFrame(frame, gct, buildImagePatch) {
+  if (!frame.image) {
+    console.warn('gif frame does not have associated image.');
+    return;
+  }
+  var image = frame.image; // get the number of pixels
 
-var lzw$1 = {};
+  var totalPixels = image.descriptor.width * image.descriptor.height; // do lzw decompression
 
-Object.defineProperty(lzw$1, "__esModule", {
-  value: true
-});
-lzw$1.lzw = void 0;
+  var pixels = (0, _lzw.lzw)(image.data.minCodeSize, image.data.blocks, totalPixels); // deal with interlacing if necessary
 
-/**
- * javascript port of java LZW decompression
- * Original java author url: https://gist.github.com/devunwired/4479231
- */
-var lzw = function lzw(minCodeSize, data, pixelCount) {
-  var MAX_STACK_SIZE = 4096;
-  var nullCode = -1;
-  var npix = pixelCount;
-  var available, clear, code_mask, code_size, end_of_information, in_code, old_code, bits, code, i, datum, data_size, first, top, bi, pi;
-  var dstPixels = new Array(pixelCount);
-  var prefix = new Array(MAX_STACK_SIZE);
-  var suffix = new Array(MAX_STACK_SIZE);
-  var pixelStack = new Array(MAX_STACK_SIZE + 1); // Initialize GIF data stream decoder.
+  if (image.descriptor.lct.interlaced) {
+    pixels = (0, _deinterlace.deinterlace)(pixels, image.descriptor.width);
+  }
+  var resultImage = {
+    pixels: pixels,
+    dims: {
+      top: frame.image.descriptor.top,
+      left: frame.image.descriptor.left,
+      width: frame.image.descriptor.width,
+      height: frame.image.descriptor.height
+    }
+  }; // color table
 
-  data_size = minCodeSize;
-  clear = 1 << data_size;
-  end_of_information = clear + 1;
-  available = clear + 2;
-  old_code = nullCode;
-  code_size = data_size + 1;
-  code_mask = (1 << code_size) - 1;
-  for (code = 0; code < clear; code++) {
-    prefix[code] = 0;
-    suffix[code] = code;
-  } // Decode GIF pixel stream.
+  if (image.descriptor.lct && image.descriptor.lct.exists) {
+    resultImage.colorTable = image.lct;
+  } else {
+    resultImage.colorTable = gct;
+  } // add per frame relevant gce information
 
-  var datum, bits, first, top, pi, bi;
-  datum = bits = first = top = pi = bi = 0;
-  for (i = 0; i < npix;) {
-    if (top === 0) {
-      if (bits < code_size) {
-        // get the next byte
-        datum += data[bi] << bits;
-        bits += 8;
-        bi++;
-        continue;
-      } // Get the next code.
+  if (frame.gce) {
+    resultImage.delay = (frame.gce.delay || 10) * 10; // convert to ms
 
-      code = datum & code_mask;
-      datum >>= code_size;
-      bits -= code_size; // Interpret the code
+    resultImage.disposalType = frame.gce.extras.disposal; // transparency
 
-      if (code > available || code == end_of_information) {
-        break;
-      }
-      if (code == clear) {
-        // Reset decoder.
-        code_size = data_size + 1;
-        code_mask = (1 << code_size) - 1;
-        available = clear + 2;
-        old_code = nullCode;
-        continue;
-      }
-      if (old_code == nullCode) {
-        pixelStack[top++] = suffix[code];
-        old_code = code;
-        first = code;
-        continue;
-      }
-      in_code = code;
-      if (code == available) {
-        pixelStack[top++] = first;
-        code = old_code;
-      }
-      while (code > clear) {
-        pixelStack[top++] = suffix[code];
-        code = prefix[code];
-      }
-      first = suffix[code] & 0xff;
-      pixelStack[top++] = first; // add a new string to the table, but only if space is available
-      // if not, just continue with current table until a clear code is found
-      // (deferred clear code implementation as per GIF spec)
+    if (frame.gce.extras.transparentColorGiven) {
+      resultImage.transparentIndex = frame.gce.transparentColorIndex;
+    }
+  } // create canvas usable imagedata if desired
 
-      if (available < MAX_STACK_SIZE) {
-        prefix[available] = old_code;
-        suffix[available] = first;
-        available++;
-        if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
-          code_size++;
-          code_mask += available;
+  if (buildImagePatch) {
+    resultImage.patch = generatePatch(resultImage);
+  }
+  return resultImage;
+};
+lib$1.decompressFrame = decompressFrame;
+var decompressFrames = function decompressFrames(parsedGif, buildImagePatches) {
+  return parsedGif.frames.filter(function (f) {
+    return f.image;
+  }).map(function (f) {
+    return decompressFrame(f, parsedGif.gct, buildImagePatches);
+  });
+};
+decompressFrames_1 = lib$1.decompressFrames = decompressFrames;
+
+class GifImage extends Image$2 {
+    constructor(params) {
+        super(params);
+        this.type = 'gif-image';
+        this.numberType = GIFIMAGE_NUMBER_TYPE;
+        this.loadGif();
+    }
+    loadGif() {
+        if (isString(this.attribute.gifImage)) {
+            ResourceLoader$1.GetFile(this.attribute.gifImage, 'arrayBuffer')
+                .then((res) => {
+                const gif = parseGIF_1(res);
+                const frames = decompressFrames_1(gif, true);
+                this.renderGIF(frames);
+            })
+                .catch(e => {
+                console.error('Gif load error: ', e);
+            });
+        }
+        else if (this.attribute.gifImage instanceof ArrayBuffer) {
+            const gif = parseGIF_1(this.attribute.gifImage);
+            const frames = decompressFrames_1(gif, true);
+            this.renderGIF(frames);
+        }
+    }
+    renderGIF(frames) {
+        this.loadedFrames = frames;
+        this.frameIndex = 0;
+        if (!this.tempCanvas) {
+            this.tempCanvas = application.global.createCanvas({});
+            this.tempCtx = this.tempCanvas.getContext('2d');
+        }
+        if (!this.gifCanvas) {
+            this.gifCanvas = application.global.createCanvas({});
+            this.gifCtx = this.gifCanvas.getContext('2d');
+        }
+        this.gifCanvas.width = frames[0].dims.width;
+        this.gifCanvas.height = frames[0].dims.height;
+        this.playing = true;
+        this.lastTime = new Date().getTime();
+        const animation = this.animate();
+        if (this.attribute.timeline) {
+            animation.setTimeline(this.attribute.timeline);
+        }
+        animation.to({}, 1000, 'linear').loop(Infinity);
+    }
+    renderFrame(context, x, y) {
+        const frame = this.loadedFrames[this.frameIndex || 0];
+        if (frame.disposalType === 2) {
+            this.gifCtx.clearRect(0, 0, this.gifCanvas.width, this.gifCanvas.height);
+        }
+        this.drawPatch(frame);
+        this.manipulate(context, x, y);
+        const diff = new Date().getTime() - this.lastTime;
+        if (frame.delay < diff) {
+            this.frameIndex++;
+            this.lastTime = new Date().getTime();
+        }
+        if (this.frameIndex >= this.loadedFrames.length) {
+            this.frameIndex = 0;
+        }
+    }
+    drawPatch(frame) {
+        const dims = frame.dims;
+        if (!this.frameImageData ||
+            dims.width !== this.frameImageData.width ||
+            dims.height !== this.frameImageData.height) {
+            this.tempCanvas.width = dims.width;
+            this.tempCanvas.height = dims.height;
+            this.frameImageData = this.tempCtx.createImageData(dims.width, dims.height);
+        }
+        this.frameImageData.data.set(frame.patch);
+        this.tempCtx.putImageData(this.frameImageData, 0, 0);
+        this.gifCtx.drawImage(this.tempCanvas, dims.left, dims.top);
+    }
+    manipulate(context, x, y) {
+        context.drawImage(this.gifCanvas, 0, 0, this.gifCanvas.width, this.gifCanvas.height, x, y, this.attribute.width, this.attribute.height);
+    }
+    setAttribute(key, value, forceUpdateTag, context) {
+        super.setAttribute(key, value, forceUpdateTag, context);
+        if (key === 'gifImage') {
+            this.loadGif();
+        }
+    }
+    setAttributes(params, forceUpdateTag, context) {
+        super.setAttributes(params, forceUpdateTag, context);
+        if (params.gifImage) {
+            this.loadGif();
+        }
+    }
+}
+function createGifImage(attributes) {
+    return new GifImage(attributes);
+}
+
+class DefaultCanvasGifImageRender extends DefaultCanvasImageRender$1 {
+    constructor(imageRenderContribitions) {
+        super(imageRenderContribitions);
+        this.imageRenderContribitions = imageRenderContribitions;
+        this.numberType = GIFIMAGE_NUMBER_TYPE;
+        this._renderContribitions = undefined;
+        this.builtinContributions = [defaultGifImageRenderContribution];
+        this.init(imageRenderContribitions);
+    }
+    drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
+        const imageAttribute = getTheme$1(image).image;
+        const { x: originX = imageAttribute.x, y: originY = imageAttribute.y, fillStrokeOrder = imageAttribute.fillStrokeOrder } = image.attribute;
+        const data = this.valid(image, imageAttribute, fillCb);
+        if (!data) {
+            return;
+        }
+        const { fVisible, sVisible, doFill, doStroke } = data;
+        const _runFill = () => {
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, image.attribute, imageAttribute);
+                }
+            }
+        };
+        const _runStroke = () => {
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, image.attribute, imageAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute);
+                    context.stroke();
+                }
+            }
+        };
+        if (!fillStrokeOrder) {
+            {
+                context.save();
+                context.clip();
+            }
+            this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
+            _runFill();
+            {
+                context.restore();
+            }
+            _runStroke();
+        }
+        else {
+            _runStroke();
+            {
+                context.save();
+                context.clip();
+            }
+            this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
+            _runFill();
+            {
+                context.restore();
+            }
+        }
+        this.afterRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
+    }
+    draw(image, renderService, drawContext) {
+        const { context } = renderService.drawParams;
+        if (!context) {
+            return;
+        }
+        const imageAttribute = getTheme$1(image).image;
+        this._draw(image, imageAttribute, false, drawContext);
+    }
+}
+class DefaultGifImageRenderContribution extends DefaultRectRenderContribution$1 {
+    constructor() {
+        super(...arguments);
+        this.time = BaseRenderContributionTime$1.afterFillStroke;
+        this.useStyle = true;
+        this.order = 0;
+    }
+    drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        if (image.renderFrame && image.playing) {
+            image.renderFrame(context, x, y);
+        }
+    }
+}
+const defaultGifImageRenderContribution = new DefaultGifImageRenderContribution();
+
+let loadGifImageModule = false;
+function bindGifImageRenderContribution(container) {
+    if (loadGifImageModule) {
+        return;
+    }
+    loadGifImageModule = true;
+    container
+        .bind(DefaultCanvasGifImageRender)
+        .toDynamicValue(() => new DefaultCanvasGifImageRender(createContributionProvider$1(ImageRenderContribution$1, container)))
+        .inSingletonScope();
+    container.bind(GraphicRender).toService(DefaultCanvasGifImageRender);
+}
+
+function registerGifGraphic() {
+    graphicCreator$1.RegisterGraphicCreator('gif', createGifImage);
+}
+function _registerGifImage() {
+    if (_registerGifImage.__loaded) {
+        return;
+    }
+    _registerGifImage.__loaded = true;
+    const legacyContext = getLegacyBindingContext$1();
+    registerGifGraphic();
+    bindGifImageRenderContribution(legacyContext);
+    bindGifImageCanvasPickerContribution(legacyContext);
+}
+_registerGifImage.__loaded = false;
+const registerGifImage = _registerGifImage;
+
+class LynxContext2d extends BrowserContext2d {
+    get globalAlpha() {
+        return this._globalAlpha;
+    }
+    set globalAlpha(ga) {
+        this.nativeContext.globalAlpha = ga * this.baseGlobalAlpha;
+        this._globalAlpha = ga * this.baseGlobalAlpha;
+    }
+    setLineDash(segments) {
+        const a = arguments;
+        const _context = this.nativeContext;
+        if (!!this.nativeContext.setLineDash) {
+            const lineDash = a[0];
+            if (lineDash[0] === 0 && lineDash[1] === 0) {
+                return;
+            }
+            lineDash && _context.setLineDash(lineDash);
+        }
+    }
+    _setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
+        const _context = this.nativeContext;
+        if (!defaultParams) {
+            defaultParams = this.strokeAttributes;
+        }
+        const { strokeOpacity = defaultParams.strokeOpacity, opacity = defaultParams.opacity } = attribute;
+        if (strokeOpacity > 1e-12 && opacity > 1e-12) {
+            const { lineWidth = defaultParams.lineWidth, stroke = defaultParams.stroke, lineJoin = defaultParams.lineJoin, lineDash = defaultParams.lineDash, lineCap = defaultParams.lineCap, miterLimit = defaultParams.miterLimit, keepStrokeScale = defaultParams.keepStrokeScale, lineDashOffset = defaultParams.lineDashOffset } = attribute;
+            _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha;
+            _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke$1(this, lineWidth, this.dpr);
+            _context.strokeStyle = createColor$1(this, stroke, params, offsetX, offsetY);
+            _context.lineJoin = lineJoin;
+            if (!(lineDash[0] === 0 && lineDash[1] === 0) && lineDash) {
+                _context.setLineDash(lineDash);
+                _context.lineDashOffset = lineDashOffset;
+            }
+            _context.lineCap = lineCap;
+            _context.miterLimit = miterLimit;
+        }
+    }
+    measureText(text, method = application.global.measureTextMethod) {
+        const dpr = this.dpr || 1;
+        this.setTransform(1, 0, 0, 1, 0, 0, true, dpr);
+        const metrics = super.measureText(text, method);
+        if (dpr === 1 || metrics.fontBoundingBoxAscent == null || metrics.fontBoundingBoxDescent == null) {
+            return metrics;
+        }
+        return Object.assign(Object.assign({}, metrics), { width: metrics.width, actualBoundingBoxLeft: metrics.actualBoundingBoxLeft, actualBoundingBoxRight: metrics.actualBoundingBoxRight, actualBoundingBoxAscent: metrics.actualBoundingBoxAscent, actualBoundingBoxDescent: metrics.actualBoundingBoxDescent, fontBoundingBoxAscent: metrics.fontBoundingBoxAscent / dpr, fontBoundingBoxDescent: metrics.fontBoundingBoxDescent / dpr });
+    }
+    createPattern(image, repetition) {
+        return null;
+    }
+    draw() {
+        const _context = this.nativeContext;
+        if (!_context.draw) {
+            return;
+        }
+        this.drawPromise = new Promise(resolve => {
+            _context.draw(true, () => {
+                this.drawPromise = null;
+                resolve(null);
+            });
+        });
+    }
+}
+LynxContext2d.env = 'lynx';
+
+class LynxCanvas extends BaseCanvas {
+    constructor(params) {
+        super(params);
+    }
+    init() {
+        this._context = new LynxContext2d(this, this._dpr);
+    }
+    resize(width, height) {
+        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;
+        if (this._nativeCanvas.nativeCanvas) {
+            this._nativeCanvas.nativeCanvas.width = this._pixelWidth;
+            this._nativeCanvas.nativeCanvas.height = this._pixelHeight;
+        }
+        const _context = this._context;
+        _context.dpr = this._dpr;
+    }
+    release(...params) {
+        return;
+    }
+}
+LynxCanvas.env = 'lynx';
+
+const bindLynxCanvasModules = createModule(LynxCanvas, LynxContext2d);
+
+class MiniAppEventManager {
+    constructor() {
+        this.cache = {};
+    }
+    addEventListener(type, func) {
+        if (!type || !func) {
+            return;
+        }
+        this.cache[type] = this.cache[type] || {
+            listener: []
+        };
+        this.cache[type].listener.push(func);
+    }
+    removeEventListener(type, func) {
+        if (!type || !func) {
+            return;
+        }
+        if (!this.cache[type]) {
+            return;
+        }
+        const index = this.cache[type].listener.findIndex((f) => f === func);
+        if (index >= 0) {
+            this.cache[type].listener.splice(index, 1);
+        }
+    }
+    cleanEvent() {
+        this.cache = {};
+    }
+}
+function setMiniAppEventTarget(event, key, value) {
+    if (!event || !value) {
+        return;
+    }
+    try {
+        event[key] = value;
+    }
+    catch (_a) {
+        Object.defineProperty(event, key, {
+            configurable: true,
+            value
+        });
+    }
+}
+function isValidCoordinate$1(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function pickCoordinate$1(...values) {
+    for (let i = 0; i < values.length; i++) {
+        if (isValidCoordinate$1(values[i])) {
+            return values[i];
+        }
+    }
+    return undefined;
+}
+function setLynxEventValue(event, key, value) {
+    try {
+        event[key] = value;
+    }
+    catch (_a) {
+        Object.defineProperty(event, key, {
+            configurable: true,
+            value
+        });
+    }
+}
+function normalizeLynxTouchEventPoint(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$1(event.x, event.offsetX, event.clientX, event.pageX, touch.x, touch.offsetX, touch.clientX, touch.pageX);
+    const y = pickCoordinate$1(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) {
+        setLynxEventValue(event, 'touches', event.type === 'touchend' || event.type === 'touchcancel' ? [] : event.changedTouches);
+    }
+    setLynxEventValue(event, 'x', x);
+    setLynxEventValue(event, 'y', y);
+    setLynxEventValue(event, 'offsetX', (_d = event.offsetX) !== null && _d !== void 0 ? _d : x);
+    setLynxEventValue(event, 'offsetY', (_e = event.offsetY) !== null && _e !== void 0 ? _e : y);
+    setLynxEventValue(event, 'clientX', (_f = event.clientX) !== null && _f !== void 0 ? _f : x);
+    setLynxEventValue(event, 'clientY', (_g = event.clientY) !== null && _g !== void 0 ? _g : y);
+    setLynxEventValue(event, 'pageX', (_h = event.pageX) !== null && _h !== void 0 ? _h : x);
+    setLynxEventValue(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 LynxWindowHandlerContribution extends BaseWindowHandlerContribution {
+    get container() {
+        return null;
+    }
+    constructor(global = application.global) {
+        super();
+        this.global = global;
+        this.type = 'lynx';
+        this.eventManager = new MiniAppEventManager();
+    }
+    getTitle() {
+        return this.canvas.id && this.canvas.id.toString();
+    }
+    getWH() {
+        return {
+            width: this.canvas.width / (this.canvas.dpr || 1),
+            height: this.canvas.height / (this.canvas.dpr || 1)
+        };
+    }
+    getXY() {
+        return { x: 0, y: 0 };
+    }
+    createWindow(params) {
+        if (!params.canvas) {
+            this.createWindowByConfig(params);
+        }
+        else {
+            this.createWindowByCanvas(params);
+        }
+    }
+    createWindowByConfig(params) {
+        const nativeCanvas = this.global.createCanvas({
+            width: params.width,
+            height: params.height
+        });
+        const options = {
+            width: params.width,
+            height: params.height,
+            dpr: params.dpr,
+            nativeCanvas,
+            id: Generator.GenAutoIncrementId().toString(),
+            canvasControled: false
+        };
+        this.canvas = new LynxCanvas(options);
+    }
+    createWindowByCanvas(params) {
+        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');
+            }
+        }
+        else {
+            canvas = params.canvas;
+        }
+        let width = params.width;
+        let height = params.height;
+        if (width == null || height == null || !params.canvasControled) {
+            const data = canvas.getBoundingClientRect();
+            width = data.width;
+            height = data.height;
+        }
+        let dpr = params.dpr;
+        if (dpr == null) {
+            dpr = canvas.width / width;
+        }
+        this.canvas = new LynxCanvas({
+            width: width,
+            height: height,
+            dpr: dpr,
+            nativeCanvas: canvas,
+            canvasControled: params.canvasControled
+        });
+    }
+    releaseWindow() {
+        return;
+    }
+    resizeWindow(width, height) {
+        this.canvas.resize(width, height);
+    }
+    setDpr(dpr) {
+        this.canvas.dpr = dpr;
+    }
+    getContext() {
+        return this.canvas.getContext();
+    }
+    getNativeHandler() {
+        return this.canvas;
+    }
+    getDpr() {
+        return this.canvas.dpr;
+    }
+    addEventListener(type, listener) {
+        this.eventManager.addEventListener(type, listener);
+    }
+    removeEventListener(type, listener) {
+        this.eventManager.removeEventListener(type, listener);
+    }
+    dispatchEvent(event) {
+        var _a;
+        const { type } = event;
+        if (!this.eventManager.cache[type]) {
+            return false;
+        }
+        const nativeCanvas = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.nativeCanvas;
+        setMiniAppEventTarget(event, 'target', nativeCanvas);
+        setMiniAppEventTarget(event, 'currentTarget', nativeCanvas);
+        normalizeLynxTouchEventPoint(event);
+        event.preventDefault = () => {
+            return;
+        };
+        event.stopPropagation = () => {
+            return;
+        };
+        if (this.eventManager.cache[type].listener) {
+            this.eventManager.cache[type].listener.forEach((f) => {
+                f(event);
+            });
+        }
+        return true;
+    }
+    getStyle() {
+        return {};
+    }
+    setStyle(style) {
+        return;
+    }
+    getBoundingClientRect() {
+        const wh = this.getWH();
+        return {
+            x: 0,
+            y: 0,
+            width: wh.width,
+            height: wh.height,
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0
+        };
+    }
+    clearViewBox(color) {
+        const vb = this.viewBox;
+        const context = this.getContext();
+        const dpr = this.getDpr();
+        context.nativeContext.save();
+        context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0);
+        context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
+        if (color) {
+            context.fillStyle = color;
+            context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);
+        }
+        context.nativeContext.restore();
+    }
+}
+LynxWindowHandlerContribution.env = 'lynx';
+function bindLynxWindowContribution(container) {
+    var _a, _b;
+    if (!((_a = container.isBound) === null || _a === void 0 ? void 0 : _a.call(container, LynxWindowHandlerContribution))) {
+        container.bind(LynxWindowHandlerContribution).toSelf();
+    }
+    if (!((_b = container.getNamed) === null || _b === void 0 ? void 0 : _b.call(container, WindowHandlerContribution$1, LynxWindowHandlerContribution.env))) {
+        container
+            .bind(WindowHandlerContribution$1)
+            .toService(LynxWindowHandlerContribution)
+            .whenTargetNamed(LynxWindowHandlerContribution.env);
+    }
+}
+
+const LYNX_CANVAS_BRIDGE_ERROR = 'Lynx canvas bridge is unavailable. VRender Lynx env requires envParams.canvasFactory ' +
+    'or a Lynx runtime that exposes createCanvasNG/createCanvas/createOffscreenCanvas/krypton canvas APIs.';
+const LYNX_CANVAS_SIZE_ERROR = 'Lynx canvas size is unavailable. Pass stage width/height when creating a Lynx stage canvas.';
+function isValidCoordinate(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function pickCoordinate(...values) {
+    for (let i = 0; i < values.length; i++) {
+        if (isValidCoordinate(values[i])) {
+            return values[i];
+        }
+    }
+    return undefined;
+}
+function getPrimaryTouch(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 getLynxEventPoint(event) {
+    const touch = getPrimaryTouch(event);
+    const x = pickCoordinate(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(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 getGlobalLynxRuntime() {
+    try {
+        return typeof lynx !== 'undefined' ? lynx : undefined;
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+function getGlobalSystemPixelRatio() {
+    try {
+        return typeof SystemInfo !== 'undefined' ? SystemInfo.pixelRatio : undefined;
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+function getLynxRuntime(params) {
+    var _a, _b;
+    return (_b = (_a = params === null || params === void 0 ? void 0 : params.lynx) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.runtime) !== null && _b !== void 0 ? _b : getGlobalLynxRuntime();
+}
+const requestAnimationFrameBasedSTO = (callback) => rafBasedSto.call(callback);
+const cancelAnimationFrameBasedSTO = (handle) => rafBasedSto.clear(handle);
+function getLynxPixelRatio(params, runtime) {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_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 : getGlobalSystemPixelRatio()) !== null && _e !== void 0 ? _e : 1;
+}
+function attachLynxCanvasToView(canvas, id) {
+    var _a;
+    (_a = canvas === null || canvas === void 0 ? void 0 : canvas.attachToCanvasView) === null || _a === void 0 ? void 0 : _a.call(canvas, id);
+    return canvas;
+}
+function createBoundLynxCanvas(id, runtime) {
+    var _a, _b, _c;
+    if (typeof ((_a = runtime === null || runtime === void 0 ? void 0 : runtime.krypton) === null || _a === void 0 ? void 0 : _a.createCanvas) === 'function') {
+        const canvas = runtime.krypton.createCanvas(id);
+        if (canvas) {
+            return canvas;
         }
-      }
-      old_code = in_code;
-    } // Pop a pixel off the pixel stack.
-
-    top--;
-    dstPixels[pi++] = pixelStack[top];
-    i++;
-  }
-  for (i = pi; i < npix; i++) {
-    dstPixels[i] = 0; // clear missing pixels
-  }
-
-  return dstPixels;
-};
-lzw$1.lzw = lzw;
-
-Object.defineProperty(lib$1, "__esModule", {
-  value: true
-});
-var decompressFrames_1 = lib$1.decompressFrames = lib$1.decompressFrame = parseGIF_1 = lib$1.parseGIF = void 0;
-var _gif = _interopRequireDefault(gif);
-var _jsBinarySchemaParser = lib;
-var _uint = uint8;
-var _deinterlace = deinterlace$1;
-var _lzw = lzw$1;
-function _interopRequireDefault(obj) {
-  return obj && obj.__esModule ? obj : {
-    "default": obj
-  };
+    }
+    if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvasNG) === 'function') {
+        const canvas = runtime.createCanvasNG(id);
+        if (canvas) {
+            return attachLynxCanvasToView(canvas, id);
+        }
+    }
+    if (typeof ((_b = runtime === null || runtime === void 0 ? void 0 : runtime.krypton) === null || _b === void 0 ? void 0 : _b.createCanvasNG) === 'function') {
+        const canvas = runtime.krypton.createCanvasNG();
+        if (canvas) {
+            return attachLynxCanvasToView(canvas, id);
+        }
+    }
+    if (typeof ((_c = runtime === null || runtime === void 0 ? void 0 : runtime.krypton) === null || _c === void 0 ? void 0 : _c.CanvasElement) === 'function') {
+        return new runtime.krypton.CanvasElement(id);
+    }
+    if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createCanvas) === 'function') {
+        const canvas = runtime.createCanvas(id);
+        if (canvas) {
+            return canvas;
+        }
+    }
+    return null;
 }
-var parseGIF = function parseGIF(arrayBuffer) {
-  var byteData = new Uint8Array(arrayBuffer);
-  return (0, _jsBinarySchemaParser.parse)((0, _uint.buildStream)(byteData), _gif["default"]);
-};
-var parseGIF_1 = lib$1.parseGIF = parseGIF;
-var generatePatch = function generatePatch(image) {
-  var totalPixels = image.pixels.length;
-  var patchData = new Uint8ClampedArray(totalPixels * 4);
-  for (var i = 0; i < totalPixels; i++) {
-    var pos = i * 4;
-    var colorIndex = image.pixels[i];
-    var color = image.colorTable[colorIndex] || [0, 0, 0];
-    patchData[pos] = color[0];
-    patchData[pos + 1] = color[1];
-    patchData[pos + 2] = color[2];
-    patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;
-  }
-  return patchData;
-};
-var decompressFrame = function decompressFrame(frame, gct, buildImagePatch) {
-  if (!frame.image) {
-    console.warn('gif frame does not have associated image.');
-    return;
-  }
-  var image = frame.image; // get the number of pixels
-
-  var totalPixels = image.descriptor.width * image.descriptor.height; // do lzw decompression
-
-  var pixels = (0, _lzw.lzw)(image.data.minCodeSize, image.data.blocks, totalPixels); // deal with interlacing if necessary
-
-  if (image.descriptor.lct.interlaced) {
-    pixels = (0, _deinterlace.deinterlace)(pixels, image.descriptor.width);
-  }
-  var resultImage = {
-    pixels: pixels,
-    dims: {
-      top: frame.image.descriptor.top,
-      left: frame.image.descriptor.left,
-      width: frame.image.descriptor.width,
-      height: frame.image.descriptor.height
+function getCanvasSize(width, height) {
+    if (!isValidCoordinate(width) || !isValidCoordinate(height)) {
+        throw new Error(LYNX_CANVAS_SIZE_ERROR);
     }
-  }; // color table
-
-  if (image.descriptor.lct && image.descriptor.lct.exists) {
-    resultImage.colorTable = image.lct;
-  } else {
-    resultImage.colorTable = gct;
-  } // add per frame relevant gce information
-
-  if (frame.gce) {
-    resultImage.delay = (frame.gce.delay || 10) * 10; // convert to ms
-
-    resultImage.disposalType = frame.gce.extras.disposal; // transparency
-
-    if (frame.gce.extras.transparentColorGiven) {
-      resultImage.transparentIndex = frame.gce.transparentColorIndex;
+    return { width, height };
+}
+function wrapLynxNativeCanvas(nativeCanvas, id, width, height, dpr) {
+    nativeCanvas.width = width * dpr;
+    nativeCanvas.height = height * dpr;
+    const ctx = nativeCanvas.getContext('2d');
+    return new CanvasWrapEnableWH(nativeCanvas, ctx, dpr, width, height, id);
+}
+function createLynxNativeCanvas(id, width, height, dpr, offscreen, params, runtime) {
+    if (params.canvasFactory) {
+        return params.canvasFactory({
+            id,
+            width,
+            height,
+            dpr,
+            offscreen
+        });
     }
-  } // create canvas usable imagedata if desired
-
-  if (buildImagePatch) {
-    resultImage.patch = generatePatch(resultImage);
-  }
-  return resultImage;
-};
-lib$1.decompressFrame = decompressFrame;
-var decompressFrames = function decompressFrames(parsedGif, buildImagePatches) {
-  return parsedGif.frames.filter(function (f) {
-    return f.image;
-  }).map(function (f) {
-    return decompressFrame(f, parsedGif.gct, buildImagePatches);
-  });
-};
-decompressFrames_1 = lib$1.decompressFrames = decompressFrames;
-
-class GifImage extends Image$2 {
-    constructor(params) {
-        super(params);
-        this.type = 'gif-image';
-        this.numberType = GIFIMAGE_NUMBER_TYPE;
-        this.loadGif();
+    if (offscreen) {
+        if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createOffscreenCanvas) === 'function') {
+            return runtime.createOffscreenCanvas();
+        }
     }
-    loadGif() {
-        if (isString(this.attribute.gifImage)) {
-            ResourceLoader$1.GetFile(this.attribute.gifImage, 'arrayBuffer')
-                .then((res) => {
-                const gif = parseGIF_1(res);
-                const frames = decompressFrames_1(gif, true);
-                this.renderGIF(frames);
-            })
-                .catch(e => {
-                console.error('Gif load error: ', e);
-            });
+    else {
+        const canvas = createBoundLynxCanvas(id, runtime);
+        if (canvas) {
+            return canvas;
         }
-        else if (this.attribute.gifImage instanceof ArrayBuffer) {
-            const gif = parseGIF_1(this.attribute.gifImage);
-            const frames = decompressFrames_1(gif, true);
-            this.renderGIF(frames);
+    }
+    throw new Error(LYNX_CANVAS_BRIDGE_ERROR);
+}
+function createImageElement(src, isSvg = false, runtime = getGlobalLynxRuntime()) {
+    if (isSvg) {
+        return Promise.reject();
+    }
+    if (typeof (runtime === null || runtime === void 0 ? void 0 : runtime.createImage) !== 'function') {
+        return Promise.reject(new Error('Lynx image bridge is unavailable.'));
+    }
+    const img = runtime.createImage(src);
+    const promise = new Promise((resolve, reject) => {
+        img.onload = () => {
+            resolve(img);
+        };
+        img.onerror = () => {
+            reject(new Error('加载失败'));
+        };
+    });
+    return promise;
+}
+class LynxEnvContribution extends BaseEnvContribution {
+    constructor() {
+        super();
+        this.type = 'lynx';
+        this.supportEvent = true;
+        this.canvasMap = new Map();
+        this.freeCanvasList = [];
+        this.canvasIdx = 0;
+        this.requestAnimationFrame = requestAnimationFrameBasedSTO;
+        this.cancelAnimationFrame = cancelAnimationFrameBasedSTO;
+        this.supportsTouchEvents = true;
+        try {
+            this.supportsPointerEvents = !!globalThis.PointerEvent;
+            this.supportsMouseEvents = !!globalThis.MouseEvent;
+        }
+        catch (err) {
+            this.supportsPointerEvents = false;
+            this.supportsMouseEvents = false;
+        }
+        this.applyStyles = true;
+    }
+    configure(service, params = {}) {
+        var _a, _b;
+        if (service.env === this.type) {
+            service.setActiveEnvContribution(this);
+            this.lynxEnvParams = params;
+            this.lynxRuntime = getLynxRuntime(params);
+            if (typeof ((_a = this.lynxRuntime) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame) === 'function' &&
+                typeof ((_b = this.lynxRuntime) === null || _b === void 0 ? void 0 : _b.cancelAnimationFrame) === 'function') {
+                this.requestAnimationFrame = this.lynxRuntime.requestAnimationFrame.bind(this.lynxRuntime);
+                this.cancelAnimationFrame = this.lynxRuntime.cancelAnimationFrame.bind(this.lynxRuntime);
+            }
+            else {
+                this.requestAnimationFrame = requestAnimationFrameBasedSTO;
+                this.cancelAnimationFrame = cancelAnimationFrameBasedSTO;
+            }
         }
     }
-    renderGIF(frames) {
-        this.loadedFrames = frames;
-        this.frameIndex = 0;
-        if (!this.tempCanvas) {
-            this.tempCanvas = application.global.createCanvas({});
-            this.tempCtx = this.tempCanvas.getContext('2d');
-        }
-        if (!this.gifCanvas) {
-            this.gifCanvas = application.global.createCanvas({});
-            this.gifCtx = this.gifCanvas.getContext('2d');
+    getDynamicCanvasCount() {
+        return this.freeCanvasList.length;
+    }
+    getStaticCanvasCount() {
+        return 9999;
+    }
+    loadImage(url) {
+        const imagePromise = createImageElement(url, false, this.lynxRuntime);
+        return imagePromise
+            .then((img) => {
+            return {
+                data: img,
+                loadState: 'success'
+            };
+        })
+            .catch(() => {
+            return {
+                data: null,
+                loadState: 'fail'
+            };
+        });
+    }
+    loadSvg(url) {
+        return Promise.resolve({
+            data: null,
+            loadState: 'fail'
+        });
+    }
+    createCanvas(params) {
+        var _a, _b, _c, _d;
+        if (params.id != null) {
+            const id = String(params.id);
+            const existing = this.canvasMap.get(id);
+            if (existing) {
+                return existing;
+            }
+            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(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);
+            return canvas;
         }
-        this.gifCanvas.width = frames[0].dims.width;
-        this.gifCanvas.height = frames[0].dims.height;
-        this.playing = true;
-        this.lastTime = new Date().getTime();
-        const animation = this.animate();
-        if (this.attribute.timeline) {
-            animation.setTimeline(this.attribute.timeline);
+        const result = this.freeCanvasList[this.canvasIdx] || this.freeCanvasList[this.freeCanvasList.length - 1];
+        this.canvasIdx++;
+        if (result) {
+            return result;
         }
-        animation.to({}, 1000, 'linear').loop(Infinity);
+        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(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);
+        this.canvasMap.set(id, canvas);
+        this.freeCanvasList.push(canvas);
+        return canvas;
     }
-    renderFrame(context, x, y) {
-        const frame = this.loadedFrames[this.frameIndex || 0];
-        if (frame.disposalType === 2) {
-            this.gifCtx.clearRect(0, 0, this.gifCanvas.width, this.gifCanvas.height);
-        }
-        this.drawPatch(frame);
-        this.manipulate(context, x, y);
-        const diff = new Date().getTime() - this.lastTime;
-        if (frame.delay < diff) {
-            this.frameIndex++;
-            this.lastTime = new Date().getTime();
-        }
-        if (this.frameIndex >= this.loadedFrames.length) {
-            this.frameIndex = 0;
-        }
+    createOffscreenCanvas(params) {
+        return;
     }
-    drawPatch(frame) {
-        const dims = frame.dims;
-        if (!this.frameImageData ||
-            dims.width !== this.frameImageData.width ||
-            dims.height !== this.frameImageData.height) {
-            this.tempCanvas.width = dims.width;
-            this.tempCanvas.height = dims.height;
-            this.frameImageData = this.tempCtx.createImageData(dims.width, dims.height);
-        }
-        this.frameImageData.data.set(frame.patch);
-        this.tempCtx.putImageData(this.frameImageData, 0, 0);
-        this.gifCtx.drawImage(this.tempCanvas, dims.left, dims.top);
+    releaseCanvas(canvas) {
+        return;
     }
-    manipulate(context, x, y) {
-        context.drawImage(this.gifCanvas, 0, 0, this.gifCanvas.width, this.gifCanvas.height, x, y, this.attribute.width, this.attribute.height);
+    getDevicePixelRatio() {
+        return getLynxPixelRatio(undefined, this.lynxRuntime);
     }
-    setAttribute(key, value, forceUpdateTag, context) {
-        super.setAttribute(key, value, forceUpdateTag, context);
-        if (key === 'gifImage') {
-            this.loadGif();
-        }
+    getRequestAnimationFrame() {
+        return this.requestAnimationFrame;
     }
-    setAttributes(params, forceUpdateTag, context) {
-        super.setAttributes(params, forceUpdateTag, context);
-        if (params.gifImage) {
-            this.loadGif();
-        }
+    getCancelAnimationFrame() {
+        return this.cancelAnimationFrame;
     }
-}
-function createGifImage(attributes) {
-    return new GifImage(attributes);
-}
-
-class DefaultCanvasGifImageRender extends DefaultCanvasImageRender$1 {
-    constructor(imageRenderContribitions) {
-        super(imageRenderContribitions);
-        this.imageRenderContribitions = imageRenderContribitions;
-        this.numberType = GIFIMAGE_NUMBER_TYPE;
-        this._renderContribitions = undefined;
-        this.builtinContributions = [defaultGifImageRenderContribution];
-        this.init(imageRenderContribitions);
+    mapToCanvasPoint(event) {
+        var _a;
+        return (_a = getLynxEventPoint(event)) !== null && _a !== void 0 ? _a : event;
     }
-    drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const imageAttribute = getTheme$1(image).image;
-        const { x: originX = imageAttribute.x, y: originY = imageAttribute.y, fillStrokeOrder = imageAttribute.fillStrokeOrder } = image.attribute;
-        const data = this.valid(image, imageAttribute, fillCb);
-        if (!data) {
-            return;
-        }
-        const { fVisible, sVisible, doFill, doStroke } = data;
-        const _runFill = () => {
-            if (doFill) {
-                if (fillCb) {
-                    fillCb(context, image.attribute, imageAttribute);
-                }
-            }
-        };
-        const _runStroke = () => {
-            if (doStroke) {
-                if (strokeCb) {
-                    strokeCb(context, image.attribute, imageAttribute);
-                }
-                else if (sVisible) {
-                    context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute);
-                    context.stroke();
-                }
-            }
-        };
-        if (!fillStrokeOrder) {
-            {
-                context.save();
-                context.clip();
-            }
-            this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
-            _runFill();
-            {
-                context.restore();
-            }
-            _runStroke();
-        }
-        else {
-            _runStroke();
-            {
-                context.save();
-                context.clip();
-            }
-            this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
-            _runFill();
-            {
-                context.restore();
-            }
-        }
-        this.afterRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
+    addEventListener(type, listener, options) {
+        return null;
     }
-    draw(image, renderService, drawContext) {
-        const { context } = renderService.drawParams;
-        if (!context) {
-            return;
-        }
-        const imageAttribute = getTheme$1(image).image;
-        this._draw(image, imageAttribute, false, drawContext);
+    removeEventListener(type, listener, options) {
+        return null;
     }
-}
-class DefaultGifImageRenderContribution extends DefaultRectRenderContribution$1 {
-    constructor() {
-        super(...arguments);
-        this.time = BaseRenderContributionTime$1.afterFillStroke;
-        this.useStyle = true;
-        this.order = 0;
+    dispatchEvent(event) {
+        return null;
     }
-    drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-        if (image.renderFrame && image.playing) {
-            image.renderFrame(context, x, y);
-        }
+    getElementById(str) {
+        return this.canvasMap.get(str);
     }
-}
-const defaultGifImageRenderContribution = new DefaultGifImageRenderContribution();
-
-let loadGifImageModule = false;
-function bindGifImageRenderContribution(container) {
-    if (loadGifImageModule) {
+    getRootElement() {
+        return null;
+    }
+    getDocument() {
+        return null;
+    }
+    release(...params) {
         return;
     }
-    loadGifImageModule = true;
-    container
-        .bind(DefaultCanvasGifImageRender)
-        .toDynamicValue(() => new DefaultCanvasGifImageRender(createContributionProvider$1(ImageRenderContribution$1, container)))
-        .inSingletonScope();
-    container.bind(GraphicRender).toService(DefaultCanvasGifImageRender);
 }
 
-function registerGifGraphic() {
-    graphicCreator$1.RegisterGraphicCreator('gif', createGifImage);
+function bindLynxEnv(container) {
+    var _a, _b;
+    if (!((_b = (_a = container).isBound) === null || _b === void 0 ? void 0 : _b.call(_a, LynxEnvContribution))) {
+        container.bind(LynxEnvContribution).toSelf().inSingletonScope();
+        container.bind(EnvContribution$1).toService(LynxEnvContribution);
+    }
 }
-function _registerGifImage() {
-    if (_registerGifImage.__loaded) {
-        return;
+function loadLynxEnv(container = getLegacyBindingContext$1(), loadPicker = true) {
+    if (!loadLynxEnv.__loaded) {
+        loadLynxEnv.__loaded = true;
+        bindLynxEnv(container);
+        bindLynxCanvasModules(container);
+        bindLynxWindowContribution(container);
+        loadPicker && loadMathPicker(container);
     }
-    _registerGifImage.__loaded = true;
-    const legacyContext = getLegacyBindingContext$1();
-    registerGifGraphic();
-    bindGifImageRenderContribution(legacyContext);
-    bindGifImageCanvasPickerContribution(legacyContext);
 }
-_registerGifImage.__loaded = false;
-const registerGifImage = _registerGifImage;
+loadLynxEnv.__loaded = false;
+function initLynxEnv() {
+    loadLynxEnv();
+}
+
+function createForcedEnvParams$1(envParams) {
+    if (envParams != null && (typeof envParams === 'object' || typeof envParams === 'function')) {
+        const forcedEnvParams = Object.create(envParams);
+        forcedEnvParams.force = true;
+        return forcedEnvParams;
+    }
+    return { force: true };
+}
+function installLynxEnvToApp(app, envParams) {
+    configureRuntimeApplicationForApp(app);
+    const bindingContext = getRuntimeInstallerBindingContext();
+    bindLynxEnv(bindingContext);
+    bindLynxCanvasModules(bindingContext);
+    bindLynxWindowContribution(bindingContext);
+    refreshRuntimeInstallerContributions();
+    getRuntimeInstallerGlobal().setEnv('lynx', createForcedEnvParams$1(envParams));
+}
 
 const defaultGraphicInstallSteps = [
     { register: registerArcGraphic, bindModule: arcModule },
@@ -25632,13 +25650,6 @@ function installWxEnvToApp(app, envParams) {
         bindWindowContribution: bindWxWindowContribution
     }, envParams);
 }
-function installLynxEnvToApp(app, envParams) {
-    installRuntimeEnvToApp(app, 'lynx', {
-        bindEnv: bindLynxEnv,
-        bindCanvasModules: bindLynxCanvasModules,
-        bindWindowContribution: bindLynxWindowContribution
-    }, envParams);
-}
 function installHarmonyEnvToApp(app, envParams) {
     installRuntimeEnvToApp(app, 'harmony', {
         bindEnv: bindHarmonyEnv,