@visactor/vtable 0.25.1-alpha.2 → 0.25.1-alpha.4

package/dist/vtable.js

@@ -3924,7 +3924,7 @@
           controlX = 0,
           controlY = 0;
         for (let i = 0, len = commandStrList.length; i < len; ++i) {
-          switch (current = commandStrList[i], 1 === sX && 1 === sY || (current = scale$2(current, sX, sY)), current[0]) {
+          switch (current = commandStrList[i], 1 === sX && 1 === sY || (current = scale$3(current, sX, sY)), current[0]) {
             case "l":
               x += current[1], y += current[2], this.lineTo(x + l, y + t);
               break;
@@ -4068,7 +4068,7 @@
       }
     }
     const temp = ["l", 0, 0, 0, 0, 0, 0, 0];
-    function scale$2(current, sX, sY) {
+    function scale$3(current, sX, sY) {
       const c = temp[0] = current[0];
       if ("a" === c || "A" === c) temp[1] = sX * current[1], temp[2] = sY * current[2], temp[3] = current[3], temp[4] = current[4], temp[5] = current[5], temp[6] = sX * current[6], temp[7] = sY * current[7];else if ("h" === c || "H" === c) temp[1] = sX * current[1];else if ("v" === c || "V" === c) temp[1] = sY * current[1];else for (let i = 1, n = current.length; i < n; ++i) temp[i] = (i % 2 == 1 ? sX : sY) * current[i];
       return temp;
@@ -8145,7 +8145,7 @@
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicService = Symbol.for("GraphicService");
-    const GraphicCreator$1 = Symbol.for("GraphicCreator");
+    const GraphicCreator$2 = Symbol.for("GraphicCreator");
     const SVG_PARSE_ATTRIBUTE_MAP = {
       "stroke-linecap": "lineCap",
       "stroke-linejoin": "lineJoin",
@@ -11871,7 +11871,7 @@
     function mat3Tomat4(out, b) {
       out[0] = b.a, out[1] = b.b, out[2] = 0, out[3] = 0, out[4] = b.c, out[5] = b.d, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = b.e, out[13] = b.f, out[14] = 0, out[15] = 1;
     }
-    function scale$1(out, a, v) {
+    function scale$2(out, a, v) {
       const x = v[0],
         y = v[1],
         z = v[2];
@@ -11932,7 +11932,7 @@
         } else _anchor[1] = anchor3d[1];
         _anchor[2] = null !== (_a = anchor3d[2]) && void 0 !== _a ? _a : 0;
       }
-      if (identity$2(out), translate(out, out, [x + dx, y + dy, z + dz]), translate(out, out, [_anchor[0], _anchor[1], _anchor[2]]), rotateX(out, out, beta), rotateY(out, out, alpha), translate(out, out, [-_anchor[0], -_anchor[1], _anchor[2]]), scale$1(out, out, [scaleX, scaleY, scaleZ]), angle) {
+      if (identity$2(out), translate(out, out, [x + dx, y + dy, z + dz]), translate(out, out, [_anchor[0], _anchor[1], _anchor[2]]), rotateX(out, out, beta), rotateY(out, out, alpha), translate(out, out, [-_anchor[0], -_anchor[1], _anchor[2]]), scale$2(out, out, [scaleX, scaleY, scaleZ]), angle) {
         const m = mat4Allocate.allocate(),
           _anchor = [0, 0];
         if (anchor) {
@@ -12401,9 +12401,9 @@
         return !!visible || (aabbBounds.clear(), !1);
       }
     };
-    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$1)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$2)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
 
-    class GraphicCreator {
+    let GraphicCreator$1 = class GraphicCreator {
       constructor() {
         this.store = new Map();
       }
@@ -12414,12 +12414,12 @@
         const cb = this.store.get(name);
         return cb ? cb(params) : null;
       }
-    }
-    const graphicCreator = new GraphicCreator();
+    };
+    const graphicCreator$1 = new GraphicCreator$1();
 
-    let text;
-    function getTextBounds(params) {
-      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
+    let text$1;
+    function getTextBounds$1(params) {
+      return text$1 || (text$1 = graphicCreator$1.CreateGraphic("text", {})), text$1.initAttributes(params), text$1.AABBBounds;
     }
 
     const result = {
@@ -14654,7 +14654,7 @@
               h = b.height();
             b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), w, h);
           }
-        } else b = graphic.AABBBounds, onlyTranslate || (b = getTextBounds(Object.assign(Object.assign({}, graphic.attribute), {
+        } else b = graphic.AABBBounds, onlyTranslate || (b = getTextBounds$1(Object.assign(Object.assign({}, graphic.attribute), {
           angle: 0,
           scaleX: 1,
           scaleY: 1,
@@ -15189,7 +15189,7 @@
       getShadowRoot(interactiveLayer) {
         var _a;
         let group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+        return group || (group = graphicCreator$1.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
       }
     }
     class Canvas3DDrawItemInterceptor {
@@ -15442,7 +15442,7 @@
     });
 
     var graphicModule = new ContainerModule(bind => {
-      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$1).toConstantValue(graphicCreator);
+      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$2).toConstantValue(graphicCreator$1);
     });
 
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
@@ -18428,75 +18428,75 @@
     });
 
     function registerArcGraphic() {
-      graphicCreator.RegisterGraphicCreator("arc", createArc);
+      graphicCreator$1.RegisterGraphicCreator("arc", createArc);
     }
 
     function registerArc3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("arc3d", createArc3d);
+      graphicCreator$1.RegisterGraphicCreator("arc3d", createArc3d);
     }
 
     function registerAreaGraphic() {
-      graphicCreator.RegisterGraphicCreator("area", createArea);
+      graphicCreator$1.RegisterGraphicCreator("area", createArea);
     }
 
     function registerCircleGraphic() {
-      graphicCreator.RegisterGraphicCreator("circle", createCircle);
+      graphicCreator$1.RegisterGraphicCreator("circle", createCircle);
     }
 
     function registerGlyphGraphic() {
-      graphicCreator.RegisterGraphicCreator("glyph", createGlyph);
+      graphicCreator$1.RegisterGraphicCreator("glyph", createGlyph);
     }
 
     function registerGroupGraphic() {
-      graphicCreator.RegisterGraphicCreator("group", createGroup);
+      graphicCreator$1.RegisterGraphicCreator("group", createGroup);
     }
 
     function registerImageGraphic() {
-      graphicCreator.RegisterGraphicCreator("image", createImage);
+      graphicCreator$1.RegisterGraphicCreator("image", createImage);
     }
 
     function registerLineGraphic() {
-      graphicCreator.RegisterGraphicCreator("line", createLine);
+      graphicCreator$1.RegisterGraphicCreator("line", createLine);
     }
 
     function registerPathGraphic() {
-      graphicCreator.RegisterGraphicCreator("path", createPath);
+      graphicCreator$1.RegisterGraphicCreator("path", createPath);
     }
 
     function registerPolygonGraphic() {
-      graphicCreator.RegisterGraphicCreator("polygon", createPolygon);
+      graphicCreator$1.RegisterGraphicCreator("polygon", createPolygon);
     }
 
     function registerPyramid3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("pyramid3d", createPyramid3d);
+      graphicCreator$1.RegisterGraphicCreator("pyramid3d", createPyramid3d);
     }
 
     function registerRectGraphic() {
-      graphicCreator.RegisterGraphicCreator("rect", createRect);
+      graphicCreator$1.RegisterGraphicCreator("rect", createRect);
     }
 
     function registerRect3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("rect3d", createRect3d);
