@visactor/vrender-components 1.1.0-alpha.24 → 1.1.0-alpha.25

package/dist/index.es.js

@@ -1,380 +1,154 @@
-import { EventEmitter, Logger, isBoolean, isObject, isFunction, tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, isArray, cos, sin, pi, isString, pointAt, isNumber, sqrt, isPointInLine, Color, OBBBounds, isEqual, isNil, normalTransform, isValidUrl, isBase64, getContextFont, rotatePoint, transformBoundsWithMatrix, clampAngleByRadian, asin, isNumberClose, TextMeasure, Bounds, getRectIntersect, isRectIntersect, arrayEqual, acos, isPlainObject as isPlainObject$3, merge, isValid, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
+import { isFunction, EventEmitter, Logger, isBoolean, isObject, tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, isArray, cos, sin, pi, isString, pointAt, isNumber, sqrt, isPointInLine, Color, OBBBounds, isEqual, isNil, normalTransform, isValidUrl, isBase64, isPlainObject as isPlainObject$2, merge, getContextFont, rotatePoint, transformBoundsWithMatrix, clampAngleByRadian, asin, isNumberClose, TextMeasure, Bounds, getRectIntersect, isRectIntersect, arrayEqual, acos, isValid, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
-class Hook {
-  constructor(args, name) {
-    this._args = args, this.name = name, this.taps = [];
-  }
-  tap(options, fn) {
-    this._tap("sync", options, fn);
-  }
-  unTap(options, fn) {
-    const name = "string" == typeof options ? options.trim() : options.name;
-    name && (this.taps = this.taps.filter(tap => !(tap.name === name && (!fn || tap.fn === fn))));
-  }
-  _parseOptions(type, options, fn) {
-    let _options;
-    if ("string" == typeof options) _options = {
-      name: options.trim()
-    };else if ("object" != typeof options || null === options) throw new Error("Invalid tap options");
-    if ("string" != typeof _options.name || "" === _options.name) throw new Error("Missing name for tap");
-    return _options = Object.assign({
-      type: type,
-      fn: fn
-    }, _options), _options;
-  }
-  _tap(type, options, fn) {
-    this._insert(this._parseOptions(type, options, fn));
-  }
-  _insert(item) {
-    let before;
-    "string" == typeof item.before ? before = new Set([item.before]) : Array.isArray(item.before) && (before = new Set(item.before));
-    let stage = 0;
-    "number" == typeof item.stage && (stage = item.stage);
-    let i = this.taps.length;
-    for (; i > 0;) {
-      i--;
-      const x = this.taps[i];
-      this.taps[i + 1] = x;
-      const xStage = x.stage || 0;
-      if (before) {
-        if (before.has(x.name)) {
-          before.delete(x.name);
-          continue;
-        }
-        if (before.size > 0) continue;
-      }
-      if (!(xStage > stage)) {
-        i++;
-        break;
-      }
-    }
-    this.taps[i] = item;
-  }
-}
-
-class SyncHook extends Hook {
-  call(...args) {
-    this.taps.map(t => t.fn).forEach(cb => cb(...args));
-  }
-}
-
-class Generator {
-  static GenAutoIncrementId() {
-    return Generator.auto_increment_id++;
-  }
-}
-Generator.auto_increment_id = 0;
-
-class Application {}
-const application = new Application();
-
-let idx = 0;
-class PerformanceRAF {
-  constructor() {
-    this.nextAnimationFrameCbs = new Map(), this._rafHandle = null, this.runAnimationFrame = time => {
-      this._rafHandle = null;
-      const cbs = this.nextAnimationFrameCbs;
-      this.nextAnimationFrameCbs = new Map(), cbs.forEach(cb => cb(time));
-    }, this.tryRunAnimationFrameNextFrame = () => {
-      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.size && (this._rafHandle = application.global.getRequestAnimationFrame()(this.runAnimationFrame));
-    };
-  }
-  addAnimationFrameCb(callback) {
-    return this.nextAnimationFrameCbs.set(++idx, callback), this.tryRunAnimationFrameNextFrame(), idx;
-  }
-  removeAnimationFrameCb(index) {
-    return !!this.nextAnimationFrameCbs.has(index) && (this.nextAnimationFrameCbs.delete(index), !0);
-  }
-  wait() {
-    return new Promise(resolve => {
-      this.addAnimationFrameCb(() => resolve());
-    });
-  }
-}
-
-class EventListenerManager {
-  constructor() {
-    this._listenerMap = new Map(), this._eventListenerTransformer = event => event;
-  }
-  setEventListenerTransformer(transformer) {
-    this._eventListenerTransformer = transformer || (event => event);
+class FederatedEvent {
+  get layerX() {
+    return this.layer.x;
   }
-  addEventListener(type, listener, options) {
-    if (!listener) return;
-    const capture = this._resolveCapture(options),
-      once = this._resolveOnce(options),
-      listenerTypeMap = this._getOrCreateListenerTypeMap(type),
-      wrappedMap = this._getOrCreateWrappedMap(listenerTypeMap, listener);
-    if (wrappedMap.has(capture)) return;
-    const wrappedListener = event => {
-      const transformedEvent = this._eventListenerTransformer(event);
-      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent), once && this._deleteListenerRecord(type, listener, capture);
-    };
-    wrappedMap.set(capture, {
-      wrappedListener: wrappedListener,
-      options: options
-    }), this._nativeAddEventListener(type, wrappedListener, options);
+  get layerY() {
+    return this.layer.y;
   }
-  removeEventListener(type, listener, options) {
-    var _a, _b;
-    if (!listener) return;
-    const capture = this._resolveCapture(options),
-      wrappedRecord = null === (_b = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener)) || void 0 === _b ? void 0 : _b.get(capture);
-    wrappedRecord && (this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture), this._deleteListenerRecord(type, listener, capture));
+  get pageX() {
+    return this.page.x;
   }
-  dispatchEvent(event) {
-    return this._nativeDispatchEvent(event);
+  get pageY() {
+    return this.page.y;
   }
-  clearAllEventListeners() {
-    this._listenerMap.forEach((listenerMap, type) => {
-      listenerMap.forEach(wrappedMap => {
-        wrappedMap.forEach((wrappedRecord, capture) => {
-          this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture);
-        });
-      });
-    }), this._listenerMap.clear();
+  get x() {
+    return this.canvas.x;
   }
-  _resolveCapture(options) {
-    return "boolean" == typeof options ? options : !!(null == options ? void 0 : options.capture);
+  get y() {
+    return this.canvas.y;
   }
-  _resolveOnce(options) {
-    return "object" == typeof options && !!(null == options ? void 0 : options.once);
+  get canvasX() {
+    return this.canvas.x;
   }
-  _getOrCreateListenerTypeMap(type) {
-    let listenerTypeMap = this._listenerMap.get(type);
-    return listenerTypeMap || (listenerTypeMap = new Map(), this._listenerMap.set(type, listenerTypeMap)), listenerTypeMap;
+  get canvasY() {
+    return this.canvas.y;
   }
-  _getOrCreateWrappedMap(listenerTypeMap, listener) {
-    let wrappedMap = listenerTypeMap.get(listener);
-    return wrappedMap || (wrappedMap = new Map(), listenerTypeMap.set(listener, wrappedMap)), wrappedMap;
+  get viewX() {
+    return this.viewport.x;
   }
-  _deleteListenerRecord(type, listener, capture) {
-    const listenerTypeMap = this._listenerMap.get(type);
-    if (!listenerTypeMap) return;
-    const wrappedMap = listenerTypeMap.get(listener);
-    wrappedMap && (wrappedMap.delete(capture), 0 === wrappedMap.size && listenerTypeMap.delete(listener), 0 === listenerTypeMap.size && this._listenerMap.delete(type));
+  get viewY() {
+    return this.viewport.y;
   }
-  _nativeAddEventListener(type, listener, options) {
-    throw new Error("_nativeAddEventListener must be implemented by derived classes");
+  constructor(manager) {
+    this.bubbles = !0, this.cancelBubble = !0, this.cancelable = !1, this.composed = !1, this.defaultPrevented = !1, this.eventPhase = FederatedEvent.prototype.NONE, this.propagationStopped = !1, this.propagationImmediatelyStopped = !1, this.layer = {
+      x: 0,
+      y: 0
+    }, this.page = {
+      x: 0,
+      y: 0
+    }, this.canvas = {
+      x: 0,
+      y: 0
+    }, this.viewport = {
+      x: 0,
+      y: 0
+    }, this.NONE = 0, this.CAPTURING_PHASE = 1, this.AT_TARGET = 2, this.BUBBLING_PHASE = 3, this.manager = manager;
   }
-  _nativeRemoveEventListener(type, listener, options) {
-    throw new Error("_nativeRemoveEventListener must be implemented by derived classes");
+  composedPath() {
+    return !this.manager || this.path && this.path[this.path.length - 1] === this.target || (this.path = this.target ? this.manager.propagationPath(this.target) : []), this.composedDetailPath(), this.path;
   }
-  _nativeDispatchEvent(event) {
-    throw new Error("_nativeDispatchEvent must be implemented by derived classes");
+  composedDetailPath() {
+    return this.pickParams && this.pickParams.graphic ? (this.detailPath = this.path.slice(), this._composedDetailPath(this.pickParams)) : this.detailPath = this.path.slice(), this.detailPath;
   }
-}
-
-var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function rejected(value) {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
+  _composedDetailPath(params) {
+    if (params && params.graphic) {
+      const g = params.graphic;
+      if (g.stage) {
+        const path = g.stage.eventSystem.manager.propagationPath(g);
+        this.detailPath.push(path), this._composedDetailPath(params.params);
       }
     }
-    function step(result) {
-      var value;
-      result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
-        resolve(value);
-      })).then(fulfilled, rejected);
-    }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-class DefaultGlobal extends EventListenerManager {
-  get env() {
-    return this._env;
-  }
-  get isImageAnonymous() {
-    return this._isImageAnonymous;
-  }
-  set isImageAnonymous(isImageAnonymous) {
-    this._isImageAnonymous = isImageAnonymous;
-  }
-  get devicePixelRatio() {
-    return this._env || this.setEnv("browser"), this.envContribution.getDevicePixelRatio();
-  }
-  get supportEvent() {
-    return this._env || this.setEnv("browser"), this.envContribution.supportEvent;
-  }
-  set supportEvent(support) {
-    this._env || this.setEnv("browser"), this.envContribution.supportEvent = support;
-  }
-  get supportsTouchEvents() {
-    return this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents;
-  }
-  set supportsTouchEvents(support) {
-    this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents = support;
-  }
-  get supportsPointerEvents() {
-    return this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents;
-  }
-  set supportsPointerEvents(support) {
-    this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents = support;
-  }
-  get supportsMouseEvents() {
-    return this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents;
-  }
-  set supportsMouseEvents(support) {
-    this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents = support;
   }
-  get applyStyles() {
-    return this._env || this.setEnv("browser"), this.envContribution.applyStyles;
-  }
-  set applyStyles(support) {
-    this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
-  }
-  constructor(contributions) {
-    super(), this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.eventListenerTransformer = event => event, this.id = Generator.GenAutoIncrementId(), this.hooks = {
-      onSetEnv: new SyncHook(["lastEnv", "env", "global"])
-    }, this.measureTextMethod = "native", this.optimizeVisible = !1;
-  }
-  _nativeAddEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
-  }
-  _nativeRemoveEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
-  }
-  _nativeDispatchEvent(event) {
-    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
-  }
-  bindContribution(params) {
-    const promiseArr = [];
-    if (this.contributions.getContributions().forEach(contribution => {
-      const data = contribution.configure(this, params);
-      data && data.then && promiseArr.push(data);
-    }), promiseArr.length) return Promise.all(promiseArr);
-  }
-  getDynamicCanvasCount() {
-    return this._env || this.setEnv("browser"), this.envContribution.getDynamicCanvasCount();
-  }
-  getStaticCanvasCount() {
-    return this._env || this.setEnv("browser"), this.envContribution.getStaticCanvasCount();
-  }
-  setEnv(env, params) {
-    if (params && !0 === params.force || this._env !== env) return this.deactiveCurrentEnv(), this.activeEnv(env, params);
-  }
-  deactiveCurrentEnv() {
-    this.envContribution && this.envContribution.release();
-  }
-  activeEnv(env, params) {
-    const lastEnv = this._env;
-    this._env = env;
-    const data = this.bindContribution(params);
-    if (data && data.then) return data.then(() => {
-      this.envParams = params, this.hooks.onSetEnv.call(lastEnv, env, this);
-    });
-    this.envParams = params, this.hooks.onSetEnv.call(lastEnv, env, this);
-  }
-  setActiveEnvContribution(contribution) {
-    this.envContribution = contribution;
-  }
-  createCanvas(params) {
-    return this._env || this.setEnv("browser"), this.envContribution.createCanvas(params);
-  }
-  createOffscreenCanvas(params) {
-    return this._env || this.setEnv("browser"), this.envContribution.createOffscreenCanvas(params);
-  }
-  releaseCanvas(canvas) {
-    return this._env || this.setEnv("browser"), this.envContribution.releaseCanvas(canvas);
-  }
-  getRequestAnimationFrame() {
-    return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
-  }
-  getSpecifiedRequestAnimationFrame(id) {
-    this._env || this.setEnv("browser"), this._performanceRAFList[id] || (this._performanceRAFList[id] = new PerformanceRAF());
-    const performanceRAF = this._performanceRAFList[id];
-    return callback => performanceRAF.addAnimationFrameCb(callback);
-  }
-  getSpecifiedPerformanceRAF(id) {
-    return this._env || this.setEnv("browser"), this._performanceRAFList[id] || (this._performanceRAFList[id] = new PerformanceRAF()), this._performanceRAFList[id];
-  }
-  getSpecifiedCancelAnimationFrame(id) {
-    if (this._env || this.setEnv("browser"), !this._performanceRAFList[id]) return () => !1;
-    const performanceRAF = this._performanceRAFList[id];
-    return handle => performanceRAF.removeAnimationFrameCb(handle);
-  }
-  getCancelAnimationFrame() {
-    return this._env || this.setEnv("browser"), this.envContribution.getCancelAnimationFrame();
-  }
-  getElementById(str) {
-    return this._env || this.setEnv("browser"), this.envContribution.getElementById ? this.envContribution.getElementById(str) : null;
-  }
-  getRootElement() {
-    return this._env || this.setEnv("browser"), this.envContribution.getRootElement ? this.envContribution.getRootElement() : null;
-  }
-  getDocument() {
-    return this._env || this.setEnv("browser"), this.envContribution.getDocument ? this.envContribution.getDocument() : null;
-  }
-  mapToCanvasPoint(event, domElement) {
-    return this._env || this.setEnv("browser"), this.envContribution.mapToCanvasPoint ? this.envContribution.mapToCanvasPoint(event, domElement) : null;
-  }
-  loadImage(url) {
-    return this._env || this.setEnv("browser"), this.envContribution.loadImage(url);
-  }
-  loadSvg(str) {
-    return this._env || this.setEnv("browser"), this.envContribution.loadSvg(str);
-  }
-  loadJson(url) {
-    return this._env || this.setEnv("browser"), this.envContribution.loadJson(url);
-  }
-  loadArrayBuffer(url) {
-    return this._env || this.setEnv("browser"), this.envContribution.loadArrayBuffer(url);
-  }
-  loadBlob(url) {
-    return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
-  }
-  loadFont(name, source, descriptors) {
-    return __awaiter$4(this, void 0, void 0, function* () {
-      return this._env || this.setEnv("browser"), this.envContribution.loadFont(name, source, descriptors);
-    });
-  }
-  isChrome() {
-    return null != this._isChrome || (this._env || this.setEnv("browser"), this._isChrome = "browser" === this._env && navigator.userAgent.indexOf("Chrome") > -1), this._isChrome;
-  }
-  isSafari() {
-    return null != this._isSafari || (this._env || this.setEnv("browser"), this._isSafari = "browser" === this._env && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)), this._isSafari;
-  }
-  getNativeAABBBounds(dom) {
-    return this._env || this.setEnv("browser"), this.envContribution.getNativeAABBBounds(dom);
-  }
-  removeDom(dom) {
-    return this._env || this.setEnv("browser"), this.envContribution.removeDom(dom);
-  }
-  createDom(params) {
-    return this._env || this.setEnv("browser"), this.envContribution.createDom(params);
-  }
-  updateDom(dom, params) {
-    return this._env || this.setEnv("browser"), this.envContribution.updateDom(dom, params);
+  preventDefault() {
+    try {
+      this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.preventDefault();
+    } catch (err) {
+      this.nativeEvent.preventDefault && isFunction(this.nativeEvent.preventDefault) && this.nativeEvent.preventDefault();
+    }
+    this.defaultPrevented = !0;
   }
-  getElementTop(dom, baseWindow = !1) {
-    return this._env || this.setEnv("browser"), this.envContribution.getElementTop(dom, baseWindow);
+  stopImmediatePropagation() {
+    this.propagationImmediatelyStopped = !0;
   }
-  getElementLeft(dom, baseWindow = !1) {
-    return this._env || this.setEnv("browser"), this.envContribution.getElementLeft(dom, baseWindow);
+  stopPropagation() {
+    try {
+      this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.stopPropagation();
+    } catch (err) {
+      this.nativeEvent.stopPropagation && isFunction(this.nativeEvent.stopPropagation) && this.nativeEvent.stopPropagation();
+    }
+    this.propagationStopped = !0;
   }
-  getElementTopLeft(dom, baseWindow = !1) {
-    return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
+  initEvent() {}
+  initUIEvent() {}
+  clone() {
+    throw new Error("Method not implemented.");
   }
-  isMacOS() {
-    return this._env || this.setEnv("browser"), this.envContribution.isMacOS();
+}
+
+class CustomEvent extends FederatedEvent {
+  constructor(eventName, object) {
+    super(), this.type = eventName, this.detail = object;
   }
-  copyToClipBoard(text) {
-    return this._env || this.setEnv("browser"), this.envContribution.copyToClipBoard(text);
+}
+
+var UpdateTag;
+!function (UpdateTag) {
+  UpdateTag[UpdateTag.NONE = 0] = "NONE", UpdateTag[UpdateTag.UPDATE_BOUNDS = 1] = "UPDATE_BOUNDS", UpdateTag[UpdateTag.UPDATE_SHAPE = 2] = "UPDATE_SHAPE", UpdateTag[UpdateTag.CLEAR_SHAPE = 253] = "CLEAR_SHAPE", UpdateTag[UpdateTag.UPDATE_SHAPE_AND_BOUNDS = 3] = "UPDATE_SHAPE_AND_BOUNDS", UpdateTag[UpdateTag.INIT = 179] = "INIT", UpdateTag[UpdateTag.CLEAR_BOUNDS = 254] = "CLEAR_BOUNDS", UpdateTag[UpdateTag.UPDATE_GLOBAL_MATRIX = 32] = "UPDATE_GLOBAL_MATRIX", UpdateTag[UpdateTag.CLEAR_GLOBAL_MATRIX = 223] = "CLEAR_GLOBAL_MATRIX", UpdateTag[UpdateTag.UPDATE_LOCAL_MATRIX = 16] = "UPDATE_LOCAL_MATRIX", UpdateTag[UpdateTag.CLEAR_LOCAL_MATRIX = 239] = "CLEAR_LOCAL_MATRIX", UpdateTag[UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX = 48] = "UPDATE_GLOBAL_LOCAL_MATRIX", UpdateTag[UpdateTag.UPDATE_PAINT = 64] = "UPDATE_PAINT", UpdateTag[UpdateTag.CLEAR_PAINT = 191] = "CLEAR_PAINT", UpdateTag[UpdateTag.UPDATE_LAYOUT = 128] = "UPDATE_LAYOUT", UpdateTag[UpdateTag.CLEAR_LAYOUT = 127] = "CLEAR_LAYOUT";
+}(UpdateTag || (UpdateTag = {}));
+var IContainPointMode;
+!function (IContainPointMode) {
+  IContainPointMode[IContainPointMode.GLOBAL = 1] = "GLOBAL", IContainPointMode[IContainPointMode.LOCAL = 16] = "LOCAL", IContainPointMode[IContainPointMode.GLOBAL_ACCURATE = 3] = "GLOBAL_ACCURATE", IContainPointMode[IContainPointMode.LOCAL_ACCURATE = 48] = "LOCAL_ACCURATE";
+}(IContainPointMode || (IContainPointMode = {}));
+var AttributeUpdateType;
+!function (AttributeUpdateType) {
+  AttributeUpdateType[AttributeUpdateType.INIT = 0] = "INIT", AttributeUpdateType[AttributeUpdateType.DEFAULT = 1] = "DEFAULT", AttributeUpdateType[AttributeUpdateType.STATE = 2] = "STATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_BIND = 10] = "ANIMATE_BIND", AttributeUpdateType[AttributeUpdateType.ANIMATE_PLAY = 11] = "ANIMATE_PLAY", AttributeUpdateType[AttributeUpdateType.ANIMATE_START = 12] = "ANIMATE_START", AttributeUpdateType[AttributeUpdateType.ANIMATE_UPDATE = 13] = "ANIMATE_UPDATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_END = 14] = "ANIMATE_END", AttributeUpdateType[AttributeUpdateType.TRANSLATE = 20] = "TRANSLATE", AttributeUpdateType[AttributeUpdateType.TRANSLATE_TO = 21] = "TRANSLATE_TO", AttributeUpdateType[AttributeUpdateType.SCALE = 22] = "SCALE", AttributeUpdateType[AttributeUpdateType.SCALE_TO = 23] = "SCALE_TO", AttributeUpdateType[AttributeUpdateType.ROTATE = 24] = "ROTATE", AttributeUpdateType[AttributeUpdateType.ROTATE_TO = 25] = "ROTATE_TO";
+}(AttributeUpdateType || (AttributeUpdateType = {}));
+var Direction;
+!function (Direction) {
+  Direction[Direction.ROW = 1] = "ROW", Direction[Direction.COLUMN = 2] = "COLUMN";
+}(Direction || (Direction = {}));
+var CurveTypeEnum;
+!function (CurveTypeEnum) {
+  CurveTypeEnum[CurveTypeEnum.CubicBezierCurve = 0] = "CubicBezierCurve", CurveTypeEnum[CurveTypeEnum.QuadraticBezierCurve = 1] = "QuadraticBezierCurve", CurveTypeEnum[CurveTypeEnum.ArcCurve = 2] = "ArcCurve", CurveTypeEnum[CurveTypeEnum.LineCurve = 3] = "LineCurve", CurveTypeEnum[CurveTypeEnum.EllipseCurve = 4] = "EllipseCurve", CurveTypeEnum[CurveTypeEnum.MoveCurve = 5] = "MoveCurve";
+}(CurveTypeEnum || (CurveTypeEnum = {}));
+var BaseRenderContributionTime;
+!function (BaseRenderContributionTime) {
+  BaseRenderContributionTime[BaseRenderContributionTime.beforeFillStroke = 0] = "beforeFillStroke", BaseRenderContributionTime[BaseRenderContributionTime.afterFillStroke = 1] = "afterFillStroke";
+}(BaseRenderContributionTime || (BaseRenderContributionTime = {}));
+
+var AnimateMode;
+!function (AnimateMode) {
+  AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
+}(AnimateMode || (AnimateMode = {}));
+
+var AnimateStepType;
+!function (AnimateStepType) {
+  AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
+}(AnimateStepType || (AnimateStepType = {}));
+var AnimateStatus;
+!function (AnimateStatus) {
+  AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
+}(AnimateStatus || (AnimateStatus = {}));
+
+var STATUS$1;
+!function (STATUS) {
+  STATUS[STATUS.INITIAL = 0] = "INITIAL", STATUS[STATUS.RUNNING = 1] = "RUNNING", STATUS[STATUS.PAUSE = 2] = "PAUSE";
+}(STATUS$1 || (STATUS$1 = {}));
+
+class Application {}
+const application = new Application();
+
+class Generator {
+  static GenAutoIncrementId() {
+    return Generator.auto_increment_id++;
   }
 }
+Generator.auto_increment_id = 0;
 
-var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -424,6 +198,7 @@ class Node extends EventEmitter {
   constructor() {
     super(), this._uid = Generator.GenAutoIncrementId(), this._firstChild = null, this._lastChild = null, this.parent = null, this._count = 1;
   }
+  onParentSharedStateTreeChanged(_stage, _layer) {}
   forEachChildren(cb, reverse = !1) {
     if (reverse) {
       let child = this._lastChild,
@@ -442,7 +217,7 @@ class Node extends EventEmitter {
     }
   }
   forEachChildrenAsync(cb, reverse = !1) {
-    return __awaiter$3(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       if (reverse) {
         let child = this._lastChild,
           i = 0;
@@ -707,117 +482,24 @@ class Node extends EventEmitter {
   }
 }
 
-class FederatedEvent {
-  get layerX() {
-    return this.layer.x;
-  }
-  get layerY() {
-    return this.layer.y;
-  }
-  get pageX() {
-    return this.page.x;
-  }
-  get pageY() {
-    return this.page.y;
-  }
-  get x() {
-    return this.canvas.x;
+const EventTarget = {
+  dispatchEvent(e) {
+    var _a;
+    if (!(e instanceof FederatedEvent)) throw new Error("DisplayObject cannot propagate events outside of the Federated Events API");
+    return e.defaultPrevented = !1, e.path = [], e.detailPath && (e.detailPath = []), e.target = this, null === (_a = null == e ? void 0 : e.manager) || void 0 === _a || _a.dispatchEvent(e), !e.defaultPrevented;
+  },
+  emit(eventName, object) {
+    return this.dispatchEvent(new CustomEvent(eventName, object));
   }
-  get y() {
-    return this.canvas.y;
+};
+
+const circleThreshold = tau - 1e-8;
+class BoundsContext {
+  constructor(bounds) {
+    this.init(bounds);
   }
-  get canvasX() {
-    return this.canvas.x;
-  }
-  get canvasY() {
-    return this.canvas.y;
-  }
-  get viewX() {
-    return this.viewport.x;
-  }
-  get viewY() {
-    return this.viewport.y;
-  }
-  constructor(manager) {
-    this.bubbles = !0, this.cancelBubble = !0, this.cancelable = !1, this.composed = !1, this.defaultPrevented = !1, this.eventPhase = FederatedEvent.prototype.NONE, this.propagationStopped = !1, this.propagationImmediatelyStopped = !1, this.layer = {
-      x: 0,
-      y: 0
-    }, this.page = {
-      x: 0,
-      y: 0
-    }, this.canvas = {
-      x: 0,
-      y: 0
-    }, this.viewport = {
-      x: 0,
-      y: 0
-    }, this.NONE = 0, this.CAPTURING_PHASE = 1, this.AT_TARGET = 2, this.BUBBLING_PHASE = 3, this.manager = manager;
-  }
-  composedPath() {
-    return !this.manager || this.path && this.path[this.path.length - 1] === this.target || (this.path = this.target ? this.manager.propagationPath(this.target) : []), this.composedDetailPath(), this.path;
-  }
-  composedDetailPath() {
-    return this.pickParams && this.pickParams.graphic ? (this.detailPath = this.path.slice(), this._composedDetailPath(this.pickParams)) : this.detailPath = this.path.slice(), this.detailPath;
-  }
-  _composedDetailPath(params) {
-    if (params && params.graphic) {
-      const g = params.graphic;
-      if (g.stage) {
-        const path = g.stage.eventSystem.manager.propagationPath(g);
-        this.detailPath.push(path), this._composedDetailPath(params.params);
-      }
-    }
-  }
-  preventDefault() {
-    try {
-      this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.preventDefault();
-    } catch (err) {
-      this.nativeEvent.preventDefault && isFunction(this.nativeEvent.preventDefault) && this.nativeEvent.preventDefault();
-    }
-    this.defaultPrevented = !0;
-  }
-  stopImmediatePropagation() {
-    this.propagationImmediatelyStopped = !0;
-  }
-  stopPropagation() {
-    try {
-      this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.stopPropagation();
-    } catch (err) {
-      this.nativeEvent.stopPropagation && isFunction(this.nativeEvent.stopPropagation) && this.nativeEvent.stopPropagation();
-    }
-    this.propagationStopped = !0;
-  }
-  initEvent() {}
-  initUIEvent() {}
-  clone() {
-    throw new Error("Method not implemented.");
-  }
-}
-
-class CustomEvent extends FederatedEvent {
-  constructor(eventName, object) {
-    super(), this.type = eventName, this.detail = object;
-  }
-}
-
-const EventTarget = {
-  dispatchEvent(e) {
-    var _a;
-    if (!(e instanceof FederatedEvent)) throw new Error("DisplayObject cannot propagate events outside of the Federated Events API");
-    return e.defaultPrevented = !1, e.path = [], e.detailPath && (e.detailPath = []), e.target = this, null === (_a = null == e ? void 0 : e.manager) || void 0 === _a || _a.dispatchEvent(e), !e.defaultPrevented;
-  },
-  emit(eventName, object) {
-    return this.dispatchEvent(new CustomEvent(eventName, object));
-  }
-};
-
-const circleThreshold = tau - 1e-8;
-class BoundsContext {
-  constructor(bounds) {
-    this.init(bounds);
-  }
-  init(bounds) {
-    this.bounds = bounds;
+  init(bounds) {
+    this.bounds = bounds;
   }
   arc(cx, cy, r, sa, ea, ccw) {
     if (Math.abs(ea - sa) > circleThreshold) return this.bounds.add(cx - r, cy - r), void this.bounds.add(cx + r, cy + r);
@@ -941,31 +623,6 @@ function parseSvgPath(str) {
   return result;
 }
 
-var UpdateTag;
-!function (UpdateTag) {
-  UpdateTag[UpdateTag.NONE = 0] = "NONE", UpdateTag[UpdateTag.UPDATE_BOUNDS = 1] = "UPDATE_BOUNDS", UpdateTag[UpdateTag.UPDATE_SHAPE = 2] = "UPDATE_SHAPE", UpdateTag[UpdateTag.CLEAR_SHAPE = 253] = "CLEAR_SHAPE", UpdateTag[UpdateTag.UPDATE_SHAPE_AND_BOUNDS = 3] = "UPDATE_SHAPE_AND_BOUNDS", UpdateTag[UpdateTag.INIT = 179] = "INIT", UpdateTag[UpdateTag.CLEAR_BOUNDS = 254] = "CLEAR_BOUNDS", UpdateTag[UpdateTag.UPDATE_GLOBAL_MATRIX = 32] = "UPDATE_GLOBAL_MATRIX", UpdateTag[UpdateTag.CLEAR_GLOBAL_MATRIX = 223] = "CLEAR_GLOBAL_MATRIX", UpdateTag[UpdateTag.UPDATE_LOCAL_MATRIX = 16] = "UPDATE_LOCAL_MATRIX", UpdateTag[UpdateTag.CLEAR_LOCAL_MATRIX = 239] = "CLEAR_LOCAL_MATRIX", UpdateTag[UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX = 48] = "UPDATE_GLOBAL_LOCAL_MATRIX", UpdateTag[UpdateTag.UPDATE_PAINT = 64] = "UPDATE_PAINT", UpdateTag[UpdateTag.CLEAR_PAINT = 191] = "CLEAR_PAINT", UpdateTag[UpdateTag.UPDATE_LAYOUT = 128] = "UPDATE_LAYOUT", UpdateTag[UpdateTag.CLEAR_LAYOUT = 127] = "CLEAR_LAYOUT";
-}(UpdateTag || (UpdateTag = {}));
-var IContainPointMode;
-!function (IContainPointMode) {
-  IContainPointMode[IContainPointMode.GLOBAL = 1] = "GLOBAL", IContainPointMode[IContainPointMode.LOCAL = 16] = "LOCAL", IContainPointMode[IContainPointMode.GLOBAL_ACCURATE = 3] = "GLOBAL_ACCURATE", IContainPointMode[IContainPointMode.LOCAL_ACCURATE = 48] = "LOCAL_ACCURATE";
-}(IContainPointMode || (IContainPointMode = {}));
-var AttributeUpdateType;
-!function (AttributeUpdateType) {
-  AttributeUpdateType[AttributeUpdateType.INIT = 0] = "INIT", AttributeUpdateType[AttributeUpdateType.DEFAULT = 1] = "DEFAULT", AttributeUpdateType[AttributeUpdateType.STATE = 2] = "STATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_BIND = 10] = "ANIMATE_BIND", AttributeUpdateType[AttributeUpdateType.ANIMATE_PLAY = 11] = "ANIMATE_PLAY", AttributeUpdateType[AttributeUpdateType.ANIMATE_START = 12] = "ANIMATE_START", AttributeUpdateType[AttributeUpdateType.ANIMATE_UPDATE = 13] = "ANIMATE_UPDATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_END = 14] = "ANIMATE_END", AttributeUpdateType[AttributeUpdateType.TRANSLATE = 20] = "TRANSLATE", AttributeUpdateType[AttributeUpdateType.TRANSLATE_TO = 21] = "TRANSLATE_TO", AttributeUpdateType[AttributeUpdateType.SCALE = 22] = "SCALE", AttributeUpdateType[AttributeUpdateType.SCALE_TO = 23] = "SCALE_TO", AttributeUpdateType[AttributeUpdateType.ROTATE = 24] = "ROTATE", AttributeUpdateType[AttributeUpdateType.ROTATE_TO = 25] = "ROTATE_TO";
-}(AttributeUpdateType || (AttributeUpdateType = {}));
-var Direction;
-!function (Direction) {
-  Direction[Direction.ROW = 1] = "ROW", Direction[Direction.COLUMN = 2] = "COLUMN";
-}(Direction || (Direction = {}));
-var CurveTypeEnum;
-!function (CurveTypeEnum) {
-  CurveTypeEnum[CurveTypeEnum.CubicBezierCurve = 0] = "CubicBezierCurve", CurveTypeEnum[CurveTypeEnum.QuadraticBezierCurve = 1] = "QuadraticBezierCurve", CurveTypeEnum[CurveTypeEnum.ArcCurve = 2] = "ArcCurve", CurveTypeEnum[CurveTypeEnum.LineCurve = 3] = "LineCurve", CurveTypeEnum[CurveTypeEnum.EllipseCurve = 4] = "EllipseCurve", CurveTypeEnum[CurveTypeEnum.MoveCurve = 5] = "MoveCurve";
-}(CurveTypeEnum || (CurveTypeEnum = {}));
-var BaseRenderContributionTime;
-!function (BaseRenderContributionTime) {
-  BaseRenderContributionTime[BaseRenderContributionTime.beforeFillStroke = 0] = "beforeFillStroke", BaseRenderContributionTime[BaseRenderContributionTime.afterFillStroke = 1] = "afterFillStroke";
-}(BaseRenderContributionTime || (BaseRenderContributionTime = {}));
-
 function segments(x, y, rx, ry, large, sweep, rotateX, ox, oy) {
   const th = degreeToRadian(rotateX),
     sin_th = Math.sin(th),
@@ -2186,25 +1843,6 @@ var MeasureModeEnum;
   MeasureModeEnum[MeasureModeEnum.estimate = 0] = "estimate", MeasureModeEnum[MeasureModeEnum.actualBounding = 1] = "actualBounding", MeasureModeEnum[MeasureModeEnum.fontBounding = 2] = "fontBounding";
 }(MeasureModeEnum || (MeasureModeEnum = {}));
 
-var AnimateMode;
-!function (AnimateMode) {
-  AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
-}(AnimateMode || (AnimateMode = {}));
-
-var STATUS$1;
-!function (STATUS) {
-  STATUS[STATUS.INITIAL = 0] = "INITIAL", STATUS[STATUS.RUNNING = 1] = "RUNNING", STATUS[STATUS.PAUSE = 2] = "PAUSE";
-}(STATUS$1 || (STATUS$1 = {}));
-
-var AnimateStepType;
-!function (AnimateStepType) {
-  AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
-}(AnimateStepType || (AnimateStepType = {}));
-var AnimateStatus;
-!function (AnimateStatus) {
-  AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
-}(AnimateStatus || (AnimateStatus = {}));
-
 const DefaultLayout = {
   alignSelf: "auto"
 };
@@ -4678,8 +4316,8 @@ function getConicGradientAt(x, y, angle, color) {
   return percent = (percent - startStop.offset) / (endStop.offset - startStop.offset), interpolateColor(startStop.color, endStop.color, percent, !1);
 }
 
-const FULL_DEFINITION_KEYS$1 = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]);
-function isPlainObject$2(value) {
+const FULL_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]);
+function isPlainObject$1(value) {
   return null != value && "object" == typeof value && !Array.isArray(value);
 }
 function normalizePatch(value) {
@@ -4725,12 +4363,11 @@ class StateDefinitionCompiler {
       priority: 0,
       patch: void 0
     };
-    if ((isPlainObject$2(value) ? Object.keys(value) : []).some(key => FULL_DEFINITION_KEYS$1.has(key))) {
+    if ((isPlainObject$1(value) ? Object.keys(value) : []).some(key => FULL_DEFINITION_KEYS.has(key))) {
       const definition = value;
       return {
         name: null !== (_a = definition.name) && void 0 !== _a ? _a : name,
         priority: null !== (_b = definition.priority) && void 0 !== _b ? _b : 0,
-        rank: definition.rank,
         patch: normalizePatch(definition.patch),
         resolver: definition.resolver,
         declaredAffectedKeys: definition.declaredAffectedKeys,
@@ -4750,15 +4387,178 @@ class StateDefinitionCompiler {
       rawRelationMap.set(name, new Set(definition[relation]));
     }), compiled.forEach((definition, origin) => {
       const closure = new Set(),
-        walk = (stateName, stack) => {
+        walk = (stateName, visiting) => {
           const nextStates = rawRelationMap.get(stateName);
           nextStates && nextStates.size && nextStates.forEach(nextState => {
-            nextState !== origin ? stack.includes(nextState) ? console.warn(`[StateDefinitionCompiler] circular ${relation} relation detected: ${stack.join(" -> ")} -> ${nextState}`) : closure.has(nextState) || (closure.add(nextState), walk(nextState, stack.concat(nextState))) : console.warn(`[StateDefinitionCompiler] circular ${relation} relation detected: ${stack.join(" -> ")} -> ${origin}`);
+            nextState === origin || visiting.has(nextState) || closure.has(nextState) || (closure.add(nextState), visiting.add(nextState), walk(nextState, visiting), visiting.delete(nextState));
           });
         };
-      walk(origin, [origin]), definition[relation] = closure;
+      walk(origin, new Set([origin])), definition[relation] = closure;
+    });
+  }
+}
+
+function isPlainObject(value) {
+  return null != value && "object" == typeof value && !Array.isArray(value);
+}
+function cloneValue(value) {
+  if (!isPlainObject(value)) return value;
+  const clone = {};
+  return Object.keys(value).forEach(key => {
+    clone[key] = cloneValue(value[key]);
+  }), clone;
+}
+function deepMerge(base, value) {
+  var _a;
+  const result = null !== (_a = cloneValue(base)) && void 0 !== _a ? _a : {};
+  return Object.keys(value).forEach(key => {
+    const nextValue = value[key],
+      previousValue = result[key];
+    isPlainObject(previousValue) && isPlainObject(nextValue) ? result[key] = deepMerge(previousValue, nextValue) : result[key] = cloneValue(nextValue);
+  }), result;
+}
+class StateEngine {
+  constructor(options) {
+    var _a;
+    this._activeStates = [], this._effectiveStates = [], this._suppressed = [], this._resolvedPatch = {}, this.resolverPatchCache = new Map(), this.resolverCacheKey = "", this.resolverCacheValid = !1, this.baseAttributes = {}, this.compiledDefinitions = options.compiledDefinitions, this.stateSort = options.stateSort, this.mergeMode = null !== (_a = options.mergeMode) && void 0 !== _a ? _a : "shallow";
+  }
+  get activeStates() {
+    return this._activeStates;
+  }
+  get effectiveStates() {
+    return this._effectiveStates;
+  }
+  get resolvedPatch() {
+    return this._resolvedPatch;
+  }
+  get suppressed() {
+    return this._suppressed;
+  }
+  setResolveContext(graphic, baseAttributes) {
+    this.graphic = graphic, this.baseAttributes = baseAttributes;
+  }
+  applyStates(stateNames) {
+    const uniqueStates = Array.from(new Set(stateNames)),
+      sortedStates = this.sortStates(uniqueStates),
+      adjudicated = this.adjudicate(sortedStates),
+      activeStates = adjudicated.active,
+      effectiveStates = activeStates.filter(stateName => !adjudicated.suppressedSet.has(stateName)),
+      suppressed = activeStates.filter(stateName => adjudicated.suppressedSet.has(stateName)),
+      changed = !this.sameArray(this._activeStates, activeStates) || !this.sameArray(this._effectiveStates, effectiveStates) || !this.sameArray(this._suppressed, suppressed);
+    return this._activeStates = activeStates, this._effectiveStates = effectiveStates, this._suppressed = suppressed, !changed && this.resolverCacheValid || this.recomputePatch(effectiveStates), {
+      changed: changed,
+      activeStates: [...this._activeStates],
+      effectiveStates: [...this._effectiveStates],
+      suppressed: [...this._suppressed]
+    };
+  }
+  addState(stateName, keepCurrentStates) {
+    if (this._activeStates.includes(stateName) && (keepCurrentStates || 1 === this._activeStates.length)) return {
+      changed: !1,
+      activeStates: [...this._activeStates],
+      effectiveStates: [...this._effectiveStates],
+      suppressed: [...this._suppressed]
+    };
+    const nextStates = keepCurrentStates && this._activeStates.length ? this._activeStates.concat([stateName]) : [stateName];
+    return this.applyStates(nextStates);
+  }
+  removeState(stateNames) {
+    if (!this._activeStates.length) return {
+      changed: !1,
+      activeStates: [],
+      effectiveStates: [],
+      suppressed: []
+    };
+    const filteredNames = Array.isArray(stateNames) ? this._activeStates.filter(stateName => !stateNames.includes(stateName)) : this._activeStates.filter(stateName => stateName !== stateNames);
+    return filteredNames.length === this._activeStates.length ? {
+      changed: !1,
+      activeStates: [...this._activeStates],
+      effectiveStates: [...this._effectiveStates],
+      suppressed: [...this._suppressed]
+    } : this.applyStates(filteredNames);
+  }
+  toggleState(stateName) {
+    return this.hasState(stateName) ? this.removeState(stateName) : this.applyStates(this._activeStates.concat([stateName]));
+  }
+  clearStates() {
+    const changed = this._activeStates.length > 0 || this._effectiveStates.length > 0 || this._suppressed.length > 0;
+    return this._activeStates = [], this._effectiveStates = [], this._suppressed = [], this._resolvedPatch = {}, this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, {
+      changed: changed,
+      activeStates: [],
+      effectiveStates: [],
+      suppressed: []
+    };
+  }
+  invalidateResolverCache() {
+    this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1;
+  }
+  hasState(stateName) {
+    return !!this._activeStates.length && (null == stateName || this._activeStates.includes(stateName));
+  }
+  sortStates(states) {
+    const withDefinition = [],
+      withoutDefinition = [];
+    return states.forEach(stateName => {
+      this.compiledDefinitions.has(stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
+    }), withDefinition.sort((left, right) => {
+      const leftDefinition = this.compiledDefinitions.get(left),
+        rightDefinition = this.compiledDefinitions.get(right);
+      return leftDefinition && rightDefinition ? leftDefinition.priority !== rightDefinition.priority ? leftDefinition.priority - rightDefinition.priority : leftDefinition.rank - rightDefinition.rank : 0;
+    }), this.stateSort && withoutDefinition.length > 1 && withoutDefinition.sort(this.stateSort), withDefinition.concat(withoutDefinition);
+  }
+  adjudicate(sortedStates) {
+    const candidate = sortedStates.slice(),
+      suppressedSet = new Set();
+    for (let index = candidate.length - 1; index >= 0; index--) {
+      const stateName = candidate[index],
+        definition = this.compiledDefinitions.get(stateName);
+      definition && (definition.exclude.forEach(excludedState => {
+        const excludedIndex = candidate.indexOf(excludedState);
+        -1 !== excludedIndex && (candidate.splice(excludedIndex, 1), excludedIndex < index && (index -= 1));
+      }), definition.suppress.forEach(suppressedState => {
+        suppressedSet.add(suppressedState);
+      }));
+    }
+    return {
+      active: candidate,
+      suppressedSet: suppressedSet
+    };
+  }
+  recomputePatch(effectiveStates) {
+    const cacheKey = effectiveStates.join(","),
+      nextPatch = {},
+      useResolverCache = this.resolverCacheValid && this.resolverCacheKey === cacheKey;
+    useResolverCache || (this.resolverPatchCache.clear(), this.resolverCacheKey = cacheKey), effectiveStates.forEach(stateName => {
+      var _a;
+      const definition = this.compiledDefinitions.get(stateName);
+      if (definition && (definition.patch && this.mergeInto(nextPatch, definition.patch), definition.hasResolver)) {
+        const resolverPatch = useResolverCache ? this.resolverPatchCache.get(stateName) : null === (_a = definition.resolver) || void 0 === _a ? void 0 : _a.call(definition, {
+          graphic: this.graphic,
+          activeStates: this._activeStates,
+          effectiveStates: this._effectiveStates,
+          baseAttributes: this.baseAttributes,
+          resolvedPatch: nextPatch
+        });
+        resolverPatch && (useResolverCache || this.resolverPatchCache.set(stateName, resolverPatch), this.mergeInto(nextPatch, resolverPatch));
+      }
+    }), useResolverCache || (this.resolverCacheValid = !0), this._resolvedPatch = nextPatch;
+  }
+  mergeInto(target, patch) {
+    "deep" !== this.mergeMode ? Object.keys(patch).forEach(key => {
+      target[key] = cloneValue(patch[key]);
+    }) : Object.keys(patch).forEach(key => {
+      var _a;
+      const nextValue = patch[key],
+        previousValue = target[key],
+        baseValue = null === (_a = this.baseAttributes) || void 0 === _a ? void 0 : _a[key];
+      isPlainObject(previousValue) && isPlainObject(nextValue) ? target[key] = deepMerge(previousValue, nextValue) : !isPlainObject(previousValue) && isPlainObject(baseValue) && isPlainObject(nextValue) ? target[key] = deepMerge(baseValue, nextValue) : target[key] = cloneValue(nextValue);
     });
   }
+  sameArray(left, right) {
+    if (left.length !== right.length) return !1;
+    for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return !1;
+    return !0;
+  }
 }
 
 var UpdateCategory;
@@ -4805,565 +4605,6 @@ function classifyAttributeDelta(key, prev, next) {
   return dynamicClassifier ? dynamicClassifier(prev, next) : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
 }
 
-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() : []
-  };
-}
-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) {
-    this.isEnabled() && (this.snapshot.counters[key] += delta);
-  }
-  recordDeferredIneligible(reason, delta = 1) {
-    this.isEnabled() && (this.snapshot.deferredIneligibleByReason[reason] += delta, this.snapshot.counters.deferredIneligibleGraphics += delta, this.recordEvent("deferred-ineligible", {
-      reason: reason,
-      count: delta
-    }));
-  }
-  recordCategory(category) {
-    this.isEnabled() && (category & UpdateCategory.PAINT && (this.snapshot.categoryBreakdown.paint += 1), category & UpdateCategory.TRANSFORM && (this.snapshot.categoryBreakdown.transform += 1), category & UpdateCategory.SHAPE && (this.snapshot.categoryBreakdown.shape += 1), category & UpdateCategory.BOUNDS && (this.snapshot.categoryBreakdown.bounds += 1), category & UpdateCategory.LAYOUT && (this.snapshot.categoryBreakdown.layout += 1), category & UpdateCategory.PICK && (this.snapshot.categoryBreakdown.pick += 1));
-  }
-  recordRefresh(key, delta = 1) {
-    this.isEnabled() && (this.snapshot.refresh[key] += delta);
-  }
-  recordResolver(key, delta = 1) {
-    this.isEnabled() && (this.snapshot.resolver[key] += delta);
-  }
-  recordCost(kind, durationMs) {
-    if (this.isEnabled()) {
-      if ("resolver" === kind) return this.snapshot.cost.resolverTotalMs += durationMs, void (this.snapshot.cost.resolverMaxMs = Math.max(this.snapshot.cost.resolverMaxMs, durationMs));
-      if ("patch" === kind) return this.snapshot.cost.patchTotalMs += durationMs, void (this.snapshot.cost.patchMaxMs = Math.max(this.snapshot.cost.patchMaxMs, durationMs));
-      if ("sharedRefresh" === kind) return this.snapshot.cost.sharedRefreshTotalMs += durationMs, void (this.snapshot.cost.sharedRefreshMaxMs = Math.max(this.snapshot.cost.sharedRefreshMaxMs, durationMs));
-      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) {
-    this.isEnabled() && (this.snapshot.allocationHints[key] += delta);
-  }
-  updateBatchPending(pendingJobs) {
-    this.isEnabled() && (this.snapshot.batch.pendingJobs = pendingJobs, this.snapshot.batch.maxPendingJobs = Math.max(this.snapshot.batch.maxPendingJobs, pendingJobs));
-  }
-  updateMaxGraphicsInJob(count) {
-    this.isEnabled() && (this.snapshot.batch.maxGraphicsInJob = Math.max(this.snapshot.batch.maxGraphicsInJob, count));
-  }
-  recordEvent(type, detail) {
-    var _a, _b, _c;
-    if (!this.shouldRecordEvents()) return;
-    const events = null !== (_a = this.snapshot.events) && void 0 !== _a ? _a : this.snapshot.events = [];
-    events.push({
-      type: type,
-      at: Date.now(),
-      detail: detail
-    });
-    const max = null !== (_c = null === (_b = this.getConfig()) || void 0 === _b ? void 0 : _b.maxEventRecords) && void 0 !== _c ? _c : 100;
-    events.length > max && events.splice(0, events.length - max);
-  }
-  isEnabled() {
-    var _a;
-    return !0 === (null === (_a = this.getConfig()) || void 0 === _a ? void 0 : _a.enabled);
-  }
-  shouldRecordEvents() {
-    const config = this.getConfig();
-    return !!(null == config ? void 0 : config.enabled) && !!config.recordEvents;
-  }
-  getConfig() {
-    return "function" == typeof this.configSource ? this.configSource() : this.configSource;
-  }
-}
-function ensureStageStatePerfMonitor(stage) {
-  const stageAny = stage;
-  return stageAny[STAGE_PERF_MONITOR] || (stageAny[STAGE_PERF_MONITOR] = new StatePerfMonitor(() => stage.statePerfConfig)), stageAny[STAGE_PERF_MONITOR];
-}
-function getStageStatePerfMonitor(stage) {
-  if (stage) return stage[STAGE_PERF_MONITOR];
-}
-function getActiveStageStatePerfMonitor(stage) {
-  var _a;
-  if (!stage) return;
-  const current = getStageStatePerfMonitor(stage);
-  return current || (!0 === (null === (_a = stage.statePerfConfig) || void 0 === _a ? void 0 : _a.enabled) ? ensureStageStatePerfMonitor(stage) : void 0);
-}
-
-function isPlainObject$1(value) {
-  return null != value && "object" == typeof value && !Array.isArray(value);
-}
-function cloneValue$1(value) {
-  if (!isPlainObject$1(value)) return value;
-  const clone = {};
-  return Object.keys(value).forEach(key => {
-    clone[key] = cloneValue$1(value[key]);
-  }), clone;
-}
-function deepMerge$1(base, value) {
-  var _a;
-  const result = null !== (_a = cloneValue$1(base)) && void 0 !== _a ? _a : {};
-  return Object.keys(value).forEach(key => {
-    const nextValue = value[key],
-      previousValue = result[key];
-    isPlainObject$1(previousValue) && isPlainObject$1(nextValue) ? result[key] = deepMerge$1(previousValue, nextValue) : result[key] = cloneValue$1(nextValue);
-  }), result;
-}
-const FULL_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]);
-class StateEngine {
-  constructor(options) {
-    var _a;
-    this._activeStates = [], this._effectiveStates = [], this._suppressed = [], this._resolvedPatch = {}, this.resolverPatchCache = new Map(), this.resolverCacheKey = "", this.resolverCacheValid = !1, this.baseAttributes = {}, this.compiledDefinitions = options.compiledDefinitions, this.stateSort = options.stateSort, this.stateProxy = options.stateProxy, this.stateProxyEligibility = options.stateProxyEligibility, this.states = options.states, this.mergeMode = null !== (_a = options.mergeMode) && void 0 !== _a ? _a : "shallow";
-  }
-  get activeStates() {
-    return this._activeStates;
-  }
-  get effectiveStates() {
-    return this._effectiveStates;
-  }
-  get resolvedPatch() {
-    return this._resolvedPatch;
-  }
-  get suppressed() {
-    return this._suppressed;
-  }
-  setResolveContext(graphic, baseAttributes) {
-    this.graphic = graphic, this.baseAttributes = baseAttributes;
-  }
-  applyStates(stateNames) {
-    const uniqueStates = Array.from(new Set(stateNames)),
-      sortedStates = this.sortStates(uniqueStates),
-      adjudicated = this.adjudicate(sortedStates),
-      activeStates = adjudicated.active,
-      effectiveStates = activeStates.filter(stateName => !adjudicated.suppressedSet.has(stateName)),
-      suppressed = activeStates.filter(stateName => adjudicated.suppressedSet.has(stateName)),
-      changed = !this.sameArray(this._activeStates, activeStates) || !this.sameArray(this._effectiveStates, effectiveStates) || !this.sameArray(this._suppressed, suppressed);
-    return this._activeStates = activeStates, this._effectiveStates = effectiveStates, this._suppressed = suppressed, !changed && this.resolverCacheValid || this.recomputePatch(effectiveStates), {
-      changed: changed,
-      activeStates: [...this._activeStates],
-      effectiveStates: [...this._effectiveStates],
-      suppressed: [...this._suppressed]
-    };
-  }
-  addState(stateName, keepCurrentStates) {
-    if (this._activeStates.includes(stateName) && (keepCurrentStates || 1 === this._activeStates.length)) return {
-      changed: !1,
-      activeStates: [...this._activeStates],
-      effectiveStates: [...this._effectiveStates],
-      suppressed: [...this._suppressed]
-    };
-    const nextStates = keepCurrentStates && this._activeStates.length ? this._activeStates.concat([stateName]) : [stateName];
-    return this.applyStates(nextStates);
-  }
-  removeState(stateNames) {
-    if (!this._activeStates.length) return {
-      changed: !1,
-      activeStates: [],
-      effectiveStates: [],
-      suppressed: []
-    };
-    const filteredNames = Array.isArray(stateNames) ? this._activeStates.filter(stateName => !stateNames.includes(stateName)) : this._activeStates.filter(stateName => stateName !== stateNames);
-    return filteredNames.length === this._activeStates.length ? {
-      changed: !1,
-      activeStates: [...this._activeStates],
-      effectiveStates: [...this._effectiveStates],
-      suppressed: [...this._suppressed]
-    } : this.applyStates(filteredNames);
-  }
-  toggleState(stateName) {
-    return this.hasState(stateName) ? this.removeState(stateName) : this.applyStates(this._activeStates.concat([stateName]));
-  }
-  clearStates() {
-    const changed = this._activeStates.length > 0 || this._effectiveStates.length > 0 || this._suppressed.length > 0;
-    return this._activeStates = [], this._effectiveStates = [], this._suppressed = [], this._resolvedPatch = {}, this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, {
-      changed: changed,
-      activeStates: [],
-      effectiveStates: [],
-      suppressed: []
-    };
-  }
-  invalidateResolverCache() {
-    var _a, _b;
-    this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, null === (_b = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage)) || void 0 === _b || _b.recordResolver("invalidations");
-  }
-  hasState(stateName) {
-    return !!this._activeStates.length && (null == stateName || this._activeStates.includes(stateName));
-  }
-  getCompatPatch(stateName) {
-    var _a, _b, _c;
-    const targetStates = this._activeStates.length ? this._activeStates : this._effectiveStates,
-      canUseStateProxy = this.canUseStateProxy(stateName),
-      proxyPatch = canUseStateProxy ? null === (_a = this.stateProxy) || void 0 === _a ? void 0 : _a.call(this, stateName, targetStates) : void 0;
-    if (this.stateProxy && canUseStateProxy) return null != proxyPatch ? proxyPatch : void 0;
-    const value = null === (_b = this.states) || void 0 === _b ? void 0 : _b[stateName];
-    if (null == value) return;
-    if (!isPlainObject$1(value)) return value;
-    return Object.keys(value).some(key => FULL_DEFINITION_KEYS.has(key)) ? cloneValue$1(null !== (_c = value.patch) && void 0 !== _c ? _c : void 0) : value;
-  }
-  sortStates(states) {
-    const withDefinition = [],
-      withoutDefinition = [];
-    return states.forEach(stateName => {
-      this.compiledDefinitions.has(stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
-    }), withDefinition.sort((left, right) => {
-      const leftDefinition = this.compiledDefinitions.get(left),
-        rightDefinition = this.compiledDefinitions.get(right);
-      return leftDefinition && rightDefinition ? leftDefinition.priority !== rightDefinition.priority ? leftDefinition.priority - rightDefinition.priority : leftDefinition.rank - rightDefinition.rank : 0;
-    }), this.stateSort && withoutDefinition.length > 1 && withoutDefinition.sort(this.stateSort), withDefinition.concat(withoutDefinition);
-  }
-  adjudicate(sortedStates) {
-    const candidate = sortedStates.slice(),
-      suppressedSet = new Set();
-    for (let index = candidate.length - 1; index >= 0; index--) {
-      const stateName = candidate[index],
-        definition = this.compiledDefinitions.get(stateName);
-      definition && (definition.exclude.forEach(excludedState => {
-        const excludedIndex = candidate.indexOf(excludedState);
-        -1 !== excludedIndex && (candidate.splice(excludedIndex, 1), excludedIndex < index && (index -= 1));
-      }), definition.suppress.forEach(suppressedState => {
-        suppressedSet.add(suppressedState);
-      }));
-    }
-    return {
-      active: candidate,
-      suppressedSet: suppressedSet
-    };
-  }
-  recomputePatch(effectiveStates) {
-    var _a;
-    const perfMonitor = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage),
-      patchStart = perfMonitor ? performance.now() : 0;
-    let resolverCost = 0;
-    const cacheKey = effectiveStates.join(","),
-      nextPatch = {};
-    if (null == perfMonitor || perfMonitor.recordAllocation("patchObjectsCreated"), this.resolverCacheValid && this.resolverCacheKey === cacheKey ? effectiveStates.forEach(stateName => {
-      var _a;
-      const canUseStateProxy = this.canUseStateProxy(stateName),
-        proxyPatch = canUseStateProxy ? null === (_a = this.stateProxy) || void 0 === _a ? void 0 : _a.call(this, stateName, effectiveStates) : void 0;
-      if (this.stateProxy && canUseStateProxy) return void (null != proxyPatch && this.mergeInto(nextPatch, proxyPatch));
-      const definition = this.compiledDefinitions.get(stateName);
-      if (definition) {
-        if (definition.patch && this.mergeInto(nextPatch, definition.patch), definition.hasResolver) {
-          const cachedPatch = this.resolverPatchCache.get(stateName);
-          cachedPatch && (null == perfMonitor || perfMonitor.recordResolver("cacheHits"), this.mergeInto(nextPatch, cachedPatch));
-        }
-      } else {
-        const compatPatch = this.getCompatPatch(stateName);
-        compatPatch && this.mergeInto(nextPatch, compatPatch);
-      }
-    }) : (this.resolverPatchCache.clear(), this.resolverCacheKey = cacheKey, effectiveStates.forEach(stateName => {
-      var _a;
-      const canUseStateProxy = this.canUseStateProxy(stateName),
-        proxyPatch = canUseStateProxy ? null === (_a = this.stateProxy) || void 0 === _a ? void 0 : _a.call(this, stateName, effectiveStates) : void 0;
-      if (this.stateProxy && canUseStateProxy) return void (null != proxyPatch && this.mergeInto(nextPatch, proxyPatch));
-      const definition = this.compiledDefinitions.get(stateName);
-      if (definition) {
-        if (definition.patch && this.mergeInto(nextPatch, definition.patch), definition.hasResolver && definition.resolver) {
-          null == perfMonitor || perfMonitor.recordResolver("cacheMisses");
-          const resolverStart = perfMonitor ? performance.now() : 0,
-            resolverPatch = definition.resolver({
-              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);
-          }
-          resolverPatch && (this.resolverPatchCache.set(stateName, resolverPatch), this.mergeInto(nextPatch, resolverPatch));
-        }
-      } else {
-        const compatPatch = this.getCompatPatch(stateName);
-        compatPatch && this.mergeInto(nextPatch, compatPatch);
-      }
-    }), this.resolverCacheValid = !0), this._resolvedPatch = nextPatch, perfMonitor) {
-      const totalCost = performance.now() - patchStart;
-      perfMonitor.recordCost("patch", Math.max(0, totalCost - resolverCost));
-    }
-  }
-  mergeInto(target, patch) {
-    "deep" !== this.mergeMode ? Object.keys(patch).forEach(key => {
-      target[key] = cloneValue$1(patch[key]);
-    }) : Object.keys(patch).forEach(key => {
-      var _a;
-      const nextValue = patch[key],
-        previousValue = target[key],
-        baseValue = null === (_a = this.baseAttributes) || void 0 === _a ? void 0 : _a[key];
-      isPlainObject$1(previousValue) && isPlainObject$1(nextValue) ? target[key] = deepMerge$1(previousValue, nextValue) : !isPlainObject$1(previousValue) && isPlainObject$1(baseValue) && isPlainObject$1(nextValue) ? target[key] = deepMerge$1(baseValue, nextValue) : target[key] = cloneValue$1(nextValue);
-    });
-  }
-  sameArray(left, right) {
-    if (left.length !== right.length) return !1;
-    for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return !1;
-    return !0;
-  }
-  canUseStateProxy(stateName) {
-    return !!this.stateProxy && (!this.stateProxyEligibility || this.stateProxyEligibility(stateName));
-  }
-}
-
-class StateModel {
-  constructor(options = {}) {
-    var _a;
-    this.exclusiveGroupMap = new Map(), this.exclusiveGroups = new Map(), this.states = options.states, this.currentStates = options.currentStates ? [...options.currentStates] : void 0, this.stateSort = options.stateSort, this.stateProxy = options.stateProxy, this.stateEngine = options.stateEngine, this.stateEngine && options.currentStates && !this.sameStates(this.stateEngine.activeStates, options.currentStates) && this.stateEngine.applyStates(options.currentStates);
-    const exclusiveGroups = null !== (_a = options.exclusiveGroups) && void 0 !== _a ? _a : {};
-    for (const groupName in exclusiveGroups) Object.prototype.hasOwnProperty.call(exclusiveGroups, groupName) && this.registerExclusiveGroup(groupName, exclusiveGroups[groupName]);
-  }
-  getCurrentStates() {
-    return this.currentStates ? [...this.currentStates] : [];
-  }
-  hasState(stateName) {
-    return this.stateEngine ? this.stateEngine.hasState(stateName) : !(!this.currentStates || !this.currentStates.length) && (null == stateName || this.currentStates.includes(stateName));
-  }
-  getState(stateName) {
-    var _a;
-    return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
-  }
-  useStates(states) {
-    var _a;
-    if (this.stateEngine) {
-      const result = this.stateEngine.applyStates(states);
-      return this.currentStates = [...result.activeStates], {
-        changed: result.changed,
-        states: [...result.activeStates],
-        effectiveStates: [...result.effectiveStates]
-      };
-    }
-    if (!states.length) return this.clearStates();
-    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : [],
-      changed = previousStates.length !== states.length || states.some((stateName, index) => previousStates[index] !== stateName),
-      nextStates = this.sortStates(states);
-    return changed && (this.currentStates = nextStates), {
-      changed: changed,
-      states: changed ? [...nextStates] : [...previousStates]
-    };
-  }
-  clearStates() {
-    if (this.stateEngine) {
-      const result = this.stateEngine.clearStates();
-      return this.currentStates = [], {
-        changed: result.changed,
-        states: [],
-        effectiveStates: []
-      };
-    }
-    const changed = this.hasState();
-    return this.currentStates = [], {
-      changed: changed,
-      states: []
-    };
-  }
-  addState(stateName, keepCurrentStates) {
-    var _a;
-    if (this.stateEngine) {
-      const result = this.stateEngine.addState(stateName, keepCurrentStates);
-      return this.currentStates = [...result.activeStates], {
-        changed: result.changed,
-        states: [...result.activeStates],
-        effectiveStates: [...result.effectiveStates]
-      };
-    }
-    if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return {
-      changed: !1,
-      states: this.getCurrentStates()
-    };
-    const nextStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
-    return this.useStates(nextStates);
-  }
-  removeState(stateName) {
-    if (this.stateEngine) {
-      const result = this.stateEngine.removeState(stateName);
-      return this.currentStates = [...result.activeStates], {
-        changed: result.changed,
-        states: [...result.activeStates],
-        effectiveStates: [...result.effectiveStates]
-      };
-    }
-    if (!this.currentStates) return {
-      changed: !1,
-      states: []
-    };
-    const filter = Array.isArray(stateName) ? s => !stateName.includes(s) : s => s !== stateName,
-      nextStates = this.currentStates.filter(filter);
-    return nextStates.length === this.currentStates.length ? {
-      changed: !1,
-      states: this.getCurrentStates()
-    } : this.useStates(nextStates);
-  }
-  toggleState(stateName) {
-    if (this.stateEngine) {
-      const result = this.stateEngine.toggleState(stateName);
-      return this.currentStates = [...result.activeStates], {
-        changed: result.changed,
-        states: [...result.activeStates],
-        effectiveStates: [...result.effectiveStates]
-      };
-    }
-    if (this.hasState(stateName)) return this.removeState(stateName);
-    const nextStates = this.currentStates ? this.currentStates.slice() : [];
-    return nextStates.includes(stateName) || nextStates.push(stateName), this.useStates(nextStates);
-  }
-  sortStates(states) {
-    return this.stateEngine ? [...this.stateEngine.activeStates] : this.stateSort ? [...states].sort(this.stateSort) : [...states];
-  }
-  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);
-    return groupName ? (null !== (_a = this.exclusiveGroups.get(groupName)) && void 0 !== _a ? _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 null !== (_c = null !== (_b = null === (_a = this.stateEngine) || void 0 === _a ? void 0 : _a.effectiveStates) && void 0 !== _b ? _b : this.currentStates) && void 0 !== _c ? _c : [];
-  }
-  get resolvedPatch() {
-    var _a;
-    return null === (_a = this.stateEngine) || void 0 === _a ? void 0 : _a.resolvedPatch;
-  }
-  sameStates(left, right) {
-    if (left.length !== right.length) return !1;
-    for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return !1;
-    return !0;
-  }
-}
-
-function isPlainObject(value) {
-  return null != value && "object" == typeof value && !Array.isArray(value);
-}
-function cloneValue(value) {
-  if (!isPlainObject(value)) return value;
-  const clone = {};
-  for (const key in value) Object.prototype.hasOwnProperty.call(value, key) && (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],
-      previousValue = result[key];
-    isPlainObject(previousValue) && isPlainObject(nextValue) ? result[key] = deepMerge(previousValue, nextValue) : result[key] = cloneValue(nextValue);
-  }
-  return result;
-}
-class StateStyleResolver {
-  constructor(options = {}) {
-    this.options = options;
-  }
-  resolve(normalAttrs, states, stateProxy, currentStates, stateSort) {
-    var _a;
-    const mergeMode = null !== (_a = this.options.mergeMode) && void 0 !== _a ? _a : "shallow",
-      sortedStates = stateSort ? currentStates.slice().sort(stateSort) : currentStates.slice(),
-      resolvedAttrs = {};
-    return sortedStates.forEach(stateName => {
-      const attrs = stateProxy ? stateProxy(stateName, sortedStates) : null == states ? void 0 : states[stateName];
-      if (null != attrs) for (const key in attrs) {
-        if (!Object.prototype.hasOwnProperty.call(attrs, key)) continue;
-        const nextValue = attrs[key];
-        if ("deep" === mergeMode && 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);
-      }
-    }), resolvedAttrs;
-  }
-}
-
 function hasOwnKeys(value) {
   return Object.keys(value).length > 0;
 }
@@ -5371,25 +4612,22 @@ function normalizeNoAnimateAttrConfig(config) {
   return config ? Array.isArray(config) ? config.reduce((acc, key) => (acc[key] = 1, acc), {}) : Object.keys(config).reduce((acc, key) => (config[key] && (acc[key] = 1), acc), {}) : {};
 }
 class StateTransitionOrchestrator {
-  analyzeTransition(_currentAttrs, targetAttrs, stateNames, hasAnimation, options = {}) {
+  analyzeTransition(targetAttrs, hasAnimation, options = {}) {
     var _a, _b;
     const plan = {
-      stateNames: stateNames,
       targetAttrs: Object.assign({}, targetAttrs),
       animateAttrs: {},
-      jumpAttrs: {},
       noAnimateAttrs: {}
     };
     if (!hasAnimation) return plan;
     const noWorkAnimateAttr = Object.assign(Object.assign({}, null !== (_a = options.noWorkAnimateAttr) && void 0 !== _a ? _a : {}), normalizeNoAnimateAttrConfig(null === (_b = options.animateConfig) || void 0 === _b ? void 0 : _b.noAnimateAttrs)),
       isClear = !0 === options.isClear,
-      getDefaultAttribute = options.getDefaultAttribute,
+      readDefaultAttribute = options.getDefaultAttribute,
       shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute,
       assignTransitionAttr = (key, value) => {
-        if (noWorkAnimateAttr[key]) return plan.jumpAttrs[key] = value, void (plan.noAnimateAttrs[key] = value);
-        if (isClear && void 0 === value) {
+        if (noWorkAnimateAttr[key]) plan.noAnimateAttrs[key] = value;else if (isClear && void 0 === value) {
           if (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) return;
-          plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+          plan.animateAttrs[key] = readDefaultAttribute(key);
         } else plan.animateAttrs[key] = value;
       };
     for (const key in targetAttrs) {
@@ -5425,13 +4663,13 @@ class StateTransitionOrchestrator {
       type: AttributeUpdateType.STATE
     }), plan;
   }
-  applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-    var _a, _b, _c, _d;
-    const plan = this.analyzeTransition({}, targetAttrs, stateNames, hasAnimation, {
-      noWorkAnimateAttr: null === (_a = graphic.getNoWorkAnimateAttr) || void 0 === _a ? void 0 : _a.call(graphic),
+  applyClearTransition(graphic, targetAttrs, hasAnimation, options = {}) {
+    var _a;
+    const plan = this.analyzeTransition(targetAttrs, hasAnimation, {
+      noWorkAnimateAttr: graphic.getNoWorkAnimateAttr(),
       isClear: !0,
-      getDefaultAttribute: null === (_b = graphic.getDefaultAttribute) || void 0 === _b ? void 0 : _b.bind(graphic),
-      shouldSkipDefaultAttribute: null !== (_c = options.shouldSkipDefaultAttribute) && void 0 !== _c ? _c : null === (_d = graphic.shouldSkipStateTransitionDefaultAttribute) || void 0 === _d ? void 0 : _d.bind(graphic),
+      getDefaultAttribute: graphic.getDefaultAttribute.bind(graphic),
+      shouldSkipDefaultAttribute: null !== (_a = options.shouldSkipDefaultAttribute) && void 0 !== _a ? _a : graphic.shouldSkipStateTransitionDefaultAttribute.bind(graphic),
       animateConfig: options.animateConfig,
       extraAnimateAttrs: options.extraAnimateAttrs
     });
@@ -5440,24 +4678,11 @@ class StateTransitionOrchestrator {
 }
 
 const compiler = new StateDefinitionCompiler();
-function copyDefinitions(definitions) {
-  return definitions ? Object.assign({}, definitions) : {};
-}
 function buildEffectiveSourceDefinitions(parentScope, localStateDefinitions, themeStateDefinitions) {
-  const merged = copyDefinitions(parentScope ? parentScope.effectiveSourceDefinitions : themeStateDefinitions);
-  return localStateDefinitions && Object.keys(localStateDefinitions).forEach(stateName => {
-    merged[stateName] = localStateDefinitions[stateName];
-  }), merged;
-}
-function initializeScope(scope, revision = 0) {
-  var _a;
-  const effectiveSourceDefinitions = buildEffectiveSourceDefinitions(scope.parentScope, scope.localStateDefinitions, scope.themeStateDefinitions);
-  return scope.effectiveSourceDefinitions = effectiveSourceDefinitions, scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions), scope.parentRevisionAtBuild = null === (_a = scope.parentScope) || void 0 === _a ? void 0 : _a.revision, scope.revision = revision, scope.dirty = !1, scope;
+  return Object.assign({}, parentScope ? parentScope.effectiveSourceDefinitions : themeStateDefinitions, localStateDefinitions);
 }
 function createGroupSharedStateScope(group, parentScope, localStateDefinitions) {
-  return initializeScope({
-    ownerKind: "group",
-    ownerGroup: group,
+  return rebuildSharedStateScope({
     ownerStage: group.stage,
     parentScope: parentScope,
     localStateDefinitions: localStateDefinitions,
@@ -5474,14 +4699,13 @@ function setSharedStateScopeParent(scope, parentScope) {
 function setSharedStateScopeLocalDefinitions(scope, localStateDefinitions) {
   return scope.localStateDefinitions !== localStateDefinitions && (scope.localStateDefinitions = localStateDefinitions, rebuildSharedStateScope(scope), !0);
 }
-function rebuildSharedStateScope(scope) {
+function rebuildSharedStateScope(scope, revision = scope.revision + 1) {
   var _a;
   const effectiveSourceDefinitions = buildEffectiveSourceDefinitions(scope.parentScope, scope.localStateDefinitions, scope.themeStateDefinitions);
-  return scope.effectiveSourceDefinitions = effectiveSourceDefinitions, scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions), scope.parentRevisionAtBuild = null === (_a = scope.parentScope) || void 0 === _a ? void 0 : _a.revision, scope.revision += 1, scope.dirty = !1, scope;
+  return scope.effectiveSourceDefinitions = effectiveSourceDefinitions, scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions), scope.parentRevisionAtBuild = null === (_a = scope.parentScope) || void 0 === _a ? void 0 : _a.revision, scope.revision = revision, scope.dirty = !1, scope;
 }
 function ensureSharedStateScopeFresh(scope) {
-  var _a;
-  if (scope) return null === (_a = getActiveStageStatePerfMonitor(scope.ownerStage)) || void 0 === _a || _a.recordRefresh("ensureFreshCalls"), scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
+  if (scope) return scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
 }
 function collectSharedStateScopeChain(scope) {
   const chain = [];
@@ -5491,26 +4715,19 @@ function collectSharedStateScopeChain(scope) {
 }
 
 function scheduleStageSharedStateRefresh(stage) {
-  var _a;
-  stage && "released" !== stage.releaseStatus && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordRefresh("renderScheduled"), stage.renderNextFrame());
+  stage && "released" !== stage.releaseStatus && stage.renderNextFrame();
 }
 function enqueueGraphicSharedStateRefresh(stage, graphic) {
   var _a;
   if (!stage) return;
-  const pending = null !== (_a = stage._pendingSharedStateRefreshGraphics) && void 0 !== _a ? _a : stage._pendingSharedStateRefreshGraphics = new Set();
-  if (!pending.has(graphic)) {
-    pending.add(graphic);
-    const perfMonitor = getActiveStageStatePerfMonitor(stage);
-    null == perfMonitor || perfMonitor.recordRefresh("queuedGraphics"), null == perfMonitor || perfMonitor.recordAllocation("refreshQueuePushes");
-  }
+  (null !== (_a = stage._pendingSharedStateRefreshGraphics) && void 0 !== _a ? _a : stage._pendingSharedStateRefreshGraphics = new Set()).add(graphic);
 }
 function markScopeActiveDescendantsDirty(scope, stage) {
-  let marked = !1;
-  scope.subtreeActiveDescendants.forEach(graphic => {
+  scope.subtreeActiveDescendants.size && (scope.subtreeActiveDescendants.forEach(graphic => {
     var _a;
     graphic.sharedStateDirty = !0;
-    enqueueGraphicSharedStateRefresh(null !== (_a = null != stage ? stage : graphic.stage) && void 0 !== _a ? _a : scope.ownerStage, graphic), marked = !0;
-  }), marked && scheduleStageSharedStateRefresh(null != stage ? stage : scope.ownerStage);
+    enqueueGraphicSharedStateRefresh(null !== (_a = null != stage ? stage : graphic.stage) && void 0 !== _a ? _a : scope.ownerStage, graphic);
+  }), scheduleStageSharedStateRefresh(null != stage ? stage : scope.ownerStage));
 }
 
 const _tempBounds = new AABBBounds(),
@@ -5520,10 +4737,8 @@ const tempConstantXYKey = ["x", "y"],
   tempConstantScaleXYKey = ["scaleX", "scaleY"],
   tempConstantAngleKey = ["angle"],
   builtinTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave"]),
-  FULL_STATE_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]),
   point = new Point(),
   EMPTY_STATE_NAMES = [],
-  deprecatedLocalStateFallbackWarningStateNames = new Set(),
   BROAD_UPDATE_CATEGORY = UpdateCategory.PAINT | UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.TRANSFORM | UpdateCategory.LAYOUT;
 function isPlainObjectValue(value) {
   return "object" == typeof value && null != value && !Array.isArray(value);
@@ -5637,11 +4852,6 @@ class Graphic extends Node {
   getAttributes() {
     return this.attribute;
   }
-  getStateStyleResolver(mergeMode) {
-    return "deep" === mergeMode ? (this.deepStateStyleResolver || (this.deepStateStyleResolver = new StateStyleResolver({
-      mergeMode: "deep"
-    })), this.deepStateStyleResolver) : (this.stateStyleResolver || (this.stateStyleResolver = new StateStyleResolver()), this.stateStyleResolver);
-  }
   getStateTransitionOrchestrator() {
     return this.stateTransitionOrchestrator || (this.stateTransitionOrchestrator = new StateTransitionOrchestrator()), this.stateTransitionOrchestrator;
   }
@@ -5657,7 +4867,7 @@ class Graphic extends Node {
   syncSharedStateScopeBindingFromTree(markDirty = !0) {
     var _a;
     const nextScope = this.resolveBoundSharedStateScope();
-    return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.syncSharedStateActiveRegistrations(), markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), !0);
+    return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.syncSharedStateActiveRegistrations(), markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), !0);
   }
   syncSharedStateScopeBindingOnTreeChange(markDirty = !0) {
     var _a, _b;
@@ -5696,13 +4906,7 @@ class Graphic extends Node {
   }
   getLocalStatesVersion() {
     var _a, _b;
-    return this.localStateDefinitionsSource !== this.states && (this.localStateDefinitionsSource = this.states, this.localFallbackVersion = (null !== (_a = this.localFallbackVersion) && void 0 !== _a ? _a : 0) + 1), null !== (_b = this.localFallbackVersion) && void 0 !== _b ? _b : 0;
-  }
-  warnDeprecatedLocalStatesFallback(stateNames) {
-    for (let index = 0; index < stateNames.length; index++) {
-      const stateName = stateNames[index];
-      deprecatedLocalStateFallbackWarningStateNames.has(stateName) || (deprecatedLocalStateFallbackWarningStateNames.add(stateName), console.warn(`[VRender] graphic.states fallback for missing shared state definition "${stateName}" is deprecated. Move the state definition to sharedStateDefinitions or use stateProxy for dynamic per-graphic styles.`));
-    }
+    return this.localStateDefinitionsSource !== this.states && (this.localStateDefinitionsSource = this.states, this.localStateDefinitionsVersion = (null !== (_a = this.localStateDefinitionsVersion) && void 0 !== _a ? _a : 0) + 1), null !== (_b = this.localStateDefinitionsVersion) && void 0 !== _b ? _b : 0;
   }
   resolveEffectiveCompiledDefinitions() {
     this.syncSharedStateScopeBindingFromTree(!1);
@@ -5711,50 +4915,24 @@ class Graphic extends Node {
     const hasStates = !!this.states && Object.keys(this.states).length > 0;
     if (!boundScope) {
       if (!hasStates) return {
-        compiledDefinitions: void 0,
-        stateProxyModeKey: "none"
+        compiledDefinitions: void 0
       };
       const cacheKey = `local:${this.getLocalStatesVersion()}`;
       return this.compiledStateDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.compiledStateDefinitions = new StateDefinitionCompiler().compile(this.states), this.compiledStateDefinitionsCacheKey = cacheKey), {
-        compiledDefinitions: this.compiledStateDefinitions,
-        stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
+        compiledDefinitions: this.compiledStateDefinitions
       };
     }
-    const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions,
-      sharedStateProxyModeKey = this.stateProxy ? "shared-missing-only" : "none",
-      sharedStateProxyEligibility = this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0;
-    if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
-      compiledDefinitions: sharedCompiledDefinitions,
-      stateProxyModeKey: sharedStateProxyModeKey,
-      stateProxyEligibility: sharedStateProxyEligibility
-    };
-    const localStates = this.states,
-      missingLocalStateDefinitions = {},
-      missingStateNames = [];
-    if (Object.keys(localStates).forEach(stateName => {
-      sharedCompiledDefinitions.has(stateName) || (missingLocalStateDefinitions[stateName] = localStates[stateName], missingStateNames.push(stateName));
-    }), !missingStateNames.length) return this.localFallbackCompiledDefinitions = void 0, {
-      compiledDefinitions: sharedCompiledDefinitions,
-      stateProxyModeKey: sharedStateProxyModeKey,
-      stateProxyEligibility: sharedStateProxyEligibility
-    };
-    this.warnDeprecatedLocalStatesFallback(missingStateNames);
-    const localStatesVersion = this.getLocalStatesVersion(),
-      stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join("|")}` : "none",
-      cacheKey = `shared:${boundScope.revision}:fallback:${localStatesVersion}:${stateProxyModeKey}`;
-    return this.localFallbackCompiledDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.localFallbackCompiledDefinitions = new StateDefinitionCompiler().compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions)), this.compiledStateDefinitionsCacheKey = cacheKey), {
-      compiledDefinitions: this.localFallbackCompiledDefinitions,
-      stateProxyModeKey: stateProxyModeKey,
-      stateProxyEligibility: sharedStateProxyEligibility
+    return {
+      compiledDefinitions: boundScope.effectiveCompiledDefinitions
     };
   }
   recomputeCurrentStatePatch() {
     var _a, _b;
     if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)) return this.effectiveStates = [], this.resolvedStatePatch = void 0, void this.syncSharedStateActiveRegistrations();
     const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
-      transition = this.createStateModel(stateResolveBaseAttrs).useStates(this.currentStates),
+      transition = this.resolveUseStatesTransition(this.currentStates, stateResolveBaseAttrs),
       effectiveStates = null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
-      resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+      resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
     this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
   }
   buildStaticAttributeSnapshot() {
@@ -5818,12 +4996,7 @@ class Graphic extends Node {
     return nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), category | nextCategory;
   }
   submitUpdateByCategory(category, forceUpdateTag = !1) {
-    var _a;
     if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), void this.addUpdateLayoutTag();
-    if (category !== UpdateCategory.NONE) {
-      const stage = this.stage;
-      stage && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordCategory(category));
-    }
     (category & BROAD_UPDATE_CATEGORY) !== BROAD_UPDATE_CATEGORY ? (category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag()) : this.addBroadUpdateTag();
   }
   submitUpdateByDelta(delta, forceUpdateTag = !1) {
@@ -6362,103 +5535,94 @@ class Graphic extends Node {
     var _a;
     return null === (_a = this.stateEngine) || void 0 === _a || _a.setResolveContext(this, stateResolveBaseAttrs), stateResolveBaseAttrs;
   }
-  createStateModel(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+  ensureStateEngine(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
     const {
-      compiledDefinitions: compiledDefinitions,
-      stateProxyEligibility: stateProxyEligibility,
-      stateProxyModeKey: stateProxyModeKey
+      compiledDefinitions: compiledDefinitions
     } = this.resolveEffectiveCompiledDefinitions();
-    return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateProxy === this.stateProxy && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode && this.stateEngineStateProxyModeKey === stateProxyModeKey || (this.stateEngine = new StateEngine({
+    return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode || (this.stateEngine = new StateEngine({
       compiledDefinitions: compiledDefinitions,
       stateSort: this.stateSort,
-      stateProxy: this.stateProxy,
-      stateProxyEligibility: 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) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), this.syncStateResolveContext(stateResolveBaseAttrs), new StateModel({
-      states: this.states,
-      currentStates: this.currentStates,
-      stateSort: this.stateSort,
-      stateProxy: this.stateProxy,
-      stateEngine: this.stateEngine
-    });
+    }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0), this.syncStateResolveContext(stateResolveBaseAttrs), this.stateEngine && this.currentStates && !this.sameStateNames(this.stateEngine.activeStates, this.currentStates) && this.stateEngine.applyStates(this.currentStates), this.stateEngine;
+  }
+  toGraphicStateTransition(result) {
+    return {
+      changed: result.changed,
+      states: [...result.activeStates],
+      effectiveStates: [...result.effectiveStates]
+    };
+  }
+  sortLocalStates(states) {
+    return this.stateSort ? [...states].sort(this.stateSort) : [...states];
   }
-  resolveSimpleLocalStateTransition(states, previousStates) {
+  resolveLocalUseStatesTransition(states) {
     var _a;
-    if (!this.states || this.stateProxy || this.stateSort || "deep" === this.stateMergeMode || this.parent || (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope) || this.boundSharedStateScope) return null;
-    if (1 === states.length) {
-      const stateName = states[0],
-        hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName),
-        nextStates = [stateName],
-        changed = !this.sameStateNames(previousStates, nextStates),
-        resolvedStateAttrs = {};
-      if (hasDefinition) {
-        const attrs = this.states[stateName];
-        if (null != attrs) {
-          if (!isPlainObjectValue(attrs)) return null;
-          const keys = Object.keys(attrs);
-          for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
-            const key = keys[keyIndex];
-            if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
-            const attrValue = attrs[key];
-            resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
-          }
-        }
-      }
-      return {
-        changed: changed,
-        states: nextStates,
-        effectiveStates: nextStates,
-        resolvedStateAttrs: resolvedStateAttrs
-      };
-    }
-    const uniqueStates = Array.from(new Set(states)),
-      withDefinition = [],
-      withoutDefinition = [];
-    for (let i = 0; i < uniqueStates.length; i++) {
-      const stateName = uniqueStates[i];
-      Object.prototype.hasOwnProperty.call(this.states, stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
-    }
-    withDefinition.sort((left, right) => left.localeCompare(right));
-    const nextStates = withDefinition.concat(withoutDefinition),
-      changed = !this.sameStateNames(previousStates, nextStates),
-      resolvedStateAttrs = {};
-    for (let i = 0; i < nextStates.length; i++) {
-      const stateName = nextStates[i];
-      if (!Object.prototype.hasOwnProperty.call(this.states, stateName)) continue;
-      const attrs = this.states[stateName];
-      if (null == attrs) continue;
-      if (!isPlainObjectValue(attrs)) return null;
-      const keys = Object.keys(attrs);
-      for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
-        const key = keys[keyIndex];
-        if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
-        const attrValue = attrs[key];
-        resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
-      }
-    }
+    if (!states.length) return this.resolveLocalClearStatesTransition();
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      changed = previousStates.length !== states.length || states.some((stateName, index) => previousStates[index] !== stateName),
+      nextStates = this.sortLocalStates(states);
     return {
       changed: changed,
-      states: nextStates,
-      effectiveStates: nextStates,
-      resolvedStateAttrs: resolvedStateAttrs
+      states: changed ? nextStates : [...previousStates]
     };
   }
-  resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = !1) {
-    var _a, _b;
-    let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
-    const isSimpleLocalTransition = !!transition;
-    let resolvedStateAttrs;
-    if (transition) resolvedStateAttrs = transition.resolvedStateAttrs;else {
-      const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
-        stateModel = this.createStateModel(stateResolveBaseAttrs);
-      forceResolverRefresh && (null === (_a = this.stateEngine) || void 0 === _a || _a.invalidateResolverCache()), transition = stateModel.useStates(states), resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
-    }
+  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 || 1 === this.currentStates.length)) return {
+      changed: !1,
+      states: [...this.currentStates]
+    };
+    const nextStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? 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: !1,
+      states: []
+    };
+    const filter = Array.isArray(stateName) ? s => !stateName.includes(s) : s => s !== stateName,
+      nextStates = this.currentStates.filter(filter);
+    return nextStates.length === this.currentStates.length ? {
+      changed: !1,
+      states: [...this.currentStates]
+    } : 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() : [];
+    return nextStates.push(stateName), this.resolveLocalUseStatesTransition(nextStates);
+  }
+  resolveGraphicStateTransition(states, forceResolverRefresh = !1) {
+    var _a;
+    const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
+      stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+    forceResolverRefresh && (null == stateEngine || stateEngine.invalidateResolverCache());
+    const transition = stateEngine ? this.toGraphicStateTransition(stateEngine.applyStates(states)) : this.resolveLocalUseStatesTransition(states),
+      resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
     return {
       transition: transition,
-      effectiveStates: null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
-      resolvedStateAttrs: resolvedStateAttrs,
-      isSimpleLocalTransition: isSimpleLocalTransition
+      effectiveStates: null !== (_a = transition.effectiveStates) && void 0 !== _a ? _a : transition.states,
+      resolvedStateAttrs: resolvedStateAttrs
     };
   }
   normalizeSetStatesOptions(options) {
@@ -6489,24 +5653,14 @@ class Graphic extends Node {
       {
         transition: transition,
         effectiveStates: effectiveStates,
-        resolvedStateAttrs: resolvedStateAttrs,
-        isSimpleLocalTransition: isSimpleLocalTransition
-      } = this.resolveGraphicStateTransition(states, previousStates, !0),
+        resolvedStateAttrs: resolvedStateAttrs
+      } = this.resolveGraphicStateTransition(states, !0),
       patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
-    if ((!patchChanged || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) && (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged)) {
-      if (this.stage) {
-        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-          graphicId: this._uid,
-          targetStates: [...transition.states]
-        });
-      }
-      hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-        type: AttributeUpdateType.STATE
-      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
-        type: AttributeUpdateType.STATE
-      }), this.emitStateUpdateEvent());
-    }
+    patchChanged && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) || (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged && (hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+      type: AttributeUpdateType.STATE
+    }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+      type: AttributeUpdateType.STATE
+    }), this.emitStateUpdateEvent())));
   }
   resolveStateAnimateConfig(animateConfig) {
     var _a, _b, _c;
@@ -6519,8 +5673,8 @@ class Graphic extends Node {
         extraAnimateAttrs: extraAnimateAttrs,
         shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
       } : void 0;
-    if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
-    const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
+    if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, transitionOptions);
+    const plan = this.getStateTransitionOrchestrator().analyzeTransition(attrs, hasAnimation, {
       noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
       animateConfig: resolvedAnimateConfig,
       extraAnimateAttrs: extraAnimateAttrs,
@@ -6544,43 +5698,29 @@ class Graphic extends Node {
       animate.stateNames && stateAnimates.push(animate);
     }), stateAnimates.forEach(animate => animate.stop(type));
   }
-  getNormalAttribute(key) {
-    var _a, _b;
-    const value = this.attribute[key];
-    return this.hasAnyTrackedAnimate() ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
-  }
   clearStates(hasAnimation) {
     var _a, _b, _c;
     const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
       previousResolvedStatePatch = this.resolvedStatePatch,
-      transition = this.createStateModel().clearStates();
+      transition = this.resolveClearStatesTransition();
     if (!transition.changed && 0 === previousStates.length) return this.currentStates = [], this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, void this.clearSharedStateActiveRegistrations();
     const resolvedStateAttrs = hasAnimation || this.hasCustomEvent("beforeStateUpdate") ? cloneAttributeValue(null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : {}) : null !== (_c = this.baseAttributes) && void 0 !== _c ? _c : {};
-    if (!transition.changed || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0)) {
-      if (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), this.stage) {
-        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-          graphicId: this._uid,
-          targetStates: []
-        });
-      }
-      hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-        type: AttributeUpdateType.STATE
-      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
-        type: AttributeUpdateType.STATE
-      }), this.emitStateUpdateEvent());
-    }
+    transition.changed && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0) || (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+      type: AttributeUpdateType.STATE
+    }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
+      type: AttributeUpdateType.STATE
+    }), this.emitStateUpdateEvent()));
   }
   removeState(stateName, hasAnimation) {
-    const transition = this.createStateModel().removeState(stateName);
+    const transition = this.resolveRemoveStateTransition(stateName);
     transition.changed && this.useStates(transition.states, hasAnimation);
   }
   toggleState(stateName, hasAnimation) {
-    const transition = this.createStateModel().toggleState(stateName);
+    const transition = this.resolveToggleStateTransition(stateName);
     transition.changed && this.useStates(transition.states, hasAnimation);
   }
   addState(stateName, keepCurrentStates, hasAnimation) {
-    const transition = this.createStateModel().addState(stateName, keepCurrentStates);
+    const transition = this.resolveAddStateTransition(stateName, keepCurrentStates);
     transition.changed && this.useStates(transition.states, hasAnimation);
   }
   setStates(states, options) {
@@ -6608,23 +5748,13 @@ class Graphic extends Node {
       {
         transition: transition,
         effectiveStates: effectiveStates,
-        resolvedStateAttrs: resolvedStateAttrs,
-        isSimpleLocalTransition: isSimpleLocalTransition
-      } = this.resolveGraphicStateTransition(states, previousStates);
-    if ((transition.changed || !this.sameStateNames(previousStates, transition.states)) && this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) {
-      if (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stage) {
-        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-          graphicId: this._uid,
-          targetStates: [...transition.states]
-        });
-      }
-      hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-        type: AttributeUpdateType.STATE
-      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
-        type: AttributeUpdateType.STATE
-      }), this.emitStateUpdateEvent());
-    }
+        resolvedStateAttrs: resolvedStateAttrs
+      } = this.resolveGraphicStateTransition(states);
+    !transition.changed && this.sameStateNames(previousStates, transition.states) || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) && (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+      type: AttributeUpdateType.STATE
+    }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+      type: AttributeUpdateType.STATE
+    }), this.emitStateUpdateEvent()));
   }
   invalidateResolver() {
     var _a, _b;
@@ -6770,7 +5900,7 @@ class Graphic extends Node {
   }
   detachStageForRelease() {
     var _a, _b, _c;
-    (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.sharedStateDirty = !1, this.stage = null, this.layer = null, this.shadowRoot && (null === (_c = (_b = this.shadowRoot).detachStageForRelease) || void 0 === _c || _c.call(_b));
+    (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, this.boundSharedStateRevision = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.sharedStateDirty = !1, this.stage = null, this.layer = null, this.shadowRoot && (null === (_c = (_b = this.shadowRoot).detachStageForRelease) || void 0 === _c || _c.call(_b));
   }
   setStageToShadowRoot(stage, layer) {
     this.shadowRoot && this.shadowRoot.setStage(stage, layer);
@@ -7024,6 +6154,730 @@ function getThemeFromGroup(graphic) {
   return null;
 }
 
+var GroupUpdateAABBBoundsMode;
+!function (GroupUpdateAABBBoundsMode) {
+  GroupUpdateAABBBoundsMode[GroupUpdateAABBBoundsMode.LESS_GROUP = 0] = "LESS_GROUP", GroupUpdateAABBBoundsMode[GroupUpdateAABBBoundsMode.MORE_GROUP = 1] = "MORE_GROUP";
+}(GroupUpdateAABBBoundsMode || (GroupUpdateAABBBoundsMode = {}));
+class Group extends Graphic {
+  constructor(params) {
+    super(params), this.type = "group", this.parent = null, this.isContainer = !0, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
+  }
+  get sharedStateDefinitions() {
+    return this._sharedStateDefinitions;
+  }
+  set sharedStateDefinitions(value) {
+    if (this._sharedStateDefinitions === value) return;
+    const previousScope = this.sharedStateScope;
+    this._sharedStateDefinitions = value, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)), previousScope !== this.sharedStateScope && this.notifyChildrenSharedStateTreeChanged();
+  }
+  setMode(mode) {
+    "3d" === mode ? this.set3dMode() : this.set2dMode();
+  }
+  set3dMode() {
+    this.in3dMode = !0;
+  }
+  set2dMode() {
+    this.in3dMode = !1;
+  }
+  setTheme(t) {
+    return this.theme || (this.theme = new Theme()), this.theme.setTheme(t, this);
+  }
+  createTheme() {
+    this.theme || (this.theme = new Theme());
+  }
+  visibleAll(visible) {
+    this.setAttribute("visible", visible), this.forEachChildren(item => {
+      item.isContainer && item.visibleAll ? item.visibleAll(visible) : item.setAttribute("visible", visible);
+    });
+  }
+  hideAll() {
+    this.visibleAll(!1);
+  }
+  showAll() {
+    this.visibleAll(!0);
+  }
+  containsPoint(x, y, mode) {
+    if (mode === IContainPointMode.GLOBAL) {
+      const point = new Point(x, y);
+      return this.parent && this.parent.globalTransMatrix.transformPoint(point, point), this.AABBBounds.contains(point.x, point.y);
+    }
+    return this.AABBBounds.contains(x, y);
+  }
+  shouldUpdateAABBBounds() {
+    return !!super.shouldUpdateAABBBounds() || !!(this._childUpdateTag & UpdateTag.UPDATE_BOUNDS);
+  }
+  tryUpdateAABBBounds() {
+    if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
+    this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+    const selfChange = this.shouldSelfChangeUpdateAABBBounds(),
+      bounds = this.doUpdateAABBBounds();
+    return this.addUpdateLayoutTag(), this.getGraphicService().afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+  }
+  doUpdateLocalMatrix() {
+    const {
+      x = DefaultTransform.x,
+      y = DefaultTransform.y,
+      dx = DefaultTransform.dx,
+      dy = DefaultTransform.dy,
+      scaleX = DefaultTransform.scaleX,
+      scaleY = DefaultTransform.scaleY,
+      angle = DefaultTransform.angle,
+      postMatrix: postMatrix
+    } = this.attribute;
+    if (0 !== x || 0 !== y || 0 !== dx || 0 !== dy || 1 !== scaleX || 1 !== scaleY || 0 !== angle || postMatrix) return super.doUpdateLocalMatrix();
+    this._transMatrix.reset();
+  }
+  getGraphicTheme() {
+    return getTheme(this).group;
+  }
+  updateAABBBounds(attribute, groupTheme, aabbBounds) {
+    const originalAABBBounds = aabbBounds;
+    aabbBounds = aabbBounds.clone();
+    const {
+      width: width,
+      height: height,
+      path: path,
+      clip = groupTheme.clip
+    } = attribute;
+    if (path && path.length ? path.forEach(g => {
+      aabbBounds.union(g.AABBBounds);
+    }) : null != width && null != height && aabbBounds.set(0, 0, Math.max(0, width), Math.max(0, height)), !clip) {
+      this.forEachChildren(node => {
+        aabbBounds.union(node.AABBBounds);
+      });
+      const {
+        scrollX = 0,
+        scrollY = 0
+      } = attribute;
+      aabbBounds.translate(scrollX, scrollY);
+    }
+    return application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, this), originalAABBBounds.copy(aabbBounds), originalAABBBounds;
+  }
+  doUpdateAABBBounds() {
+    this.updateAABBBoundsStamp++;
+    const bounds = super.doUpdateAABBBounds();
+    return this.parent && this.parent.addChildUpdateBoundTag(), this._emitCustomEvent("AAABBBoundsChange"), bounds;
+  }
+  clearUpdateBoundTag() {
+    this._updateTag &= UpdateTag.CLEAR_BOUNDS, this._childUpdateTag &= UpdateTag.CLEAR_BOUNDS;
+  }
+  addUpdateBoundTag() {
+    this._updateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag();
+  }
+  addChildUpdateBoundTag() {
+    this._childUpdateTag & UpdateTag.UPDATE_BOUNDS || (this._childUpdateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag());
+  }
+  getTheme() {
+    return this.theme.getTheme(this);
+  }
+  incrementalAppendChild(node) {
+    const data = super.appendChild(node);
+    return data && this.syncChildSharedStateTreeBinding(data), this.addUpdateBoundTag(), this.getGraphicService().onAddIncremental(node, this, this.stage), data;
+  }
+  incrementalClearChild() {
+    super.removeAllChild(), this.addUpdateBoundTag(), this.getGraphicService().onClearIncremental(this, this.stage);
+  }
+  _updateChildToStage(child) {
+    return child && this.syncChildSharedStateTreeBinding(child), this.addUpdateBoundTag(), child;
+  }
+  appendChild(node, addStage = !0) {
+    const data = super.appendChild(node);
+    return data && addStage && this.syncChildSharedStateTreeBinding(data), this.addUpdateBoundTag(), data;
+  }
+  insertBefore(newNode, referenceNode) {
+    return this._updateChildToStage(super.insertBefore(newNode, referenceNode));
+  }
+  insertAfter(newNode, referenceNode) {
+    return this._updateChildToStage(super.insertAfter(newNode, referenceNode));
+  }
+  insertInto(newNode, idx) {
+    return this._updateChildToStage(super.insertInto(newNode, idx));
+  }
+  removeChild(child, highPerformance = !1) {
+    const data = super.removeChild(child);
+    return data ? highPerformance ? (child.detachStageForRelease(), data) : (this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data) : data;
+  }
+  removeAllChild(deep = !1) {
+    const children = this.children.slice();
+    this.forEachChildren(child => {
+      this.getGraphicService().onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
+    }), super.removeAllChild(), children.forEach(child => {
+      child.setStage(null, null);
+    }), this.addUpdateBoundTag();
+  }
+  setStage(stage, layer) {
+    var _a, _b, _c, _d, _e, _f;
+    const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
+      needsSharedStateTreeSync = this.hasSharedStateDefinitions() || this.sharedStateScope || (null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty;
+    if (this.stage !== stage) return this.stage = stage, this.layer = layer, needsSharedStateTreeSync && (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_f = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _f || _f.call(graphicService, this, stage), void this.notifyChildrenSharedStateTreeChanged();
+    const layerChanged = this.layer !== layer;
+    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.notifyChildrenSharedStateTreeChanged();
+  }
+  addUpdatePositionTag() {
+    super.addUpdatePositionTag(), this.forEachChildren(g => {
+      g.isContainer && g.addUpdateGlobalPositionTag();
+    });
+  }
+  addUpdateGlobalPositionTag() {
+    super.addUpdateGlobalPositionTag(), this.forEachChildren(g => {
+      g.isContainer && g.addUpdateGlobalPositionTag();
+    });
+  }
+  tryUpdateGlobalTransMatrix(clearTag = !0) {
+    if (this.shouldUpdateGlobalMatrix()) {
+      if (this._globalTransMatrix) {
+        if (this.parent) {
+          const m = this.parent.globalTransMatrix;
+          this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
+        }
+      } else this._globalTransMatrix = this.parent ? this.parent.globalTransMatrix.clone() : this.transMatrix.clone();
+      this.doUpdateGlobalMatrix(), clearTag && this.clearUpdateGlobalPositionTag();
+    }
+    return this._globalTransMatrix;
+  }
+  shouldUpdateGlobalMatrix() {
+    return !!(this._updateTag & UpdateTag.UPDATE_GLOBAL_MATRIX);
+  }
+  _getChildByName(name, deep) {
+    return this.find(node => node.name === name, deep);
+  }
+  createOrUpdateChild(graphicName, attributes, graphicType) {
+    let graphic = this._getChildByName(graphicName);
+    return graphic ? graphic.setAttributes(attributes) : (graphic = application.graphicService.creator[graphicType](attributes), graphic.name = graphicName, this.add(graphic)), graphic;
+  }
+  clone() {
+    return new Group(Object.assign({}, this.attribute));
+  }
+  getNoWorkAnimateAttr() {
+    return Group.NOWORK_ANIMATE_ATTR;
+  }
+  release(all) {
+    all && this.forEachChildren(g => {
+      g.release(all);
+    }), super.release();
+  }
+  detachStageForRelease() {
+    super.detachStageForRelease(), this.sharedStateScope = void 0, this.forEachChildren(item => {
+      item.detachStageForRelease();
+    });
+  }
+  ensureSharedStateScopeBound() {
+    var _a, _b, _c;
+    if (!this.hasSharedStateDefinitions()) return void (this.sharedStateScope = void 0);
+    const parentScope = null !== (_b = null === (_a = this.parent) || void 0 === _a ? void 0 : _a.sharedStateScope) && void 0 !== _b ? _b : null === (_c = this.stage) || void 0 === _c ? void 0 : _c.rootSharedStateScope;
+    this.sharedStateScope ? (this.sharedStateScope.ownerStage = this.stage, setSharedStateScopeParent(this.sharedStateScope, parentScope), this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions && setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions)) : this.sharedStateScope = createGroupSharedStateScope(this, parentScope, 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;
+    this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)), this.notifyChildrenSharedStateTreeChanged()) : this.setStage(stage, layer);
+  }
+}
+Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
+function createGroup(attributes) {
+  return new Group(attributes);
+}
+
+const GROUP_ATTRIBUTES = [
+    'x',
+    'y',
+    'dx',
+    'dy',
+    'scaleX',
+    'scaleY',
+    'angle',
+    'anchor',
+    'postMatrix',
+    'visible',
+    'clip',
+    'pickable',
+    'childrenPickable',
+    'zIndex',
+    'cursor'
+];
+class AbstractComponent extends Group {
+    constructor(attributes, options) {
+        super(attributes);
+        this._skipRenderAttributes = GROUP_ATTRIBUTES;
+        if (options === null || options === void 0 ? void 0 : options.mode) {
+            this.mode = options.mode;
+            this.setMode(options.mode);
+        }
+        if (options === null || options === void 0 ? void 0 : options.skipDefault) {
+            this.skipDefault = true;
+        }
+        this.setTheme({
+            common: {
+                strokeBoundsBuffer: 0
+            }
+        });
+        this.attribute = attributes;
+        this.onSetStage((_, stage) => {
+            if (!stage) {
+                return;
+            }
+            this.render();
+            this.bindEvents();
+        });
+    }
+    setAttribute(key, value, forceUpdateTag, context) {
+        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({ [key]: value }, this.attribute, key, context);
+        if (params) {
+            return this._setAttributes(params, forceUpdateTag);
+        }
+        if (isPlainObject$2(this.attribute[key]) &&
+            isPlainObject$2(value) &&
+            !isFunction(this.attribute[key]) &&
+            !isFunction(value)) {
+            merge(this.attribute[key], value);
+        }
+        else {
+            this.attribute[key] = value;
+        }
+        if (!this._skipRenderAttributes.includes(key)) {
+            this.render();
+        }
+        this.valid = this.isValid();
+        if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTag(key))) {
+            this.addUpdateShapeAndBoundsTag();
+        }
+        else {
+            this.addUpdateBoundTag();
+        }
+        this.addUpdatePositionTag();
+        this.onAttributeUpdate();
+    }
+    setAttributes(params, forceUpdateTag, context) {
+        params =
+            (this.onBeforeAttributeUpdate &&
+                this.onBeforeAttributeUpdate(params, this.attribute, null, context)) ||
+                params;
+        return this._setAttributes(params, forceUpdateTag);
+    }
+    _setAttributes(params, forceUpdateTag) {
+        const keys = Object.keys(params);
+        this._mergeAttributes(params, keys);
+        if (!keys.every(key => this._skipRenderAttributes.includes(key))) {
+            this.render();
+        }
+        this.valid = this.isValid();
+        if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTags(keys))) {
+            this.addUpdateShapeAndBoundsTag();
+        }
+        else {
+            this.addUpdateBoundTag();
+        }
+        this.addUpdatePositionTag();
+        this.onAttributeUpdate();
+    }
+    _mergeAttributes(params, keys) {
+        if (isNil(keys)) {
+            keys = Object.keys(params);
+        }
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (isPlainObject$2(this.attribute[key]) && !isFunction(this.attribute[key]) && !isFunction(params[key])) {
+                merge(this.attribute[key], params[key]);
+            }
+            else {
+                this.attribute[key] = params[key];
+            }
+        }
+    }
+    bindEvents() {
+    }
+    _getNodeId(id) {
+        var _a;
+        return `${(_a = this.id) !== null && _a !== void 0 ? _a : this._uid}-${this.name}-${id}`;
+    }
+    _dispatchEvent(eventName, details) {
+        var _a;
+        const changeEvent = new CustomEvent(eventName, details);
+        changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
+        this.dispatchEvent(changeEvent);
+    }
+    eventPosToStagePos(e) {
+        var _a, _b;
+        const result = { x: 0, y: 0 };
+        const stagePoints = (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
+        this.globalTransMatrix.transformPoint(stagePoints, result);
+        return result;
+    }
+}
+
+class Hook {
+  constructor(args, name) {
+    this._args = args, this.name = name, this.taps = [];
+  }
+  tap(options, fn) {
+    this._tap("sync", options, fn);
+  }
+  unTap(options, fn) {
+    const name = "string" == typeof options ? options.trim() : options.name;
+    name && (this.taps = this.taps.filter(tap => !(tap.name === name && (!fn || tap.fn === fn))));
+  }
+  _parseOptions(type, options, fn) {
+    let _options;
+    if ("string" == typeof options) _options = {
+      name: options.trim()
+    };else if ("object" != typeof options || null === options) throw new Error("Invalid tap options");
+    if ("string" != typeof _options.name || "" === _options.name) throw new Error("Missing name for tap");
+    return _options = Object.assign({
+      type: type,
+      fn: fn
+    }, _options), _options;
+  }
+  _tap(type, options, fn) {
+    this._insert(this._parseOptions(type, options, fn));
+  }
+  _insert(item) {
+    let before;
+    "string" == typeof item.before ? before = new Set([item.before]) : Array.isArray(item.before) && (before = new Set(item.before));
+    let stage = 0;
+    "number" == typeof item.stage && (stage = item.stage);
+    let i = this.taps.length;
+    for (; i > 0;) {
+      i--;
+      const x = this.taps[i];
+      this.taps[i + 1] = x;
+      const xStage = x.stage || 0;
+      if (before) {
+        if (before.has(x.name)) {
+          before.delete(x.name);
+          continue;
+        }
+        if (before.size > 0) continue;
+      }
+      if (!(xStage > stage)) {
+        i++;
+        break;
+      }
+    }
+    this.taps[i] = item;
+  }
+}
+
+class SyncHook extends Hook {
+  call(...args) {
+    this.taps.map(t => t.fn).forEach(cb => cb(...args));
+  }
+}
+
+let idx = 0;
+class PerformanceRAF {
+  constructor() {
+    this.nextAnimationFrameCbs = new Map(), this._rafHandle = null, this.runAnimationFrame = time => {
+      this._rafHandle = null;
+      const cbs = this.nextAnimationFrameCbs;
+      this.nextAnimationFrameCbs = new Map(), cbs.forEach(cb => cb(time));
+    }, this.tryRunAnimationFrameNextFrame = () => {
+      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.size && (this._rafHandle = application.global.getRequestAnimationFrame()(this.runAnimationFrame));
+    };
+  }
+  addAnimationFrameCb(callback) {
+    return this.nextAnimationFrameCbs.set(++idx, callback), this.tryRunAnimationFrameNextFrame(), idx;
+  }
+  removeAnimationFrameCb(index) {
+    return !!this.nextAnimationFrameCbs.has(index) && (this.nextAnimationFrameCbs.delete(index), !0);
+  }
+  wait() {
+    return new Promise(resolve => {
+      this.addAnimationFrameCb(() => resolve());
+    });
+  }
+}
+
+class EventListenerManager {
+  constructor() {
+    this._listenerMap = new Map(), this._eventListenerTransformer = event => event;
+  }
+  setEventListenerTransformer(transformer) {
+    this._eventListenerTransformer = transformer || (event => event);
+  }
+  addEventListener(type, listener, options) {
+    if (!listener) return;
+    const capture = this._resolveCapture(options),
+      once = this._resolveOnce(options),
+      listenerTypeMap = this._getOrCreateListenerTypeMap(type),
+      wrappedMap = this._getOrCreateWrappedMap(listenerTypeMap, listener);
+    if (wrappedMap.has(capture)) return;
+    const wrappedListener = event => {
+      const transformedEvent = this._eventListenerTransformer(event);
+      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent), once && this._deleteListenerRecord(type, listener, capture);
+    };
+    wrappedMap.set(capture, {
+      wrappedListener: wrappedListener,
+      options: options
+    }), this._nativeAddEventListener(type, wrappedListener, options);
+  }
+  removeEventListener(type, listener, options) {
+    var _a, _b;
+    if (!listener) return;
+    const capture = this._resolveCapture(options),
+      wrappedRecord = null === (_b = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener)) || void 0 === _b ? void 0 : _b.get(capture);
+    wrappedRecord && (this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture), this._deleteListenerRecord(type, listener, capture));
+  }
+  dispatchEvent(event) {
+    return this._nativeDispatchEvent(event);
+  }
+  clearAllEventListeners() {
+    this._listenerMap.forEach((listenerMap, type) => {
+      listenerMap.forEach(wrappedMap => {
+        wrappedMap.forEach((wrappedRecord, capture) => {
+          this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture);
+        });
+      });
+    }), this._listenerMap.clear();
+  }
+  _resolveCapture(options) {
+    return "boolean" == typeof options ? options : !!(null == options ? void 0 : options.capture);
+  }
+  _resolveOnce(options) {
+    return "object" == typeof options && !!(null == options ? void 0 : options.once);
+  }
+  _getOrCreateListenerTypeMap(type) {
+    let listenerTypeMap = this._listenerMap.get(type);
+    return listenerTypeMap || (listenerTypeMap = new Map(), this._listenerMap.set(type, listenerTypeMap)), listenerTypeMap;
+  }
+  _getOrCreateWrappedMap(listenerTypeMap, listener) {
+    let wrappedMap = listenerTypeMap.get(listener);
+    return wrappedMap || (wrappedMap = new Map(), listenerTypeMap.set(listener, wrappedMap)), wrappedMap;
+  }
+  _deleteListenerRecord(type, listener, capture) {
+    const listenerTypeMap = this._listenerMap.get(type);
+    if (!listenerTypeMap) return;
+    const wrappedMap = listenerTypeMap.get(listener);
+    wrappedMap && (wrappedMap.delete(capture), 0 === wrappedMap.size && listenerTypeMap.delete(listener), 0 === listenerTypeMap.size && this._listenerMap.delete(type));
+  }
+  _nativeAddEventListener(type, listener, options) {
+    throw new Error("_nativeAddEventListener must be implemented by derived classes");
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    throw new Error("_nativeRemoveEventListener must be implemented by derived classes");
+  }
+  _nativeDispatchEvent(event) {
+    throw new Error("_nativeDispatchEvent must be implemented by derived classes");
+  }
+}
+
+var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      var value;
+      result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+        resolve(value);
+      })).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+class DefaultGlobal extends EventListenerManager {
+  get env() {
+    return this._env;
+  }
+  get isImageAnonymous() {
+    return this._isImageAnonymous;
+  }
+  set isImageAnonymous(isImageAnonymous) {
+    this._isImageAnonymous = isImageAnonymous;
+  }
+  get devicePixelRatio() {
+    return this._env || this.setEnv("browser"), this.envContribution.getDevicePixelRatio();
+  }
+  get supportEvent() {
+    return this._env || this.setEnv("browser"), this.envContribution.supportEvent;
+  }
+  set supportEvent(support) {
+    this._env || this.setEnv("browser"), this.envContribution.supportEvent = support;
+  }
+  get supportsTouchEvents() {
+    return this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents;
+  }
+  set supportsTouchEvents(support) {
+    this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents = support;
+  }
+  get supportsPointerEvents() {
+    return this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents;
+  }
+  set supportsPointerEvents(support) {
+    this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents = support;
+  }
+  get supportsMouseEvents() {
+    return this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents;
+  }
+  set supportsMouseEvents(support) {
+    this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents = support;
+  }
+  get applyStyles() {
+    return this._env || this.setEnv("browser"), this.envContribution.applyStyles;
+  }
+  set applyStyles(support) {
+    this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
+  }
+  constructor(contributions) {
+    super(), this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.eventListenerTransformer = event => event, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+      onSetEnv: new SyncHook(["lastEnv", "env", "global"])
+    }, this.measureTextMethod = "native", this.optimizeVisible = !1;
+  }
+  _nativeAddEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
+  }
+  _nativeDispatchEvent(event) {
+    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
+  }
+  bindContribution(params) {
+    const promiseArr = [];
+    if (this.contributions.getContributions().forEach(contribution => {
+      const data = contribution.configure(this, params);
+      data && data.then && promiseArr.push(data);
+    }), promiseArr.length) return Promise.all(promiseArr);
+  }
+  getDynamicCanvasCount() {
+    return this._env || this.setEnv("browser"), this.envContribution.getDynamicCanvasCount();
+  }
+  getStaticCanvasCount() {
+    return this._env || this.setEnv("browser"), this.envContribution.getStaticCanvasCount();
+  }
+  setEnv(env, params) {
+    if (params && !0 === params.force || this._env !== env) return this.deactiveCurrentEnv(), this.activeEnv(env, params);
+  }
+  deactiveCurrentEnv() {
+    this.envContribution && this.envContribution.release();
+  }
+  activeEnv(env, params) {
+    const lastEnv = this._env;
+    this._env = env;
+    const data = this.bindContribution(params);
+    if (data && data.then) return data.then(() => {
+      this.envParams = params, this.hooks.onSetEnv.call(lastEnv, env, this);
+    });
+    this.envParams = params, this.hooks.onSetEnv.call(lastEnv, env, this);
+  }
+  setActiveEnvContribution(contribution) {
+    this.envContribution = contribution;
+  }
+  createCanvas(params) {
+    return this._env || this.setEnv("browser"), this.envContribution.createCanvas(params);
+  }
+  createOffscreenCanvas(params) {
+    return this._env || this.setEnv("browser"), this.envContribution.createOffscreenCanvas(params);
+  }
+  releaseCanvas(canvas) {
+    return this._env || this.setEnv("browser"), this.envContribution.releaseCanvas(canvas);
+  }
+  getRequestAnimationFrame() {
+    return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
+  }
+  getSpecifiedRequestAnimationFrame(id) {
+    this._env || this.setEnv("browser"), this._performanceRAFList[id] || (this._performanceRAFList[id] = new PerformanceRAF());
+    const performanceRAF = this._performanceRAFList[id];
+    return callback => performanceRAF.addAnimationFrameCb(callback);
+  }
+  getSpecifiedPerformanceRAF(id) {
+    return this._env || this.setEnv("browser"), this._performanceRAFList[id] || (this._performanceRAFList[id] = new PerformanceRAF()), this._performanceRAFList[id];
+  }
+  getSpecifiedCancelAnimationFrame(id) {
+    if (this._env || this.setEnv("browser"), !this._performanceRAFList[id]) return () => !1;
+    const performanceRAF = this._performanceRAFList[id];
+    return handle => performanceRAF.removeAnimationFrameCb(handle);
+  }
+  getCancelAnimationFrame() {
+    return this._env || this.setEnv("browser"), this.envContribution.getCancelAnimationFrame();
+  }
+  getElementById(str) {
+    return this._env || this.setEnv("browser"), this.envContribution.getElementById ? this.envContribution.getElementById(str) : null;
+  }
+  getRootElement() {
+    return this._env || this.setEnv("browser"), this.envContribution.getRootElement ? this.envContribution.getRootElement() : null;
+  }
+  getDocument() {
+    return this._env || this.setEnv("browser"), this.envContribution.getDocument ? this.envContribution.getDocument() : null;
+  }
+  mapToCanvasPoint(event, domElement) {
+    return this._env || this.setEnv("browser"), this.envContribution.mapToCanvasPoint ? this.envContribution.mapToCanvasPoint(event, domElement) : null;
+  }
+  loadImage(url) {
+    return this._env || this.setEnv("browser"), this.envContribution.loadImage(url);
+  }
+  loadSvg(str) {
+    return this._env || this.setEnv("browser"), this.envContribution.loadSvg(str);
+  }
+  loadJson(url) {
+    return this._env || this.setEnv("browser"), this.envContribution.loadJson(url);
+  }
+  loadArrayBuffer(url) {
+    return this._env || this.setEnv("browser"), this.envContribution.loadArrayBuffer(url);
+  }
+  loadBlob(url) {
+    return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
+  }
+  loadFont(name, source, descriptors) {
+    return __awaiter$3(this, void 0, void 0, function* () {
+      return this._env || this.setEnv("browser"), this.envContribution.loadFont(name, source, descriptors);
+    });
+  }
+  isChrome() {
+    return null != this._isChrome || (this._env || this.setEnv("browser"), this._isChrome = "browser" === this._env && navigator.userAgent.indexOf("Chrome") > -1), this._isChrome;
+  }
+  isSafari() {
+    return null != this._isSafari || (this._env || this.setEnv("browser"), this._isSafari = "browser" === this._env && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)), this._isSafari;
+  }
+  getNativeAABBBounds(dom) {
+    return this._env || this.setEnv("browser"), this.envContribution.getNativeAABBBounds(dom);
+  }
+  removeDom(dom) {
+    return this._env || this.setEnv("browser"), this.envContribution.removeDom(dom);
+  }
+  createDom(params) {
+    return this._env || this.setEnv("browser"), this.envContribution.createDom(params);
+  }
+  updateDom(dom, params) {
+    return this._env || this.setEnv("browser"), this.envContribution.updateDom(dom, params);
+  }
+  getElementTop(dom, baseWindow = !1) {
+    return this._env || this.setEnv("browser"), this.envContribution.getElementTop(dom, baseWindow);
+  }
+  getElementLeft(dom, baseWindow = !1) {
+    return this._env || this.setEnv("browser"), this.envContribution.getElementLeft(dom, baseWindow);
+  }
+  getElementTopLeft(dom, baseWindow = !1) {
+    return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
+  }
+  isMacOS() {
+    return this._env || this.setEnv("browser"), this.envContribution.isMacOS();
+  }
+  copyToClipBoard(text) {
+    return this._env || this.setEnv("browser"), this.envContribution.copyToClipBoard(text);
+  }
+}
+
 const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
   const {
     outerBorder: outerBorder,
@@ -9565,243 +9419,6 @@ function createArc(attributes) {
   return new Arc(attributes);
 }
 
-var GroupUpdateAABBBoundsMode;
-!function (GroupUpdateAABBBoundsMode) {
-  GroupUpdateAABBBoundsMode[GroupUpdateAABBBoundsMode.LESS_GROUP = 0] = "LESS_GROUP", GroupUpdateAABBBoundsMode[GroupUpdateAABBBoundsMode.MORE_GROUP = 1] = "MORE_GROUP";
-}(GroupUpdateAABBBoundsMode || (GroupUpdateAABBBoundsMode = {}));
-class Group extends Graphic {
-  constructor(params) {
-    super(params), this.type = "group", this.parent = null, this.isContainer = !0, this._hasSharedStateDefinitions = !1, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
-  }
-  get sharedStateDefinitions() {
-    return this._sharedStateDefinitions;
-  }
-  set sharedStateDefinitions(value) {
-    if (this._sharedStateDefinitions === value) return;
-    const previousScope = this.sharedStateScope;
-    this._sharedStateDefinitions = value, this._hasSharedStateDefinitions = !!value && Object.keys(value).length > 0, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)), previousScope !== this.sharedStateScope && this.notifyChildrenSharedStateTreeChanged();
-  }
-  setMode(mode) {
-    "3d" === mode ? this.set3dMode() : this.set2dMode();
-  }
-  set3dMode() {
-    this.in3dMode = !0;
-  }
-  set2dMode() {
-    this.in3dMode = !1;
-  }
-  setTheme(t) {
-    return this.theme || (this.theme = new Theme()), this.theme.setTheme(t, this);
-  }
-  createTheme() {
-    this.theme || (this.theme = new Theme());
-  }
-  visibleAll(visible) {
-    this.setAttribute("visible", visible), this.forEachChildren(item => {
-      item.isContainer && item.visibleAll ? item.visibleAll(visible) : item.setAttribute("visible", visible);
-    });
-  }
-  hideAll() {
-    this.visibleAll(!1);
-  }
-  showAll() {
-    this.visibleAll(!0);
-  }
-  containsPoint(x, y, mode) {
-    if (mode === IContainPointMode.GLOBAL) {
-      const point = new Point(x, y);
-      return this.parent && this.parent.globalTransMatrix.transformPoint(point, point), this.AABBBounds.contains(point.x, point.y);
-    }
-    return this.AABBBounds.contains(x, y);
-  }
-  shouldUpdateAABBBounds() {
-    return !!super.shouldUpdateAABBBounds() || !!(this._childUpdateTag & UpdateTag.UPDATE_BOUNDS);
-  }
-  tryUpdateAABBBounds() {
-    if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
-    this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
-    const selfChange = this.shouldSelfChangeUpdateAABBBounds(),
-      bounds = this.doUpdateAABBBounds();
-    return this.addUpdateLayoutTag(), this.getGraphicService().afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
-  }
-  doUpdateLocalMatrix() {
-    const {
-      x = DefaultTransform.x,
-      y = DefaultTransform.y,
-      dx = DefaultTransform.dx,
-      dy = DefaultTransform.dy,
-      scaleX = DefaultTransform.scaleX,
-      scaleY = DefaultTransform.scaleY,
-      angle = DefaultTransform.angle,
-      postMatrix: postMatrix
-    } = this.attribute;
-    if (0 !== x || 0 !== y || 0 !== dx || 0 !== dy || 1 !== scaleX || 1 !== scaleY || 0 !== angle || postMatrix) return super.doUpdateLocalMatrix();
-    this._transMatrix.reset();
-  }
-  getGraphicTheme() {
-    return getTheme(this).group;
-  }
-  updateAABBBounds(attribute, groupTheme, aabbBounds) {
-    const originalAABBBounds = aabbBounds;
-    aabbBounds = aabbBounds.clone();
-    const {
-      width: width,
-      height: height,
-      path: path,
-      clip = groupTheme.clip
-    } = attribute;
-    if (path && path.length ? path.forEach(g => {
-      aabbBounds.union(g.AABBBounds);
-    }) : null != width && null != height && aabbBounds.set(0, 0, Math.max(0, width), Math.max(0, height)), !clip) {
-      this.forEachChildren(node => {
-        aabbBounds.union(node.AABBBounds);
-      });
-      const {
-        scrollX = 0,
-        scrollY = 0
-      } = attribute;
-      aabbBounds.translate(scrollX, scrollY);
-    }
-    return application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, this), originalAABBBounds.copy(aabbBounds), originalAABBBounds;
-  }
-  doUpdateAABBBounds() {
-    this.updateAABBBoundsStamp++;
-    const bounds = super.doUpdateAABBBounds();
-    return this.parent && this.parent.addChildUpdateBoundTag(), this._emitCustomEvent("AAABBBoundsChange"), bounds;
-  }
-  clearUpdateBoundTag() {
-    this._updateTag &= UpdateTag.CLEAR_BOUNDS, this._childUpdateTag &= UpdateTag.CLEAR_BOUNDS;
-  }
-  addUpdateBoundTag() {
-    this._updateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag();
-  }
-  addChildUpdateBoundTag() {
-    this._childUpdateTag & UpdateTag.UPDATE_BOUNDS || (this._childUpdateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag());
-  }
-  getTheme() {
-    return this.theme.getTheme(this);
-  }
-  incrementalAppendChild(node) {
-    const data = super.appendChild(node);
-    return data && (!this.stage || data.stage === this.stage && data.layer === this.layer ? data.onParentSharedStateTreeChanged && data.onParentSharedStateTreeChanged(this.stage, this.layer) : data.setStage(this.stage, this.layer)), this.addUpdateBoundTag(), this.getGraphicService().onAddIncremental(node, this, this.stage), data;
-  }
-  incrementalClearChild() {
-    super.removeAllChild(), this.addUpdateBoundTag(), this.getGraphicService().onClearIncremental(this, this.stage);
-  }
-  _updateChildToStage(child) {
-    return child && (!this.stage || child.stage === this.stage && child.layer === this.layer ? child.onParentSharedStateTreeChanged && child.onParentSharedStateTreeChanged(this.stage, this.layer) : child.setStage(this.stage, this.layer)), this.addUpdateBoundTag(), child;
-  }
-  appendChild(node, addStage = !0) {
-    const data = super.appendChild(node);
-    return data && (addStage && this.stage && (data.stage !== this.stage || data.layer !== this.layer) ? data.setStage(this.stage, this.layer) : data.onParentSharedStateTreeChanged && data.onParentSharedStateTreeChanged(this.stage, this.layer)), this.addUpdateBoundTag(), data;
-  }
-  insertBefore(newNode, referenceNode) {
-    return this._updateChildToStage(super.insertBefore(newNode, referenceNode));
-  }
-  insertAfter(newNode, referenceNode) {
-    return this._updateChildToStage(super.insertAfter(newNode, referenceNode));
-  }
-  insertInto(newNode, idx) {
-    return this._updateChildToStage(super.insertInto(newNode, idx));
-  }
-  removeChild(child, highPerformance = !1) {
-    var _a;
-    const data = super.removeChild(child);
-    return data ? highPerformance ? (null === (_a = child.detachStageForRelease) || void 0 === _a || _a.call(child), data) : (this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data) : data;
-  }
-  removeAllChild(deep = !1) {
-    const children = this.children.slice();
-    this.forEachChildren(child => {
-      this.getGraphicService().onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
-    }), super.removeAllChild(), children.forEach(child => {
-      child.setStage(null, null);
-    }), this.addUpdateBoundTag();
-  }
-  setStage(stage, layer) {
-    var _a, _b, _c, _d, _e, _f;
-    const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
-      needsSharedStateTreeSync = this._hasSharedStateDefinitions || this.sharedStateScope || (null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty;
-    if (this.stage !== stage) return this.stage = stage, this.layer = layer, needsSharedStateTreeSync && (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_f = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _f || _f.call(graphicService, this, stage), void this.forEachChildren(item => {
-      item.setStage(stage, this.layer);
-    });
-    const layerChanged = this.layer !== layer;
-    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.forEachChildren(item => {
-      item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(stage, this.layer);
-    });
-  }
-  addUpdatePositionTag() {
-    super.addUpdatePositionTag(), this.forEachChildren(g => {
-      g.isContainer && g.addUpdateGlobalPositionTag();
-    });
-  }
-  addUpdateGlobalPositionTag() {
-    super.addUpdateGlobalPositionTag(), this.forEachChildren(g => {
-      g.isContainer && g.addUpdateGlobalPositionTag();
-    });
-  }
-  tryUpdateGlobalTransMatrix(clearTag = !0) {
-    if (this.shouldUpdateGlobalMatrix()) {
-      if (this._globalTransMatrix) {
-        if (this.parent) {
-          const m = this.parent.globalTransMatrix;
-          this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
-        }
-      } else this._globalTransMatrix = this.parent ? this.parent.globalTransMatrix.clone() : this.transMatrix.clone();
-      this.doUpdateGlobalMatrix(), clearTag && this.clearUpdateGlobalPositionTag();
-    }
-    return this._globalTransMatrix;
-  }
-  shouldUpdateGlobalMatrix() {
-    return !!(this._updateTag & UpdateTag.UPDATE_GLOBAL_MATRIX);
-  }
-  _getChildByName(name, deep) {
-    return this.find(node => node.name === name, deep);
-  }
-  createOrUpdateChild(graphicName, attributes, graphicType) {
-    let graphic = this._getChildByName(graphicName);
-    return graphic ? graphic.setAttributes(attributes) : (graphic = application.graphicService.creator[graphicType](attributes), graphic.name = graphicName, this.add(graphic)), graphic;
-  }
-  clone() {
-    return new Group(Object.assign({}, this.attribute));
-  }
-  getNoWorkAnimateAttr() {
-    return Group.NOWORK_ANIMATE_ATTR;
-  }
-  release(all) {
-    all && this.forEachChildren(g => {
-      g.release(all);
-    }), super.release();
-  }
-  detachStageForRelease() {
-    super.detachStageForRelease(), this.sharedStateScope = void 0, this.forEachChildren(item => {
-      var _a;
-      null === (_a = item.detachStageForRelease) || void 0 === _a || _a.call(item);
-    });
-  }
-  ensureSharedStateScopeBound() {
-    var _a, _b, _c;
-    if (!this.hasSharedStateDefinitions()) return void (this.sharedStateScope = void 0);
-    const parentScope = null !== (_b = null === (_a = this.parent) || void 0 === _a ? void 0 : _a.sharedStateScope) && void 0 !== _b ? _b : null === (_c = this.stage) || void 0 === _c ? void 0 : _c.rootSharedStateScope;
-    this.sharedStateScope ? (this.sharedStateScope.ownerGroup = this, this.sharedStateScope.ownerStage = this.stage, setSharedStateScopeParent(this.sharedStateScope, parentScope), this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions && setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions)) : this.sharedStateScope = createGroupSharedStateScope(this, parentScope, this._sharedStateDefinitions);
-  }
-  hasSharedStateDefinitions() {
-    return this._hasSharedStateDefinitions;
-  }
-  notifyChildrenSharedStateTreeChanged() {
-    this.forEachChildren(item => {
-      item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(this.stage, this.layer);
-    });
-  }
-  onParentSharedStateTreeChanged(stage, layer) {
-    var _a;
-    this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)), this.notifyChildrenSharedStateTreeChanged()) : this.setStage(stage, layer);
-  }
-}
-Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
-function createGroup(attributes) {
-  return new Group(attributes);
-}
-
 const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
 class Polygon extends Graphic {
   constructor(params) {
@@ -11124,8 +10741,8 @@ const EMPTY_AUTO_ENABLE_PROVIDER = {
 };
 class DefaultPluginService {
   constructor(autoEnablePlugins = EMPTY_AUTO_ENABLE_PROVIDER, deps = {}) {
-    var _a, _b, _c;
-    this.autoEnablePlugins = autoEnablePlugins, this.onStartupFinishedPlugin = [], this.onRegisterPlugin = [], this.actived = !1, this.pluginRegistry = null !== (_a = deps.pluginRegistry) && void 0 !== _a ? _a : new PluginRegistry(), this.autoEnablePlugins = null !== (_c = null !== (_b = deps.autoEnablePlugins) && void 0 !== _b ? _b : this.autoEnablePlugins) && void 0 !== _c ? _c : EMPTY_AUTO_ENABLE_PROVIDER;
+    var _a;
+    this.autoEnablePlugins = autoEnablePlugins, this.onStartupFinishedPlugin = [], this.onRegisterPlugin = [], this.actived = !1, this.pluginRegistry = null !== (_a = deps.pluginRegistry) && void 0 !== _a ? _a : new PluginRegistry();
   }
   active(stage, params) {
     this.stage = stage, this.actived = !0;
@@ -15371,133 +14988,6 @@ function registerWrapTextGraphic() {
   registerGraphic("wrapText", createWrapText);
 }
 
-const GROUP_ATTRIBUTES = [
-    'x',
-    'y',
-    'dx',
-    'dy',
-    'scaleX',
-    'scaleY',
-    'angle',
-    'anchor',
-    'postMatrix',
-    'visible',
-    'clip',
-    'pickable',
-    'childrenPickable',
-    'zIndex',
-    'cursor'
-];
-class AbstractComponent extends Group {
-    constructor(attributes, options) {
-        super(attributes);
-        this._skipRenderAttributes = GROUP_ATTRIBUTES;
-        if (options === null || options === void 0 ? void 0 : options.mode) {
-            this.mode = options.mode;
-            this.setMode(options.mode);
-        }
-        if (options === null || options === void 0 ? void 0 : options.skipDefault) {
-            this.skipDefault = true;
-        }
-        this.setTheme({
-            common: {
-                strokeBoundsBuffer: 0
-            }
-        });
-        this.attribute = attributes;
-        this.onSetStage((_, stage) => {
-            if (!stage) {
-                return;
-            }
-            this.render();
-            this.bindEvents();
-        });
-    }
-    setAttribute(key, value, forceUpdateTag, context) {
-        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({ [key]: value }, this.attribute, key, context);
-        if (params) {
-            return this._setAttributes(params, forceUpdateTag);
-        }
-        if (isPlainObject$3(this.attribute[key]) &&
-            isPlainObject$3(value) &&
-            !isFunction(this.attribute[key]) &&
-            !isFunction(value)) {
-            merge(this.attribute[key], value);
-        }
-        else {
-            this.attribute[key] = value;
-        }
-        if (!this._skipRenderAttributes.includes(key)) {
-            this.render();
-        }
-        this.valid = this.isValid();
-        if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTag(key))) {
-            this.addUpdateShapeAndBoundsTag();
-        }
-        else {
-            this.addUpdateBoundTag();
-        }
-        this.addUpdatePositionTag();
-        this.onAttributeUpdate();
-    }
-    setAttributes(params, forceUpdateTag, context) {
-        params =
-            (this.onBeforeAttributeUpdate &&
-                this.onBeforeAttributeUpdate(params, this.attribute, null, context)) ||
-                params;
-        return this._setAttributes(params, forceUpdateTag);
-    }
-    _setAttributes(params, forceUpdateTag) {
-        const keys = Object.keys(params);
-        this._mergeAttributes(params, keys);
-        if (!keys.every(key => this._skipRenderAttributes.includes(key))) {
-            this.render();
-        }
-        this.valid = this.isValid();
-        if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTags(keys))) {
-            this.addUpdateShapeAndBoundsTag();
-        }
-        else {
-            this.addUpdateBoundTag();
-        }
-        this.addUpdatePositionTag();
-        this.onAttributeUpdate();
-    }
-    _mergeAttributes(params, keys) {
-        if (isNil(keys)) {
-            keys = Object.keys(params);
-        }
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (isPlainObject$3(this.attribute[key]) && !isFunction(this.attribute[key]) && !isFunction(params[key])) {
-                merge(this.attribute[key], params[key]);
-            }
-            else {
-                this.attribute[key] = params[key];
-            }
-        }
-    }
-    bindEvents() {
-    }
-    _getNodeId(id) {
-        var _a;
-        return `${(_a = this.id) !== null && _a !== void 0 ? _a : this._uid}-${this.name}-${id}`;
-    }
-    _dispatchEvent(eventName, details) {
-        var _a;
-        const changeEvent = new CustomEvent(eventName, details);
-        changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-        this.dispatchEvent(changeEvent);
-    }
-    eventPosToStagePos(e) {
-        var _a, _b;
-        const result = { x: 0, y: 0 };
-        const stagePoints = (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
-        this.globalTransMatrix.transformPoint(stagePoints, result);
-        return result;
-    }
-}
-
 function _registerGroup() {
   _registerGroup.__loaded || (_registerGroup.__loaded = !0, registerGroupGraphic());
 }
@@ -20252,9 +19742,8 @@ class AnimateExecutor {
   }
   syncFinalAttrsFromContext(graphic) {
     var _a;
-    const finalAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs,
-      setFinalAttributes = graphic.setFinalAttributes;
-    finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(graphic, finalAttrs);
+    const finalAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs;
+    finalAttrs && graphic.setFinalAttributes(finalAttrs);
   }
   executeItem(params, graphic, index = 0, count = 1) {
     if (Array.isArray(params)) {
@@ -20572,11 +20061,9 @@ function getAnimationContext(type) {
   }
 }
 function applyAnimationTransientAttributes(target, attributes, type = AttributeUpdateType.ANIMATE_UPDATE) {
-  var _a;
   if (!attributes) return;
-  const context = getAnimationContext(type),
-    transientTarget = target;
-  "function" != typeof transientTarget.applyAnimationTransientAttributes ? "function" != typeof transientTarget.applyTransientAttributes ? "function" != typeof transientTarget.setAttributesAndPreventAnimate ? (transientTarget.attribute || (transientTarget.attribute = {}), Object.assign(transientTarget.attribute, attributes), null === (_a = transientTarget.onAttributeUpdate) || void 0 === _a || _a.call(transientTarget, context)) : transientTarget.setAttributesAndPreventAnimate(attributes, !1, context) : transientTarget.applyTransientAttributes(attributes, !1, context) : transientTarget.applyAnimationTransientAttributes(attributes, !1, context);
+  const context = getAnimationContext(type);
+  target.applyAnimationTransientAttributes(attributes, !1, context);
 }
 
 function noop() {}
@@ -20588,8 +20075,7 @@ class Step {
   constructor(type, props, duration, easing) {
     var _a;
     this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
-      var _a, _b, _c, _d, _e, _f;
-      null === (_b = (_a = this.target).addUpdateShapeAndBoundsTag) || void 0 === _b || _b.call(_a), null === (_d = (_c = this.target).addUpdatePositionTag) || void 0 === _d || _d.call(_c), null === (_f = (_e = this.target).onAttributeUpdate) || void 0 === _f || _f.call(_e, {
+      this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag(), this.target.onAttributeUpdate({
         type: AttributeUpdateType.ANIMATE_UPDATE
       });
     }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : null !== (_a = Easing[easing]) && void 0 !== _a ? _a : Easing.linear : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
@@ -20662,15 +20148,10 @@ class Step {
     }
   }
   tryPreventConflict() {
-    var _a, _b;
     const animate = this.animate,
       target = this.target,
-      forEachTrackedAnimate = null !== (_b = null === (_a = target.forEachTrackedAnimate) || void 0 === _a ? void 0 : _a.bind(target)) && void 0 !== _b ? _b : cb => {
-        var _a;
-        null === (_a = target.animates) || void 0 === _a || _a.forEach(cb);
-      },
       propKeys = this.propKeys;
-    forEachTrackedAnimate(a => {
+    target.forEachTrackedAnimate(a => {
       if (a === animate || a.priority > animate.priority || a.priority === 1 / 0) return;
       const fromProps = a.getStartProps();
       let conflictKeys = null;
@@ -21993,7 +21474,7 @@ const getCartesianLabelBounds = (scale, domain, op) => {
     for (let i = 0; i < domain.length; i++) {
         const v = domain[i];
         const str = labelFormatter ? labelFormatter(v) : `${v}`;
-        if (isPlainObject$3(str)) {
+        if (isPlainObject$2(str)) {
             labelBoundsList = undefined;
             break;
         }
@@ -27594,19 +27075,13 @@ class FromTo extends ACustomAnimate {
     super(from, to, duration, easing, params), this.from = null != from ? from : {};
   }
   applyTransientFromAttributes() {
-    var _a, _b;
-    const target = this.target;
-    "function" != typeof target.applyTransientAttributes ? (Object.assign(null !== (_a = target.attribute) && void 0 !== _a ? _a : {}, this.from), null === (_b = target.onAttributeUpdate) || void 0 === _b || _b.call(target, {
-      type: AttributeUpdateType.ANIMATE_START
-    })) : target.applyTransientAttributes(this.from, !1, {
-      type: AttributeUpdateType.ANIMATE_START
-    });
+    applyAnimationTransientAttributes(this.target, this.from, AttributeUpdateType.ANIMATE_START);
   }
   onBind() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     super.onBind(), Object.keys(this.from).forEach(key => {
       null == this.props[key] && (this.props[key] = this.target.getGraphicAttribute(key));
-    }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && (null === (_c = (_b = this.target).applyFinalAttributeToAttribute) || void 0 === _c || _c.call(_b)), !1 !== (null === (_e = null === (_d = this.params) || void 0 === _d ? void 0 : _d.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.applyTransientFromAttributes();
+    }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = null === (_b = this.params) || void 0 === _b ? void 0 : _b.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.applyTransientFromAttributes();
   }
   onFirstRun() {
     this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
@@ -27667,8 +27142,8 @@ class Animate {
   bind(target) {
     this.target = target;
     const trackerTarget = this.target;
-    return "function" == typeof trackerTarget.detachAttributeFromBaseAttributes && trackerTarget.detachAttributeFromBaseAttributes(), "function" == typeof trackerTarget.trackAnimate ? trackerTarget.trackAnimate(this) : (this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this)), this.onRemove(() => {
-      this.stop(), this.__skipRestoreStaticAttributeOnRemove || "function" != typeof trackerTarget.restoreStaticAttribute || trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
+    return trackerTarget.detachAttributeFromBaseAttributes(), trackerTarget.trackAnimate(this), this.onRemove(() => {
+      this.stop(), this.__skipRestoreStaticAttributeOnRemove || trackerTarget.restoreStaticAttribute(), trackerTarget.untrackAnimate(this.id);
     }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
   to(props, duration = 300, easing = "linear") {
@@ -27805,8 +27280,7 @@ class Animate {
     if (nextTime < this._startTime) return void (this.currentTime = nextTime);
     if (nextTime >= this._startTime + this._totalDuration) {
       null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), this.status = AnimateStatus.END;
-      const trackerTarget = this.target;
-      return "function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
+      return this.target.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
     }
     this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
     let cycleTime = nextTime - this._startTime,
@@ -27980,8 +27454,7 @@ class DefaultTicker extends EventEmitter {
 
 class AnimateExtension {
   visitTrackedAnimates(cb) {
-    const target = this;
-    "function" != typeof target.forEachTrackedAnimate ? target.animates && target.animates.forEach(cb) : target.forEachTrackedAnimate(cb);
+    this.forEachTrackedAnimate(cb);
   }
   getAttributes(final = !1) {
     return final && this.finalAttribute ? this.finalAttribute : this.attribute;
@@ -28017,15 +27490,12 @@ class AnimateExtension {
   applyFinalAttributeToAttribute() {
     const finalAttribute = this.getFinalAttribute();
     if (!finalAttribute) return;
-    const target = this;
-    "function" != typeof target.setAttributesAndPreventAnimate ? console.warn("[AnimateExtension] applyFinalAttributeToAttribute requires target.setAttributesAndPreventAnimate() to avoid committing finalAttribute into base attributes.") : target.setAttributesAndPreventAnimate(finalAttribute, !1, {
+    this.setAttributesAndPreventAnimate(finalAttribute, !1, {
       type: AttributeUpdateType.ANIMATE_BIND
     });
   }
   restoreStaticAttribute() {
-    const target = this;
-    if ("function" != typeof target._restoreAttributeFromStaticTruth) return "function" == typeof target.onStop ? (console.warn("[AnimateExtension] restoreStaticAttribute is using deprecated target.onStop(); implement _restoreAttributeFromStaticTruth() for explicit transient restore semantics."), void target.onStop()) : void console.warn("[AnimateExtension] restoreStaticAttribute requires target._restoreAttributeFromStaticTruth() or an equivalent transient restore path.");
-    target._restoreAttributeFromStaticTruth({
+    this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.ANIMATE_END
     });
   }
@@ -36938,6 +36408,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.0-alpha.24";
+const version = "1.1.0-alpha.25";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, installPoptipToApp, installScrollbarToApp, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };