@visactor/vrender-kits 1.1.6-alpha.0 → 1.1.7

package/dist/index.es.js

@@ -4375,18 +4375,21 @@ class GradientParser {
   }
 }
 
-function getScaledStroke(context, width, dpr) {
+function getScaledStrokeWithMatrix(matrix, width, dpr) {
   let strokeWidth = width;
   const {
       a: a,
       b: b,
       c: c,
       d: d
-    } = context.currentMatrix,
+    } = matrix,
     scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
     scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
   return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
 }
+function getScaledStroke(context, width, dpr) {
+  return getScaledStrokeWithMatrix(context.currentMatrix, width, dpr);
+}
 function createColor(context, c, params, offsetX = 0, offsetY = 0) {
   var _a, _b, _c, _d;
   if (!c || !0 === c) return "black";
@@ -6287,7 +6290,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, _inheritedSharedStateScope) {}
+  onParentSharedStateTreeChanged(_stage, _layer) {}
   forEachChildren(cb, reverse = !1) {
     if (reverse) {
       let child = this._lastChild,
@@ -8384,7 +8387,7 @@ function normalizeNoAnimateAttrConfig(config) {
 }
 class StateTransitionOrchestrator {
   analyzeTransition(targetAttrs, hasAnimation, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const plan = {
       targetAttrs: Object.assign({}, targetAttrs),
       animateAttrs: {},
@@ -8393,10 +8396,17 @@ class StateTransitionOrchestrator {
     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,
-      readDefaultAttribute = options.getDefaultAttribute,
+      getDefaultAttribute = options.getDefaultAttribute,
+      readDefaultAttribute = getDefaultAttribute,
+      readStateTransitionDefaultAttribute = null !== (_c = options.getStateTransitionDefaultAttribute) && void 0 !== _c ? _c : getDefaultAttribute,
       shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute,
-      assignTransitionAttr = (key, value) => {
-        if (noWorkAnimateAttr[key]) plan.noAnimateAttrs[key] = value;else if (isClear && void 0 === value) {
+      stateTransitionTargetAttrs = null !== (_d = options.stateTransitionTargetAttrs) && void 0 !== _d ? _d : targetAttrs,
+      assignTransitionAttr = (key, value, isRemovedStateAttr = !1) => {
+        if (noWorkAnimateAttr[key]) plan.noAnimateAttrs[key] = value;else if (isRemovedStateAttr && void 0 === value) {
+          const defaultValue = null == readStateTransitionDefaultAttribute ? void 0 : readStateTransitionDefaultAttribute(key, stateTransitionTargetAttrs);
+          if (void 0 === defaultValue && (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, stateTransitionTargetAttrs))) return;
+          plan.animateAttrs[key] = defaultValue;
+        } else if (isClear && void 0 === value) {
           if (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) return;
           plan.animateAttrs[key] = readDefaultAttribute(key);
         } else plan.animateAttrs[key] = value;
@@ -8408,7 +8418,7 @@ class StateTransitionOrchestrator {
     const extraAnimateAttrs = options.extraAnimateAttrs;
     if (extraAnimateAttrs) for (const key in extraAnimateAttrs) {
       const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetAttrs, key);
-      !Object.prototype.hasOwnProperty.call(extraAnimateAttrs, key) || hasTargetAttr && void 0 !== targetAttrs[key] || assignTransitionAttr(key, extraAnimateAttrs[key]);
+      !Object.prototype.hasOwnProperty.call(extraAnimateAttrs, key) || hasTargetAttr && void 0 !== targetAttrs[key] || assignTransitionAttr(key, extraAnimateAttrs[key], !0);
     }
     return plan;
   }
@@ -8440,9 +8450,11 @@ class StateTransitionOrchestrator {
       noWorkAnimateAttr: graphic.getNoWorkAnimateAttr(),
       isClear: !0,
       getDefaultAttribute: graphic.getDefaultAttribute.bind(graphic),
+      getStateTransitionDefaultAttribute: options.getStateTransitionDefaultAttribute,
       shouldSkipDefaultAttribute: null !== (_a = options.shouldSkipDefaultAttribute) && void 0 !== _a ? _a : graphic.shouldSkipStateTransitionDefaultAttribute.bind(graphic),
       animateConfig: options.animateConfig,
-      extraAnimateAttrs: options.extraAnimateAttrs
+      extraAnimateAttrs: options.extraAnimateAttrs,
+      stateTransitionTargetAttrs: options.stateTransitionTargetAttrs
     });
     return this.applyTransition(graphic, plan, hasAnimation, options);
   }
@@ -8635,17 +8647,14 @@ class GraphicImpl extends Node {
     }
     return null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope;
   }
-  syncSharedStateScopeBinding(nextScope, markDirty = !0) {
+  syncSharedStateScopeBindingFromTree(markDirty = !0) {
     var _a;
+    const nextScope = this.resolveBoundSharedStateScope();
     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);
   }
-  syncSharedStateScopeBindingFromTree(markDirty = !0, inheritedSharedStateScope) {
-    const nextScope = void 0 === inheritedSharedStateScope ? this.resolveBoundSharedStateScope() : null != inheritedSharedStateScope ? inheritedSharedStateScope : void 0;
-    return this.syncSharedStateScopeBinding(nextScope, markDirty);
-  }
-  syncSharedStateScopeBindingOnTreeChange(markDirty = !0, inheritedSharedStateScope) {
+  syncSharedStateScopeBindingOnTreeChange(markDirty = !0) {
     var _a, _b;
-    return !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || this.boundSharedStateScope || (null === (_b = this.registeredActiveScopes) || void 0 === _b ? void 0 : _b.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingFromTree(markDirty, inheritedSharedStateScope);
+    return !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || this.boundSharedStateScope || (null === (_b = this.registeredActiveScopes) || void 0 === _b ? void 0 : _b.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingFromTree(markDirty);
   }
   syncSharedStateActiveRegistrations() {
     var _a;
@@ -8653,7 +8662,6 @@ class GraphicImpl extends Node {
     if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || !this.boundSharedStateScope) return (null == previousScopes ? void 0 : previousScopes.size) && (previousScopes.forEach(scope => {
       scope.subtreeActiveDescendants.delete(this);
     }), previousScopes.clear()), void (this.registeredActiveScopes = void 0);
-    if ((null == previousScopes ? void 0 : previousScopes.size) && this.isSharedStateScopeChainRegistered(previousScopes)) return;
     const nextScopes = new Set(collectSharedStateScopeChain(this.boundSharedStateScope));
     null == previousScopes || previousScopes.forEach(scope => {
       nextScopes.has(scope) || scope.subtreeActiveDescendants.delete(this);
@@ -8661,15 +8669,6 @@ class GraphicImpl extends Node {
       scope.subtreeActiveDescendants.add(this);
     }), this.registeredActiveScopes = nextScopes;
   }
-  isSharedStateScopeChainRegistered(previousScopes) {
-    let scope = this.boundSharedStateScope,
-      scopeCount = 0;
-    for (; scope;) {
-      if (!previousScopes.has(scope)) return !1;
-      scopeCount += 1, scope = scope.parentScope;
-    }
-    return scopeCount === previousScopes.size;
-  }
   clearSharedStateActiveRegistrations() {
     const previousScopes = this.registeredActiveScopes;
     previousScopes && (previousScopes.forEach(scope => {
@@ -8679,8 +8678,8 @@ class GraphicImpl extends Node {
   markSharedStateDirty() {
     this.sharedStateDirty = !0, enqueueGraphicSharedStateRefresh(this.stage, this), scheduleStageSharedStateRefresh(this.stage);
   }
-  onParentSharedStateTreeChanged(stage, layer, inheritedSharedStateScope) {
-    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingOnTreeChange(!0, inheritedSharedStateScope) : this.setStage(stage, layer, inheritedSharedStateScope);
+  onParentSharedStateTreeChanged(stage, layer) {
+    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingOnTreeChange() : this.setStage(stage, layer);
   }
   refreshSharedStateBeforeRender() {
     var _a;
@@ -8730,21 +8729,20 @@ class GraphicImpl extends Node {
     }), snapshot) : snapshot;
   }
   buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
-    const extraAttrs = {};
-    if (!previousResolvedStatePatch) return extraAttrs;
+    if (!previousResolvedStatePatch) return;
     const snapshot = this.buildStaticAttributeSnapshot(),
-      staticTargetAttrs = snapshot;
+      extraAttrs = {};
     return Object.keys(previousResolvedStatePatch).forEach(key => {
       const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
       if (hasTargetAttr && void 0 !== targetStateAttrs[key]) return;
       const assignFallbackAttr = value => {
-        void 0 === value && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs) || (extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value));
+        extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value);
       };
-      if (hasTargetAttr) assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));else if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
-        const snapshotValue = snapshot[key];
-        assignFallbackAttr(void 0 === snapshotValue ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
-      } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
-    }), extraAttrs;
+      hasTargetAttr ? assignFallbackAttr(targetStateAttrs[key]) : Object.prototype.hasOwnProperty.call(snapshot, key) ? assignFallbackAttr(snapshot[key]) : assignFallbackAttr(void 0);
+    }), {
+      extraAttrs: extraAttrs,
+      stateTransitionTargetAttrs: snapshot
+    };
   }
   syncObjectToSnapshot(target, snapshot, excludedKeys) {
     const delta = new Map();
@@ -9331,10 +9329,6 @@ class GraphicImpl extends Node {
     var _a;
     return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
   }
-  setStateDefinitionsWithCompiled(definitions, compiledDefinitions) {
-    var _a;
-    this.states = definitions, this.localStateDefinitionsSource !== definitions && (this.localStateDefinitionsSource = definitions, this.localStateDefinitionsVersion = (null !== (_a = this.localStateDefinitionsVersion) && void 0 !== _a ? _a : 0) + 1), this.compiledStateDefinitions = compiledDefinitions, this.compiledStateDefinitionsCacheKey = `local:${this.localStateDefinitionsVersion}`;
-  }
   getStateResolveBaseAttrs() {
     var _a;
     return null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute;
@@ -9464,29 +9458,37 @@ class GraphicImpl extends Node {
         resolvedStateAttrs: resolvedStateAttrs
       } = this.resolveGraphicStateTransition(states, !0),
       patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
-    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({
+    if ((!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)) if (hasAnimation && animateSameStatePatchChange) {
+      this._syncFinalAttributeFromStaticTruth();
+      const removedStateAnimationAttrs = this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch);
+      this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, null == removedStateAnimationAttrs ? void 0 : removedStateAnimationAttrs.extraAttrs, null == removedStateAnimationAttrs ? void 0 : removedStateAnimationAttrs.stateTransitionTargetAttrs);
+    } else this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
       type: AttributeUpdateType.STATE
-    }), this.emitStateUpdateEvent())));
+    }), this.emitStateUpdateEvent();
   }
   resolveStateAnimateConfig(animateConfig) {
     var _a, _b, _c;
     return null !== (_c = null !== (_a = null != animateConfig ? animateConfig : this.stateAnimateConfig) && void 0 !== _a ? _a : null === (_b = this.context) || void 0 === _b ? void 0 : _b.stateAnimateConfig) && void 0 !== _c ? _c : DefaultStateAnimateConfig;
   }