+      graphicCreator$1.RegisterGraphicCreator("rect3d", createRect3d);
     }
 
     function registerRichtextGraphic() {
-      graphicCreator.RegisterGraphicCreator("richtext", createRichText);
+      graphicCreator$1.RegisterGraphicCreator("richtext", createRichText);
     }
 
     function registerSymbolGraphic() {
-      graphicCreator.RegisterGraphicCreator("symbol", createSymbol);
+      graphicCreator$1.RegisterGraphicCreator("symbol", createSymbol);
     }
 
     function registerTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("text", createText);
+      graphicCreator$1.RegisterGraphicCreator("text", createText);
     }
 
     function registerShadowRootGraphic() {
-      graphicCreator.RegisterGraphicCreator("shadowRoot", createShadowRoot);
+      graphicCreator$1.RegisterGraphicCreator("shadowRoot", createShadowRoot);
     }
 
     function registerWrapTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
+      graphicCreator$1.RegisterGraphicCreator("wrapText", createWrapText);
     }
 
     const REACT_TO_CANOPUS_EVENTS = {
@@ -18547,40 +18547,40 @@
       onDblClick: "dblclick"
     };
     function VArc(params) {
-      return graphicCreator.arc(params ? params.attribute : {});
+      return graphicCreator$1.arc(params ? params.attribute : {});
     }
     function VArea(params) {
-      return graphicCreator.area(params ? params.attribute : {});
+      return graphicCreator$1.area(params ? params.attribute : {});
     }
     function VCircle(params) {
-      return graphicCreator.circle(params ? params.attribute : {});
+      return graphicCreator$1.circle(params ? params.attribute : {});
     }
     function VGroup(params) {
-      return graphicCreator.group(params ? params.attribute : {});
+      return graphicCreator$1.group(params ? params.attribute : {});
     }
     function VGlyph(params) {
-      return graphicCreator.glyph(params ? params.attribute : {});
+      return graphicCreator$1.glyph(params ? params.attribute : {});
     }
     function VImage(params) {
-      return graphicCreator.image(params ? params.attribute : {});
+      return graphicCreator$1.image(params ? params.attribute : {});
     }
     function VLine(params) {
-      return graphicCreator.line(params ? params.attribute : {});
+      return graphicCreator$1.line(params ? params.attribute : {});
     }
     function VPath(params) {
-      return graphicCreator.path(params ? params.attribute : {});
+      return graphicCreator$1.path(params ? params.attribute : {});
     }
     function VPolygon(params) {
-      return graphicCreator.polygon(params ? params.attribute : {});
+      return graphicCreator$1.polygon(params ? params.attribute : {});
     }
     function VRect(params) {
-      return graphicCreator.rect(params ? params.attribute : {});
+      return graphicCreator$1.rect(params ? params.attribute : {});
     }
     function VSymbol(params) {
-      return graphicCreator.symbol(params ? params.attribute : {});
+      return graphicCreator$1.symbol(params ? params.attribute : {});
     }
     function VText(params) {
-      return graphicCreator.text(params ? params.attribute : {});
+      return graphicCreator$1.text(params ? params.attribute : {});
     }
 
     var __rest$4 = undefined && undefined.__rest || function (s, e) {
@@ -18607,7 +18607,7 @@
         } = _a,
         props = __rest$4(_a, ["key", "name", "id", "attribute", "stateProxy"]);
       let c = type;
-      isString$2(type) && (c = graphicCreator[type]);
+      isString$2(type) && (c = graphicCreator$1[type]);
       const childrenList = [];
       for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
         children[_key - 2] = arguments[_key];
@@ -25428,13 +25428,9 @@
       });
     }
 
