@visactor/vtable 0.10.2-alpha.3 → 0.10.2

package/dist/vtable.js

@@ -4442,6 +4442,9 @@
 	  } else defaults(target, source, override);
 	}
 
+	function array$1(arr) {
+	  return isValid(arr) ? isArray(arr) ? arr : [arr] : [];
+	}
 	function last(val) {
 	  if (isArrayLike(val)) {
 	    return val[val.length - 1];
@@ -5897,6 +5900,7 @@
 	    LEGEND_ITEM_CLICK: 'legend_item_click',
 	    LEGEND_ITEM_HOVER: 'legend_item_hover',
 	    LEGEND_ITEM_UNHOVER: 'legend_item_unHover',
+	    LEGEND_CHANGE: 'legend_change',
 	    MOUSEENTER_AXIS: 'mouseenter_axis',
 	    MOUSELEAVE_AXIS: 'mouseleave_axis'
 	};
@@ -34749,6 +34753,748 @@
 	  }
 	}
 
+	var SLIDER_ELEMENT_NAME;
+	!function (SLIDER_ELEMENT_NAME) {
+	  SLIDER_ELEMENT_NAME.innerView = "innerView", SLIDER_ELEMENT_NAME.railContainer = "sliderRailContainer", SLIDER_ELEMENT_NAME.rail = "sliderRail", SLIDER_ELEMENT_NAME.startText = "sliderStartText", SLIDER_ELEMENT_NAME.endText = "sliderEndText", SLIDER_ELEMENT_NAME.startHandler = "sliderStartHandler", SLIDER_ELEMENT_NAME.startHandlerText = "startHandlerText", SLIDER_ELEMENT_NAME.endHandler = "sliderEndHandler", SLIDER_ELEMENT_NAME.endHandlerText = "sliderEndHandlerText", SLIDER_ELEMENT_NAME.track = "sliderTrack", SLIDER_ELEMENT_NAME.trackContainer = "sliderTrackContainer";
+	}(SLIDER_ELEMENT_NAME || (SLIDER_ELEMENT_NAME = {}));
+
+	function convertValueToRange(value) {
+	  return isArray(value) ? value : [value, value];
+	}
+	function getDefaultCursor(isHorizontal) {
+	  return isHorizontal ? "ew-resize" : "ns-resize";
+	}
+	class Slider extends AbstractComponent {
+	  get track() {
+	    return this._track;
+	  }
+	  get currentValue() {
+	    return this._currentValue;
+	  }
+	  get startHandler() {
+	    return this._startHandler;
+	  }
+	  get endHandler() {
+	    return this._endHandler;
+	  }
+	  constructor(attributes) {
+	    super(merge$2({}, Slider.defaultAttributes, attributes)), this.name = "slider", this._isHorizontal = !0, this._startHandler = null, this._endHandler = null, this._startHandlerText = null, this._endHandlerText = null, this._currentHandler = null, this._currentValue = {}, this._onHandlerPointerdown = e => {
+	      e.stopPropagation(), this._currentHandler = e.target, this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this._currentHandler.addEventListener("pointermove", this._onHandlerPointerMove), this._currentHandler.addEventListener("pointerup", this._onHandlerPointerUp), this._currentHandler.addEventListener("pointerupoutside", this._onHandlerPointerUp));
+	    }, this._onHandlerPointerMove = e => {
+	      var _a, _b;
+	      e.stopPropagation();
+	      const {
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        min: min,
+	        max: max
+	      } = this.attribute;
+	      if (max === min) return;
+	      let currentPos,
+	        originPos,
+	        railLen,
+	        delta = 0;
+	      this._isHorizontal ? (currentPos = e.clientX, delta = currentPos - this._prePos, originPos = null === (_b = this._currentHandler) || void 0 === _b ? void 0 : _b.attribute.x, railLen = railWidth) : (currentPos = e.clientY, delta = currentPos - this._prePos, originPos = null === (_a = this._currentHandler) || void 0 === _a ? void 0 : _a.attribute.y, railLen = railHeight);
+	      const newPos = clamp$1(originPos + delta, 0, railLen),
+	        currentValue = newPos / railLen * (max - min) + min;
+	      "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
+	    }, this._onHandlerPointerUp = e => {
+	      if (e.preventDefault(), this._currentHandler = null, "browser" === vglobal.env) vglobal.removeEventListener("pointermove", this._onHandlerPointerMove), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp);else {
+	        const currentTarget = e.target;
+	        currentTarget.removeEventListener("pointermove", this._onHandlerPointerMove), currentTarget.removeEventListener("pointerup", this._onHandlerPointerUp), currentTarget.removeEventListener("pointerupoutside", this._onHandlerPointerUp);
+	      }
+	    }, this._onTrackPointerdown = e => {
+	      e.stopPropagation(), this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this._track.addEventListener("pointermove", this._onTrackPointerMove), this._track.addEventListener("pointerup", this._onTrackPointerUp), this._track.addEventListener("pointerupoutside", this._onTrackPointerUp));
+	    }, this._onTrackPointerMove = e => {
+	      e.stopPropagation();
+	      const {
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        min: min,
+	        max: max
+	      } = this.attribute;
+	      if (max === min) return;
+	      const {
+	        startHandler: startHandler,
+	        endHandler: endHandler
+	      } = this._getHandlers();
+	      let currentPos, trackLen, railLen;
+	      this._isHorizontal ? (currentPos = e.clientX, trackLen = this._track.attribute.width, railLen = railWidth) : (currentPos = e.clientY, trackLen = this._track.attribute.height, railLen = railHeight);
+	      const delta = currentPos - this._prePos;
+	      if (startHandler) {
+	        const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y,
+	          newPos = clamp$1(originPos + delta, 0, railLen - trackLen),
+	          currentValue = newPos / railLen * (max - min) + min;
+	        this._updateHandler(startHandler, newPos, currentValue);
+	      }
+	      if (endHandler) {
+	        const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y,
+	          newPos = clamp$1(originPos + delta, trackLen, railLen),
+	          currentValue = newPos / railLen * (max - min) + min;
+	        this._updateHandler(endHandler, newPos, currentValue), this._track.setAttributes(this._isHorizontal ? {
+	          x: Math.min(null == startHandler ? void 0 : startHandler.attribute.x, null == endHandler ? void 0 : endHandler.attribute.x),
+	          width: Math.abs((null == startHandler ? void 0 : startHandler.attribute.x) - (null == endHandler ? void 0 : endHandler.attribute.x))
+	        } : {
+	          y: Math.min(null == startHandler ? void 0 : startHandler.attribute.y, null == endHandler ? void 0 : endHandler.attribute.y),
+	          height: Math.abs((null == startHandler ? void 0 : startHandler.attribute.y) - (null == endHandler ? void 0 : endHandler.attribute.y))
+	        });
+	      }
+	      this._prePos = currentPos, this._dispatchChangeEvent();
+	    }, this._onTrackPointerUp = e => {
+	      e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this._track.removeEventListener("pointermove", this._onTrackPointerMove), this._track.removeEventListener("pointerup", this._onTrackPointerUp), this._track.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+	    }, this._onRailPointerDown = e => {
+	      e.stopPropagation();
+	      const {
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        min: min,
+	        max: max
+	      } = this.attribute;
+	      if (max === min) return;
+	      const startHandler = this._startHandler,
+	        endHandler = this._endHandler;
+	      let currentPos, startHandlerPos, endHandlerPos, railLen;
+	      this._isHorizontal ? (currentPos = e.viewX - this._rail.globalAABBBounds.x1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x, railLen = railWidth) : (currentPos = e.viewY - this._rail.globalAABBBounds.y1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y, railLen = railHeight);
+	      const currentValue = currentPos / railLen * (max - min) + min;
+	      if (isValid(endHandlerPos)) {
+	        const updateHandler = Math.abs(currentPos - startHandlerPos) > Math.abs(currentPos - endHandlerPos) ? endHandler : startHandler;
+	        this._updateHandler(updateHandler, currentPos, currentValue);
+	      } else this._updateHandler(startHandler, currentPos, currentValue);
+	      this._updateTrack(), this._dispatchChangeEvent();
+	    };
+	  }
+	  setValue(value) {
+	    const {
+	      layout: layout,
+	      railWidth: railWidth,
+	      railHeight: railHeight,
+	      min: min,
+	      max: max
+	    } = this.attribute;
+	    if (max === min) return;
+	    const [startValue, endValue] = array$1(value),
+	      {
+	        startHandler: startHandler,
+	        endHandler: endHandler
+	      } = this._getHandlers(),
+	      railLen = "vertical" === layout ? railHeight : railWidth,
+	      startPos = (startValue - min) / (max - min) * railLen;
+	    if (startHandler && this._updateHandler(startHandler, startPos, startValue), endHandler) {
+	      const endPos = (endValue - min) / (max - min) * railLen;
+	      this._updateHandler(endHandler, endPos, endValue);
+	    }
+	    this._updateTrack();
+	  }
+	  render() {
+	    var _a, _b;
+	    this.removeAllChild();
+	    const {
+	      layout = "horizontal",
+	      railWidth: railWidth,
+	      railHeight: railHeight,
+	      startText: startText,
+	      endText: endText,
+	      min: min,
+	      max: max,
+	      showHandler = !0
+	    } = this.attribute;
+	    let {
+	      value: value
+	    } = this.attribute;
+	    isNil(value) && (value = [min, max]), this._currentValue = {
+	      startValue: convertValueToRange(value)[0],
+	      endValue: convertValueToRange(value)[1]
+	    };
+	    const isHorizontal = "horizontal" === layout;
+	    this._isHorizontal = isHorizontal;
+	    const innerView = createGroup({
+	      x: 0,
+	      y: 0
+	    });
+	    innerView.name = SLIDER_ELEMENT_NAME.innerView, this.add(innerView), this._innerView = innerView;
+	    let startTextShape,
+	      startLen = 0;
+	    if (startText && startText.visible) {
+	      startTextShape = createText(Object.assign({
+	        x: isHorizontal ? 0 : railWidth / 2,
+	        y: isHorizontal ? railHeight / 2 : 0,
+	        textAlign: isHorizontal ? "start" : "center",
+	        textBaseline: isHorizontal ? "middle" : "top",
+	        text: startText.text,
+	        lineHeight: null === (_a = startText.style) || void 0 === _a ? void 0 : _a.fontSize
+	      }, startText.style)), startTextShape.name = SLIDER_ELEMENT_NAME.startText, innerView.add(startTextShape);
+	      const space = isValid(startText.space) ? startText.space : 0;
+	      startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
+	    }
+	    const mainContainer = createGroup({
+	      x: isHorizontal ? startLen : 0,
+	      y: isHorizontal ? 0 : startLen
+	    });
+	    innerView.add(mainContainer);
+	    const railContainer = createGroup({
+	      x: 0,
+	      y: 0
+	    });
+	    let endTextShape;
+	    if (railContainer.name = SLIDER_ELEMENT_NAME.railContainer, this._railContainer = railContainer, mainContainer.add(railContainer), this._renderRail(railContainer), startLen += isHorizontal ? railWidth : railHeight, endText && endText.visible) {
+	      const space = isValid(endText.space) ? endText.space : 0;
+	      endTextShape = createText(Object.assign({
+	        x: isHorizontal ? startLen + space : railWidth / 2,
+	        y: isHorizontal ? railHeight / 2 : startLen + space,
+	        textAlign: isHorizontal ? "start" : "center",
+	        textBaseline: isHorizontal ? "middle" : "top",
+	        text: endText.text,
+	        lineHeight: null === (_b = endText.style) || void 0 === _b ? void 0 : _b.fontSize
+	      }, endText.style)), endTextShape.name = SLIDER_ELEMENT_NAME.endText, innerView.add(endTextShape);
+	    }
+	    this._renderTrack(railContainer), showHandler && (this._renderHandlers(mainContainer), this._bindEvents());
+	  }
+	  _renderRail(container) {
+	    const {
+	      railWidth: railWidth,
+	      railHeight: railHeight,
+	      railStyle: railStyle,
+	      slidable: slidable
+	    } = this.attribute;
+	    let cursor = "default";
+	    !1 !== slidable && (cursor = "pointer");
+	    const railShape = createRect(Object.assign({
+	      x: 0,
+	      y: 0,
+	      width: railWidth,
+	      height: railHeight,
+	      cursor: cursor
+	    }, railStyle));
+	    return railShape.name = SLIDER_ELEMENT_NAME.rail, container.add(railShape), this._rail = railShape, railShape;
+	  }
+	  _renderHandlers(container) {
+	    const {
+	      range: range,
+	      min: min,
+	      max: max,
+	      handlerSize = 14,
+	      handlerStyle: handlerStyle,
+	      handlerText: handlerText,
+	      railHeight: railHeight,
+	      railWidth: railWidth,
+	      slidable: slidable
+	    } = this.attribute;
+	    let {
+	      value: value
+	    } = this.attribute;
+	    isNil(value) && (value = [min, max]);
+	    const handlerTextVisible = handlerText && handlerText.visible,
+	      isHorizontal = this._isHorizontal,
+	      railLen = isHorizontal ? railWidth : railHeight,
+	      [startValue, endValue] = convertValueToRange(value),
+	      handlerStart = max === min ? range ? 0 : railLen : (startValue - min) / (max - min) * railLen,
+	      startHandler = this._renderHandler(Object.assign({
+	        x: isHorizontal ? handlerStart : railWidth / 2,
+	        y: isHorizontal ? railHeight / 2 : handlerStart,
+	        size: handlerSize,
+	        strokeBoundsBuffer: 0,
+	        cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
+	      }, handlerStyle));
+	    if (startHandler.name = SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, container.add(startHandler), this._currentValue.startPos = handlerStart, handlerTextVisible) {
+	      const startHandlerText = this._renderHandlerText(startValue, range ? "start" : "end");
+	      startHandlerText.name = SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText), this._startHandlerText = startHandlerText;
+	    }
+	    if (range) {
+	      const handlerEnd = max === min ? railLen : (endValue - min) / (max - min) * railLen,
+	        endHandler = this._renderHandler(Object.assign({
+	          x: isHorizontal ? handlerEnd : railWidth / 2,
+	          y: isHorizontal ? railHeight / 2 : handlerEnd,
+	          size: handlerSize,
+	          strokeBoundsBuffer: 0,
+	          cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
+	        }, handlerStyle));
+	      if (endHandler.name = SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, container.add(endHandler), this._currentValue.endPos = handlerEnd, handlerTextVisible) {
+	        const endHandlerText = this._renderHandlerText(endValue, "end");
+	        endHandlerText.name = SLIDER_ELEMENT_NAME.endHandlerText, container.add(endHandlerText), this._endHandlerText = endHandlerText;
+	      }
+	    }
+	  }
+	  _renderTrack(container) {
+	    const {
+	      range: range,
+	      min: min,
+	      max: max,
+	      railHeight: railHeight,
+	      railWidth: railWidth,
+	      trackStyle: trackStyle,
+	      railStyle: railStyle,
+	      slidable: slidable,
+	      value: value
+	    } = this.attribute;
+	    let startValue, endValue;
+	    if (isNil(value)) range ? (startValue = min, endValue = max) : startValue = endValue = min;else if (range) {
+	      const clampValue = clampRange(value, min, max);
+	      startValue = clampValue[0], endValue = clampValue[1];
+	    } else startValue = min, endValue = clamp$1(value, min, max);
+	    const isHorizontal = this._isHorizontal,
+	      railLen = isHorizontal ? railWidth : railHeight;
+	    range || (startValue = min);
+	    const trackContainer = createGroup({
+	      x: 0,
+	      y: 0,
+	      width: railWidth,
+	      height: railHeight,
+	      cornerRadius: null == railStyle ? void 0 : railStyle.cornerRadius,
+	      clip: !0,
+	      pickable: !1
+	    });
+	    trackContainer.name = SLIDER_ELEMENT_NAME.trackContainer;
+	    const draggableTrack = isObject$2(range) && !0 === range.draggableTrack;
+	    let cursor;
+	    cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
+	    const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen,
+	      startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen,
+	      track = createRect(Object.assign({
+	        x: isHorizontal ? startPos : 0,
+	        y: isHorizontal ? 0 : startPos,
+	        width: isHorizontal ? trackWidth : railWidth,
+	        height: isHorizontal ? railHeight : trackWidth,
+	        cursor: cursor
+	      }, trackStyle));
+	    track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
+	  }
+	  _renderHandler(style) {
+	    return createSymbol(style);
+	  }
+	  _renderHandlerText(value, position) {
+	    var _a, _b, _c;
+	    const {
+	        align: align,
+	        min: min,
+	        max: max,
+	        handlerSize = 14,
+	        handlerText = {},
+	        railHeight: railHeight,
+	        railWidth: railWidth,
+	        slidable: slidable
+	      } = this.attribute,
+	      isHorizontal = this._isHorizontal,
+	      railLen = isHorizontal ? railWidth : railHeight,
+	      handlerStart = max === min ? "start" === position ? 0 : railLen : (value - min) / (max - min) * railLen,
+	      textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
+	      textStyle = Object.assign({
+	        text: (null == handlerText ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed(null !== (_b = null == handlerText ? void 0 : handlerText.precision) && void 0 !== _b ? _b : 0),
+	        lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+	        cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
+	      }, handlerText.style);
+	    isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = handlerStart) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = handlerStart);
+	    return createText(textStyle);
+	  }
+	  _bindEvents() {
+	    const {
+	      slidable: slidable,
+	      range: range
+	    } = this.attribute;
+	    slidable && (this._startHandler && this._startHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._startHandlerText && this._startHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), isObject$2(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), this._railContainer.addEventListener("pointerdown", this._onRailPointerDown));
+	  }
+	  _updateTrack() {
+	    const startHandler = this._startHandler,
+	      endHandler = this._endHandler;
+	    if (this._isHorizontal) {
+	      const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x;
+	      if (endHandler) {
+	        const endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x;
+	        this._track.setAttributes({
+	          x: Math.min(startHandlerPos, endHandlerPos),
+	          width: Math.abs(startHandlerPos - endHandlerPos)
+	        });
+	      } else this._track.setAttributes({
+	        width: startHandlerPos
+	      });
+	    } else {
+	      const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y;
+	      if (endHandler) {
+	        const endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y;
+	        this._track.setAttributes({
+	          y: Math.min(startHandlerPos, endHandlerPos),
+	          height: Math.abs(startHandlerPos - endHandlerPos)
+	        });
+	      } else this._track.setAttributes({
+	        height: startHandlerPos
+	      });
+	    }
+	  }
+	  _updateHandler(handler, position, value) {
+	    var _a;
+	    const isHorizontal = this._isHorizontal;
+	    handler.setAttribute(isHorizontal ? "x" : "y", position);
+	    const updateHandlerText = handler.name === SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
+	    if (updateHandlerText) {
+	      const {
+	        handlerText: handlerText
+	      } = this.attribute;
+	      null == updateHandlerText || updateHandlerText.setAttributes({
+	        text: (null == handlerText ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed(null !== (_a = null == handlerText ? void 0 : handlerText.precision) && void 0 !== _a ? _a : 0),
+	        [isHorizontal ? "x" : "y"]: position
+	      });
+	    }
+	    handler.name === SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
+	  }
+	  _updateHandlerText(handlerText, position, value) {
+	    var _a;
+	    const isHorizontal = this._isHorizontal,
+	      {
+	        handlerText: handlerTextAttr
+	      } = this.attribute;
+	    handlerText.setAttributes({
+	      [isHorizontal ? "x" : "y"]: position,
+	      text: (null == handlerTextAttr ? void 0 : handlerTextAttr.formatter) ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = null == handlerTextAttr ? void 0 : handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
+	    });
+	    const updateHandler = handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
+	    updateHandler && (null == updateHandler || updateHandler.setAttributes({
+	      [isHorizontal ? "x" : "y"]: position
+	    })), handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
+	  }
+	  _dispatchChangeEvent() {
+	    var _a;
+	    const isRange = !!this.attribute.range,
+	      currentValue = this._currentValue,
+	      changeEvent = new CustomEvent("change", {
+	        value: isRange ? [Math.min(currentValue.endValue, currentValue.startValue), Math.max(currentValue.endValue, currentValue.startValue)] : currentValue.startValue,
+	        position: isRange ? [Math.min(currentValue.endPos, currentValue.startPos), Math.max(currentValue.endPos, currentValue.startPos)] : currentValue.startPos
+	      });
+	    changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
+	  }
+	  _getHandlers() {
+	    let temp,
+	      startHandler = this._startHandler,
+	      endHandler = this._endHandler;
+	    return this._isHorizontal ? endHandler && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) && (temp = startHandler, startHandler = endHandler, endHandler = temp) : endHandler && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) && (temp = startHandler, startHandler = endHandler, endHandler = temp), {
+	      startHandler: startHandler,
+	      endHandler: endHandler
+	    };
+	  }
+	}
+	Slider.defaultAttributes = {
+	  slidable: !0,
+	  layout: "horizontal",
+	  align: "bottom",
+	  height: 8,
+	  showHandler: !0,
+	  handlerSize: 14,
+	  handlerStyle: {
+	    symbolType: "circle",
+	    fill: "#fff",
+	    stroke: "#91caff",
+	    lineWidth: 2
+	  },
+	  railStyle: {
+	    fill: "rgba(0,0,0,.04)"
+	  },
+	  trackStyle: {
+	    fill: "#91caff"
+	  },
+	  showValue: !0,
+	  valueStyle: {
+	    fill: "#2C3542",
+	    fontSize: 12
+	  },
+	  startText: {
+	    style: {
+	      fill: "#2C3542",
+	      fontSize: 12
+	    }
+	  },
+	  endText: {
+	    style: {
+	      fill: "#2C3542",
+	      fontSize: 12
+	    }
+	  },
+	  handlerText: {
+	    visible: !0,
+	    space: 4,
+	    precision: 0,
+	    style: {
+	      fill: "#2C3542",
+	      fontSize: 12
+	    }
+	  }
+	};
+
+	class ColorContinuousLegend extends LegendBase {
+	  constructor(attributes) {
+	    super(merge$2({}, ColorContinuousLegend.defaultAttributes, attributes)), this.name = "colorLegend", this._onSliderChange = e => {
+	      this._updateColor(), this.dispatchEvent(e);
+	    };
+	  }
+	  setSelected(value) {
+	    this._slider && (this._slider.setValue(value), this._updateColor());
+	  }
+	  _renderContent() {
+	    const {
+	        colors: colors,
+	        slidable: slidable,
+	        layout: layout,
+	        align: align,
+	        min: min,
+	        max: max,
+	        value: value,
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        showHandler = !0,
+	        handlerSize: handlerSize,
+	        handlerStyle: handlerStyle,
+	        railStyle: railStyle,
+	        trackStyle: trackStyle,
+	        startText: startText,
+	        endText: endText,
+	        handlerText: handlerText,
+	        showTooltip: showTooltip,
+	        tooltip: tooltip
+	      } = this.attribute,
+	      domain = [],
+	      step = (max - min) / (colors.length - 1);
+	    for (let i = 0; i < colors.length; i++) domain.push(min + step * i);
+	    this._colorScale = new LinearScale().domain(domain, !0).range(colors), this._color = this._getTrackColor();
+	    const slider = new Slider({
+	      x: 0,
+	      y: 0,
+	      range: {
+	        draggableTrack: !0
+	      },
+	      slidable: slidable,
+	      layout: layout,
+	      align: align,
+	      min: min,
+	      max: max,
+	      value: value,
+	      railWidth: railWidth,
+	      railHeight: railHeight,
+	      showHandler: showHandler,
+	      handlerSize: handlerSize,
+	      handlerStyle: handlerStyle,
+	      railStyle: railStyle,
+	      trackStyle: Object.assign({
+	        fill: this._color
+	      }, trackStyle),
+	      startText: startText,
+	      endText: endText,
+	      handlerText: handlerText,
+	      showTooltip: showTooltip,
+	      tooltip: tooltip
+	    });
+	    this._innerView.add(slider), this._slider = slider, slider.translateTo(0 - slider.AABBBounds.x1, (this._title ? this._title.AABBBounds.height() + get$3(this.attribute, "title.space", DEFAULT_TITLE_SPACE) : 0) - slider.AABBBounds.y1), this._updateColor();
+	  }
+	  _bindEvents() {
+	    this._slider && this._slider.addEventListener("change", this._onSliderChange);
+	  }
+	  _getTrackColor() {
+	    const {
+	      colors: colors,
+	      layout: layout
+	    } = this.attribute;
+	    if (isEmpty(colors)) return;
+	    const count = colors.length;
+	    if (1 === count) return colors[0];
+	    const stops = [];
+	    for (let i = 0; i < count; i++) {
+	      const percent = i / (count - 1);
+	      stops.push({
+	        offset: percent,
+	        color: colors[i]
+	      });
+	    }
+	    const isHorizontal = "horizontal" === layout;
+	    return {
+	      gradient: "linear",
+	      stops: stops,
+	      x0: 0,
+	      y0: 0,
+	      x1: isHorizontal ? 1 : 0,
+	      y1: isHorizontal ? 0 : 1
+	    };
+	  }
+	  _updateColor() {
+	    const {
+	        layout = "horizontal",
+	        colors: colors,
+	        railWidth: railWidth,
+	        railHeight: railHeight
+	      } = this.attribute,
+	      {
+	        startHandler: startHandler,
+	        endHandler: endHandler,
+	        track: track
+	      } = this._slider,
+	      {
+	        startValue: startValue,
+	        endValue: endValue,
+	        startPos: startPos,
+	        endPos: endPos
+	      } = this._slider.currentValue,
+	      startHandlerColor = this._colorScale.scale(startValue),
+	      endHandlerColor = this._colorScale.scale(endValue);
+	    null == startHandler || startHandler.setAttribute("fill", startHandlerColor), null == endHandler || endHandler.setAttribute("fill", endHandlerColor);
+	    const railLen = "horizontal" === layout ? railWidth : railHeight;
+	    if (Math.abs(startPos - endPos) !== railLen && colors && colors.length > 1) {
+	      const stops = this._color.stops,
+	        start = Math.min(startPos, endPos),
+	        end = Math.max(startPos, endPos),
+	        startRatio = start / railLen,
+	        endRatio = end / railLen,
+	        range = endRatio - startRatio,
+	        betweenStops = stops.filter(stop => stop.offset > startRatio && stop.offset < endRatio),
+	        minValue = Math.min(startValue, endValue),
+	        maxValue = Math.max(startValue, endValue),
+	        startColor = this._colorScale.scale(minValue),
+	        endColor = this._colorScale.scale(maxValue),
+	        newStops = [{
+	          offset: 0,
+	          color: startColor
+	        }];
+	      betweenStops.forEach(stop => {
+	        newStops.push({
+	          offset: (stop.offset - startRatio) / range,
+	          color: stop.color
+	        });
+	      }), newStops.push({
+	        offset: 1,
+	        color: endColor
+	      }), track.setAttribute("fill", Object.assign(Object.assign({}, this._color), {
+	        stops: newStops
+	      }));
+	    }
+	  }
+	}
+	ColorContinuousLegend.defaultAttributes = {
+	  layout: "horizontal",
+	  title: {
+	    align: "start",
+	    space: DEFAULT_TITLE_SPACE,
+	    textStyle: {
+	      fontSize: 12,
+	      fontWeight: "bold",
+	      fill: "rgba(46, 47, 50, 1)"
+	    }
+	  },
+	  handlerSize: 10,
+	  handlerStyle: {
+	    lineWidth: 4,
+	    stroke: "#fff",
+	    outerBorder: {
+	      distance: 2,
+	      lineWidth: 1,
+	      stroke: "#ccc"
+	    }
+	  }
+	};
+
+	function getSizeHandlerPath() {
+	  let align = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "bottom";
+	  let centerX = 0;
+	  return "top" === align ? `\n    M${centerX},-6L${centerX - 3.5},-2.5\n    v5\n    h7\n    v-5\n    Z\n` : "left" === align ? (centerX = 1, `\n    M${centerX - 6},0L${centerX - 6 + 2.5},-3.5\n    h5\n    v7\n    h-5\n    Z\n`) : "right" === align ? (centerX = -1, `\n    M${centerX + 6},0L${centerX + 6 - 2.5},-3.5\n    h-5\n    v7\n    h5\n    Z\n  `) : `\n    M${centerX},6L${centerX - 3.5},2.5\n    v-5\n    h7\n    v5\n    Z\n`;
+	}
+	class SizeContinuousLegend extends LegendBase {
+	  constructor(attributes) {
+	    super(merge$2({}, SizeContinuousLegend.defaultAttributes, attributes)), this.name = "sizeLegend", this._onSliderChange = e => {
+	      this.dispatchEvent(e);
+	    };
+	  }
+	  setSelected(value) {
+	    this._slider && this._slider.setValue(value);
+	  }
+	  _renderContent() {
+	    const {
+	        slidable: slidable,
+	        layout: layout,
+	        align: align,
+	        min: min,
+	        max: max,
+	        value: value,
+	        railWidth: railWidth,
+	        railHeight: railHeight,
+	        showHandler = !0,
+	        handlerSize: handlerSize,
+	        handlerStyle: handlerStyle,
+	        railStyle: railStyle,
+	        trackStyle: trackStyle,
+	        startText: startText,
+	        endText: endText,
+	        handlerText: handlerText,
+	        showTooltip: showTooltip,
+	        tooltip: tooltip,
+	        sizeBackground: sizeBackground
+	      } = this.attribute,
+	      mainContainer = createGroup({
+	        x: 0,
+	        y: 0
+	      });
+	    this._innerView.add(mainContainer);
+	    const slider = new Slider({
+	      x: 0,
+	      y: 0,
+	      zIndex: 1,
+	      range: {
+	        draggableTrack: !0
+	      },
+	      slidable: slidable,
+	      layout: layout,
+	      align: align,
+	      min: min,
+	      max: max,
+	      value: value,
+	      railWidth: railWidth,
+	      railHeight: railHeight,
+	      showHandler: showHandler,
+	      handlerSize: handlerSize,
+	      handlerStyle: Object.assign({
+	        symbolType: getSizeHandlerPath(align)
+	      }, handlerStyle),
+	      railStyle: railStyle,
+	      trackStyle: trackStyle,
+	      startText: startText,
+	      endText: endText,
+	      handlerText: handlerText,
+	      showTooltip: showTooltip,
+	      tooltip: tooltip
+	    });
+	    mainContainer.add(slider);
+	    let path,
+	      start = 0;
+	    "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${railWidth},12Z`, start = railHeight) : (path = `M0,12L${railWidth},12L${railWidth},0Z`, slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth},0L${railWidth + 12},${railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${railHeight}L12,${railHeight}L12,0Z`, slider.setAttribute("x", 12));
+	    const background = createPath(Object.assign(Object.assign({
+	      x: 0,
+	      y: start,
+	      path: path
+	    }, sizeBackground), {
+	      zIndex: 0
+	    }));
+	    mainContainer.add(background);
+	    const titleSpace = this._title ? this._title.AABBBounds.height() + get$3(this.attribute, "title.space", DEFAULT_TITLE_SPACE) : 0;
+	    mainContainer.translate(0 - mainContainer.AABBBounds.x1, titleSpace - mainContainer.AABBBounds.y1), this._slider = slider;
+	  }
+	  _bindEvents() {
+	    this._slider && this._slider.addEventListener("change", this._onSliderChange);
+	  }
+	}
+	SizeContinuousLegend.defaultAttributes = {
+	  layout: "horizontal",
+	  title: {
+	    align: "start",
+	    space: DEFAULT_TITLE_SPACE,
+	    textStyle: {
+	      fontSize: 12,
+	      fontWeight: "bold",
+	      fill: "rgba(46, 47, 50, 1)"
+	    }
+	  },
+	  handlerSize: 10,
+	  handlerStyle: {
+	    lineWidth: 1,
+	    stroke: "#ccc",
+	    fill: "#fff"
+	  },
+	  sizeBackground: {
+	    fill: "rgba(20,20,20,0.1)"
+	  }
+	};
+
 	let Title$1 = class Title extends AbstractComponent {
 	  constructor(attributes) {
 	    super(merge$2({}, Title.defaultAttributes, attributes)), this.name = "title";
@@ -40325,13 +41071,17 @@
 	            .transform({
 	            type: 'ticks',
 	            options: {
+	                sampling: this.option.sampling !== false,
 	                tickCount: tick.tickCount,
 	                forceTickCount: tick.forceTickCount,
 	                tickStep: tick.tickStep,
+	                tickMode: tick.tickMode,
+	                noDecimals: tick.noDecimals,
 	                axisOrientType: this.orient,
 	                coordinateType: 'cartesian',
 	                labelStyle: label.style,
 	                labelFormatter: label.formatMethod,
+	                labelGap: label.minGap,
 	                labelLastVisible: label.lastVisible,
 	                labelFlush: label.flush
 	            }
@@ -52519,8 +53269,8 @@
 	        else {
 	            stateManeger.updateCursor();
 	        }
+	        const cellGoup = e.path.find(node => node.role === 'cell');
 	        if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL)) {
-	            const cellGoup = eventArgsSet?.eventArgs?.target;
 	            if (cellGoup?.role === 'cell' &&
 	                table.stateManeger.hover.cellPos.col !== -1 &&
 	                table.stateManeger.hover.cellPos.row !== -1 &&
@@ -52538,7 +53288,6 @@
 	            }
 	        }
 	        if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL)) {
-	            const cellGoup = eventArgsSet?.eventArgs?.target;
 	            if (cellGoup?.role === 'cell' &&
 	                isValid(cellGoup.col) &&
 	                isValid(cellGoup.row) &&
@@ -55920,7 +56669,7 @@
 	    return attrs;
 	}
 
-	class TableLegend {
+	class DiscreteTableLegend {
 	    table;
 	    option;
 	    orient;
@@ -56083,6 +56832,312 @@
 	    }
 	}
 
+	const defaultContinueLegendSpec = {
+	    orient: 'right',
+	    position: 'middle',
+	    padding: 30,
+	    title: {
+	        visible: false,
+	        padding: 0,
+	        textStyle: {
+	            fontSize: 14,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'titleFontColor' }
+	        },
+	        space: 12
+	    },
+	    handler: {
+	        visible: true
+	    },
+	    startText: {
+	        style: {
+	            fontSize: 14,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'labelFontColor' }
+	        }
+	    },
+	    endText: {
+	        style: {
+	            fontSize: 14,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'labelFontColor' }
+	        }
+	    },
+	    handlerText: {
+	        style: {
+	            fontSize: 14,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'labelFontColor' }
+	        }
+	    }
+	};
+	const defaultColorLegendSpec = {
+	    horizontal: {
+	        ...defaultContinueLegendSpec,
+	        rail: {
+	            width: 200,
+	            height: 8,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        }
+	    },
+	    vertical: {
+	        ...defaultContinueLegendSpec,
+	        rail: {
+	            width: 8,
+	            height: 200,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        }
+	    }
+	};
+	const defaultSizeLegendSpec = {
+	    horizontal: {
+	        sizeBackground: {
+	            fill: '#cdcdcd'
+	        },
+	        track: {
+	            style: {
+	                fill: 'rgba(20,20,20,0.1)'
+	            }
+	        },
+	        rail: {
+	            width: 200,
+	            height: 4,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        },
+	        ...defaultContinueLegendSpec
+	    },
+	    vertical: {
+	        sizeBackground: {
+	            fill: '#cdcdcd'
+	        },
+	        track: {
+	            style: {
+	                fill: 'rgba(20,20,20,0.1)'
+	            }
+	        },
+	        rail: {
+	            width: 4,
+	            height: 200,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        },
+	        ...defaultContinueLegendSpec
+	    }
+	};
+	function getContinuousLegendAttributes(spec, rect) {
+	    const { title = {}, handler = {}, rail = {}, track = {}, startText, endText, handlerText, sizeBackground, background = {}, type, id, visible, orient, position, data, defaultSelected, field, filter, regionId, regionIndex, seriesIndex, seriesId, padding, ...restSpec } = merge$2({}, (spec.type === 'color' ? defaultColorLegendSpec : defaultSizeLegendSpec)[spec.orient === 'bottom' || spec.orient === 'top' ? 'horizontal' : 'vertical'], spec);
+	    const attrs = restSpec;
+	    if (title.visible) {
+	        attrs.title = transformLegendTitleAttributes(title);
+	    }
+	    attrs.showHandler = handler.visible !== false;
+	    if (!isEmpty(handler.style)) {
+	        attrs.handlerStyle = transformToGraphic(handler.style);
+	    }
+	    if (isValid(rail.width)) {
+	        attrs.railWidth = rail.width;
+	    }
+	    if (isValid(rail.height)) {
+	        attrs.railHeight = rail.height;
+	    }
+	    if (!isEmpty(rail.style)) {
+	        attrs.railStyle = transformToGraphic(rail.style);
+	    }
+	    if (!isEmpty(track.style)) {
+	        attrs.trackStyle = transformToGraphic(track.style);
+	    }
+	    attrs.startText = transformComponentStyle(startText);
+	    attrs.endText = transformComponentStyle(endText);
+	    attrs.handlerText = transformComponentStyle(handlerText);
+	    if (!isEmpty(sizeBackground)) {
+	        attrs.sizeBackground = transformToGraphic(sizeBackground);
+	    }
+	    if (background.visible && !isEmpty(background.style)) {
+	        merge$2(attrs, background.style);
+	        if (isValid(background.padding)) {
+	            attrs.padding = background.padding;
+	        }
+	    }
+	    return attrs;
+	}
+
+	class ContinueTableLegend {
+	    table;
+	    option;
+	    orient;
+	    visible;
+	    position;
+	    selectedData;
+	    legendComponent;
+	    constructor(option, table) {
+	        this.table = table;
+	        this.option = cloneDeep(option);
+	        this.orient = option.orient ?? 'left';
+	        this.visible = option.visible ?? true;
+	        this.position = option.position ?? 'middle';
+	        this.selectedData = option.defaultSelected ?? [];
+	        this.createComponent();
+	        this.initEvent();
+	    }
+	    createComponent() {
+	        const attrs = this.getLegendAttributes({
+	            width: this.table.tableNoFrameWidth,
+	            height: this.table.tableNoFrameHeight
+	        });
+	        let legend;
+	        if (this.option.type === 'color') {
+	            legend = new ColorContinuousLegend(merge$2({}, attrs, {
+	                slidable: true
+	            }));
+	        }
+	        else {
+	            legend = new SizeContinuousLegend(merge$2({}, attrs, {
+	                slidable: true
+	            }));
+	        }
+	        legend.name = 'legend';
+	        this.legendComponent = legend;
+	        this.table.scenegraph.stage.defaultLayer.appendChild(legend);
+	        this.adjustTableSize(attrs);
+	    }
+	    resize() {
+	        if (!this.legendComponent) {
+	            return;
+	        }
+	        this.legendComponent.setAttributes({
+	            width: this.table.tableNoFrameWidth,
+	            height: this.table.tableNoFrameHeight
+	        });
+	        this.adjustTableSize(this.legendComponent.attribute);
+	    }
+	    adjustTableSize(attrs) {
+	        let width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;
+	        let height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;
+	        const rectWidth = this.table.tableNoFrameWidth;
+	        const rectHeight = this.table.tableNoFrameHeight;
+	        const padding = getQuadProps(attrs.padding ?? this.option.padding ?? 10);
+	        let x = 0;
+	        let y = 0;
+	        if (this.orient === 'left') {
+	            x = padding[3];
+	            y = 0;
+	            width += padding[1] + padding[3];
+	        }
+	        else if (this.orient === 'top') {
+	            x = 0;
+	            y = padding[0];
+	            height += padding[0] + padding[2];
+	        }
+	        else if (this.orient === 'right') {
+	            x = rectWidth - width - padding[1];
+	            y = 0;
+	            width += padding[1] + padding[3];
+	        }
+	        else if (this.orient === 'bottom') {
+	            x = 0;
+	            y = rectHeight - height - padding[2];
+	            height += padding[0] + padding[2];
+	        }
+	        const layout = this.orient === 'bottom' || this.orient === 'top' ? 'horizontal' : 'vertical';
+	        const position = this.position;
+	        let offsetX = 0;
+	        let offsetY = 0;
+	        if (layout === 'horizontal') {
+	            if (position === 'middle') {
+	                offsetX = (rectWidth - width) / 2;
+	            }
+	            else if (position === 'end') {
+	                offsetX = rectWidth - width - padding[1];
+	            }
+	            else {
+	                offsetX = padding[3];
+	            }
+	        }
+	        else {
+	            if (position === 'middle') {
+	                offsetY = (rectHeight - height) / 2;
+	            }
+	            else if (position === 'end') {
+	                offsetY = rectHeight - height - padding[2];
+	            }
+	            else {
+	                offsetY = padding[0];
+	            }
+	        }
+	        this.legendComponent.setAttributes({
+	            dx: offsetX,
+	            dy: offsetY,
+	            x,
+	            y
+	        });
+	        if (this.orient === 'left') {
+	            this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);
+	            this.table.tableX += Math.ceil(width);
+	        }
+	        else if (this.orient === 'top') {
+	            this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);
+	            this.table.tableY += Math.ceil(height);
+	        }
+	        else if (this.orient === 'right') {
+	            this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);
+	        }
+	        else if (this.orient === 'bottom') {
+	            this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);
+	        }
+	    }
+	    getLegendAttributes(rect) {
+	        const layout = this.orient === 'bottom' || this.orient === 'top' ? 'horizontal' : 'vertical';
+	        const align = layout === 'horizontal' ? 'bottom' : this.orient;
+	        const attrs = {
+	            ...getContinuousLegendAttributes(this.option),
+	            layout,
+	            align,
+	            min: this.option.min,
+	            max: this.option.max,
+	            value: this.option.value,
+	            [this.option.type === 'color' ? 'colors' : 'sizeRange']: this.option.type === 'color'
+	                ? this.option.colors
+	                : this.option.sizeRange
+	        };
+	        return attrs;
+	    }
+	    initEvent() {
+	        if (this.legendComponent) {
+	            this.legendComponent.addEventListener('change', (e) => {
+	                const selectedData = get$3(e, 'detail.value');
+	                this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_CHANGE, { model: this, value: selectedData, event: e });
+	                this.table.scenegraph.updateNextFrame();
+	            });
+	        }
+	    }
+	    getLegendBounds() {
+	        const width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;
+	        const height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;
+	        return {
+	            width: width,
+	            height: height
+	        };
+	    }
+	    release() {
+	        this.legendComponent && this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);
+	        this.legendComponent = null;
+	    }
+	}
+
+	function createLegend(option, table) {
+	    if (option.type === 'color' || option.type === 'size') {
+	        return new ContinueTableLegend(option, table);
+	    }
+	    return new DiscreteTableLegend(option, table);
+	}
+
 	class Title {
 	    table;
 	    _titleOption;
@@ -56245,7 +57300,7 @@
 	        return TABLE_EVENT_TYPE;
 	    }
 	    options;
