@visactor/vtable 0.17.10-alpha.3 → 0.17.10-alpha.5

package/dist/vtable.js

@@ -8004,7 +8004,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",
@@ -12230,9 +12230,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();
       }
@@ -12243,12 +12243,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.setAttributes(params), text.AABBBounds;
+    let text$1;
+    function getTextBounds$1(params) {
+      return text$1 || (text$1 = graphicCreator$1.CreateGraphic("text", {})), text$1.setAttributes(params), text$1.AABBBounds;
     }
 
     const result = {
@@ -14767,7 +14767,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");
@@ -15258,7 +15258,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 {
@@ -17799,75 +17799,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 = {
@@ -17918,40 +17918,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) {
@@ -17976,7 +17976,7 @@
         } = _a,
         props = __rest$4(_a, ["key", "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];
@@ -20958,31 +20958,7 @@
       loaded || (loaded = !0, registerWrapTextGraphic());
     }
 
-    preLoadAllModule();
-    if (isBrowserEnv()) {
-        loadBrowserEnv(container);
-    }
-    else if (isNodeEnv()) {
-        loadNodeEnv(container);
-    }
-    registerArc();
-    registerArc3d();
-    registerArea();
-    registerCircle();
-    registerGlyph();
-    registerGroup();
-    registerImage();
-    registerLine();
-    registerPath();
-    registerPolygon();
-    registerPyramid3d();
-    registerRect();
-    registerRect3d();
-    registerRichtext();
-    registerShadowRoot();
-    registerSymbol();
-    registerText();
-    registerWrapText();
+    preLoadAllModule(), isBrowserEnv() ? loadBrowserEnv(container) : isNodeEnv() && loadNodeEnv(container), registerArc(), registerArc3d(), registerArea(), registerCircle(), registerGlyph(), registerGroup(), registerImage(), registerLine(), registerPath(), registerPolygon(), registerPyramid3d(), registerRect(), registerRect3d(), registerRichtext(), registerShadowRoot(), registerSymbol(), registerText(), registerWrapText();
 
     var InteractionState;
     (function (InteractionState) {
@@ -24302,7 +24278,7 @@
         width: 0,
         height: 0
       };
-      const bounds = getTextBounds({
+      const bounds = getTextBounds$1({
         text: text,
         fontFamily: textSpec.fontFamily,
         fontSize: textSpec.fontSize || 12,
@@ -24950,7 +24926,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$1(lineStyle) ? null !== (_a = lineStyle[index]) && void 0 !== _a ? _a : lineStyle[lineStyle.length - 1] : lineStyle), {
               fill: !1
@@ -24958,7 +24934,7 @@
             line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray$1(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
           });
         } else {
-          const line = graphicCreator.polygon(Object.assign(Object.assign({
+          const line = graphicCreator$1.polygon(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
             fill: !1,
@@ -24997,7 +24973,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,
@@ -25190,14 +25166,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.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
+        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -25219,13 +25195,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
@@ -25258,14 +25234,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);
@@ -25281,7 +25257,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 => {
@@ -25298,7 +25274,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
@@ -25307,9 +25283,9 @@
           var _a, _b, _c;
           const labelStyle = this._getLabelAttribute(item, index, data, layer);
           let text;
-          if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
+          if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator$1.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
             dom: labelStyle.text
-          }, DEFAULT_HTML_TEXT_SPEC), labelStyle), text = graphicCreator.richtext(labelStyle)) : text = graphicCreator.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_c = this.attribute.label) || void 0 === _c ? void 0 : _c.state)) text.states = DEFAULT_STATES$2;else {
+          }, DEFAULT_HTML_TEXT_SPEC), labelStyle), text = graphicCreator$1.richtext(labelStyle)) : text = graphicCreator$1.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_c = this.attribute.label) || void 0 === _c ? void 0 : _c.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));
@@ -25765,7 +25741,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(),
@@ -26025,7 +26001,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,
@@ -26130,7 +26106,7 @@
         this._current = defaultCurrent;
         const parsedPadding = normalizePadding(padding),
           isHorizontal = "horizontal" === layout,
