@visactor/vrender-components 1.1.4-alpha.1 → 1.1.4-alpha.2

package/cjs/index.d.ts

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

package/cjs/index.js

@@ -18,7 +18,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.labelSmartInvert = exports.IOperateType = exports.Brush = exports.PlayerEventEnum = exports.ContinuousPlayer = exports.DiscretePlayer = exports.Indicator = exports.Title = exports.SizeContinuousLegend = exports.ColorContinuousLegend = exports.registerMarkPointAnimate = exports.MarkPoint = exports.registerMarkArcAreaAnimate = exports.MarkArcArea = exports.registerMarkArcLineAnimate = exports.MarkArcLine = exports.registerMarkAreaAnimate = exports.MarkArea = exports.registerMarkLineAnimate = exports.MarkLine = exports.DataZoom = exports.Segment = exports.CircleAxisGrid = exports.LineAxisGrid = exports.polarAngleAxisDiscreteTicks = exports.continuousTicks = exports.CircleAxis = exports.LineAxis = exports.registerSymbolDataLabel = exports.DataLabel = exports.PolygonCrosshair = exports.SectorCrosshair = exports.CircleCrosshair = exports.LineCrosshair = exports.loadPoptip = exports.loadScrollbar = exports.ScrollBar = exports.AbstractComponent = exports.version = void 0, 
-exports.version = "1.1.4-alpha.1", __exportStar(require("./core/base"), exports);
+exports.version = "1.1.4-alpha.2", __exportStar(require("./core/base"), exports);
 
 var base_1 = require("./core/base");
 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACa,QAAA,OAAO,GAAG,eAAe,CAAC;AAEvC,8CAA4B;AAC5B,oCAAgD;AAAvC,yGAAA,iBAAiB,OAAA;AAC1B,8CAA4B;AAC5B,8CAA4B;AAC5B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,6CAAmD;AAA1C,uGAAA,aAAa,OAAA;AACtB,wCAAsB;AACtB,2CAAyB;AACzB,0CAA6C;AAApC,oGAAA,UAAU,OAAA;AACnB,8CAA4B;AAC5B,yCAAiD;AAAxC,qGAAA,aAAa,OAAA;AACtB,6CAAqD;AAA5C,yGAAA,eAAe,OAAA;AACxB,6CAAqD;AAA5C,yGAAA,eAAe,OAAA;AACxB,+CAAuD;AAA9C,2GAAA,gBAAgB,OAAA;AACzB,0CAAwB;AACxB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,yCAAyD;AAAhD,iHAAA,uBAAuB,OAAA;AAChC,yCAAuB;AACvB,oCAAuC;AAA9B,gGAAA,QAAQ,OAAA;AACjB,wCAA2C;AAAlC,oGAAA,UAAU,OAAA;AACnB,0DAA8D;AAArD,6GAAA,eAAe,OAAA;AACxB,qEAAoF;AAA3E,0HAAA,2BAA2B,OAAA;AACpC,8CAA4B;AAC5B,yCAAgD;AAAvC,oGAAA,YAAY,OAAA;AACrB,6CAAoD;AAA3C,wGAAA,cAAc,OAAA;AACvB,4CAA0B;AAC1B,6CAA4C;AAAnC,kGAAA,OAAO,OAAA;AAChB,8CAA4B;AAC5B,mDAAiD;AAAxC,qGAAA,QAAQ,OAAA;AACjB,2CAAyB;AACzB,sCAAkE;AAAzD,gGAAA,QAAQ,OAAA;AAAE,+GAAA,uBAAuB,OAAA;AAC1C,sCAAkE;AAAzD,gGAAA,QAAQ,OAAA;AAAE,+GAAA,uBAAuB,OAAA;AAC1C,8CAA4E;AAAnE,uGAAA,WAAW,OAAA;AAAE,sHAAA,0BAA0B,OAAA;AAChD,8CAA4E;AAAnE,uGAAA,WAAW,OAAA;AAAE,sHAAA,0BAA0B,OAAA;AAChD,wCAAqE;AAA5D,kGAAA,SAAS,OAAA;AAAE,iHAAA,wBAAwB,OAAA;AAC5C,0CAAwB;AACxB,2CAAyB;AACzB,8CAA6D;AAApD,8GAAA,qBAAqB,OAAA;AAC9B,2CAA0D;AAAjD,4GAAA,oBAAoB,OAAA;AAC7B,0CAAwB;AACxB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,8CAA4B;AAC5B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,2CAAyB;AACzB,8CAA4B;AAC5B,2CAAyB;AACzB,4DAA0D;AAAjD,iHAAA,cAAc,OAAA;AACvB,gEAA8D;AAArD,qHAAA,gBAAgB,OAAA;AACzB,6CAAsD;AAA7C,wGAAA,eAAe,OAAA;AACxB,0CAAwB;AACxB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,qCAA4C;AAAnC,oGAAA,YAAY,OAAA;AACrB,4CAA0B;AAC1B,6CAA2B;AAC3B,8CAA4B;AAC5B,wCAAsB;AACtB,6CAA2B;AAC3B,0CAAwB;AACxB,8CAA4B;AAC5B,4CAA0B;AAC1B,yCAAuB;AACvB,8DAA4D;AAAnD,qHAAA,gBAAgB,OAAA;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,wDAAsC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"1.1.4-alpha.1\";\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":";;;;;;;;;;;;;;;;;AACa,QAAA,OAAO,GAAG,eAAe,CAAC;AAEvC,8CAA4B;AAC5B,oCAAgD;AAAvC,yGAAA,iBAAiB,OAAA;AAC1B,8CAA4B;AAC5B,8CAA4B;AAC5B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,6CAAmD;AAA1C,uGAAA,aAAa,OAAA;AACtB,wCAAsB;AACtB,2CAAyB;AACzB,0CAA6C;AAApC,oGAAA,UAAU,OAAA;AACnB,8CAA4B;AAC5B,yCAAiD;AAAxC,qGAAA,aAAa,OAAA;AACtB,6CAAqD;AAA5C,yGAAA,eAAe,OAAA;AACxB,6CAAqD;AAA5C,yGAAA,eAAe,OAAA;AACxB,+CAAuD;AAA9C,2GAAA,gBAAgB,OAAA;AACzB,0CAAwB;AACxB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,yCAAyD;AAAhD,iHAAA,uBAAuB,OAAA;AAChC,yCAAuB;AACvB,oCAAuC;AAA9B,gGAAA,QAAQ,OAAA;AACjB,wCAA2C;AAAlC,oGAAA,UAAU,OAAA;AACnB,0DAA8D;AAArD,6GAAA,eAAe,OAAA;AACxB,qEAAoF;AAA3E,0HAAA,2BAA2B,OAAA;AACpC,8CAA4B;AAC5B,yCAAgD;AAAvC,oGAAA,YAAY,OAAA;AACrB,6CAAoD;AAA3C,wGAAA,cAAc,OAAA;AACvB,4CAA0B;AAC1B,6CAA4C;AAAnC,kGAAA,OAAO,OAAA;AAChB,8CAA4B;AAC5B,mDAAiD;AAAxC,qGAAA,QAAQ,OAAA;AACjB,2CAAyB;AACzB,sCAAkE;AAAzD,gGAAA,QAAQ,OAAA;AAAE,+GAAA,uBAAuB,OAAA;AAC1C,sCAAkE;AAAzD,gGAAA,QAAQ,OAAA;AAAE,+GAAA,uBAAuB,OAAA;AAC1C,8CAA4E;AAAnE,uGAAA,WAAW,OAAA;AAAE,sHAAA,0BAA0B,OAAA;AAChD,8CAA4E;AAAnE,uGAAA,WAAW,OAAA;AAAE,sHAAA,0BAA0B,OAAA;AAChD,wCAAqE;AAA5D,kGAAA,SAAS,OAAA;AAAE,iHAAA,wBAAwB,OAAA;AAC5C,0CAAwB;AACxB,2CAAyB;AACzB,8CAA6D;AAApD,8GAAA,qBAAqB,OAAA;AAC9B,2CAA0D;AAAjD,4GAAA,oBAAoB,OAAA;AAC7B,0CAAwB;AACxB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,8CAA4B;AAC5B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,2CAAyB;AACzB,8CAA4B;AAC5B,2CAAyB;AACzB,4DAA0D;AAAjD,iHAAA,cAAc,OAAA;AACvB,gEAA8D;AAArD,qHAAA,gBAAgB,OAAA;AACzB,6CAAsD;AAA7C,wGAAA,eAAe,OAAA;AACxB,0CAAwB;AACxB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,qCAA4C;AAAnC,oGAAA,YAAY,OAAA;AACrB,4CAA0B;AAC1B,6CAA2B;AAC3B,8CAA4B;AAC5B,wCAAsB;AACtB,6CAA2B;AAC3B,0CAAwB;AACxB,8CAA4B;AAC5B,4CAA0B;AAC1B,yCAAuB;AACvB,8DAA4D;AAAnD,qHAAA,gBAAgB,OAAA;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,wDAAsC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"1.1.4-alpha.2\";\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/cjs/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/cjs/legend/discrete/discrete.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.DiscreteLegend = void 0;
 
