@visactor/vrender-core 1.1.0-alpha.8 → 1.1.0

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.
@@ -698,6 +698,9 @@ class Node extends EventEmitter {
         this.parent = null;
         this._count = 1;
     }
+    onParentSharedStateTreeChanged(_stage, _layer) {
+        return;
+    }
     forEachChildren(cb, reverse = false) {
         if (reverse) {
             let child = this._lastChild;
@@ -4759,7 +4762,7 @@ function addAttributeToPrototype(obj, c, keys) {
 function rewriteProto(obj, c) {
     Object.setPrototypeOf(obj, c);
 }
-const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), { startAngle: 0, endAngle: pi2, innerRadius: 0, outerRadius: 1, innerPadding: 0, outerPadding: 0, cornerRadius: 0, padRadius: 0, padAngle: 0, cap: false, forceShowCap: false });
+const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), { startAngle: 0, endAngle: pi2, innerRadius: 0, outerRadius: 1, innerPadding: 0, outerPadding: 0, cornerRadius: 0, padRadius: 0, padAngle: 0, clipRange: 1, cap: false, forceShowCap: false });
 const DefaultAreaAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), { points: [], segments: [], curveType: 'linear', clipRange: 1, closePath: false, curveTension: 1 });
 const DefaultCircleAttribute = Object.assign(Object.assign({}, DefaultAttribute), { radius: 1, startAngle: 0, endAngle: pi2 });
 const DefaultGroupAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, cornerRadius: 0, path: [], clip: false, visibleAll: true, display: 'relative', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-start', alignContent: 'flex-start', baseOpacity: 1, cornerType: 'round' });
@@ -4826,7 +4829,8 @@ class ResourceLoader {
             }
             else {
                 data.waitingMark = [mark];
-                data.dataPromise.then(res => {
+                data.dataPromise
+                    .then(res => {
                     var _a;
                     data.loadState = (res === null || res === void 0 ? void 0 : res.data) ? 'success' : 'fail';
                     data.data = res === null || res === void 0 ? void 0 : res.data;
@@ -4842,6 +4846,14 @@ class ResourceLoader {
                         }
                     });
                     data.waitingMark && (data.waitingMark = []);
+                })
+                    .catch(() => {
+                    var _a;
+                    data.loadState = 'fail';
+                    (_a = data.waitingMark) === null || _a === void 0 ? void 0 : _a.map((mark) => {
+                        mark.imageLoadFail(svgStr);
+                    });
+                    data.waitingMark && (data.waitingMark = []);
                 });
             }
         }
@@ -6258,6 +6270,13 @@ function isLeafTag(obj) {
     return false;
 }
 