-          container = graphicCreator.group({
+          container = graphicCreator$1.group({
             x: 0,
             y: 0
           }),
@@ -26143,7 +26119,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), {
@@ -26162,7 +26138,7 @@
           }, textStyle)),
           handlerSizeX = isNumber$3(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$3(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: `${defaultCurrent}/${total}`,
@@ -26171,7 +26147,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), {
@@ -26234,7 +26210,7 @@
             padding = 0
           } = this.attribute,
           parsedPadding = normalizePadding(padding),
-          innerView = graphicCreator.group({
+          innerView = graphicCreator$1.group({
             x: parsedPadding[3],
             y: parsedPadding[0],
             pickable: interactive,
@@ -26381,7 +26357,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
         });
@@ -26458,15 +26434,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
@@ -26479,7 +26455,7 @@
         if (shapeAttr && !1 !== shapeAttr.visible) {
           const s = get$5(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
           shapeSize = isArray$1(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",
@@ -26493,7 +26469,7 @@
         let 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
@@ -26503,7 +26479,7 @@
             boundsPadding: parsedPadding
           })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), focusSpace = focusSize;
         }
-        const labelShape = graphicCreator.text(Object.assign(Object.assign({
+        const labelShape = graphicCreator$1.text(Object.assign(Object.assign({
           x: shapeSize / 2 + shapeSpace,
           y: 0,
           textAlign: "start",
@@ -26516,7 +26492,7 @@
         const labelSpace = get$5(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid$1(value)) {
           const valueSpace = get$5(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0),
-            valueShape = graphicCreator.text(Object.assign(Object.assign({
+            valueShape = graphicCreator$1.text(Object.assign(Object.assign({
               x: 0,
               y: 0,
               textAlign: "start",
@@ -26623,7 +26599,7 @@
           });
         }
         pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
-        const clipGroup = graphicCreator.group({
+        const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
           width: pageWidth,
@@ -27928,7 +27904,7 @@
         };
         const isHorizontal = "horizontal" === layout;
         this._isHorizontal = isHorizontal;
-        const innerView = graphicCreator.group({
+        const innerView = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -27936,7 +27912,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",
@@ -27947,19 +27923,19 @@
           const space = isValid$1(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._renderRail(railContainer), startLen += isHorizontal ? railWidth : railHeight, endText && endText.visible) {
           const space = isValid$1(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",
@@ -27979,7 +27955,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,
@@ -28055,7 +28031,7 @@
         const isHorizontal = this._isHorizontal,
           railLen = isHorizontal ? railWidth : railHeight;
         range || (startValue = min);
-        const trackContainer = graphicCreator.group({
+        const trackContainer = graphicCreator$1.group({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28070,7 +28046,7 @@
         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 = graphicCreator.rect(Object.assign({
+          track = graphicCreator$1.rect(Object.assign({
             x: isHorizontal ? startPos : 0,
             y: isHorizontal ? 0 : startPos,
             width: isHorizontal ? trackWidth : railWidth,
@@ -28080,7 +28056,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;
@@ -28104,7 +28080,7 @@
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
         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 graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -28447,7 +28423,7 @@
             sizeBackground: sizeBackground,
             disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
-          mainContainer = graphicCreator.group({
+          mainContainer = graphicCreator$1.group({
             x: 0,
             y: 0
           });
@@ -28485,7 +28461,7 @@
         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 = graphicCreator.path(Object.assign(Object.assign({
+        const background = graphicCreator$1.path(Object.assign(Object.assign({
           x: 0,
           y: start,
           path: path
@@ -29415,6 +29391,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.setAttributes(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",
@@ -32135,7 +32130,7 @@
         if (isArray$1(children)) {
             children.forEach((item) => {
                 const c = decodeReactDom(item);
-                c && c.type && g.add(c);
+                g.add(c);
             });
         }
         else if (children) {
@@ -34407,7 +34402,7 @@
         return false;
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme) {
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
         if (isValid$1(functionalPadding)) {
@@ -34449,7 +34444,13 @@
             const textStr = value;
             let icons;
             if (mayHaveIcon) {
-                icons = table.getCellIcons(col, row);
+                let iconCol = col;
+                let iconRow = row;
+                if (range) {
+                    iconCol = range.start.col;
+                    iconRow = range.start.row;
+                }
+                icons = table.getCellIcons(iconCol, iconRow);
             }
             createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
             if (cellTheme?._vtable?.marked) {
@@ -34730,7 +34731,7 @@
         return checkbox;
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
@@ -34787,23 +34788,29 @@
             }
             let customElementsGroup;
             let renderDefault = true;
-            let customRender;
-            let customLayout;
-            const cellLocation = table.getCellLocation(col, row);
-            if (cellLocation !== 'body') {
-                customRender = define?.headerCustomRender;
-                customLayout = define?.headerCustomLayout;
-            }
-            else {
-                customRender = define?.customRender || table.customRender;
-                customLayout = define?.customLayout;
-            }
-            if (customLayout || customRender) {
-                const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, false, table.heightMode === 'autoHeight', padding, table);
+            if (customResult) {
                 customElementsGroup = customResult.elementsGroup;
                 renderDefault = customResult.renderDefault;
             }
-            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme);
+            else {
+                let customRender;
+                let customLayout;
+                const cellLocation = table.getCellLocation(col, row);
+                if (cellLocation !== 'body') {
+                    customRender = define?.headerCustomRender;
+                    customLayout = define?.headerCustomLayout;
+                }
+                else {
+                    customRender = define?.customRender || table.customRender;
+                    customLayout = define?.customLayout;
+                }
+                if (customLayout || customRender) {
+                    const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, false, table.heightMode === 'autoHeight', padding, table);
+                    customElementsGroup = customResult.elementsGroup;
+                    renderDefault = customResult.renderDefault;
+                }
+            }
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
@@ -34837,7 +34844,7 @@
         else if (type === 'progressbar') {
             const style = table._getCellStyle(col, row);
             const dataValue = table.getCellOriginValue(col, row);
-            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme);
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme, range);
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table);
             if (cellGroup.firstChild) {
                 cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
@@ -34942,11 +34949,16 @@
             ? table._getHeaderLayoutMap(col, row).headerType
             : table.getBodyColumnType(col, row);
         let value = table.getCellValue(col, row);
+        const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
+        const padding = cellTheme._vtable.padding;
+        const textAlign = cellTheme._vtable.textAlign;
+        const textBaseline = cellTheme._vtable.textBaseline;
         let customStyle;
+        let customResult;
         if (table.internalProps.customMergeCell) {
             const customMerge = table.getCustomMerge(col, row);
             if (customMerge) {
-                const { range: customMergeRange, text: customMergeText, style: customMergeStyle } = customMerge;
+                const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout, customRender } = customMerge;
                 range = customMergeRange;
                 isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
                 value = customMergeText;
@@ -34955,13 +34967,12 @@
                     cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
                     cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
                 }
+                if (customLayout || customRender) {
+                    customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', padding, table);
+                }
             }
         }
         let newCellGroup;
-        const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
-        const padding = cellTheme._vtable.padding;
-        const textAlign = cellTheme._vtable.textAlign;
-        const textBaseline = cellTheme._vtable.textBaseline;
         let bgColorFunc;
         if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
             table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
@@ -34972,14 +34983,6 @@
                 }
             });
         }
-        if (cellLocation !== 'body') {
-            define?.headerCustomRender;
-            define?.headerCustomLayout;
-        }
-        else {
-            define?.customRender || table.customRender;
-            define?.customLayout;
-        }
         let cellWidth;
         let cellHeight;
         if (range) {
@@ -34992,10 +34995,10 @@
         }
         if (isPromise(value)) {
             oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme));
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
         }
         else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme);
+            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
         }
         if (isMerge) {
             const rangeHeight = table.getRowHeight(row);
@@ -35008,14 +35011,14 @@
         }
         return newCellGroup;
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme) {
+    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
         if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) {
             return null;
         }
-        const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme);
+        const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
         if (!addNew && oldCellGroup.parent) {
             oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
             oldCellGroup.parent.removeChild(oldCellGroup);
@@ -35057,18 +35060,17 @@
         }
         for (let j = rowStart; j <= rowEnd; j++) {
             const row = j;
-            const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
-            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
             let value = table.getCellValue(col, row);
             let cellWidth = colWidth;
             let cellHeight = table.getRowHeight(row);
             let range;
             let isMerge;
             let customStyle;
+            let customResult;
             if (table.internalProps.customMergeCell) {
                 const customMerge = table.getCustomMerge(col, row);
                 if (customMerge) {
-                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle } = customMerge;
+                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout, customRender } = customMerge;
                     range = customMergeRange;
                     isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
                     if (isMerge) {
@@ -35078,8 +35080,21 @@
                     }
                     value = customMergeText;
                     customStyle = customMergeStyle;
+                    if (customLayout || customRender) {
+                        customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', padding, table);
+                    }
                 }
             }
+            let colForDefine = col;
+            let rowForDefine = row;
+            if (range) {
+                colForDefine = range.start.col;
+                rowForDefine = range.start.row;
+            }
+            const define = cellLocation !== 'body'
+                ? table.getHeaderDefine(colForDefine, rowForDefine)
+                : table.getBodyColumnDefine(colForDefine, rowForDefine);
+            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
             if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
                 range = table.getCellRange(col, row);
                 isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
@@ -35109,14 +35124,14 @@
             const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
                 'text';
             if (isPromise(value)) {
-                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme));
+                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult));
                 columnGroup.updateColumnRowNumber(row);
                 const height = table.getRowHeight(row);
                 columnGroup.updateColumnHeight(height);
                 y += height;
             }
             else {
-                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme);
+                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
                 columnGroup.updateColumnRowNumber(row);
                 if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
@@ -42274,7 +42289,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`,
             ...(option ?? {})
         }, textSpec);
@@ -50305,7 +50320,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.17.10-alpha.3";
+        version = "0.17.10-alpha.5";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51827,7 +51842,7 @@
         getCustomMerge(col, row) {
             if (this.internalProps.customMergeCell) {
                 const customMerge = this.internalProps.customMergeCell(col, row, this);
-                if (customMerge && customMerge.range && customMerge.text) {
+                if (customMerge && customMerge.range && (customMerge.text || customMerge.customLayout || this.customRender)) {
                     if (customMerge.style) {
                         const styleClass = this.internalProps.bodyHelper.getStyleClass('text');
                         const style = customMerge.style;
@@ -61278,7 +61293,7 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.17.10-alpha.3";
+    const version = "0.17.10-alpha.5";
     function getIcons() {
         return get$2();
     }