@visactor/vrender-core 0.23.0-alpha.2 → 1.0.0-alpha.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isPointInLine, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, has, isUndefined, Color, isNumber, cos, sin, pointAt, sqrt, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, acos, DEFAULT_COLORS, LRU, lowerCamelCaseToMiddle, isValid, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, getAngleByPoint, getIntersectPoint, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isPointInLine, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, has, isUndefined, cos, sin, pointAt, isNumber, sqrt, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, acos, Color, DEFAULT_COLORS, LRU, lowerCamelCaseToMiddle, isValid, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isEqual, getAngleByPoint, getIntersectPoint, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
 
 class Generator {
     static GenAutoIncrementId() {
@@ -852,6 +852,41 @@ const EnvContribution = Symbol.for('EnvContribution');
 const VGlobal = Symbol.for('VGlobal');
 const DEFAULT_TEXT_FONT_FAMILY = 'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol';
 
+class PerformanceRAF {
+    constructor() {
+        this.nextAnimationFrameCbs = [];
+        this._rafHandle = null;
+        this.runAnimationFrame = (time) => {
+            this._rafHandle = null;
+            const cbs = this.nextAnimationFrameCbs;
+            this.nextAnimationFrameCbs = [];
+            for (let i = 0; i < cbs.length; i++) {
+                if (cbs[i]) {
+                    cbs[i](time);
+                }
+            }
+        };
+        this.tryRunAnimationFrameNextFrame = () => {
+            if (this._rafHandle !== null || this.nextAnimationFrameCbs.length === 0) {
+                return;
+            }
+            this._rafHandle = vglobal.getRequestAnimationFrame()(this.runAnimationFrame);
+        };
+    }
+    addAnimationFrameCb(callback) {
+        this.nextAnimationFrameCbs.push(callback);
+        this.tryRunAnimationFrameNextFrame();
+        return this.nextAnimationFrameCbs.length - 1;
+    }
+    removeAnimationFrameCb(index) {
+        if (index >= 0 && index < this.nextAnimationFrameCbs.length) {
+            this.nextAnimationFrameCbs[index] = null;
+            return true;
+        }
+        return false;
+    }
+}
+
 const defaultEnv = 'browser';
 let DefaultGlobal = class DefaultGlobal {
     get env() {
@@ -932,6 +967,7 @@ let DefaultGlobal = class DefaultGlobal {
     constructor(contributions) {
         this.contributions = contributions;
         this._isImageAnonymous = true;
+        this._performanceRAFList = [];
         this.id = Generator.GenAutoIncrementId();
         this.hooks = {
             onSetEnv: new SyncHook(['lastEnv', 'env', 'global'])
@@ -1031,6 +1067,30 @@ let DefaultGlobal = class DefaultGlobal {
         }
         return this.envContribution.getRequestAnimationFrame();
     }
+    getSpecifiedRequestAnimationFrame(id) {
+        if (!this._env) {
+            this.setEnv(defaultEnv);
+        }
+        if (!this._performanceRAFList[id]) {
+            this._performanceRAFList[id] = new PerformanceRAF();
+        }
+        const performanceRAF = this._performanceRAFList[id];
+        return (callback) => {
+            return performanceRAF.addAnimationFrameCb(callback);
+        };
+    }
+    getSpecifiedCancelAnimationFrame(id) {
+        if (!this._env) {
+            this.setEnv(defaultEnv);
+        }
+        if (!this._performanceRAFList[id]) {
+            return () => false;
+        }
+        const performanceRAF = this._performanceRAFList[id];
+        return (handle) => {
+            return performanceRAF.removeAnimationFrameCb(handle);
+        };
+    }
     getCancelAnimationFrame() {
         if (!this._env) {
             this.setEnv(defaultEnv);
@@ -1220,6 +1280,34 @@ const strCommandMap = [
     'rect'
 ];
 
+var AnimateMode;
+(function (AnimateMode) {
+    AnimateMode[AnimateMode["NORMAL"] = 0] = "NORMAL";
+    AnimateMode[AnimateMode["SET_ATTR_IMMEDIATELY"] = 1] = "SET_ATTR_IMMEDIATELY";
+})(AnimateMode || (AnimateMode = {}));
+
+var STATUS$1;
+(function (STATUS) {
+    STATUS[STATUS["INITIAL"] = 0] = "INITIAL";
+    STATUS[STATUS["RUNNING"] = 1] = "RUNNING";
+    STATUS[STATUS["PAUSE"] = 2] = "PAUSE";
+})(STATUS$1 || (STATUS$1 = {}));
+
+var AnimateStepType;
+(function (AnimateStepType) {
+    AnimateStepType["wait"] = "wait";
+    AnimateStepType["from"] = "from";
+    AnimateStepType["to"] = "to";
+    AnimateStepType["customAnimate"] = "customAnimate";
+})(AnimateStepType || (AnimateStepType = {}));
+var AnimateStatus;
+(function (AnimateStatus) {
+    AnimateStatus[AnimateStatus["INITIAL"] = 0] = "INITIAL";
+    AnimateStatus[AnimateStatus["RUNNING"] = 1] = "RUNNING";
+    AnimateStatus[AnimateStatus["PAUSED"] = 2] = "PAUSED";
+    AnimateStatus[AnimateStatus["END"] = 3] = "END";
+})(AnimateStatus || (AnimateStatus = {}));
+
 const circleThreshold = tau - 1e-8;
 class BoundsContext {
     constructor(bounds) {
@@ -1481,25 +1569,6 @@ var AttributeUpdateType;
     AttributeUpdateType[AttributeUpdateType["ROTATE"] = 24] = "ROTATE";
     AttributeUpdateType[AttributeUpdateType["ROTATE_TO"] = 25] = "ROTATE_TO";
 })(AttributeUpdateType || (AttributeUpdateType = {}));
-var AnimateStatus;
-(function (AnimateStatus) {
-    AnimateStatus[AnimateStatus["INITIAL"] = 0] = "INITIAL";
-    AnimateStatus[AnimateStatus["RUNNING"] = 1] = "RUNNING";
-    AnimateStatus[AnimateStatus["PAUSED"] = 2] = "PAUSED";
-    AnimateStatus[AnimateStatus["END"] = 3] = "END";
-})(AnimateStatus || (AnimateStatus = {}));
-var AnimateMode;
-(function (AnimateMode) {
-    AnimateMode[AnimateMode["NORMAL"] = 0] = "NORMAL";
-    AnimateMode[AnimateMode["SET_ATTR_IMMEDIATELY"] = 1] = "SET_ATTR_IMMEDIATELY";
-})(AnimateMode || (AnimateMode = {}));
-var AnimateStepType;
-(function (AnimateStepType) {
-    AnimateStepType["wait"] = "wait";
-    AnimateStepType["from"] = "from";
-    AnimateStepType["to"] = "to";
-    AnimateStepType["customAnimate"] = "customAnimate";
-})(AnimateStepType || (AnimateStepType = {}));
 var Direction;
 (function (Direction) {
     Direction[Direction["ROW"] = 1] = "ROW";
@@ -3873,6 +3942,9 @@ function applyStrokeStyle(ctx, character) {
     setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+    if (desc.length <= 1) {
+        return 0;
+    }
     if (!width || width <= 0) {
         return 0;
     }
@@ -3953,6 +4025,15 @@ function testLetter2(string, index) {
     return i + 1;
 }
 function measureTextCanvas(text, character, mode = 'actual') {
+    var _a;
+    if (text === '') {
+        return {
+            ascent: 0,
+            height: 0,
+            descent: 0,
+            width: 0
+        };
+    }
     const textMeasure = application.graphicUtil.textMeasure;
     const measurement = textMeasure.measureText(text, character);
     const result = {
@@ -3975,6 +4056,8 @@ function measureTextCanvas(text, character, mode = 'actual') {
         result.ascent = Math.floor(ascent);
         result.descent = result.height - result.ascent;
     }
+    const space = (_a = character.space) !== null && _a !== void 0 ? _a : 0;
+    result.width += space;
     return result;
 }
 
@@ -6397,7 +6480,7 @@ class FederatedEvent {
     }
     _composedDetailPath(params) {
         if (params && params.graphic) {
-            const g = this.pickParams.graphic;
+            const g = params.graphic;
             if (g.stage) {
                 const path = g.stage.eventSystem.manager.propagationPath(g);
                 this.detailPath.push(path);
@@ -7392,32 +7475,22 @@ class EventSystem {
         this.eventsAdded = true;
     }
     removeEvents() {
+        var _a;
         if (!this.eventsAdded || !this.domElement) {
             return;
         }
         const { globalObj, domElement } = this;
+        const globalDocument = (_a = globalObj.getDocument()) !== null && _a !== void 0 ? _a : domElement;
         if (this.supportsPointerEvents) {
-            if (globalObj.getDocument()) {
-                globalObj.getDocument().removeEventListener('pointermove', this.onPointerMove, true);
-                globalObj.getDocument().removeEventListener('pointerup', this.onPointerUp, true);
-            }
-            else {
-                domElement.removeEventListener('pointermove', this.onPointerMove, true);
-                domElement.removeEventListener('pointerup', this.onPointerUp, true);
-            }
+            globalDocument.removeEventListener('pointermove', this.onPointerMove, true);
+            globalDocument.removeEventListener('pointerup', this.onPointerUp, true);
             domElement.removeEventListener('pointerdown', this.onPointerDown, true);
             domElement.removeEventListener('pointerleave', this.onPointerOverOut, true);
             domElement.removeEventListener('pointerover', this.onPointerOverOut, true);
         }
         else {
-            if (globalObj.getDocument()) {
-                globalObj.getDocument().removeEventListener('mousemove', this.onPointerMove, true);
-                globalObj.getDocument().removeEventListener('mouseup', this.onPointerUp, true);
-            }
-            else {
-                domElement.removeEventListener('mousemove', this.onPointerMove, true);
-                domElement.removeEventListener('mouseup', this.onPointerUp, true);
-            }
+            globalDocument.removeEventListener('mousemove', this.onPointerMove, true);
+            globalDocument.removeEventListener('mouseup', this.onPointerUp, true);
             domElement.removeEventListener('mousedown', this.onPointerDown, true);
             domElement.removeEventListener('mouseout', this.onPointerOverOut, true);
             domElement.removeEventListener('mouseover', this.onPointerOverOut, true);
@@ -7663,325 +7736,97 @@ class EventSystem {
     }
 }
 
-function colorEqual(color1, color2) {
-    const c1 = Color.parseColorString(color1);
-    const c2 = Color.parseColorString(color2);
-    return c1 && c2 ? c1.r === c2.r && c1.g === c2.g && c1.b === c2.b && c1.opacity === c2.opacity : false;
-}
-var ColorType;
-(function (ColorType) {
-    ColorType[ColorType["Color255"] = 0] = "Color255";
-    ColorType[ColorType["Color1"] = 1] = "Color1";
-})(ColorType || (ColorType = {}));
-class ColorStore {
-    static Get(str, size = ColorType.Color1, arr = [0, 0, 0, 1]) {
-        if (size === ColorType.Color1) {
-            const color = ColorStore.store1[str];
-            if (color) {
-                arr[0] = color[0];
-                arr[1] = color[1];
-                arr[2] = color[2];
-                arr[3] = color[3];
-                return arr;
+const PARALLEL_NUMBER = 10;
+class ResourceLoader {
+    static GetImage(url, mark) {
+        var _a;
+        const data = ResourceLoader.cache.get(url);
+        if (data) {
+            if (data.loadState === 'fail') {
+                application.global.getRequestAnimationFrame()(() => {
+                    mark.imageLoadFail(url);
+                });
             }
-            const c = Color.parseColorString(str);
-            if (c) {
-                const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
-                ColorStore.store1[str] = data;
-                ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity];
-                arr[0] = data[0];
-                arr[1] = data[1];
-                arr[2] = data[2];
-                arr[3] = data[3];
+            else if (data.loadState === 'init' || data.loadState === 'loading') {
+                (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.push(mark);
+            }
+            else if (mark) {
+                mark.imageLoadSuccess(url, data.data);
             }
-            return arr;
-        }
-        const color = ColorStore.store255[str];
-        if (color) {
-            arr[0] = color[0];
-            arr[1] = color[1];
-            arr[2] = color[2];
-            arr[3] = color[3];
-            return arr;
         }
-        const c = Color.parseColorString(str);
-        if (c) {
-            ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
-            ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity];
-            arr[0] = c.r;
-            arr[1] = c.g;
-            arr[2] = c.b;
-            arr[3] = c.opacity;
+        else {
+            ResourceLoader.loadImage(url, mark);
         }
-        return arr;
     }
-    static Set(str, size, arr) {
-        if (size === ColorType.Color1) {
-            if (ColorStore.store1[str]) {
-                return;
+    static GetSvg(svgStr, mark) {
+        var _a;
+        let data = ResourceLoader.cache.get(svgStr);
+        if (data) {
+            if (data.loadState === 'fail') {
+                application.global.getRequestAnimationFrame()(() => {
+                    mark.imageLoadFail(svgStr);
+                });
+            }
+            else if (data.loadState === 'init' || data.loadState === 'loading') {
+                (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.push(mark);
+            }
+            else if (mark) {
+                mark.imageLoadSuccess(svgStr, data.data);
             }
-            ColorStore.store1[str] = arr;
-            ColorStore.store255[str] = [
-                Math.floor(arr[0] * 255),
-                Math.floor(arr[1] * 255),
-                Math.floor(arr[2] * 255),
-                Math.floor(arr[3] * 255)
-            ];
         }
         else {
-            if (ColorStore.store255[str]) {
-                return;
+            data = { type: 'image', loadState: 'init' };
+            ResourceLoader.cache.set(svgStr, data);
+            data.dataPromise = application.global.loadSvg(svgStr);
+            if (!data.dataPromise) {
+                data.loadState = 'fail';
+                mark.imageLoadFail(svgStr);
+            }
+            else {
+                data.waitingMark = [mark];
+                data.dataPromise.then(res => {
+                    var _a;
+                    data.loadState = (res === null || res === void 0 ? void 0 : res.data) ? 'success' : 'fail';
+                    data.data = res === null || res === void 0 ? void 0 : res.data;
+                    (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.map((mark, index) => {
+                        if (res === null || res === void 0 ? void 0 : res.data) {
+                            data.loadState = 'success';
+                            data.data = res.data;
+                            mark.imageLoadSuccess(svgStr, res.data);
+                        }
+                        else {
+                            data.loadState = 'fail';
+                            mark.imageLoadFail(svgStr);
+                        }
+                    });
+                    data.waitingMark && (data.waitingMark = []);
+                });
             }
-            ColorStore.store255[str] = arr;
-            ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
         }
     }
-}
-ColorStore.store255 = {};
-ColorStore.store1 = {};
-
-function colorArrayToString(color, alphaChannel = false) {
-    if (Array.isArray(color) && isNumber(color[0])) {
-        return alphaChannel
-            ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})`
-            : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})`;
-    }
-    return color;
-}
-function interpolateColor(from, to, ratio, alphaChannel, cb) {
-    if ((Array.isArray(from) && !isNumber(from[0])) || (Array.isArray(to) && !isNumber(to[0]))) {
-        const out = new Array(4).fill(0).map((_, index) => {
-            return _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel);
-        });
-        return out;
-    }
-    return _interpolateColor(from, to, ratio, alphaChannel, cb);
-}
-function _interpolateColor(from, to, ratio, alphaChannel, cb) {
-    if (!(from && to)) {
-        return (from && colorArrayToString(from)) || (to && colorArrayToString(to)) || false;
-    }
-    let fromArray;
-    let toArray;
-    let fromGradient = false;
-    let toGradient = false;
-    if (Array.isArray(from)) {
-        fromArray = from;
-    }
-    else if (typeof from === 'string') {
-        fromArray = ColorStore.Get(from, ColorType.Color255);
-    }
-    else {
-        fromGradient = true;
-    }
-    if (Array.isArray(to)) {
-        toArray = to;
-    }
-    else if (typeof to === 'string') {
-        toArray = ColorStore.Get(to, ColorType.Color255);
-    }
-    else {
-        toGradient = true;
-    }
-    if (fromGradient !== toGradient) {
-        const gradient = (fromGradient ? from : to);
-        const pure = (fromGradient ? to : from);
-        const gradientFromPure = Object.assign(Object.assign({}, gradient), { stops: gradient.stops.map(v => (Object.assign(Object.assign({}, v), { color: colorArrayToString(pure) }))) });
-        return fromGradient
-            ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb)
-            : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
-    }
-    if (fromGradient) {
-        if (from.gradient === to.gradient) {
-            const fc = from;
-            const tc = to;
-            const fromStops = fc.stops;
-            const toStops = tc.stops;
-            if (fromStops.length !== toStops.length) {
-                return false;
-            }
-            if (fc.gradient === 'linear') {
-                return interpolateGradientLinearColor(fc, tc, ratio);
-            }
-            else if (fc.gradient === 'radial') {
-                return interpolateGradientRadialColor(fc, tc, ratio);
-            }
-            else if (fc.gradient === 'conical') {
-                return interpolateGradientConicalColor(fc, tc, ratio);
-            }
-        }
-        return false;
-    }
-    cb && cb(fromArray, toArray);
-    const result = interpolatePureColorArray(fromArray, toArray, ratio);
-    return colorArrayToString(result, alphaChannel);
-}
-function interpolateGradientLinearColor(fc, tc, ratio) {
-    const fStops = fc.stops;
-    const tStops = tc.stops;
-    const color = {
-        gradient: 'linear',
-        x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-        x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-        y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-        y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-        stops: new Array(fStops.length).fill(0).map((_, i) => {
-            return {
-                color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-                offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-            };
-        })
-    };
-    return color;
-}
-function interpolateGradientRadialColor(fc, tc, ratio) {
-    const fStops = fc.stops;
-    const tStops = tc.stops;
-    const color = {
-        gradient: 'radial',
-        x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-        x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-        y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-        y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-        r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
-        r1: fc.r1 + (tc.r1 - fc.r1) * ratio,
-        stops: new Array(fStops.length).fill(0).map((_, i) => {
-            return {
-                color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-                offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-            };
-        })
-    };
-    return color;
-}
-function interpolateGradientConicalColor(fc, tc, ratio) {
-    const fStops = fc.stops;
-    const tStops = tc.stops;
-    const color = {
-        gradient: 'conical',
-        startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
-        endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
-        x: fc.x + (tc.x - fc.x) * ratio,
-        y: fc.y + (tc.y - fc.y) * ratio,
-        stops: new Array(fStops.length).fill(0).map((_, i) => {
-            return {
-                color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-                offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-            };
-        })
-    };
-    return color;
-}
-function interpolatePureColorArray(from, to, ratio) {
-    return [
-        from[0] + (to[0] - from[0]) * ratio,
-        from[1] + (to[1] - from[1]) * ratio,
-        from[2] + (to[2] - from[2]) * ratio,
-        from[3] + (to[3] - from[3]) * ratio
-    ];
-}
-function interpolatePureColorArrayToStr(from, to, ratio) {
-    return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
-}
-const _fromColorRGB = [0, 0, 0, 0];
-const _toColorRGB = [0, 0, 0, 0];
-function colorStringInterpolationToStr(fromColor, toColor, ratio) {
-    ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB);
-    ColorStore.Get(toColor, ColorType.Color255, _toColorRGB);
-    return `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
-}
-
-const PARALLEL_NUMBER = 10;
-class ResourceLoader {
-    static GetImage(url, mark) {
-        var _a;
-        const data = ResourceLoader.cache.get(url);
-        if (data) {
-            if (data.loadState === 'fail') {
-                application.global.getRequestAnimationFrame()(() => {
-                    mark.imageLoadFail(url);
-                });
-            }
-            else if (data.loadState === 'init' || data.loadState === 'loading') {
-                (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.push(mark);
-            }
-            else if (mark) {
-                mark.imageLoadSuccess(url, data.data);
-            }
-        }
-        else {
-            ResourceLoader.loadImage(url, mark);
-        }
-    }
-    static GetSvg(svgStr, mark) {
-        var _a;
-        let data = ResourceLoader.cache.get(svgStr);
-        if (data) {
-            if (data.loadState === 'fail') {
-                application.global.getRequestAnimationFrame()(() => {
-                    mark.imageLoadFail(svgStr);
-                });
-            }
-            else if (data.loadState === 'init' || data.loadState === 'loading') {
-                (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.push(mark);
-            }
-            else if (mark) {
-                mark.imageLoadSuccess(svgStr, data.data);
-            }
-        }
-        else {
-            data = { type: 'image', loadState: 'init' };
-            ResourceLoader.cache.set(svgStr, data);
-            data.dataPromise = application.global.loadSvg(svgStr);
-            if (!data.dataPromise) {
-                data.loadState = 'fail';
-                mark.imageLoadFail(svgStr);
-            }
-            else {
-                data.waitingMark = [mark];
-                data.dataPromise.then(res => {
-                    var _a;
-                    data.loadState = (res === null || res === void 0 ? void 0 : res.data) ? 'success' : 'fail';
-                    data.data = res === null || res === void 0 ? void 0 : res.data;
-                    (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.map((mark, index) => {
-                        if (res === null || res === void 0 ? void 0 : res.data) {
-                            data.loadState = 'success';
-                            data.data = res.data;
-                            mark.imageLoadSuccess(svgStr, res.data);
-                        }
-                        else {
-                            data.loadState = 'fail';
-                            mark.imageLoadFail(svgStr);
-                        }
-                    });
-                    data.waitingMark && (data.waitingMark = []);
-                });
-            }
-        }
-    }
-    static GetFile(url, type) {
-        let data = ResourceLoader.cache.get(url);
-        if (data) {
-            if (data.loadState === 'fail') {
-                return Promise.reject();
-            }
-            else if (data.loadState === 'init' || data.loadState === 'loading') {
-                return data.dataPromise.then(data => data.data);
-            }
-            return Promise.resolve(data.data);
-        }
-        data = { type, loadState: 'init' };
-        ResourceLoader.cache.set(url, data);
-        if (type === 'arrayBuffer') {
-            data.dataPromise = application.global.loadArrayBuffer(url);
-        }
-        else if (type === 'blob') {
-            data.dataPromise = application.global.loadBlob(url);
-        }
-        else if (type === 'json') {
-            data.dataPromise = application.global.loadJson(url);
-        }
-        return data.dataPromise.then(data => data.data);
+    static GetFile(url, type) {
+        let data = ResourceLoader.cache.get(url);
+        if (data) {
+            if (data.loadState === 'fail') {
+                return Promise.reject();
+            }
+            else if (data.loadState === 'init' || data.loadState === 'loading') {
+                return data.dataPromise.then(data => data.data);
+            }
+            return Promise.resolve(data.data);
+        }
+        data = { type, loadState: 'init' };
+        ResourceLoader.cache.set(url, data);
+        if (type === 'arrayBuffer') {
+            data.dataPromise = application.global.loadArrayBuffer(url);
+        }
+        else if (type === 'blob') {
+            data.dataPromise = application.global.loadBlob(url);
+        }
+        else if (type === 'json') {
+            data.dataPromise = application.global.loadJson(url);
+        }
+        return data.dataPromise.then(data => data.data);
     }
     static loading() {
         setTimeout(() => {
@@ -9982,6 +9827,15 @@ class Graphic extends Node {
         }
         return picker.containsPoint(this, { x, y });
     }
+    setAttributesAndPreventAnimate(params, forceUpdateTag = false, context) {
+        this.setAttributes(params, forceUpdateTag, context);
+        this.animates &&
+            this.animates.forEach(animate => {
+                Object.keys(params).forEach(key => {
+                    animate.preventAttr(key);
+                });
+            });
+    }
     setAttributes(params, forceUpdateTag = false, context) {
         params =
             (this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context)) || params;
@@ -10301,11 +10155,11 @@ class Graphic extends Node {
                     }
                 }
             ]);
-            noAnimateAttrs && this.setAttributes(noAnimateAttrs, false, { type: AttributeUpdateType.STATE });
+            noAnimateAttrs && this.setAttributesAndPreventAnimate(noAnimateAttrs, false, { type: AttributeUpdateType.STATE });
         }
         else {
             this.stopStateAnimates();
-            this.setAttributes(attrs, false, { type: AttributeUpdateType.STATE });
+            this.setAttributesAndPreventAnimate(attrs, false, { type: AttributeUpdateType.STATE });
         }
     }
     updateNormalAttrs(stateAttrs) {
@@ -10342,18 +10196,12 @@ class Graphic extends Node {
         }
     }
     getNormalAttribute(key) {
-        let value = this.attribute[key];
+        var _a, _b;
+        const value = this.attribute[key];
         if (this.animates) {
-            this.animates.forEach(animate => {
-                if (animate.stateNames) {
-                    const endProps = animate.getEndProps();
-                    if (has(endProps, key)) {
-                        value = endProps[key];
-                    }
-                }
-            });
+            return (_a = this.finalAttribute) === null || _a === void 0 ? void 0 : _a[key];
         }
-        return value;
+        return value !== null && value !== void 0 ? value : (_b = this.finalAttribute) === null || _b === void 0 ? void 0 : _b[key];
     }
     clearStates(hasAnimation) {
         if (this.hasState() && this.normalAttrs) {
@@ -10570,135 +10418,6 @@ class Graphic extends Node {
             this.setAttributes(props, false, { type: AttributeUpdateType.ANIMATE_END });
         }
     }
-    onStep(subAnimate, animate, step, ratio, end) {
-        const nextAttributes = {};
-        if (step.customAnimate) {
-            step.customAnimate.update(end, ratio, nextAttributes);
-        }
-        else {
-            const nextProps = step.props;
-            const nextParsedProps = step.parsedProps;
-            const propKeys = step.propKeys;
-            this.stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, undefined, nextParsedProps, propKeys);
-        }
-        this.setAttributes(nextAttributes, false, {
-            type: AttributeUpdateType.ANIMATE_UPDATE,
-            animationState: {
-                ratio,
-                end,
-                step,
-                isFirstFrameOfStep: subAnimate.getLastStep() !== step
-            }
-        });
-        this.stage && this.stage.renderNextFrame();
-    }
-    stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, lastProps, nextParsedProps, propKeys) {
-        if (!propKeys) {
-            propKeys = Object.keys(nextProps);
-            step.propKeys = propKeys;
-        }
-        if (end) {
-            step.propKeys.forEach(key => {
-                if (!animate.validAttr(key)) {
-                    return;
-                }
-                nextAttributes[key] = nextProps[key];
-            });
-        }
-        else {
-            propKeys.forEach(key => {
-                var _a;
-                if (!animate.validAttr(key)) {
-                    return;
-                }
-                const nextStepVal = nextProps[key];
-                const lastStepVal = (_a = (lastProps && lastProps[key])) !== null && _a !== void 0 ? _a : subAnimate.getLastPropByName(key, step);
-                if (nextStepVal == null || lastStepVal == null || nextStepVal === lastStepVal) {
-                    nextAttributes[key] = nextStepVal;
-                    return;
-                }
-                let match;
-                match =
-                    animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes);
-                if (match) {
-                    return;
-                }
-                match = animate.customInterpolate(key, ratio, lastStepVal, nextStepVal, this, nextAttributes);
-                if (match) {
-                    return;
-                }
-                if (!this.defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio)) {
-                    this._interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes);
-                }
-            });
-        }
-        step.parsedProps = nextParsedProps;
-    }
-    defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) {
-        if (Number.isFinite(nextStepVal) && Number.isFinite(lastStepVal)) {
-            nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio;
-            return true;
-        }
-        else if (key === 'fill') {
-            if (!nextParsedProps) {
-                nextParsedProps = {};
-            }
-            const fillColorArray = nextParsedProps.fillColorArray;
-            const color = interpolateColor(lastStepVal, fillColorArray !== null && fillColorArray !== void 0 ? fillColorArray : nextStepVal, ratio, false, (fArray, tArray) => {
-                nextParsedProps.fillColorArray = tArray;
-            });
-            if (color) {
-                nextAttributes[key] = color;
-            }
-            return true;
-        }
-        else if (key === 'stroke') {
-            if (!nextParsedProps) {
-                nextParsedProps = {};
-            }
-            const strokeColorArray = nextParsedProps.strokeColorArray;
-            const color = interpolateColor(lastStepVal, strokeColorArray !== null && strokeColorArray !== void 0 ? strokeColorArray : nextStepVal, ratio, false, (fArray, tArray) => {
-                nextParsedProps.strokeColorArray = tArray;
-            });
-            if (color) {
-                nextAttributes[key] = color;
-            }
-            return true;
-        }
-        else if (key === 'shadowColor') {
-            if (!nextParsedProps) {
-                nextParsedProps = {};
-            }
-            const shadowColorArray = nextParsedProps.shadowColorArray;
-            const color = interpolateColor(lastStepVal, shadowColorArray !== null && shadowColorArray !== void 0 ? shadowColorArray : nextStepVal, ratio, true, (fArray, tArray) => {
-                nextParsedProps.shadowColorArray = tArray;
-            });
-            if (color) {
-                nextAttributes[key] = color;
-            }
-            return true;
-        }
-        else if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
-            const nextList = [];
-            let valid = true;
-            for (let i = 0; i < nextStepVal.length; i++) {
-                const v = lastStepVal[i];
-                const val = v + (nextStepVal[i] - v) * ratio;
-                if (!Number.isFinite(val)) {
-                    valid = false;
-                    break;
-                }
-                nextList.push(val);
-            }
-            if (valid) {
-                nextAttributes[key] = nextList;
-            }
-        }
-        return false;
-    }
-    _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
-        return;
-    }
     getDefaultAttribute(name) {
         return this.getGraphicTheme()[name];
     }
@@ -11679,6 +11398,234 @@ function drawArcPath$1(arc, context, cx, cy, outerRadius, innerRadius, partStrok
     return collapsedToLine;
 }
 
+function colorEqual(color1, color2) {
+    const c1 = Color.parseColorString(color1);
+    const c2 = Color.parseColorString(color2);
+    return c1 && c2 ? c1.r === c2.r && c1.g === c2.g && c1.b === c2.b && c1.opacity === c2.opacity : false;
+}
+var ColorType;
+(function (ColorType) {
+    ColorType[ColorType["Color255"] = 0] = "Color255";
+    ColorType[ColorType["Color1"] = 1] = "Color1";
+})(ColorType || (ColorType = {}));
+class ColorStore {
+    static Get(str, size = ColorType.Color1, arr = [0, 0, 0, 1]) {
+        if (size === ColorType.Color1) {
+            const color = ColorStore.store1[str];
+            if (color) {
+                arr[0] = color[0];
+                arr[1] = color[1];
+                arr[2] = color[2];
+                arr[3] = color[3];
+                return arr;
+            }
+            const c = Color.parseColorString(str);
+            if (c) {
+                const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+                ColorStore.store1[str] = data;
+                ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity];
+                arr[0] = data[0];
+                arr[1] = data[1];
+                arr[2] = data[2];
+                arr[3] = data[3];
+            }
+            return arr;
+        }
+        const color = ColorStore.store255[str];
+        if (color) {
+            arr[0] = color[0];
+            arr[1] = color[1];
+            arr[2] = color[2];
+            arr[3] = color[3];
+            return arr;
+        }
+        const c = Color.parseColorString(str);
+        if (c) {
+            ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+            ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity];
+            arr[0] = c.r;
+            arr[1] = c.g;
+            arr[2] = c.b;
+            arr[3] = c.opacity;
+        }
+        return arr;
+    }
+    static Set(str, size, arr) {
+        if (size === ColorType.Color1) {
+            if (ColorStore.store1[str]) {
+                return;
+            }
+            ColorStore.store1[str] = arr;
+            ColorStore.store255[str] = [
+                Math.floor(arr[0] * 255),
+                Math.floor(arr[1] * 255),
+                Math.floor(arr[2] * 255),
+                Math.floor(arr[3] * 255)
+            ];
+        }
+        else {
+            if (ColorStore.store255[str]) {
+                return;
+            }
+            ColorStore.store255[str] = arr;
+            ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
+        }
+    }
+}
+ColorStore.store255 = {};
+ColorStore.store1 = {};
+
+function colorArrayToString(color, alphaChannel = false) {
+    if (Array.isArray(color) && isNumber(color[0])) {
+        return alphaChannel
+            ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})`
+            : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})`;
+    }
+    return color;
+}
+function interpolateColor(from, to, ratio, alphaChannel, cb) {
+    if ((Array.isArray(from) && !isNumber(from[0])) || (Array.isArray(to) && !isNumber(to[0]))) {
+        const out = new Array(4).fill(0).map((_, index) => {
+            return _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel);
+        });
+        return out;
+    }
+    return _interpolateColor(from, to, ratio, alphaChannel, cb);
+}
+function _interpolateColor(from, to, ratio, alphaChannel, cb) {
+    if (!(from && to)) {
+        return (from && colorArrayToString(from)) || (to && colorArrayToString(to)) || false;
+    }
+    let fromArray;
+    let toArray;
+    let fromGradient = false;
+    let toGradient = false;
+    if (Array.isArray(from)) {
+        fromArray = from;
+    }
+    else if (typeof from === 'string') {
+        fromArray = ColorStore.Get(from, ColorType.Color255);
+    }
+    else {
+        fromGradient = true;
+    }
+    if (Array.isArray(to)) {
+        toArray = to;
+    }
+    else if (typeof to === 'string') {
+        toArray = ColorStore.Get(to, ColorType.Color255);
+    }
+    else {
+        toGradient = true;
+    }
+    if (fromGradient !== toGradient) {
+        const gradient = (fromGradient ? from : to);
+        const pure = (fromGradient ? to : from);
+        const gradientFromPure = Object.assign(Object.assign({}, gradient), { stops: gradient.stops.map(v => (Object.assign(Object.assign({}, v), { color: colorArrayToString(pure) }))) });
+        return fromGradient
+            ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb)
+            : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
+    }
+    if (fromGradient) {
+        if (from.gradient === to.gradient) {
+            const fc = from;
+            const tc = to;
+            const fromStops = fc.stops;
+            const toStops = tc.stops;
+            if (fromStops.length !== toStops.length) {
+                return false;
+            }
+            if (fc.gradient === 'linear') {
+                return interpolateGradientLinearColor(fc, tc, ratio);
+            }
+            else if (fc.gradient === 'radial') {
+                return interpolateGradientRadialColor(fc, tc, ratio);
+            }
+            else if (fc.gradient === 'conical') {
+                return interpolateGradientConicalColor(fc, tc, ratio);
+            }
+        }
+        return false;
+    }
+    cb && cb(fromArray, toArray);
+    const result = interpolatePureColorArray(fromArray, toArray, ratio);
+    return colorArrayToString(result, alphaChannel);
+}
+function interpolateGradientLinearColor(fc, tc, ratio) {
+    const fStops = fc.stops;
+    const tStops = tc.stops;
+    const color = {
+        gradient: 'linear',
+        x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+        x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+        y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+        y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+        stops: new Array(fStops.length).fill(0).map((_, i) => {
+            return {
+                color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+                offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+            };
+        })
+    };
+    return color;
+}
+function interpolateGradientRadialColor(fc, tc, ratio) {
+    const fStops = fc.stops;
+    const tStops = tc.stops;
+    const color = {
+        gradient: 'radial',
+        x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+        x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+        y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+        y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+        r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
+        r1: fc.r1 + (tc.r1 - fc.r1) * ratio,
+        stops: new Array(fStops.length).fill(0).map((_, i) => {
+            return {
+                color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+                offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+            };
+        })
+    };
+    return color;
+}
+function interpolateGradientConicalColor(fc, tc, ratio) {
+    const fStops = fc.stops;
+    const tStops = tc.stops;
+    const color = {
+        gradient: 'conical',
+        startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
+        endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
+        x: fc.x + (tc.x - fc.x) * ratio,
+        y: fc.y + (tc.y - fc.y) * ratio,
+        stops: new Array(fStops.length).fill(0).map((_, i) => {
+            return {
+                color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+                offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+            };
+        })
+    };
+    return color;
+}
+function interpolatePureColorArray(from, to, ratio) {
+    return [
+        from[0] + (to[0] - from[0]) * ratio,
+        from[1] + (to[1] - from[1]) * ratio,
+        from[2] + (to[2] - from[2]) * ratio,
+        from[3] + (to[3] - from[3]) * ratio
+    ];
+}
+function interpolatePureColorArrayToStr(from, to, ratio) {
+    return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
+}
+const _fromColorRGB = [0, 0, 0, 0];
+const _toColorRGB = [0, 0, 0, 0];
+function colorStringInterpolationToStr(fromColor, toColor, ratio) {
+    ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB);
+    ColorStore.Get(toColor, ColorType.Color255, _toColorRGB);
+    return `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
+}
+
 Object.keys(DEFAULT_COLORS).forEach(k => {
     DEFAULT_COLORS[k];
 });
@@ -14416,6 +14363,7 @@ function getFixedLRTB(left, right, top, bottom) {
 }
 class Paragraph {
     constructor(text, newLine, character, ascentDescentMode) {
+        var _a, _b;
         this.fontSize = character.fontSize || 16;
         this.textBaseline = character.textBaseline || 'alphabetic';
         this.ascentDescentMode = ascentDescentMode;
@@ -14462,6 +14410,9 @@ class Paragraph {
         this.ellipsis = 'normal';
         this.ellipsisWidth = 0;
         this.ellipsisOtherParagraphWidth = 0;
+        this.space = character.space;
+        this.dx = (_a = character.dx) !== null && _a !== void 0 ? _a : 0;
+        this.dy = (_b = character.dy) !== null && _b !== void 0 ? _b : 0;
         if (character.direction === 'vertical') {
             this.direction = character.direction;
             this.widthOrigin = this.width;
@@ -14512,9 +14463,9 @@ class Paragraph {
             text = text.slice(0, index);
             text += this.ellipsisStr;
             if (textAlign === 'right' || textAlign === 'end') {
-                const { width } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
                 if (direction === 'vertical') ;
                 else {
+                    const { width } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
                     left -= this.ellipsisWidth - width;
                 }
             }
@@ -14525,9 +14476,10 @@ class Paragraph {
         return Object.assign(Object.assign({}, lrtb), { fillStyle: this.character.background, globalAlpha: this.character.backgroundOpacity });
     }
     draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+        var _a;
         let baseline = top + ascent;
         let text = this.text;
-        let left = this.left + deltaLeft;
+        let left = this.left + deltaLeft + ((_a = this.space) !== null && _a !== void 0 ? _a : 0) / 2;
         baseline += this.top;
         let direction = this.direction;
         if (this.verticalEllipsis) {
@@ -14549,9 +14501,9 @@ class Paragraph {
             text = text.slice(0, index);
             text += this.ellipsisStr;
             if (textAlign === 'right' || textAlign === 'end') {
-                const { width } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
                 if (direction === 'vertical') ;
                 else {
+                    const { width } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
                     left -= this.ellipsisWidth - width;
                 }
             }
@@ -14574,10 +14526,10 @@ class Paragraph {
         }
         const { lineWidth = 1 } = this.character;
         if (this.character.stroke && lineWidth) {
-            ctx.strokeText(text, left, baseline);
+            ctx.strokeText(text, left + this.dx, baseline + this.dy);
         }
         if (this.character.fill) {
-            ctx.fillText(text, left, baseline);
+            ctx.fillText(text, left + this.dx, baseline + this.dy);
         }
         if (this.character.fill) {
             if (this.character.lineThrough || this.character.underline) {
@@ -17672,7 +17624,7 @@ class BaseRender {
         context.translate(-p.x, -p.y, false);
         context.setTransformForCurrent();
     }
-    _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+    _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params, themeAttribute) {
         const { context } = drawContext;
         if (!context) {
             return;
@@ -17689,7 +17641,7 @@ class BaseRender {
             context.highPerformanceRestore();
             return;
         }
-        this.drawShape(graphic, context, x, y, drawContext, params);
+        this.drawShape(graphic, context, x, y, drawContext, params, null, null, themeAttribute);
         this.z = 0;
         if (context.modelMatrix !== lastModelMatrix) {
             mat4Allocate.free(context.modelMatrix);
@@ -17773,8 +17725,8 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
         }
         return collapsedToLine;
     }
-    drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
+    drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb, arcAttribute) {
+        arcAttribute = arcAttribute !== null && arcAttribute !== void 0 ? arcAttribute : getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
         const { fill = arcAttribute.fill, stroke = arcAttribute.stroke, x: originX = arcAttribute.x, y: originY = arcAttribute.y, fillStrokeOrder = arcAttribute.fillStrokeOrder } = arc.attribute;
         const data = this.valid(arc, arcAttribute, fillCb, strokeCb);
         if (!data) {
@@ -17803,35 +17755,13 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
             beforeRenderContribitionsRuned = true;
             context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
             this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-            const _runFill = () => {
-                if (doFill) {
-                    if (fillCb) {
-                        fillCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (fVisible) {
-                        context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
-                        context.fill();
-                    }
-                }
-            };
-            const _runStroke = () => {
-                if (doStroke && isFullStroke) {
-                    if (strokeCb) {
-                        strokeCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (sVisible) {
-                        context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
-                        context.stroke();
-                    }
-                }
-            };
             if (!fillStrokeOrder) {
-                _runFill();
-                _runStroke();
+                this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb);
+                this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb);
             }
             else {
-                _runStroke();
-                _runFill();
+                this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb);
+                this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb);
             }
         }
         if (!isFullStroke && doStroke) {
@@ -17900,9 +17830,29 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
             fill.endAngle += conicalOffset;
         }
     }
+    _runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb) {
+        if (doFill) {
+            if (fillCb) {
+                fillCb(context, arc.attribute, arcAttribute);
+            }
+            else if (fVisible) {
+                context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
+                context.fill();
+            }
+        }
+    }
+    _runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb) {
+        if (doStroke) {
+            if (strokeCb) ;
+            else if (sVisible) {
+                context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
+                context.stroke();
+            }
+        }
+    }
     draw(arc, renderService, drawContext, params) {
         const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
-        this._draw(arc, arcAttribute, false, drawContext, params);
+        this._draw(arc, arcAttribute, false, drawContext, params, arcAttribute);
     }
 };
 DefaultCanvasArcRender = __decorate([
@@ -18923,9 +18873,8 @@ let DefaultCanvasRectRender = class DefaultCanvasRectRender extends BaseRender {
         ];
         this.init(rectRenderContribitions);
     }
-    drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a;
-        const rectAttribute = (_a = this.tempTheme) !== null && _a !== void 0 ? _a : getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
+    drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb, rectAttribute) {
+        rectAttribute = rectAttribute !== null && rectAttribute !== void 0 ? rectAttribute : getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
         const { fill = rectAttribute.fill, background, stroke = rectAttribute.stroke, cornerRadius = rectAttribute.cornerRadius, cornerType = rectAttribute.cornerType, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible, x1, y1, x: originX = rectAttribute.x, y: originY = rectAttribute.y, fillStrokeOrder = rectAttribute.fillStrokeOrder } = rect.attribute;
         let { width, height } = rect.attribute;
         width = (width !== null && width !== void 0 ? width : x1 - originX) || 0;
@@ -18957,43 +18906,41 @@ let DefaultCanvasRectRender = class DefaultCanvasRectRender extends BaseRender {
         };
         context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);
         this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-        const _runFill = () => {
-            if (doFillOrStroke.doFill) {
-                if (fillCb) {
-                    fillCb(context, rect.attribute, rectAttribute);
-                }
-                else if (fVisible) {
-                    context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
-                    context.fill();
-                }
-            }
-        };
-        const _runStroke = () => {
-            if (doFillOrStroke.doStroke) {
-                if (strokeCb) {
-                    strokeCb(context, rect.attribute, rectAttribute);
-                }
-                else if (sVisible) {
-                    context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
-                    context.stroke();
-                }
-            }
-        };
         if (!fillStrokeOrder) {
-            _runFill();
-            _runStroke();
+            this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb);
+            this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb);
         }
         else {
-            _runStroke();
-            _runFill();
+            this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb);
+            this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb);
         }
         this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
     }
+    _runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb) {
+        if (doFillOrStroke.doFill) {
+            if (fillCb) {
+                fillCb(context, rect.attribute, rectAttribute);
+            }
+            else if (fVisible) {
+                context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
+                context.fill();
+            }
+        }
+    }
+    _runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb) {
+        if (doFillOrStroke.doStroke) {
+            if (strokeCb) {
+                strokeCb(context, rect.attribute, rectAttribute);
+            }
+            else if (sVisible) {
+                context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
+                context.stroke();
+            }
+        }
+    }
     draw(rect, renderService, drawContext, params) {
         const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
-        this.tempTheme = rectAttribute;
-        this._draw(rect, rectAttribute, false, drawContext, params);
-        this.tempTheme = null;
+        this._draw(rect, rectAttribute, false, drawContext, params, rectAttribute);
     }
 };
 DefaultCanvasRectRender = __decorate([
@@ -19016,9 +18963,9 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
         ];
         this.init(symbolRenderContribitions);
     }
-    drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb) {
+    drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb, symbolAttribute) {
         var _a;
-        const symbolAttribute = getTheme(symbol, params === null || params === void 0 ? void 0 : params.theme).symbol;
+        symbolAttribute = symbolAttribute !== null && symbolAttribute !== void 0 ? symbolAttribute : getTheme(symbol, params === null || params === void 0 ? void 0 : params.theme).symbol;
         const { size = symbolAttribute.size, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX = symbolAttribute.scaleX, scaleY = symbolAttribute.scaleY, fillStrokeOrder = symbolAttribute.fillStrokeOrder, clipRange = symbolAttribute.clipRange } = symbol.attribute;
         const data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
         if (!data) {
@@ -19092,38 +19039,38 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
         context.camera = camera;
         context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute);
         this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
-        const _runFill = () => {
-            if (doFill && !parsedPath.isSvg) {
-                if (fillCb) {
-                    fillCb(context, symbol.attribute, symbolAttribute);
-                }
-                else if (fVisible) {
-                    context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute);
-                    context.fill();
-                }
-            }
-        };
-        const _runStroke = () => {
-            if (doStroke && !parsedPath.isSvg) {
-                if (strokeCb) {
-                    strokeCb(context, symbol.attribute, symbolAttribute);
-                }
-                else if (sVisible && clipRange >= 1) {
-                    context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
-                    context.stroke();
-                }
-            }
-        };
         if (!fillStrokeOrder) {
-            _runFill();
-            _runStroke();
+            this._runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb);
+            this._runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb);
         }
         else {
-            _runStroke();
-            _runFill();
+            this._runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb);
+            this._runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb);
         }
         this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
     }
+    _runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb) {
+        if (doFill && !parsedPath.isSvg) {
+            if (fillCb) {
+                fillCb(context, symbol.attribute, symbolAttribute);
+            }
+            else if (fVisible) {
+                context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute);
+                context.fill();
+            }
+        }
+    }
+    _runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb) {
+        if (doStroke && !parsedPath.isSvg) {
+            if (strokeCb) {
+                strokeCb(context, symbol.attribute, symbolAttribute);
+            }
+            else if (sVisible && clipRange >= 1) {
+                context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
+                context.stroke();
+            }
+        }
+    }
     draw(symbol, renderService, drawContext, params) {
         const symbolAttribute = getTheme(symbol, params === null || params === void 0 ? void 0 : params.theme).symbol;
         this._draw(symbol, symbolAttribute, false, drawContext, params);
@@ -19619,9 +19566,13 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         this.groupRenderContribitions = groupRenderContribitions;
         this.numberType = GROUP_NUMBER_TYPE;
     }
-    drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
-        const { fill = groupAttribute.fill, background, stroke = groupAttribute.stroke, opacity = groupAttribute.opacity, width = groupAttribute.width, height = groupAttribute.height, clip = groupAttribute.clip, fillOpacity = groupAttribute.fillOpacity, strokeOpacity = groupAttribute.strokeOpacity, cornerRadius = groupAttribute.cornerRadius, path = groupAttribute.path, lineWidth = groupAttribute.lineWidth, visible = groupAttribute.visible, fillStrokeOrder = groupAttribute.fillStrokeOrder, cornerType = groupAttribute.cornerType, x: originX = groupAttribute.x, y: originY = groupAttribute.y } = group.attribute;
+    drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb, groupAttribute) {
+        const { clip, fill, stroke, background } = group.attribute;
+        if (!(clip || fill || stroke || background)) {
+            return;
+        }
+        groupAttribute = groupAttribute !== null && groupAttribute !== void 0 ? groupAttribute : getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
+        const { opacity = groupAttribute.opacity, width = groupAttribute.width, height = groupAttribute.height, fillOpacity = groupAttribute.fillOpacity, strokeOpacity = groupAttribute.strokeOpacity, cornerRadius = groupAttribute.cornerRadius, path = groupAttribute.path, lineWidth = groupAttribute.lineWidth, visible = groupAttribute.visible, fillStrokeOrder = groupAttribute.fillStrokeOrder, cornerType = groupAttribute.cornerType, x: originX = groupAttribute.x, y: originY = groupAttribute.y } = group.attribute;
         const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
         const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
         const doFill = runFill(fill, background);
@@ -19714,14 +19665,16 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         });
     }
     draw(group, renderService, drawContext, params) {
+        var _a;
         const { context } = drawContext;
         if (!context) {
             return;
         }
-        const { clip, baseOpacity = 1, drawMode, x, y, width, height } = group.attribute;
+        const { clip, baseOpacity = 1, drawMode } = group.attribute;
         const lastNativeContext = context.nativeContext;
         const lastNativeCanvas = context.canvas.nativeCanvas;
         if (drawMode > 0) {
+            const { x, y, width, height } = group.attribute;
             const canvas = context.canvas;
             const newCanvas = vglobal.createCanvas({ width: canvas.width, height: canvas.height, dpr: 1 });
             const newContext = newCanvas.getContext('2d');
@@ -19747,10 +19700,10 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         }
         const baseGlobalAlpha = context.baseGlobalAlpha;
         context.baseGlobalAlpha *= baseOpacity;
-        const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
         const lastModelMatrix = context.modelMatrix;
         const camera = context.camera;
         if (camera) {
+            const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
             const nextModelMatrix = mat4Allocate.allocate();
             const modelMatrix = mat4Allocate.allocate();
             getModelMatrix(modelMatrix, group, groupAttribute);
@@ -19772,15 +19725,15 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
             this.drawShape(group, context, 0, 0, drawContext, params, () => false, () => false);
         }
         else {
-            this.drawShape(group, context, 0, 0, drawContext);
+            this.drawShape(group, context, 0, 0, drawContext, null, null, null);
         }
-        const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = group.attribute;
+        const { scrollX, scrollY } = group.attribute;
         if (scrollX || scrollY) {
             context.translate(scrollX, scrollY);
         }
         let p;
-        if (params && params.drawingCb) {
-            p = params.drawingCb();
+        if (params && params.renderInGroup) {
+            p = params.renderInGroup(params.skipDraw, group, drawContext, (_a = params.renderInGroupParams) === null || _a === void 0 ? void 0 : _a.nextM);
         }
         if (context.modelMatrix !== lastModelMatrix) {
             mat4Allocate.free(context.modelMatrix);
@@ -19788,6 +19741,7 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
         context.modelMatrix = lastModelMatrix;
         context.baseGlobalAlpha = baseGlobalAlpha;
         if (drawMode > 0) {
+            const { x, y, width, height } = group.attribute;
             const newContext = context.nativeContext;
             const newCanvas = context.canvas.nativeCanvas;
             lastNativeContext.save();
@@ -20169,6 +20123,11 @@ let CommonDrawItemInterceptorContribution = class CommonDrawItemInterceptorContr
         ];
     }
     afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) &&
+            !graphic.shadowRoot &&
+            !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) {
+            return false;
+        }
         for (let i = 0; i < this.interceptors.length; i++) {
             if (this.interceptors[i].afterDrawItem &&
                 this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
@@ -20871,6 +20830,32 @@ let DefaultDrawContribution = class DefaultDrawContribution {
     constructor(contributions, drawItemInterceptorContributions) {
         this.contributions = contributions;
         this.drawItemInterceptorContributions = drawItemInterceptorContributions;
+        this._renderInGroup = (skipSort, group, drawContext, nextM) => {
+            var _a;
+            skipSort
+                ? group.forEachChildren((item) => {
+                    if (drawContext.break) {
+                        return;
+                    }
+                    if (item.isContainer) {
+                        this.renderGroup(item, drawContext, nextM);
+                    }
+                    else {
+                        this.renderItem(item, drawContext);
+                    }
+                })
+                : foreach(group, DefaultAttribute.zIndex, (item) => {
+                    if (drawContext.break) {
+                        return;
+                    }
+                    if (item.isContainer) {
+                        this.renderGroup(item, drawContext, nextM);
+                    }
+                    else {
+                        this.renderItem(item, drawContext);
+                    }
+                }, false, !!((_a = drawContext.context) === null || _a === void 0 ? void 0 : _a.camera));
+        };
         this.currentRenderMap = new Map();
         this.defaultRenderMap = new Map();
         this.styleRenderMap = new Map();
@@ -20931,10 +20916,10 @@ let DefaultDrawContribution = class DefaultDrawContribution {
             dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr;
         }
         this.backupDirtyBounds.copy(dirtyBounds);
-        context.inuse = true;
+        context.save();
+        context.reset(false);
         context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-        context.clearMatrix();
-        context.setTransformForCurrent(true);
+        context.clearMatrix(false);
         context.translate(viewBox.x1, viewBox.y1, true);
         context.beginPath();
         context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height());
@@ -20944,7 +20929,6 @@ let DefaultDrawContribution = class DefaultDrawContribution {
             this.backupDirtyBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
         }
         this.clearScreen(renderService, context, drawContext);
-        context.save();
         renderService.renderTreeRoots
             .sort((a, b) => {
             var _a, _b;
@@ -20956,8 +20940,6 @@ let DefaultDrawContribution = class DefaultDrawContribution {
                 : this.renderItem(group, drawContext);
         });
         context.restore();
-        context.setClearMatrix(1, 0, 0, 1, 0, 0);
-        context.inuse = false;
         context.draw();
     }
     doRegister() {
@@ -20998,33 +20980,13 @@ let DefaultDrawContribution = class DefaultDrawContribution {
             nextM = matrixAllocate.allocateByObj(parentMatrix).multiply(gm.a, gm.b, gm.c, gm.d, gm.e, gm.f);
             this.dirtyBounds.copy(this.backupDirtyBounds).transformWithMatrix(nextM.getInverse());
         }
+        drawContext.isGroupScroll = !!(group.attribute.scrollX || group.attribute.scrollY);
         this.renderItem(group, drawContext, {
-            drawingCb: () => {
-                var _a;
-                skipSort
-                    ? group.forEachChildren((item) => {
-                        if (drawContext.break) {
-                            return;
-                        }
-                        if (item.isContainer) {
-                            this.renderGroup(item, drawContext, nextM);
-                        }
-                        else {
-                            this.renderItem(item, drawContext);
-                        }
-                    })
-                    : foreach(group, DefaultAttribute.zIndex, (item) => {
-                        if (drawContext.break) {
-                            return;
-                        }
-                        if (item.isContainer) {
-                            this.renderGroup(item, drawContext, nextM);
-                        }
-                        else {
-                            this.renderItem(item, drawContext);
-                        }
-                    }, false, !!((_a = drawContext.context) === null || _a === void 0 ? void 0 : _a.camera));
-            }
+            renderInGroupParams: {
+                skipSort,
+                nextM
+            },
+            renderInGroup: this._renderInGroup
         });
         if (this.useDirtyBounds) {
             this.dirtyBounds.copy(tempBounds);
@@ -21093,17 +21055,15 @@ let DefaultDrawContribution = class DefaultDrawContribution {
         if (!renderer) {
             return;
         }
-        let retrans = this.scrollMatrix && (this.scrollMatrix.e !== 0 || this.scrollMatrix.f !== 0);
+        let retrans = false;
         let tempBounds;
-        if (graphic.parent) {
+        if (drawContext.isGroupScroll) {
             const { scrollX = 0, scrollY = 0 } = graphic.parent.attribute;
-            if (!!(scrollX || scrollY)) {
-                retrans = true;
-                if (!this.scrollMatrix) {
-                    this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
-                }
-                this.scrollMatrix.translate(-scrollX, -scrollY);
+            retrans = true;
+            if (!this.scrollMatrix) {
+                this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
             }
+            this.scrollMatrix.translate(-scrollX, -scrollY);
         }
         if (retrans) {
             tempBounds = this.dirtyBounds.clone().transformWithMatrix(this.scrollMatrix);
@@ -21923,7 +21883,7 @@ class Stage extends Group {
         return this._eventSystem;
     }
     constructor(params = {}) {
-        var _a;
+        var _a, _b;
         super({});
         this.tickedBeforeRender = true;
         this._onVisibleChange = (visible) => {
@@ -21955,12 +21915,8 @@ class Stage extends Group {
             this.tickedBeforeRender = false;
         };
         this.afterTickCb = () => {
-            var _a;
             this.tickedBeforeRender = true;
-            if (((_a = this.params.optimize) === null || _a === void 0 ? void 0 : _a.tickRenderMode) === 'performance') ;
-            else {
-                this.state !== 'rendering' && this.render();
-            }
+            this.state !== 'rendering' && this.render();
         };
         this.params = params;
         this.theme = new Theme();
@@ -22019,7 +21975,7 @@ class Stage extends Group {
         this.supportInteractiveLayer = params.interactiveLayer !== false;
         if (!params.optimize) {
             params.optimize = {
-                animateMode: 'performance'
+                tickRenderMode: 'performance'
             };
         }
         this.optmize(params.optimize);
@@ -22027,10 +21983,15 @@ class Stage extends Group {
             this.setAttributes({ background: this._background });
         }
         this.initAnimate(params);
+        this.rafId = (_b = params.rafId) !== null && _b !== void 0 ? _b : Math.floor(Math.random() * 6);
     }
     initAnimate(params) {
+        var _a;
         if (this.createTicker && this.createTimeline) {
             this.ticker = params.ticker || this.createTicker(this);
+            if (((_a = this.params.optimize) === null || _a === void 0 ? void 0 : _a.tickRenderMode) !== 'effect') {
+                this.ticker.setFPS(30);
+            }
             this.timeline = this.createTimeline();
             this.ticker.addTimeline(this.timeline);
             this.ticker.on('tick', this.afterTickCb);
@@ -22390,7 +22351,7 @@ class Stage extends Group {
         }
         if (!this.willNextFrameRender) {
             this.willNextFrameRender = true;
-            this.global.getRequestAnimationFrame()(() => {
+            this.global.getSpecifiedRequestAnimationFrame(this.rafId)(() => {
                 this._doRenderInThisFrame(), (this.willNextFrameRender = false);
             });
         }
@@ -22698,6 +22659,11 @@ let EmptyContext2d = class EmptyContext2d {
         this.resetTransform();
         this.restore();
     }
+    reset() {
+        this.matrix.setValue(1, 0, 0, 1, 0, 0);
+        this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this.stack.length = 0;
+    }
     restore() {
         if (this.stack.length > 0) {
             matrixAllocate.free(this.matrix);
@@ -23616,6 +23582,26 @@ function flatten_simplify(points, tolerance, highestQuality) {
     return points;
 }
 
+function diff(oldAttrs, newAttrs, getAttr) {
+    const diffObj = {};
+    for (const key in newAttrs) {
+        if (!(key in oldAttrs) || !isEqual(oldAttrs[key], newAttrs[key])) {
+            diffObj[key] = newAttrs[key];
+        }
+    }
+    if (getAttr) {
+        for (const key in oldAttrs) {
+            if (!(key in newAttrs)) {
+                const value = getAttr(key);
+                if (value !== undefined) {
+                    diffObj[key] = value;
+                }
+            }
+        }
+    }
+    return diffObj;
+}
+
 function cubicSubdivide(p0, p1, p2, p3, t, out) {
     const p01 = (p1 - p0) * t + p0;
     const p12 = (p2 - p1) * t + p1;
@@ -24383,30 +24369,6 @@ const splitPath = (path, count) => {
     return res;
 };
 
-class PerformanceRAF {
-    constructor() {
-        this.nextAnimationFrameCbs = [];
-        this.runAnimationFrame = (time) => {
-            const cbs = this.nextAnimationFrameCbs;
-            this.nextAnimationFrameCbs = [];
-            for (let i = 0; i < cbs.length; i++) {
-                cbs[i](time);
-            }
-        };
-        this.tryRunAnimationFrameNextFrame = () => {
-            if (!(this.nextAnimationFrameCbs && this.nextAnimationFrameCbs.length === 1)) {
-                return;
-            }
-            vglobal.getRequestAnimationFrame()(this.runAnimationFrame);
-        };
-    }
-    addAnimationFrameCb(callback) {
-        this.nextAnimationFrameCbs.push(callback);
-        this.tryRunAnimationFrameNextFrame();
-        return this.nextAnimationFrameCbs.length - 1;
-    }
-}
-
 function getDefaultCharacterConfig(attribute) {
     const { fill = 'black', stroke = false, fontWeight = 'normal', lineHeight, fontFamily = 'Arial', textAlign } = attribute;
     let { fontSize = 12 } = attribute;
@@ -24424,12 +24386,13 @@ function getDefaultCharacterConfig(attribute) {
     };
 }
 function findConfigIndexByCursorIdx(textConfig, cursorIndex) {
+    var _a;
     if (cursorIndex < 0) {
         return 0;
     }
     const intCursorIndex = Math.round(cursorIndex);
     let tempCursorIndex = intCursorIndex;
-    let lineBreak = false;
+    let lineBreak = ((_a = textConfig === null || textConfig === void 0 ? void 0 : textConfig[0]) === null || _a === void 0 ? void 0 : _a.text) === '\n';
     let configIdx = 0;
     for (configIdx = 0; configIdx < textConfig.length && tempCursorIndex >= 0; configIdx++) {
         const c = textConfig[configIdx];
@@ -24452,12 +24415,12 @@ function findConfigIndexByCursorIdx(textConfig, cursorIndex) {
     return configIdx;
 }
 function findCursorIdxByConfigIndex(textConfig, configIndex) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     let cursorIndex = 0;
     if (configIndex < 0) {
         return -0.1;
     }
-    let lastLineBreak = false;
+    let lastLineBreak = ((_a = textConfig === null || textConfig === void 0 ? void 0 : textConfig[0]) === null || _a === void 0 ? void 0 : _a.text) === '\n';
     for (let i = 0; i <= configIndex && i < textConfig.length; i++) {
         const c = textConfig[i];
         if (c.text === '\n') {
@@ -24471,16 +24434,16 @@ function findCursorIdxByConfigIndex(textConfig, configIndex) {
     }
     cursorIndex = Math.max(cursorIndex - 1, 0);
     if (configIndex > textConfig.length - 1) {
-        if (((_a = textConfig[textConfig.length - 1]) === null || _a === void 0 ? void 0 : _a.text) === '\n') {
+        if (((_b = textConfig[textConfig.length - 1]) === null || _b === void 0 ? void 0 : _b.text) === '\n') {
             return cursorIndex + 0.9;
         }
         return cursorIndex + 0.1;
     }
-    const lineBreak = ((_b = textConfig[configIndex]) === null || _b === void 0 ? void 0 : _b.text) === '\n';
+    const lineBreak = ((_c = textConfig[configIndex]) === null || _c === void 0 ? void 0 : _c.text) === '\n';
     if (configIndex >= textConfig.length - 1 && lineBreak) {
         return cursorIndex + 1 - 0.1;
     }
-    const singleLineBreak = lineBreak && ((_c = textConfig[configIndex - 1]) === null || _c === void 0 ? void 0 : _c.text) !== '\n';
+    const singleLineBreak = lineBreak && ((_d = textConfig[configIndex - 1]) === null || _d === void 0 ? void 0 : _d.text) !== '\n';
     cursorIndex -= 0.1;
     if (singleLineBreak) {
         cursorIndex += 0.2;
@@ -24494,11 +24457,17 @@ class EditModule {
         this.handleFocusOut = () => {
         };
         this.handleKeyDown = (e) => {
+            if (!this.currRt) {
+                return;
+            }
             if (e.key === 'Delete' || e.key === 'Backspace') {
                 this.handleInput({ data: null, type: 'Backspace' });
             }
         };
         this.handleCompositionStart = () => {
+            if (!this.currRt) {
+                return;
+            }
             this.isComposing = true;
             const { textConfig = [] } = this.currRt.attribute;
             this.composingConfigIdx = this.cursorIndex < 0 ? 0 : findConfigIndexByCursorIdx(textConfig, this.cursorIndex);
@@ -24634,6 +24603,9 @@ class EditModule {
     }
     parseCompositionStr(configIdx) {
         var _a;
+        if (!this.currRt) {
+            return '';
+        }
         const { textConfig = [] } = this.currRt.attribute;
         const lastConfig = (_a = textConfig[configIdx]) !== null && _a !== void 0 ? _a : {};
         textConfig.splice(configIdx, 1);
@@ -25317,6 +25289,7 @@ class RichTextEditPlugin {
             currRt.detachShadow();
         }
         this.currRt = null;
+        this.editModule.currRt = null;
         const shadowRoot = this.getShadow(currRt);
         if (this.editLine) {
             this.removeEditLineOrBgOrBounds(this.editLine, shadowRoot);
@@ -27498,4 +27471,4 @@ const registerFlexLayoutPlugin = () => {
     Factory.registerPlugin('FlexLayoutPlugin', FlexLayoutPlugin);
 };
 
-export { ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, AnimateMode, AnimateStatus, AnimateStepType, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasFactory, CanvasTextLayout, Circle, CircleRender, CircleRenderContribution, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Container, ContainerModule, Context2dFactory, ContributionProvider, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DEFAULT_TEXT_FONT_FAMILY, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseClipRenderAfterContribution, DefaultBaseClipRenderBeforeContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasGroupRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolClipRangeStrokeRenderContribution, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction, DirectionalLight, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Edge, EditModule, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ALL_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, FlexLayoutPlugin, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image, ImageRender, ImageRenderContribution, IncrementalDrawContribution, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Mat4Allocate, MatrixAllocate, MeasureModeEnum, MonotoneX, MonotoneY, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PerformanceRAF, PickItemInterceptor, PickServiceInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, Pyramid3d, Pyramid3dRender, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, SegContext, ShadowPickServiceInterceptorContribution, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, StaticLayerHandlerContribution, Step, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TransformUtil, UpdateTag, VGlobal, VWindow, ViewTransform3dPlugin, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _calculateLineHeight, _interpolateColor, addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, application, applyTransformOnBezierCurves, arc3dModule, arcModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleModule, clock, colorEqual, colorStringInterpolationToStr, container, cornerTangents, createArc, createArc3d, createArea, createCircle, createColor, createConicalGradient, createGlyph, createGroup, createImage, createLine, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseClipRenderAfterContribution, defaultBaseClipRenderBeforeContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, fillVisible, findBestMorphingRotation, findConfigIndexByCursorIdx, findCursorIdxByConfigIndex, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepSegments, genStepTypeSegments, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getDefaultCharacterConfig, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphModule, graphicCreator, graphicService, graphicUtil, identityMat4, imageModule, incrementalAddTo, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, interpolatePureColorArrayToStr, intersect, isBrowserEnv, isNodeEnv, isSvg, isTransformKey, isXML, layerService, lineModule, lookAt, mat3Tomat4, mat4Allocate, matrixAllocate, multiInject, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, ortho, parsePadding, parseStroke, parseSvgPath, pathModule, pathToBezierCurves, point$3 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonModule, preLoadAllModule, pyramid3dModule, quadCalc, quadLength, quadPointAt, rafBasedSto, rect3dModule, rectFillVisible, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerArc3dGraphic, registerArcGraphic, registerAreaGraphic, registerCircleGraphic, registerDirectionalLight, registerFlexLayoutPlugin, registerGlyphGraphic, registerGroupGraphic, registerHtmlAttributePlugin, registerImageGraphic, registerLineGraphic, registerOrthoCamera, registerPathGraphic, registerPolygonGraphic, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect3dGraphic, registerRectGraphic, registerRichtextGraphic, registerShadowRootGraphic, registerSymbolGraphic, registerTextGraphic, registerViewTransform3dPlugin, registerWrapTextGraphic, renderCommandList, rewriteProto, richtextModule, rotateX, rotateY, rotateZ, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, strCommandMap, strokeVisible, symbolModule, textAttributesToStyle, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textModule, transformKeys, transformMat4, transformUtil, translate, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, xul };
+export { ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, AnimateMode, AnimateStatus, AnimateStepType, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasFactory, CanvasTextLayout, Circle, CircleRender, CircleRenderContribution, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Container, ContainerModule, Context2dFactory, ContributionProvider, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DEFAULT_TEXT_FONT_FAMILY, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseClipRenderAfterContribution, DefaultBaseClipRenderBeforeContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasGroupRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolClipRangeStrokeRenderContribution, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction, DirectionalLight, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Edge, EditModule, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ALL_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, FlexLayoutPlugin, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image, ImageRender, ImageRenderContribution, IncrementalDrawContribution, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Mat4Allocate, MatrixAllocate, MeasureModeEnum, MonotoneX, MonotoneY, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PerformanceRAF, PickItemInterceptor, PickServiceInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, Pyramid3d, Pyramid3dRender, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, STATUS$1 as STATUS, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, SegContext, ShadowPickServiceInterceptorContribution, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, StaticLayerHandlerContribution, Step, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TransformUtil, UpdateTag, VGlobal, VWindow, ViewTransform3dPlugin, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _calculateLineHeight, _interpolateColor, addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, application, applyTransformOnBezierCurves, arc3dModule, arcModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleModule, clock, colorEqual, colorStringInterpolationToStr, container, cornerTangents, createArc, createArc3d, createArea, createCircle, createColor, createConicalGradient, createGlyph, createGroup, createImage, createLine, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseClipRenderAfterContribution, defaultBaseClipRenderBeforeContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, diff, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, fillVisible, findBestMorphingRotation, findConfigIndexByCursorIdx, findCursorIdxByConfigIndex, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepSegments, genStepTypeSegments, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getDefaultCharacterConfig, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphModule, graphicCreator, graphicService, graphicUtil, identityMat4, imageModule, incrementalAddTo, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, interpolatePureColorArrayToStr, intersect, isBrowserEnv, isNodeEnv, isSvg, isTransformKey, isXML, layerService, lineModule, lookAt, mat3Tomat4, mat4Allocate, matrixAllocate, multiInject, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, ortho, parsePadding, parseStroke, parseSvgPath, pathModule, pathToBezierCurves, point$3 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonModule, preLoadAllModule, pyramid3dModule, quadCalc, quadLength, quadPointAt, rafBasedSto, rect3dModule, rectFillVisible, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerArc3dGraphic, registerArcGraphic, registerAreaGraphic, registerCircleGraphic, registerDirectionalLight, registerFlexLayoutPlugin, registerGlyphGraphic, registerGroupGraphic, registerHtmlAttributePlugin, registerImageGraphic, registerLineGraphic, registerOrthoCamera, registerPathGraphic, registerPolygonGraphic, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect3dGraphic, registerRectGraphic, registerRichtextGraphic, registerShadowRootGraphic, registerSymbolGraphic, registerTextGraphic, registerViewTransform3dPlugin, registerWrapTextGraphic, renderCommandList, rewriteProto, richtextModule, rotateX, rotateY, rotateZ, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, strCommandMap, strokeVisible, symbolModule, textAttributesToStyle, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textModule, transformKeys, transformMat4, transformUtil, translate, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, xul };