@visactor/vrender-components 1.1.4 → 1.1.6-alpha.0

package/dist/index.es.js

@@ -208,7 +208,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) {}
+  onParentSharedStateTreeChanged(_stage, _layer, _inheritedSharedStateScope) {}
   forEachChildren(cb, reverse = !1) {
     if (reverse) {
       let child = this._lastChild,
@@ -4875,14 +4875,17 @@ class GraphicImpl extends Node {
     }
     return null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope;
   }
-  syncSharedStateScopeBindingFromTree(markDirty = !0) {
+  syncSharedStateScopeBinding(nextScope, 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);
   }
-  syncSharedStateScopeBindingOnTreeChange(markDirty = !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) {
     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);
+    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);
   }
   syncSharedStateActiveRegistrations() {
     var _a;
@@ -4890,6 +4893,7 @@ 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);
@@ -4897,6 +4901,15 @@ 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 => {
@@ -4906,8 +4919,8 @@ class GraphicImpl extends Node {
   markSharedStateDirty() {
     this.sharedStateDirty = !0, enqueueGraphicSharedStateRefresh(this.stage, this), scheduleStageSharedStateRefresh(this.stage);
   }
-  onParentSharedStateTreeChanged(stage, layer) {
-    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingOnTreeChange() : this.setStage(stage, layer);
+  onParentSharedStateTreeChanged(stage, layer, inheritedSharedStateScope) {
+    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingOnTreeChange(!0, inheritedSharedStateScope) : this.setStage(stage, layer, inheritedSharedStateScope);
   }
   refreshSharedStateBeforeRender() {
     var _a;
@@ -5558,6 +5571,10 @@ 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;
@@ -5905,12 +5922,12 @@ class GraphicImpl extends Node {
       this._globalTransMatrix.translate(scrollX, scrollY);
     }
   }
-  setStage(stage, layer) {
+  setStage(stage, layer, inheritedSharedStateScope) {
     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), 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, inheritedSharedStateScope), 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 = [];
@@ -5927,7 +5944,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);
+    ((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);
   }
   detachStageForRelease() {
     var _a, _b, _c;
@@ -6349,13 +6366,13 @@ class Group extends Graphic {
       child.setStage(null, null);
     }), this.addUpdateBoundTag();
   }
-  setStage(stage, layer) {
+  setStage(stage, layer, inheritedSharedStateScope) {
     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();
+    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);
     const layerChanged = this.layer !== layer;
-    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.notifyChildrenSharedStateTreeChanged();
+    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0, inheritedSharedStateScope), this.notifyChildrenSharedStateTreeChanged(inheritedSharedStateScope)) : layerChanged && this.notifyChildrenSharedStateTreeChanged(inheritedSharedStateScope);
   }
   addUpdatePositionTag() {
     super.addUpdatePositionTag(), this.forEachChildren(g => {
@@ -6414,17 +6431,26 @@ class Group extends Graphic {
   hasSharedStateDefinitions() {
     return !!this._sharedStateDefinitions && Object.keys(this._sharedStateDefinitions).length > 0;
   }
-  notifyChildrenSharedStateTreeChanged() {
+  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);
     this.forEachChildren(item => {
-      this.syncChildSharedStateTreeBinding(item);
+      this.setStageToChild(item, childSharedStateScope);
     });
   }
-  syncChildSharedStateTreeBinding(child) {
-    child.onParentSharedStateTreeChanged(this.stage, this.layer);
+  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);
   }
-  onParentSharedStateTreeChanged(stage, layer) {
+  syncChildSharedStateTreeBinding(child, inheritedSharedStateScope) {
+    void 0 === inheritedSharedStateScope && (inheritedSharedStateScope = this.resolveChildSharedStateScope()), this.setStageToChild(child, inheritedSharedStateScope);
+  }
+  onParentSharedStateTreeChanged(stage, layer, inheritedSharedStateScope) {
     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);
+    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);
   }
 }
 Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