-	    version = "0.10.2-alpha.3";
+	    version = "0.10.2";
 	    pagination;
 	    id = `VTable${Date.now()}`;
 	    headerStyleCache;
@@ -56339,7 +57394,7 @@
 	        this.stateManeger = new StateManeger(this);
 	        this.eventManeger = new EventManeger(this);
 	        if (options.legends) {
-	            internalProps.legends = new TableLegend(options.legends, this);
+	            internalProps.legends = createLegend(options.legends, this);
 	            this.scenegraph.tableGroup.setAttributes({
 	                x: this.tableX,
 	                y: this.tableY
@@ -57241,7 +58296,7 @@
 	        this.stateManeger.initState();
 	        this._updateSize();
 	        if (options.legends) {
-	            internalProps.legends = new TableLegend(options.legends, this);
+	            internalProps.legends = createLegend(options.legends, this);
 	            this.scenegraph.tableGroup.setAttributes({
 	                x: this.tableX,
 	                y: this.tableY
@@ -57482,17 +58537,6 @@
 	        this.stateManeger.updateSelectPos(col, row);
 	        this.stateManeger.endSelectCells();
 	    }
-	    updatePagination(cof) {
-	        if (this.pagination) {
-	            typeof cof.currentPage === 'number' && cof.currentPage >= 0 && (this.pagination.currentPage = cof.currentPage);
-	            cof.perPageCount && (this.pagination.perPageCount = cof.perPageCount || this.pagination.perPageCount);
-	            this.scenegraph.clearCells();
-	            this.dataSource.updatePagination(this.pagination);
-	            this.refreshRowColCount();
-	            this.scenegraph.createSceneGraph();
-	            this.render();
-	        }
-	    }
 	    get allowFrozenColCount() {
 	        return this.internalProps.allowFrozenColCount;
 	    }
@@ -59366,6 +60410,20 @@
 	            setTimeout(resolve, 0);
 	        });
 	    }
+	    updatePagination(pagination) {
+	        if (this.pagination) {
+	            typeof pagination.currentPage === 'number' &&
+	                pagination.currentPage >= 0 &&
+	                (this.pagination.currentPage = pagination.currentPage);
+	            pagination.perPageCount &&
+	                (this.pagination.perPageCount = pagination.perPageCount || this.pagination.perPageCount);
+	            this.scenegraph.clearCells();
+	            this.dataSource.updatePagination(this.pagination);
+	            this.refreshRowColCount();
+	            this.scenegraph.createSceneGraph();
+	            this.render();
+	        }
+	    }
 	    refreshHeader() {
 	        const table = this;
 	        const internalProps = table.internalProps;
@@ -63084,6 +64142,7 @@
 
 	class Dataset {
 	    dataConfig;
+	    pagination;
 	    records;
 	    tree = {};
 	    colFlatKeys = {};
@@ -63116,7 +64175,8 @@
 	    rows;
 	    columns;
 	    indicatorKeys;
-	    constructor(dataConfig, rows, columns, indicatorKeys, records, customColTree, customRowTree) {
+	    rowKeysPath_FULL;
+	    constructor(dataConfig, pagination, rows, columns, indicatorKeys, records, customColTree, customRowTree) {
 	        this.registerAggregators();
 	        this.dataConfig = dataConfig;
 	        this.sortRules = this.dataConfig?.sortRules;
@@ -63162,10 +64222,10 @@
 	            console.log('sortKeys:', t3 - t2);
 	            const t7 = typeof window !== 'undefined' ? window.performance.now() : 0;
 	            if (customRowTree) {
-	                this.rowKeysPath = this.TreeToArr2(customRowTree);
+	                this.rowKeysPath_FULL = this.TreeToArr2(customRowTree);
 	            }
 	            else {
-	                this.rowKeysPath = this.TreeToArr(this.ArrToTree(this.rowKeys, this.rowsIsTotal, this?.totals?.row?.showGrandTotals, this.rowGrandTotalLabel, this.rowSubTotalLabel));
+	                this.rowKeysPath_FULL = this.TreeToArr(this.ArrToTree(this.rowKeys, this.rowsIsTotal, this?.totals?.row?.showGrandTotals, this.rowGrandTotalLabel, this.rowSubTotalLabel));
 	            }
 	            if (customColTree) {
 	                this.colKeysPath = this.TreeToArr2(customColTree);
@@ -63180,6 +64240,7 @@
 	                this.cacheDeminsionCollectedValues();
 	            }
 	        }
+	        this.updatePagination(pagination);
 	    }
 	    registerAggregator(type, aggregator) {
 	        this.aggregators[type] = aggregator;
@@ -63384,7 +64445,7 @@
 	        this.sorted = false;
 	        this.sortRules = sortRules;
 	        this.sortKeys();
-	        this.rowKeysPath = this.TreeToArr(this.ArrToTree(this.rowKeys, this.rowsIsTotal, this?.totals?.row?.showGrandTotals || this.columns.length === 0, this.rowGrandTotalLabel, this.rowSubTotalLabel));
+	        this.rowKeysPath_FULL = this.TreeToArr(this.ArrToTree(this.rowKeys, this.rowsIsTotal, this?.totals?.row?.showGrandTotals || this.columns.length === 0, this.rowGrandTotalLabel, this.rowSubTotalLabel));
 	        this.colKeysPath = this.TreeToArr(this.ArrToTree(this.colKeys, this.colsIsTotal, this.totals?.column?.showGrandTotals || this.rows.length === 0, this.colGrandTotalLabel, this.colSubTotalLabel));
 	    }
 	    updateFilterRules(filterRules, isResetTree = false) {
@@ -63409,6 +64470,21 @@
 	            this.dealWithZeroAlign();
 	        }
 	    }
+	    updatePagination(pagination) {
+	        this.pagination = pagination;
+	        if (isValid$1(this.pagination?.perPageCount) && isValid$1(this.pagination?.currentPage)) {
+	            this.pagination.perPageCount =
+	                Math.ceil(this.pagination.perPageCount / this.indicatorKeys.length) * this.indicatorKeys.length;
+	            const { perPageCount, currentPage } = this.pagination;
+	            const startIndex = Math.ceil((perPageCount * (currentPage || 0)) / this.indicatorKeys.length);
+	            const endIndex = startIndex + Math.ceil(perPageCount / this.indicatorKeys.length);
+	            this.rowKeysPath = this.rowKeysPath_FULL?.slice(startIndex, endIndex);
+	        }
+	        else {
+	            this.rowKeysPath = this.rowKeysPath_FULL;
+	        }
+	        this.pagination && (this.pagination.totalCount = this.rowKeysPath_FULL?.length);
+	    }
 	    getAggregatorRule(indicatorKey) {
 	        return this.aggregationRules?.find((value, index) => {
 	            return indicatorKey === value.indicatorKey;
@@ -63875,7 +64951,7 @@
 	                }
 	                return keys;
 	            }, []) ?? [];
-	            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, options.records);
+	            this.dataset = new Dataset(this.internalProps.dataConfig, this.pagination, rowKeys, columnKeys, indicatorKeys, options.records);
 	        }
 	        this.refreshHeader();
 	        this.pivotSortState = [];
@@ -63959,7 +65035,7 @@
 	                }
 	                return keys;
 	            }, []);
