@visactor/vrender-core 1.1.0-alpha.2 → 1.1.0-alpha.20

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { EventEmitter, Logger, isBoolean, isObject, isFunction, isString, has, isUndefined, tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, epsilon, Matrix, pi2, isArray, cos, sin, pi, pointAt, isNumber as isNumber$1, sqrt, isPointInLine, Color, DEFAULT_COLORS, LRU, isEqual, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, lowerCamelCaseToMiddle, isValid, getContextFont, rotatePoint, transformBoundsWithMatrix, clampAngleByRadian, asin, isNumberClose, TextMeasure, Bounds, getRectIntersect, isRectIntersect, arrayEqual, acos, getIntersectPoint, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
+import { EventEmitter, Logger, isBoolean, isObject, isFunction, isString, has, isUndefined, tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, epsilon, Matrix, pi2, isArray, cos, sin, pi, pointAt, isNumber as isNumber$1, sqrt, isPointInLine, Color, DEFAULT_COLORS, LRU, OBBBounds, isEqual, isNil, normalTransform, isValidUrl, isBase64, lowerCamelCaseToMiddle, isValid, getContextFont, rotatePoint, transformBoundsWithMatrix, clampAngleByRadian, asin, isNumberClose, TextMeasure, Bounds, getRectIntersect, isRectIntersect, arrayEqual, acos, getIntersectPoint, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -9485,6 +9485,17 @@ function getStageStatePerfMonitor(stage) {
     }
     return stage[STAGE_PERF_MONITOR];
 }
+function getActiveStageStatePerfMonitor(stage) {
+    var _a;
+    if (!stage) {
+        return undefined;
+    }
+    const current = getStageStatePerfMonitor(stage);
+    if (current) {
+        return current;
+    }
+    return ((_a = stage.statePerfConfig) === null || _a === void 0 ? void 0 : _a.enabled) === true ? ensureStageStatePerfMonitor(stage) : undefined;
+}
 
 function isPlainObject$1(value) {
     return value != null && typeof value === 'object' && !Array.isArray(value);
@@ -9640,7 +9651,7 @@ class StateEngine {
         this.resolverPatchCache.clear();
         this.resolverCacheKey = '';
         this.resolverCacheValid = false;
-        (_b = getStageStatePerfMonitor((_a = this.graphic) === null || _a === void 0 ? void 0 : _a.stage)) === null || _b === void 0 ? void 0 : _b.recordResolver('invalidations');
+        (_b = getActiveStageStatePerfMonitor((_a = this.graphic) === null || _a === void 0 ? void 0 : _a.stage)) === null || _b === void 0 ? void 0 : _b.recordResolver('invalidations');
     }
     hasState(stateName) {
         if (!this._activeStates.length) {
@@ -9730,7 +9741,7 @@ class StateEngine {
     }
     recomputePatch(effectiveStates) {
         var _a;
-        const perfMonitor = getStageStatePerfMonitor((_a = this.graphic) === null || _a === void 0 ? void 0 : _a.stage);
+        const perfMonitor = getActiveStageStatePerfMonitor((_a = this.graphic) === null || _a === void 0 ? void 0 : _a.stage);
         const patchStart = perfMonitor ? performance.now() : 0;
         let resolverCost = 0;
         const cacheKey = effectiveStates.join(',');
@@ -10133,62 +10144,6 @@ class StateStyleResolver {
         });
         return resolvedAttrs;
     }
-    resolveWithCompiled(normalAttrs, compiledDefinitions, stateProxy, effectiveStates, resolvedPatch) {
-        var _a, _b;
-        const mergeMode = (_a = this.options.mergeMode) !== null && _a !== void 0 ? _a : 'shallow';
-        const resolvedAttrs = (_b = cloneValue(resolvedPatch)) !== null && _b !== void 0 ? _b : {};
-        effectiveStates.forEach(stateName => {
-            const proxyPatch = stateProxy === null || stateProxy === void 0 ? void 0 : stateProxy(stateName, effectiveStates);
-            if (proxyPatch == null) {
-                return;
-            }
-            Object.keys(proxyPatch).forEach(key => {
-                const nextValue = proxyPatch[key];
-                const hasCompiledDefinition = compiledDefinitions.has(stateName);
-                if (mergeMode === 'deep' &&
-                    isPlainObject(nextValue) &&
-                    (isPlainObject(resolvedAttrs[key]) ||
-                        (!hasCompiledDefinition && isPlainObject(normalAttrs[key])))) {
-                    const baseValue = isPlainObject(resolvedAttrs[key])
-                        ? resolvedAttrs[key]
-                        : isPlainObject(normalAttrs[key])
-                            ? normalAttrs[key]
-                            : {};
-                    resolvedAttrs[key] = deepMerge(baseValue, nextValue);
-                    return;
-                }
-                resolvedAttrs[key] = cloneValue(nextValue);
-            });
-        });
-        return resolvedAttrs;
-    }
-    computeNormalAttrsBackup(normalAttrs, targetAttrs, finalAttribute) {
-        const nextNormalAttrs = {};
-        const nextTargetAttrs = Object.assign({}, targetAttrs);
-        for (const key in targetAttrs) {
-            if (!Object.prototype.hasOwnProperty.call(targetAttrs, key)) {
-                continue;
-            }
-            if (normalAttrs && key in normalAttrs) {
-                nextNormalAttrs[key] = cloneValue(normalAttrs[key]);
-            }
-            else {
-                nextNormalAttrs[key] = cloneValue(finalAttribute[key]);
-            }
-        }
-        if (normalAttrs) {
-            for (const key in normalAttrs) {
-                if (!Object.prototype.hasOwnProperty.call(normalAttrs, key) || key in targetAttrs) {
-                    continue;
-                }
-                nextTargetAttrs[key] = cloneValue(normalAttrs[key]);
-            }
-        }
-        return {
-            attrs: nextTargetAttrs,
-            normalAttrs: nextNormalAttrs
-        };
-    }
 }
 
 function hasOwnKeys(value) {
@@ -10227,18 +10182,39 @@ class StateTransitionOrchestrator {
         const noWorkAnimateAttr = Object.assign(Object.assign({}, ((_a = options.noWorkAnimateAttr) !== null && _a !== void 0 ? _a : {})), normalizeNoAnimateAttrConfig((_b = options.animateConfig) === null || _b === void 0 ? void 0 : _b.noAnimateAttrs));
         const isClear = options.isClear === true;
         const getDefaultAttribute = options.getDefaultAttribute;
+        const shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute;
+        const assignTransitionAttr = (key, value) => {
+            if (noWorkAnimateAttr[key]) {
+                plan.jumpAttrs[key] = value;
+                plan.noAnimateAttrs[key] = value;
+                return;
+            }
+            if (isClear && value === undefined) {
+                if (shouldSkipDefaultAttribute === null || shouldSkipDefaultAttribute === void 0 ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) {
+                    return;
+                }
+                plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+                return;
+            }
+            plan.animateAttrs[key] = value;
+        };
         for (const key in targetAttrs) {
             if (!Object.prototype.hasOwnProperty.call(targetAttrs, key)) {
                 continue;
             }
             const value = targetAttrs[key];
-            if (noWorkAnimateAttr[key]) {
-                plan.jumpAttrs[key] = value;
-                plan.noAnimateAttrs[key] = value;
-                continue;
+            assignTransitionAttr(key, value);
+        }
+        const extraAnimateAttrs = options.extraAnimateAttrs;
+        if (extraAnimateAttrs) {
+            for (const key in extraAnimateAttrs) {
+                const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetAttrs, key);
+                if (!Object.prototype.hasOwnProperty.call(extraAnimateAttrs, key) ||
+                    (hasTargetAttr && targetAttrs[key] !== undefined)) {
+                    continue;
+                }
+                assignTransitionAttr(key, extraAnimateAttrs[key]);
             }
-            plan.animateAttrs[key] =
-                isClear && value === undefined && getDefaultAttribute ? getDefaultAttribute(key) : value;
         }
         return plan;
     }
@@ -10272,12 +10248,14 @@ class StateTransitionOrchestrator {
         return plan;
     }
     applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const plan = this.analyzeTransition({}, targetAttrs, stateNames, hasAnimation, {
             noWorkAnimateAttr: (_a = graphic.getNoWorkAnimateAttr) === null || _a === void 0 ? void 0 : _a.call(graphic),
             isClear: true,
             getDefaultAttribute: (_b = graphic.getDefaultAttribute) === null || _b === void 0 ? void 0 : _b.bind(graphic),
-            animateConfig: options.animateConfig
+            shouldSkipDefaultAttribute: (_c = options.shouldSkipDefaultAttribute) !== null && _c !== void 0 ? _c : (_d = graphic.shouldSkipStateTransitionDefaultAttribute) === null || _d === void 0 ? void 0 : _d.bind(graphic),
+            animateConfig: options.animateConfig,
+            extraAnimateAttrs: options.extraAnimateAttrs
         });
         return this.applyTransition(graphic, plan, hasAnimation, options);
     }
@@ -10373,7 +10351,7 @@ function ensureSharedStateScopeFresh(scope) {
     if (!scope) {
         return undefined;
     }
-    (_a = getStageStatePerfMonitor(scope.ownerStage)) === null || _a === void 0 ? void 0 : _a.recordRefresh('ensureFreshCalls');
+    (_a = getActiveStageStatePerfMonitor(scope.ownerStage)) === null || _a === void 0 ? void 0 : _a.recordRefresh('ensureFreshCalls');
     if (scope.parentScope) {
         ensureSharedStateScopeFresh(scope.parentScope);
     }
@@ -10397,7 +10375,7 @@ function scheduleStageSharedStateRefresh(stage) {
     if (!stage || stage.releaseStatus === 'released') {
         return;
     }
-    (_a = getStageStatePerfMonitor(stage)) === null || _a === void 0 ? void 0 : _a.recordRefresh('renderScheduled');
+    (_a = getActiveStageStatePerfMonitor(stage)) === null || _a === void 0 ? void 0 : _a.recordRefresh('renderScheduled');
     stage.renderNextFrame();
 }
 function enqueueGraphicSharedStateRefresh(stage, graphic) {
@@ -10408,7 +10386,7 @@ function enqueueGraphicSharedStateRefresh(stage, graphic) {
     const pending = (_a = stage._pendingSharedStateRefreshGraphics) !== null && _a !== void 0 ? _a : (stage._pendingSharedStateRefreshGraphics = new Set());
     if (!pending.has(graphic)) {
         pending.add(graphic);
-        const perfMonitor = getStageStatePerfMonitor(stage);
+        const perfMonitor = getActiveStageStatePerfMonitor(stage);
         perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordRefresh('queuedGraphics');
         perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordAllocation('refreshQueuePushes');
     }
@@ -10431,7 +10409,7 @@ function flushStageSharedStateRefresh(stage) {
     if (!pending || !pending.size) {
         return;
     }
-    const perfMonitor = getStageStatePerfMonitor(stage);
+    const perfMonitor = getActiveStageStatePerfMonitor(stage);
     const start = perfMonitor ? performance.now() : 0;
     const graphics = Array.from(pending.values());
     pending.clear();
@@ -10443,6 +10421,9 @@ function flushStageSharedStateRefresh(stage) {
         if (graphic.stage !== stage) {
             return;
         }
+        if (!graphic.sharedStateDirty) {
+            return;
+        }
         const refresh = graphic.refreshSharedStateBeforeRender;
         if (typeof refresh === 'function') {
             refresh.call(graphic);
@@ -10495,9 +10476,24 @@ const builtinTextureTypes = new Set([
     'grid',
     'wave'
 ]);
+const FULL_STATE_DEFINITION_KEYS = new Set([
+    'name',
+    'patch',
+    'priority',
+    'exclude',
+    'suppress',
+    'resolver',
+    'declaredAffectedKeys'
+]);
 const point = new Point();
+const EMPTY_STATE_NAMES = [];
+const BROAD_UPDATE_CATEGORY = UpdateCategory.PAINT |
+    UpdateCategory.SHAPE |
+    UpdateCategory.BOUNDS |
+    UpdateCategory.TRANSFORM |
+    UpdateCategory.LAYOUT;
 function isPlainObjectValue(value) {
-    return typeof value === 'object' && value != null && !isArray(value);
+    return typeof value === 'object' && value != null && !Array.isArray(value);
 }
 function cloneAttributeValue(value) {
     if (!isPlainObjectValue(value)) {
@@ -10511,18 +10507,6 @@ function cloneAttributeValue(value) {
     });
     return clone;
 }
-function cloneSimpleAttributeRecord(value) {
-    if (!isPlainObjectValue(value)) {
-        return value;
-    }
-    return Object.assign({}, value);
-}
-function shouldUseSimpleAttributeFastPath(value) {
-    if (!isPlainObjectValue(value)) {
-        return false;
-    }
-    return !Object.keys(value).some(key => isPlainObjectValue(value[key]));
-}
 function cloneAttributeSurface(value) {
     if (!isPlainObjectValue(value)) {
         return value;
@@ -10535,6 +10519,15 @@ function cloneAttributeSurface(value) {
     });
     return clone;
 }
+function areAttributeValuesEqual(left, right) {
+    if (left === right) {
+        return true;
+    }
+    if (!isPlainObjectValue(left) && !isPlainObjectValue(right) && !Array.isArray(left) && !Array.isArray(right)) {
+        return false;
+    }
+    return isEqual(left, right);
+}
 function deepMergeAttributeValue(base, value) {
     var _a;
     const result = (_a = cloneAttributeValue(base)) !== null && _a !== void 0 ? _a : {};
@@ -10602,24 +10595,29 @@ class Graphic extends Node {
     get globalTransMatrix() {
         return this.tryUpdateGlobalTransMatrix(true);
     }
+    get baseAttributes() {
+        var _a;
+        return (_a = this._baseAttributes) !== null && _a !== void 0 ? _a : this.attribute;
+    }
+    set baseAttributes(value) {
+        if (value === this.attribute) {
+            this._baseAttributes = undefined;
+            return;
+        }
+        this._baseAttributes = value;
+    }
     constructor(params = {}) {
         var _a;
         super();
-        this.resolverEpoch = 0;
         this._AABBBounds = new AABBBounds();
         this._updateTag = UpdateTag.INIT;
-        const useSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath(params);
-        const initialBaseAttributes = (useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(params) : cloneAttributeValue(params));
-        this.baseAttributes = initialBaseAttributes;
-        this.attribute = (useSimpleAttributeFastPath
-            ? cloneSimpleAttributeRecord(initialBaseAttributes)
-            : cloneAttributeSurface(initialBaseAttributes));
+        this.attribute = params;
         this.valid = this.isValid();
         this.updateAABBBoundsStamp = 0;
         if (params.background) {
             this.loadImage((_a = params.background.background) !== null && _a !== void 0 ? _a : params.background, true);
         }
-        if (isExternalTexture(params.texture)) {
+        if (params.texture && isExternalTexture(params.texture)) {
             this.loadImage(params.texture, false);
         }
         if (params.shadowGraphic) {
@@ -10629,8 +10627,11 @@ class Graphic extends Node {
     get normalAttrs() {
         return this.baseAttributes;
     }
-    set normalAttrs(value) {
-        this._deprecatedNormalAttrsView = value !== null && value !== void 0 ? value : undefined;
+    set normalAttrs(_value) {
+    }
+    getBaseAttributesStorage() {
+        var _a;
+        return (_a = this._baseAttributes) !== null && _a !== void 0 ? _a : this.attribute;
     }
     getGraphicService() {
         var _a, _b;
@@ -10689,13 +10690,31 @@ class Graphic extends Node {
         }
         return true;
     }
-    syncSharedStateActiveRegistrations() {
+    syncSharedStateScopeBindingOnTreeChange(markDirty = true) {
         var _a, _b;
-        const nextScopes = ((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) && this.boundSharedStateScope
-            ? new Set(collectSharedStateScopeChain(this.boundSharedStateScope))
-            : new Set();
-        const previousScopes = (_b = this.registeredActiveScopes) !== null && _b !== void 0 ? _b : new Set();
-        previousScopes.forEach(scope => {
+        if (!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) &&
+            !this.boundSharedStateScope &&
+            !((_b = this.registeredActiveScopes) === null || _b === void 0 ? void 0 : _b.size) &&
+            !this.sharedStateDirty) {
+            return false;
+        }
+        return this.syncSharedStateScopeBindingFromTree(markDirty);
+    }
+    syncSharedStateActiveRegistrations() {
+        var _a;
+        const previousScopes = this.registeredActiveScopes;
+        if (!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) || !this.boundSharedStateScope) {
+            if (previousScopes === null || previousScopes === void 0 ? void 0 : previousScopes.size) {
+                previousScopes.forEach(scope => {
+                    scope.subtreeActiveDescendants.delete(this);
+                });
+                previousScopes.clear();
+            }
+            this.registeredActiveScopes = undefined;
+            return;
+        }
+        const nextScopes = new Set(collectSharedStateScopeChain(this.boundSharedStateScope));
+        previousScopes === null || previousScopes === void 0 ? void 0 : previousScopes.forEach(scope => {
             if (!nextScopes.has(scope)) {
                 scope.subtreeActiveDescendants.delete(this);
             }
@@ -10725,7 +10744,7 @@ class Graphic extends Node {
             this.setStage(stage, layer);
             return;
         }
-        this.syncSharedStateScopeBindingFromTree();
+        this.syncSharedStateScopeBindingOnTreeChange();
     }
     refreshSharedStateBeforeRender() {
         var _a;
@@ -10740,7 +10759,7 @@ class Graphic extends Node {
         this.recomputeCurrentStatePatch();
         this.stopStateAnimates();
         this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
-        this._emitCustomEvent('afterStateUpdate', { type: AttributeUpdateType.STATE });
+        this.emitStateUpdateEvent();
         this.sharedStateDirty = false;
     }
     getLocalStatesVersion() {
@@ -10822,23 +10841,22 @@ class Graphic extends Node {
         };
     }
     recomputeCurrentStatePatch() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length)) {
             this.effectiveStates = [];
             this.resolvedStatePatch = undefined;
             this.syncSharedStateActiveRegistrations();
             return;
         }
-        const stateResolveBaseAttrs = ((_b = this.baseAttributes) !== null && _b !== void 0 ? _b : this.attribute);
-        const stateModel = this.createStateModel();
-        (_c = this.stateEngine) === null || _c === void 0 ? void 0 : _c.setResolveContext(this, stateResolveBaseAttrs);
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
+        const stateModel = this.createStateModel(stateResolveBaseAttrs);
         const transition = stateModel.useStates(this.currentStates);
-        const effectiveStates = (_d = transition.effectiveStates) !== null && _d !== void 0 ? _d : transition.states;
+        const effectiveStates = (_b = transition.effectiveStates) !== null && _b !== void 0 ? _b : transition.states;
         const resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions
             ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
         this.currentStates = transition.states;
         this.effectiveStates = [...effectiveStates];
-        this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs);
+        this.resolvedStatePatch = resolvedStateAttrs;
         this.syncSharedStateActiveRegistrations();
     }
     buildStaticAttributeSnapshot() {
@@ -10859,6 +10877,37 @@ class Graphic extends Node {
         });
         return snapshot;
     }
+    buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+        const extraAttrs = {};
+        if (!previousResolvedStatePatch) {
+            return extraAttrs;
+        }
+        const snapshot = this.buildStaticAttributeSnapshot();
+        const staticTargetAttrs = snapshot;
+        Object.keys(previousResolvedStatePatch).forEach(key => {
+            const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
+            if (hasTargetAttr && targetStateAttrs[key] !== undefined) {
+                return;
+            }
+            const assignFallbackAttr = (value) => {
+                if (value === undefined && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs)) {
+                    return;
+                }
+                extraAttrs[key] = value === undefined ? value : cloneAttributeValue(value);
+            };
+            if (hasTargetAttr) {
+                assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+                return;
+            }
+            if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
+                const snapshotValue = snapshot[key];
+                assignFallbackAttr(snapshotValue === undefined ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
+                return;
+            }
+            assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+        });
+        return extraAttrs;
+    }
     syncObjectToSnapshot(target, snapshot) {
         const delta = new Map();
         const keySet = new Set([...Object.keys(target), ...Object.keys(snapshot)]);
@@ -10873,7 +10922,7 @@ class Graphic extends Node {
                 return;
             }
             const nextValue = snapshot[key];
-            if (isEqual(previousValue, nextValue)) {
+            if (areAttributeValuesEqual(previousValue, nextValue)) {
                 return;
             }
             delta.set(key, { prev: previousValue, next: nextValue });
@@ -10882,9 +10931,13 @@ class Graphic extends Node {
         return delta;
     }
     _syncAttribute() {
+        if (this.attribute === this.baseAttributes && this.resolvedStatePatch) {
+            this.detachAttributeFromBaseAttributes();
+        }
         const snapshot = this.buildStaticAttributeSnapshot();
         const delta = this.syncObjectToSnapshot(this.attribute, snapshot);
         this.valid = this.isValid();
+        this.attributeMayContainTransientAttrs = false;
         return delta;
     }
     _syncFinalAttributeFromStaticTruth() {
@@ -10895,7 +10948,20 @@ class Graphic extends Node {
         const snapshot = this.buildStaticAttributeSnapshot();
         this.syncObjectToSnapshot(target, snapshot);
     }
-    submitUpdateByDelta(delta, forceUpdateTag = false) {
+    mergeAttributeDeltaCategory(category, key, prev, next) {
+        var _a;
+        let nextCategory = key === 'stroke' || key === 'shadowBlur'
+            ? classifyAttributeDelta(key, prev, next)
+            : (_a = ATTRIBUTE_CATEGORY[key]) !== null && _a !== void 0 ? _a : UpdateCategory.PAINT;
+        if (nextCategory & UpdateCategory.PICK) {
+            nextCategory |= UpdateCategory.BOUNDS;
+        }
+        if (nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key)) {
+            nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS;
+        }
+        return category | nextCategory;
+    }
+    submitUpdateByCategory(category, forceUpdateTag = false) {
         var _a;
         if (forceUpdateTag) {
             this.addUpdateShapeAndBoundsTag();
@@ -10903,19 +10969,15 @@ class Graphic extends Node {
             this.addUpdateLayoutTag();
             return;
         }
-        let category = UpdateCategory.NONE;
-        delta.forEach((entry, key) => {
-            let nextCategory = classifyAttributeDelta(key, entry.prev, entry.next);
-            if (nextCategory & UpdateCategory.PICK) {
-                nextCategory |= UpdateCategory.BOUNDS;
-            }
-            if (nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key)) {
-                nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS;
-            }
-            category |= nextCategory;
-        });
         if (category !== UpdateCategory.NONE) {
-            (_a = getStageStatePerfMonitor(this.stage)) === null || _a === void 0 ? void 0 : _a.recordCategory(category);
+            const stage = this.stage;
+            if (stage) {
+                (_a = getActiveStageStatePerfMonitor(stage)) === null || _a === void 0 ? void 0 : _a.recordCategory(category);
+            }
+        }
+        if ((category & BROAD_UPDATE_CATEGORY) === BROAD_UPDATE_CATEGORY) {
+            this.addBroadUpdateTag();
+            return;
         }
         if (category & UpdateCategory.SHAPE) {
             this.addUpdateShapeAndBoundsTag();
@@ -10933,36 +10995,147 @@ class Graphic extends Node {
             this.addUpdateLayoutTag();
         }
     }
+    submitUpdateByDelta(delta, forceUpdateTag = false) {
+        let category = UpdateCategory.NONE;
+        delta.forEach((entry, key) => {
+            category = this.mergeAttributeDeltaCategory(category, key, entry.prev, entry.next);
+        });
+        this.submitUpdateByCategory(category, forceUpdateTag);
+    }
+    submitTouchedKeyUpdate(keys, forceUpdateTag = false) {
+        this.submitTouchedUpdate(forceUpdateTag || this.needUpdateTags(keys));
+    }
+    submitTouchedUpdate(needsShapeAndBounds) {
+        if (!this.updateShapeAndBoundsTagSetted() && needsShapeAndBounds) {
+            this.addUpdateShapeAndBoundsTag();
+        }
+        else {
+            this.addUpdateBoundTag();
+        }
+        this.addUpdatePositionTag();
+        this.addUpdateLayoutTag();
+    }
     commitBaseAttributeMutation(forceUpdateTag = false, context) {
-        var _a, _b;
+        var _a, _b, _c;
         if ((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) {
-            this.resolverEpoch += 1;
-            (_b = this.stateEngine) === null || _b === void 0 ? void 0 : _b.invalidateResolverCache();
+            this.resolverEpoch = ((_b = this.resolverEpoch) !== null && _b !== void 0 ? _b : 0) + 1;
+            (_c = this.stateEngine) === null || _c === void 0 ? void 0 : _c.invalidateResolverCache();
             this.recomputeCurrentStatePatch();
         }
         const delta = this._syncAttribute();
         this.submitUpdateByDelta(delta, forceUpdateTag);
         this.onAttributeUpdate(context);
     }
+    canCommitBaseAttributesByTouchedKeys() {
+        var _a, _b;
+        if (((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) || this.resolvedStatePatch || this.attributeMayContainTransientAttrs) {
+            return false;
+        }
+        if (!((_b = this.animates) === null || _b === void 0 ? void 0 : _b.size) && !this._animationStateManager) {
+            return true;
+        }
+        return !this.hasAnyTrackedAnimate();
+    }
+    detachAttributeFromBaseAttributes() {
+        if (this.attribute === this.baseAttributes) {
+            this._baseAttributes = this.attribute;
+            this.attribute = cloneAttributeSurface(this.attribute);
+        }
+    }
+    commitInternalBaseAttributes(params, context) {
+        if (!params || !Object.keys(params).length) {
+            return;
+        }
+        if (this.canCommitBaseAttributesByTouchedKeys()) {
+            this.commitBaseAttributesByTouchedKeys(params, false, context);
+            return;
+        }
+        this.detachAttributeFromBaseAttributes();
+        this.applyBaseAttributes(params);
+        this.commitBaseAttributeMutation(false, context);
+    }
+    commitBaseAttributesByTouchedKeys(params, forceUpdateTag = false, context) {
+        const source = params;
+        const baseAttributes = this.getBaseAttributesStorage();
+        let hasKeys = false;
+        let needsShapeAndBounds = forceUpdateTag;
+        for (const key in source) {
+            if (!Object.prototype.hasOwnProperty.call(source, key)) {
+                continue;
+            }
+            hasKeys = true;
+            baseAttributes[key] = source[key];
+            if (!needsShapeAndBounds && this.needUpdateTag(key)) {
+                needsShapeAndBounds = true;
+            }
+        }
+        if (!hasKeys) {
+            return;
+        }
+        this.attribute = baseAttributes;
+        this._baseAttributes = undefined;
+        this.valid = this.isValid();
+        this.attributeMayContainTransientAttrs = false;
+        this.submitTouchedUpdate(needsShapeAndBounds);
+        this.onAttributeUpdate(context);
+    }
+    commitBaseAttributeBySingleKey(key, value, forceUpdateTag = false, context) {
+        this.getBaseAttributesStorage()[key] = value;
+        this.attribute = this.getBaseAttributesStorage();
+        this._baseAttributes = undefined;
+        this.valid = this.isValid();
+        this.attributeMayContainTransientAttrs = false;
+        this.submitTouchedUpdate(forceUpdateTag || this.needUpdateTag(key));
+        this.onAttributeUpdate(context);
+    }
     applyBaseAttributes(params) {
         const keys = Object.keys(params);
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
-            this.baseAttributes[key] = cloneAttributeValue(params[key]);
+            this.getBaseAttributesStorage()[key] = params[key];
         }
     }
+    applyAnimationTransientAttributes(params, forceUpdateTag = false, context) {
+        const source = params;
+        let target;
+        let needsShapeAndBounds = forceUpdateTag;
+        for (const key in source) {
+            if (!Object.prototype.hasOwnProperty.call(source, key)) {
+                continue;
+            }
+            if (!target) {
+                this.detachAttributeFromBaseAttributes();
+                target = this.attribute;
+            }
+            target[key] = source[key];
+            if (!needsShapeAndBounds && this.needUpdateTag(key)) {
+                needsShapeAndBounds = true;
+            }
+        }
+        if (!target) {
+            return;
+        }
+        this.attributeMayContainTransientAttrs = true;
+        this.valid = this.isValid();
+        this.submitTouchedUpdate(needsShapeAndBounds);
+        this.onAttributeUpdate(context);
+    }
     applyTransientAttributes(params, forceUpdateTag = false, context) {
+        this.detachAttributeFromBaseAttributes();
         const delta = new Map();
         const keys = Object.keys(params);
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
             const previousValue = this.attribute[key];
             const nextValue = params[key];
-            if (isEqual(previousValue, nextValue)) {
+            if (areAttributeValuesEqual(previousValue, nextValue)) {
                 continue;
             }
             delta.set(key, { prev: previousValue, next: nextValue });
-            this.attribute[key] = cloneAttributeValue(nextValue);
+            this.attribute[key] = nextValue;
+        }
+        if (delta.size) {
+            this.attributeMayContainTransientAttrs = true;
         }
         this.valid = this.isValid();
         this.submitUpdateByDelta(delta, forceUpdateTag);
@@ -10974,6 +11147,87 @@ class Graphic extends Node {
         this.submitUpdateByDelta(delta);
         this.onAttributeUpdate(context);
     }
+    collectStatePatchDeltaKeys(previousPatch, nextPatch) {
+        const keys = previousPatch ? Object.keys(previousPatch) : [];
+        if (!nextPatch) {
+            return keys;
+        }
+        for (const key in nextPatch) {
+            if (Object.prototype.hasOwnProperty.call(nextPatch, key) &&
+                !Object.prototype.hasOwnProperty.call(previousPatch !== null && previousPatch !== void 0 ? previousPatch : {}, key)) {
+                keys.push(key);
+            }
+        }
+        return keys;
+    }
+    getStaticTruthValueForStateKey(key, nextPatch) {
+        var _a;
+        const baseAttributes = ((_a = this.baseAttributes) !== null && _a !== void 0 ? _a : {});
+        const patch = nextPatch;
+        if (patch && Object.prototype.hasOwnProperty.call(patch, key)) {
+            const patchValue = patch[key];
+            const baseValue = baseAttributes[key];
+            if (this.stateMergeMode === 'deep' && isPlainObjectValue(baseValue) && isPlainObjectValue(patchValue)) {
+                return {
+                    hasValue: true,
+                    value: deepMergeAttributeValue(baseValue, patchValue)
+                };
+            }
+            return {
+                hasValue: true,
+                value: patchValue
+            };
+        }
+        if (Object.prototype.hasOwnProperty.call(baseAttributes, key)) {
+            return {
+                hasValue: true,
+                value: baseAttributes[key]
+            };
+        }
+        return {
+            hasValue: false,
+            value: undefined
+        };
+    }
+    syncStatePatchDeltaToTarget(target, keys, nextPatch, collectCategory = false) {
+        let category = UpdateCategory.NONE;
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            const previousValue = target[key];
+            const next = this.getStaticTruthValueForStateKey(key, nextPatch);
+            if (!next.hasValue) {
+                if (Object.prototype.hasOwnProperty.call(target, key)) {
+                    delete target[key];
+                    if (collectCategory) {
+                        category = this.mergeAttributeDeltaCategory(category, key, previousValue, undefined);
+                    }
+                }
+                continue;
+            }
+            if (areAttributeValuesEqual(previousValue, next.value)) {
+                continue;
+            }
+            const nextValue = cloneAttributeValue(next.value);
+            target[key] = nextValue;
+            if (collectCategory) {
+                category = this.mergeAttributeDeltaCategory(category, key, previousValue, nextValue);
+            }
+        }
+        return category;
+    }
+    restoreAttributeFromStatePatchDelta(previousPatch, nextPatch, context) {
+        this.detachAttributeFromBaseAttributes();
+        const keys = this.collectStatePatchDeltaKeys(previousPatch, nextPatch);
+        const finalAttribute = this.finalAttribute;
+        if (finalAttribute) {
+            this.syncStatePatchDeltaToTarget(finalAttribute, keys, nextPatch, false);
+        }
+        const category = this.syncStatePatchDeltaToTarget(this.attribute, keys, nextPatch, true);
+        this.valid = this.isValid();
+        this.attributeMayContainTransientAttrs = false;
+        this.submitUpdateByCategory(category);
+        this.onAttributeUpdate(context);
+    }
     setMode(mode) {
         mode === '3d' ? this.set3dMode() : this.set2dMode();
     }
@@ -10998,6 +11252,7 @@ class Graphic extends Node {
         return point;
     }
     onAnimateBind(animate) {
+        this.detachAttributeFromBaseAttributes();
         this._emitCustomEvent('animate-bind', animate);
     }
     visitTrackedAnimates(cb) {
@@ -11020,8 +11275,33 @@ class Graphic extends Node {
         }
         return !!((_a = this.animates) === null || _a === void 0 ? void 0 : _a.size);
     }
+    mayHaveTrackedAnimates() {
+        var _a;
+        return !!((_a = this.animates) === null || _a === void 0 ? void 0 : _a.size) || !!this._animationStateManager;
+    }
     tryUpdateAABBBounds() {
+        if (!this.shadowRoot && !(this._updateTag & UpdateTag.UPDATE_BOUNDS)) {
+            return this._AABBBounds;
+        }
         const full = this.attribute.boundsMode === 'imprecise';
+        if (!this.shadowRoot) {
+            const graphicService = this.getGraphicService();
+            const graphicTheme = this.getGraphicTheme();
+            if (!graphicService.validCheck(this.attribute, graphicTheme, this._AABBBounds, this)) {
+                return this._AABBBounds;
+            }
+            if (!this.valid) {
+                this._AABBBounds.clear();
+                return this._AABBBounds;
+            }
+            graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
+            const bounds = this.doUpdateAABBBounds(full, graphicTheme);
+            graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, true);
+            if (this.attribute.boundsMode === 'empty') {
+                bounds.clear();
+            }
+            return bounds;
+        }
         if (!this.shouldUpdateAABBBounds()) {
             return this._AABBBounds;
         }
@@ -11138,13 +11418,13 @@ class Graphic extends Node {
         Graphic.userSymbolMap[symbolType] = _parsedPath;
         return _parsedPath;
     }
-    doUpdateAABBBounds(full) {
+    doUpdateAABBBounds(full, graphicTheme) {
         this.updateAABBBoundsStamp++;
-        const graphicTheme = this.getGraphicTheme();
+        const resolvedGraphicTheme = graphicTheme !== null && graphicTheme !== void 0 ? graphicTheme : this.getGraphicTheme();
         this._AABBBounds.clear();
         const attribute = this.attribute;
-        const bounds = this.updateAABBBounds(attribute, graphicTheme, this._AABBBounds, full);
-        const { boundsPadding = graphicTheme.boundsPadding } = attribute;
+        const bounds = this.updateAABBBounds(attribute, resolvedGraphicTheme, this._AABBBounds, full);
+        const { boundsPadding = resolvedGraphicTheme.boundsPadding } = attribute;
         const paddingArray = parsePadding(boundsPadding);
         if (paddingArray) {
             bounds.expand(paddingArray);
@@ -11255,16 +11535,101 @@ class Graphic extends Node {
         this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     }
     setAttributesAndPreventAnimate(params, forceUpdateTag = false, context, ignorePriority) {
+        if (!params) {
+            return;
+        }
+        const keys = Object.keys(params);
+        this.captureTransientFromAttrsBeforePreventAnimate(params, keys, context);
         this.visitTrackedAnimates(animate => {
             if (animate.priority === Infinity && !ignorePriority) {
                 return;
             }
-            Object.keys(params).forEach(key => {
-                animate.preventAttr(key);
-            });
+            animate.preventAttrs(keys);
         });
         this.applyTransientAttributes(params, forceUpdateTag, context);
     }
+    captureTransientFromAttrsBeforePreventAnimate(params, keys, context) {
+        var _a, _b;
+        const graphicContext = this.context;
+        const diffAttrs = (_a = graphicContext === null || graphicContext === void 0 ? void 0 : graphicContext.diffAttrs) !== null && _a !== void 0 ? _a : params;
+        const updateType = context === null || context === void 0 ? void 0 : context.type;
+        if (!keys.length ||
+            !diffAttrs ||
+            updateType === AttributeUpdateType.STATE ||
+            (updateType != null &&
+                updateType >= AttributeUpdateType.ANIMATE_BIND &&
+                updateType <= AttributeUpdateType.ANIMATE_END)) {
+            return;
+        }
+        const sameDiffAttrs = this.transientFromAttrsBeforePreventAnimateDiffAttrs === diffAttrs;
+        let fromAttrs = sameDiffAttrs
+            ? (_b = this.transientFromAttrsBeforePreventAnimate) !== null && _b !== void 0 ? _b : null
+            : null;
+        if (!sameDiffAttrs) {
+            this.transientFromAttrsBeforePreventAnimate = null;
+            this.transientFromAttrsBeforePreventAnimateDiffAttrs = null;
+        }
+        let captured = false;
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (!Object.prototype.hasOwnProperty.call(diffAttrs, key)) {
+                continue;
+            }
+            const previousValue = this.attribute[key];
+            const nextValue = params[key];
+            if (isEqual(previousValue, nextValue)) {
+                continue;
+            }
+            fromAttrs !== null && fromAttrs !== void 0 ? fromAttrs : (fromAttrs = {});
+            fromAttrs[key] = cloneAttributeValue(previousValue);
+            captured = true;
+        }
+        if (captured) {
+            this.transientFromAttrsBeforePreventAnimate = fromAttrs;
+            this.transientFromAttrsBeforePreventAnimateDiffAttrs = diffAttrs;
+        }
+    }
+    consumeTransientFromAttrsBeforePreventAnimate(diffAttrs) {
+        const transientFromAttrs = this.transientFromAttrsBeforePreventAnimate;
+        const sourceDiffAttrs = this.transientFromAttrsBeforePreventAnimateDiffAttrs;
+        if (!transientFromAttrs || !sourceDiffAttrs) {
+            return null;
+        }
+        for (const key in diffAttrs) {
+            if (Object.prototype.hasOwnProperty.call(diffAttrs, key) &&
+                (!Object.prototype.hasOwnProperty.call(sourceDiffAttrs, key) || !isEqual(sourceDiffAttrs[key], diffAttrs[key]))) {
+                return null;
+            }
+        }
+        let fromAttrs = null;
+        let remaining = false;
+        for (const key in transientFromAttrs) {
+            if (!Object.prototype.hasOwnProperty.call(transientFromAttrs, key)) {
+                continue;
+            }
+            if (Object.prototype.hasOwnProperty.call(diffAttrs, key)) {
+                fromAttrs !== null && fromAttrs !== void 0 ? fromAttrs : (fromAttrs = {});
+                fromAttrs[key] = transientFromAttrs[key];
+                continue;
+            }
+            remaining = true;
+        }
+        if (remaining) {
+            const nextTransientFromAttrs = {};
+            for (const key in transientFromAttrs) {
+                if (Object.prototype.hasOwnProperty.call(transientFromAttrs, key) &&
+                    !Object.prototype.hasOwnProperty.call(diffAttrs, key)) {
+                    nextTransientFromAttrs[key] = transientFromAttrs[key];
+                }
+            }
+            this.transientFromAttrsBeforePreventAnimate = nextTransientFromAttrs;
+        }
+        else {
+            this.transientFromAttrsBeforePreventAnimate = null;
+            this.transientFromAttrsBeforePreventAnimateDiffAttrs = null;
+        }
+        return fromAttrs;
+    }
     setAttributes(params, forceUpdateTag = false, context) {
         if (!params) {
             return;
@@ -11274,7 +11639,7 @@ class Graphic extends Node {
         if (params.background) {
             this.loadImage(params.background, true);
         }
-        if (isExternalTexture(params.texture)) {
+        if (params.texture && isExternalTexture(params.texture)) {
             this.loadImage(params.texture, false);
         }
         if (params.shadowGraphic) {
@@ -11283,14 +11648,25 @@ class Graphic extends Node {
         this._setAttributes(params, forceUpdateTag, context);
     }
     _setAttributes(params, forceUpdateTag = false, context) {
+        if (this.canCommitBaseAttributesByTouchedKeys()) {
+            this.commitBaseAttributesByTouchedKeys(params, forceUpdateTag, context);
+            return;
+        }
+        this.detachAttributeFromBaseAttributes();
         this.applyBaseAttributes(params);
         this.commitBaseAttributeMutation(forceUpdateTag, context);
     }
     setAttribute(key, value, forceUpdateTag, context) {
         const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({ [key]: value }, this.attribute, key, context);
         if (!params) {
-            this.applyBaseAttributes({ [key]: value });
-            this.commitBaseAttributeMutation(!!forceUpdateTag, context);
+            if (this.canCommitBaseAttributesByTouchedKeys()) {
+                this.commitBaseAttributeBySingleKey(key, value, !!forceUpdateTag, context);
+            }
+            else {
+                const nextAttrs = { [key]: value };
+                this.applyBaseAttributes(nextAttrs);
+                this.commitBaseAttributeMutation(!!forceUpdateTag, context);
+            }
         }
         else {
             this._setAttributes(params, forceUpdateTag, context);
@@ -11327,16 +11703,15 @@ class Graphic extends Node {
         const context = { type: AttributeUpdateType.INIT };
         params =
             (this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context)) || params;
-        this.baseAttributes = cloneAttributeValue(params);
-        if (!this.attribute) {
-            this.attribute = {};
-        }
+        this.attribute = params;
+        this._baseAttributes = undefined;
         this.resolvedStatePatch = undefined;
-        this._syncAttribute();
+        this.attributeMayContainTransientAttrs = false;
+        this.valid = this.isValid();
         if (params.background) {
             this.loadImage(params.background, true);
         }
-        if (isExternalTexture(params.texture)) {
+        if (params.texture && isExternalTexture(params.texture)) {
             this.loadImage(params.texture, false);
         }
         if (params.shadowGraphic) {
@@ -11361,18 +11736,20 @@ class Graphic extends Node {
             y = params.y;
             delete params.x;
             delete params.y;
-            this.applyBaseAttributes(params);
         }
         const attribute = this.baseAttributes;
         const postMatrix = attribute.postMatrix;
+        const nextAttrs = (params || {});
         if (!postMatrix) {
-            attribute.x = ((_a = attribute.x) !== null && _a !== void 0 ? _a : DefaultTransform.x) + x;
-            attribute.y = ((_b = attribute.y) !== null && _b !== void 0 ? _b : DefaultTransform.y) + y;
+            nextAttrs.x = ((_a = attribute.x) !== null && _a !== void 0 ? _a : DefaultTransform.x) + x;
+            nextAttrs.y = ((_b = attribute.y) !== null && _b !== void 0 ? _b : DefaultTransform.y) + y;
         }
         else {
-            application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y);
+            const nextPostMatrix = postMatrix.clone();
+            application.transformUtil.fromMatrix(nextPostMatrix, nextPostMatrix).translate(x, y);
+            nextAttrs.postMatrix = nextPostMatrix;
         }
-        this.commitBaseAttributeMutation(false, context);
+        this.commitInternalBaseAttributes(nextAttrs, context);
         return this;
     }
     translateTo(x, y) {
@@ -11386,13 +11763,10 @@ class Graphic extends Node {
         const params = this.onBeforeAttributeUpdate &&
             this.onBeforeAttributeUpdate({ x, y }, this.attribute, tempConstantXYKey, context);
         if (params) {
-            this.applyBaseAttributes(params);
-            this.commitBaseAttributeMutation(false, context);
+            this.commitInternalBaseAttributes(params, context);
             return this;
         }
-        attribute.x = x;
-        attribute.y = y;
-        this.commitBaseAttributeMutation(false, context);
+        this.commitInternalBaseAttributes({ x, y }, context);
         return this;
     }
     scale(scaleX, scaleY, scaleCenter) {
@@ -11410,22 +11784,25 @@ class Graphic extends Node {
             scaleY = params.scaleY;
             delete params.scaleX;
             delete params.scaleY;
-            this.applyBaseAttributes(params);
         }
         const attribute = this.baseAttributes;
+        const nextAttrs = (params || {});
         if (!scaleCenter) {
-            attribute.scaleX = ((_a = attribute.scaleX) !== null && _a !== void 0 ? _a : DefaultTransform.scaleX) * scaleX;
-            attribute.scaleY = ((_b = attribute.scaleY) !== null && _b !== void 0 ? _b : DefaultTransform.scaleY) * scaleY;
+            nextAttrs.scaleX = ((_a = attribute.scaleX) !== null && _a !== void 0 ? _a : DefaultTransform.scaleX) * scaleX;
+            nextAttrs.scaleY = ((_b = attribute.scaleY) !== null && _b !== void 0 ? _b : DefaultTransform.scaleY) * scaleY;
         }
         else {
-            let { postMatrix } = this.attribute;
+            let { postMatrix } = this.baseAttributes;
             if (!postMatrix) {
                 postMatrix = new Matrix();
-                attribute.postMatrix = postMatrix;
+            }
+            else {
+                postMatrix = postMatrix.clone();
             }
             application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
+            nextAttrs.postMatrix = postMatrix;
         }
-        this.commitBaseAttributeMutation(false, context);
+        this.commitInternalBaseAttributes(nextAttrs, context);
         return this;
     }
     scaleTo(scaleX, scaleY) {
@@ -11439,13 +11816,10 @@ class Graphic extends Node {
         const params = this.onBeforeAttributeUpdate &&
             this.onBeforeAttributeUpdate({ scaleX, scaleY }, this.attribute, tempConstantScaleXYKey, context);
         if (params) {
-            this.applyBaseAttributes(params);
-            this.commitBaseAttributeMutation(false, context);
+            this.commitInternalBaseAttributes(params, context);
             return this;
         }
-        attribute.scaleX = scaleX;
-        attribute.scaleY = scaleY;
-        this.commitBaseAttributeMutation(false, context);
+        this.commitInternalBaseAttributes({ scaleX, scaleY }, context);
         return this;
     }
     rotate(angle, rotateCenter) {
@@ -11458,21 +11832,24 @@ class Graphic extends Node {
             this.onBeforeAttributeUpdate({ angle, rotateCenter }, this.attribute, tempConstantAngleKey, context);
         if (params) {
             delete params.angle;
-            this.applyBaseAttributes(params);
         }
         const attribute = this.baseAttributes;
+        const nextAttrs = (params || {});
         if (!rotateCenter) {
-            attribute.angle = ((_a = attribute.angle) !== null && _a !== void 0 ? _a : DefaultTransform.angle) + angle;
+            nextAttrs.angle = ((_a = attribute.angle) !== null && _a !== void 0 ? _a : DefaultTransform.angle) + angle;
         }
         else {
             let { postMatrix } = this.baseAttributes;
             if (!postMatrix) {
                 postMatrix = new Matrix();
-                this.baseAttributes.postMatrix = postMatrix;
+            }
+            else {
+                postMatrix = postMatrix.clone();
             }
             application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
+            nextAttrs.postMatrix = postMatrix;
         }
-        this.commitBaseAttributeMutation(false, context);
+        this.commitInternalBaseAttributes(nextAttrs, context);
         return this;
     }
     rotateTo(angle) {
@@ -11486,12 +11863,10 @@ class Graphic extends Node {
         const params = this.onBeforeAttributeUpdate &&
             this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
         if (params) {
-            this.applyBaseAttributes(params);
-            this.commitBaseAttributeMutation(false, context);
+            this.commitInternalBaseAttributes(params, context);
             return this;
         }
-        attribute.angle = angle;
-        this.commitBaseAttributeMutation(false, context);
+        this.commitInternalBaseAttributes({ angle }, context);
         return this;
     }
     skewTo(b, c) {
@@ -11525,9 +11900,18 @@ class Graphic extends Node {
     }
     getState(stateName) {
         var _a;
-        return (_a = this.states) === null || _a === void 0 ? void 0 : _a[stateName];
+        return (_a = this.states) === null || _a === void 0 ? void 0 : _a[stateName];
+    }
+    getStateResolveBaseAttrs() {
+        var _a;
+        return ((_a = this.baseAttributes) !== null && _a !== void 0 ? _a : this.attribute);
+    }
+    syncStateResolveContext(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        var _a;
+        (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.setResolveContext(this, stateResolveBaseAttrs);
+        return stateResolveBaseAttrs;
     }
-    createStateModel() {
+    createStateModel(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
         const { compiledDefinitions, stateProxyEligibility, stateProxyModeKey } = this.resolveEffectiveCompiledDefinitions();
         this.compiledStateDefinitions = compiledDefinitions;
         if (!compiledDefinitions) {
@@ -11555,6 +11939,7 @@ class Graphic extends Node {
             this.stateEngineMergeMode = this.stateMergeMode;
             this.stateEngineStateProxyModeKey = stateProxyModeKey;
         }
+        this.syncStateResolveContext(stateResolveBaseAttrs);
         return new StateModel({
             states: this.states,
             currentStates: this.currentStates,
@@ -11563,25 +11948,229 @@ class Graphic extends Node {
             stateEngine: this.stateEngine
         });
     }
+    resolveSimpleLocalStateTransition(states, previousStates) {
+        var _a;
+        if (!this.states ||
+            this.stateProxy ||
+            this.stateSort ||
+            this.stateMergeMode === 'deep' ||
+            this.parent ||
+            ((_a = this.stage) === null || _a === void 0 ? void 0 : _a.rootSharedStateScope) ||
+            this.boundSharedStateScope) {
+            return null;
+        }
+        if (states.length === 1) {
+            const stateName = states[0];
+            const hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName);
+            const nextStates = [stateName];
+            const changed = !this.sameStateNames(previousStates, nextStates);
+            const resolvedStateAttrs = {};
+            if (hasDefinition) {
+                const attrs = this.states[stateName];
+                if (attrs != null) {
+                    if (!isPlainObjectValue(attrs)) {
+                        return null;
+                    }
+                    const keys = Object.keys(attrs);
+                    for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+                        const key = keys[keyIndex];
+                        if (FULL_STATE_DEFINITION_KEYS.has(key)) {
+                            return null;
+                        }
+                        const attrValue = attrs[key];
+                        resolvedStateAttrs[key] = isPlainObjectValue(attrValue)
+                            ? cloneAttributeValue(attrValue)
+                            : attrValue;
+                    }
+                }
+            }
+            return {
+                changed,
+                states: nextStates,
+                effectiveStates: nextStates,
+                resolvedStateAttrs
+            };
+        }
+        const uniqueStates = Array.from(new Set(states));
+        const withDefinition = [];
+        const withoutDefinition = [];
+        for (let i = 0; i < uniqueStates.length; i++) {
+            const stateName = uniqueStates[i];
+            if (Object.prototype.hasOwnProperty.call(this.states, stateName)) {
+                withDefinition.push(stateName);
+            }
+            else {
+                withoutDefinition.push(stateName);
+            }
+        }
+        withDefinition.sort((left, right) => left.localeCompare(right));
+        const nextStates = withDefinition.concat(withoutDefinition);
+        const changed = !this.sameStateNames(previousStates, nextStates);
+        const resolvedStateAttrs = {};
+        for (let i = 0; i < nextStates.length; i++) {
+            const stateName = nextStates[i];
+            const hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName);
+            if (!hasDefinition) {
+                continue;
+            }
+            const attrs = this.states[stateName];
+            if (attrs == null) {
+                continue;
+            }
+            if (!isPlainObjectValue(attrs)) {
+                return null;
+            }
+            const keys = Object.keys(attrs);
+            for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+                const key = keys[keyIndex];
+                if (FULL_STATE_DEFINITION_KEYS.has(key)) {
+                    return null;
+                }
+                const attrValue = attrs[key];
+                resolvedStateAttrs[key] = isPlainObjectValue(attrValue)
+                    ? cloneAttributeValue(attrValue)
+                    : attrValue;
+            }
+        }
+        return {
+            changed,
+            states: nextStates,
+            effectiveStates: nextStates,
+            resolvedStateAttrs
+        };
+    }
+    resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = false) {
+        var _a, _b;
+        let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
+        const isSimpleLocalTransition = !!transition;
+        let resolvedStateAttrs;
+        if (transition) {
+            resolvedStateAttrs = transition.resolvedStateAttrs;
+        }
+        else {
+            const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
+            const stateModel = this.createStateModel(stateResolveBaseAttrs);
+            if (forceResolverRefresh) {
+                (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.invalidateResolverCache();
+            }
+            transition = stateModel.useStates(states);
+            resolvedStateAttrs =
+                this.stateEngine && this.compiledStateDefinitions
+                    ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+        }
+        const effectiveStates = (_b = transition.effectiveStates) !== null && _b !== void 0 ? _b : transition.states;
+        return {
+            transition,
+            effectiveStates: effectiveStates,
+            resolvedStateAttrs,
+            isSimpleLocalTransition
+        };
+    }
+    normalizeSetStatesOptions(options) {
+        if (options && typeof options === 'object') {
+            return {
+                hasAnimation: options.animate,
+                animateSameStatePatchChange: options.animateSameStatePatchChange === true,
+                shouldRefreshSameStatePatch: true
+            };
+        }
+        return {
+            hasAnimation: typeof options === 'boolean' ? options : undefined,
+            animateSameStatePatchChange: false,
+            shouldRefreshSameStatePatch: false
+        };
+    }
+    sameStatePatches(left, right) {
+        const leftRecord = (left !== null && left !== void 0 ? left : {});
+        const rightRecord = (right !== null && right !== void 0 ? right : {});
+        const keys = new Set([...Object.keys(leftRecord), ...Object.keys(rightRecord)]);
+        for (const key of keys) {
+            const hasLeft = Object.prototype.hasOwnProperty.call(leftRecord, key);
+            const hasRight = Object.prototype.hasOwnProperty.call(rightRecord, key);
+            if (hasLeft !== hasRight) {
+                return false;
+            }
+            if (!areAttributeValuesEqual(leftRecord[key], rightRecord[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    commitSameStatePatchRefresh(states, hasAnimation, animateSameStatePatchChange = false) {
+        var _a;
+        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
+        const previousResolvedStatePatch = this.resolvedStatePatch;
+        const { transition, effectiveStates, resolvedStateAttrs, isSimpleLocalTransition } = this.resolveGraphicStateTransition(states, previousStates, true);
+        const patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
+        if (patchChanged &&
+            !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, false)) {
+            return;
+        }
+        this.currentStates = transition.states;
+        this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates];
+        this.resolvedStatePatch = resolvedStateAttrs;
+        this.sharedStateDirty = false;
+        this.syncSharedStateActiveRegistrations();
+        if (!patchChanged) {
+            return;
+        }
+        if (this.stage) {
+            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.incrementCounter('stateCommits');
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordEvent('state-commit', {
+                graphicId: this._uid,
+                targetStates: [...transition.states]
+            });
+        }
+        if (hasAnimation && animateSameStatePatchChange) {
+            this._syncFinalAttributeFromStaticTruth();
+            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, false, undefined, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch));
+        }
+        else {
+            this.stopStateAnimates();
+            if (this.attributeMayContainTransientAttrs) {
+                this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
+            }
+            else {
+                this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+                    type: AttributeUpdateType.STATE
+                });
+            }
+            this.emitStateUpdateEvent();
+        }
+    }
     resolveStateAnimateConfig(animateConfig) {
         var _a, _b, _c;
         return (_c = (_a = animateConfig !== null && animateConfig !== void 0 ? animateConfig : this.stateAnimateConfig) !== null && _a !== void 0 ? _a : (_b = this.context) === null || _b === void 0 ? void 0 : _b.stateAnimateConfig) !== null && _c !== void 0 ? _c : DefaultStateAnimateConfig;
     }
-    applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig) {
+    applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
         const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : undefined;
-        const transitionOptions = resolvedAnimateConfig ? { animateConfig: resolvedAnimateConfig } : undefined;
+        const transitionOptions = resolvedAnimateConfig
+            ? {
+                animateConfig: resolvedAnimateConfig,
+                extraAnimateAttrs: extraAnimateAttrs,
+                shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
+            }
+            : undefined;
         if (isClear) {
             this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
             return;
         }
         const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
             noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
-            animateConfig: resolvedAnimateConfig
+            animateConfig: resolvedAnimateConfig,
+            extraAnimateAttrs: extraAnimateAttrs,
+            shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
         });
         this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
     }
-    updateNormalAttrs(stateAttrs) {
-        this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
+    updateNormalAttrs(_stateAttrs) {
+    }
+    getStateTransitionDefaultAttribute(key, targetAttrs) {
+        return this.getDefaultAttribute(key);
+    }
+    shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
+        return false;
     }
     stopStateAnimates(type = 'end') {
         const stopAnimationState = this.stopAnimationState;
@@ -11589,6 +12178,9 @@ class Graphic extends Node {
             stopAnimationState.call(this, 'state', type);
             return;
         }
+        if (!this.mayHaveTrackedAnimates()) {
+            return;
+        }
         const stateAnimates = [];
         this.visitTrackedAnimates(animate => {
             if (animate.stateNames) {
@@ -11607,7 +12199,8 @@ class Graphic extends Node {
     }
     clearStates(hasAnimation) {
         var _a, _b, _c;
-        const previousStates = this.currentStates ? this.currentStates.slice() : [];
+        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
+        const previousResolvedStatePatch = this.resolvedStatePatch;
         const transition = this.createStateModel().clearStates();
         if (!transition.changed && previousStates.length === 0) {
             this.currentStates = [];
@@ -11617,7 +12210,9 @@ class Graphic extends Node {
             this.clearSharedStateActiveRegistrations();
             return;
         }
-        const resolvedStateAttrs = cloneAttributeValue(((_a = this.baseAttributes) !== null && _a !== void 0 ? _a : {}));
+        const resolvedStateAttrs = hasAnimation || this.hasCustomEvent('beforeStateUpdate')
+            ? cloneAttributeValue(((_b = this.baseAttributes) !== null && _b !== void 0 ? _b : {}))
+            : ((_c = this.baseAttributes) !== null && _c !== void 0 ? _c : {});
         if (transition.changed &&
             !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, true)) {
             return;
@@ -11627,19 +12222,29 @@ class Graphic extends Node {
         this.resolvedStatePatch = undefined;
         this.sharedStateDirty = false;
         this.clearSharedStateActiveRegistrations();
-        (_b = getStageStatePerfMonitor(this.stage)) === null || _b === void 0 ? void 0 : _b.incrementCounter('stateCommits');
-        (_c = getStageStatePerfMonitor(this.stage)) === null || _c === void 0 ? void 0 : _c.recordEvent('state-commit', {
-            graphicId: this._uid,
-            targetStates: []
-        });
+        if (this.stage) {
+            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.incrementCounter('stateCommits');
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordEvent('state-commit', {
+                graphicId: this._uid,
+                targetStates: []
+            });
+        }
         if (hasAnimation) {
             this._syncFinalAttributeFromStaticTruth();
-            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, true);
+            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, true, undefined, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch));
         }
         else {
             this.stopStateAnimates();
-            this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
-            this._emitCustomEvent('afterStateUpdate', { type: AttributeUpdateType.STATE });
+            if (this.attributeMayContainTransientAttrs) {
+                this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
+            }
+            else {
+                this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, undefined, {
+                    type: AttributeUpdateType.STATE
+                });
+            }
+            this.emitStateUpdateEvent();
         }
     }
     removeState(stateName, hasAnimation) {
@@ -11661,44 +12266,76 @@ class Graphic extends Node {
         }
         this.useStates(transition.states, hasAnimation);
     }
+    setStates(states, options) {
+        var _a, _b, _c;
+        const { hasAnimation, animateSameStatePatchChange, shouldRefreshSameStatePatch } = this.normalizeSetStatesOptions(options);
+        const nextStates = (states === null || states === void 0 ? void 0 : states.length) ? states : EMPTY_STATE_NAMES;
+        const hasCurrentState = !!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) ||
+            !!((_b = this.effectiveStates) === null || _b === void 0 ? void 0 : _b.length) ||
+            !!this.resolvedStatePatch ||
+            !!((_c = this.registeredActiveScopes) === null || _c === void 0 ? void 0 : _c.size);
+        if (!nextStates.length) {
+            if (!hasCurrentState && !this.sharedStateDirty) {
+                return;
+            }
+            this.clearStates(hasAnimation);
+            return;
+        }
+        if (this.sameStateNames(this.currentStates, nextStates)) {
+            if (shouldRefreshSameStatePatch) {
+                this.commitSameStatePatchRefresh(nextStates, hasAnimation, animateSameStatePatchChange);
+                return;
+            }
+            if (this.sharedStateDirty) {
+                this.refreshSharedStateBeforeRender();
+            }
+            return;
+        }
+        this.useStates(nextStates, hasAnimation);
+    }
     useStates(states, hasAnimation) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         if (!states.length) {
             this.clearStates(hasAnimation);
             return;
         }
-        const previousStates = this.currentStates ? this.currentStates.slice() : [];
-        const stateResolveBaseAttrs = ((_a = this.baseAttributes) !== null && _a !== void 0 ? _a : this.attribute);
-        const stateModel = this.createStateModel();
-        (_b = this.stateEngine) === null || _b === void 0 ? void 0 : _b.setResolveContext(this, stateResolveBaseAttrs);
-        const transition = stateModel.useStates(states);
+        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
+        const previousResolvedStatePatch = this.resolvedStatePatch;
+        const { transition, effectiveStates, resolvedStateAttrs, isSimpleLocalTransition } = this.resolveGraphicStateTransition(states, previousStates);
         if (!transition.changed && this.sameStateNames(previousStates, transition.states)) {
             return;
         }
-        const effectiveStates = (_c = transition.effectiveStates) !== null && _c !== void 0 ? _c : transition.states;
-        const resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions
-            ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
         if (!this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, false)) {
             return;
         }
         this.currentStates = transition.states;
-        this.effectiveStates = [...effectiveStates];
-        this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs);
+        this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates];
+        this.resolvedStatePatch = resolvedStateAttrs;
         this.sharedStateDirty = false;
         this.syncSharedStateActiveRegistrations();
-        (_d = getStageStatePerfMonitor(this.stage)) === null || _d === void 0 ? void 0 : _d.incrementCounter('stateCommits');
-        (_e = getStageStatePerfMonitor(this.stage)) === null || _e === void 0 ? void 0 : _e.recordEvent('state-commit', {
-            graphicId: this._uid,
-            targetStates: [...transition.states]
-        });
+        if (this.stage) {
+            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.incrementCounter('stateCommits');
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordEvent('state-commit', {
+                graphicId: this._uid,
+                targetStates: [...transition.states]
+            });
+        }
         if (hasAnimation) {
             this._syncFinalAttributeFromStaticTruth();
-            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation);
+            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, false, undefined, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch));
         }
         else {
             this.stopStateAnimates();
-            this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
-            this._emitCustomEvent('afterStateUpdate', { type: AttributeUpdateType.STATE });
+            if (this.attributeMayContainTransientAttrs) {
+                this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
+            }
+            else {
+                this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+                    type: AttributeUpdateType.STATE
+                });
+            }
+            this.emitStateUpdateEvent();
         }
     }
     invalidateResolver() {
@@ -11706,19 +12343,18 @@ class Graphic extends Node {
         if (!this.stateEngine || !((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) || !this.compiledStateDefinitions) {
             return;
         }
-        const stateResolveBaseAttrs = ((_b = this.baseAttributes) !== null && _b !== void 0 ? _b : this.attribute);
-        this.stateEngine.setResolveContext(this, stateResolveBaseAttrs);
-        this.resolverEpoch += 1;
+        this.syncStateResolveContext();
+        this.resolverEpoch = ((_b = this.resolverEpoch) !== null && _b !== void 0 ? _b : 0) + 1;
         this.stateEngine.invalidateResolverCache();
         const transition = this.stateEngine.applyStates(this.currentStates);
         const resolvedStateAttrs = Object.assign({}, this.stateEngine.resolvedPatch);
         this.effectiveStates = [...transition.effectiveStates];
-        this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs);
+        this.resolvedStatePatch = resolvedStateAttrs;
         this.sharedStateDirty = false;
         this.syncSharedStateActiveRegistrations();
         this.stopStateAnimates();
         this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
-        this._emitCustomEvent('afterStateUpdate', { type: AttributeUpdateType.STATE });
+        this.emitStateUpdateEvent();
     }
     sameStateNames(left, right) {
         const normalizedLeft = left !== null && left !== void 0 ? left : [];
@@ -11757,6 +12393,20 @@ class Graphic extends Node {
             this.glyphHost.addUpdateBoundTag();
         }
     }
+    addBroadUpdateTag() {
+        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag();
+        this._updateTag |=
+            UpdateTag.UPDATE_SHAPE_AND_BOUNDS |
+                UpdateTag.UPDATE_PAINT |
+                UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX |
+                UpdateTag.UPDATE_LAYOUT;
+        if (this.parent) {
+            this.parent.addChildUpdateBoundTag();
+        }
+        if (this.glyphHost) {
+            this.glyphHost.addUpdateBoundTag();
+        }
+    }
     updateShapeAndBoundsTagSetted() {
         return (this._updateTag & UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
     }
@@ -11861,17 +12511,22 @@ class Graphic extends Node {
         }
     }
     setStage(stage, layer) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const graphicService = (_c = (_a = stage === null || stage === void 0 ? void 0 : stage.graphicService) !== null && _a !== void 0 ? _a : (_b = this.stage) === null || _b === void 0 ? void 0 : _b.graphicService) !== null && _c !== void 0 ? _c : application.graphicService;
         const previousStage = this.stage;
         if (this.stage !== stage || this.layer !== layer) {
             this.stage = stage;
             this.layer = layer;
-            this.syncSharedStateScopeBindingFromTree(!!((_d = this.currentStates) === null || _d === void 0 ? void 0 : _d.length));
+            if (((_d = this.currentStates) === null || _d === void 0 ? void 0 : _d.length) ||
+                this.boundSharedStateScope ||
+                ((_e = this.registeredActiveScopes) === null || _e === void 0 ? void 0 : _e.size) ||
+                this.sharedStateDirty) {
+                this.syncSharedStateScopeBindingOnTreeChange(true);
+            }
             this.setStageToShadowRoot(stage, layer);
-            if (this.hasAnyTrackedAnimate()) {
-                const previousTimeline = (_e = previousStage === null || previousStage === void 0 ? void 0 : previousStage.getTimeline) === null || _e === void 0 ? void 0 : _e.call(previousStage);
-                const nextTimeline = (_f = stage === null || stage === void 0 ? void 0 : stage.getTimeline) === null || _f === void 0 ? void 0 : _f.call(stage);
+            if (this.mayHaveTrackedAnimates() && this.hasAnyTrackedAnimate()) {
+                const previousTimeline = (_f = previousStage === null || previousStage === void 0 ? void 0 : previousStage.getTimeline) === null || _f === void 0 ? void 0 : _f.call(previousStage);
+                const nextTimeline = (_g = stage === null || stage === void 0 ? void 0 : stage.getTimeline) === null || _g === void 0 ? void 0 : _g.call(stage);
                 const detachedStageAnimates = [];
                 this.visitTrackedAnimates(a => {
                     const boundToPreviousStage = !!previousTimeline && a.timeline === previousTimeline;
@@ -11909,10 +12564,38 @@ class Graphic extends Node {
                 }
             }
             this._onSetStage && this._onSetStage(this, stage, layer);
-            (_g = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onSetStage) === null || _g === void 0 ? void 0 : _g.call(graphicService, this, stage);
+            (_h = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onSetStage) === null || _h === void 0 ? void 0 : _h.call(graphicService, this, stage);
             return;
         }
-        this.syncSharedStateScopeBindingFromTree(!!((_h = this.currentStates) === null || _h === void 0 ? void 0 : _h.length));
+        if (((_j = this.currentStates) === null || _j === void 0 ? void 0 : _j.length) ||
+            this.boundSharedStateScope ||
+            ((_k = this.registeredActiveScopes) === null || _k === void 0 ? void 0 : _k.size) ||
+            this.sharedStateDirty) {
+            this.syncSharedStateScopeBindingOnTreeChange(true);
+        }
+    }
+    detachStageForRelease() {
+        var _a, _b, _c;
+        if ((_a = this.registeredActiveScopes) === null || _a === void 0 ? void 0 : _a.size) {
+            this.clearSharedStateActiveRegistrations();
+        }
+        if (this.mayHaveTrackedAnimates() || this.shadowRoot) {
+            this.stopAnimates();
+        }
+        this.boundSharedStateScope = undefined;
+        this.boundSharedStateRevision = undefined;
+        this.localFallbackCompiledDefinitions = undefined;
+        this.compiledStateDefinitions = undefined;
+        this.compiledStateDefinitionsCacheKey = undefined;
+        this.stateEngine = undefined;
+        this.stateEngineCompiledDefinitions = undefined;
+        this.stateEngineStateProxyModeKey = undefined;
+        this.sharedStateDirty = false;
+        this.stage = null;
+        this.layer = null;
+        if (this.shadowRoot) {
+            (_c = (_b = this.shadowRoot).detachStageForRelease) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
     }
     setStageToShadowRoot(stage, layer) {
         if (this.shadowRoot) {
@@ -12048,6 +12731,9 @@ class Graphic extends Node {
         cb && cb();
     }
     _stopAnimates() {
+        if (!this.mayHaveTrackedAnimates()) {
+            return;
+        }
         const animates = [];
         this.visitTrackedAnimates(animate => {
             animates.push(animate);
@@ -12068,17 +12754,24 @@ class Graphic extends Node {
         }
     }
     release() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.releaseStatus = 'released';
-        this.clearSharedStateActiveRegistrations();
-        this.stopAnimates();
-        const graphicService = (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.graphicService) !== null && _b !== void 0 ? _b : application.graphicService;
-        (_c = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onRelease) === null || _c === void 0 ? void 0 : _c.call(graphicService, this);
+        if ((_a = this.registeredActiveScopes) === null || _a === void 0 ? void 0 : _a.size) {
+            this.clearSharedStateActiveRegistrations();
+        }
+        if (this.mayHaveTrackedAnimates() || this.shadowRoot) {
+            this.stopAnimates();
+        }
+        const graphicService = (_c = (_b = this.stage) === null || _b === void 0 ? void 0 : _b.graphicService) !== null && _c !== void 0 ? _c : application.graphicService;
+        (_d = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onRelease) === null || _d === void 0 ? void 0 : _d.call(graphicService, this);
         super.release();
     }
+    hasCustomEvent(type) {
+        return !!this._events && type in this._events;
+    }
     _dispatchCustomEvent(type, context) {
         var _a, _b;
-        if (this._events && type in this._events) {
+        if (this.hasCustomEvent(type)) {
             const changeEvent = new CustomEvent(type, context);
             changeEvent.bubbles = false;
             const manager = (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem) === null || _b === void 0 ? void 0 : _b.manager;
@@ -12091,6 +12784,9 @@ class Graphic extends Node {
         return true;
     }
     beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
+        if (!this.hasCustomEvent('beforeStateUpdate')) {
+            return true;
+        }
         return this._dispatchCustomEvent('beforeStateUpdate', {
             type: AttributeUpdateType.STATE,
             attrs: Object.assign({}, attrs),
@@ -12100,6 +12796,11 @@ class Graphic extends Node {
             isClear: !!isClear
         });
     }
+    emitStateUpdateEvent() {
+        if (this.hasCustomEvent('afterStateUpdate')) {
+            this._emitCustomEvent('afterStateUpdate', { type: AttributeUpdateType.STATE });
+        }
+    }
     _emitCustomEvent(type, context) {
         this._dispatchCustomEvent(type, context);
     }
@@ -13602,6 +14303,61 @@ class Rect extends Graphic {
     needUpdateTag(key) {
         return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
     }
+    shouldSkipStateTransitionDefaultAttribute(key, targetAttrs) {
+        var _a;
+        const attrs = ((_a = targetAttrs !== null && targetAttrs !== void 0 ? targetAttrs : this.baseAttributes) !== null && _a !== void 0 ? _a : this.attribute);
+        const hasValue = (attrKey) => attrs[attrKey] != null;
+        const isNilValue = (attrKey) => attrs[attrKey] == null;
+        switch (key) {
+            case 'width':
+                return isNilValue('width') && hasValue('x') && hasValue('x1');
+            case 'height':
+                return isNilValue('height') && hasValue('y') && hasValue('y1');
+            case 'x1':
+                return isNilValue('x1') && hasValue('x') && hasValue('width');
+            case 'y1':
+                return isNilValue('y1') && hasValue('y') && hasValue('height');
+            default:
+                return false;
+        }
+    }
+    getStateTransitionDefaultAttribute(key, targetAttrs) {
+        var _a;
+        const attrs = ((_a = targetAttrs !== null && targetAttrs !== void 0 ? targetAttrs : this.baseAttributes) !== null && _a !== void 0 ? _a : this.attribute);
+        const getNumber = (attrKey) => {
+            const value = attrs[attrKey];
+            return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+        };
+        const x = getNumber('x');
+        const y = getNumber('y');
+        const x1 = getNumber('x1');
+        const y1 = getNumber('y1');
+        const width = getNumber('width');
+        const height = getNumber('height');
+        switch (key) {
+            case 'width':
+                if (width == null && x != null && x1 != null) {
+                    return x1 - x;
+                }
+                break;
+            case 'height':
+                if (height == null && y != null && y1 != null) {
+                    return y1 - y;
+                }
+                break;
+            case 'x1':
+                if (x1 == null && x != null && width != null) {
+                    return x + width;
+                }
+                break;
+            case 'y1':
+                if (y1 == null && y != null && height != null) {
+                    return y + height;
+                }
+                break;
+        }
+        return super.getStateTransitionDefaultAttribute(key, targetAttrs);
+    }
     toCustomPath() {
         let path = super.toCustomPath();
         if (path) {
@@ -16295,6 +17051,7 @@ class Group extends Graphic {
         this.type = 'group';
         this.parent = null;
         this.isContainer = true;
+        this._hasSharedStateDefinitions = false;
         this.numberType = GROUP_NUMBER_TYPE;
         this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
     }
@@ -16305,12 +17062,17 @@ class Group extends Graphic {
         if (this._sharedStateDefinitions === value) {
             return;
         }
+        const previousScope = this.sharedStateScope;
         this._sharedStateDefinitions = value;
+        this._hasSharedStateDefinitions = !!value && Object.keys(value).length > 0;
         this.ensureSharedStateScopeBound();
         if (this.sharedStateScope) {
             setSharedStateScopeLocalDefinitions(this.sharedStateScope, value);
             markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage);
         }
+        if (previousScope !== this.sharedStateScope) {
+            this.notifyChildrenSharedStateTreeChanged();
+        }
     }
     setMode(mode) {
         mode === '3d' ? this.set3dMode() : this.set2dMode();
@@ -16501,8 +17263,16 @@ class Group extends Graphic {
     insertInto(newNode, idx) {
         return this._updateChildToStage(super.insertInto(newNode, idx));
     }
-    removeChild(child) {
+    removeChild(child, highPerformance = false) {
+        var _a;
         const data = super.removeChild(child);
+        if (!data) {
+            return data;
+        }
+        if (highPerformance) {
+            (_a = child.detachStageForRelease) === null || _a === void 0 ? void 0 : _a.call(child);
+            return data;
+        }
         this.getGraphicService().onRemove(child);
         child.setStage(null, null);
         this.addUpdateBoundTag();
@@ -16525,29 +17295,43 @@ class Group extends Graphic {
     setStage(stage, layer) {
         var _a, _b, _c, _d, _e, _f;
         const graphicService = (_c = (_a = stage === null || stage === void 0 ? void 0 : stage.graphicService) !== null && _a !== void 0 ? _a : (_b = this.stage) === null || _b === void 0 ? void 0 : _b.graphicService) !== null && _c !== void 0 ? _c : application.graphicService;
+        const needsSharedStateTreeSync = this._hasSharedStateDefinitions ||
+            this.sharedStateScope ||
+            ((_d = this.currentStates) === null || _d === void 0 ? void 0 : _d.length) ||
+            this.boundSharedStateScope ||
+            ((_e = this.registeredActiveScopes) === null || _e === void 0 ? void 0 : _e.size) ||
+            this.sharedStateDirty;
         if (this.stage !== stage) {
             this.stage = stage;
             this.layer = layer;
-            this.ensureSharedStateScopeBound();
-            this.syncSharedStateScopeBindingFromTree(!!((_d = this.currentStates) === null || _d === void 0 ? void 0 : _d.length));
+            if (needsSharedStateTreeSync) {
+                this.ensureSharedStateScopeBound();
+                this.syncSharedStateScopeBindingOnTreeChange(true);
+            }
             this.setStageToShadowRoot(stage, layer);
             this._onSetStage && this._onSetStage(this, stage, layer);
-            (_e = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onSetStage) === null || _e === void 0 ? void 0 : _e.call(graphicService, this, stage);
+            (_f = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onSetStage) === null || _f === void 0 ? void 0 : _f.call(graphicService, this, stage);
             this.forEachChildren(item => {
                 item.setStage(stage, this.layer);
             });
             return;
         }
-        if (this.layer !== layer) {
+        const layerChanged = this.layer !== layer;
+        if (layerChanged) {
             this.layer = layer;
         }
-        this.ensureSharedStateScopeBound();
-        this.syncSharedStateScopeBindingFromTree(!!((_f = this.currentStates) === null || _f === void 0 ? void 0 : _f.length));
-        this.forEachChildren(item => {
-            if (item.onParentSharedStateTreeChanged) {
-                item.onParentSharedStateTreeChanged(stage, this.layer);
-            }
-        });
+        if (needsSharedStateTreeSync) {
+            this.ensureSharedStateScopeBound();
+            this.syncSharedStateScopeBindingOnTreeChange(true);
+            this.notifyChildrenSharedStateTreeChanged();
+        }
+        else if (layerChanged) {
+            this.forEachChildren(item => {
+                if (item.onParentSharedStateTreeChanged) {
+                    item.onParentSharedStateTreeChanged(stage, this.layer);
+                }
+            });
+        }
     }
     addUpdatePositionTag() {
         super.addUpdatePositionTag();
@@ -16614,8 +17398,20 @@ class Group extends Graphic {
         }
         super.release();
     }
+    detachStageForRelease() {
+        super.detachStageForRelease();
+        this.sharedStateScope = undefined;
+        this.forEachChildren((item) => {
+            var _a;
+            (_a = item.detachStageForRelease) === null || _a === void 0 ? void 0 : _a.call(item);
+        });
+    }
     ensureSharedStateScopeBound() {
         var _a, _b, _c;
+        if (!this.hasSharedStateDefinitions()) {
+            this.sharedStateScope = undefined;
+            return;
+        }
         const parentScope = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.sharedStateScope) !== null && _b !== void 0 ? _b : (_c = this.stage) === null || _c === void 0 ? void 0 : _c.rootSharedStateScope;
         if (!this.sharedStateScope) {
             this.sharedStateScope = createGroupSharedStateScope(this, parentScope, this._sharedStateDefinitions);
@@ -16628,18 +17424,25 @@ class Group extends Graphic {
             setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions);
         }
     }
+    hasSharedStateDefinitions() {
+        return this._hasSharedStateDefinitions;
+    }
+    notifyChildrenSharedStateTreeChanged() {
+        this.forEachChildren(item => {
+            if (item.onParentSharedStateTreeChanged) {
+                item.onParentSharedStateTreeChanged(this.stage, this.layer);
+            }
+        });
+    }
     onParentSharedStateTreeChanged(stage, layer) {
+        var _a;
         if (this.stage !== stage || this.layer !== layer) {
             this.setStage(stage, layer);
             return;
         }
         this.ensureSharedStateScopeBound();
-        this.syncSharedStateScopeBindingFromTree();
-        this.forEachChildren(item => {
-            if (item.onParentSharedStateTreeChanged) {
-                item.onParentSharedStateTreeChanged(stage, this.layer);
-            }
-        });
+        this.syncSharedStateScopeBindingOnTreeChange(!!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length));
+        this.notifyChildrenSharedStateTreeChanged();
     }
 }
 Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
@@ -17081,6 +17884,10 @@ class DefaultGraphicService {
         };
         this.tempAABBBounds1 = new AABBBounds();
         this.tempAABBBounds2 = new AABBBounds();
+        this.tempAABBBoundsResult = {
+            tb1: this.tempAABBBounds1,
+            tb2: this.tempAABBBounds2
+        };
     }
     onAttributeUpdate(graphic) {
         if (this.hooks.onAttributeUpdate.taps.length) {
@@ -17211,7 +18018,7 @@ class DefaultGraphicService {
         const tb2 = this.tempAABBBounds2;
         tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
         tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
-        return { tb1, tb2 };
+        return this.tempAABBBoundsResult;
     }
 }
 
@@ -19114,6 +19921,7 @@ class DirtyBoundsPlugin {
         this.activeEvent = 'onRegister';
         this._uid = Generator.GenAutoIncrementId();
         this.key = this.name + this._uid;
+        this.dirtyBoundsHooksRegistered = false;
         this.handlePaintOnlyUpdate = (graphic) => {
             var _a, _b, _c, _d;
             const stage = this.pluginService.stage;
@@ -19155,16 +19963,16 @@ class DirtyBoundsPlugin {
         }
         return (_b = owner._globalAABBBounds) !== null && _b !== void 0 ? _b : owner.globalAABBBounds;
     }
-    activate(context) {
-        this.pluginService = context;
-        context.stage.hooks.afterRender.tap(this.key, stage => {
-            if (!(stage && stage === this.pluginService.stage)) {
-                return;
-            }
-            stage.dirtyBounds.clear();
-        });
-        const stage = this.pluginService.stage;
-        if (!stage) {
+    getRemoveDirtyBounds(graphic) {
+        var _a;
+        const owner = ((_a = graphic.glyphHost) !== null && _a !== void 0 ? _a : graphic);
+        const cachedBounds = owner._globalAABBBounds;
+        if (cachedBounds && typeof cachedBounds.empty === 'function' && !cachedBounds.empty()) {
+            return cachedBounds;
+        }
+    }
+    registerDirtyBoundsHooks(stage) {
+        if (this.dirtyBoundsHooksRegistered) {
             return;
         }
         stage.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handlePaintOnlyUpdate);
@@ -19205,10 +20013,29 @@ class DirtyBoundsPlugin {
             if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
                 return;
             }
-            if (stage) {
-                stage.dirty(graphic.globalAABBBounds);
+            const bounds = this.getRemoveDirtyBounds(graphic);
+            if (bounds && !bounds.empty()) {
+                stage.dirty(bounds);
+            }
+        });
+        this.dirtyBoundsHooksRegistered = true;
+    }
+    activate(context) {
+        this.pluginService = context;
+        context.stage.hooks.afterRender.tap(this.key, stage => {
+            if (!(stage && stage === this.pluginService.stage)) {
+                return;
             }
+            stage.dirtyBounds.clear();
+            this.registerDirtyBoundsHooks(stage);
         });
+        const stage = this.pluginService.stage;
+        if (!stage) {
+            return;
+        }
+        if (stage.renderCount) {
+            this.registerDirtyBoundsHooks(stage);
+        }
     }
     deactivate(context) {
         const stage = this.pluginService.stage;
@@ -19218,6 +20045,7 @@ class DirtyBoundsPlugin {
         stage.graphicService.hooks.onAttributeUpdate.taps = stage.graphicService.hooks.onAttributeUpdate.taps.filter(item => {
             return item.name !== this.key;
         });
+        this.dirtyBoundsHooksRegistered = false;
         stage.graphicService.hooks.beforeUpdateAABBBounds.taps =
             stage.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
                 return item.name !== this.key;
@@ -19742,7 +20570,7 @@ class Stage extends Group {
         this._ticker.on('tick', this.afterTickCb);
     }
     constructor(params = {}, deps = {}) {
-        var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         super({});
         this.tickedBeforeRender = true;
         this._onVisibleChange = (visible) => {
@@ -19764,7 +20592,10 @@ class Stage extends Group {
             }
         };
         this.beforeRender = (stage) => {
-            flushStageSharedStateRefresh(this);
+            const pendingSharedRefresh = this._pendingSharedStateRefreshGraphics;
+            if (pendingSharedRefresh === null || pendingSharedRefresh === void 0 ? void 0 : pendingSharedRefresh.size) {
+                flushStageSharedStateRefresh(this);
+            }
             this._beforeRenderList.forEach(cb => cb(stage));
         };
         this.afterClearScreen = (drawParams) => {
@@ -19830,16 +20661,19 @@ class Stage extends Group {
         this.appendChild(this.layerService.createLayer(this, { main: true }));
         this.nextFrameRenderLayerSet = new Set();
         this.willNextFrameRender = false;
-        ensureStageStatePerfMonitor(this);
-        this._stateBatchScheduler = new StateBatchScheduler(this, ensureStageStatePerfMonitor(this));
-        this.rootSharedStateScope = createRootSharedStateScope(this, (_x = this.theme) === null || _x === void 0 ? void 0 : _x.stateDefinitions);
         this.theme.onStateDefinitionsChange = () => {
             var _a;
-            if (!this.rootSharedStateScope) {
+            const definitions = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.stateDefinitions;
+            if (!definitions || !Object.keys(definitions).length) {
+                if (this.rootSharedStateScope) {
+                    setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, definitions);
+                    markScopeActiveDescendantsDirty(this.rootSharedStateScope, this);
+                }
                 return;
             }
-            setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, (_a = this.theme) === null || _a === void 0 ? void 0 : _a.stateDefinitions);
-            markScopeActiveDescendantsDirty(this.rootSharedStateScope, this);
+            const rootScope = this.ensureRootSharedStateScope(definitions);
+            setRootSharedStateScopeThemeDefinitions(rootScope, definitions);
+            markScopeActiveDescendantsDirty(rootScope, this);
         };
         this.renderStyle = params.renderStyle;
         if (params.autoRender) {
@@ -19881,7 +20715,7 @@ class Stage extends Group {
             this.setAttributes({ background: this._background });
         }
         this.initAnimate(params);
-        this.rafId = (_y = params.rafId) !== null && _y !== void 0 ? _y : Math.floor(Math.random() * 6);
+        this.rafId = (_x = params.rafId) !== null && _x !== void 0 ? _x : Math.floor(Math.random() * 6);
     }
     initAnimate(params) {
         var _a;
@@ -20261,8 +21095,22 @@ class Stage extends Group {
             });
         }
     }
+    ensureRootSharedStateScope(themeStateDefinitions) {
+        if (!this.rootSharedStateScope) {
+            this.rootSharedStateScope = createRootSharedStateScope(this, themeStateDefinitions);
+            return this.rootSharedStateScope;
+        }
+        this.rootSharedStateScope.ownerStage = this;
+        return this.rootSharedStateScope;
+    }
+    getStateBatchScheduler() {
+        if (!this._stateBatchScheduler) {
+            this._stateBatchScheduler = new StateBatchScheduler(this, ensureStageStatePerfMonitor(this));
+        }
+        return this._stateBatchScheduler;
+    }
     scheduleStateBatch(graphics, targetStates) {
-        this._stateBatchScheduler.schedule(graphics, targetStates);
+        this.getStateBatchScheduler().schedule(graphics, targetStates);
     }
     getStatePerfSnapshot() {
         return ensureStageStatePerfMonitor(this).getSnapshot();
@@ -23852,23 +24700,27 @@ function createStage(params) {
 const result = { x: 0, y: 0, z: 0, lastModelMatrix: null };
 class BaseRender {
     init(contributions) {
-        if (contributions) {
-            this._renderContribitions = contributions.getContributions();
-        }
-        if (!this._renderContribitions) {
-            this._renderContribitions = [];
-        }
         if (!this.builtinContributions) {
             this.builtinContributions = [];
         }
-        this.builtinContributions.push(defaultBaseClipRenderBeforeContribution);
-        this.builtinContributions.push(defaultBaseClipRenderAfterContribution);
-        this.builtinContributions.forEach(item => this._renderContribitions.push(item));
+        this._renderContribitions = contributions ? contributions.getContributions().slice() : [];
+        const addContribution = (item) => {
+            if (!this._renderContribitions.includes(item)) {
+                this._renderContribitions.push(item);
+            }
+        };
+        this.builtinContributions.forEach(addContribution);
+        addContribution(defaultBaseClipRenderBeforeContribution);
+        addContribution(defaultBaseClipRenderAfterContribution);
         if (this._renderContribitions.length) {
             this._renderContribitions.sort((a, b) => b.order - a.order);
             this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke);
             this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke);
         }
+        else {
+            this._beforeRenderContribitions = [];
+            this._afterRenderContribitions = [];
+        }
     }
     reInit() {
         this.init(this.graphicRenderContributions);
@@ -30906,7 +31758,10 @@ class FlexLayoutPlugin {
                 this.tryLayout(graphic, false);
             }
         });
-        stage.graphicService.hooks.onSetStage.tap(this.key, graphic => {
+        stage.graphicService.hooks.onSetStage.tap(this.key, (graphic, nextStage) => {
+            if (!(nextStage && nextStage === this.pluginService.stage)) {
+                return;
+            }
             if (graphic.glyphHost) {
                 graphic = graphic.glyphHost;
             }
@@ -30941,4 +31796,4 @@ const registerFlexLayoutPlugin = () => {
     Factory.registerPlugin('FlexLayoutPlugin', FlexLayoutPlugin);
 };
 
-export { ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, AnimateMode, AnimateStatus, AnimateStepType, AppContext, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, BrowserEntry, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasFactory, CanvasTextLayout, Circle, CircleRender, CircleRenderContribution, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Context2dFactory, ContributionProvider, ContributionRegistry, ContributionStore, CubicBezierCurve, 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, DefaultStarAttribute, 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, GradientParser, Graphic, GraphicCreator$1 as GraphicCreator, GraphicFactory, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image, ImageRender, ImageRenderContribution, IncrementalDrawContribution, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerFactory, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Mat4Allocate, MatrixAllocate, MeasureModeEnum, MiniappEntry, MonotoneX, MonotoneY, NOWORK_ANIMATE_ATTR, Node, NodeEntry, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PerformanceRAF, PickItemInterceptor, PickServiceInterceptor, PickerRegistry, PickerService, PluginRegistry, 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, RendererRegistry, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, STAR_NUMBER_TYPE, 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, StageFactory, Star, StarRender, StarRenderContribution, StateDefinitionCompiler, StateEngine, StaticLayerHandlerContribution, Step, StepClosed, 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, bindArc3dRenderModule, bindArcRenderModule, bindAreaRenderModule, bindCircleRenderModule, bindContributionProvider, bindContributionProviderNoSingletonScope, bindGlyphRenderModule, bindImageRenderModule, bindLineRenderModule, bindPathRenderModule, bindPolygonRenderModule, bindPyramid3dRenderModule, bindRect3dRenderModule, bindRectRenderModule, bindRichtextRenderModule, bindStarRenderModule, bindSymbolRenderModule, bindTextRenderModule, boundStroke, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleModule, clock, colorEqual, colorStringInterpolationToStr, configureRuntimeApplicationForApp, container, cornerTangents, createBrowserApp as createApp, createArc, createArc3d, createArea, createBrowserApp, createCanvasEventTransformer, createCircle, createColor, createConicalGradient, createContributionProvider, createEventTransformer, createGlyph, createGraphic, createGroup, createImage, createLine, createMat4, createMiniappApp, createNodeApp, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createStar, 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, defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, diff, divideCubic, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawBackgroundImage, drawImageWithLayout, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, fillVisible, findBestMorphingRotation, findConfigIndexByCursorIdx, findCursorIdxByConfigIndex, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepClosedSegments, genStepSegments, genStepTypeSegments, getAttributeFromDefaultAttrList, getBackgroundImage, getConicGradientAt, getCurrentEnv, getDefaultCharacterConfig, getExtraModelMatrix, getLegacyBindingContext, getModelMatrix, getRichTextBounds, getRuntimeInstallerBindingContext, getRuntimeInstallerGlobal, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphModule, graphicCreator, graphicService, graphicUtil, identityMat4, imageModule, incrementalAddTo, installRuntimeDrawContributionsToApp, installRuntimeGraphicRenderersToApp, installRuntimePickersToApp, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, interpolatePureColorArrayToStr, intersect, isBrowserEnv, isNoRepeatSizingMode, isNodeEnv, isSvg, isXML, layerService, lineModule, lookAt, mapToCanvasPointForCanvas, mat3Tomat4, mat4Allocate, matrixAllocate, multiplyMat4Mat3, multiplyMat4Mat4, 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, refreshRuntimeInstallerContributions, registerArc3dGraphic, registerArcGraphic, registerAreaGraphic, registerCircleGraphic, registerDirectionalLight, registerFlexLayoutPlugin, registerGlobalEventTransformer, registerGlyphGraphic, registerGraphic, registerGroupGraphic, registerHtmlAttributePlugin, registerImageGraphic, registerLineGraphic, registerOrthoCamera, registerPathGraphic, registerPolygonGraphic, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect3dGraphic, registerRectGraphic, registerRichtextGraphic, registerShadowRootGraphic, registerStarGraphic, registerSymbolGraphic, registerTextGraphic, registerViewTransform3dPlugin, registerWindowEventTransformer, registerWrapTextGraphic, renderCommandList, resolveBackgroundDrawMode, resolveBackgroundParamsByImageSizing, resolveBackgroundPosition, resolveBackgroundSizing, resolveContainerBinding, resolveImageMode, resolveImageRepeatMode, resolveRenderableImageSize, rewriteProto, richtextModule, rotateX, rotateY, rotateZ, runFill, runStroke, scaleMat4, segments, shouldClipImageByLayout, shouldUseMat4, shouldUseSimpleAttributeFastPath, snapLength, splitArc, splitArea, splitCircle, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, starModule, strCommandMap, strokeVisible, symbolModule, textAttributesToStyle, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textModule, transformMat4, transformPointForCanvas, transformUtil, translate, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, xul };
+export { ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, AnimateMode, AnimateStatus, AnimateStepType, AppContext, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, BrowserEntry, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasFactory, CanvasTextLayout, Circle, CircleRender, CircleRenderContribution, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Context2dFactory, ContributionProvider, ContributionRegistry, ContributionStore, CubicBezierCurve, 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, DefaultStarAttribute, 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, GradientParser, Graphic, GraphicCreator$1 as GraphicCreator, GraphicFactory, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image, ImageRender, ImageRenderContribution, IncrementalDrawContribution, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerFactory, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Mat4Allocate, MatrixAllocate, MeasureModeEnum, MiniappEntry, MonotoneX, MonotoneY, NOWORK_ANIMATE_ATTR, Node, NodeEntry, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PerformanceRAF, PickItemInterceptor, PickServiceInterceptor, PickerRegistry, PickerService, PluginRegistry, 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, RendererRegistry, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, STAR_NUMBER_TYPE, 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, StageFactory, Star, StarRender, StarRenderContribution, StateDefinitionCompiler, StateEngine, StaticLayerHandlerContribution, Step, StepClosed, 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, bindArc3dRenderModule, bindArcRenderModule, bindAreaRenderModule, bindCircleRenderModule, bindContributionProvider, bindContributionProviderNoSingletonScope, bindGlyphRenderModule, bindImageRenderModule, bindLineRenderModule, bindPathRenderModule, bindPolygonRenderModule, bindPyramid3dRenderModule, bindRect3dRenderModule, bindRectRenderModule, bindRichtextRenderModule, bindStarRenderModule, bindSymbolRenderModule, bindTextRenderModule, boundStroke, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleModule, clock, colorEqual, colorStringInterpolationToStr, configureRuntimeApplicationForApp, container, cornerTangents, createBrowserApp as createApp, createArc, createArc3d, createArea, createBrowserApp, createCanvasEventTransformer, createCircle, createColor, createConicalGradient, createContributionProvider, createEventTransformer, createGlyph, createGraphic, createGroup, createImage, createLine, createMat4, createMiniappApp, createNodeApp, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createStar, 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, defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, diff, divideCubic, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawBackgroundImage, drawImageWithLayout, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, fillVisible, findBestMorphingRotation, findConfigIndexByCursorIdx, findCursorIdxByConfigIndex, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepClosedSegments, genStepSegments, genStepTypeSegments, getAttributeFromDefaultAttrList, getBackgroundImage, getConicGradientAt, getCurrentEnv, getDefaultCharacterConfig, getExtraModelMatrix, getLegacyBindingContext, getModelMatrix, getRichTextBounds, getRuntimeInstallerBindingContext, getRuntimeInstallerGlobal, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphModule, graphicCreator, graphicService, graphicUtil, identityMat4, imageModule, incrementalAddTo, installRuntimeDrawContributionsToApp, installRuntimeGraphicRenderersToApp, installRuntimePickersToApp, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, interpolatePureColorArrayToStr, intersect, isBrowserEnv, isNoRepeatSizingMode, isNodeEnv, isSvg, isXML, layerService, lineModule, lookAt, mapToCanvasPointForCanvas, mat3Tomat4, mat4Allocate, matrixAllocate, multiplyMat4Mat3, multiplyMat4Mat4, 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, refreshRuntimeInstallerContributions, registerArc3dGraphic, registerArcGraphic, registerAreaGraphic, registerCircleGraphic, registerDirectionalLight, registerFlexLayoutPlugin, registerGlobalEventTransformer, registerGlyphGraphic, registerGraphic, registerGroupGraphic, registerHtmlAttributePlugin, registerImageGraphic, registerLineGraphic, registerOrthoCamera, registerPathGraphic, registerPolygonGraphic, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect3dGraphic, registerRectGraphic, registerRichtextGraphic, registerShadowRootGraphic, registerStarGraphic, registerSymbolGraphic, registerTextGraphic, registerViewTransform3dPlugin, registerWindowEventTransformer, registerWrapTextGraphic, renderCommandList, resolveBackgroundDrawMode, resolveBackgroundParamsByImageSizing, resolveBackgroundPosition, resolveBackgroundSizing, resolveContainerBinding, resolveImageMode, resolveImageRepeatMode, resolveRenderableImageSize, rewriteProto, richtextModule, rotateX, rotateY, rotateZ, runFill, runStroke, scaleMat4, segments, shouldClipImageByLayout, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, starModule, strCommandMap, strokeVisible, symbolModule, textAttributesToStyle, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textModule, transformMat4, transformPointForCanvas, transformUtil, translate, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, xul };