@@ -8087,13 +8113,14 @@ function applyFillStyle(ctx, character, b) {
   }) : fillStyle, setTextStyle(ctx, character);
 }
 function applyStrokeStyle(ctx, character) {
+  var _a, _b;
   const strokeStyle = character && character.stroke || defaultFormatting.stroke;
   if (!strokeStyle) return void (ctx.globalAlpha = 0);
   const {
     strokeOpacity = 1,
     opacity = 1
   } = character;
-  ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
+  ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.setLineDash(null !== (_a = character.lineDash) && void 0 !== _a ? _a : []), ctx.lineDashOffset = null !== (_b = character.lineDashOffset) && void 0 !== _b ? _b : 0, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
   if (desc.length <= 1) return 0;
@@ -9026,8 +9053,8 @@ class RichText extends Graphic {
   clone() {
     return new RichText(Object.assign({}, this.attribute));
   }
-  setStage(stage, layer) {
-    super.setStage(stage, layer);
+  setStage(stage, layer, inheritedSharedStateScope) {
+    super.setStage(stage, layer, inheritedSharedStateScope);
     this.getFrameCache().icons.forEach(icon => {
       icon.setStage(stage, layer);
     });
@@ -30003,6 +30030,7 @@ class DiscreteLegend extends LegendBase {
         this._itemHeight = 0;
         this._itemMaxWidth = 0;
         this._contentMaxHeight = 0;
+        this._stateDefinitionsCache = new WeakMap();
         this._onHover = (e) => {
             const target = e.target;
             if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
@@ -30089,6 +30117,7 @@ class DiscreteLegend extends LegendBase {
         };
     }
     render() {
+        this._stateDefinitionsCache = new WeakMap();
         super.render();
         this._lastActiveItem = null;
     }
@@ -30367,7 +30396,7 @@ class DiscreteLegend extends LegendBase {
         }
         else {
             itemGroup = graphicCreator.group(Object.assign({ x: 0, y: 0 }, backgroundStyle.style));
-            this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state);
+            this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state, backgroundStyle.reuseStateDefinitions);
         }
         itemGroup.id = `${id !== null && id !== void 0 ? id : label}-${index}`;
         itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
@@ -30400,7 +30429,7 @@ class DiscreteLegend extends LegendBase {
                     shapeStyle.state[key].stroke = color;
                 }
             });
-            this._appendDataToShape(itemShape, LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state);
+            this._appendDataToShape(itemShape, LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state, false);
             itemShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
             innerGroup.add(itemShape);
         }
@@ -30415,7 +30444,7 @@ class DiscreteLegend extends LegendBase {
         const text = labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label;
         const labelAttributes = Object.assign(Object.assign({ x: shapeSize / 2 + shapeSpace, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: (_b = labelStyle.style) === null || _b === void 0 ? void 0 : _b.fontSize }, labelStyle.style), { text, _originText: labelAttr.formatMethod ? label : undefined });
         const labelShape = createTextGraphicByType(labelAttributes);
-        this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state);
+        this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state, labelStyle.reuseStateDefinitions);
         labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
         innerGroup.add(labelShape);
         const labelSpace = get(labelAttr, 'space', DEFAULT_LABEL_SPACE);