-    function scale(vector, scale) {
+    function scale$1(vector, scale) {
       return [vector[0] * scale, vector[1] * scale];
     }
-    function length(vector) {
-      const [x, y] = vector;
-      return Math.sqrt(x * x + y * y);
-    }
     function normalize$2(vector) {
       const [x, y] = vector;
       let len = x * x + y * y;
@@ -25462,7 +25458,7 @@
         width: 0,
         height: 0
       };
-      const bounds = getTextBounds({
+      const bounds = getTextBounds$1({
         text: text,
         fontFamily: textSpec.fontFamily || defaultTextTheme.fontFamily || DEFAULT_TEXT_FONT_FAMILY$1,
         fontSize: textSpec.fontSize || defaultTextTheme.fontSize || 12,
@@ -26106,7 +26102,7 @@
           }
           points.forEach((point, index) => {
             var _a, _b;
-            const line = graphicCreator.line(Object.assign(Object.assign({
+            const line = graphicCreator$1.line(Object.assign(Object.assign({
               points: point
             }, isArray$3(lineStyle) ? null !== (_a = lineStyle[index]) && void 0 !== _a ? _a : lineStyle[lineStyle.length - 1] : lineStyle), {
               fill: !1
@@ -26114,8 +26110,8 @@
             line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray$3(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
           });
         } else {
-          let lineCreator = graphicCreator.line;
-          array$1(lineStyle)[0].cornerRadius && (lineCreator = graphicCreator.polygon);
+          let lineCreator = graphicCreator$1.line;
+          array$1(lineStyle)[0].cornerRadius && (lineCreator = graphicCreator$1.polygon);
           const line = lineCreator(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
@@ -26155,7 +26151,7 @@
           }, rotate = startAngle + Math.PI / 2) : (position = {
             x: end.x + (isValidNumber$1(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
             y: end.y + (isValidNumber$1(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
-          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
+          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator$1.symbol(Object.assign(Object.assign(Object.assign({}, position), {
             symbolType: symbolType,
             size: size,
             angle: autoRotate ? rotate + refAngle : 0,
@@ -26318,54 +26314,18 @@
       }
     };
 
-    const clampRadian = function () {
-      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      if (angle < 0) for (; angle < 0;) angle += tau;else if (angle > 0) for (; angle > tau;) angle -= tau;
-      return angle;
-    };
-    function isInRange(a, min, max) {
-      return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
-    }
-    function getCircleLabelPosition(tickPosition, tickVector, text, style) {
-      const labelBounds = getTextBounds(Object.assign({
-          text: text
-        }, style)),
-        width = labelBounds.width(),
-        height = labelBounds.height(),
-        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
-        PI_3_4 = 3 * Math.PI / 4,
-        PI_1_4 = Math.PI / 4,
-        PI_1_2 = Math.PI / 2,
-        baseX = tickPosition.x;
-      let dx = 0;
-      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
-      const x = baseX - dx,
-        baseY = tickPosition.y;
-      let dy = 0;
-      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
-      return {
-        x: x,
-        y: baseY - dy
-      };
-    }
     function getElMap(g) {
       const elMap = {};
       return traverseGroup(g, el => {
         "group" !== el.type && el.id && (elMap[el.id] = el);
       }), elMap;
     }
-    function getVerticalCoord(point, vector) {
+    function getVerticalCoord$1(point, vector) {
       return {
         x: point.x + vector[0],
         y: point.y + vector[1]
       };
     }
-    function getCircleVerticalVector(offset, point, center) {
-      let inside = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-      let axisInside = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
-      const vector = [point.x - center.x, point.y - center.y];
-      return scale(vector, (inside ? -1 : 1) * (axisInside ? -1 : 1) * offset / length(vector));
-    }
 
     class AxisBase extends AbstractComponent {
       constructor() {
@@ -26397,14 +26357,14 @@
       getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
         merge(this.attribute, attributes);
-        const offscreenGroup = graphicCreator.group({
+        const offscreenGroup = graphicCreator$1.group({
           x: this.attribute.x,
           y: this.attribute.y
         });
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator.group({
+        this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26426,13 +26386,13 @@
             line: line,
             items: items
           } = this.attribute,
-          axisContainer = graphicCreator.group({
+          axisContainer = graphicCreator$1.group({
             x: 0,
             y: 0,
             zIndex: 1
           });
         if (axisContainer.name = AXIS_ELEMENT_NAME.axisContainer, axisContainer.id = this._getNodeId("container"), axisContainer.setMode(this.mode), this.axisContainer = axisContainer, container.add(axisContainer), line && line.visible && this.renderLine(axisContainer), items && items.length && (this.data = this._transformItems(items[0]), tick && tick.visible && this.renderTicks(axisContainer), label && label.visible)) {
-          const labelGroup = graphicCreator.group({
+          const labelGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -26465,14 +26425,14 @@
       }
       renderTicks(container) {
         const tickLineItems = this.getTickLineItems(),
-          tickLineGroup = graphicCreator.group({
+          tickLineGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
           });
         tickLineGroup.name = AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), container.add(tickLineGroup), tickLineItems.forEach((item, index) => {
           var _a;
-          const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
+          const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
           if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = DEFAULT_STATES$2;else {
             const data = this.data[index],
               tickLineState = merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
@@ -26488,7 +26448,7 @@
         if (subTick && subTick.visible) {
           const subTickLineItems = this.getSubTickLineItems();
           subTickLineItems.length && subTickLineItems.forEach((item, index) => {
-            const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
+            const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
             if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = DEFAULT_STATES$2;else {
               const subTickLineState = merge({}, DEFAULT_STATES$2, subTick.state);
               Object.keys(subTickLineState).forEach(key => {
@@ -26505,7 +26465,7 @@
         } = this.attribute.label;
         dataFilter && isFunction$1(dataFilter) && (items = dataFilter(items, layer));
         const data = this._transformItems(items),
-          labelGroup = graphicCreator.group({
+          labelGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -26514,7 +26474,7 @@
           var _a;
           const labelStyle = this._getLabelAttribute(item, index, data, layer);
           let text;
-          if (text = isRichText(labelStyle) ? graphicCreator.richtext(richTextAttributeTransform(labelStyle)) : graphicCreator.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
+          if (text = isRichText(labelStyle) ? graphicCreator$1.richtext(richTextAttributeTransform(labelStyle)) : graphicCreator$1.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
             const labelState = merge({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction$1(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
@@ -26529,7 +26489,7 @@
         axisTitle.name = AXIS_ELEMENT_NAME.title, axisTitle.id = this._getNodeId("title"), container.add(axisTitle);
       }
       getVerticalCoord(point, offset, inside) {
-        return getVerticalCoord(point, this.getVerticalVector(offset, inside, point));
+        return getVerticalCoord$1(point, this.getVerticalVector(offset, inside, point));
       }
       getTextAlign(vector) {
         let align = "center";
@@ -26962,7 +26922,7 @@
           axisVector = this.getRelativeVector(),
           normalizedAxisVector = normalize$2(axisVector),
           verticalVector = [normalizedAxisVector[1], -1 * normalizedAxisVector[0]];
-        return scale(verticalVector, offset * (inside ? 1 : -1) * verticalFactor);
+        return scale$1(verticalVector, offset * (inside ? 1 : -1) * verticalFactor);
       }
     }
 
@@ -26996,7 +26956,7 @@
         if (panel && panel.visible) {
           const axisContainer = this.axisContainer,
             axisContainerBounds = axisContainer.AABBBounds,
-            bgRect = graphicCreator.rect(Object.assign({
+            bgRect = graphicCreator$1.rect(Object.assign({
               x: axisContainerBounds.x1,
               y: axisContainerBounds.y1,
               width: axisContainerBounds.width(),
@@ -27278,7 +27238,7 @@
           const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
           let x, y;
           axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize), "left" === orient ? (x = axisLabelContainerBounds.x2 - axisLabelContainerSize, y = axisLabelContainerBounds.y1) : "right" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1) : "top" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y2 - axisLabelContainerSize) : "bottom" === orient && (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1);
-          const bgRect = graphicCreator.rect({
+          const bgRect = graphicCreator$1.rect({
             x: x,
             y: y,
             width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
@@ -27383,7 +27343,7 @@
         this._current = defaultCurrent;
         const parsedPadding = normalizePadding(padding),
           isHorizontal = "horizontal" === layout,
-          container = graphicCreator.group({
+          container = graphicCreator$1.group({
             x: 0,
             y: 0
           }),
@@ -27396,7 +27356,7 @@
           nextShape: nextShape
         } = handler;
         preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
-        const preHandler = graphicCreator.symbol(Object.assign(Object.assign({
+        const preHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -27415,7 +27375,7 @@
           }, textStyle), null === (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme()) || void 0 === _c ? void 0 : _c.text),
           handlerSizeX = isNumber$4(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$4(handlerSize) ? handlerSize : handlerSize[1],
-          text = graphicCreator.text(Object.assign({
+          text = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
             y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
             text: this._getPageText(defaultCurrent),
@@ -27424,7 +27384,7 @@
             lineHeight: null == textStyle ? void 0 : textStyle.fontSize
           }, textStyle));
         this.text = text, container.add(text);
-        const nextHandler = graphicCreator.symbol(Object.assign(Object.assign({
+        const nextHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -27499,7 +27459,7 @@
             padding = 0
           } = this.attribute,
           parsedPadding = normalizePadding(padding),
-          innerView = graphicCreator.group({
+          innerView = graphicCreator$1.group({
             x: parsedPadding[3],
             y: parsedPadding[0],
             pickable: interactive,
@@ -27693,7 +27653,7 @@
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
         reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = graphicCreator.group({
+        const itemsContainer = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -27777,15 +27737,15 @@
           backgroundStyle = this._handleStyle(background, item, isSelected, index, items),
           parsedPadding = normalizePadding(padding);
         let itemGroup;
-        !1 === background.visible ? (itemGroup = graphicCreator.group({
+        !1 === background.visible ? (itemGroup = graphicCreator$1.group({
           x: 0,
           y: 0,
           cursor: null === (_a = backgroundStyle.style) || void 0 === _a ? void 0 : _a.cursor
-        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator.group(Object.assign({
+        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator$1.group(Object.assign({
           x: 0,
           y: 0
         }, backgroundStyle.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state)), itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
-        const innerGroup = graphicCreator.group({
+        const innerGroup = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -27798,7 +27758,7 @@
         if (shapeAttr && !1 !== shapeAttr.visible) {
           const s = get$5(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
           shapeSize = isArray$3(s) ? s[0] || 0 : s, shapeSpace = get$5(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
-          const itemShape = graphicCreator.symbol(Object.assign(Object.assign({
+          const itemShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: 0,
             symbolType: "circle",
@@ -27813,7 +27773,7 @@
           focusSpace = 0;
         if (focus) {
           const focusSize = get$5(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
-          focusShape = graphicCreator.symbol(Object.assign(Object.assign({
+          focusShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: -focusSize / 2 - 1,
             strokeBoundsBuffer: 0
@@ -27833,7 +27793,7 @@
           }, labelStyle.style), {
             text: text
           });
-        labelShape = isRichText(labelAttributes) ? graphicCreator.richtext(richTextAttributeTransform(labelAttributes)) : graphicCreator.text(labelAttributes), this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
+        labelShape = isRichText(labelAttributes) ? graphicCreator$1.richtext(richTextAttributeTransform(labelAttributes)) : graphicCreator$1.text(labelAttributes), this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
         const labelSpace = get$5(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid$3(value)) {
           const valueSpace = get$5(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0),
@@ -27848,7 +27808,7 @@
               text: valueText
             });
           let valueShape;
-          if (valueShape = isRichText(valueAttributes) ? graphicCreator.richtext(richTextAttributeTransform(valueAttributes)) : graphicCreator.text(valueAttributes), this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
+          if (valueShape = isRichText(valueAttributes) ? graphicCreator$1.richtext(richTextAttributeTransform(valueAttributes)) : graphicCreator$1.text(valueAttributes), this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
             const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace;
             this._autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape), valueAttr.alignRight ? valueShape.setAttributes({
               textAlign: "right",
@@ -28046,7 +28006,7 @@
           this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
         }
         defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compHeight + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compWidth + spaceCol)));
-        const clipGroup = graphicCreator.group({
+        const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
           width: isHorizontal ? contentWidth : compWidth,
@@ -28093,7 +28053,7 @@
           }), this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
         defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
-        const clipGroup = graphicCreator.group({
+        const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
           width: contentWidth,
@@ -29412,7 +29372,7 @@
         };
         const isHorizontal = "horizontal" === layout;
         this._isHorizontal = isHorizontal;
-        const innerView = graphicCreator.group({
+        const innerView = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -29420,7 +29380,7 @@
         let startTextShape,
           startLen = 0;
         if (startText && startText.visible) {
-          startTextShape = graphicCreator.text(Object.assign({
+          startTextShape = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? 0 : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : 0,
             textAlign: isHorizontal ? "start" : "center",
@@ -29431,19 +29391,19 @@
           const space = isValid$3(startText.space) ? startText.space : 0;
           startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
         }
-        const mainContainer = graphicCreator.group({
+        const mainContainer = graphicCreator$1.group({
           x: isHorizontal ? startLen : 0,
           y: isHorizontal ? 0 : startLen
         });
         innerView.add(mainContainer);
-        const railContainer = graphicCreator.group({
+        const railContainer = graphicCreator$1.group({
           x: 0,
           y: 0
         });
         let endTextShape;
         if (railContainer.name = SLIDER_ELEMENT_NAME.railContainer, this._railContainer = railContainer, mainContainer.add(railContainer), this._mainContainer = mainContainer, this._renderRail(railContainer), startLen += isHorizontal ? railWidth : railHeight, endText && endText.visible) {
           const space = isValid$3(endText.space) ? endText.space : 0;
-          endTextShape = graphicCreator.text(Object.assign({
+          endTextShape = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? startLen + space : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : startLen + space,
             textAlign: isHorizontal ? "start" : "center",
@@ -29463,7 +29423,7 @@
         } = this.attribute;
         let cursor = "default";
         !1 !== slidable && (cursor = "pointer");
-        const railShape = graphicCreator.rect(Object.assign({
+        const railShape = graphicCreator$1.rect(Object.assign({
           x: 0,
           y: 0,
           width: railWidth,
@@ -29537,7 +29497,7 @@
         } else startValue = min, endValue = clamp$3(value, min, max);
         const isHorizontal = this._isHorizontal;
         range || (startValue = min);
-        const trackContainer = graphicCreator.group({
+        const trackContainer = graphicCreator$1.group({
           x: 0,
           y: 0,
           width: railWidth,
@@ -29552,7 +29512,7 @@
         cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
         const startPos = this.calculatePosByValue(startValue, "start"),
           endPos = this.calculatePosByValue(endValue, range ? "end" : "start"),
-          track = graphicCreator.rect(Object.assign({
+          track = graphicCreator$1.rect(Object.assign({
             x: isHorizontal ? Math.min(startPos, endPos) : 0,
             y: isHorizontal ? 0 : Math.min(startPos, endPos),
             width: isHorizontal ? Math.abs(endPos - startPos) : railWidth,
@@ -29562,7 +29522,7 @@
         track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
       }
       _renderHandler(style) {
-        return graphicCreator.symbol(style);
+        return graphicCreator$1.symbol(style);
       }
       _renderHandlerText(value, position) {
         var _a, _b, _c;
@@ -29583,7 +29543,7 @@
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
         isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _renderTooltip() {
         var _a;
@@ -29600,7 +29560,7 @@
         const cx = this._isHorizontal ? 0 : railWidth / 2,
           cy = this._isHorizontal ? railHeight / 2 : 0;
         if (tooltip && tooltip.shape) {
-          const shape = graphicCreator.symbol(Object.assign({
+          const shape = graphicCreator$1.symbol(Object.assign({
             pickable: !1,
             visible: !!this._tooltipState,
             x: cx,
@@ -29617,7 +29577,7 @@
             text: ""
           };
         this._isHorizontal ? (textStyle.x = cx, textStyle.y = "top" === align ? cy - railHeight / 2 - space : cy + railHeight / 2 + space, textStyle.textAlign = "center", textStyle.textBaseline = "top" === align ? "bottom" : "top") : (textStyle.y = cy, textStyle.x = "left" === align ? cx - railWidth / 2 - space : cy + railWidth / 2 + space, textStyle.textAlign = "left" === align ? "end" : "start", textStyle.textBaseline = "middle");
-        const text = graphicCreator.text(Object.assign(Object.assign({}, textStyle), textConfig.style));
+        const text = graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), textConfig.style));
         this._mainContainer.add(text), this._tooltipText = text, this._tooltipState && this._updateTooltip();
       }
       _updateTooltip() {
@@ -30047,7 +30007,7 @@
             disableTriggerEvent: disableTriggerEvent,
             inverse: inverse
           } = this.attribute,
-          mainContainer = graphicCreator.group({
+          mainContainer = graphicCreator$1.group({
             x: 0,
             y: 0
           });
@@ -30086,7 +30046,7 @@
         let path,
           start = 0;
         "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${inverse ? 0 : railWidth},12Z`, start = railHeight) : (path = `M0,12L${railWidth},12L${inverse ? 0 : railWidth},0Z`, slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth + 12},${inverse ? 0 : railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${inverse ? 0 : railHeight}L12,${railHeight}L12,0Z`, slider.setAttribute("x", 12));
-        const background = graphicCreator.path(Object.assign(Object.assign({
+        const background = graphicCreator$1.path(Object.assign(Object.assign({
           x: 0,
           y: start,
           path: path
@@ -32089,6 +32049,25 @@
 
     const DEFAULT_CONTINUOUS_TICK_COUNT$1 = 5;
 
+    class GraphicCreator {
+      constructor() {
+        this.store = new Map();
+      }
+      RegisterGraphicCreator(name, cb) {
+        this.store.set(name, cb), this[name] = cb;
+      }
+      CreateGraphic(name, params) {
+        const cb = this.store.get(name);
+        return cb ? cb(params) : null;
+      }
+    }
+    const graphicCreator = new GraphicCreator();
+
+    let text;
+    function getTextBounds(params) {
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
+    }
+
     const initTextMeasure$1 = (textSpec, option, useNaiveCanvas, defaultFontParams) => new TextMeasure(Object.assign({
       defaultFontParams: Object.assign({
         fontFamily: "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
@@ -32098,6 +32077,57 @@
       specialCharSet: "-/: .,@%'\"~" + TextMeasure.ALPHABET_CHAR_SET + TextMeasure.ALPHABET_CHAR_SET.toUpperCase()
     }, null != option ? option : {}), textSpec);
 
+    function scale(vector, scale) {
+      return [vector[0] * scale, vector[1] * scale];
+    }
+    function length(vector) {
+      const [x, y] = vector;
+      return Math.sqrt(x * x + y * y);
+    }
+
+    const clampRadian = function () {
+      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      if (angle < 0) for (; angle < 0;) angle += tau;else if (angle > 0) for (; angle > tau;) angle -= tau;
+      return angle;
+    };
+    function isInRange(a, min, max) {
+      return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
+    }
+    function getCircleLabelPosition(tickPosition, tickVector, text, style) {
+      const labelBounds = getTextBounds(Object.assign({
+          text: text
+        }, style)),
+        width = labelBounds.width(),
+        height = labelBounds.height(),
+        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
+        PI_3_4 = 3 * Math.PI / 4,
+        PI_1_4 = Math.PI / 4,
+        PI_1_2 = Math.PI / 2,
+        baseX = tickPosition.x;
+      let dx = 0;
+      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
+      const x = baseX - dx,
+        baseY = tickPosition.y;
+      let dy = 0;
+      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
+      return {
+        x: x,
+        y: baseY - dy
+      };
+    }
+    function getVerticalCoord(point, vector) {
+      return {
+        x: point.x + vector[0],
+        y: point.y + vector[1]
+      };
+    }
+    function getCircleVerticalVector(offset, point, center) {
+      let inside = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+      let axisInside = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
+      const vector = [point.x - center.x, point.y - center.y];
+      return scale(vector, (inside ? -1 : 1) * (axisInside ? -1 : 1) * offset / length(vector));
+    }
+
     function getLabelPosition(angle, center, radius, labelOffset, inside, text, style) {
       const point = polarToCartesian({
           x: 0,
@@ -34250,6 +34280,9 @@
             this.updatePagerData();
             this.fireListeners(EVENT_TYPE.CHANGE_ORDER, null);
         }
+        setSortedIndexMap(field, filedMap) {
+            this.sortedIndexMap.set(field, filedMap);
+        }
         clearFilteredChildren(record) {
             record.filteredChildren = undefined;
             for (let i = 0; i < record.children?.length ?? 0; i++) {
@@ -36892,7 +36925,7 @@
                 const barTop = top + contentHeight - barHeight - barBottom;
                 let barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
                 const barLeft = barRightToLeft ? left + right - barSize : left;
-                if (col === table.colCount - 1 && percentile === 1) {
+                if (col === table.colCount - 1 && percentile === 1 && !barRightToLeft) {
                     barSize -= 1;
                 }
                 const bgFillColor = getOrApply(barBgColor, {
@@ -36994,7 +37027,7 @@
                 });
                 percentCompleteBarGroup.addChild(barNega);
                 let barSizePosi = Math.min(barMaxWidth * positiveFactor * positiveRate, barMaxWidth);
-                if (col === table.colCount - 1 && positiveRate === 1) {
+                if (col === table.colCount - 1 && positiveRate === 1 && !barRightToLeft) {
                     barSizePosi -= 1;
                 }
                 const barRectPosi = barRightToLeft
@@ -37120,7 +37153,7 @@
                 const percentile = range === 0 ? 0 : Math.abs(num) / range;
                 const barMaxWidth = contentWidth;
                 let barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
-                if (col === table.colCount - 1 && percentile === 1) {
+                if (col === table.colCount - 1 && percentile === 1 && !barRightToLeft) {
                     barSize -= 1;
                 }
                 const barTop = top + contentHeight - barHeight - barBottom;
@@ -39461,7 +39494,7 @@
                     cellGroup.contentWidth = contentWidth;
                     cellGroup.contentHeight = contentHeight;
                     resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table);
-                    return customResult;
+                    return customMergeRange;
                 }
             }
         }
@@ -39843,7 +39876,7 @@
                         visible: true,
                         text: indicatorInfo?.title
                     },
-                    range: range
+                    range
                 }, axisOption, {
                     orient: 'bottom',
                     type: axisOption?.type || 'linear',
@@ -39868,14 +39901,20 @@
                 if (axisOption?.visible === false) {
                     return;
                 }
+                const spec = layout.getRawChartSpec(col + 1, row);
                 return merge({
-                    domain: chartType === 'common' ? Array.from(domain) : Array.from(domain).reverse(),
+                    domain: chartType === 'scatter'
+                        ? undefined
+                        : spec?.series?.length >= 1
+                            ? Array.from(domain)
+                            : Array.from(domain).reverse(),
+                    range: chartType === 'scatter' ? domain : undefined,
                     title: {
                         autoRotate: true
                     }
                 }, axisOption, {
                     orient: 'left',
-                    type: 'band',
+                    type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
                     __vtableChartTheme: theme
                 });
             }
@@ -39993,15 +40032,16 @@
                 const data = layout.dataset.collectedValues[columnDimensionKey] ?? [];
                 const colPath = layout.getColKeysPath(col, row);
                 const domain = data?.[colPath ?? ''] ?? [];
-                const { axisOption, isPercent, theme } = getAxisOption(col, row - 1, 'bottom', layout);
+                const { axisOption, isPercent, theme, chartType } = getAxisOption(col, row - 1, 'bottom', layout);
                 if (axisOption?.visible === false) {
                     return;
                 }
                 return merge({
-                    domain: Array.from(domain)
+                    domain: chartType === 'scatter' ? undefined : Array.from(domain),
+                    range: chartType === 'scatter' ? domain : undefined
                 }, axisOption, {
                     orient: 'bottom',
-                    type: 'band',
+                    type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
                     __vtableChartTheme: theme
                 });
             }
@@ -40010,15 +40050,31 @@
     }
     function getAxisOption(col, row, orient, layout) {
         const spec = layout.getRawChartSpec(col, row);
-        if (spec && isArray$3(spec.axes)) {
-            const axisOption = spec.axes.find((axis) => {
+        const axes = spec.axes ?? [];
+        layout._table.pivotChartAxes.forEach(axis => {
+            const index = axes.findIndex((a) => {
+                return axis.orient === a.orient;
+            });
+            if (index === -1) {
+                axes.push(axis);
+            }
+        });
+        if (spec && isArray$3(axes)) {
+            const axisOption = axes.find((axis) => {
                 return axis.orient === orient;
             });
             if (axisOption) {
                 const { seriesIndex, seriesId } = axisOption;
                 let seriesIndice;
+                let seriesSpec;
                 if (isValid$3(seriesId) && isArray$3(spec.series)) {
-                    seriesIndice = (isArray$3(seriesId) ? seriesId : [seriesId]).map(id => spec.series.findIndex((s) => s.id === id));
+                    seriesIndice = (isArray$3(seriesId) ? seriesId : [seriesId]).map(id => {
+                        const index = spec.series.findIndex((s) => s.id === id);
+                        if (index >= 0) {
+                            seriesSpec = spec.series[index];
+                        }
+                        return index;
+                    });
                 }
                 else if (isValid$3(seriesIndex) && isArray$3(spec.series)) {
                     seriesIndice = seriesIndex;
@@ -40029,7 +40085,7 @@
                     isZeroAlign: checkZeroAlign(spec, orient, layout),
                     seriesIndice,
                     theme: spec.theme,
-                    chartType: spec.type
+                    chartType: seriesSpec?.type ?? spec.type
                 };
             }
         }
@@ -40529,7 +40585,7 @@
                 fontFamily: DefaultTextStyle.fontFamily,
                 fontSize: DefaultTextStyle.fontSize
             },
-            getTextBounds: useNaiveCanvas ? undefined : getTextBounds,
+            getTextBounds: useNaiveCanvas ? undefined : getTextBounds$1,
             specialCharSet: `{}()//&-/: .,@%'"~…=${TextMeasure.ALPHABET_CHAR_SET}${TextMeasure.ALPHABET_CHAR_SET.toUpperCase()}0123456789${customAlphabetCharSet}`,
             ...(option ?? {})
         }, textSpec);
@@ -41155,7 +41211,7 @@
         }
         else {
             text = cellValue;
-            const lines = validToString(text).split('\n') || [];
+            const lines = breakString(text, table);
             const cellWidth = table.getColsWidth(col, endCol);
             if (iconInlineFront.length || iconInlineEnd.length) {
                 if (autoWrapText) {
@@ -41351,7 +41407,20 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                if (!getCustomCellMergeCustom(col, row, cell, scene.table)) {
+                const customMergeRange = getCustomCellMergeCustom(col, row, cell, scene.table);
+                if (customMergeRange) {
+                    for (let mergeRow = customMergeRange.start.row; mergeRow <= customMergeRange.end.row; mergeRow++) {
+                        if (mergeRow === row) {
+                            continue;
+                        }
+                        const mergedCell = scene.getCell(col, mergeRow);
+                        const customContainer = mergedCell.getChildByName('custom-container');
+                        customContainer.removeAllChild();
+                        mergedCell.removeChild(customContainer);
+                        getCustomCellMergeCustom(col, mergeRow, mergedCell, scene.table);
+                    }
+                }
+                else {
                     let customRender;
                     let customLayout;
                     const cellLocation = scene.table.getCellLocation(col, row);
@@ -41658,7 +41727,20 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                if (!getCustomCellMergeCustom(col, row, cell, scene.table)) {
+                const customMergeRange = getCustomCellMergeCustom(col, row, cell, scene.table);
+                if (customMergeRange) {
+                    for (let mergeCol = customMergeRange.start.col; mergeCol <= customMergeRange.end.col; mergeCol++) {
+                        if (mergeCol === col) {
+                            continue;
+                        }
+                        const mergedCell = scene.getCell(mergeCol, row);
+                        const customContainer = mergedCell.getChildByName('custom-container');
+                        customContainer.removeAllChild();
+                        mergedCell.removeChild(customContainer);
+                        getCustomCellMergeCustom(mergeCol, row, mergedCell, scene.table);
+                    }
+                }
+                else {
                     let customRender;
                     let customLayout;
                     const cellType = scene.table.getCellLocation(col, row);
@@ -44758,13 +44840,7 @@
         else {
             text = cellValue;
         }
-        let lines;
-        if (!table.internalProps.enableLineBreak && !table.options.customConfig?.multilinesForXTable) {
-            lines = [validToString(text)];
-        }
-        else {
-            lines = validToString(text).split('\n') || [];
-        }
+        const lines = breakString(text, table);
         if (lines.length >= 1) {
             lines.forEach((line) => {
                 const width = table.measureText(line.slice(0, table.options.maxCharactersNumber || 200), {
@@ -47203,6 +47279,13 @@
         });
         scene.selectedRangeComponents = new Map();
     }
+    function deleteAllSelectingBorder(scene) {
+        scene.selectingRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.delete();
+            selectComp.fillhandle?.delete();
+        });
+        scene.selectingRangeComponents = new Map();
+    }
     function removeFillHandleFromSelectComponents(scene) {
         scene.selectedRangeComponents.forEach((selectComp, key) => {
             selectComp.fillhandle?.delete();
@@ -51923,7 +52006,27 @@
                 if (this.select.ranges.length === 0) {
                     return;
                 }
-                selectEnd(this.table.scenegraph);
+                const currentRange = this.select.ranges[this.select.ranges.length - 1];
+                let isSame = false;
+                for (let i = 0; i < this.select.ranges.length - 1; i++) {
+                    const range = this.select.ranges[i];
+                    if (range &&
+                        range.start.col === currentRange.start.col &&
+                        range.start.row === currentRange.start.row &&
+                        range.end.col === currentRange.end.col &&
+                        range.end.row === currentRange.end.row) {
+                        isSame = true;
+                        break;
+                    }
+                }
+                if (isSame) {
+                    this.select.ranges.pop();
+                    deleteAllSelectingBorder(this.table.scenegraph);
+                    this.table.scenegraph.selectingRangeComponents.clear();
+                }
+                else {
+                    selectEnd(this.table.scenegraph);
+                }
                 const lastCol = this.select.ranges[this.select.ranges.length - 1].end.col;
                 const lastRow = this.select.ranges[this.select.ranges.length - 1].end.row;
                 fireListener &&
@@ -53669,7 +53772,7 @@
                 table.selectCell(targetCol, targetRow);
                 if ((table.options.keyboardOptions?.moveEditCellOnArrowKeys ?? false) &&
                     table.editorManager.editingEditor) {
-                    table.editorManager.completeEdit();
+                    table.editorManager.completeEdit(e);
                     table.getElement().focus();
                     if (table.getEditor(targetCol, targetRow)) {
                         table.editorManager.startEditCell(targetCol, targetRow);
@@ -53681,7 +53784,7 @@
             }
             else if (e.key === 'Enter') {
                 if (table.editorManager.editingEditor) {
-                    table.editorManager.completeEdit();
+                    table.editorManager.completeEdit(e);
                     table.getElement().focus();
                 }
                 else {
@@ -53719,7 +53822,7 @@
                         }
                         table.selectCell(targetCol, targetRow);
                         if (table.editorManager.editingEditor) {
-                            table.editorManager.completeEdit();
+                            table.editorManager.completeEdit(e);
                             table.getElement().focus();
                             if (table.getEditor(targetCol, targetRow)) {
                                 table.editorManager.startEditCell(targetCol, targetRow);
@@ -57987,7 +58090,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.25.1-alpha.2";
+        version = "0.25.1-alpha.4";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -58086,7 +58189,6 @@
             internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
             internalProps.theme.isPivot = this.isPivotTable();
             if (container) {
-                container.innerHTML = '';
                 container.appendChild(internalProps.element);
                 this._updateSize();
             }
@@ -60641,6 +60743,9 @@
                 }
             }
         }
+        setSortedIndexMap(field, filedMap) {
+            this.dataSource?.setSortedIndexMap(field, filedMap);
+        }
     }
 
     var core = /*#__PURE__*/Object.freeze({
@@ -60839,7 +60944,10 @@
         for (let i = 0; i < layout.indicatorsDefine.length; i++) {
             const columnObj = layout.indicatorsDefine[i];
             if (columnObj.chartSpec) {
-                if (columnObj.chartSpec.type !== 'pie' &&
+                if (columnObj.chartSpec.type !== 'wordCloud' &&
+                    columnObj.chartSpec.type !== 'radar' &&
+                    columnObj.chartSpec.type !== 'gauge' &&
+                    columnObj.chartSpec.type !== 'pie' &&
                     columnObj.chartSpec.type !== 'funnel' &&
                     columnObj.chartSpec.type !== 'rose') {
                     isHasCartesianChart = true;
@@ -60853,7 +60961,12 @@
         let isHasCartesianChart = true;
         const chartSpec = layout.getRawChartSpec(col, row);
         if (chartSpec) {
-            if (chartSpec.type === 'pie' || chartSpec.type === 'funnel' || chartSpec.type === 'rose') {
+            if (chartSpec.type === 'pie' ||
+                chartSpec.type === 'radar' ||
+                chartSpec.type === 'gauge' ||
+                chartSpec.type === 'wordCloud' ||
+                chartSpec.type === 'funnel' ||
+                chartSpec.type === 'rose') {
                 isHasCartesianChart = false;
             }
         }
@@ -60869,6 +60982,9 @@
                 const columnObj = layout.indicatorsDefine[i];
                 if (columnObj.chartSpec) {
                     if (columnObj.chartSpec.type !== 'pie' &&
+                        columnObj.chartSpec.type !== 'wordCloud' &&
+                        columnObj.chartSpec.type !== 'radar' &&
+                        columnObj.chartSpec.type !== 'gauge' &&
                         columnObj.chartSpec.type !== 'funnel' &&
                         columnObj.chartSpec.type !== 'rose') {
                         isHasCartesianChart = true;
@@ -60880,7 +60996,12 @@
         else {
             const chartSpec = layout.getRawChartSpec(col, row);
             if (chartSpec) {
-                if (chartSpec.type !== 'pie' && chartSpec.type !== 'funnel' && chartSpec.type !== 'rose') {
+                if (chartSpec.type !== 'pie' &&
+                    chartSpec.type !== 'radar' &&
+                    chartSpec.type !== 'gauge' &&
+                    chartSpec.type !== 'wordCloud' &&
+                    chartSpec.type !== 'funnel' &&
+                    chartSpec.type !== 'rose') {
                     isHasCartesianChart = true;
                 }
             }
@@ -60901,7 +61022,9 @@
                         serie.sortDataByAxis = true;
                     });
                 }
-                chartSpec.axes = layout.getChartAxes(col, row);
+                if (chartSpec.type !== 'gauge' && chartSpec.type !== 'rose' && chartSpec.type !== 'radar') {
+                    chartSpec.axes = layout.getChartAxes(col, row);
+                }
                 chartSpec.padding = 0;
                 chartSpec.dataZoom = [];
                 return chartSpec;
@@ -60955,11 +61078,12 @@
                 [];
             const rowPath = layout.getRowKeysPath(col, row);
             const domain = data[rowPath ?? ''];
-            const { axisOption, isPercent } = getAxisOption(col, row, 'left', layout);
+            const { axisOption, isPercent, chartType } = getAxisOption(col, row, 'left', layout);
             axes.push(merge({
-                domain: Array.from(domain ?? [])
+                domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
+                range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined
             }, axisOption, {
-                type: 'band',
+                type: chartType === 'scatter' && !Array.isArray(domain) ? axisOption?.type ?? 'linear' : 'band',
                 orient: 'left',
                 label: { visible: false },
                 domainLine: { visible: false },
@@ -61011,11 +61135,12 @@
                 [];
             const colPath = layout.getColKeysPath(col, row);
             const domain = data?.[colPath ?? ''] ?? [];
-            const { axisOption, isPercent } = getAxisOption(col, row, 'bottom', layout);
+            const { axisOption, isPercent, chartType } = getAxisOption(col, row, 'bottom', layout);
             axes.push(merge({
-                domain: Array.from(domain)
+                domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
+                range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined
             }, axisOption, {
-                type: 'band',
+                type: chartType === 'scatter' && !Array.isArray(domain) ? axisOption?.type ?? 'linear' : 'band',
                 orient: 'bottom',
                 visible: true,
                 label: { visible: false },
@@ -63219,7 +63344,6 @@
                 return;
             }
             this.internalProps.transpose = transpose;
-            this.options.transpose = transpose;
             if (this.internalProps.layoutMap) {
                 this.internalProps.layoutMap.transpose = transpose;
                 this.refreshRowColCount();
@@ -65275,6 +65399,7 @@
                 if (this._table.isPivotChart() &&
                     this.indicatorsAsCol &&
                     !this.dataset?.colKeys?.length &&
+                    this.columnDimensionTree?.tree?.level === 0 &&
                     !this.hasTwoIndicatorAxes) {
                     this.columnHeaderLevelCount = 0;
                     return;
@@ -67365,7 +67490,7 @@
                 record[derivedFieldRule.fieldName] = derivedFieldRule.derivedFunc(record);
             });
             for (const field in this.collectValuesBy) {
-                if (record[field]) {
+                if (isValid$3(record[field])) {
                     if (!this.collectedValues[field]) {
                         this.collectedValues[field] = {};
                     }
@@ -69708,7 +69833,11 @@
             const collectValuesBy = {};
             for (let i = 0, len = indicators?.length; i < len; i++) {
                 if (typeof indicators[i] !== 'string' && indicators[i].chartSpec) {
-                    if (indicators[i].chartSpec?.type === 'pie') {
+                    if (indicators[i].chartSpec?.type === 'pie' ||
+                        indicators[i].chartSpec?.type === 'rose' ||
+                        indicators[i].chartSpec?.type === 'radar' ||
+                        indicators[i].chartSpec?.type === 'gauge' ||
+                        indicators[i].chartSpec?.type === 'wordCloud') {
                         continue;
                     }
                     const indicatorDefine = indicators[i];
@@ -69728,7 +69857,7 @@
                                 collectValuesBy[xField] = {
                                     by: columnKeys,
                                     type: chartSeries.direction !== 'horizontal' ? 'xField' : undefined,
-                                    range: chartSeries.direction === 'horizontal',
+                                    range: chartSeries.type === 'scatter' ? true : chartSeries.direction === 'horizontal',
                                     sortBy: chartSeries.direction !== 'horizontal'
                                         ? chartSeries?.data?.fields?.[xField]?.domain ?? indicatorSpec?.data?.fields?.[xField]?.domain
                                         : undefined
@@ -69739,7 +69868,7 @@
                                     (chartSeries.stack = true);
                                 collectValuesBy[yField] = {
                                     by: rowKeys,
-                                    range: chartSeries.direction !== 'horizontal',
+                                    range: chartSeries.type === 'scatter' ? true : chartSeries.direction !== 'horizontal',
                                     sumBy: chartSeries.stack && columnKeys.concat(chartSeries?.xField),
                                     sortBy: chartSeries.direction === 'horizontal'
                                         ? chartSeries?.data?.fields?.[yField]?.domain ?? indicatorSpec?.data?.fields?.[yField]?.domain
@@ -69753,7 +69882,7 @@
                             collectValuesBy[xField] = {
                                 by: columnKeys,
                                 type: indicatorSpec.direction !== 'horizontal' ? 'xField' : undefined,
-                                range: indicatorSpec.direction === 'horizontal',
+                                range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction === 'horizontal',
                                 sortBy: indicatorSpec.direction !== 'horizontal' ? indicatorSpec?.data?.fields?.[xField]?.domain : undefined
                             };
                             indicatorSpec?.stack !== false &&
@@ -69785,7 +69914,7 @@
                                 collectValuesBy[yField] = {
                                     by: rowKeys,
                                     type: chartSeries.direction === 'horizontal' ? 'yField' : undefined,
-                                    range: chartSeries.direction !== 'horizontal',
+                                    range: chartSeries.type === 'scatter' ? true : chartSeries.direction !== 'horizontal',
                                     sortBy: chartSeries.direction === 'horizontal'
                                         ? chartSeries?.data?.fields?.[yField]?.domain ?? indicatorSpec?.data?.fields?.[yField]?.domain
                                         : undefined
@@ -69796,7 +69925,7 @@
                                     (chartSeries.stack = true);
                                 collectValuesBy[xField] = {
                                     by: columnKeys,
-                                    range: chartSeries.direction === 'horizontal',
+                                    range: chartSeries.type === 'scatter' ? true : chartSeries.direction === 'horizontal',
                                     sumBy: chartSeries.stack && rowKeys.concat(chartSeries?.yField),
                                     sortBy: chartSeries.direction !== 'horizontal'
                                         ? chartSeries?.data?.fields?.[xField]?.domain ?? indicatorSpec?.data?.fields?.[xField]?.domain
@@ -69810,7 +69939,7 @@
                             collectValuesBy[yField] = {
                                 by: rowKeys,
                                 type: indicatorSpec.direction === 'horizontal' ? 'yField' : undefined,
-                                range: indicatorSpec.direction !== 'horizontal',
+                                range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction !== 'horizontal',
                                 sortBy: indicatorSpec.direction === 'horizontal' ? indicatorSpec?.data?.fields?.[yField]?.domain : undefined
                             };
                             indicatorSpec?.stack !== false &&
@@ -69819,7 +69948,7 @@
                             const xField = indicatorSpec.xField;
                             collectValuesBy[xField] = {
                                 by: columnKeys,
-                                range: indicatorSpec.direction === 'horizontal',
+                                range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction === 'horizontal',
                                 sumBy: indicatorSpec.stack && rowKeys.concat(indicatorSpec?.yField),
                                 sortBy: indicatorSpec.direction !== 'horizontal' ? indicatorSpec?.data?.fields?.[xField]?.domain : undefined,
                                 extendRange: parseMarkLineGetExtendRange(indicatorSpec.markLine)
@@ -70623,7 +70752,7 @@
     }
 
     registerForVrender();
-    const version = "0.25.1-alpha.2";
+    const version = "0.25.1-alpha.4";
     function getIcons() {
         return get$2();
     }