@visactor/vrender-components 0.17.0-alpha.8 → 0.17.1-alpha.1

package/cjs/legend/color/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/legend/color/color.ts"],"names":[],"mappings":"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","file":"color.js","sourcesContent":["/**\n * @description 连续颜色图例\n * TODO:\n * showHandlers 测试\n */\nimport { merge, isEmpty, get } from '@visactor/vutils';\nimport type { FederatedPointerEvent, IColor, ILinearGradient, INode } from '@visactor/vrender-core';\nimport type { ILinearScale } from '@visactor/vscale';\nimport { LinearScale } from '@visactor/vscale';\nimport { LegendBase } from '../base';\nimport { Slider } from '../../slider';\nimport { DEFAULT_TITLE_SPACE } from '../constant';\nimport type { ColorLegendAttributes } from './type';\n\nexport class ColorContinuousLegend extends LegendBase<ColorLegendAttributes> {\n  name = 'colorLegend';\n\n  static defaultAttributes = {\n    layout: 'horizontal',\n    title: {\n      // orient: 'top',\n      align: 'start',\n      space: DEFAULT_TITLE_SPACE,\n      textStyle: {\n        fontSize: 12,\n        fontWeight: 'bold',\n        fill: 'rgba(46, 47, 50, 1)'\n      }\n    },\n    handlerSize: 10,\n    handlerStyle: {\n      lineWidth: 4,\n      stroke: '#fff',\n      outerBorder: {\n        distance: 2,\n        lineWidth: 1,\n        stroke: '#ccc'\n      }\n    }\n  };\n\n  private _slider!: Slider;\n  private _colorScale!: ILinearScale;\n  private _color: IColor | undefined;\n\n  constructor(attributes: ColorLegendAttributes) {\n    super(merge({}, ColorContinuousLegend.defaultAttributes, attributes));\n  }\n\n  /**\n   * 更新数据选中范围\n   * @param value 选中数据范围\n   * @returns\n   */\n  setSelected(value: number[]) {\n    if (!this._slider) {\n      return;\n    }\n    this._slider.setValue(value);\n    this._updateColor();\n  }\n\n  protected _renderContent(): void {\n    const {\n      colors,\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler = true,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle,\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip\n    } = this.attribute as ColorLegendAttributes;\n\n    // 创建 colorScale\n    const domain = [];\n    const step = (max - min) / (colors.length - 1);\n    for (let i = 0; i < colors.length; i++) {\n      domain.push(min + step * i);\n    }\n    this._colorScale = new LinearScale().domain(domain, true).range(colors);\n    this._color = this._getTrackColor();\n\n    const slider = new Slider({\n      x: 0,\n      y: 0,\n      range: {\n        draggableTrack: true\n      },\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle: {\n        fill: this._color,\n        ...trackStyle\n      },\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip\n    });\n    this._innerView.add(slider as unknown as INode);\n    this._slider = slider;\n    // 做下位置调整，对齐\n    slider.translateTo(\n      0 - slider.AABBBounds.x1,\n      (this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', DEFAULT_TITLE_SPACE) : 0) -\n        slider.AABBBounds.y1\n    );\n    this._updateColor();\n  }\n\n  protected _bindEvents(): void {\n    if (this._slider) {\n      this._slider.addEventListener('change', this._onSliderChange as EventListenerOrEventListenerObject);\n    }\n  }\n\n  private _getTrackColor(): IColor | undefined {\n    const { colors, layout } = this.attribute as ColorLegendAttributes;\n\n    if (isEmpty(colors)) {\n      return undefined;\n    }\n    const count = colors.length;\n    if (count === 1) {\n      return colors[0];\n    }\n    const stops = [];\n\n    for (let i = 0; i < count; i++) {\n      const percent = i / (count - 1);\n      stops.push({\n        offset: percent,\n        color: colors[i]\n      });\n    }\n    const isHorizontal = layout === 'horizontal';\n    return {\n      gradient: 'linear',\n      stops,\n      x0: 0,\n      y0: 0,\n      x1: isHorizontal ? 1 : 0,\n      y1: isHorizontal ? 0 : 1\n    };\n  }\n\n  private _onSliderChange = (e: FederatedPointerEvent) => {\n    // 更新 handler 以及 track 的渐变色\n    this._updateColor();\n    this.dispatchEvent(e);\n  };\n\n  private _updateColor() {\n    const { layout = 'horizontal', colors, railWidth, railHeight } = this.attribute as ColorLegendAttributes;\n    const { startHandler, endHandler, track } = this._slider;\n    const { startValue, endValue, startPos, endPos } = this._slider.currentValue;\n\n    // 计算颜色\n    const startHandlerColor = this._colorScale.scale(startValue);\n    const endHandlerColor = this._colorScale.scale(endValue);\n    startHandler?.setAttribute('fill', startHandlerColor);\n    endHandler?.setAttribute('fill', endHandlerColor);\n\n    const isHorizontal = layout === 'horizontal';\n    const railLen = isHorizontal ? railWidth : railHeight;\n    const trackLength = Math.abs((startPos as number) - (endPos as number));\n\n    // 计算渐变色\n    if (trackLength !== railLen && colors && colors.length > 1) {\n      const stops = (this._color as ILinearGradient).stops;\n      const start = Math.min(startPos as number, endPos as number);\n      const end = Math.max(startPos as number, endPos as number);\n      const startRatio = start / railLen;\n      const endRatio = end / railLen;\n      const range = endRatio - startRatio;\n      const betweenStops = stops.filter(stop => stop.offset > startRatio && stop.offset < endRatio);\n\n      const minValue = Math.min(startValue, endValue);\n      const maxValue = Math.max(startValue, endValue);\n      const startColor = this._colorScale.scale(minValue);\n      const endColor = this._colorScale.scale(maxValue);\n      const newStops = [{ offset: 0, color: startColor }];\n      betweenStops.forEach(stop => {\n        newStops.push({\n          offset: (stop.offset - startRatio) / range,\n          color: stop.color\n        });\n      });\n      newStops.push({\n        offset: 1,\n        color: endColor\n      });\n      track.setAttribute('fill', {\n        ...(this._color as ILinearGradient),\n        stops: newStops\n      });\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../src/legend/color/color.ts"],"names":[],"mappings":";;;AAKA,6CAAuD;AAGvD,6CAA+C;AAC/C,kCAAqC;AACrC,yCAAsC;AACtC,0CAAkD;AAIlD,MAAa,qBAAsB,SAAQ,iBAAiC;IA+B1E,YAAY,UAAiC,EAAE,OAA0B;QACvE,KAAK,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,cAAK,EAAC,EAAE,EAAE,qBAAqB,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;QA/B5G,SAAI,GAAG,aAAa,CAAC;QA+Jb,oBAAe,GAAG,CAAC,CAAwB,EAAE,EAAE;YAErD,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,CAAC;IAnIF,CAAC;IAOD,WAAW,CAAC,KAAe;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAES,cAAc;QACtB,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,KAAK,EACL,GAAG,EACH,GAAG,EACH,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,GAAG,IAAI,EAClB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,OAAO,EACP,WAAW,EACX,WAAW,EACX,OAAO,EACP,mBAAmB,EACpB,GAAG,IAAI,CAAC,SAAkC,CAAC;QAG5C,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,WAAW,GAAG,IAAI,oBAAW,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAEpC,MAAM,MAAM,GAAG,IAAI,eAAM,CAAC;YACxB,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;aACrB;YACD,QAAQ;YACR,MAAM;YACN,KAAK;YACL,GAAG;YACH,GAAG;YACH,KAAK;YACL,SAAS;YACT,UAAU;YACV,WAAW;YACX,WAAW;YACX,YAAY;YACZ,SAAS;YACT,UAAU,kBACR,IAAI,EAAE,IAAI,CAAC,MAAM,IACd,UAAU,CACd;YACD,SAAS;YACT,OAAO;YACP,WAAW;YACX,WAAW;YACX,OAAO;YACP,mBAAmB;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAA0B,CAAC,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtB,MAAM,CAAC,WAAW,CAChB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,EACxB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,IAAA,YAAG,EAAC,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,8BAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3G,MAAM,CAAC,UAAU,CAAC,EAAE,CACvB,CAAC;QACF,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAES,WAAW;QACnB,IAAI,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE;YACtC,OAAO;SACR;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAqD,CAAC,CAAC;SACrG;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAkC,CAAC;QAEnE,IAAI,IAAA,gBAAO,EAAC,MAAM,CAAC,EAAE;YACnB,OAAO,SAAS,CAAC;SAClB;QACD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;QAC5B,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;SAClB;QACD,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;YAC9B,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAChC,KAAK,CAAC,IAAI,CAAC;gBACT,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;aACjB,CAAC,CAAC;SACJ;QACD,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY,CAAC;QAC7C,OAAO;YACL,QAAQ,EAAE,QAAQ;YAClB,KAAK;YACL,EAAE,EAAE,CAAC;YACL,EAAE,EAAE,CAAC;YACL,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxB,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACzB,CAAC;IACJ,CAAC;IAQO,YAAY;QAClB,MAAM,EAAE,MAAM,GAAG,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,SAAkC,CAAC;QACzG,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACzD,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAG7E,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACzD,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;QACtD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QAElD,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY,CAAC;QAC7C,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;QACtD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAE,QAAmB,GAAI,MAAiB,CAAC,CAAC;QAGxE,IAAI,WAAW,KAAK,OAAO,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1D,MAAM,KAAK,GAAI,IAAI,CAAC,MAA0B,CAAC,KAAK,CAAC;YACrD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAkB,EAAE,MAAgB,CAAC,CAAC;YAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAkB,EAAE,MAAgB,CAAC,CAAC;YAC3D,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,CAAC;YACnC,MAAM,QAAQ,GAAG,GAAG,GAAG,OAAO,CAAC;YAC/B,MAAM,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;YACpC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC;YAE9F,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAChD,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAClD,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;YACpD,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC1B,QAAQ,CAAC,IAAI,CAAC;oBACZ,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,GAAG,KAAK;oBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YACH,QAAQ,CAAC,IAAI,CAAC;gBACZ,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,QAAQ;aAChB,CAAC,CAAC;YACH,KAAK,CAAC,YAAY,CAAC,MAAM,kCACnB,IAAI,CAAC,MAA0B,KACnC,KAAK,EAAE,QAAQ,IACf,CAAC;SACJ;IACH,CAAC;;AAnNH,sDAoNC;AAjNQ,uCAAiB,GAAG;IACzB,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE;QAEL,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,8BAAmB;QAC1B,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,MAAM;YAClB,IAAI,EAAE,qBAAqB;SAC5B;KACF;IACD,WAAW,EAAE,EAAE;IACf,YAAY,EAAE;QACZ,SAAS,EAAE,CAAC;QACZ,MAAM,EAAE,MAAM;QACd,WAAW,EAAE;YACX,QAAQ,EAAE,CAAC;YACX,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;SACf;KACF;CACF,CAAC","file":"color.js","sourcesContent":["/**\n * @description 连续颜色图例\n * TODO:\n * showHandlers 测试\n */\nimport { merge, isEmpty, get } from '@visactor/vutils';\nimport type { FederatedPointerEvent, IColor, ILinearGradient, INode } from '@visactor/vrender-core';\nimport type { ILinearScale } from '@visactor/vscale';\nimport { LinearScale } from '@visactor/vscale';\nimport { LegendBase } from '../base';\nimport { Slider } from '../../slider';\nimport { DEFAULT_TITLE_SPACE } from '../constant';\nimport type { ColorLegendAttributes } from './type';\nimport type { ComponentOptions } from '../../interface';\n\nexport class ColorContinuousLegend extends LegendBase<ColorLegendAttributes> {\n  name = 'colorLegend';\n\n  static defaultAttributes = {\n    layout: 'horizontal',\n    title: {\n      // orient: 'top',\n      align: 'start',\n      space: DEFAULT_TITLE_SPACE,\n      textStyle: {\n        fontSize: 12,\n        fontWeight: 'bold',\n        fill: 'rgba(46, 47, 50, 1)'\n      }\n    },\n    handlerSize: 10,\n    handlerStyle: {\n      lineWidth: 4,\n      stroke: '#fff',\n      outerBorder: {\n        distance: 2,\n        lineWidth: 1,\n        stroke: '#ccc'\n      }\n    }\n  };\n\n  private _slider!: Slider;\n  private _colorScale!: ILinearScale;\n  private _color: IColor | undefined;\n\n  constructor(attributes: ColorLegendAttributes, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, ColorContinuousLegend.defaultAttributes, attributes));\n  }\n\n  /**\n   * 更新数据选中范围\n   * @param value 选中数据范围\n   * @returns\n   */\n  setSelected(value: number[]) {\n    if (!this._slider) {\n      return;\n    }\n    this._slider.setValue(value);\n    this._updateColor();\n  }\n\n  protected _renderContent(): void {\n    const {\n      colors,\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler = true,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle,\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip,\n      disableTriggerEvent\n    } = this.attribute as ColorLegendAttributes;\n\n    // 创建 colorScale\n    const domain = [];\n    const step = (max - min) / (colors.length - 1);\n    for (let i = 0; i < colors.length; i++) {\n      domain.push(min + step * i);\n    }\n    this._colorScale = new LinearScale().domain(domain, true).range(colors);\n    this._color = this._getTrackColor();\n\n    const slider = new Slider({\n      x: 0,\n      y: 0,\n      range: {\n        draggableTrack: true\n      },\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle: {\n        fill: this._color,\n        ...trackStyle\n      },\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip,\n      disableTriggerEvent\n    });\n    this._innerView.add(slider as unknown as INode);\n    this._slider = slider;\n    // 做下位置调整，对齐\n    slider.translateTo(\n      0 - slider.AABBBounds.x1,\n      (this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', DEFAULT_TITLE_SPACE) : 0) -\n        slider.AABBBounds.y1\n    );\n    this._updateColor();\n  }\n\n  protected _bindEvents(): void {\n    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\n    if (this._slider) {\n      this._slider.addEventListener('change', this._onSliderChange as EventListenerOrEventListenerObject);\n    }\n  }\n\n  private _getTrackColor(): IColor | undefined {\n    const { colors, layout } = this.attribute as ColorLegendAttributes;\n\n    if (isEmpty(colors)) {\n      return undefined;\n    }\n    const count = colors.length;\n    if (count === 1) {\n      return colors[0];\n    }\n    const stops = [];\n\n    for (let i = 0; i < count; i++) {\n      const percent = i / (count - 1);\n      stops.push({\n        offset: percent,\n        color: colors[i]\n      });\n    }\n    const isHorizontal = layout === 'horizontal';\n    return {\n      gradient: 'linear',\n      stops,\n      x0: 0,\n      y0: 0,\n      x1: isHorizontal ? 1 : 0,\n      y1: isHorizontal ? 0 : 1\n    };\n  }\n\n  private _onSliderChange = (e: FederatedPointerEvent) => {\n    // 更新 handler 以及 track 的渐变色\n    this._updateColor();\n    this.dispatchEvent(e);\n  };\n\n  private _updateColor() {\n    const { layout = 'horizontal', colors, railWidth, railHeight } = this.attribute as ColorLegendAttributes;\n    const { startHandler, endHandler, track } = this._slider;\n    const { startValue, endValue, startPos, endPos } = this._slider.currentValue;\n\n    // 计算颜色\n    const startHandlerColor = this._colorScale.scale(startValue);\n    const endHandlerColor = this._colorScale.scale(endValue);\n    startHandler?.setAttribute('fill', startHandlerColor);\n    endHandler?.setAttribute('fill', endHandlerColor);\n\n    const isHorizontal = layout === 'horizontal';\n    const railLen = isHorizontal ? railWidth : railHeight;\n    const trackLength = Math.abs((startPos as number) - (endPos as number));\n\n    // 计算渐变色\n    if (trackLength !== railLen && colors && colors.length > 1) {\n      const stops = (this._color as ILinearGradient).stops;\n      const start = Math.min(startPos as number, endPos as number);\n      const end = Math.max(startPos as number, endPos as number);\n      const startRatio = start / railLen;\n      const endRatio = end / railLen;\n      const range = endRatio - startRatio;\n      const betweenStops = stops.filter(stop => stop.offset > startRatio && stop.offset < endRatio);\n\n      const minValue = Math.min(startValue, endValue);\n      const maxValue = Math.max(startValue, endValue);\n      const startColor = this._colorScale.scale(minValue);\n      const endColor = this._colorScale.scale(maxValue);\n      const newStops = [{ offset: 0, color: startColor }];\n      betweenStops.forEach(stop => {\n        newStops.push({\n          offset: (stop.offset - startRatio) / range,\n          color: stop.color\n        });\n      });\n      newStops.push({\n        offset: 1,\n        color: endColor\n      });\n      track.setAttribute('fill', {\n        ...(this._color as ILinearGradient),\n        stops: newStops\n      });\n    }\n  }\n}\n"]}

package/cjs/legend/constant.js

@@ -20,4 +20,5 @@ function(LegendEvent) {
     LEGEND_ELEMENT_NAME.item = "legendItem", LEGEND_ELEMENT_NAME.itemShape = "legendItemShape", 
     LEGEND_ELEMENT_NAME.itemLabel = "legendItemLabel", LEGEND_ELEMENT_NAME.itemValue = "legendItemValue", 
     LEGEND_ELEMENT_NAME.focus = "legendItemFocus";
-}(LEGEND_ELEMENT_NAME = exports.LEGEND_ELEMENT_NAME || (exports.LEGEND_ELEMENT_NAME = {}));
+}(LEGEND_ELEMENT_NAME = exports.LEGEND_ELEMENT_NAME || (exports.LEGEND_ELEMENT_NAME = {}));
+//# sourceMappingURL=constant.js.map

package/cjs/legend/discrete/discrete.d.ts

@@ -1,5 +1,6 @@
 import { LegendBase } from '../base';
 import type { DiscreteLegendAttrs } from './type';
+import type { ComponentOptions } from '../../interface';
 export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     name: string;
     private _itemsContainer;
@@ -8,8 +9,9 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     private _itemHeight;
     private _itemMaxWidth;
     private _pager;
+    private _lastActiveItem;
     static defaultAttributes: Partial<DiscreteLegendAttrs>;
-    constructor(attributes: DiscreteLegendAttrs);
+    constructor(attributes: DiscreteLegendAttrs, options?: ComponentOptions);
     setSelected(selectedData: (string | number)[]): void;
     protected _renderContent(): void;
     protected _bindEvents(): void;
@@ -18,6 +20,8 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     private _onHover;
     private _onUnHover;
     private _onClick;
+    private _hover;
+    private _unHover;
     private _setLegendItemState;
     private _removeLegendItemState;
     private _getSelectedLegends;

package/cjs/legend/discrete/discrete.js

@@ -23,34 +23,22 @@ const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visacto
 };
 
 class DiscreteLegend extends base_1.LegendBase {
-    constructor(attributes) {
-        super((0, vutils_1.merge)({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", 
-        this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, 
-        this._itemMaxWidth = 0, this._onHover = e => {
+    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._onHover = e => {
             var _a;
             const target = e.target;
             if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(constant_1.LEGEND_ELEMENT_NAME.item)) {
                 const legendItem = target.delegate;
-                legendItem.hasState(constant_1.LegendStateValue.selected) ? this._setLegendItemState(legendItem, constant_1.LegendStateValue.selectedHover, e) : this._setLegendItemState(legendItem, constant_1.LegendStateValue.unSelectedHover, e);
-                const focusButton = legendItem.getChildren()[0].find((node => node.name === constant_1.LEGEND_ELEMENT_NAME.focus), !1);
-                focusButton && focusButton.setAttribute("visible", !0), this._dispatchEvent(constant_1.LegendEvent.legendItemHover, legendItem, e);
-            }
+                if (this._lastActiveItem) {
+                    if (this._lastActiveItem.id === legendItem.id) return;
+                    this._unHover(this._lastActiveItem, e);
+                }
+                this._hover(legendItem, e);
+            } else this._lastActiveItem && (this._unHover(this._lastActiveItem, e), this._lastActiveItem = null);
         }, this._onUnHover = e => {
-            var _a;
-            const target = e.target;
-            if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(constant_1.LEGEND_ELEMENT_NAME.item)) {
-                const legendItem = target.delegate;
-                let attributeUpdate = !1;
-                (legendItem.hasState(constant_1.LegendStateValue.unSelectedHover) || legendItem.hasState(constant_1.LegendStateValue.selectedHover)) && (attributeUpdate = !0), 
-                legendItem.removeState(constant_1.LegendStateValue.unSelectedHover), legendItem.removeState(constant_1.LegendStateValue.selectedHover), 
-                legendItem.getChildren()[0].getChildren().forEach((child => {
-                    attributeUpdate || !child.hasState(constant_1.LegendStateValue.unSelectedHover) && !child.hasState(constant_1.LegendStateValue.selectedHover) || (attributeUpdate = !0), 
-                    child.removeState(constant_1.LegendStateValue.unSelectedHover), child.removeState(constant_1.LegendStateValue.selectedHover);
-                }));
-                const focusButton = legendItem.getChildren()[0].find((node => node.name === constant_1.LEGEND_ELEMENT_NAME.focus), !1);
-                focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(constant_1.LegendEvent.legendItemAttributeUpdate, legendItem, e), 
-                this._dispatchEvent(constant_1.LegendEvent.legendItemUnHover, legendItem, e);
-            }
+            this._lastActiveItem && (this._unHover(this._lastActiveItem, e), this._lastActiveItem = null);
         }, this._onClick = e => {
             var _a, _b, _c, _d, _e;
             const target = e.target;
@@ -102,7 +90,7 @@ class DiscreteLegend extends base_1.LegendBase {
         if (!1 === item.visible || (0, vutils_1.isEmpty)(items)) return;
         let legendItems = items;
         reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = (0, vrender_core_1.createGroup)({
+        const itemsContainer = vrender_core_1.graphicCreator.group({
             x: 0,
             y: 0
         });
@@ -134,9 +122,10 @@ class DiscreteLegend extends base_1.LegendBase {
         vutils_1.get)(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
     }
     _bindEvents() {
+        if (this.attribute.disableTriggerEvent) return;
         if (!this._itemsContainer) return;
         const {hover: hover = !0, select: select = !0} = this.attribute;
-        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerout", this._onUnHover)), 
+        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), 
         select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
     }
     _renderEachItem(item, isSelected, index, items) {
@@ -146,54 +135,54 @@ class DiscreteLegend extends base_1.LegendBase {
         valueAttr = this._handleStyle(valueAttr, item, isSelected, index, items), background = this._handleStyle(background, item, isSelected, index, items);
         const parsedPadding = (0, vutils_1.normalizePadding)(padding);
         let itemGroup;
-        !1 === background.visible ? (itemGroup = (0, vrender_core_1.createGroup)({
+        !1 === background.visible ? (itemGroup = vrender_core_1.graphicCreator.group({
             x: 0,
             y: 0,
             cursor: (null == background ? void 0 : background.style).cursor
-        }), this._appendDataToShape(itemGroup, constant_1.LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = (0, 
-        vrender_core_1.createGroup)(Object.assign({
+        }), this._appendDataToShape(itemGroup, constant_1.LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = vrender_core_1.graphicCreator.group(Object.assign({
             x: 0,
             y: 0
         }, null == background ? void 0 : background.style)), this._appendDataToShape(itemGroup, constant_1.LEGEND_ELEMENT_NAME.item, item, itemGroup, null == background ? void 0 : background.state)), 
-        itemGroup.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected);
-        const innerGroup = (0, vrender_core_1.createGroup)({
+        itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected);
+        const innerGroup = vrender_core_1.graphicCreator.group({
             x: 0,
             y: 0,
             pickable: !1
         });
         itemGroup.add(innerGroup);
-        let focusStartX = 0;
-        const shapeSize = (0, vutils_1.get)(shapeAttr, "style.size", constant_1.DEFAULT_SHAPE_SIZE), shapeSpace = (0, 
-        vutils_1.get)(shapeAttr, "space", constant_1.DEFAULT_SHAPE_SPACE), itemShape = (0, 
-        vrender_core_1.createSymbol)(Object.assign(Object.assign({
-            x: 0,
-            y: 0,
-            symbolType: "circle",
-            strokeBoundsBuffer: 0
-        }, shape), shapeAttr.style));
-        let focusShape;
-        Object.keys(shapeAttr.state || {}).forEach((key => {
-            const color = shapeAttr.state[key].fill || shapeAttr.state[key].stroke;
-            shape.fill && (0, vutils_1.isNil)(shapeAttr.state[key].fill) && color && (shapeAttr.state[key].fill = color), 
-            shape.stroke && (0, vutils_1.isNil)(shapeAttr.state[key].stroke) && color && (shapeAttr.state[key].stroke = color);
-        })), this._appendDataToShape(itemShape, constant_1.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, null == shapeAttr ? void 0 : shapeAttr.state), 
-        itemShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
-        innerGroup.add(itemShape);
+        let focusShape, focusStartX = 0, shapeSize = 0, shapeSpace = 0;
+        if (!1 !== (null == shapeAttr ? void 0 : shapeAttr.visible)) {
+            shapeSize = (0, vutils_1.get)(shapeAttr, "style.size", constant_1.DEFAULT_SHAPE_SIZE), 
+            shapeSpace = (0, vutils_1.get)(shapeAttr, "space", constant_1.DEFAULT_SHAPE_SPACE);
+            const itemShape = vrender_core_1.graphicCreator.symbol(Object.assign(Object.assign({
+                x: 0,
+                y: 0,
+                symbolType: "circle",
+                strokeBoundsBuffer: 0
+            }, shape), shapeAttr.style));
+            Object.keys(shapeAttr.state || {}).forEach((key => {
+                const color = shapeAttr.state[key].fill || shapeAttr.state[key].stroke;
+                shape.fill && (0, vutils_1.isNil)(shapeAttr.state[key].fill) && color && (shapeAttr.state[key].fill = color), 
+                shape.stroke && (0, vutils_1.isNil)(shapeAttr.state[key].stroke) && color && (shapeAttr.state[key].stroke = color);
+            })), this._appendDataToShape(itemShape, constant_1.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, null == shapeAttr ? void 0 : shapeAttr.state), 
+            itemShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
+            innerGroup.add(itemShape);
+        }
         let focusSpace = 0;
         if (focus) {
             const focusSize = (0, vutils_1.get)(focusIconStyle, "size", constant_1.DEFAULT_SHAPE_SIZE);
-            focusShape = (0, vrender_core_1.createSymbol)(Object.assign(Object.assign({
+            focusShape = vrender_core_1.graphicCreator.symbol(Object.assign(Object.assign({
                 x: 0,
                 y: -focusSize / 2 - 1,
                 strokeBoundsBuffer: 0
             }, focusIconStyle), {
-                visible: !1,
+                visible: !0,
                 pickMode: "imprecise",
                 boundsPadding: parsedPadding
             })), this._appendDataToShape(focusShape, constant_1.LEGEND_ELEMENT_NAME.focus, item, itemGroup), 
             focusSpace = focusSize;
         }
-        const labelShape = (0, vrender_core_1.createText)(Object.assign(Object.assign({
+        const labelShape = vrender_core_1.graphicCreator.text(Object.assign(Object.assign({
             x: shapeSize / 2 + shapeSpace,
             y: 0,
             textAlign: "start",
@@ -206,11 +195,9 @@ class DiscreteLegend extends base_1.LegendBase {
         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);
-        if (focusStartX += shapeSize / 2 + shapeSpace + labelShape.AABBBounds.width() + labelSpace, 
-        (0, vutils_1.isValid)(value)) {
-            const valueSpace = (0, vutils_1.get)(valueAttr, "space", focus ? constant_1.DEFAULT_VALUE_SPACE : 0), valueShape = (0, 
-            vrender_core_1.createText)(Object.assign(Object.assign({
-                x: focusStartX + labelSpace,
+        if ((0, vutils_1.isValid)(value)) {
+            const valueSpace = (0, vutils_1.get)(valueAttr, "space", focus ? constant_1.DEFAULT_VALUE_SPACE : 0), valueShape = vrender_core_1.graphicCreator.text(Object.assign(Object.assign({
+                x: 0,
                 y: 0,
                 textAlign: "start",
                 textBaseline: "middle",
@@ -224,25 +211,26 @@ class DiscreteLegend extends base_1.LegendBase {
                 const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace, valueBounds = valueShape.AABBBounds, labelBounds = labelShape.AABBBounds, valueWidth = valueBounds.width(), labelWidth = labelBounds.width();
                 labelWidth > layoutWidth ? (layoutWidth - valueWidth) / labelWidth > .4 ? labelShape.setAttribute("maxLineWidth", layoutWidth - valueWidth) : (valueShape.setAttribute("maxLineWidth", .5 * layoutWidth), 
                 labelShape.setAttribute("maxLineWidth", .5 * layoutWidth)) : valueShape.setAttribute("maxLineWidth", layoutWidth - labelWidth), 
-                valueAttr.alignRight && valueShape.setAttributes({
+                valueAttr.alignRight ? valueShape.setAttributes({
                     textAlign: "right",
                     x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
-                });
-            }
+                }) : valueShape.setAttribute("x", labelShape.AABBBounds.x2 + valueSpace);
+            } else valueShape.setAttribute("x", labelShape.AABBBounds.x2 + valueSpace);
             focusStartX = valueShape.AABBBounds.x2 + valueSpace, innerGroup.add(valueShape);
-        } else this._itemWidthByUser && labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace);
+        } else this._itemWidthByUser ? (labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace), 
+        focusStartX = labelShape.AABBBounds.x2 + labelSpace) : focusStartX = labelShape.AABBBounds.x2 + labelSpace;
         focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
         const innerGroupBounds = innerGroup.AABBBounds, innerGroupWidth = innerGroupBounds.width(), innerGroupHeight = innerGroupBounds.height(), itemGroupWidth = (0, 
         vutils_1.isValid)(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3], itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
         return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, 
-        innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), 
+        focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), 
         itemGroup;
     }
     _renderPager(isHorizontal) {
-        const renderStartY = this._title ? this._title.AABBBounds.height() + (0, vutils_1.get)(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, maxCol: maxCol = 1, maxRow: maxRow = 2, item: item = {}, pager: pager = {}} = this.attribute, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn", space: pagerSpace = constant_1.DEFAULT_PAGER_SPACE} = pager, pageStyle = __rest(pager, [ "animation", "animationDuration", "animationEasing", "space" ]);
+        const renderStartY = this._title ? this._title.AABBBounds.height() + (0, vutils_1.get)(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, maxCol: maxCol = 1, maxRow: maxRow = 2, item: item = {}, pager: pager = {}, disableTriggerEvent: disableTriggerEvent} = this.attribute, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn", space: pagerSpace = constant_1.DEFAULT_PAGER_SPACE, position: position = "middle"} = pager, pageStyle = __rest(pager, [ "animation", "animationDuration", "animationEasing", "space", "position" ]);
         let pagerComp, pageHeight = 0, pageWidth = 0, startX = 0, startY = 0, pages = 1;
         if (isHorizontal) {
-            if (pagerComp = new pager_1.Pager(Object.assign({
+            if (pagerComp = new pager_1.Pager(Object.assign(Object.assign({
                 layout: 1 === maxRow ? "horizontal" : "vertical",
                 total: 99
             }, (0, vutils_1.merge)({
@@ -250,9 +238,12 @@ class DiscreteLegend extends base_1.LegendBase {
                     preShape: "triangleUp",
                     nextShape: "triangleDown"
                 }
-            }, pageStyle))), this._pager = pagerComp, this._innerView.add(pagerComp), pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, 
+            }, pageStyle)), {
+                disableTriggerEvent: disableTriggerEvent
+            })), this._pager = pagerComp, this._innerView.add(pagerComp), pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, 
             pageWidth = maxWidth - pagerComp.AABBBounds.width() - pagerSpace, pageWidth <= 0) return this._innerView.removeChild(pagerComp), 
             !1;
+            let y;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {width: width, height: height} = item.attribute;
                 pageWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
@@ -260,18 +251,20 @@ class DiscreteLegend extends base_1.LegendBase {
                     x: startX,
                     y: startY
                 }), startX += spaceCol + width;
-            })), pagerComp.setAttributes({
-                total: Math.ceil(pages / maxRow),
+            })), pagerComp.setAttribute("total", Math.ceil(pages / maxRow)), y = "start" === position ? renderStartY : "end" === position ? renderStartY + pageHeight - pagerComp.AABBBounds.height() / 2 : renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2, 
+            pagerComp.setAttributes({
                 x: pageWidth,
-                y: renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2
+                y: y
             });
         } else {
             if (pagerComp = new pager_1.Pager(Object.assign({
                 layout: "horizontal",
-                total: 99
+                total: 99,
+                disableTriggerEvent: disableTriggerEvent
             }, pageStyle)), this._pager = pagerComp, this._innerView.add(pagerComp), pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, 
             pageHeight = maxHeight - pagerComp.AABBBounds.height() - pagerSpace - renderStartY, 
             pageHeight <= 0) return this._innerView.removeChild(pagerComp), !1;
+            let x;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {height: height} = item.attribute;
                 pageHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
@@ -279,14 +272,14 @@ class DiscreteLegend extends base_1.LegendBase {
                     x: startX,
                     y: startY
                 }), startY += spaceRow + height;
-            })), pagerComp.setAttributes({
-                total: Math.ceil(pages / maxCol),
-                x: (pageWidth - pagerComp.AABBBounds.width()) / 2,
+            })), pagerComp.setAttribute("total", Math.ceil(pages / maxCol)), x = "start" === position ? 0 : "end" === position ? pageWidth - pagerComp.AABBBounds.width() : (pageWidth - pagerComp.AABBBounds.width()) / 2, 
+            pagerComp.setAttributes({
+                x: x,
                 y: maxHeight - pagerComp.AABBBounds.height()
             });
         }
         pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
-        const clipGroup = (0, vrender_core_1.createGroup)({
+        const clipGroup = vrender_core_1.graphicCreator.group({
             x: 0,
             y: renderStartY,
             width: pageWidth,
@@ -306,6 +299,24 @@ class DiscreteLegend extends base_1.LegendBase {
         return this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging), 
         !0;
     }
+    _hover(legendItem, e) {
+        this._lastActiveItem = legendItem;
+        legendItem.hasState(constant_1.LegendStateValue.selected) ? this._setLegendItemState(legendItem, constant_1.LegendStateValue.selectedHover, e) : this._setLegendItemState(legendItem, constant_1.LegendStateValue.unSelectedHover, e);
+        const focusButton = legendItem.getChildren()[0].find((node => node.name === constant_1.LEGEND_ELEMENT_NAME.focus), !1);
+        focusButton && focusButton.setAttribute("visible", !0), this._dispatchEvent(constant_1.LegendEvent.legendItemHover, legendItem, e);
+    }
+    _unHover(legendItem, e) {
+        let attributeUpdate = !1;
+        (legendItem.hasState(constant_1.LegendStateValue.unSelectedHover) || legendItem.hasState(constant_1.LegendStateValue.selectedHover)) && (attributeUpdate = !0), 
+        legendItem.removeState(constant_1.LegendStateValue.unSelectedHover), legendItem.removeState(constant_1.LegendStateValue.selectedHover), 
+        legendItem.getChildren()[0].getChildren().forEach((child => {
+            attributeUpdate || !child.hasState(constant_1.LegendStateValue.unSelectedHover) && !child.hasState(constant_1.LegendStateValue.selectedHover) || (attributeUpdate = !0), 
+            child.removeState(constant_1.LegendStateValue.unSelectedHover), child.removeState(constant_1.LegendStateValue.selectedHover);
+        }));
+        const focusButton = legendItem.getChildren()[0].find((node => node.name === constant_1.LEGEND_ELEMENT_NAME.focus), !1);
+        focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(constant_1.LegendEvent.legendItemAttributeUpdate, legendItem, e), 
+        this._dispatchEvent(constant_1.LegendEvent.legendItemUnHover, legendItem, e);
+    }
     _setLegendItemState(legendItem, stateName, e) {
         let attributeUpdate = !1;
         legendItem.hasState(stateName) || (attributeUpdate = !0), legendItem.addState(stateName, true),