@@ -30424,7 +30453,7 @@ class DiscreteLegend extends LegendBase {
             const valueText = valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value;
             const valueAttributes = Object.assign(Object.assign({ x: 0, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: valueStyle.style.fontSize }, valueStyle.style), { text: valueText, _originText: valueAttr.formatMethod ? value : undefined });
             const valueShape = createTextGraphicByType(valueAttributes);
-            this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state);
+            this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state, valueStyle.reuseStateDefinitions);
             valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
             if (this._itemWidthByUser) {
                 const layoutWidth = this._itemWidthByUser -
@@ -30522,9 +30551,12 @@ class DiscreteLegend extends LegendBase {
             : new ScrollBar(Object.assign(Object.assign({ direction: 'vertical', width: compStyle.visible === false ? 0 : 12, range: [0, 0.5] }, compStyle), { height: compSize, disableTriggerEvent }));
     }
     _updatePositionOfPager(renderStartY, compWidth, compHeight) {
+        var _a;
         const { pager } = this.attribute;
         const { totalPage, isHorizontal } = this._itemContext;
         const position = (pager && pager.position) || 'middle';
+        const hugContent = !!(pager && pager.hugContent);
+        const pagerSpace = (_a = (pager && pager.space)) !== null && _a !== void 0 ? _a : DEFAULT_PAGER_SPACE;
         this._pagerComponent.setTotal(totalPage);
         if (isHorizontal) {
             let y;
@@ -30537,8 +30569,12 @@ class DiscreteLegend extends LegendBase {
             else {
                 y = renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2;
             }
+            let x = compWidth - this._pagerComponent.AABBBounds.width();
+            if (hugContent) {
+                x = Math.max(0, Math.min(this._itemsContainer.AABBBounds.width() + pagerSpace, x));
+            }
             this._pagerComponent.setAttributes({
-                x: compWidth - this._pagerComponent.AABBBounds.width(),
+                x,
                 y
             });
         }
@@ -30553,9 +30589,13 @@ class DiscreteLegend extends LegendBase {
             else {
                 x = (compWidth - this._pagerComponent.AABBBounds.width()) / 2;
             }
+            let y = compHeight - this._pagerComponent.AABBBounds.height();
+            if (hugContent) {
+                y = Math.max(0, Math.min(renderStartY + this._itemsContainer.AABBBounds.height() + pagerSpace, y));
+            }
             this._pagerComponent.setAttributes({
                 x,
-                y: compHeight - this._pagerComponent.AABBBounds.height()
+                y
             });
         }
     }
@@ -30771,11 +30811,22 @@ class DiscreteLegend extends LegendBase {
                 itemsContainer.setAttribute('x', -(defaultCurrent - 1) * (compWidth + spaceCol));
             }
         }
+        const hugContent = !!pager.hugContent;
+        let clipWidth = isHorizontal ? contentWidth : compWidth;
+        let clipHeight = isHorizontal ? compHeight : contentHeight;
+        if (hugContent) {
+            if (isHorizontal) {
+                clipWidth = Math.max(0, Math.min(clipWidth, itemsContainer.AABBBounds.width()));
+            }
+            else {
+                clipHeight = Math.max(0, Math.min(clipHeight, itemsContainer.AABBBounds.height()));
+            }
+        }
         const clipGroup = graphicCreator.group({
             x: 0,
             y: renderStartY,
-            width: isHorizontal ? contentWidth : compWidth,
-            height: isHorizontal ? compHeight : contentHeight,
+            width: clipWidth,
+            height: clipHeight,
             clip: true,
             pickable: false
         });
@@ -31054,11 +31105,29 @@ class DiscreteLegend extends LegendBase {
         });
         return selectedData;
     }
-    _appendDataToShape(shape, name, data, delegateShape, states = {}) {
+    _appendDataToShape(shape, name, data, delegateShape, states, reuseStateDefinitions = true) {
         shape.name = name;
         shape.data = data;
         shape.delegate = delegateShape;
-        shape.states = merge({}, DEFAULT_STATES, states);
+        if (!reuseStateDefinitions) {
+            shape.states = merge({}, DEFAULT_STATES, states);
+            return;
+        }
+        const source = states !== null && states !== void 0 ? states : DEFAULT_STATES;
+        const cached = this._stateDefinitionsCache.get(source);
+        if (cached) {
+            shape.states = cached.definitions;
+            shape.setStateDefinitionsWithCompiled(cached.definitions, cached.compiledDefinitions);
+            return;
+        }
+        const definitions = states ? merge({}, DEFAULT_STATES, states) : DEFAULT_STATES;
+        const entry = {
+            definitions,
+            compiledDefinitions: new StateDefinitionCompiler().compile(definitions)
+        };
+        this._stateDefinitionsCache.set(source, entry);
+        shape.states = entry.definitions;
+        shape.setStateDefinitionsWithCompiled(entry.definitions, entry.compiledDefinitions);
     }
     _dispatchLegendEvent(eventName, legendItem, event) {
         const currentSelectedItems = this._getSelectedLegends();
@@ -31084,21 +31153,27 @@ class DiscreteLegend extends LegendBase {
             }
         }
         if (config.state) {
-            newConfig.state = {};
-            Object.keys(config.state).forEach(key => {
-                if (config.state[key]) {
-                    if (isFunction(config.state[key])) {
-                        newConfig.state[key] = config.state[key](item, isSelected, index, items);
-                    }
-                    else {
-                        newConfig.state[key] = config.state[key];
+            const stateKeys = Object.keys(config.state);
+            const hasStateFunction = stateKeys.some(key => isFunction(config.state[key]));
+            newConfig.reuseStateDefinitions = !hasStateFunction;
+            if (!hasStateFunction) {
+                newConfig.state = config.state;
+            }
+            else {
+                newConfig.state = {};
+                stateKeys.forEach(key => {
+                    if (config.state[key]) {
+                        newConfig.state[key] = isFunction(config.state[key])
+                            ? config.state[key](item, isSelected, index, items)
+                            : config.state[key];
                     }
-                }
-            });
+                });
+            }
         }
         return newConfig;
     }
     release() {
+        this._stateDefinitionsCache = new WeakMap();
         super.release();
         this.removeAllEventListeners();
     }
@@ -36601,6 +36676,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.4";
+const version = "1.1.6-alpha.0";
 
 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 };