+function isSvg(str) {
+    return str.startsWith('<svg') || str.startsWith('<?xml');
+}
+function isXML(str) {
+    return str.startsWith('<');
+}
+
 class XMLParser {
     constructor(options) {
         this.options = Object.assign({}, XMLParser.defaultOptions, options);
@@ -6275,12 +6294,6 @@ class XMLParser {
     }
 }
 XMLParser.defaultOptions = {};
-function isSvg(str) {
-    return str.startsWith('<svg') || str.startsWith('<?xml');
-}
-function isXML(str) {
-    return str.startsWith('<');
-}
 
 function incrementalAddTo(group, graphic) {
     group.incrementalAppendChild(graphic);
@@ -9015,7 +9028,7 @@ function createConicalGradient(context, stops, x, y, deltaAngle, startAngle, end
     return pattern;
 }
 
-const FULL_DEFINITION_KEYS$1 = new Set([
+const FULL_DEFINITION_KEYS = new Set([
     'name',
     'patch',
     'priority',
@@ -9024,7 +9037,7 @@ const FULL_DEFINITION_KEYS$1 = new Set([
     'resolver',
     'declaredAffectedKeys'
 ]);
-function isPlainObject$2(value) {
+function isPlainObject$1(value) {
     return value != null && typeof value === 'object' && !Array.isArray(value);
 }
 function normalizePatch(value) {
@@ -9086,14 +9099,13 @@ class StateDefinitionCompiler {
                 patch: undefined
             };
         }
-        const keys = isPlainObject$2(value) ? Object.keys(value) : [];
-        const hasFullKey = keys.some(key => FULL_DEFINITION_KEYS$1.has(key));
+        const keys = isPlainObject$1(value) ? Object.keys(value) : [];
+        const hasFullKey = keys.some(key => FULL_DEFINITION_KEYS.has(key));
         if (hasFullKey) {
             const definition = value;
             return {
                 name: (_a = definition.name) !== null && _a !== void 0 ? _a : name,
                 priority: (_b = definition.priority) !== null && _b !== void 0 ? _b : 0,
-                rank: definition.rank,
                 patch: normalizePatch(definition.patch),
                 resolver: definition.resolver,
                 declaredAffectedKeys: definition.declaredAffectedKeys,
@@ -9114,414 +9126,54 @@ class StateDefinitionCompiler {
         });
         compiled.forEach((definition, origin) => {
             const closure = new Set();
-            const walk = (stateName, stack) => {
+            const walk = (stateName, visiting) => {
                 const nextStates = rawRelationMap.get(stateName);
                 if (!nextStates || !nextStates.size) {
                     return;
                 }
                 nextStates.forEach(nextState => {
-                    if (nextState === origin) {
-                        console.warn(`[StateDefinitionCompiler] circular ${relation} relation detected: ${stack.join(' -> ')} -> ${origin}`);
-                        return;
-                    }
-                    if (stack.includes(nextState)) {
-                        console.warn(`[StateDefinitionCompiler] circular ${relation} relation detected: ${stack.join(' -> ')} -> ${nextState}`);
-                        return;
-                    }
-                    if (closure.has(nextState)) {
+                    if (nextState === origin || visiting.has(nextState) || closure.has(nextState)) {
                         return;
                     }
                     closure.add(nextState);
-                    walk(nextState, stack.concat(nextState));
+                    visiting.add(nextState);
+                    walk(nextState, visiting);
+                    visiting.delete(nextState);
                 });
             };
-            walk(origin, [origin]);
+            walk(origin, new Set([origin]));
             definition[relation] = closure;
         });
     }
 }
 
-var UpdateCategory;
-(function (UpdateCategory) {
-    UpdateCategory[UpdateCategory["NONE"] = 0] = "NONE";
-    UpdateCategory[UpdateCategory["PAINT"] = 1] = "PAINT";
-    UpdateCategory[UpdateCategory["SHAPE"] = 2] = "SHAPE";
-    UpdateCategory[UpdateCategory["BOUNDS"] = 4] = "BOUNDS";
-    UpdateCategory[UpdateCategory["TRANSFORM"] = 8] = "TRANSFORM";
-    UpdateCategory[UpdateCategory["LAYOUT"] = 16] = "LAYOUT";
-    UpdateCategory[UpdateCategory["PICK"] = 32] = "PICK";
-})(UpdateCategory || (UpdateCategory = {}));
-const ATTRIBUTE_CATEGORY = {
-    fill: UpdateCategory.PAINT,
-    opacity: UpdateCategory.PAINT,
-    fillOpacity: UpdateCategory.PAINT,
-    strokeOpacity: UpdateCategory.PAINT,
-    lineDash: UpdateCategory.PAINT,
-    lineDashOffset: UpdateCategory.PAINT,
-    lineCap: UpdateCategory.PAINT,
-    lineJoin: UpdateCategory.PAINT,
-    miterLimit: UpdateCategory.PAINT,
-    shadowColor: UpdateCategory.PAINT,
-    x: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    y: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    scaleX: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    scaleY: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    angle: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    anchor: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    anchor3d: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    postMatrix: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-    layout: UpdateCategory.LAYOUT,
-    zIndex: UpdateCategory.PAINT,
-    visible: UpdateCategory.PAINT | UpdateCategory.PICK,
-    lineWidth: UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.PICK,
-    width: UpdateCategory.SHAPE | UpdateCategory.BOUNDS,
-    height: UpdateCategory.SHAPE | UpdateCategory.BOUNDS
-};
-const ATTRIBUTE_DELTA_CLASSIFIER = {
-    stroke: (prev, next) => {
-        const prevEnabled = prev != null && prev !== false;
-        const nextEnabled = next != null && next !== false;
-        if (prevEnabled !== nextEnabled) {
-            return UpdateCategory.PAINT | UpdateCategory.BOUNDS | UpdateCategory.PICK;
-        }
-        return UpdateCategory.PAINT;
-    },
-    shadowBlur: (prev, next) => {
-        const prevBlur = Number(prev !== null && prev !== void 0 ? prev : 0);
-        const nextBlur = Number(next !== null && next !== void 0 ? next : 0);
-        if (prevBlur !== nextBlur && (prevBlur > 0 || nextBlur > 0)) {
-            return UpdateCategory.PAINT | UpdateCategory.BOUNDS;
-        }
-        return UpdateCategory.PAINT;
-    }
-};
-function classifyAttributeDelta(key, prev, next) {
-    var _a;
-    const dynamicClassifier = ATTRIBUTE_DELTA_CLASSIFIER[key];
-    if (dynamicClassifier) {
-        return dynamicClassifier(prev, next);
-    }
-    return (_a = ATTRIBUTE_CATEGORY[key]) !== null && _a !== void 0 ? _a : UpdateCategory.PAINT;
-}
-function classifyAffectedKeyConservatively(key) {
-    var _a;
-    if (key === 'stroke') {
-        return UpdateCategory.PAINT | UpdateCategory.BOUNDS | UpdateCategory.PICK;
-    }
-    if (key === 'shadowBlur') {
-        return UpdateCategory.PAINT | UpdateCategory.BOUNDS;
-    }
-    return (_a = ATTRIBUTE_CATEGORY[key]) !== null && _a !== void 0 ? _a : UpdateCategory.PAINT;
-}
-function classifyAffectedKeys(keys) {
-    let category = UpdateCategory.NONE;
-    for (const key of keys) {
-        category |= classifyAffectedKeyConservatively(key);
-    }
-    return category;
-}
-
-const DEFAULT_MAX_EVENT_RECORDS = 100;
-const STAGE_PERF_MONITOR = Symbol('vrender.statePerfMonitor');
-function createReasonBreakdown() {
-    return {
-        config_disabled: 0,
-        context_disabled: 0,
-        non_batch_operation: 0,
-        mixed_update_category: 0,
-        resolver_unstable_keys: 0,
-        graphic_unavailable: 0
-    };
-}
-function createEmptyStatePerfSnapshot() {
-    return {
-        counters: {
-            stateCommits: 0,
-            sharedRefreshCommits: 0,
-            deferredJobsCreated: 0,
-            deferredJobsCompleted: 0,
-            deferredJobsCancelled: 0,
-            deferredJobsCoalesced: 0,
-            deferredGraphicsCommitted: 0,
-            deferredBudgetYields: 0,
-            deferredIneligibleGraphics: 0
-        },
-        deferredIneligibleByReason: createReasonBreakdown(),
-        categoryBreakdown: {
-            paint: 0,
-            transform: 0,
-            shape: 0,
-            bounds: 0,
-            layout: 0,
-            pick: 0
-        },
-        refresh: {
-            queuedGraphics: 0,
-            flushedGraphics: 0,
-            ensureFreshCalls: 0,
-            renderScheduled: 0
-        },
-        resolver: {
-            cacheHits: 0,
-            cacheMisses: 0,
-            invalidations: 0
-        },
-        cost: {
-            resolverTotalMs: 0,
-            resolverMaxMs: 0,
-            patchTotalMs: 0,
-            patchMaxMs: 0,
-            sharedRefreshTotalMs: 0,
-            sharedRefreshMaxMs: 0,
-            batchSliceTotalMs: 0,
-            batchSliceMaxMs: 0
-        },
-        allocationHints: {
-            patchObjectsCreated: 0,
-            batchEntriesCreated: 0,
-            refreshQueuePushes: 0
-        },
-        batch: {
-            pendingJobs: 0,
-            maxPendingJobs: 0,
-            maxGraphicsInJob: 0,
-            maxFrameSliceCost: 0
-        },
-        events: []
-    };
-}
-function cloneSnapshot(snapshot) {
-    return {
-        counters: Object.assign({}, snapshot.counters),
-        deferredIneligibleByReason: Object.assign({}, snapshot.deferredIneligibleByReason),
-        categoryBreakdown: Object.assign({}, snapshot.categoryBreakdown),
-        refresh: Object.assign({}, snapshot.refresh),
-        resolver: Object.assign({}, snapshot.resolver),
-        cost: Object.assign({}, snapshot.cost),
-        allocationHints: Object.assign({}, snapshot.allocationHints),
-        batch: Object.assign({}, snapshot.batch),
-        events: snapshot.events ? snapshot.events.slice() : []
-    };
-}
-function isDeferredStateContextConfig(value) {
-    return (!!value &&
-        (Object.prototype.hasOwnProperty.call(value, 'deferred') ||
-            Object.prototype.hasOwnProperty.call(value, 'localEnabled')));
-}
-function normalizeDeferredStateOwnerConfig(value) {
-    if (!value) {
-        return undefined;
-    }
-    if (isDeferredStateContextConfig(value)) {
-        return value;
-    }
-    return {
-        deferred: value
-    };
-}
-function normalizeDeferredStateConfig(config) {
-    var _a, _b, _c;
-    return {
-        enabled: (_a = config === null || config === void 0 ? void 0 : config.enabled) !== null && _a !== void 0 ? _a : false,
-        frameBudget: (_b = config === null || config === void 0 ? void 0 : config.frameBudget) !== null && _b !== void 0 ? _b : 8,
-        maxGraphicsPerFrame: (_c = config === null || config === void 0 ? void 0 : config.maxGraphicsPerFrame) !== null && _c !== void 0 ? _c : 100
-    };
-}
-function fingerprintDeferredStateConfig(config) {
-    return `${config.enabled ? 1 : 0}:${config.frameBudget}:${config.maxGraphicsPerFrame}`;
-}
-class StatePerfMonitor {
-    constructor(configSource) {
-        this.configSource = configSource;
-        this.snapshot = createEmptyStatePerfSnapshot();
-    }
-    setConfig(config) {
-        this.configSource = config;
-    }
-    getSnapshot() {
-        return cloneSnapshot(this.snapshot);
-    }
-    reset() {
-        const next = createEmptyStatePerfSnapshot();
-        Object.assign(this.snapshot.counters, next.counters);
-        Object.assign(this.snapshot.deferredIneligibleByReason, next.deferredIneligibleByReason);
-        Object.assign(this.snapshot.categoryBreakdown, next.categoryBreakdown);
-        Object.assign(this.snapshot.refresh, next.refresh);
-        Object.assign(this.snapshot.resolver, next.resolver);
-        Object.assign(this.snapshot.cost, next.cost);
-        Object.assign(this.snapshot.allocationHints, next.allocationHints);
-        Object.assign(this.snapshot.batch, next.batch);
-        this.snapshot.events = [];
-    }
-    incrementCounter(key, delta = 1) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.counters[key] += delta;
-    }
-    recordDeferredIneligible(reason, delta = 1) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.deferredIneligibleByReason[reason] += delta;
-        this.snapshot.counters.deferredIneligibleGraphics += delta;
-        this.recordEvent('deferred-ineligible', { reason, count: delta });
-    }
-    recordCategory(category) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        if (category & UpdateCategory.PAINT) {
-            this.snapshot.categoryBreakdown.paint += 1;
-        }
-        if (category & UpdateCategory.TRANSFORM) {
-            this.snapshot.categoryBreakdown.transform += 1;
-        }
-        if (category & UpdateCategory.SHAPE) {
-            this.snapshot.categoryBreakdown.shape += 1;
-        }
-        if (category & UpdateCategory.BOUNDS) {
-            this.snapshot.categoryBreakdown.bounds += 1;
-        }
-        if (category & UpdateCategory.LAYOUT) {
-            this.snapshot.categoryBreakdown.layout += 1;
-        }
-        if (category & UpdateCategory.PICK) {
-            this.snapshot.categoryBreakdown.pick += 1;
-        }
-    }
-    recordRefresh(key, delta = 1) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.refresh[key] += delta;
-    }
-    recordResolver(key, delta = 1) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.resolver[key] += delta;
-    }
-    recordCost(kind, durationMs) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        if (kind === 'resolver') {
-            this.snapshot.cost.resolverTotalMs += durationMs;
-            this.snapshot.cost.resolverMaxMs = Math.max(this.snapshot.cost.resolverMaxMs, durationMs);
-            return;
-        }
-        if (kind === 'patch') {
-            this.snapshot.cost.patchTotalMs += durationMs;
-            this.snapshot.cost.patchMaxMs = Math.max(this.snapshot.cost.patchMaxMs, durationMs);
-            return;
-        }
-        if (kind === 'sharedRefresh') {
-            this.snapshot.cost.sharedRefreshTotalMs += durationMs;
-            this.snapshot.cost.sharedRefreshMaxMs = Math.max(this.snapshot.cost.sharedRefreshMaxMs, durationMs);
-            return;
-        }
-        this.snapshot.cost.batchSliceTotalMs += durationMs;
-        this.snapshot.cost.batchSliceMaxMs = Math.max(this.snapshot.cost.batchSliceMaxMs, durationMs);
-        this.snapshot.batch.maxFrameSliceCost = Math.max(this.snapshot.batch.maxFrameSliceCost, durationMs);
-    }
-    recordAllocation(key, delta = 1) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.allocationHints[key] += delta;
-    }
-    updateBatchPending(pendingJobs) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.batch.pendingJobs = pendingJobs;
-        this.snapshot.batch.maxPendingJobs = Math.max(this.snapshot.batch.maxPendingJobs, pendingJobs);
-    }
-    updateMaxGraphicsInJob(count) {
-        if (!this.isEnabled()) {
-            return;
-        }
-        this.snapshot.batch.maxGraphicsInJob = Math.max(this.snapshot.batch.maxGraphicsInJob, count);
-    }
-    recordEvent(type, detail) {
-        var _a, _b, _c;
-        if (!this.shouldRecordEvents()) {
-            return;
-        }
-        const events = (_a = this.snapshot.events) !== null && _a !== void 0 ? _a : (this.snapshot.events = []);
-        events.push({
-            type,
-            at: Date.now(),
-            detail
-        });
-        const max = (_c = (_b = this.getConfig()) === null || _b === void 0 ? void 0 : _b.maxEventRecords) !== null && _c !== void 0 ? _c : DEFAULT_MAX_EVENT_RECORDS;
-        if (events.length > max) {
-            events.splice(0, events.length - max);
-        }
-    }
-    isEnabled() {
-        var _a;
-        return ((_a = this.getConfig()) === null || _a === void 0 ? void 0 : _a.enabled) === true;
-    }
-    shouldRecordEvents() {
-        const config = this.getConfig();
-        return !!(config === null || config === void 0 ? void 0 : config.enabled) && !!config.recordEvents;
-    }
-    getConfig() {
-        return typeof this.configSource === 'function' ? this.configSource() : this.configSource;
-    }
-}
-function ensureStageStatePerfMonitor(stage) {
-    const stageAny = stage;
-    if (!stageAny[STAGE_PERF_MONITOR]) {
-        stageAny[STAGE_PERF_MONITOR] = new StatePerfMonitor(() => stage.statePerfConfig);
-    }
-    return stageAny[STAGE_PERF_MONITOR];
-}
-function getStageStatePerfMonitor(stage) {
-    if (!stage) {
-        return undefined;
-    }
-    return stage[STAGE_PERF_MONITOR];
-}
-
-function isPlainObject$1(value) {
+function isPlainObject(value) {
     return value != null && typeof value === 'object' && !Array.isArray(value);
 }
-function cloneValue$1(value) {
-    if (!isPlainObject$1(value)) {
+function cloneValue(value) {
+    if (!isPlainObject(value)) {
         return value;
     }
     const clone = {};
     Object.keys(value).forEach(key => {
-        clone[key] = cloneValue$1(value[key]);
+        clone[key] = cloneValue(value[key]);
     });
     return clone;
 }
-function deepMerge$1(base, value) {
+function deepMerge(base, value) {
     var _a;
-    const result = (_a = cloneValue$1(base)) !== null && _a !== void 0 ? _a : {};
+    const result = (_a = cloneValue(base)) !== null && _a !== void 0 ? _a : {};
     Object.keys(value).forEach(key => {
         const nextValue = value[key];
         const previousValue = result[key];
-        if (isPlainObject$1(previousValue) && isPlainObject$1(nextValue)) {
-            result[key] = deepMerge$1(previousValue, nextValue);
+        if (isPlainObject(previousValue) && isPlainObject(nextValue)) {
+            result[key] = deepMerge(previousValue, nextValue);
             return;
         }
-        result[key] = cloneValue$1(nextValue);
+        result[key] = cloneValue(nextValue);
     });
     return result;
 }
-const FULL_DEFINITION_KEYS = new Set([
-    'name',
-    'patch',
-    'priority',
-    'exclude',
-    'suppress',
-    'resolver',
-    'declaredAffectedKeys'
-]);
 class StateEngine {
     constructor(options) {
         var _a;
@@ -9535,9 +9187,6 @@ class StateEngine {
         this.baseAttributes = {};
         this.compiledDefinitions = options.compiledDefinitions;
         this.stateSort = options.stateSort;
-        this.stateProxy = options.stateProxy;
-        this.stateProxyEligibility = options.stateProxyEligibility;
-        this.states = options.states;
         this.mergeMode = (_a = options.mergeMode) !== null && _a !== void 0 ? _a : 'shallow';
     }
     get activeStates() {
@@ -9553,6 +9202,9 @@ class StateEngine {
         return this._suppressed;
     }
     setResolveContext(graphic, baseAttributes) {
+        if (this.graphic !== graphic || this.baseAttributes !== baseAttributes) {
+            this.invalidateResolverCache();
+        }
         this.graphic = graphic;
         this.baseAttributes = baseAttributes;
     }
@@ -9636,11 +9288,9 @@ class StateEngine {
         };
     }
     invalidateResolverCache() {
-        var _a, _b;
         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');
     }
     hasState(stateName) {
         if (!this._activeStates.length) {
@@ -9651,28 +9301,6 @@ class StateEngine {
         }
         return this._activeStates.includes(stateName);
     }
-    getCompatPatch(stateName) {
-        var _a, _b, _c;
-        const targetStates = this._activeStates.length ? this._activeStates : this._effectiveStates;
-        const canUseStateProxy = this.canUseStateProxy(stateName);
-        const proxyPatch = canUseStateProxy ? (_a = this.stateProxy) === null || _a === void 0 ? void 0 : _a.call(this, stateName, targetStates) : undefined;
-        if (this.stateProxy && canUseStateProxy) {
-            return proxyPatch !== null && proxyPatch !== void 0 ? proxyPatch : undefined;
-        }
-        const value = (_b = this.states) === null || _b === void 0 ? void 0 : _b[stateName];
-        if (value == null) {
-            return undefined;
-        }
-        if (!isPlainObject$1(value)) {
-            return value;
-        }
-        const keys = Object.keys(value);
-        const hasFullKey = keys.some(key => FULL_DEFINITION_KEYS.has(key));
-        if (!hasFullKey) {
-            return value;
-        }
-        return cloneValue$1(((_c = value.patch) !== null && _c !== void 0 ? _c : undefined));
-    }
     sortStates(states) {
         const withDefinition = [];
         const withoutDefinition = [];
@@ -9729,96 +9357,44 @@ class StateEngine {
         };
     }
     recomputePatch(effectiveStates) {
-        var _a;
-        const perfMonitor = getStageStatePerfMonitor((_a = this.graphic) === null || _a === void 0 ? void 0 : _a.stage);
-        const patchStart = perfMonitor ? performance.now() : 0;
-        let resolverCost = 0;
         const cacheKey = effectiveStates.join(',');
         const nextPatch = {};
-        perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordAllocation('patchObjectsCreated');
-        if (this.resolverCacheValid && this.resolverCacheKey === cacheKey) {
-            effectiveStates.forEach(stateName => {
-                var _a;
-                const canUseStateProxy = this.canUseStateProxy(stateName);
-                const proxyPatch = canUseStateProxy ? (_a = this.stateProxy) === null || _a === void 0 ? void 0 : _a.call(this, stateName, effectiveStates) : undefined;
-                if (this.stateProxy && canUseStateProxy) {
-                    if (proxyPatch != null) {
-                        this.mergeInto(nextPatch, proxyPatch);
-                    }
-                    return;
-                }
-                const definition = this.compiledDefinitions.get(stateName);
-                if (!definition) {
-                    const compatPatch = this.getCompatPatch(stateName);
-                    if (compatPatch) {
-                        this.mergeInto(nextPatch, compatPatch);
-                    }
-                    return;
-                }
-                if (definition.patch) {
-                    this.mergeInto(nextPatch, definition.patch);
-                }
-                if (definition.hasResolver) {
-                    const cachedPatch = this.resolverPatchCache.get(stateName);
-                    if (cachedPatch) {
-                        perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordResolver('cacheHits');
-                        this.mergeInto(nextPatch, cachedPatch);
-                    }
-                }
-            });
-        }
-        else {
+        const useResolverCache = this.resolverCacheValid && this.resolverCacheKey === cacheKey;
+        if (!useResolverCache) {
             this.resolverPatchCache.clear();
             this.resolverCacheKey = cacheKey;
-            effectiveStates.forEach(stateName => {
-                var _a;
-                const canUseStateProxy = this.canUseStateProxy(stateName);
-                const proxyPatch = canUseStateProxy ? (_a = this.stateProxy) === null || _a === void 0 ? void 0 : _a.call(this, stateName, effectiveStates) : undefined;
-                if (this.stateProxy && canUseStateProxy) {
-                    if (proxyPatch != null) {
-                        this.mergeInto(nextPatch, proxyPatch);
-                    }
-                    return;
-                }
-                const definition = this.compiledDefinitions.get(stateName);
-                if (!definition) {
-                    const compatPatch = this.getCompatPatch(stateName);
-                    if (compatPatch) {
-                        this.mergeInto(nextPatch, compatPatch);
-                    }
-                    return;
-                }
-                if (definition.patch) {
-                    this.mergeInto(nextPatch, definition.patch);
-                }
-                if (definition.hasResolver && definition.resolver) {
-                    perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordResolver('cacheMisses');
-                    const resolverStart = perfMonitor ? performance.now() : 0;
-                    const resolverPatch = definition.resolver({
+        }
+        effectiveStates.forEach(stateName => {
+            var _a;
+            const definition = this.compiledDefinitions.get(stateName);
+            if (!definition) {
+                return;
+            }
+            if (definition.patch) {
+                this.mergeInto(nextPatch, definition.patch);
+            }
+            if (definition.hasResolver) {
+                const resolverPatch = useResolverCache
+                    ? this.resolverPatchCache.get(stateName)
+                    : (_a = definition.resolver) === null || _a === void 0 ? void 0 : _a.call(definition, {
                         graphic: this.graphic,
                         activeStates: this._activeStates,
                         effectiveStates: this._effectiveStates,
                         baseAttributes: this.baseAttributes,
                         resolvedPatch: nextPatch
                     });
-                    if (perfMonitor) {
-                        const duration = performance.now() - resolverStart;
-                        resolverCost += duration;
-                        perfMonitor.recordCost('resolver', duration);
-                    }
-                    if (resolverPatch) {
+                if (resolverPatch) {
+                    if (!useResolverCache) {
                         this.resolverPatchCache.set(stateName, resolverPatch);
-                        this.mergeInto(nextPatch, resolverPatch);
                     }
+                    this.mergeInto(nextPatch, resolverPatch);
                 }
-            });
+            }
+        });
+        if (!useResolverCache) {
             this.resolverCacheValid = true;
         }
         this._resolvedPatch = nextPatch;
-        if (perfMonitor) {
-            const totalCost = performance.now() - patchStart;
-            perfMonitor.recordCost('patch', Math.max(0, totalCost - resolverCost));
-        }
     }
     mergeInto(target, patch) {
         if (this.mergeMode === 'deep') {
@@ -9827,20 +9403,20 @@ class StateEngine {
                 const nextValue = patch[key];
                 const previousValue = target[key];
                 const baseValue = (_a = this.baseAttributes) === null || _a === void 0 ? void 0 : _a[key];
-                if (isPlainObject$1(previousValue) && isPlainObject$1(nextValue)) {
-                    target[key] = deepMerge$1(previousValue, nextValue);
+                if (isPlainObject(previousValue) && isPlainObject(nextValue)) {
+                    target[key] = deepMerge(previousValue, nextValue);
                     return;
                 }
-                if (!isPlainObject$1(previousValue) && isPlainObject$1(baseValue) && isPlainObject$1(nextValue)) {
-                    target[key] = deepMerge$1(baseValue, nextValue);
+                if (!isPlainObject(previousValue) && isPlainObject(baseValue) && isPlainObject(nextValue)) {
+                    target[key] = deepMerge(baseValue, nextValue);
                     return;
                 }
-                target[key] = cloneValue$1(nextValue);
+                target[key] = cloneValue(nextValue);
             });
             return;
         }
         Object.keys(patch).forEach(key => {
-            target[key] = cloneValue$1(patch[key]);
+            target[key] = cloneValue(patch[key]);
         });
     }
     sameArray(left, right) {
@@ -9854,341 +9430,69 @@ class StateEngine {
         }
         return true;
     }
-    canUseStateProxy(stateName) {
-        if (!this.stateProxy) {
-            return false;
-        }
-        return this.stateProxyEligibility ? this.stateProxyEligibility(stateName) : true;
-    }
-}
-
-class StateModel {
-    constructor(options = {}) {
-        var _a;
-        this.exclusiveGroupMap = new Map();
-        this.exclusiveGroups = new Map();
-        this.states = options.states;
-        this.currentStates = options.currentStates ? [...options.currentStates] : undefined;
-        this.stateSort = options.stateSort;
-        this.stateProxy = options.stateProxy;
-        this.stateEngine = options.stateEngine;
-        if (this.stateEngine &&
-            options.currentStates &&
-            !this.sameStates(this.stateEngine.activeStates, options.currentStates)) {
-            this.stateEngine.applyStates(options.currentStates);
-        }
-        const exclusiveGroups = (_a = options.exclusiveGroups) !== null && _a !== void 0 ? _a : {};
-        for (const groupName in exclusiveGroups) {
-            if (!Object.prototype.hasOwnProperty.call(exclusiveGroups, groupName)) {
-                continue;
-            }
-            this.registerExclusiveGroup(groupName, exclusiveGroups[groupName]);
-        }
-    }
-    getCurrentStates() {
-        return this.currentStates ? [...this.currentStates] : [];
-    }
-    hasState(stateName) {
-        if (this.stateEngine) {
-            return this.stateEngine.hasState(stateName);
-        }
-        if (!this.currentStates || !this.currentStates.length) {
-            return false;
-        }
-        if (stateName == null) {
-            return true;
-        }
-        return this.currentStates.includes(stateName);
-    }
-    getState(stateName) {
-        var _a;
-        return (_a = this.states) === null || _a === void 0 ? void 0 : _a[stateName];
-    }
-    useStates(states) {
-        var _a;
-        if (this.stateEngine) {
-            const result = this.stateEngine.applyStates(states);
-            this.currentStates = [...result.activeStates];
-            return {
-                changed: result.changed,
-                states: [...result.activeStates],
-                effectiveStates: [...result.effectiveStates]
-            };
-        }
-        if (!states.length) {
-            return this.clearStates();
-        }
-        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : [];
-        const changed = previousStates.length !== states.length || states.some((stateName, index) => previousStates[index] !== stateName);
-        const nextStates = this.sortStates(states);
-        if (changed) {
-            this.currentStates = nextStates;
-        }
-        return {
-            changed,
-            states: changed ? [...nextStates] : [...previousStates]
-        };
-    }
-    clearStates() {
-        if (this.stateEngine) {
-            const result = this.stateEngine.clearStates();
-            this.currentStates = [];
-            return {
-                changed: result.changed,
-                states: [],
-                effectiveStates: []
-            };
-        }
-        const changed = this.hasState();
-        this.currentStates = [];
-        return {
-            changed,
-            states: []
-        };
-    }
-    addState(stateName, keepCurrentStates) {
-        var _a;
-        if (this.stateEngine) {
-            const result = this.stateEngine.addState(stateName, keepCurrentStates);
-            this.currentStates = [...result.activeStates];
-            return {
-                changed: result.changed,
-                states: [...result.activeStates],
-                effectiveStates: [...result.effectiveStates]
-            };
-        }
-        if (this.currentStates &&
-            this.currentStates.includes(stateName) &&
-            (keepCurrentStates || this.currentStates.length === 1)) {
-            return {
-                changed: false,
-                states: this.getCurrentStates()
-            };
-        }
-        const nextStates = keepCurrentStates && ((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
-        return this.useStates(nextStates);
-    }
-    removeState(stateName) {
-        if (this.stateEngine) {
-            const result = this.stateEngine.removeState(stateName);
-            this.currentStates = [...result.activeStates];
-            return {
-                changed: result.changed,
-                states: [...result.activeStates],
-                effectiveStates: [...result.effectiveStates]
-            };
-        }
-        if (!this.currentStates) {
-            return {
-                changed: false,
-                states: []
-            };
-        }
-        const filter = Array.isArray(stateName) ? (s) => !stateName.includes(s) : (s) => s !== stateName;
-        const nextStates = this.currentStates.filter(filter);
-        if (nextStates.length === this.currentStates.length) {
-            return {
-                changed: false,
-                states: this.getCurrentStates()
-            };
-        }
-        return this.useStates(nextStates);
-    }
-    toggleState(stateName) {
-        if (this.stateEngine) {
-            const result = this.stateEngine.toggleState(stateName);
-            this.currentStates = [...result.activeStates];
-            return {
-                changed: result.changed,
-                states: [...result.activeStates],
-                effectiveStates: [...result.effectiveStates]
-            };
-        }
-        if (this.hasState(stateName)) {
-            return this.removeState(stateName);
-        }
-        const nextStates = this.currentStates ? this.currentStates.slice() : [];
-        if (!nextStates.includes(stateName)) {
-            nextStates.push(stateName);
-        }
-        return this.useStates(nextStates);
-    }
-    sortStates(states) {
-        if (this.stateEngine) {
-            return [...this.stateEngine.activeStates];
-        }
-        if (!this.stateSort) {
-            return [...states];
-        }
-        return [...states].sort(this.stateSort);
-    }
-    registerExclusiveGroup(groupName, states) {
-        const uniqueStates = Array.from(new Set(states));
-        this.exclusiveGroups.set(groupName, uniqueStates);
-        uniqueStates.forEach(stateName => this.exclusiveGroupMap.set(stateName, groupName));
-    }
-    getExclusiveGroup(stateName) {
-        return this.exclusiveGroupMap.get(stateName);
-    }
-    getMutuallyExclusiveStates(stateName) {
-        var _a;
-        const groupName = this.getExclusiveGroup(stateName);
-        if (!groupName) {
-            return [];
-        }
-        return ((_a = this.exclusiveGroups.get(groupName)) !== null && _a !== void 0 ? _a : []).filter(name => name !== stateName);
-    }
-    isMutuallyExclusive(stateA, stateB) {
-        const groupName = this.getExclusiveGroup(stateA);
-        return !!groupName && groupName === this.getExclusiveGroup(stateB) && stateA !== stateB;
-    }
-    get effectiveStates() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.effectiveStates) !== null && _b !== void 0 ? _b : this.currentStates) !== null && _c !== void 0 ? _c : [];
-    }
-    get resolvedPatch() {
-        var _a;
-        return (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.resolvedPatch;
-    }
-    sameStates(left, right) {
-        if (left.length !== right.length) {
-            return false;
-        }
-        for (let index = 0; index < left.length; index++) {
-            if (left[index] !== right[index]) {
-                return false;
-            }
-        }
-        return true;
-    }
 }
 
-function isPlainObject(value) {
-    return value != null && typeof value === 'object' && !Array.isArray(value);
-}
-function cloneValue(value) {
-    if (!isPlainObject(value)) {
-        return value;
-    }
-    const clone = {};
-    for (const key in value) {
-        if (!Object.prototype.hasOwnProperty.call(value, key)) {
-            continue;
-        }
-        clone[key] = cloneValue(value[key]);
-    }
-    return clone;
-}
-function deepMerge(base, value) {
-    const result = cloneValue(base) || {};
-    for (const key in value) {
-        if (!Object.prototype.hasOwnProperty.call(value, key)) {
-            continue;
-        }
-        const nextValue = value[key];
-        const previousValue = result[key];
-        if (isPlainObject(previousValue) && isPlainObject(nextValue)) {
-            result[key] = deepMerge(previousValue, nextValue);
+var UpdateCategory;
+(function (UpdateCategory) {
+    UpdateCategory[UpdateCategory["NONE"] = 0] = "NONE";
+    UpdateCategory[UpdateCategory["PAINT"] = 1] = "PAINT";
+    UpdateCategory[UpdateCategory["SHAPE"] = 2] = "SHAPE";
+    UpdateCategory[UpdateCategory["BOUNDS"] = 4] = "BOUNDS";
+    UpdateCategory[UpdateCategory["TRANSFORM"] = 8] = "TRANSFORM";
+    UpdateCategory[UpdateCategory["LAYOUT"] = 16] = "LAYOUT";
+    UpdateCategory[UpdateCategory["PICK"] = 32] = "PICK";
+})(UpdateCategory || (UpdateCategory = {}));
+const ATTRIBUTE_CATEGORY = {
+    fill: UpdateCategory.PAINT,
+    opacity: UpdateCategory.PAINT,
+    fillOpacity: UpdateCategory.PAINT,
+    strokeOpacity: UpdateCategory.PAINT,
+    lineDash: UpdateCategory.PAINT,
+    lineDashOffset: UpdateCategory.PAINT,
+    lineCap: UpdateCategory.PAINT,
+    lineJoin: UpdateCategory.PAINT,
+    miterLimit: UpdateCategory.PAINT,
+    shadowColor: UpdateCategory.PAINT,
+    x: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    y: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    scaleX: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    scaleY: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    angle: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    anchor: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    anchor3d: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    postMatrix: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+    layout: UpdateCategory.LAYOUT,
+    zIndex: UpdateCategory.PAINT,
+    visible: UpdateCategory.PAINT | UpdateCategory.PICK,
+    lineWidth: UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.PICK,
+    width: UpdateCategory.SHAPE | UpdateCategory.BOUNDS,
+    height: UpdateCategory.SHAPE | UpdateCategory.BOUNDS
+};
+const ATTRIBUTE_DELTA_CLASSIFIER = {
+    stroke: (prev, next) => {
+        const prevEnabled = prev != null && prev !== false;
+        const nextEnabled = next != null && next !== false;
+        if (prevEnabled !== nextEnabled) {
+            return UpdateCategory.PAINT | UpdateCategory.BOUNDS | UpdateCategory.PICK;
         }
-        else {
-            result[key] = cloneValue(nextValue);
+        return UpdateCategory.PAINT;
+    },
+    shadowBlur: (prev, next) => {
+        const prevBlur = Number(prev !== null && prev !== void 0 ? prev : 0);
+        const nextBlur = Number(next !== null && next !== void 0 ? next : 0);
+        if (prevBlur !== nextBlur && (prevBlur > 0 || nextBlur > 0)) {
+            return UpdateCategory.PAINT | UpdateCategory.BOUNDS;
         }
+        return UpdateCategory.PAINT;
     }
-    return result;
-}
-class StateStyleResolver {
-    constructor(options = {}) {
-        this.options = options;
-    }
-    resolve(normalAttrs, states, stateProxy, currentStates, stateSort) {
-        var _a;
-        const mergeMode = (_a = this.options.mergeMode) !== null && _a !== void 0 ? _a : 'shallow';
-        const sortedStates = stateSort ? currentStates.slice().sort(stateSort) : currentStates.slice();
-        const resolvedAttrs = {};
-        sortedStates.forEach(stateName => {
-            const attrs = stateProxy ? stateProxy(stateName, sortedStates) : states === null || states === void 0 ? void 0 : states[stateName];
-            if (attrs == null) {
-                return;
-            }
-            for (const key in attrs) {
-                if (!Object.prototype.hasOwnProperty.call(attrs, key)) {
-                    continue;
-                }
-                const nextValue = attrs[key];
-                if (mergeMode === 'deep' &&
-                    isPlainObject(nextValue) &&
-                    (isPlainObject(resolvedAttrs[key]) ||
-                        isPlainObject(normalAttrs[key]))) {
-                    const baseValue = isPlainObject(resolvedAttrs[key])
-                        ? resolvedAttrs[key]
-                        : isPlainObject(normalAttrs[key])
-                            ? normalAttrs[key]
-                            : {};
-                    resolvedAttrs[key] = deepMerge(baseValue, nextValue);
-                }
-                else {
-                    resolvedAttrs[key] = cloneValue(nextValue);
-                }
-            }
-        });
-        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 classifyAttributeDelta(key, prev, next) {
+    var _a;
+    const dynamicClassifier = ATTRIBUTE_DELTA_CLASSIFIER[key];
+    if (dynamicClassifier) {
+        return dynamicClassifier(prev, next);
     }
+    return (_a = ATTRIBUTE_CATEGORY[key]) !== null && _a !== void 0 ? _a : UpdateCategory.PAINT;
 }
 
 function hasOwnKeys(value) {
@@ -10212,13 +9516,11 @@ function normalizeNoAnimateAttrConfig(config) {
     }, {});
 }
 class StateTransitionOrchestrator {
-    analyzeTransition(_currentAttrs, targetAttrs, stateNames, hasAnimation, options = {}) {
+    analyzeTransition(targetAttrs, hasAnimation, options = {}) {
         var _a, _b;
         const plan = {
-            stateNames,
             targetAttrs: Object.assign({}, targetAttrs),
             animateAttrs: {},
-            jumpAttrs: {},
             noAnimateAttrs: {}
         };
         if (!hasAnimation) {
@@ -10227,10 +9529,10 @@ 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 readDefaultAttribute = getDefaultAttribute;
         const shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute;
         const assignTransitionAttr = (key, value) => {
             if (noWorkAnimateAttr[key]) {
-                plan.jumpAttrs[key] = value;
                 plan.noAnimateAttrs[key] = value;
                 return;
             }
@@ -10238,7 +9540,7 @@ class StateTransitionOrchestrator {
                 if (shouldSkipDefaultAttribute === null || shouldSkipDefaultAttribute === void 0 ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) {
                     return;
                 }
-                plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+                plan.animateAttrs[key] = readDefaultAttribute(key);
                 return;
             }
             plan.animateAttrs[key] = value;
@@ -10292,13 +9594,13 @@ class StateTransitionOrchestrator {
         graphic._emitCustomEvent('afterStateUpdate', { type: AttributeUpdateType.STATE });
         return plan;
     }
-    applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-        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),
+    applyClearTransition(graphic, targetAttrs, hasAnimation, options = {}) {
+        var _a;
+        const plan = this.analyzeTransition(targetAttrs, hasAnimation, {
+            noWorkAnimateAttr: graphic.getNoWorkAnimateAttr(),
             isClear: true,
-            getDefaultAttribute: (_b = graphic.getDefaultAttribute) === null || _b === void 0 ? void 0 : _b.bind(graphic),
-            shouldSkipDefaultAttribute: (_c = options.shouldSkipDefaultAttribute) !== null && _c !== void 0 ? _c : (_d = graphic.shouldSkipStateTransitionDefaultAttribute) === null || _d === void 0 ? void 0 : _d.bind(graphic),
+            getDefaultAttribute: graphic.getDefaultAttribute.bind(graphic),
+            shouldSkipDefaultAttribute: (_a = options.shouldSkipDefaultAttribute) !== null && _a !== void 0 ? _a : graphic.shouldSkipStateTransitionDefaultAttribute.bind(graphic),
             animateConfig: options.animateConfig,
             extraAnimateAttrs: options.extraAnimateAttrs
         });
@@ -10307,33 +9609,11 @@ class StateTransitionOrchestrator {
 }
 
 const compiler = new StateDefinitionCompiler();
-function copyDefinitions(definitions) {
-    return definitions ? Object.assign({}, definitions) : {};
-}
 function buildEffectiveSourceDefinitions(parentScope, localStateDefinitions, themeStateDefinitions) {
-    const merged = parentScope
-        ? copyDefinitions(parentScope.effectiveSourceDefinitions)
-        : copyDefinitions(themeStateDefinitions);
-    if (localStateDefinitions) {
-        Object.keys(localStateDefinitions).forEach(stateName => {
-            merged[stateName] = localStateDefinitions[stateName];
-        });
-    }
-    return merged;
-}
-function initializeScope(scope, revision = 0) {
-    var _a;
-    const effectiveSourceDefinitions = buildEffectiveSourceDefinitions(scope.parentScope, scope.localStateDefinitions, scope.themeStateDefinitions);
-    scope.effectiveSourceDefinitions = effectiveSourceDefinitions;
-    scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions);
-    scope.parentRevisionAtBuild = (_a = scope.parentScope) === null || _a === void 0 ? void 0 : _a.revision;
-    scope.revision = revision;
-    scope.dirty = false;
-    return scope;
+    return Object.assign({}, parentScope ? parentScope.effectiveSourceDefinitions : themeStateDefinitions, localStateDefinitions);
 }
 function createRootSharedStateScope(stage, themeStateDefinitions) {
-    return initializeScope({
-        ownerKind: 'root',
+    return rebuildSharedStateScope({
         ownerStage: stage,
         themeStateDefinitions,
         effectiveSourceDefinitions: {},
@@ -10344,9 +9624,7 @@ function createRootSharedStateScope(stage, themeStateDefinitions) {
     }, 0);
 }
 function createGroupSharedStateScope(group, parentScope, localStateDefinitions) {
-    return initializeScope({
-        ownerKind: 'group',
-        ownerGroup: group,
+    return rebuildSharedStateScope({
         ownerStage: group.stage,
         parentScope,
         localStateDefinitions,
@@ -10381,22 +9659,20 @@ function setRootSharedStateScopeThemeDefinitions(scope, themeStateDefinitions) {
     rebuildSharedStateScope(scope);
     return true;
 }
-function rebuildSharedStateScope(scope) {
+function rebuildSharedStateScope(scope, revision = scope.revision + 1) {
     var _a;
     const effectiveSourceDefinitions = buildEffectiveSourceDefinitions(scope.parentScope, scope.localStateDefinitions, scope.themeStateDefinitions);
     scope.effectiveSourceDefinitions = effectiveSourceDefinitions;
     scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions);
     scope.parentRevisionAtBuild = (_a = scope.parentScope) === null || _a === void 0 ? void 0 : _a.revision;
-    scope.revision += 1;
+    scope.revision = revision;
     scope.dirty = false;
     return scope;
 }
 function ensureSharedStateScopeFresh(scope) {
-    var _a;
     if (!scope) {
         return undefined;
     }
-    (_a = getStageStatePerfMonitor(scope.ownerStage)) === null || _a === void 0 ? void 0 : _a.recordRefresh('ensureFreshCalls');
     if (scope.parentScope) {
         ensureSharedStateScopeFresh(scope.parentScope);
     }
@@ -10416,11 +9692,9 @@ function collectSharedStateScopeChain(scope) {
 }
 
 function scheduleStageSharedStateRefresh(stage) {
-    var _a;
     if (!stage || stage.releaseStatus === 'released') {
         return;
     }
-    (_a = getStageStatePerfMonitor(stage)) === null || _a === void 0 ? void 0 : _a.recordRefresh('renderScheduled');
     stage.renderNextFrame();
 }
 function enqueueGraphicSharedStateRefresh(stage, graphic) {
@@ -10429,36 +9703,27 @@ function enqueueGraphicSharedStateRefresh(stage, graphic) {
         return;
     }
     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);
-        perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordRefresh('queuedGraphics');
-        perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordAllocation('refreshQueuePushes');
-    }
+    pending.add(graphic);
 }
 function markScopeActiveDescendantsDirty(scope, stage) {
-    let marked = false;
+    if (!scope.subtreeActiveDescendants.size) {
+        return;
+    }
     scope.subtreeActiveDescendants.forEach(graphic => {
         var _a;
         graphic.sharedStateDirty = true;
         const ownerStage = (_a = stage !== null && stage !== void 0 ? stage : graphic.stage) !== null && _a !== void 0 ? _a : scope.ownerStage;
         enqueueGraphicSharedStateRefresh(ownerStage, graphic);
-        marked = true;
     });
-    if (marked) {
-        scheduleStageSharedStateRefresh(stage !== null && stage !== void 0 ? stage : scope.ownerStage);
-    }
+    scheduleStageSharedStateRefresh(stage !== null && stage !== void 0 ? stage : scope.ownerStage);
 }
 function flushStageSharedStateRefresh(stage) {
     const pending = stage._pendingSharedStateRefreshGraphics;
     if (!pending || !pending.size) {
         return;
     }
-    const perfMonitor = getStageStatePerfMonitor(stage);
-    const start = perfMonitor ? performance.now() : 0;
     const graphics = Array.from(pending.values());
     pending.clear();
-    perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordRefresh('flushedGraphics', graphics.length);
     graphics.forEach(graphic => {
         if (graphic.releaseStatus === 'released') {
             return;
@@ -10466,19 +9731,11 @@ function flushStageSharedStateRefresh(stage) {
         if (graphic.stage !== stage) {
             return;
         }
-        const refresh = graphic.refreshSharedStateBeforeRender;
-        if (typeof refresh === 'function') {
-            refresh.call(graphic);
-            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.incrementCounter('sharedRefreshCommits');
+        if (!graphic.sharedStateDirty) {
+            return;
         }
+        graphic.refreshSharedStateBeforeRender();
     });
-    if (perfMonitor) {
-        perfMonitor.recordCost('sharedRefresh', performance.now() - start);
-        perfMonitor.recordEvent('shared-refresh-flush', {
-            stageId: stage._uid,
-            flushedGraphics: graphics.length
-        });
-    }
 }
 
 const _tempBounds$1 = new AABBBounds();
@@ -10519,8 +9776,14 @@ const builtinTextureTypes = new Set([
     'wave'
 ]);
 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)) {
@@ -10534,18 +9797,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;
@@ -10558,6 +9809,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 : {};
@@ -10625,24 +9885,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) {
@@ -10652,8 +9917,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;
@@ -10662,18 +9930,6 @@ class Graphic extends Node {
     getAttributes() {
         return this.attribute;
     }
-    getStateStyleResolver(mergeMode) {
-        if (mergeMode === 'deep') {
-            if (!this.deepStateStyleResolver) {
-                this.deepStateStyleResolver = new StateStyleResolver({ mergeMode: 'deep' });
-            }
-            return this.deepStateStyleResolver;
-        }
-        if (!this.stateStyleResolver) {
-            this.stateStyleResolver = new StateStyleResolver();
-        }
-        return this.stateStyleResolver;
-    }
     getStateTransitionOrchestrator() {
         if (!this.stateTransitionOrchestrator) {
             this.stateTransitionOrchestrator = new StateTransitionOrchestrator();
@@ -10700,25 +9956,41 @@ class Graphic extends Node {
         }
         this.boundSharedStateScope = nextScope;
         this.boundSharedStateRevision = undefined;
-        this.localFallbackCompiledDefinitions = undefined;
         this.compiledStateDefinitions = undefined;
         this.compiledStateDefinitionsCacheKey = undefined;
         this.stateEngine = undefined;
         this.stateEngineCompiledDefinitions = undefined;
-        this.stateEngineStateProxyModeKey = undefined;
         this.syncSharedStateActiveRegistrations();
         if (markDirty && ((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length)) {
             this.markSharedStateDirty();
         }
         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);
             }
@@ -10748,7 +10020,7 @@ class Graphic extends Node {
             this.setStage(stage, layer);
             return;
         }
-        this.syncSharedStateScopeBindingFromTree();
+        this.syncSharedStateScopeBindingOnTreeChange();
     }
     refreshSharedStateBeforeRender() {
         var _a;
@@ -10763,16 +10035,16 @@ 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() {
         var _a, _b;
         if (this.localStateDefinitionsSource !== this.states) {
             this.localStateDefinitionsSource = this.states;
-            this.localFallbackVersion = ((_a = this.localFallbackVersion) !== null && _a !== void 0 ? _a : 0) + 1;
+            this.localStateDefinitionsVersion = ((_a = this.localStateDefinitionsVersion) !== null && _a !== void 0 ? _a : 0) + 1;
         }
-        return (_b = this.localFallbackVersion) !== null && _b !== void 0 ? _b : 0;
+        return (_b = this.localStateDefinitionsVersion) !== null && _b !== void 0 ? _b : 0;
     }
     resolveEffectiveCompiledDefinitions() {
         this.syncSharedStateScopeBindingFromTree(false);
@@ -10785,8 +10057,7 @@ class Graphic extends Node {
         if (!boundScope) {
             if (!hasStates) {
                 return {
-                    compiledDefinitions: undefined,
-                    stateProxyModeKey: 'none'
+                    compiledDefinitions: undefined
                 };
             }
             const localStatesVersion = this.getLocalStatesVersion();
@@ -10796,72 +10067,29 @@ class Graphic extends Node {
                 this.compiledStateDefinitionsCacheKey = cacheKey;
             }
             return {
-                compiledDefinitions: this.compiledStateDefinitions,
-                stateProxyModeKey: this.stateProxy ? 'legacy-all' : 'none'
+                compiledDefinitions: this.compiledStateDefinitions
             };
         }
         const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions;
-        const sharedStateProxyModeKey = this.stateProxy ? 'shared-missing-only' : 'none';
-        const sharedStateProxyEligibility = this.stateProxy
-            ? (stateName) => !sharedCompiledDefinitions.has(stateName)
-            : undefined;
-        if (!hasStates) {
-            this.localFallbackCompiledDefinitions = undefined;
-            return {
-                compiledDefinitions: sharedCompiledDefinitions,
-                stateProxyModeKey: sharedStateProxyModeKey,
-                stateProxyEligibility: sharedStateProxyEligibility
-            };
-        }
-        const localStates = this.states;
-        const missingLocalStateDefinitions = {};
-        const missingStateNames = [];
-        Object.keys(localStates).forEach(stateName => {
-            if (sharedCompiledDefinitions.has(stateName)) {
-                return;
-            }
-            missingLocalStateDefinitions[stateName] = localStates[stateName];
-            missingStateNames.push(stateName);
-        });
-        if (!missingStateNames.length) {
-            this.localFallbackCompiledDefinitions = undefined;
-            return {
-                compiledDefinitions: sharedCompiledDefinitions,
-                stateProxyModeKey: sharedStateProxyModeKey,
-                stateProxyEligibility: sharedStateProxyEligibility
-            };
-        }
-        const localStatesVersion = this.getLocalStatesVersion();
-        const stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join('|')}` : 'none';
-        const cacheKey = `shared:${boundScope.revision}:fallback:${localStatesVersion}:${stateProxyModeKey}`;
-        if (!this.localFallbackCompiledDefinitions || this.compiledStateDefinitionsCacheKey !== cacheKey) {
-            this.localFallbackCompiledDefinitions = new StateDefinitionCompiler().compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions));
-            this.compiledStateDefinitionsCacheKey = cacheKey;
-        }
         return {
-            compiledDefinitions: this.localFallbackCompiledDefinitions,
-            stateProxyModeKey,
-            stateProxyEligibility: sharedStateProxyEligibility
+            compiledDefinitions: sharedCompiledDefinitions
         };
     }
     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 transition = stateModel.useStates(this.currentStates);
-        const effectiveStates = (_d = transition.effectiveStates) !== null && _d !== void 0 ? _d : 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);
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
+        const transition = this.resolveUseStatesTransition(this.currentStates, stateResolveBaseAttrs);
+        const effectiveStates = (_b = transition.effectiveStates) !== null && _b !== void 0 ? _b : transition.states;
+        const resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
         this.currentStates = transition.states;
         this.effectiveStates = [...effectiveStates];
-        this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs);
+        this.resolvedStatePatch = resolvedStateAttrs;
         this.syncSharedStateActiveRegistrations();
     }
     buildStaticAttributeSnapshot() {
@@ -10927,7 +10155,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 });
@@ -10936,9 +10164,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() {
@@ -10949,27 +10181,29 @@ 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) {
         if (forceUpdateTag) {
             this.addUpdateShapeAndBoundsTag();
             this.addUpdatePositionTag();
             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);
+        if ((category & BROAD_UPDATE_CATEGORY) === BROAD_UPDATE_CATEGORY) {
+            this.addBroadUpdateTag();
+            return;
         }
         if (category & UpdateCategory.SHAPE) {
             this.addUpdateShapeAndBoundsTag();
@@ -10987,45 +10221,237 @@ 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] = nextValue;
+        }
+        if (delta.size) {
+            this.attributeMayContainTransientAttrs = true;
+        }
+        this.valid = this.isValid();
+        this.submitUpdateByDelta(delta, forceUpdateTag);
+        this.onAttributeUpdate(context);
+    }
+    _restoreAttributeFromStaticTruth(context) {
+        this._syncFinalAttributeFromStaticTruth();
+        const delta = this._syncAttribute();
+        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;
             }
-            delta.set(key, { prev: previousValue, next: nextValue });
-            this.attribute[key] = cloneAttributeValue(nextValue);
+            const nextValue = cloneAttributeValue(next.value);
+            target[key] = nextValue;
+            if (collectCategory) {
+                category = this.mergeAttributeDeltaCategory(category, key, previousValue, nextValue);
+            }
         }
-        this.valid = this.isValid();
-        this.submitUpdateByDelta(delta, forceUpdateTag);
-        this.onAttributeUpdate(context);
+        return category;
     }
-    _restoreAttributeFromStaticTruth(context) {
-        this._syncFinalAttributeFromStaticTruth();
-        const delta = this._syncAttribute();
-        this.submitUpdateByDelta(delta);
+    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) {
@@ -11052,6 +10478,7 @@ class Graphic extends Node {
         return point;
     }
     onAnimateBind(animate) {
+        this.detachAttributeFromBaseAttributes();
         this._emitCustomEvent('animate-bind', animate);
     }
     visitTrackedAnimates(cb) {
@@ -11074,8 +10501,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;
         }
@@ -11192,13 +10644,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);
@@ -11309,16 +10761,117 @@ 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.syncFinalAttributesFromUpdateContext(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);
     }
+    syncFinalAttributesFromUpdateContext(context) {
+        var _a;
+        const updateType = context === null || context === void 0 ? void 0 : context.type;
+        if (updateType === AttributeUpdateType.STATE ||
+            (updateType != null &&
+                updateType >= AttributeUpdateType.ANIMATE_BIND &&
+                updateType <= AttributeUpdateType.ANIMATE_END)) {
+            return;
+        }
+        const finalAttrs = (_a = this.context) === null || _a === void 0 ? void 0 : _a.finalAttrs;
+        const setFinalAttributes = this.setFinalAttributes;
+        if (finalAttrs && typeof setFinalAttributes === 'function') {
+            setFinalAttributes.call(this, finalAttrs);
+        }
+    }
+    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;
@@ -11328,7 +10881,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) {
@@ -11337,14 +10890,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);
@@ -11381,16 +10945,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) {
@@ -11415,18 +10978,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) {
@@ -11440,13 +11005,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) {
@@ -11464,22 +11026,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) {
@@ -11493,13 +11058,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) {
@@ -11512,21 +11074,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) {
@@ -11540,12 +11105,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) {
@@ -11581,41 +11144,216 @@ class Graphic extends Node {
         var _a;
         return (_a = this.states) === null || _a === void 0 ? void 0 : _a[stateName];
     }
-    createStateModel() {
-        const { compiledDefinitions, stateProxyEligibility, stateProxyModeKey } = this.resolveEffectiveCompiledDefinitions();
+    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;
+    }
+    ensureStateEngine(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        const { compiledDefinitions } = this.resolveEffectiveCompiledDefinitions();
         this.compiledStateDefinitions = compiledDefinitions;
         if (!compiledDefinitions) {
             this.stateEngine = undefined;
             this.stateEngineCompiledDefinitions = undefined;
-            this.stateEngineStateProxyModeKey = undefined;
         }
         else if (!this.stateEngine ||
             this.stateEngineCompiledDefinitions !== compiledDefinitions ||
-            this.stateEngineStateProxy !== this.stateProxy ||
             this.stateEngineStateSort !== this.stateSort ||
-            this.stateEngineMergeMode !== this.stateMergeMode ||
-            this.stateEngineStateProxyModeKey !== stateProxyModeKey) {
+            this.stateEngineMergeMode !== this.stateMergeMode) {
             this.stateEngine = new StateEngine({
                 compiledDefinitions,
                 stateSort: this.stateSort,
-                stateProxy: this.stateProxy,
-                stateProxyEligibility,
-                states: this.states,
                 mergeMode: this.stateMergeMode
             });
             this.stateEngineCompiledDefinitions = compiledDefinitions;
-            this.stateEngineStateProxy = this.stateProxy;
             this.stateEngineStateSort = this.stateSort;
             this.stateEngineMergeMode = this.stateMergeMode;
-            this.stateEngineStateProxyModeKey = stateProxyModeKey;
-        }
-        return new StateModel({
-            states: this.states,
-            currentStates: this.currentStates,
-            stateSort: this.stateSort,
-            stateProxy: this.stateProxy,
-            stateEngine: this.stateEngine
-        });
+        }
+        this.syncStateResolveContext(stateResolveBaseAttrs);
+        if (this.stateEngine &&
+            this.currentStates &&
+            !this.sameStateNames(this.stateEngine.activeStates, this.currentStates)) {
+            this.stateEngine.applyStates(this.currentStates);
+        }
+        return this.stateEngine;
+    }
+    toGraphicStateTransition(result) {
+        return {
+            changed: result.changed,
+            states: [...result.activeStates],
+            effectiveStates: [...result.effectiveStates]
+        };
+    }
+    sortLocalStates(states) {
+        return this.stateSort ? [...states].sort(this.stateSort) : [...states];
+    }
+    resolveLocalUseStatesTransition(states) {
+        var _a;
+        if (!states.length) {
+            return this.resolveLocalClearStatesTransition();
+        }
+        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
+        const changed = previousStates.length !== states.length || states.some((stateName, index) => previousStates[index] !== stateName);
+        const nextStates = this.sortLocalStates(states);
+        return {
+            changed,
+            states: changed ? nextStates : [...previousStates]
+        };
+    }
+    resolveLocalClearStatesTransition() {
+        return {
+            changed: this.hasState(),
+            states: []
+        };
+    }
+    resolveUseStatesTransition(states, stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        return stateEngine
+            ? this.toGraphicStateTransition(stateEngine.applyStates(states))
+            : this.resolveLocalUseStatesTransition(states);
+    }
+    resolveClearStatesTransition() {
+        const stateEngine = this.ensureStateEngine();
+        return stateEngine
+            ? this.toGraphicStateTransition(stateEngine.clearStates())
+            : this.resolveLocalClearStatesTransition();
+    }
+    resolveAddStateTransition(stateName, keepCurrentStates) {
+        var _a;
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) {
+            return this.toGraphicStateTransition(stateEngine.addState(stateName, keepCurrentStates));
+        }
+        if (this.currentStates &&
+            this.currentStates.includes(stateName) &&
+            (keepCurrentStates || this.currentStates.length === 1)) {
+            return {
+                changed: false,
+                states: [...this.currentStates]
+            };
+        }
+        const nextStates = keepCurrentStates && ((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
+        return this.resolveLocalUseStatesTransition(nextStates);
+    }
+    resolveRemoveStateTransition(stateName) {
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) {
+            return this.toGraphicStateTransition(stateEngine.removeState(stateName));
+        }
+        if (!this.currentStates) {
+            return {
+                changed: false,
+                states: []
+            };
+        }
+        const filter = Array.isArray(stateName) ? (s) => !stateName.includes(s) : (s) => s !== stateName;
+        const nextStates = this.currentStates.filter(filter);
+        if (nextStates.length === this.currentStates.length) {
+            return {
+                changed: false,
+                states: [...this.currentStates]
+            };
+        }
+        return this.resolveLocalUseStatesTransition(nextStates);
+    }
+    resolveToggleStateTransition(stateName) {
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) {
+            return this.toGraphicStateTransition(stateEngine.toggleState(stateName));
+        }
+        if (this.hasState(stateName)) {
+            return this.resolveRemoveStateTransition(stateName);
+        }
+        const nextStates = this.currentStates ? this.currentStates.slice() : [];
+        nextStates.push(stateName);
+        return this.resolveLocalUseStatesTransition(nextStates);
+    }
+    resolveGraphicStateTransition(states, forceResolverRefresh = false) {
+        var _a;
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
+        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        if (forceResolverRefresh) {
+            stateEngine === null || stateEngine === void 0 ? void 0 : stateEngine.invalidateResolverCache();
+        }
+        const transition = stateEngine
+            ? this.toGraphicStateTransition(stateEngine.applyStates(states))
+            : this.resolveLocalUseStatesTransition(states);
+        const resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
+        const effectiveStates = (_a = transition.effectiveStates) !== null && _a !== void 0 ? _a : transition.states;
+        return {
+            transition,
+            effectiveStates: effectiveStates,
+            resolvedStateAttrs
+        };
+    }
+    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 } = this.resolveGraphicStateTransition(states, true);
+        const patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
+        if (patchChanged &&
+            !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, false)) {
+            return;
+        }
+        this.currentStates = transition.states;
+        this.effectiveStates = [...effectiveStates];
+        this.resolvedStatePatch = resolvedStateAttrs;
+        this.sharedStateDirty = false;
+        this.syncSharedStateActiveRegistrations();
+        if (!patchChanged) {
+            return;
+        }
+        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;
@@ -11631,10 +11369,10 @@ class Graphic extends Node {
             }
             : undefined;
         if (isClear) {
-            this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
+            this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, transitionOptions);
             return;
         }
-        const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
+        const plan = this.getStateTransitionOrchestrator().analyzeTransition(attrs, hasAnimation, {
             noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
             animateConfig: resolvedAnimateConfig,
             extraAnimateAttrs: extraAnimateAttrs,
@@ -11642,8 +11380,7 @@ class Graphic extends Node {
         });
         this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
     }
-    updateNormalAttrs(stateAttrs) {
-        this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
+    updateNormalAttrs(_stateAttrs) {
     }
     getStateTransitionDefaultAttribute(key, targetAttrs) {
         return this.getDefaultAttribute(key);
@@ -11657,6 +11394,9 @@ class Graphic extends Node {
             stopAnimationState.call(this, 'state', type);
             return;
         }
+        if (!this.mayHaveTrackedAnimates()) {
+            return;
+        }
         const stateAnimates = [];
         this.visitTrackedAnimates(animate => {
             if (animate.stateNames) {
@@ -11665,21 +11405,11 @@ class Graphic extends Node {
         });
         stateAnimates.forEach(animate => animate.stop(type));
     }
-    getNormalAttribute(key) {
-        var _a, _b;
-        const value = this.attribute[key];
-        if (this.hasAnyTrackedAnimate()) {
-            return (_a = this.finalAttribute) === null || _a === void 0 ? void 0 : _a[key];
-        }
-        return value !== null && value !== void 0 ? value : (_b = this.finalAttribute) === null || _b === void 0 ? void 0 : _b[key];
-    }
     clearStates(hasAnimation) {
         var _a, _b, _c;
-        const previousStates = this.currentStates ? this.currentStates.slice() : [];
-        const previousResolvedStatePatch = this.resolvedStatePatch
-            ? cloneAttributeValue(this.resolvedStatePatch)
-            : undefined;
-        const transition = this.createStateModel().clearStates();
+        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
+        const previousResolvedStatePatch = this.resolvedStatePatch;
+        const transition = this.resolveClearStatesTransition();
         if (!transition.changed && previousStates.length === 0) {
             this.currentStates = [];
             this.effectiveStates = [];
@@ -11688,7 +11418,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;
@@ -11698,81 +11430,104 @@ 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 (hasAnimation) {
             this._syncFinalAttributeFromStaticTruth();
             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) {
-        const transition = this.createStateModel().removeState(stateName);
+        const transition = this.resolveRemoveStateTransition(stateName);
         if (transition.changed) {
             this.useStates(transition.states, hasAnimation);
         }
     }
     toggleState(stateName, hasAnimation) {
-        const transition = this.createStateModel().toggleState(stateName);
+        const transition = this.resolveToggleStateTransition(stateName);
         if (transition.changed) {
             this.useStates(transition.states, hasAnimation);
         }
     }
     addState(stateName, keepCurrentStates, hasAnimation) {
-        const transition = this.createStateModel().addState(stateName, keepCurrentStates);
+        const transition = this.resolveAddStateTransition(stateName, keepCurrentStates);
         if (!transition.changed) {
             return;
         }
         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 previousResolvedStatePatch = this.resolvedStatePatch
-            ? cloneAttributeValue(this.resolvedStatePatch)
-            : undefined;
-        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 } = this.resolveGraphicStateTransition(states);
         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.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 (hasAnimation) {
             this._syncFinalAttributeFromStaticTruth();
             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() {
@@ -11780,19 +11535,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 : [];
@@ -11831,6 +11585,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;
     }
@@ -11935,17 +11703,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;
@@ -11983,10 +11756,36 @@ 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.compiledStateDefinitions = undefined;
+        this.compiledStateDefinitionsCacheKey = undefined;
+        this.stateEngine = undefined;
+        this.stateEngineCompiledDefinitions = 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) {
@@ -12122,6 +11921,9 @@ class Graphic extends Node {
         cb && cb();
     }
     _stopAnimates() {
+        if (!this.mayHaveTrackedAnimates()) {
+            return;
+        }
         const animates = [];
         this.visitTrackedAnimates(animate => {
             animates.push(animate);
@@ -12142,17 +11944,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;
@@ -12165,6 +11974,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),
@@ -12174,6 +11986,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);
     }
@@ -13951,23 +13768,15 @@ class Glyph extends Graphic {
             states = states.sort(this.stateSort);
         }
         const stateAttrs = {};
-        const subAttrs = this.subGraphic.map(() => ({}));
         states.forEach(stateName => {
-            var _a;
             const attrs = this.glyphStateProxy ? this.glyphStateProxy(stateName, states) : this.glyphStates[stateName];
             if (attrs) {
                 Object.assign(stateAttrs, attrs.attributes);
-                if ((_a = attrs.subAttributes) === null || _a === void 0 ? void 0 : _a.length) {
-                    subAttrs.forEach((subAttrs, index) => {
-                        Object.assign(subAttrs, attrs.subAttributes[index]);
-                    });
-                }
             }
         });
         if (!this.beforeStateUpdate(stateAttrs, previousStates, states, hasAnimation, false)) {
             return;
         }
-        this.updateNormalAttrs(stateAttrs);
         this.currentStates = states;
         this.applyStateAttrs(stateAttrs, states, hasAnimation);
     }
@@ -13984,7 +13793,6 @@ class Glyph extends Graphic {
         else {
             this.currentStates = [];
         }
-        this.normalAttrs = null;
     }
     clone() {
         const glyph = new Glyph(Object.assign({}, this.attribute));
@@ -16022,6 +15830,7 @@ const ARC_UPDATE_TAG_KEY = [
     'cornerRadius',
     'padAngle',
     'padRadius',
+    'clipRange',
     'cap',
     ...GRAPHIC_UPDATE_TAG_KEY
 ];
@@ -16074,12 +15883,13 @@ class Arc extends Graphic {
     getParsedAngle() {
         const arcTheme = this.getGraphicTheme();
         let { startAngle = arcTheme.startAngle, endAngle = arcTheme.endAngle } = this.attribute;
-        const { cap = arcTheme.cap } = this.attribute;
+        const { cap = arcTheme.cap, clipRange = arcTheme.clipRange } = this.attribute;
         const sign = endAngle - startAngle >= 0 ? 1 : -1;
-        const deltaAngle = endAngle - startAngle;
+        let deltaAngle = endAngle - startAngle;
+        deltaAngle *= Math.max(0, Math.min(clipRange, 1));
         startAngle = clampAngleByRadian(startAngle);
         endAngle = startAngle + deltaAngle;
-        if (cap && abs(deltaAngle) < pi2 - epsilon) {
+        if (cap && abs(deltaAngle) > epsilon && abs(deltaAngle) < pi2 - epsilon) {
             let startCap = 1;
             let endCap = 1;
             if (cap.length) {
@@ -16434,12 +16244,16 @@ class Group extends Graphic {
         if (this._sharedStateDefinitions === value) {
             return;
         }
+        const previousScope = this.sharedStateScope;
         this._sharedStateDefinitions = value;
         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();
@@ -16576,13 +16390,7 @@ class Group extends Graphic {
     incrementalAppendChild(node) {
         const data = super.appendChild(node);
         if (data) {
-            if (this.stage &&
-                (data.stage !== this.stage || data.layer !== this.layer)) {
-                data.setStage(this.stage, this.layer);
-            }
-            else if (data.onParentSharedStateTreeChanged) {
-                data.onParentSharedStateTreeChanged(this.stage, this.layer);
-            }
+            this.syncChildSharedStateTreeBinding(data);
         }
         this.addUpdateBoundTag();
         this.getGraphicService().onAddIncremental(node, this, this.stage);
@@ -16596,12 +16404,7 @@ class Group extends Graphic {
     }
     _updateChildToStage(child) {
         if (child) {
-            if (this.stage && (child.stage !== this.stage || child.layer !== this.layer)) {
-                child.setStage(this.stage, this.layer);
-            }
-            else if (child.onParentSharedStateTreeChanged) {
-                child.onParentSharedStateTreeChanged(this.stage, this.layer);
-            }
+            this.syncChildSharedStateTreeBinding(child);
         }
         this.addUpdateBoundTag();
         return child;
@@ -16609,13 +16412,8 @@ class Group extends Graphic {
     appendChild(node, addStage = true) {
         const data = super.appendChild(node);
         if (data) {
-            if (addStage &&
-                this.stage &&
-                (data.stage !== this.stage || data.layer !== this.layer)) {
-                data.setStage(this.stage, this.layer);
-            }
-            else if (data.onParentSharedStateTreeChanged) {
-                data.onParentSharedStateTreeChanged(this.stage, this.layer);
+            if (addStage) {
+                this.syncChildSharedStateTreeBinding(data);
             }
         }
         this.addUpdateBoundTag();
@@ -16630,8 +16428,15 @@ class Group extends Graphic {
     insertInto(newNode, idx) {
         return this._updateChildToStage(super.insertInto(newNode, idx));
     }
-    removeChild(child) {
+    removeChild(child, highPerformance = false) {
         const data = super.removeChild(child);
+        if (!data) {
+            return data;
+        }
+        if (highPerformance) {
+            child.detachStageForRelease();
+            return data;
+        }
         this.getGraphicService().onRemove(child);
         child.setStage(null, null);
         this.addUpdateBoundTag();
@@ -16654,29 +16459,37 @@ 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);
-            this.forEachChildren(item => {
-                item.setStage(stage, this.layer);
-            });
+            (_f = graphicService === null || graphicService === void 0 ? void 0 : graphicService.onSetStage) === null || _f === void 0 ? void 0 : _f.call(graphicService, this, stage);
+            this.notifyChildrenSharedStateTreeChanged();
             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.notifyChildrenSharedStateTreeChanged();
+        }
     }
     addUpdatePositionTag() {
         super.addUpdatePositionTag();
@@ -16743,32 +16556,50 @@ class Group extends Graphic {
         }
         super.release();
     }
+    detachStageForRelease() {
+        super.detachStageForRelease();
+        this.sharedStateScope = undefined;
+        this.forEachChildren((item) => {
+            item.detachStageForRelease();
+        });
+    }
     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);
             return;
         }
-        this.sharedStateScope.ownerGroup = this;
         this.sharedStateScope.ownerStage = this.stage;
         setSharedStateScopeParent(this.sharedStateScope, parentScope);
         if (this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions) {
             setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions);
         }
     }
+    hasSharedStateDefinitions() {
+        return !!this._sharedStateDefinitions && Object.keys(this._sharedStateDefinitions).length > 0;
+    }
+    notifyChildrenSharedStateTreeChanged() {
+        this.forEachChildren(item => {
+            this.syncChildSharedStateTreeBinding(item);
+        });
+    }
+    syncChildSharedStateTreeBinding(child) {
+        child.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;
@@ -17210,6 +17041,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) {
@@ -17256,15 +17091,6 @@ class DefaultGraphicService {
             this.hooks.clearAABBBounds.call(graphic, stage, b);
         }
     }
-    updatePathProxyAABBBounds(aabbBounds, graphic) {
-        const path = typeof graphic.pathProxy === 'function' ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
-        if (!path) {
-            return false;
-        }
-        const boundsContext = new BoundsContext(aabbBounds);
-        renderCommandList(path.commandList, boundsContext, 0, 0);
-        return true;
-    }
     updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
         const { textAlign, textBaseline } = attribute;
         if (attribute.forceBoundsHeight != null) {
@@ -17340,7 +17166,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;
     }
 }
 
@@ -18856,10 +18682,9 @@ class RendererRegistry {
         this.entries.set(key, renderer);
         this.cache.delete(key);
     }
-    registerMany(entries) {
-        for (const [key, renderer] of entries) {
-            this.register(key, renderer);
-        }
+    unregister(key) {
+        this.entries.delete(key);
+        this.cache.delete(key);
     }
     get(key) {
         if (this.cache.has(key)) {
@@ -18891,10 +18716,8 @@ class PickerRegistry {
     register(key, picker) {
         this.entries.set(key, picker);
     }
-    registerMany(entries) {
-        for (const [key, picker] of entries) {
-            this.register(key, picker);
-        }
+    unregister(key) {
+        this.entries.delete(key);
     }
     get(key) {
         return this.entries.get(key);
@@ -18938,9 +18761,21 @@ class ContributionRegistry {
         current.push(contribution);
         this.entries.set(key, current);
     }
-    registerMany(entries) {
-        for (const [key, contribution] of entries) {
-            this.register(key, contribution);
+    unregister(key, contribution) {
+        if (contribution === undefined) {
+            this.entries.delete(key);
+            return;
+        }
+        const current = this.entries.get(key);
+        if (!current) {
+            return;
+        }
+        const next = current.filter(entry => entry !== contribution);
+        if (next.length) {
+            this.entries.set(key, next);
+        }
+        else {
+            this.entries.delete(key);
         }
     }
     get(key) {
@@ -18967,13 +18802,12 @@ const EMPTY_AUTO_ENABLE_PROVIDER = {
 };
 class DefaultPluginService {
     constructor(autoEnablePlugins = EMPTY_AUTO_ENABLE_PROVIDER, deps = {}) {
-        var _a, _b, _c;
+        var _a;
         this.autoEnablePlugins = autoEnablePlugins;
         this.onStartupFinishedPlugin = [];
         this.onRegisterPlugin = [];
         this.actived = false;
         this.pluginRegistry = (_a = deps.pluginRegistry) !== null && _a !== void 0 ? _a : new PluginRegistry();
-        this.autoEnablePlugins = (_c = (_b = deps.autoEnablePlugins) !== null && _b !== void 0 ? _b : this.autoEnablePlugins) !== null && _c !== void 0 ? _c : EMPTY_AUTO_ENABLE_PROVIDER;
     }
     active(stage, params) {
         this.stage = stage;
@@ -19243,8 +19077,9 @@ 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;
+            var _a;
             const stage = this.pluginService.stage;
             if (!(stage && stage === graphic.stage && stage.renderCount)) {
                 return;
@@ -19257,7 +19092,7 @@ class DirtyBoundsPlugin {
             if (ownerBounds && !ownerBounds.empty()) {
                 stage.dirty(ownerBounds);
             }
-            (_b = owner.clearUpdatePaintTag) === null || _b === void 0 ? void 0 : _b.call(owner);
+            owner.clearUpdatePaintTag();
             const shadowRoot = owner.shadowRoot;
             if (!shadowRoot) {
                 return;
@@ -19266,34 +19101,30 @@ class DirtyBoundsPlugin {
             if (shadowBounds && !shadowBounds.empty()) {
                 stage.dirty(shadowBounds);
             }
-            (_d = (_c = shadowRoot).clearUpdatePaintTag) === null || _d === void 0 ? void 0 : _d.call(_c);
+            shadowRoot.clearUpdatePaintTag();
         };
     }
     ensurePaintDirtyBoundsCache(graphic) {
-        var _a, _b;
+        var _a;
         const owner = graphic;
-        const hasLocalBounds = owner._AABBBounds && typeof owner._AABBBounds.empty === 'function' && !owner._AABBBounds.empty();
-        if (!hasLocalBounds && typeof owner.doUpdateAABBBounds === 'function') {
+        if (owner._AABBBounds.empty()) {
             owner.doUpdateAABBBounds(((_a = owner.attribute) === null || _a === void 0 ? void 0 : _a.boundsMode) === 'imprecise');
         }
-        const hasGlobalBounds = owner._globalAABBBounds &&
-            typeof owner._globalAABBBounds.empty === 'function' &&
-            !owner._globalAABBBounds.empty();
-        if (!hasGlobalBounds && typeof owner.tryUpdateGlobalAABBBounds === 'function') {
+        if (!owner._globalAABBBounds || owner._globalAABBBounds.empty()) {
             owner.tryUpdateGlobalAABBBounds();
         }
-        return (_b = owner._globalAABBBounds) !== null && _b !== void 0 ? _b : owner.globalAABBBounds;
+        return 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 && !cachedBounds.empty()) {
+            return cachedBounds;
+        }
+    }
+    registerDirtyBoundsHooks(stage) {
+        if (this.dirtyBoundsHooksRegistered) {
             return;
         }
         stage.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handlePaintOnlyUpdate);
@@ -19334,10 +19165,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;
@@ -19347,6 +19197,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;
@@ -19404,387 +19255,6 @@ function getCurrentEnv() {
     return isBrowserEnv() ? 'browser' : 'node';
 }
 
-function isRenderableGraphic(graphic) {
-    return !!graphic.stage && graphic.releaseStatus !== 'released';
-}
-function createTargetStatesKey(targetStates) {
-    return targetStates.length ? targetStates.join('|') : '__clear__';
-}
-function createIntentKey(contextOwnerId, configFingerprint, targetStatesKey) {
-    return `${contextOwnerId}:${configFingerprint}:${targetStatesKey}`;
-}
-function hasMeaningfulDeferredConfig(config) {
-    const normalized = normalizeDeferredStateOwnerConfig(config);
-    return !!normalized && (normalized.localEnabled != null || normalized.deferred != null);
-}
-function getGraphicCompiledDefinitions(graphic) {
-    const graphicAny = graphic;
-    if (typeof graphicAny.resolveEffectiveCompiledDefinitions === 'function') {
-        const result = graphicAny.resolveEffectiveCompiledDefinitions();
-        return {
-            compiledDefinitions: result.compiledDefinitions,
-            stateProxyEligibility: result.stateProxyEligibility
-        };
-    }
-    return {};
-}
-function getCurrentStateNames(graphic) {
-    var _a, _b;
-    return (_b = (_a = graphic.currentStates) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : [];
-}
-class StateBatchScheduler {
-    constructor(stage, perfMonitor) {
-        this.stage = stage;
-        this.perfMonitor = perfMonitor;
-        this.jobsByIntentKey = new Map();
-        this.pendingIntentByGraphic = new Map();
-        this.nextJobId = 1;
-        this.runningJobs = new Map();
-    }
-    schedule(graphics, targetStates) {
-        const batchOperation = graphics.length > 1;
-        graphics.forEach(graphic => {
-            const eligibility = this.resolveEligibility(graphic, targetStates, batchOperation, true);
-            if ('reason' in eligibility) {
-                this.removeGraphicFromPending(graphic);
-                if (eligibility.reason !== 'graphic_unavailable') {
-                    this.commitSynchronously(graphic, targetStates);
-                }
-                return;
-            }
-            this.enqueueDeferredIntent(graphic, targetStates, eligibility.context, eligibility.targetStatesKey);
-        });
-    }
-    release() {
-        var _a;
-        this.jobsByIntentKey.forEach(job => {
-            job.status = 'cancelled';
-        });
-        this.jobsByIntentKey.clear();
-        this.pendingIntentByGraphic.clear();
-        this.runningJobs.clear();
-        (_a = this.perfMonitor) === null || _a === void 0 ? void 0 : _a.updateBatchPending(0);
-    }
-    resolveEligibility(graphic, targetStates, batchOperation, recordObservability) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!isRenderableGraphic(graphic)) {
-            if (recordObservability) {
-                (_a = this.perfMonitor) === null || _a === void 0 ? void 0 : _a.recordDeferredIneligible('graphic_unavailable');
-            }
-            return { eligible: false, reason: 'graphic_unavailable' };
-        }
-        if (!batchOperation) {
-            if (recordObservability) {
-                (_b = this.perfMonitor) === null || _b === void 0 ? void 0 : _b.recordDeferredIneligible('non_batch_operation');
-            }
-            return { eligible: false, reason: 'non_batch_operation' };
-        }
-        const context = this.resolveDeferredContext(graphic);
-        if (!context) {
-            if (recordObservability) {
-                (_c = this.perfMonitor) === null || _c === void 0 ? void 0 : _c.recordDeferredIneligible('graphic_unavailable');
-            }
-            return { eligible: false, reason: 'graphic_unavailable' };
-        }
-        if (!context.config.enabled) {
-            const normalizedOwnerConfig = normalizeDeferredStateOwnerConfig(context.contextOwner.deferredStateConfig);
-            const reason = (normalizedOwnerConfig === null || normalizedOwnerConfig === void 0 ? void 0 : normalizedOwnerConfig.localEnabled) === false ? 'context_disabled' : 'config_disabled';
-            if (recordObservability) {
-                (_d = this.perfMonitor) === null || _d === void 0 ? void 0 : _d.recordDeferredIneligible(reason);
-            }
-            return { eligible: false, reason };
-        }
-        const classification = this.classifyGraphicTargetStates(graphic, targetStates);
-        if (classification.reason) {
-            if (recordObservability) {
-                (_e = this.perfMonitor) === null || _e === void 0 ? void 0 : _e.recordDeferredIneligible(classification.reason);
-            }
-            return { eligible: false, reason: classification.reason };
-        }
-        if (classification.category !== UpdateCategory.PAINT) {
-            if (recordObservability) {
-                (_f = this.perfMonitor) === null || _f === void 0 ? void 0 : _f.recordDeferredIneligible('mixed_update_category');
-            }
-            return { eligible: false, reason: 'mixed_update_category' };
-        }
-        return {
-            eligible: true,
-            context,
-            targetStatesKey: createTargetStatesKey(targetStates)
-        };
-    }
-    resolveDeferredContext(graphic) {
-        var _a;
-        const stage = graphic.stage;
-        if (!stage) {
-            return undefined;
-        }
-        let owner = stage;
-        let config = normalizeDeferredStateConfig(undefined);
-        const ownerConfigs = [stage];
-        const parents = [];
-        let parent = graphic.parent;
-        while (parent && parent !== stage) {
-            parents.push(parent);
-            parent = parent.parent;
-        }
-        parents.reverse().forEach(current => ownerConfigs.push(current));
-        ownerConfigs.forEach(current => {
-            const deferredStateConfig = normalizeDeferredStateOwnerConfig(current.deferredStateConfig);
-            if (!deferredStateConfig) {
-                return;
-            }
-            if (deferredStateConfig.deferred) {
-                config = Object.assign(Object.assign({}, config), deferredStateConfig.deferred);
-            }
-            if (deferredStateConfig.localEnabled != null) {
-                config.enabled = deferredStateConfig.localEnabled;
-            }
-            if (hasMeaningfulDeferredConfig(current.deferredStateConfig)) {
-                owner = current;
-            }
-        });
-        const normalized = normalizeDeferredStateConfig(config);
-        return {
-            contextOwner: owner,
-            contextOwnerId: (_a = owner._uid) !== null && _a !== void 0 ? _a : 0,
-            config: normalized,
-            configFingerprint: fingerprintDeferredStateConfig(normalized)
-        };
-    }
-    classifyGraphicTargetStates(graphic, targetStates) {
-        const { compiledDefinitions, stateProxyEligibility } = getGraphicCompiledDefinitions(graphic);
-        const candidateStates = Array.from(new Set([...getCurrentStateNames(graphic), ...targetStates]));
-        let category = UpdateCategory.NONE;
-        candidateStates.forEach(stateName => {
-            if (stateProxyEligibility === null || stateProxyEligibility === void 0 ? void 0 : stateProxyEligibility(stateName)) {
-                category = UpdateCategory.NONE;
-                return;
-            }
-            const definition = compiledDefinitions === null || compiledDefinitions === void 0 ? void 0 : compiledDefinitions.get(stateName);
-            if (!definition) {
-                return;
-            }
-            if (definition.hasResolver && definition.affectedKeys.size === 0) {
-                category = UpdateCategory.NONE;
-                return;
-            }
-            category |= classifyAffectedKeys(definition.affectedKeys);
-        });
-        if (candidateStates.some(stateName => stateProxyEligibility === null || stateProxyEligibility === void 0 ? void 0 : stateProxyEligibility(stateName)) ||
-            candidateStates.some(stateName => {
-                const definition = compiledDefinitions === null || compiledDefinitions === void 0 ? void 0 : compiledDefinitions.get(stateName);
-                return !!(definition === null || definition === void 0 ? void 0 : definition.hasResolver) && definition.affectedKeys.size === 0;
-            })) {
-            return {
-                category: UpdateCategory.NONE,
-                reason: 'resolver_unstable_keys'
-            };
-        }
-        return {
-            category: category === UpdateCategory.NONE ? UpdateCategory.PAINT : category
-        };
-    }
-    enqueueDeferredIntent(graphic, targetStates, context, targetStatesKey) {
-        var _a, _b, _c, _d, _e, _f;
-        const nextIntentKey = createIntentKey(context.contextOwnerId, context.configFingerprint, targetStatesKey);
-        const prevIntentKey = this.pendingIntentByGraphic.get(graphic);
-        if (prevIntentKey === nextIntentKey) {
-            (_a = this.perfMonitor) === null || _a === void 0 ? void 0 : _a.incrementCounter('deferredJobsCoalesced');
-            return;
-        }
-        if (prevIntentKey) {
-            this.removeGraphicFromIntentJob(graphic, prevIntentKey);
-        }
-        let job = this.jobsByIntentKey.get(nextIntentKey);
-        if (!job) {
-            job = {
-                id: this.nextJobId++,
-                kind: 'apply_states',
-                intentKey: nextIntentKey,
-                status: 'pending',
-                targetStates: [...targetStates],
-                targetStatesKey,
-                pendingGraphics: new Set(),
-                orderedGraphics: [],
-                config: context.config,
-                contextOwner: context.contextOwner,
-                contextOwnerId: context.contextOwnerId,
-                configFingerprint: context.configFingerprint,
-                createdAt: Date.now(),
-                processedCount: 0
-            };
-            this.jobsByIntentKey.set(nextIntentKey, job);
-            (_b = this.perfMonitor) === null || _b === void 0 ? void 0 : _b.incrementCounter('deferredJobsCreated');
-            (_c = this.perfMonitor) === null || _c === void 0 ? void 0 : _c.updateBatchPending(this.jobsByIntentKey.size);
-        }
-        else {
-            (_d = this.perfMonitor) === null || _d === void 0 ? void 0 : _d.incrementCounter('deferredJobsCoalesced');
-        }
-        if (!job.pendingGraphics.has(graphic)) {
-            job.pendingGraphics.add(graphic);
-            job.orderedGraphics.push(graphic);
-            this.pendingIntentByGraphic.set(graphic, nextIntentKey);
-            (_e = this.perfMonitor) === null || _e === void 0 ? void 0 : _e.recordAllocation('batchEntriesCreated');
-            (_f = this.perfMonitor) === null || _f === void 0 ? void 0 : _f.updateMaxGraphicsInJob(job.pendingGraphics.size);
-        }
-        this.ensureJobRunning(job);
-    }
-    removeGraphicFromPending(graphic) {
-        const prevIntentKey = this.pendingIntentByGraphic.get(graphic);
-        if (!prevIntentKey) {
-            return;
-        }
-        this.removeGraphicFromIntentJob(graphic, prevIntentKey);
-    }
-    removeGraphicFromIntentJob(graphic, intentKey) {
-        var _a, _b, _c;
-        const job = this.jobsByIntentKey.get(intentKey);
-        if (!job) {
-            this.pendingIntentByGraphic.delete(graphic);
-            return;
-        }
-        job.pendingGraphics.delete(graphic);
-        if (this.pendingIntentByGraphic.get(graphic) === intentKey) {
-            this.pendingIntentByGraphic.delete(graphic);
-        }
-        if (job.pendingGraphics.size === 0 && job.status !== 'completed') {
-            job.status = 'cancelled';
-            this.jobsByIntentKey.delete(intentKey);
-            (_a = this.perfMonitor) === null || _a === void 0 ? void 0 : _a.incrementCounter('deferredJobsCancelled');
-            (_b = this.perfMonitor) === null || _b === void 0 ? void 0 : _b.recordEvent('deferred-job-cancel', {
-                intentKey,
-                jobId: job.id
-            });
-            (_c = this.perfMonitor) === null || _c === void 0 ? void 0 : _c.updateBatchPending(this.jobsByIntentKey.size);
-        }
-    }
-    ensureJobRunning(job) {
-        if (this.runningJobs.has(job.intentKey)) {
-            return;
-        }
-        const runner = this.runJob(job).then(() => {
-            this.runningJobs.delete(job.intentKey);
-        }, () => {
-            this.runningJobs.delete(job.intentKey);
-        });
-        this.runningJobs.set(job.intentKey, runner);
-    }
-    runJob(job) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (job.status === 'cancelled') {
-                return;
-            }
-            yield this.waitForNextFrame();
-            if (job.status === 'cancelled') {
-                return;
-            }
-            job.status = 'running';
-            (_a = this.perfMonitor) === null || _a === void 0 ? void 0 : _a.recordEvent('deferred-job-start', {
-                intentKey: job.intentKey,
-                jobId: job.id
-            });
-            let index = 0;
-            let frameStart = performance.now();
-            let processedInFrame = 0;
-            let committedInSlice = 0;
-            while (index < job.orderedGraphics.length) {
-                if (job.status === 'cancelled') {
-                    return;
-                }
-                if (processedInFrame > 0 &&
-                    (processedInFrame >= job.config.maxGraphicsPerFrame || performance.now() - frameStart >= job.config.frameBudget)) {
-                    (_b = this.perfMonitor) === null || _b === void 0 ? void 0 : _b.incrementCounter('deferredBudgetYields');
-                    (_c = this.perfMonitor) === null || _c === void 0 ? void 0 : _c.recordCost('batchSlice', performance.now() - frameStart);
-                    (_d = this.perfMonitor) === null || _d === void 0 ? void 0 : _d.recordEvent('deferred-job-yield', {
-                        intentKey: job.intentKey,
-                        jobId: job.id,
-                        processedInFrame
-                    });
-                    if (committedInSlice > 0) {
-                        this.stage.renderNextFrame();
-                    }
-                    yield this.waitForNextFrame();
-                    frameStart = performance.now();
-                    processedInFrame = 0;
-                    committedInSlice = 0;
-                }
-                const graphic = job.orderedGraphics[index++];
-                if (!job.pendingGraphics.has(graphic)) {
-                    continue;
-                }
-                if (!isRenderableGraphic(graphic)) {
-                    job.pendingGraphics.delete(graphic);
-                    if (this.pendingIntentByGraphic.get(graphic) === job.intentKey) {
-                        this.pendingIntentByGraphic.delete(graphic);
-                    }
-                    continue;
-                }
-                if (this.pendingIntentByGraphic.get(graphic) !== job.intentKey) {
-                    job.pendingGraphics.delete(graphic);
-                    continue;
-                }
-                const nextEligibility = this.resolveEligibility(graphic, job.targetStates, true, false);
-                if (!nextEligibility.eligible) {
-                    job.pendingGraphics.delete(graphic);
-                    this.pendingIntentByGraphic.delete(graphic);
-                    this.commitSynchronously(graphic, job.targetStates);
-                    continue;
-                }
-                const nextIntentKey = createIntentKey(nextEligibility.context.contextOwnerId, nextEligibility.context.configFingerprint, nextEligibility.targetStatesKey);
-                if (nextIntentKey !== job.intentKey) {
-                    job.pendingGraphics.delete(graphic);
-                    this.pendingIntentByGraphic.delete(graphic);
-                    this.enqueueDeferredIntent(graphic, job.targetStates, nextEligibility.context, nextEligibility.targetStatesKey);
-                    continue;
-                }
-                this.commitSynchronously(graphic, job.targetStates);
-                job.pendingGraphics.delete(graphic);
-                this.pendingIntentByGraphic.delete(graphic);
-                job.processedCount += 1;
-                processedInFrame += 1;
-                committedInSlice += 1;
-                (_e = this.perfMonitor) === null || _e === void 0 ? void 0 : _e.incrementCounter('deferredGraphicsCommitted');
-            }
-            if (processedInFrame > 0) {
-                (_f = this.perfMonitor) === null || _f === void 0 ? void 0 : _f.recordCost('batchSlice', performance.now() - frameStart);
-                this.stage.renderNextFrame();
-            }
-            if (job.pendingGraphics.size === 0 && this.jobsByIntentKey.get(job.intentKey) === job) {
-                job.status = 'completed';
-                this.jobsByIntentKey.delete(job.intentKey);
-                (_g = this.perfMonitor) === null || _g === void 0 ? void 0 : _g.incrementCounter('deferredJobsCompleted');
-                (_h = this.perfMonitor) === null || _h === void 0 ? void 0 : _h.recordEvent('deferred-job-complete', {
-                    intentKey: job.intentKey,
-                    jobId: job.id,
-                    processedCount: job.processedCount
-                });
-                (_j = this.perfMonitor) === null || _j === void 0 ? void 0 : _j.updateBatchPending(this.jobsByIntentKey.size);
-            }
-        });
-    }
-    waitForNextFrame() {
-        const stageGlobal = this.stage.global;
-        if (stageGlobal === null || stageGlobal === void 0 ? void 0 : stageGlobal.getSpecifiedPerformanceRAF) {
-            return stageGlobal.getSpecifiedPerformanceRAF(this.stage.rafId).wait();
-        }
-        return new Promise(resolve => {
-            stageGlobal === null || stageGlobal === void 0 ? void 0 : stageGlobal.getSpecifiedRequestAnimationFrame(this.stage.rafId)(() => resolve());
-        });
-    }
-    commitSynchronously(graphic, targetStates) {
-        if (!isRenderableGraphic(graphic)) {
-            return;
-        }
-        if (!targetStates.length) {
-            graphic.clearStates(false);
-            return;
-        }
-        graphic.useStates(targetStates, false);
-    }
-}
-
 const DefaultConfig = {
     WIDTH: 500,
     HEIGHT: 500,
@@ -19871,7 +19341,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) => {
@@ -19893,7 +19363,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) => {
@@ -19959,16 +19432,17 @@ 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;
+            const rootScope = definitions && Object.keys(definitions).length
+                ? this.ensureRootSharedStateScope(definitions)
+                : this.rootSharedStateScope;
+            if (!rootScope) {
                 return;
             }
-            setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, (_a = this.theme) === null || _a === void 0 ? void 0 : _a.stateDefinitions);
-            markScopeActiveDescendantsDirty(this.rootSharedStateScope, this);
+            setRootSharedStateScopeThemeDefinitions(rootScope, definitions);
+            markScopeActiveDescendantsDirty(rootScope, this);
         };
         this.renderStyle = params.renderStyle;
         if (params.autoRender) {
@@ -20010,7 +19484,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;
@@ -20390,14 +19864,13 @@ class Stage extends Group {
             });
         }
     }
-    scheduleStateBatch(graphics, targetStates) {
-        this._stateBatchScheduler.schedule(graphics, targetStates);
-    }
-    getStatePerfSnapshot() {
-        return ensureStageStatePerfMonitor(this).getSnapshot();
-    }
-    resetStatePerfSnapshot() {
-        ensureStageStatePerfMonitor(this).reset();
+    ensureRootSharedStateScope(themeStateDefinitions) {
+        if (!this.rootSharedStateScope) {
+            this.rootSharedStateScope = createRootSharedStateScope(this, themeStateDefinitions);
+            return this.rootSharedStateScope;
+        }
+        this.rootSharedStateScope.ownerStage = this;
+        return this.rootSharedStateScope;
     }
     _doRenderInThisFrame() {
         if (this.releaseStatus === 'released') {
@@ -20532,8 +20005,7 @@ class Stage extends Group {
         throw new Error('暂不支持');
     }
     release() {
-        var _a, _b, _d, _e;
-        (_a = this._stateBatchScheduler) === null || _a === void 0 ? void 0 : _a.release();
+        var _a, _b, _d;
         super.release();
         this.hooks.beforeRender.unTap('constructor', this.beforeRender);
         this.hooks.afterRender.unTap('constructor', this.afterRender);
@@ -20551,10 +20023,10 @@ class Stage extends Group {
             this.interactiveLayer.release();
         }
         this.window.release();
-        (_b = this._ticker) === null || _b === void 0 ? void 0 : _b.remTimeline(this === null || this === void 0 ? void 0 : this.timeline);
-        (_d = this._ticker) === null || _d === void 0 ? void 0 : _d.removeListener('tick', this.afterTickCb);
+        (_a = this._ticker) === null || _a === void 0 ? void 0 : _a.remTimeline(this === null || this === void 0 ? void 0 : this.timeline);
+        (_b = this._ticker) === null || _b === void 0 ? void 0 : _b.removeListener('tick', this.afterTickCb);
         if (!this.params.ticker) {
-            (_e = this._ticker) === null || _e === void 0 ? void 0 : _e.release();
+            (_d = this._ticker) === null || _d === void 0 ? void 0 : _d.release();
         }
         this.renderService.renderTreeRoots = [];
     }
@@ -21748,6 +21220,7 @@ class CanvasLayerHandlerContribution {
             }
             if (!nativeCanvas) {
                 nativeCanvas = this.global.createCanvas({
+                    id: params.canvasId,
                     width: window.width,
                     height: window.height
                 });
@@ -23981,23 +23454,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);
@@ -26845,18 +26322,12 @@ function createBrowserApp(options = {}) {
 }
 
 class NodeEntry extends BrowserEntry {
-    constructor(options = {}) {
-        super(options);
-    }
 }
 function createNodeApp(options = {}) {
     return new NodeEntry(options);
 }
 
 class MiniappEntry extends BrowserEntry {
-    constructor(options = {}) {
-        super(options);
-    }
 }
 function createMiniappApp(options = {}) {
     return new MiniappEntry(options);
@@ -26961,6 +26432,10 @@ class DefaultIncrementalCanvasLineRender extends DefaultCanvasLineRender {
 const runtimeInstallerContext = createLegacyBindingContext();
 let runtimeInstallerPreloaded = false;
 let runtimeGlobal;
+const RUNTIME_RENDERER_NAMESPACE = 'vrender:runtime-renderer';
+const RUNTIME_PICKER_NAMESPACE = 'vrender:runtime-picker';
+const runtimeEntryKeys = new WeakMap();
+const runtimeDrawContributions = new WeakMap();
 function ensureRuntimeInstallerPreloaded() {
     if (runtimeInstallerPreloaded) {
         return;
@@ -26988,6 +26463,26 @@ function registerRuntimeEntries(register, entries, prefix) {
         register(`${prefix}:${String(name)}:${index}`, entry);
     });
 }
+function getTrackedEntryKeys(registry, namespace) {
+    let namespaces = runtimeEntryKeys.get(registry);
+    if (!namespaces) {
+        namespaces = new Map();
+        runtimeEntryKeys.set(registry, namespaces);
+    }
+    let keys = namespaces.get(namespace);
+    if (!keys) {
+        keys = new Set();
+        namespaces.set(namespace, keys);
+    }
+    return keys;
+}
+function clearTrackedEntryKeys(registry, namespace, unregister) {
+    const keys = getTrackedEntryKeys(registry, namespace);
+    if (unregister) {
+        keys.forEach(key => unregister(key));
+    }
+    keys.clear();
+}
 function createAppRegistryContributionProvider(app, key) {
     return {
         getContributions: () => app.context.registry.contribution.get(key)
@@ -27019,31 +26514,51 @@ function configureRuntimeApplicationForApp(app) {
     application.incrementalDrawContributionFactory = () => new DefaultIncrementalDrawContribution([], new DefaultIncrementalCanvasLineRender(), new DefaultIncrementalCanvasAreaRender(createContributionProvider(AreaRenderContribution, bindingContext)), createAppRegistryContributionProvider(app, DrawItemInterceptor));
 }
 function installRuntimeGraphicRenderersToApp(app) {
+    var _a;
     const bindingContext = getRuntimeInstallerBindingContext();
     refreshRuntimeInstallerContributions();
     const renderers = bindingContext.getAll(GraphicRender);
-    app.registry.renderer.clear();
+    const registeredKeys = getTrackedEntryKeys(app.registry.renderer, RUNTIME_RENDERER_NAMESPACE);
+    clearTrackedEntryKeys(app.registry.renderer, RUNTIME_RENDERER_NAMESPACE, (_a = app.registry.renderer.unregister) === null || _a === void 0 ? void 0 : _a.bind(app.registry.renderer));
     registerRuntimeEntries((key, renderer) => {
         var _a;
         (_a = renderer === null || renderer === void 0 ? void 0 : renderer.reInit) === null || _a === void 0 ? void 0 : _a.call(renderer);
         app.registry.renderer.register(key, renderer);
-    }, renderers, 'runtime-renderer');
+        registeredKeys.add(key);
+    }, renderers, RUNTIME_RENDERER_NAMESPACE);
 }
 function installRuntimeDrawContributionsToApp(app) {
+    var _a;
     const bindingContext = getRuntimeInstallerBindingContext();
     refreshRuntimeInstallerContributions();
     const contributions = bindingContext.getAll(DrawItemInterceptor);
-    app.context.registry.contribution.clear(DrawItemInterceptor);
+    const tracked = (_a = runtimeDrawContributions.get(app.context.registry.contribution)) !== null && _a !== void 0 ? _a : new Set();
+    tracked.forEach(contribution => {
+        var _a, _b;
+        (_b = (_a = app.context.registry.contribution).unregister) === null || _b === void 0 ? void 0 : _b.call(_a, DrawItemInterceptor, contribution);
+    });
+    tracked.clear();
+    runtimeDrawContributions.set(app.context.registry.contribution, tracked);
+    const registered = new Set(app.context.registry.contribution.get(DrawItemInterceptor));
     contributions.forEach(contribution => {
-        app.context.registry.contribution.register(DrawItemInterceptor, contribution);
+        if (!registered.has(contribution)) {
+            app.context.registry.contribution.register(DrawItemInterceptor, contribution);
+            registered.add(contribution);
+        }
+        tracked.add(contribution);
     });
 }
 function installRuntimePickersToApp(app, serviceIdentifier) {
+    var _a;
     const bindingContext = getRuntimeInstallerBindingContext();
     refreshRuntimeInstallerContributions();
     const pickers = bindingContext.getAll(serviceIdentifier);
-    app.registry.picker.clear();
-    registerRuntimeEntries((key, picker) => app.registry.picker.register(key, picker), pickers, 'runtime-picker');
+    const registeredKeys = getTrackedEntryKeys(app.registry.picker, RUNTIME_PICKER_NAMESPACE);
+    clearTrackedEntryKeys(app.registry.picker, RUNTIME_PICKER_NAMESPACE, (_a = app.registry.picker.unregister) === null || _a === void 0 ? void 0 : _a.bind(app.registry.picker));
+    registerRuntimeEntries((key, picker) => {
+        app.registry.picker.register(key, picker);
+        registeredKeys.add(key);
+    }, pickers, RUNTIME_PICKER_NAMESPACE);
 }
 
 function simplifyRadialDist(points, sqTolerance) {
@@ -29400,26 +28915,37 @@ function resolveContainerBinding(container, serviceIdentifier) {
     return instance;
 }
 
-let loadArcModule = false;
+function isBindingContextLoaded(loadedContexts, context) {
+    const key = (typeof context === 'object' && context !== null) || typeof context === 'function'
+        ? context
+        : loadedContexts;
+    if (loadedContexts.has(key)) {
+        return true;
+    }
+    loadedContexts.add(key);
+    return false;
+}
+
+const loadedArcModuleContexts = new WeakSet();
 function bindArcRenderModule({ bind }) {
-    if (loadArcModule) {
+    if (isBindingContextLoaded(loadedArcModuleContexts, bind)) {
         return;
     }
-    loadArcModule = true;
-    bind(DefaultCanvasArcRender).toSelf().inSingletonScope();
-    bind(ArcRender).to(DefaultCanvasArcRender).inSingletonScope();
+    bind(DefaultCanvasArcRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasArcRender(createContributionProvider(ArcRenderContribution, container)))
+        .inSingletonScope();
+    bind(ArcRender).toService(DefaultCanvasArcRender);
     bind(GraphicRender).toService(ArcRender);
     bind(ArcRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, ArcRenderContribution);
 }
 const arcModule = bindArcRenderModule;
 
-let loadRectModule = false;
+const loadedRectModuleContexts = new WeakSet();
 function bindRectRenderModule({ bind }) {
-    if (loadRectModule) {
+    if (isBindingContextLoaded(loadedRectModuleContexts, bind)) {
         return;
     }
-    loadRectModule = true;
     bind(DefaultCanvasRectRender)
         .toDynamicValue(({ container }) => new DefaultCanvasRectRender(createContributionProvider(RectRenderContribution, container)))
         .inSingletonScope();
@@ -29434,96 +28960,101 @@ function bindRectRenderModule({ bind }) {
 }
 const rectModule = bindRectRenderModule;
 
-let loadLineModule = false;
+const loadedLineModuleContexts = new WeakSet();
 function bindLineRenderModule({ bind }) {
-    if (loadLineModule) {
+    if (isBindingContextLoaded(loadedLineModuleContexts, bind)) {
         return;
     }
-    loadLineModule = true;
-    bind(DefaultCanvasLineRender).toSelf().inSingletonScope();
-    bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope();
-    bind(LineRender).to(DefaultCanvasLineRender).inSingletonScope();
+    bind(DefaultCanvasLineRender)
+        .toDynamicValue(() => new DefaultCanvasLineRender())
+        .inSingletonScope();
+    bind(LineRender).toService(DefaultCanvasLineRender);
     bind(GraphicRender).toService(LineRender);
 }
 const lineModule = bindLineRenderModule;
 
-let loadAreaModule = false;
+const loadedAreaModuleContexts = new WeakSet();
 function bindAreaRenderModule({ bind }) {
-    if (loadAreaModule) {
+    if (isBindingContextLoaded(loadedAreaModuleContexts, bind)) {
         return;
     }
-    loadAreaModule = true;
-    bind(DefaultCanvasAreaRender).toSelf().inSingletonScope();
-    bind(AreaRender).to(DefaultCanvasAreaRender).inSingletonScope();
+    bind(DefaultCanvasAreaRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasAreaRender(createContributionProvider(AreaRenderContribution, container)))
+        .inSingletonScope();
+    bind(AreaRender).toService(DefaultCanvasAreaRender);
     bind(GraphicRender).toService(AreaRender);
     bind(AreaRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, AreaRenderContribution);
-    bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope();
 }
 const areaModule = bindAreaRenderModule;
 
-let loadSymbolModule = false;
+const loadedSymbolModuleContexts = new WeakSet();
 function bindSymbolRenderModule({ bind }) {
-    if (loadSymbolModule) {
+    if (isBindingContextLoaded(loadedSymbolModuleContexts, bind)) {
         return;
     }
-    loadSymbolModule = true;
-    bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope();
-    bind(SymbolRender).to(DefaultCanvasSymbolRender).inSingletonScope();
+    bind(DefaultCanvasSymbolRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasSymbolRender(createContributionProvider(SymbolRenderContribution, container)))
+        .inSingletonScope();
+    bind(SymbolRender).toService(DefaultCanvasSymbolRender);
     bind(GraphicRender).toService(SymbolRender);
     bind(SymbolRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, SymbolRenderContribution);
 }
 const symbolModule = bindSymbolRenderModule;
 
-let loadCircleModule = false;
+const loadedCircleModuleContexts = new WeakSet();
 function bindCircleRenderModule({ bind }) {
-    if (loadCircleModule) {
+    if (isBindingContextLoaded(loadedCircleModuleContexts, bind)) {
         return;
     }
-    loadCircleModule = true;
-    bind(DefaultCanvasCircleRender).toSelf().inSingletonScope();
-    bind(CircleRender).to(DefaultCanvasCircleRender).inSingletonScope();
+    bind(DefaultCanvasCircleRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasCircleRender(createContributionProvider(CircleRenderContribution, container)))
+        .inSingletonScope();
+    bind(CircleRender).toService(DefaultCanvasCircleRender);
     bind(GraphicRender).toService(CircleRender);
     bind(CircleRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, CircleRenderContribution);
 }
 const circleModule = bindCircleRenderModule;
 
-let loadTextModule = false;
+const loadedTextModuleContexts = new WeakSet();
 function bindTextRenderModule({ bind }) {
-    if (loadTextModule) {
+    if (isBindingContextLoaded(loadedTextModuleContexts, bind)) {
         return;
     }
-    loadTextModule = true;
-    bind(TextRender).to(DefaultCanvasTextRender).inSingletonScope();
+    bind(TextRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasTextRender(createContributionProvider(TextRenderContribution, container)))
+        .inSingletonScope();
     bind(GraphicRender).toService(TextRender);
     bind(TextRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, TextRenderContribution);
 }
 const textModule = bindTextRenderModule;
 
-let loadPathModule = false;
+const loadedPathModuleContexts = new WeakSet();
 function bindPathRenderModule({ bind }) {
-    if (loadPathModule) {
+    if (isBindingContextLoaded(loadedPathModuleContexts, bind)) {
         return;
     }
-    loadPathModule = true;
-    bind(DefaultCanvasPathRender).toSelf().inSingletonScope();
-    bind(PathRender).to(DefaultCanvasPathRender).inSingletonScope();
+    bind(DefaultCanvasPathRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasPathRender(createContributionProvider(PathRenderContribution, container)))
+        .inSingletonScope();
+    bind(PathRender).toService(DefaultCanvasPathRender);
     bind(GraphicRender).toService(PathRender);
     bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, PathRenderContribution);
 }
 const pathModule = bindPathRenderModule;
 
-let loadPolygonModule = false;
+const loadedPolygonModuleContexts = new WeakSet();
 function bindPolygonRenderModule({ bind }) {
-    if (loadPolygonModule) {
+    if (isBindingContextLoaded(loadedPolygonModuleContexts, bind)) {
         return;
     }
-    loadPolygonModule = true;
-    bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope();
+    bind(PolygonRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasPolygonRender(createContributionProvider(PolygonRenderContribution, container)))
+        .inSingletonScope();
     bind(GraphicRender).toService(PolygonRender);
     bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, PolygonRenderContribution);
@@ -29531,12 +29062,12 @@ function bindPolygonRenderModule({ bind }) {
 const polygonModule = bindPolygonRenderModule;
 
 class DefaultCanvasStarRender extends BaseRender {
-    constructor(starRenderContribitions) {
+    constructor(graphicRenderContributions) {
         super();
-        this.starRenderContribitions = starRenderContribitions;
+        this.graphicRenderContributions = graphicRenderContributions;
         this.numberType = STAR_NUMBER_TYPE;
         this.builtinContributions = [defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution];
-        this.init(starRenderContribitions);
+        this.init(graphicRenderContributions);
     }
     drawShape(star, context, x, y, drawContext, params, fillCb, strokeCb) {
         const starAttribute = getTheme(star, params === null || params === void 0 ? void 0 : params.theme).star;
@@ -29599,17 +29130,17 @@ class DefaultCanvasStarRender extends BaseRender {
     }
 }
 
-let loadStarModule = false;
+const loadedStarModuleContexts = new WeakSet();
 function bindStarRenderModule({ bind }) {
-    if (loadStarModule) {
+    if (isBindingContextLoaded(loadedStarModuleContexts, bind)) {
         return;
     }
-    loadStarModule = true;
     bind(DefaultCanvasStarRender)
         .toDynamicValue(({ container }) => new DefaultCanvasStarRender(createContributionProvider(StarRenderContribution, container)))
         .inSingletonScope();
     bind(StarRender).toService(DefaultCanvasStarRender);
     bind(GraphicRender).toService(StarRender);
+    bindContributionProvider(bind, StarRenderContribution);
 }
 const starModule = bindStarRenderModule;
 
@@ -29650,13 +29181,15 @@ class DefaultCanvasGlyphRender {
     }
 }
 
-let loadGlyphModule = false;
+const loadedGlyphModuleContexts = new WeakSet();
 function bindGlyphRenderModule({ bind }) {
-    if (loadGlyphModule) {
+    if (isBindingContextLoaded(loadedGlyphModuleContexts, bind)) {
         return;
     }
-    loadGlyphModule = true;
-    bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope();
+    bind(DefaultCanvasGlyphRender)
+        .toDynamicValue(() => new DefaultCanvasGlyphRender())
+        .inSingletonScope();
+    bind(GlyphRender).toService(DefaultCanvasGlyphRender);
     bind(GraphicRender).toService(GlyphRender);
 }
 const glyphModule = bindGlyphRenderModule;
@@ -29730,24 +29263,27 @@ class DefaultCanvasRichTextRender extends BaseRender {
     }
 }
 
-let loadRichtextModule = false;
+const loadedRichtextModuleContexts = new WeakSet();
 function bindRichtextRenderModule({ bind }) {
-    if (loadRichtextModule) {
+    if (isBindingContextLoaded(loadedRichtextModuleContexts, bind)) {
         return;
     }
-    loadRichtextModule = true;
-    bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope();
+    bind(DefaultCanvasRichTextRender)
+        .toDynamicValue(() => new DefaultCanvasRichTextRender())
+        .inSingletonScope();
+    bind(RichTextRender).toService(DefaultCanvasRichTextRender);
     bind(GraphicRender).toService(RichTextRender);
 }
 const richtextModule = bindRichtextRenderModule;
 
-let loadImageModule = false;
+const loadedImageModuleContexts = new WeakSet();
 function bindImageRenderModule({ bind }) {
-    if (loadImageModule) {
+    if (isBindingContextLoaded(loadedImageModuleContexts, bind)) {
         return;
     }
-    loadImageModule = true;
-    bind(ImageRender).to(DefaultCanvasImageRender).inSingletonScope();
+    bind(ImageRender)
+        .toDynamicValue(({ container }) => new DefaultCanvasImageRender(createContributionProvider(ImageRenderContribution, container)))
+        .inSingletonScope();
     bind(GraphicRender).toService(ImageRender);
     bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution);
     bindContributionProvider(bind, ImageRenderContribution);
@@ -29890,13 +29426,15 @@ class DefaultCanvasRect3dRender extends Base3dRender {
     }
 }
 
-let loadRect3dModule = false;
+const loadedRect3dModuleContexts = new WeakSet();
 function bindRect3dRenderModule({ bind }) {
-    if (loadRect3dModule) {
+    if (isBindingContextLoaded(loadedRect3dModuleContexts, bind)) {
         return;
     }
-    loadRect3dModule = true;
-    bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope();
+    bind(DefaultCanvasRect3dRender)
+        .toDynamicValue(() => new DefaultCanvasRect3dRender())
+        .inSingletonScope();
+    bind(Rect3DRender).toService(DefaultCanvasRect3dRender);
     bind(GraphicRender).toService(Rect3DRender);
 }
 const rect3dModule = bindRect3dRenderModule;
@@ -30090,13 +29628,15 @@ class DefaultCanvasArc3DRender extends BaseRender {
     }
 }
 
-let loadArc3dModule = false;
+const loadedArc3dModuleContexts = new WeakSet();
 function bindArc3dRenderModule({ bind }) {
-    if (loadArc3dModule) {
+    if (isBindingContextLoaded(loadedArc3dModuleContexts, bind)) {
         return;
     }
-    loadArc3dModule = true;
-    bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope();
+    bind(DefaultCanvasArc3DRender)
+        .toDynamicValue(() => new DefaultCanvasArc3DRender())
+        .inSingletonScope();
+    bind(Arc3dRender).toService(DefaultCanvasArc3DRender);
     bind(GraphicRender).toService(Arc3dRender);
 }
 const arc3dModule = bindArc3dRenderModule;
@@ -30137,13 +29677,15 @@ class DefaultCanvasPyramid3dRender extends Base3dRender {
     }
 }
 
-let loadPyramid3dModule = false;
+const loadedPyramid3dModuleContexts = new WeakSet();
 function bindPyramid3dRenderModule({ bind }) {
-    if (loadPyramid3dModule) {
+    if (isBindingContextLoaded(loadedPyramid3dModuleContexts, bind)) {
         return;
     }
-    loadPyramid3dModule = true;
-    bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope();
+    bind(DefaultCanvasPyramid3dRender)
+        .toDynamicValue(() => new DefaultCanvasPyramid3dRender())
+        .inSingletonScope();
+    bind(Pyramid3dRender).toService(DefaultCanvasPyramid3dRender);
     bind(GraphicRender).toService(Pyramid3dRender);
 }
 const pyramid3dModule = bindPyramid3dRenderModule;
@@ -31035,7 +30577,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;
             }
@@ -31070,4 +30615,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 };