-  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
+  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs, stateTransitionTargetAttrs) {
     const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0,
       transitionOptions = resolvedAnimateConfig ? {
         animateConfig: resolvedAnimateConfig,
         extraAnimateAttrs: extraAnimateAttrs,
-        shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
+        getStateTransitionDefaultAttribute: this.getStateTransitionDefaultAttribute.bind(this),
+        shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this),
+        stateTransitionTargetAttrs: stateTransitionTargetAttrs
       } : void 0;
     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,
-      shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
+      getStateTransitionDefaultAttribute: this.getStateTransitionDefaultAttribute.bind(this),
+      shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this),
+      stateTransitionTargetAttrs: stateTransitionTargetAttrs
     });
     this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
   }
@@ -9513,11 +9515,15 @@ class GraphicImpl extends Node {
       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 : {};
-    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({
+    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(), hasAnimation) {
+      this._syncFinalAttributeFromStaticTruth();
+      const removedStateAnimationAttrs = this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch);
+      this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, null == removedStateAnimationAttrs ? void 0 : removedStateAnimationAttrs.extraAttrs, null == removedStateAnimationAttrs ? void 0 : removedStateAnimationAttrs.stateTransitionTargetAttrs);
+    } else this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
       type: AttributeUpdateType.STATE