package/es/axis/util.js

@@ -98,5 +98,4 @@ export function hasOverlap(items, pad) {
     for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (b = items[i], 
     textIntersect(a, b, pad)) return !0;
     return !1;
-}
-//# sourceMappingURL=util.js.map
+}

package/es/checkbox/type.js

@@ -1 +1,2 @@
-export { };
+export { };
+//# sourceMappingURL=type.js.map

package/es/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "1.1.4";
+export declare const version = "1.1.6-alpha.0";
 export * from './core/base';
 export { AbstractComponent } from './core/base';
 export * from './core/type';

package/es/index.js

@@ -1,4 +1,4 @@
-export const version = "1.1.4";
+export const version = "1.1.6-alpha.0";
 
 export * from "./core/base";
 

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"1.1.4\";\n\nexport * from './core/base';\nexport { AbstractComponent } from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport { ScrollBar } from './scrollbar/scrollbar';\nexport { loadScrollbar } from './scrollbar/module';\nexport * from './tag';\nexport * from './poptip';\nexport { loadPoptip } from './poptip/module';\nexport * from './crosshair';\nexport { LineCrosshair } from './crosshair/line';\nexport { CircleCrosshair } from './crosshair/circle';\nexport { SectorCrosshair } from './crosshair/sector';\nexport { PolygonCrosshair } from './crosshair/polygon';\nexport * from './label';\nexport { DataLabel } from './label/dataLabel';\nexport { registerSymbolDataLabel } from './label/symbol';\nexport * from './axis';\nexport { LineAxis } from './axis/line';\nexport { CircleAxis } from './axis/circle';\nexport { continuousTicks } from './axis/tick-data/continuous';\nexport { polarAngleAxisDiscreteTicks } from './axis/tick-data/discrete/polar-angle';\nexport * from './axis/grid';\nexport { LineAxisGrid } from './axis/grid/line';\nexport { CircleAxisGrid } from './axis/grid/circle';\nexport * from './segment';\nexport { Segment } from './segment/segment';\nexport * from './data-zoom';\nexport { DataZoom } from './data-zoom/data-zoom';\nexport * from './marker';\nexport { MarkLine, registerMarkLineAnimate } from './marker/line';\nexport { MarkArea, registerMarkAreaAnimate } from './marker/area';\nexport { MarkArcLine, registerMarkArcLineAnimate } from './marker/arc-line';\nexport { MarkArcArea, registerMarkArcAreaAnimate } from './marker/arc-area';\nexport { MarkPoint, registerMarkPointAnimate } from './marker/point';\nexport * from './pager';\nexport * from './legend';\nexport { ColorContinuousLegend } from './legend/color/color';\nexport { SizeContinuousLegend } from './legend/size/size';\nexport * from './title';\nexport { Title } from './title/title';\nexport * from './indicator';\nexport { Indicator } from './indicator/indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport { DiscretePlayer } from './player/discrete-player';\nexport { ContinuousPlayer } from './player/continuous-player';\nexport { PlayerEventEnum } from './player/type/event';\nexport * from './brush';\nexport { Brush } from './brush/brush';\nexport { IOperateType } from './brush/type';\nexport * from './tooltip';\nexport * from './timeline';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './weather';\nexport * from './util';\nexport { labelSmartInvert } from './util/label-smartInvert';\nexport * from './switch';\nexport * from './label-item';\nexport * from './table-series-number';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"1.1.6-alpha.0\";\n\nexport * from './core/base';\nexport { AbstractComponent } from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport { ScrollBar } from './scrollbar/scrollbar';\nexport { loadScrollbar } from './scrollbar/module';\nexport * from './tag';\nexport * from './poptip';\nexport { loadPoptip } from './poptip/module';\nexport * from './crosshair';\nexport { LineCrosshair } from './crosshair/line';\nexport { CircleCrosshair } from './crosshair/circle';\nexport { SectorCrosshair } from './crosshair/sector';\nexport { PolygonCrosshair } from './crosshair/polygon';\nexport * from './label';\nexport { DataLabel } from './label/dataLabel';\nexport { registerSymbolDataLabel } from './label/symbol';\nexport * from './axis';\nexport { LineAxis } from './axis/line';\nexport { CircleAxis } from './axis/circle';\nexport { continuousTicks } from './axis/tick-data/continuous';\nexport { polarAngleAxisDiscreteTicks } from './axis/tick-data/discrete/polar-angle';\nexport * from './axis/grid';\nexport { LineAxisGrid } from './axis/grid/line';\nexport { CircleAxisGrid } from './axis/grid/circle';\nexport * from './segment';\nexport { Segment } from './segment/segment';\nexport * from './data-zoom';\nexport { DataZoom } from './data-zoom/data-zoom';\nexport * from './marker';\nexport { MarkLine, registerMarkLineAnimate } from './marker/line';\nexport { MarkArea, registerMarkAreaAnimate } from './marker/area';\nexport { MarkArcLine, registerMarkArcLineAnimate } from './marker/arc-line';\nexport { MarkArcArea, registerMarkArcAreaAnimate } from './marker/arc-area';\nexport { MarkPoint, registerMarkPointAnimate } from './marker/point';\nexport * from './pager';\nexport * from './legend';\nexport { ColorContinuousLegend } from './legend/color/color';\nexport { SizeContinuousLegend } from './legend/size/size';\nexport * from './title';\nexport { Title } from './title/title';\nexport * from './indicator';\nexport { Indicator } from './indicator/indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport { DiscretePlayer } from './player/discrete-player';\nexport { ContinuousPlayer } from './player/continuous-player';\nexport { PlayerEventEnum } from './player/type/event';\nexport * from './brush';\nexport { Brush } from './brush/brush';\nexport { IOperateType } from './brush/type';\nexport * from './tooltip';\nexport * from './timeline';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './weather';\nexport * from './util';\nexport { labelSmartInvert } from './util/label-smartInvert';\nexport * from './switch';\nexport * from './label-item';\nexport * from './table-series-number';\n"]}