-const vutils_1 = require("@visactor/vutils"), graphic_creator_1 = require("../../util/graphic-creator"), base_1 = require("../base"), pager_1 = require("../../pager"), constant_1 = require("../constant"), register_1 = require("../register"), util_1 = require("../../util"), scrollbar_1 = require("../../scrollbar"), static_truth_1 = require("../../animation/static-truth"), DEFAULT_STATES = {
+const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), graphic_creator_1 = require("../../util/graphic-creator"), base_1 = require("../base"), pager_1 = require("../../pager"), constant_1 = require("../constant"), register_1 = require("../register"), util_1 = require("../../util"), scrollbar_1 = require("../../scrollbar"), static_truth_1 = require("../../animation/static-truth"), DEFAULT_STATES = {
     [constant_1.LegendStateValue.focus]: {},
     [constant_1.LegendStateValue.selected]: {},
     [constant_1.LegendStateValue.selectedHover]: {},
@@ -28,7 +28,8 @@ class DiscreteLegend extends base_1.LegendBase {
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.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(constant_1.LEGEND_ELEMENT_NAME.item)) {
                 const legendItem = target.delegate;
@@ -78,7 +79,7 @@ class DiscreteLegend extends base_1.LegendBase {
         };
     }
     render() {
-        super.render(), this._lastActiveItem = null;
+        this._stateDefinitionsCache = new WeakMap, super.render(), this._lastActiveItem = null;
     }
     setSelected(selectedData) {
         var _a;
@@ -199,7 +200,7 @@ class DiscreteLegend extends base_1.LegendBase {
         }), this._appendDataToShape(itemGroup, constant_1.LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphic_creator_1.graphicCreator.group(Object.assign({
             x: 0,
             y: 0
-        }, backgroundStyle.style)), this._appendDataToShape(itemGroup, constant_1.LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state)), 
+        }, backgroundStyle.style)), this._appendDataToShape(itemGroup, constant_1.LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state, backgroundStyle.reuseStateDefinitions)), 
         itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected);
         const innerGroup = graphic_creator_1.graphicCreator.group({
             x: 0,
@@ -216,12 +217,16 @@ class DiscreteLegend extends base_1.LegendBase {
                 y: 0,
                 symbolType: "circle",
                 strokeBoundsBuffer: 0
-            }, shape), shapeStyle.style));
-            Object.keys(shapeStyle.state || {}).forEach((key => {
-                const color = shapeStyle.state[key].fill || shapeStyle.state[key].stroke;
-                shape.fill && (0, vutils_1.isNil)(shapeStyle.state[key].fill) && color && (shapeStyle.state[key].fill = color), 
-                shape.stroke && (0, vutils_1.isNil)(shapeStyle.state[key].stroke) && color && (shapeStyle.state[key].stroke = color);
-            })), this._appendDataToShape(itemShape, constant_1.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state), 
+            }, shape), shapeStyle.style)), shapeStateNeedsItemColor = Object.keys(shapeStyle.state || {}).some((key => {
+                const state = shapeStyle.state[key];
+                return !!(state.fill || state.stroke) && (!!shape.fill && (0, vutils_1.isNil)(state.fill) || !!shape.stroke && (0, 
+                vutils_1.isNil)(state.stroke));
+            })), shapeStates = shapeStateNeedsItemColor ? (0, vutils_1.merge)({}, shapeStyle.state) : shapeStyle.state;
+            Object.keys(shapeStates || {}).forEach((key => {
+                const state = shapeStates[key], color = state.fill || state.stroke;
+                shape.fill && (0, vutils_1.isNil)(state.fill) && color && (state.fill = color), 
+                shape.stroke && (0, vutils_1.isNil)(state.stroke) && color && (state.stroke = color);
+            })), this._appendDataToShape(itemShape, constant_1.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStates, !shapeStateNeedsItemColor && !1 !== shapeStyle.reuseStateDefinitions), 
             itemShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
             innerGroup.add(itemShape);
         }