-    }), this.emitStateUpdateEvent()));
+    }), this.emitStateUpdateEvent();
   }
   removeState(stateName, hasAnimation) {
     const transition = this.resolveRemoveStateTransition(stateName);
@@ -9558,11 +9564,15 @@ class GraphicImpl extends Node {
         effectiveStates: effectiveStates,
         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({
+    if ((transition.changed || !this.sameStateNames(previousStates, transition.states)) && this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) if (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), hasAnimation) {
+      this._syncFinalAttributeFromStaticTruth();
+      const removedStateAnimationAttrs = this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch);
+      this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, null == removedStateAnimationAttrs ? void 0 : removedStateAnimationAttrs.extraAttrs, null == removedStateAnimationAttrs ? void 0 : removedStateAnimationAttrs.stateTransitionTargetAttrs);
+    } else this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
       type: AttributeUpdateType.STATE
-    }), this.emitStateUpdateEvent()));
+    }), this.emitStateUpdateEvent();
   }
   invalidateResolver() {
     var _a, _b;
@@ -9682,12 +9692,12 @@ class GraphicImpl extends Node {
       this._globalTransMatrix.translate(scrollX, scrollY);
     }
   }
-  setStage(stage, layer, inheritedSharedStateScope) {
+  setStage(stage, layer) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     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,
       previousStage = this.stage;
     if (this.stage !== stage || this.layer !== layer) {
-      if (this.stage = stage, this.layer = layer, ((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) && this.syncSharedStateScopeBindingOnTreeChange(!0, inheritedSharedStateScope), this.setStageToShadowRoot(stage, layer), this.mayHaveTrackedAnimates() && this.hasAnyTrackedAnimate()) {
+      if (this.stage = stage, this.layer = layer, ((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) && this.syncSharedStateScopeBindingOnTreeChange(!0), this.setStageToShadowRoot(stage, layer), this.mayHaveTrackedAnimates() && this.hasAnyTrackedAnimate()) {
         const previousTimeline = null === (_f = null == previousStage ? void 0 : previousStage.getTimeline) || void 0 === _f ? void 0 : _f.call(previousStage),
           nextTimeline = null === (_g = null == stage ? void 0 : stage.getTimeline) || void 0 === _g ? void 0 : _g.call(stage),
           detachedStageAnimates = [];
@@ -9704,7 +9714,7 @@ class GraphicImpl extends Node {
       }
       return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_h = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _h || _h.call(graphicService, this, stage));
     }
-    ((null === (_j = this.currentStates) || void 0 === _j ? void 0 : _j.length) || this.boundSharedStateScope || (null === (_k = this.registeredActiveScopes) || void 0 === _k ? void 0 : _k.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0, inheritedSharedStateScope);
+    ((null === (_j = this.currentStates) || void 0 === _j ? void 0 : _j.length) || this.boundSharedStateScope || (null === (_k = this.registeredActiveScopes) || void 0 === _k ? void 0 : _k.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0);
   }
   detachStageForRelease() {
     var _a, _b, _c;
@@ -10126,13 +10136,13 @@ class Group extends Graphic {
       child.setStage(null, null);
     }), this.addUpdateBoundTag();
   }
-  setStage(stage, layer, inheritedSharedStateScope) {
+  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, inheritedSharedStateScope)), 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(inheritedSharedStateScope);
+    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, inheritedSharedStateScope), this.notifyChildrenSharedStateTreeChanged(inheritedSharedStateScope)) : layerChanged && this.notifyChildrenSharedStateTreeChanged(inheritedSharedStateScope);
+    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.notifyChildrenSharedStateTreeChanged();
   }
   addUpdatePositionTag() {
     super.addUpdatePositionTag(), this.forEachChildren(g => {
@@ -10191,26 +10201,17 @@ class Group extends Graphic {
   hasSharedStateDefinitions() {
     return !!this._sharedStateDefinitions && Object.keys(this._sharedStateDefinitions).length > 0;
   }
-  resolveChildSharedStateScope(inheritedSharedStateScope) {
-    var _a;
-    return this.sharedStateScope ? this.sharedStateScope : void 0 !== inheritedSharedStateScope ? inheritedSharedStateScope : null !== (_a = this.resolveBoundSharedStateScope()) && void 0 !== _a ? _a : null;
-  }
-  notifyChildrenSharedStateTreeChanged(inheritedSharedStateScope) {
-    const childSharedStateScope = this.resolveChildSharedStateScope(inheritedSharedStateScope);
+  notifyChildrenSharedStateTreeChanged() {
     this.forEachChildren(item => {
-      this.setStageToChild(item, childSharedStateScope);
+      this.syncChildSharedStateTreeBinding(item);
     });
   }
-  setStageToChild(child, inheritedSharedStateScope) {
-    const graphic = child;
-    "function" != typeof graphic.setStage || child.onParentSharedStateTreeChanged !== Graphic.prototype.onParentSharedStateTreeChanged && child.onParentSharedStateTreeChanged !== Group.prototype.onParentSharedStateTreeChanged || graphic.stage === this.stage && graphic.layer === this.layer ? child.onParentSharedStateTreeChanged(this.stage, this.layer, inheritedSharedStateScope) : graphic.setStage(this.stage, this.layer, inheritedSharedStateScope);
-  }
-  syncChildSharedStateTreeBinding(child, inheritedSharedStateScope) {
-    void 0 === inheritedSharedStateScope && (inheritedSharedStateScope = this.resolveChildSharedStateScope()), this.setStageToChild(child, inheritedSharedStateScope);
+  syncChildSharedStateTreeBinding(child) {
+    child.onParentSharedStateTreeChanged(this.stage, this.layer);
   }
-  onParentSharedStateTreeChanged(stage, layer, inheritedSharedStateScope) {
+  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), inheritedSharedStateScope), this.notifyChildrenSharedStateTreeChanged(inheritedSharedStateScope)) : this.setStage(stage, layer, inheritedSharedStateScope);
+    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;
@@ -11700,8 +11701,15 @@ class Text extends Graphic {
       const b = this.AABBBounds;
       return this._OBBBounds.setValue(b.x1, b.y1, b.x2, b.y2), this._OBBBounds;
     }
-    this.obbText || (this.obbText = new Text({})), this.obbText.setAttributes(Object.assign(Object.assign({}, attribute), {
-      angle: 0
+    this.obbText || (this.obbText = new Text({}));
+    const {
+      dx = 0,
+      dy = 0
+    } = attribute;
+    this.obbText.setAttributes(Object.assign(Object.assign({}, attribute), {
+      angle: 0,
+      dx: 0,
+      dy: 0
     }));
     const bounds1 = this.obbText.AABBBounds,
       {
@@ -11716,7 +11724,7 @@ class Text extends Graphic {
         x: x,
         y: y
       });
-    return this._OBBBounds.copy(bounds1), this._OBBBounds.translate(center.x - boundsCenter.x, center.y - boundsCenter.y), this._OBBBounds.angle = angle, this._OBBBounds;
+    return this._OBBBounds.copy(bounds1), this._OBBBounds.translate(center.x - boundsCenter.x + dx, center.y - boundsCenter.y + dy), this._OBBBounds.angle = angle, this._OBBBounds;
   }
   updateAABBBounds(attribute, textTheme, aabbBounds) {
     const {
@@ -13584,8 +13592,8 @@ class RichText extends Graphic {
   clone() {
     return new RichText(Object.assign({}, this.attribute));
   }
-  setStage(stage, layer, inheritedSharedStateScope) {
-    super.setStage(stage, layer, inheritedSharedStateScope);
+  setStage(stage, layer) {
+    super.setStage(stage, layer);
     this.getFrameCache().icons.forEach(icon => {
       icon.setStage(stage, layer);
     });
@@ -14138,7 +14146,204 @@ function createArc3d(attributes) {
   return new Arc3d(attributes);
 }
 
-const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
+function drawPolygon(path, points, x, y) {
+  if (points && points.length) {
+    path.moveTo(points[0].x + x, points[0].y + y);
+    for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
+  }
+}
+function drawRoundedPolygon(path, points, x, y, cornerRadius, closePath = !0) {
+  var _a;
+  const normalized = normalizePolygonPoints(points, cornerRadius, closePath);
+  if (normalized) return void drawRoundedPolygon(path, normalized.points, x, y, normalized.cornerRadius, closePath);
+  if (points.length < 3) return void drawPolygon(path, points, x, y);
+  let startI = 0,
+    endI = points.length - 1;
+  closePath || (startI += 1, endI -= 1, path.moveTo(points[0].x + x, points[0].y + y));
+  for (let i = startI; i <= endI; i++) {
+    const p1 = points[0 === i ? endI : (i - 1) % points.length],
+      angularPoint = points[i % points.length],
+      p2 = points[(i + 1) % points.length],
+      dx1 = angularPoint.x - p1.x,
+      dy1 = angularPoint.y - p1.y,
+      dx2 = angularPoint.x - p2.x,
+      dy2 = angularPoint.y - p2.y,
+      angle = (Math.atan2(dy1, dx1) - Math.atan2(dy2, dx2)) / 2,
+      tan = Math.abs(Math.tan(angle));
+    let radius = Array.isArray(cornerRadius) ? null !== (_a = cornerRadius[i % points.length]) && void 0 !== _a ? _a : 0 : cornerRadius,
+      segment = radius / tan;
+    const length1 = getLength(dx1, dy1),
+      length2 = getLength(dx2, dy2),
+      length = Math.min(length1, length2);
+    segment > length && (segment = length, radius = length * tan);
+    const p1Cross = getProportionPoint(angularPoint, segment, length1, dx1, dy1),
+      p2Cross = getProportionPoint(angularPoint, segment, length2, dx2, dy2),
+      dx = 2 * angularPoint.x - p1Cross.x - p2Cross.x,
+      dy = 2 * angularPoint.y - p1Cross.y - p2Cross.y,
+      L = getLength(dx, dy),
+      circlePoint = getProportionPoint(angularPoint, getLength(segment, radius), L, dx, dy);
+    let startAngle = Math.atan2(p1Cross.y - circlePoint.y, p1Cross.x - circlePoint.x);
+    const endAngle = Math.atan2(p2Cross.y - circlePoint.y, p2Cross.x - circlePoint.x);
+    let sweepAngle = endAngle - startAngle;
+    sweepAngle < 0 && (startAngle = endAngle, sweepAngle = -sweepAngle), sweepAngle > Math.PI && (sweepAngle -= Math.PI), 0 === i ? path.moveTo(p1Cross.x + x, p1Cross.y + y) : path.lineTo(p1Cross.x + x, p1Cross.y + y), sweepAngle && path.arcTo(angularPoint.x + x, angularPoint.y + y, p2Cross.x + x, p2Cross.y + y, radius), path.lineTo(p2Cross.x + x, p2Cross.y + y);
+  }
+  closePath || path.lineTo(points[endI + 1].x + x, points[endI + 1].y + y);
+}
+function getLength(dx, dy) {
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function getProportionPoint(point, segment, length, dx, dy) {
+  const factor = segment / length;
+  return {
+    x: point.x - dx * factor,
+    y: point.y - dy * factor
+  };
+}
+function normalizePolygonPoints(points, cornerRadius, closePath = !0) {
+  var _a;
+  let hasDuplicate = !1;
+  for (let i = 1; i < points.length; i++) if (isSamePoint(points[i - 1], points[i])) {
+    hasDuplicate = !0;
+    break;
+  }
+  if (!hasDuplicate && closePath && points.length > 1 && isSamePoint(points[0], points[points.length - 1]) && (hasDuplicate = !0), !hasDuplicate) return null;
+  const normalizedPoints = [],
+    normalizedCornerRadius = Array.isArray(cornerRadius) ? [] : null;
+  for (let i = 0; i < points.length; i++) normalizedPoints.length && isSamePoint(normalizedPoints[normalizedPoints.length - 1], points[i]) || (normalizedPoints.push(points[i]), null == normalizedCornerRadius || normalizedCornerRadius.push(null !== (_a = cornerRadius[i]) && void 0 !== _a ? _a : 0));
+  return closePath && normalizedPoints.length > 1 && isSamePoint(normalizedPoints[0], normalizedPoints[normalizedPoints.length - 1]) && (normalizedPoints.pop(), null == normalizedCornerRadius || normalizedCornerRadius.pop()), {
+    points: normalizedPoints,
+    cornerRadius: null != normalizedCornerRadius ? normalizedCornerRadius : cornerRadius
+  };
+}
+function isSamePoint(a, b) {
+  return a.x === b.x && a.y === b.y;
+}
+function getPolygonWinding(points) {
+  let signedArea = 0;
+  for (let i = 0; i < points.length; i++) {
+    const current = points[i],
+      next = points[(i + 1) % points.length];
+    signedArea += current.x * next.y - next.x * current.y;
+  }
+  return signedArea > 0 ? 1 : -1;
+}
+function offsetPolygonPoints(points, distance, closePath = !0) {
+  var _a;
+  const n = null !== (_a = null == points ? void 0 : points.length) && void 0 !== _a ? _a : 0;
+  if (n < 2 || closePath && n < 3 || !distance) return points;
+  const sign = getPolygonWinding(points),
+    edgeCount = closePath ? n : n - 1,
+    lines = [];
+  for (let i = 0; i < edgeCount; i++) {
+    const cur = points[i],
+      next = points[(i + 1) % n],
+      dx = next.x - cur.x,
+      dy = next.y - cur.y,
+      len = Math.sqrt(dx * dx + dy * dy);
+    if (!len) {
+      lines.push(null);
+      continue;
+    }
+    const offsetX = sign * dy * distance / len,
+      offsetY = -sign * dx * distance / len;
+    lines.push({
+      x: cur.x + offsetX,
+      y: cur.y + offsetY,
+      dx: dx,
+      dy: dy,
+      len: len,
+      offsetX: offsetX,
+      offsetY: offsetY
+    });
+  }
+  const prevLines = new Array(n);
+  let prevLine = null;
+  if (closePath) for (let i = edgeCount - 1; i >= 0; i--) if (lines[i]) {
+    prevLine = lines[i];
+    break;
+  }
+  for (let i = 0; i < n; i++) prevLines[i] = prevLine, i < edgeCount && lines[i] && (prevLine = lines[i]);
+  const nextLines = new Array(n);
+  let nextLine = null;
+  if (closePath) for (let count = 0; count < edgeCount; count++) {
+    const line = lines[(n - 1 + count) % edgeCount];
+    if (line) {
+      nextLine = line;
+      break;
+    }
+  }
+  for (let i = n - 1; i >= 0; i--) i < edgeCount && lines[i] && (nextLine = lines[i]), nextLines[i] = nextLine;
+  const offsetPointByLine = (point, line) => ({
+      x: point.x + line.offsetX,
+      y: point.y + line.offsetY
+    }),
+    result = [];
+  for (let i = 0; i < n; i++) {
+    const prev = prevLines[i],
+      cur = nextLines[i],
+      line = prev || cur;
+    if (!line) {
+      result.push(points[i]);
+      continue;
+    }
+    if (!prev || !cur) {
+      result.push(offsetPointByLine(points[i], line));
+      continue;
+    }
+    const denominator = prev.dx * cur.dy - prev.dy * cur.dx;
+    if (Math.abs(denominator) <= 1e-12 * prev.len * cur.len) {
+      result.push(offsetPointByLine(points[i], cur));
+      continue;
+    }
+    const t = ((cur.x - prev.x) * cur.dy - (cur.y - prev.y) * cur.dx) / denominator,
+      point = {
+        x: prev.x + prev.dx * t,
+        y: prev.y + prev.dy * t
+      };
+    result.push(Number.isFinite(point.x) && Number.isFinite(point.y) ? point : offsetPointByLine(points[i], cur));
+  }
+  return result;
+}
+
+const getBoundsScaleMatrix = polygon => {
+  var _a;
+  const globalMatrix = polygon.globalTransMatrix,
+    viewBoxMatrix = null === (_a = polygon.stage) || void 0 === _a ? void 0 : _a.window.getViewBoxTransform();
+  return viewBoxMatrix ? {
+    a: viewBoxMatrix.a * globalMatrix.a + viewBoxMatrix.c * globalMatrix.b,
+    b: viewBoxMatrix.b * globalMatrix.a + viewBoxMatrix.d * globalMatrix.b,
+    c: viewBoxMatrix.a * globalMatrix.c + viewBoxMatrix.c * globalMatrix.d,
+    d: viewBoxMatrix.b * globalMatrix.c + viewBoxMatrix.d * globalMatrix.d
+  } : globalMatrix;
+};
+const getPolygonBoundsScale = polygon => getScaledStrokeWithMatrix(getBoundsScaleMatrix(polygon), 1, 1);
+const updateBoundsOfPolygonOuterBorder = (attribute, polygonTheme, aabbBounds, polygon) => {
+  const {
+    outerBorder: outerBorder,
+    points = polygonTheme.points,
+    closePath = polygonTheme.closePath,
+    shadowBlur = polygonTheme.shadowBlur,
+    keepStrokeScale = polygonTheme.keepStrokeScale
+  } = attribute;
+  if (outerBorder && !1 !== outerBorder.visible) {
+    const defaultOuterBorder = polygonTheme.outerBorder,
+      {
+        distance = defaultOuterBorder.distance,
+        lineWidth = defaultOuterBorder.lineWidth,
+        lineJoin = defaultOuterBorder.lineJoin,
+        strokeBoundsBuffer = defaultOuterBorder.strokeBoundsBuffer
+      } = outerBorder,
+      boundsScale = getPolygonBoundsScale(polygon);
+    let scaledDistance = distance;
+    keepStrokeScale || (scaledDistance *= boundsScale), offsetPolygonPoints(points, scaledDistance, closePath).forEach(point => {
+      aabbBounds.add(point.x, point.y);
+    });
+    boundStroke(aabbBounds, (shadowBlur * boundsScale + lineWidth * (keepStrokeScale ? 1 : boundsScale)) / 2, "miter" === lineJoin, strokeBoundsBuffer);
+  }
+  return aabbBounds;
+};
+
+const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", "outerBorder", "keepStrokeScale", ...GRAPHIC_UPDATE_TAG_KEY];
 class Polygon extends Graphic {
   constructor(params) {
     super(params), this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
@@ -14155,6 +14360,16 @@ class Polygon extends Graphic {
   getGraphicTheme() {
     return getTheme(this).polygon;
   }
+  tryUpdateAABBBounds() {
+    const {
+      outerBorder: outerBorder
+    } = this.attribute;
+    if (outerBorder && !1 !== outerBorder.visible) {
+      const boundsScale = getPolygonBoundsScale(this);
+      boundsScale !== this._outerBorderBoundsScale && (this._outerBorderBoundsScale = boundsScale, this.addUpdateBoundTag());
+    } else this._outerBorderBoundsScale = void 0;
+    return super.tryUpdateAABBBounds();
+  }
   updateAABBBounds(attribute, polygonTheme, aabbBounds) {
     this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
@@ -14168,7 +14383,7 @@ class Polygon extends Graphic {
     } = attribute;
     return points.forEach(p => {
       aabbBounds.add(p.x, p.y);
-    }), aabbBounds;
+    }), updateBoundsOfPolygonOuterBorder(attribute, polygonTheme, aabbBounds, this), aabbBounds;
   }
   _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
     "points" === key && (nextAttributes.points = pointsInterpolation(lastStepVal, nextStepVal, ratio));
@@ -15096,22 +15311,26 @@ class DefaultRectRenderContribution {
       width: width,
       height: height
     } = rect.attribute;
-    width = (null != width ? width : x1 - x) || 0, height = (null != height ? height : y1 - y) || 0;
-    const renderBorder = (borderStyle, key) => {
-      const doStroke = !(!borderStyle || !borderStyle.stroke),
-        sign = "outerBorder" === key ? -1 : 1,
-        {
-          distance = rectAttribute[key].distance
-        } = borderStyle,
-        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
-        nextX = x + sign * d,
-        nextY = y + sign * d,
-        dw = 2 * d;
-      if (0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - sign * dw, height - sign * dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius, "bevel" !== cornerType)), context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, borderStyle, rectAttribute[key]);else if (doStroke) {
-        const lastOpacity = rectAttribute[key].opacity;
-        rectAttribute[key].opacity = opacity, context.setStrokeStyle(rect, borderStyle, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute[key]), rectAttribute[key].opacity = lastOpacity, context.stroke();
-      }
-    };
+    width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
+    const borderX = width < 0 ? x + width : x,
+      borderY = height < 0 ? y + height : y,
+      borderWidth = width < 0 ? -width : width,
+      borderHeight = height < 0 ? -height : height,
+      renderBorder = (borderStyle, key) => {
+        const doStroke = !(!borderStyle || !borderStyle.stroke),
+          sign = "outerBorder" === key ? -1 : 1,
+          {
+            distance = rectAttribute[key].distance
+          } = borderStyle,
+          d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
+          nextX = borderX + sign * d,
+          nextY = borderY + sign * d,
+          dw = 2 * d;
+        if (0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, borderWidth - sign * dw, borderHeight - sign * dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, borderWidth - sign * dw, borderHeight - sign * dw, cornerRadius, "bevel" !== cornerType)), context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, borderStyle, rectAttribute[key]);else if (doStroke) {
+          const lastOpacity = rectAttribute[key].opacity;
+          rectAttribute[key].opacity = opacity, context.setStrokeStyle(rect, borderStyle, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute[key]), rectAttribute[key].opacity = lastOpacity, context.stroke();
+        }
+      };
     doOuterBorder && renderBorder(outerBorder, "outerBorder"), doInnerBorder && renderBorder(innerBorder, "innerBorder");
   }
 }
@@ -15528,7 +15747,8 @@ class DefaultIncrementalDrawContribution extends DefaultDrawContribution {
 }
 
 const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-const tempDirtyBounds = new AABBBounds(),
+const INTERACTIVE_POST_MATRIX = "_interactivePostMatrix",
+  tempDirtyBounds = new AABBBounds(),
   tempBackupDirtyBounds = new AABBBounds();
 class ShadowRootDrawItemInterceptorContribution {
   constructor() {
@@ -15592,12 +15812,23 @@ class InteractiveDrawItemInterceptorContribution {
   beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
     return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
   }
+  resolveInteractivePostMatrix(graphic, interactiveGraphic) {
+    const parent = graphic.parent;
+    if (!parent) return graphic.attribute.postMatrix;
+    let matrix = interactiveGraphic[INTERACTIVE_POST_MATRIX];
+    matrix || (matrix = new Matrix(), interactiveGraphic[INTERACTIVE_POST_MATRIX] = matrix);
+    const ancestorMatrix = parent.globalTransMatrix;
+    matrix.setValue(ancestorMatrix.a, ancestorMatrix.b, ancestorMatrix.c, ancestorMatrix.d, ancestorMatrix.e, ancestorMatrix.f);
+    const ownPostMatrix = graphic.attribute.postMatrix;
+    return ownPostMatrix && matrix.multiply(ownPostMatrix.a, ownPostMatrix.b, ownPostMatrix.c, ownPostMatrix.d, ownPostMatrix.e, ownPostMatrix.f), matrix;
+  }
   beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
     let interactiveGraphic = graphic.interactiveGraphic;
     if (graphic.attribute.globalZIndex) {
       interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
         globalZIndex: 0,
-        zIndex: graphic.attribute.globalZIndex
+        zIndex: graphic.attribute.globalZIndex,
+        postMatrix: this.resolveInteractivePostMatrix(graphic, interactiveGraphic)
       }, !1, {
         skipUpdateCallback: !0
       }), drawContext.stage.tryInitInteractiveLayer();
@@ -17346,64 +17577,69 @@ function bindPathRenderModule({
 }
 const pathModule = bindPathRenderModule;
 
-function drawPolygon(path, points, x, y) {
-  if (points && points.length) {
-    path.moveTo(points[0].x + x, points[0].y + y);
-    for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
+const defaultPolygonTextureRenderContribution = defaultBaseTextureRenderContribution;
+const defaultPolygonBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
+class DefaultPolygonRenderContribution {
+  constructor() {
+    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
   }
-}
-function drawRoundedPolygon(path, points, x, y, cornerRadius, closePath = !0) {
-  var _a;
-  if (points.length < 3) return void drawPolygon(path, points, x, y);
-  let startI = 0,
-    endI = points.length - 1;
-  closePath || (startI += 1, endI -= 1, path.moveTo(points[0].x + x, points[0].y + y));
-  for (let i = startI; i <= endI; i++) {
-    const p1 = points[0 === i ? endI : (i - 1) % points.length],
-      angularPoint = points[i % points.length],
-      p2 = points[(i + 1) % points.length],
-      dx1 = angularPoint.x - p1.x,
-      dy1 = angularPoint.y - p1.y,
-      dx2 = angularPoint.x - p2.x,
-      dy2 = angularPoint.y - p2.y,
-      angle = (Math.atan2(dy1, dx1) - Math.atan2(dy2, dx2)) / 2,
-      tan = Math.abs(Math.tan(angle));
-    let radius = Array.isArray(cornerRadius) ? null !== (_a = cornerRadius[i % points.length]) && void 0 !== _a ? _a : 0 : cornerRadius,
-      segment = radius / tan;
-    const length1 = getLength(dx1, dy1),
-      length2 = getLength(dx2, dy2),
-      length = Math.min(length1, length2);
-    segment > length && (segment = length, radius = length * tan);
-    const p1Cross = getProportionPoint(angularPoint, segment, length1, dx1, dy1),
-      p2Cross = getProportionPoint(angularPoint, segment, length2, dx2, dy2),
-      dx = 2 * angularPoint.x - p1Cross.x - p2Cross.x,
-      dy = 2 * angularPoint.y - p1Cross.y - p2Cross.y,
-      L = getLength(dx, dy),
-      circlePoint = getProportionPoint(angularPoint, getLength(segment, radius), L, dx, dy);
-    let startAngle = Math.atan2(p1Cross.y - circlePoint.y, p1Cross.x - circlePoint.x);
-    const endAngle = Math.atan2(p2Cross.y - circlePoint.y, p2Cross.x - circlePoint.x);
-    let sweepAngle = endAngle - startAngle;
-    sweepAngle < 0 && (startAngle = endAngle, sweepAngle = -sweepAngle), sweepAngle > Math.PI && (sweepAngle -= Math.PI), 0 === i ? path.moveTo(p1Cross.x + x, p1Cross.y + y) : path.lineTo(p1Cross.x + x, p1Cross.y + y), sweepAngle && path.arcTo(angularPoint.x + x, angularPoint.y + y, p2Cross.x + x, p2Cross.y + y, radius), path.lineTo(p2Cross.x + x, p2Cross.y + y);
+  drawShape(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb) {
+    const {
+        outerBorder: outerBorder,
+        innerBorder: innerBorder
+      } = polygon.attribute,
+      doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+      doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+    if (!doOuterBorder && !doInnerBorder) return;
+    const {
+        points = polygonAttribute.points,
+        cornerRadius = polygonAttribute.cornerRadius,
+        opacity = polygonAttribute.opacity,
+        x: originX = polygonAttribute.x,
+        y: originY = polygonAttribute.y,
+        scaleX = polygonAttribute.scaleX,
+        scaleY = polygonAttribute.scaleY,
+        keepStrokeScale = polygonAttribute.keepStrokeScale,
+        closePath = polygonAttribute.closePath
+      } = polygon.attribute,
+      renderBorder = (borderStyle, key) => {
+        var _a, _b;
+        const doBorderStroke = !!borderStyle.stroke,
+          distanceDirection = "outerBorder" === key ? 1 : -1,
+          {
+            distance = polygonAttribute[key].distance
+          } = borderStyle,
+          borderDistance = distanceDirection * (keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr)),
+          normalized = normalizePolygonPoints(points, cornerRadius, closePath),
+          normalizedPoints = null !== (_a = null == normalized ? void 0 : normalized.points) && void 0 !== _a ? _a : points,
+          normalizedCornerRadius = null !== (_b = null == normalized ? void 0 : normalized.cornerRadius) && void 0 !== _b ? _b : cornerRadius,
+          borderPoints = offsetPolygonPoints(normalizedPoints, borderDistance, closePath),
+          winding = getPolygonWinding(normalizedPoints),
+          borderCornerRadius = normalizedPoints.map((point, i) => {
+            var _a;
+            const radius = isArray(normalizedCornerRadius) ? null !== (_a = normalizedCornerRadius[i]) && void 0 !== _a ? _a : 0 : normalizedCornerRadius || 0;
+            if (!closePath && (0 === i || i === normalizedPoints.length - 1) || normalizedPoints.length < 3) return radius;
+            const prev = normalizedPoints[(i - 1 + normalizedPoints.length) % normalizedPoints.length],
+              next = normalizedPoints[(i + 1) % normalizedPoints.length],
+              cornerDirection = ((point.x - prev.x) * (next.y - point.y) - (point.y - prev.y) * (next.x - point.x)) * winding < 0 ? -1 : 1;
+            return Math.max(0, radius + borderDistance * cornerDirection);
+          }),
+          noCorner = 0 === borderCornerRadius.length || borderCornerRadius.every(r => 0 === r);
+        if (context.beginPath(), noCorner ? drawPolygon(context.camera ? context : context.nativeContext, borderPoints, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, borderPoints, x, y, borderCornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), strokeCb) strokeCb(context, borderStyle, polygonAttribute[key]);else if (doBorderStroke) {
+          const lastOpacity = polygonAttribute[key].opacity,
+            borderStyleWithStrokeScale = borderStyle,
+            lastKeepStrokeScale = borderStyleWithStrokeScale.keepStrokeScale;
+          polygonAttribute[key].opacity = opacity, borderStyleWithStrokeScale.keepStrokeScale = keepStrokeScale, context.setStrokeStyle(polygon, borderStyleWithStrokeScale, (originX - x) / scaleX, (originY - y) / scaleY, polygonAttribute[key]), polygonAttribute[key].opacity = lastOpacity, void 0 === lastKeepStrokeScale ? delete borderStyleWithStrokeScale.keepStrokeScale : borderStyleWithStrokeScale.keepStrokeScale = lastKeepStrokeScale, context.stroke();
+        }
+      };
+    doOuterBorder && renderBorder(outerBorder, "outerBorder"), doInnerBorder && renderBorder(innerBorder, "innerBorder");
   }
-  closePath || path.lineTo(points[endI + 1].x + x, points[endI + 1].y + y);
-}
-function getLength(dx, dy) {
-  return Math.sqrt(dx * dx + dy * dy);
-}
-function getProportionPoint(point, segment, length, dx, dy) {
-  const factor = segment / length;
-  return {
-    x: point.x - dx * factor,
-    y: point.y - dy * factor
-  };
 }
-
-const defaultPolygonTextureRenderContribution = defaultBaseTextureRenderContribution;
-const defaultPolygonBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
+const defaultPolygonRenderContribution = new DefaultPolygonRenderContribution();
 
 class DefaultCanvasPolygonRender extends BaseRender {
   constructor(graphicRenderContributions) {
-    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = POLYGON_NUMBER_TYPE, this.builtinContributions = [defaultPolygonBackgroundRenderContribution, defaultPolygonTextureRenderContribution], this.init(graphicRenderContributions);
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = POLYGON_NUMBER_TYPE, this.builtinContributions = [defaultPolygonRenderContribution, defaultPolygonBackgroundRenderContribution, defaultPolygonTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(polygon, context, x, y, drawContext, params, fillCb, strokeCb) {
     const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon,
@@ -22832,6 +23068,8 @@ function getLynxRuntime(params) {
     var _a, _b;
     return (_b = (_a = params === null || params === void 0 ? void 0 : params.lynx) !== null && _a !== void 0 ? _a : params === null || params === void 0 ? void 0 : params.runtime) !== null && _b !== void 0 ? _b : getGlobalLynxRuntime();
 }
+const requestAnimationFrameBasedSTO = (callback) => rafBasedSto.call(callback);
+const cancelAnimationFrameBasedSTO = (handle) => rafBasedSto.clear(handle);
 function getLynxPixelRatio(params, runtime) {
     var _a, _b, _c, _d, _e;
     return (_e = (_d = (_a = params === null || params === void 0 ? void 0 : params.pixelRatio) !== null && _a !== void 0 ? _a : (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.getSystemInfoSync) === null || _b === void 0 ? void 0 : _b.call(runtime)) === null || _c === void 0 ? void 0 : _c.pixelRatio) !== null && _d !== void 0 ? _d : getGlobalSystemPixelRatio()) !== null && _e !== void 0 ? _e : 1;
@@ -22933,6 +23171,8 @@ class LynxEnvContribution extends BaseEnvContribution {
         this.canvasMap = new Map();
         this.freeCanvasList = [];
         this.canvasIdx = 0;
+        this.requestAnimationFrame = requestAnimationFrameBasedSTO;
+        this.cancelAnimationFrame = cancelAnimationFrameBasedSTO;
         this.supportsTouchEvents = true;
         try {
             this.supportsPointerEvents = !!globalThis.PointerEvent;
@@ -22945,10 +23185,20 @@ class LynxEnvContribution extends BaseEnvContribution {
         this.applyStyles = true;
     }
     configure(service, params = {}) {
+        var _a, _b;
         if (service.env === this.type) {
             service.setActiveEnvContribution(this);
             this.lynxEnvParams = params;
             this.lynxRuntime = getLynxRuntime(params);
+            if (typeof ((_a = this.lynxRuntime) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame) === 'function' &&
+                typeof ((_b = this.lynxRuntime) === null || _b === void 0 ? void 0 : _b.cancelAnimationFrame) === 'function') {
+                this.requestAnimationFrame = this.lynxRuntime.requestAnimationFrame.bind(this.lynxRuntime);
+                this.cancelAnimationFrame = this.lynxRuntime.cancelAnimationFrame.bind(this.lynxRuntime);
+            }
+            else {
+                this.requestAnimationFrame = requestAnimationFrameBasedSTO;
+                this.cancelAnimationFrame = cancelAnimationFrameBasedSTO;
+            }
         }
     }
     getDynamicCanvasCount() {
@@ -23022,14 +23272,10 @@ class LynxEnvContribution extends BaseEnvContribution {
         return getLynxPixelRatio(undefined, this.lynxRuntime);
     }
     getRequestAnimationFrame() {
-        return function (callback) {
-            return rafBasedSto.call(callback);
-        };
+        return this.requestAnimationFrame;
     }
     getCancelAnimationFrame() {
-        return (h) => {
-            rafBasedSto.clear(h);
-        };
+        return this.cancelAnimationFrame;
     }
     mapToCanvasPoint(event) {
         var _a;