package/es/indicator/type.js

@@ -1,2 +1,2 @@
 export { };
-//# sourceMappingURL=type.js.map
+//# sourceMappingURL=type.js.map

package/es/jsx/index.js

@@ -1,2 +1,2 @@
 export * from "./component-type";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/es/legend/discrete/discrete.d.ts

@@ -15,6 +15,7 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     private _itemContext;
     private _scrollMask;
     private _scrollMaskContext;
+    private _stateDefinitionsCache;
     static defaultAttributes: Partial<DiscreteLegendAttrs>;
     constructor(attributes: DiscreteLegendAttrs, options?: ComponentOptions);
     render(): void;

package/es/legend/discrete/discrete.js

@@ -10,6 +10,8 @@ var __rest = this && this.__rest || function(s, e) {
 
 import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray, minInArray, throttle, isNumberClose, clamp, isObject } from "@visactor/vutils";
 
+import { StateDefinitionCompiler } from "@visactor/vrender-core";
+
 import { graphicCreator } from "../../util/graphic-creator";
 
 import { LegendBase } from "../base";
@@ -40,7 +42,8 @@ export class DiscreteLegend extends LegendBase {
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DiscreteLegend.defaultAttributes, attributes)), 
         this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, 
-        this._itemHeight = 0, this._itemMaxWidth = 0, this._contentMaxHeight = 0, this._onHover = e => {
+        this._itemHeight = 0, this._itemMaxWidth = 0, this._contentMaxHeight = 0, this._stateDefinitionsCache = new WeakMap, 
+        this._onHover = e => {
             const target = e.target;
             if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
                 const legendItem = target.delegate;
@@ -88,7 +91,7 @@ export class DiscreteLegend extends LegendBase {
         };
     }
     render() {
-        super.render(), this._lastActiveItem = null;
+        this._stateDefinitionsCache = new WeakMap, super.render(), this._lastActiveItem = null;
     }
     setSelected(selectedData) {
         var _a;
@@ -206,7 +209,7 @@ export class DiscreteLegend extends LegendBase {
         }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator.group(Object.assign({
             x: 0,
             y: 0
-        }, backgroundStyle.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state)), 
+        }, backgroundStyle.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state, backgroundStyle.reuseStateDefinitions)), 
         itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
         const innerGroup = graphicCreator.group({
             x: 0,
@@ -228,7 +231,7 @@ export class DiscreteLegend extends LegendBase {
                 const color = shapeStyle.state[key].fill || shapeStyle.state[key].stroke;
                 shape.fill && isNil(shapeStyle.state[key].fill) && color && (shapeStyle.state[key].fill = color), 
                 shape.stroke && isNil(shapeStyle.state[key].stroke) && color && (shapeStyle.state[key].stroke = color);
-            })), this._appendDataToShape(itemShape, LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state), 
+            })), this._appendDataToShape(itemShape, LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state, !1), 
             itemShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), 
             innerGroup.add(itemShape);
         }