@@ -249,7 +254,7 @@ class DiscreteLegend extends base_1.LegendBase {
             text: text,
             _originText: labelAttr.formatMethod ? label : void 0
         }), labelShape = (0, util_1.createTextGraphicByType)(labelAttributes);
-        this._appendDataToShape(labelShape, constant_1.LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), 
+        this._appendDataToShape(labelShape, constant_1.LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state, labelStyle.reuseStateDefinitions), 
         labelShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
         innerGroup.add(labelShape);
         const labelSpace = (0, vutils_1.get)(labelAttr, "space", constant_1.DEFAULT_LABEL_SPACE);
@@ -264,7 +269,7 @@ class DiscreteLegend extends base_1.LegendBase {
                 text: valueText,
                 _originText: valueAttr.formatMethod ? value : void 0
             }), valueShape = (0, util_1.createTextGraphicByType)(valueAttributes);
-            if (this._appendDataToShape(valueShape, constant_1.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), 
+            if (this._appendDataToShape(valueShape, constant_1.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state, valueStyle.reuseStateDefinitions), 
             valueShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
             this._itemWidthByUser) {
                 const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace;
@@ -335,20 +340,25 @@ class DiscreteLegend extends base_1.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 : constant_1.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
             });
         }
     }
@@ -453,11 +463,14 @@ class DiscreteLegend extends base_1.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 = graphic_creator_1.graphicCreator.group({
             x: 0,
             y: renderStartY,
-            width: isHorizontal ? contentWidth : compWidth,
-            height: isHorizontal ? compHeight : contentHeight,
+            width: clipWidth,
+            height: clipHeight,
             clip: !0,
             pickable: !1
         });