-	            this.dataset = new Dataset(internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, options.records);
+	            this.dataset = new Dataset(internalProps.dataConfig, this.pagination, rowKeys, columnKeys, indicatorKeys, options.records);
 	        }
 	        this.refreshHeader();
 	        if (internalProps.releaseList) {
@@ -63985,6 +65061,20 @@
 	            setTimeout(resolve, 0);
 	        });
 	    }
+	    updatePagination(pagination) {
+	        if (this.pagination) {
+	            typeof pagination.currentPage === 'number' &&
+	                pagination.currentPage >= 0 &&
+	                (this.pagination.currentPage = pagination.currentPage);
+	            pagination.perPageCount &&
+	                (this.pagination.perPageCount = pagination.perPageCount || this.pagination.perPageCount);
+	            this.scenegraph.clearCells();
+	            this.dataset.updatePagination(this.pagination);
+	            this.refreshHeader();
+	            this.scenegraph.createSceneGraph();
+	            this.render();
+	        }
+	    }
 	    refreshHeader() {
 	        const internalProps = this.internalProps;
 	        if (internalProps.headerEvents) {
@@ -64332,7 +65422,7 @@
 	            this.internalProps.dataConfig.collectValuesBy = this._generateCollectValuesConfig(columnKeys, rowKeys);
 	            this.internalProps.dataConfig.aggregationRules = this._generateAggregationRules();
 	            this.internalProps.dataConfig.dimensionSortArray = this._getDimensionSortArray();
-	            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, options.records, options.columnTree, options.rowTree);
+	            this.dataset = new Dataset(this.internalProps.dataConfig, null, rowKeys, columnKeys, indicatorKeys, options.records, options.columnTree, options.rowTree);
 	        }
 	        this.refreshHeader();
 	        if (options.dataSource) {
@@ -64409,7 +65499,7 @@
 	            }, []);
 	            this.internalProps.dataConfig.collectValuesBy = this._generateCollectValuesConfig(columnKeys, rowKeys);
 	            this.internalProps.dataConfig.aggregationRules = this._generateAggregationRules();
-	            this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, options.records ?? this.internalProps.records, options.columnTree, options.rowTree);
+	            this.dataset = new Dataset(this.internalProps.dataConfig, null, rowKeys, columnKeys, indicatorKeys, options.records ?? this.internalProps.records, options.columnTree, options.rowTree);
 	        }
 	        this.refreshHeader();
 	        if (internalProps.releaseList) {
@@ -64431,6 +65521,8 @@
 	            setTimeout(resolve, 0);
 	        });
 	    }
+	    updatePagination() {
+	    }
 	    refreshHeader() {
 	        const internalProps = this.internalProps;
 	        if (internalProps.headerEvents) {
@@ -65568,7 +66660,7 @@
 		percentCalc: percentCalc
 	});
 
-	const version = "0.10.2-alpha.3";
+	const version = "0.10.2";
 	function getIcons() {
 	    return get$1();
 	}