@@ -256,7 +259,7 @@ export class DiscreteLegend extends LegendBase {
             text: text,
             _originText: labelAttr.formatMethod ? label : void 0
         }), labelShape = createTextGraphicByType(labelAttributes);
-        this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), 
+        this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state, labelStyle.reuseStateDefinitions), 
         labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), 
         innerGroup.add(labelShape);
         const labelSpace = get(labelAttr, "space", DEFAULT_LABEL_SPACE);
@@ -271,7 +274,7 @@ export class DiscreteLegend extends LegendBase {
                 text: valueText,
                 _originText: valueAttr.formatMethod ? value : void 0
             }), valueShape = createTextGraphicByType(valueAttributes);
-            if (this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), 
+            if (this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state, valueStyle.reuseStateDefinitions), 
             valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), 
             this._itemWidthByUser) {
                 const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace;
@@ -342,20 +345,25 @@ export class DiscreteLegend extends LegendBase {
         }));
     }
     _updatePositionOfPager(renderStartY, compWidth, compHeight) {
-        const {pager: pager} = this.attribute, {totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext, position = pager && pager.position || "middle";
+        var _a;
+        const {pager: pager} = this.attribute, {totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext, position = pager && pager.position || "middle", hugContent = !(!pager || !pager.hugContent), pagerSpace = null !== (_a = pager && pager.space) && void 0 !== _a ? _a : DEFAULT_PAGER_SPACE;
         if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
             let y;
-            y = "start" === position ? renderStartY : "end" === position ? renderStartY + compHeight - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2, 
+            y = "start" === position ? renderStartY : "end" === position ? renderStartY + compHeight - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2;
+            let x = compWidth - this._pagerComponent.AABBBounds.width();
+            hugContent && (x = Math.max(0, Math.min(this._itemsContainer.AABBBounds.width() + pagerSpace, x))), 
             this._pagerComponent.setAttributes({
-                x: compWidth - this._pagerComponent.AABBBounds.width(),
+                x: x,
                 y: y
             });
         } else {
             let x;
-            x = "start" === position ? 0 : "end" === position ? compWidth - this._pagerComponent.AABBBounds.width() : (compWidth - this._pagerComponent.AABBBounds.width()) / 2, 
+            x = "start" === position ? 0 : "end" === position ? compWidth - this._pagerComponent.AABBBounds.width() : (compWidth - this._pagerComponent.AABBBounds.width()) / 2;
+            let y = compHeight - this._pagerComponent.AABBBounds.height();
+            hugContent && (y = Math.max(0, Math.min(renderStartY + this._itemsContainer.AABBBounds.height() + pagerSpace, y))), 
             this._pagerComponent.setAttributes({
                 x: x,
-                y: compHeight - this._pagerComponent.AABBBounds.height()
+                y: y
             });
         }
     }
@@ -459,11 +467,14 @@ export class DiscreteLegend extends LegendBase {
             this._itemContext.totalPage = total, this._updatePositionOfPager(renderStartY, compWidth, compHeight);
         }
         defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compHeight + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compWidth + spaceCol)));