@@ -600,9 +613,17 @@ class DiscreteLegend extends base_1.LegendBase {
             item.hasState(constant_1.LegendStateValue.selected) && selectedData.push(item.data);
         })), selectedData;
     }
-    _appendDataToShape(shape, name, data, delegateShape, states = {}) {
-        shape.name = name, shape.data = data, shape.delegate = delegateShape, shape.states = (0, 
-        vutils_1.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 = (0, 
+        vutils_1.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 ? (0, vutils_1.merge)({}, DEFAULT_STATES, states) : DEFAULT_STATES, entry = {
+            definitions: definitions,
+            compiledDefinitions: (new vrender_core_1.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();
@@ -619,13 +640,19 @@ class DiscreteLegend extends base_1.LegendBase {
     }
     _handleStyle(config, item, isSelected, index, items) {
         const newConfig = {};
-        return config.style && ((0, vutils_1.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] && ((0, vutils_1.isFunction)(config.state[key]) ? newConfig.state[key] = config.state[key](item, isSelected, index, items) : newConfig.state[key] = config.state[key]);
-        }))), newConfig;
+        if (config.style && ((0, vutils_1.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 => (0, 
+            vutils_1.isFunction)(config.state[key])));
+            newConfig.reuseStateDefinitions = !hasStateFunction, hasStateFunction ? (newConfig.state = {}, 
+            stateKeys.forEach((key => {
+                config.state[key] && (newConfig.state[key] = (0, vutils_1.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();
     }
 }