+        const hugContent = !!pager.hugContent;
+        let clipWidth = isHorizontal ? contentWidth : compWidth, clipHeight = isHorizontal ? compHeight : contentHeight;
+        hugContent && (isHorizontal ? clipWidth = Math.max(0, Math.min(clipWidth, itemsContainer.AABBBounds.width())) : clipHeight = Math.max(0, Math.min(clipHeight, itemsContainer.AABBBounds.height())));
         const clipGroup = graphicCreator.group({
             x: 0,
             y: renderStartY,
-            width: isHorizontal ? contentWidth : compWidth,
-            height: isHorizontal ? compHeight : contentHeight,
+            width: clipWidth,
+            height: clipHeight,
             clip: !0,
             pickable: !1
         });
@@ -606,8 +617,16 @@ export class DiscreteLegend extends LegendBase {
             item.hasState(LegendStateValue.selected) && selectedData.push(item.data);
         })), selectedData;
     }
-    _appendDataToShape(shape, name, data, delegateShape, states = {}) {
-        shape.name = name, shape.data = data, shape.delegate = delegateShape, shape.states = merge({}, DEFAULT_STATES, states);
+    _appendDataToShape(shape, name, data, delegateShape, states, reuseStateDefinitions = !0) {
+        if (shape.name = name, shape.data = data, shape.delegate = delegateShape, !reuseStateDefinitions) return void (shape.states = merge({}, DEFAULT_STATES, states));
+        const source = null != states ? states : DEFAULT_STATES, cached = this._stateDefinitionsCache.get(source);
+        if (cached) return shape.states = cached.definitions, void shape.setStateDefinitionsWithCompiled(cached.definitions, cached.compiledDefinitions);
+        const definitions = states ? merge({}, DEFAULT_STATES, states) : DEFAULT_STATES, entry = {
+            definitions: definitions,
+            compiledDefinitions: (new StateDefinitionCompiler).compile(definitions)
+        };
+        this._stateDefinitionsCache.set(source, entry), shape.states = entry.definitions, 
+        shape.setStateDefinitionsWithCompiled(entry.definitions, entry.compiledDefinitions);
     }
     _dispatchLegendEvent(eventName, legendItem, event) {
         const currentSelectedItems = this._getSelectedLegends();
@@ -624,13 +643,18 @@ export class DiscreteLegend extends LegendBase {
     }
     _handleStyle(config, item, isSelected, index, items) {
         const newConfig = {};
-        return config.style && (isFunction(config.style) ? newConfig.style = config.style(item, isSelected, index, items) : newConfig.style = config.style), 
-        config.state && (newConfig.state = {}, Object.keys(config.state).forEach((key => {
-            config.state[key] && (isFunction(config.state[key]) ? newConfig.state[key] = config.state[key](item, isSelected, index, items) : newConfig.state[key] = config.state[key]);
-        }))), newConfig;
+        if (config.style && (isFunction(config.style) ? newConfig.style = config.style(item, isSelected, index, items) : newConfig.style = config.style), 
+        config.state) {
+            const stateKeys = Object.keys(config.state), hasStateFunction = stateKeys.some((key => isFunction(config.state[key])));
+            newConfig.reuseStateDefinitions = !hasStateFunction, hasStateFunction ? (newConfig.state = {}, 
+            stateKeys.forEach((key => {
+                config.state[key] && (newConfig.state[key] = isFunction(config.state[key]) ? config.state[key](item, isSelected, index, items) : config.state[key]);
+            }))) : newConfig.state = config.state;
+        }
+        return newConfig;
     }
     release() {
-        super.release(), this.removeAllEventListeners();
+        this._stateDefinitionsCache = new WeakMap, super.release(), this.removeAllEventListeners();
     }
 }