@visactor/vrender-components 0.12.3 → 0.13.0

package/dist/index.js

@@ -644,7 +644,7 @@
                 }
             }
             const { visible: bgVisible, ...backgroundStyle } = panel;
-            if (vutils.isBoolean(bgVisible)) {
+            if (visible && vutils.isBoolean(bgVisible)) {
                 const bgRect = this.createOrUpdateChild('tag-panel', {
                     ...backgroundStyle,
                     visible: bgVisible && !!text,
@@ -660,6 +660,305 @@
         }
     }
 
+    class PopTip extends AbstractComponent {
+        name = 'poptip';
+        static defaultAttributes = {
+            position: 'rt',
+            visible: true,
+            title: null,
+            content: null,
+            titleStyle: {
+                fontSize: 12,
+                fill: '#000',
+                textAlign: 'left',
+                textBaseline: 'top'
+            },
+            contentStyle: {
+                fontSize: 12,
+                fill: '#000',
+                textAlign: 'left',
+                textBaseline: 'top'
+            },
+            space: 8,
+            padding: 10
+        };
+        constructor(attributes) {
+            super(vutils.merge({}, PopTip.defaultAttributes, attributes));
+        }
+        render() {
+            const { title = '', titleStyle = {}, position, content = '', contentStyle = {}, panel = {}, space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, visible, state, dx = 0, dy = 0 } = this.attribute;
+            const parsedPadding = vutils.normalizePadding(padding);
+            const group = this.createOrUpdateChild('poptip-content', { x: 0, y: 0, zIndex: 1 }, 'group');
+            const maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3];
+            const titleVisible = vutils.isValid(title) && visible !== false;
+            const titleAttrs = {
+                text: title,
+                visible: titleVisible,
+                ...titleStyle,
+                x: parsedPadding[3],
+                y: parsedPadding[0],
+                maxLineWidth,
+                textAlign: 'left',
+                textBaseline: 'top'
+            };
+            const titleShape = group.createOrUpdateChild('poptip-title', titleAttrs, 'text');
+            if (!vutils.isEmpty(state?.title)) {
+                titleShape.states = state.title;
+            }
+            const titleBounds = titleShape.AABBBounds;
+            const titleHeight = titleBounds.height();
+            const titleWidth = titleBounds.width();
+            let height = titleHeight + space;
+            if (!titleVisible) {
+                height = 0;
+            }
+            const contentVisible = vutils.isValid(content) && visible !== false;
+            const contentAttrs = {
+                text: content,
+                visible: contentVisible,
+                ...contentStyle,
+                x: parsedPadding[3],
+                y: parsedPadding[0] + height,
+                maxLineWidth,
+                textAlign: 'left',
+                textBaseline: 'top'
+            };
+            const contentShape = group.createOrUpdateChild('poptip-content', contentAttrs, 'text');
+            if (!vutils.isEmpty(state?.content)) {
+                contentShape.states = state.content;
+            }
+            const contentBounds = contentShape.AABBBounds;
+            const contentHeight = contentBounds.height();
+            const contentWidth = contentBounds.width();
+            if (contentVisible) {
+                height += contentHeight;
+            }
+            let popTipWidth = vutils.max(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
+            if (popTipWidth > maxWidth) {
+                popTipWidth = maxWidth;
+            }
+            else if (popTipWidth < minWidth) {
+                popTipWidth = minWidth;
+            }
+            const poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
+            const { visible: bgVisible, ...backgroundStyle } = panel;
+            const symbolSize = backgroundStyle.size ?? 12;
+            const lineWidth = backgroundStyle.lineWidth ?? 1;
+            const { angle, offset, rectOffset } = this.getAngleAndOffset(position, popTipWidth, poptipHeight, vutils.isArray(symbolSize) ? symbolSize : [symbolSize, symbolSize - lineWidth]);
+            if (vutils.isBoolean(bgVisible)) {
+                const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
+                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', {
+                    ...backgroundStyle,
+                    visible: bgVisible && (contentVisible || titleVisible),
+                    x: offsetX,
+                    y: 0,
+                    anchor: [0, 0],
+                    symbolType: 'arrow2Left',
+                    angle: angle,
+                    dx: offset[0],
+                    dy: offset[1],
+                    size: symbolSize,
+                    zIndex: -9
+                }, 'symbol');
+                if (!vutils.isEmpty(state?.panel)) {
+                    bgSymbol.states = state.panel;
+                }
+                const bgRect = group.createOrUpdateChild('poptip-rect-panel', {
+                    ...backgroundStyle,
+                    visible: bgVisible && (contentVisible || titleVisible),
+                    x: 0,
+                    y: 0,
+                    width: popTipWidth,
+                    height: poptipHeight,
+                    zIndex: -10
+                }, 'rect');
+                if (!vutils.isEmpty(state?.panel)) {
+                    bgRect.states = state.panel;
+                }
+            }
+            group.setAttributes({
+                x: -offset[0] + dx,
+                y: -offset[1] + dy
+            });
+        }
+        getAngleAndOffset(position, width, height, size) {
+            const sizeH = size[1] / 2;
+            switch (position) {
+                case 'tl':
+                    return {
+                        angle: (vutils.pi / 2) * 3,
+                        offset: [width / 4, height + sizeH],
+                        rectOffset: [-width / 4, -height - size[1]]
+                    };
+                case 'top':
+                    return { angle: (vutils.pi / 2) * 3, offset: [width / 2, height + sizeH], rectOffset: [0, -height - size[1]] };
+                case 'tr':
+                    return {
+                        angle: (vutils.pi / 2) * 3,
+                        offset: [(width / 4) * 3, height + sizeH],
+                        rectOffset: [(width / 4) * 3, -height - size[1]]
+                    };
+                case 'rt':
+                    return { angle: 0, offset: [-sizeH, height / 5], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                case 'right':
+                    return { angle: 0, offset: [-sizeH, height / 2], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                case 'rb':
+                    return { angle: 0, offset: [-sizeH, (height / 5) * 4], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                case 'bl':
+                    return { angle: vutils.pi / 2, offset: [width / 4, -sizeH], rectOffset: [-width / 4, -height - size[1]] };
+                case 'bottom':
+                    return { angle: vutils.pi / 2, offset: [width / 2, -sizeH], rectOffset: [0, -height - size[1]] };
+                case 'br':
+                    return { angle: vutils.pi / 2, offset: [(width / 4) * 3, -sizeH], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                case 'lt':
+                    return { angle: vutils.pi, offset: [width + sizeH, height / 5], rectOffset: [-width / 4, -height - size[1]] };
+                case 'left':
+                    return { angle: vutils.pi, offset: [width + sizeH, height / 2], rectOffset: [0, -height - size[1]] };
+                case 'lb':
+                    return {
+                        angle: vutils.pi,
+                        offset: [width + sizeH, (height / 5) * 4],
+                        rectOffset: [(width / 4) * 3, -height - size[1]]
+                    };
+            }
+        }
+    }
+
+    var PARAM_TYPES = "inversify:paramtypes";
+    var DESIGN_PARAM_TYPES = "design:paramtypes";
+
+    function _typeof(obj) {
+      "@babel/helpers - typeof";
+
+      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+        return typeof obj;
+      } : function (obj) {
+        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      }, _typeof(obj);
+    }
+
+    var idCounter = 0;
+    function id() {
+      return idCounter++;
+    }
+
+    var DUPLICATED_INJECTABLE_DECORATOR = "Cannot apply @injectable decorator multiple times.";
+
+    var ContainerModule = function () {
+      function ContainerModule(registry) {
+        this.id = id();
+        this.registry = registry;
+      }
+      return ContainerModule;
+    }();
+
+    function injectable() {
+      return function (target) {
+        if (Reflect.hasOwnMetadata(PARAM_TYPES, target)) {
+          throw new Error(DUPLICATED_INJECTABLE_DECORATOR);
+        }
+        var types = Reflect.getMetadata(DESIGN_PARAM_TYPES, target) || [];
+        Reflect.defineMetadata(PARAM_TYPES, types, target);
+        return target;
+      };
+    }
+
+    function __decorate(decorators, target, key, desc) {
+      var c = arguments.length,
+        r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+        d;
+      if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    let PopTipRenderContribution = class PopTipRenderContribution {
+        render(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+            if (graphic._showPoptip) {
+                const { visible, visibleCb } = graphic.attribute.poptip;
+                if (visible === false || (visibleCb && visibleCb(graphic) === false)) {
+                    return;
+                }
+                if (!this.poptipComponent) {
+                    this.poptipComponent = new PopTip(graphic.attribute.poptip);
+                }
+                this.poptipComponent.setAttributes({
+                    ...graphic.attribute.poptip,
+                    x: 0,
+                    y: 0,
+                    postMatrix: graphic.globalTransMatrix
+                });
+                const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
+                if (interactiveLayer) {
+                    interactiveLayer.add(this.poptipComponent);
+                }
+            }
+        }
+    };
+    PopTipRenderContribution = __decorate([
+        injectable()
+    ], PopTipRenderContribution);
+
+    let PopTipPlugin = class PopTipPlugin {
+        name = 'poptip';
+        activeEvent = 'onRegister';
+        pluginService;
+        _uid = vrender.Generator.GenAutoIncrementId();
+        key = this.name + this._uid;
+        activeGraphic;
+        activate(context) {
+            this.pluginService = context;
+            const { stage } = this.pluginService;
+            stage.addEventListener('pointerover', this.poptip);
+        }
+        poptip = (e) => {
+            const graphic = e.target;
+            if (graphic.isContainer || !graphic.attribute || graphic === this.activeGraphic) {
+                this.unpoptip(e);
+                return;
+            }
+            const { poptip } = graphic.attribute;
+            if (poptip) {
+                graphic._showPoptip = true;
+            }
+            if (this.activeGraphic) {
+                this.activeGraphic._showPoptip = false;
+            }
+            this.setActiveGraphic(graphic, true);
+        };
+        unpoptip = (e) => {
+            if (!this.activeGraphic) {
+                return;
+            }
+            this.activeGraphic._showPoptip = false;
+            this.setActiveGraphic(null, true);
+        };
+        setActiveGraphic(graphic, rerender) {
+            this.activeGraphic = graphic;
+            this.pluginService.stage.renderNextFrame();
+        }
+        deactivate(context) {
+            const { stage } = this.pluginService;
+            stage.removeEventListener('pointerover', this.poptip);
+        }
+    };
+    PopTipPlugin = __decorate([
+        injectable()
+    ], PopTipPlugin);
+
+    const module = new ContainerModule(bind => {
+        bind(PopTipRenderContribution).toSelf().inSingletonScope();
+        bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
+        bind(PopTipPlugin).toSelf().inSingletonScope();
+        bind(vrender.AutoEnablePlugins).toService(PopTipPlugin);
+    });
+    function enablePoptip() {
+        vrender.container.load(module);
+    }
+
     class CrosshairBase extends AbstractComponent {
         name = 'crosshair';
         render() {
@@ -1938,6 +2237,7 @@
         _startAngle;
         _endAngle;
         static defaultAttributes = {
+            visible: true,
             lineStyle: {
                 lineWidth: 1,
                 stroke: '#000'
@@ -1985,7 +2285,10 @@
         }
         render() {
             this.removeAllChild();
-            const { points, startSymbol, endSymbol, lineStyle, state } = this.attribute;
+            const { points, startSymbol, endSymbol, lineStyle, state, visible = true } = this.attribute;
+            if (!visible) {
+                return;
+            }
             if (points.length > 1) {
                 this.computeLineAngle();
             }
@@ -2292,7 +2595,9 @@
                     this.axisLabelsContainer = labelGroup;
                     axisContainer.add(labelGroup);
                     items.forEach((axisItems, layer) => {
-                        this.renderLabels(labelGroup, axisItems, layer);
+                        const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer);
+                        const labels = layerLabelGroup.getChildren();
+                        this.handleLabelsOverlap(labels, axisItems, layer, items.length);
                     });
                 }
                 if (grid?.visible) {
@@ -2357,13 +2662,11 @@
             }
         }
         renderLabels(container, items, layer) {
-            let data;
-            if (layer === 0) {
-                data = this.data;
-            }
-            else {
-                data = this._transformItems(items);
+            const { dataFilter } = this.attribute.label;
+            if (dataFilter && vutils.isFunction(dataFilter)) {
+                items = dataFilter(items, layer);
             }
+            const data = this._transformItems(items);
             const labelGroup = vrender.createGroup({ x: 0, y: 0, pickable: false });
             labelGroup.name = `${exports.AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`;
             labelGroup.id = this._getNodeId(`label-container-layer-${layer}`);
@@ -2440,13 +2743,13 @@
             const { tick } = this.attribute;
             const data = this.data;
             const tickLineItems = [];
-            const { alignWithLabel, inside = false, length } = tick;
+            const { alignWithLabel, inside = false, length, dataFilter } = tick;
             let tickSegment = 1;
             const count = data.length;
             if (count >= 2) {
                 tickSegment = data[1].value - data[0].value;
             }
-            data.forEach((item) => {
+            (dataFilter && vutils.isFunction(dataFilter) ? dataFilter(data) : data).forEach((item) => {
                 let point = item.point;
                 let tickValue = item.value;
                 if (!alignWithLabel) {
@@ -2602,6 +2905,231 @@
         }
     }
 
+    const methods = {
+        parity: function (items) {
+            return items.filter((item, i) => (i % 2 ? item.setAttribute('opacity', 0) : 1));
+        },
+        greedy: function (items, sep) {
+            let a;
+            return items.filter((b, i) => {
+                if (!i || !intersect(a.AABBBounds, b.AABBBounds, sep)) {
+                    a = b;
+                    return 1;
+                }
+                return b.setAttribute('opacity', 0);
+            });
+        }
+    };
+    function intersect(a, b, sep) {
+        return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
+    }
+    function hasOverlap(items, pad) {
+        for (let i = 1, n = items.length, a = items[0].AABBBounds, b; i < n; a = b, ++i) {
+            if (intersect(a, (b = items[i].AABBBounds), pad)) {
+                return true;
+            }
+        }
+    }
+    function hasBounds(item) {
+        const b = item.AABBBounds;
+        return b.width() > 1 && b.height() > 1;
+    }
+    function reset(items) {
+        items.forEach(item => item.setAttribute('opacity', 1));
+        return items;
+    }
+    function autoHide(labels, config) {
+        if (vutils.isEmpty(labels)) {
+            return;
+        }
+        const source = labels.filter(hasBounds);
+        if (vutils.isEmpty(source)) {
+            return;
+        }
+        let items;
+        items = reset(source);
+        const { method = 'parity', separation: sep = 0 } = config;
+        const reduce = vutils.isFunction(method) ? method : methods[method] || methods.parity;
+        if (items.length >= 3 && hasOverlap(items, sep)) {
+            do {
+                items = reduce(items, sep);
+            } while (items.length >= 3 && hasOverlap(items, sep));
+            if (items.length < 3 && !vutils.last(source).attribute.opacity) {
+                if (items.length > 1) {
+                    vutils.last(items).setAttribute('opacity', 0);
+                }
+                vutils.last(source).setAttribute('opacity', 1);
+            }
+        }
+        source.forEach(item => {
+            item.setAttribute('visible', !!item.attribute.opacity);
+        });
+    }
+
+    function autoRotate(items, rotateConfig) {
+        if (vutils.isEmpty(items)) {
+            return;
+        }
+        const { orient, labelRotateAngle = [0, 45, 90] } = rotateConfig;
+        if (labelRotateAngle.length === 0 || items.some(item => !!item.attribute.angle)) {
+            return;
+        }
+        let i = 0;
+        let n = 0;
+        if (labelRotateAngle && labelRotateAngle.length > 0) {
+            n = labelRotateAngle.length;
+        }
+        while (i < n) {
+            const angle = labelRotateAngle[i++];
+            items.forEach(item => {
+                item.attribute.angle = vutils.degreeToRadian(angle);
+            });
+            tryRotate(orient, items);
+            if (!hasIntersect(items)) {
+                break;
+            }
+        }
+    }
+    function hasIntersect(items) {
+        for (let i = 1; i < items.length; i++) {
+            if (itemIntersect(items[i - 1], items[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function itemIntersect(item1, item2) {
+        return vutils.isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, true);
+    }
+    function tryRotate(orient, items) {
+        if (orient === 'bottom' || orient === 'top') {
+            rotateXAxis(orient, items);
+        }
+        if (orient === 'left' || orient === 'right') {
+            rotateYAxis(orient, items);
+        }
+        genRotateBounds(items);
+    }
+    function rotate(x, y, deg, originX, originY) {
+        return {
+            x: (x - originX) * Math.cos(deg) + (y - originY) * Math.sin(deg) + originX,
+            y: (x - originX) * Math.sin(deg) + (originY - y) * Math.cos(deg) + originY
+        };
+    }
+    function genNormalBounds(item) {
+        const bounds = item.AABBBounds;
+        return {
+            x1: bounds.x1,
+            x2: bounds.x2,
+            y1: bounds.y1,
+            y2: bounds.y2,
+            centerX: item.attribute.x,
+            centerY: item.attribute.y,
+            angle: item.attribute.angle
+        };
+    }
+    function genRotateBounds(items) {
+        items.forEach(item => {
+            const bounds = genNormalBounds(item);
+            const rotatedCenter = rotate(bounds.centerX, bounds.centerY, bounds.angle, item.attribute.x, item.attribute.y);
+            const deltaX = rotatedCenter.x - bounds.centerX;
+            const deltaY = rotatedCenter.y - bounds.centerY;
+            bounds.x1 += deltaX;
+            bounds.x2 += deltaX;
+            bounds.y1 += deltaY;
+            bounds.y2 += deltaY;
+            bounds.centerX += deltaX;
+            bounds.centerY += deltaY;
+            item.rotatedBounds = bounds;
+        });
+    }
+    function rotateYAxis(orient, items) {
+        let align = ['right', 'right', 'center', 'left', 'center', 'left', 'center', 'right', 'right'];
+        let baseline = ['middle', 'middle', 'top', 'top', 'middle', 'middle', 'bottom', 'bottom', 'middle'];
+        if (orient === 'right') {
+            align = ['left', 'right', 'right', 'right', 'left', 'left', 'left', 'left', 'right'];
+            baseline = ['middle', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom'];
+        }
+        items.forEach((item, i) => {
+            let angle = item.attribute.angle || 0;
+            if (angle < 0) {
+                while (angle < 0) {
+                    angle += Math.PI * 2;
+                }
+            }
+            if (angle > 0) {
+                while (angle >= Math.PI * 2) {
+                    angle -= Math.PI * 2;
+                }
+            }
+            const step = angle / (Math.PI * 0.5);
+            let index;
+            if (step === Math.floor(step)) {
+                index = Math.floor(step) * 2;
+            }
+            else {
+                index = Math.floor(step) * 2 + 1;
+            }
+            item.setAttributes({
+                textAlign: align[index],
+                textBaseline: baseline[index],
+                angle: angle
+            });
+        });
+    }
+    function rotateXAxis(orient, items) {
+        let align = ['center', 'left', 'left', 'left', 'center', 'right', 'right', 'right', 'left'];
+        let baseline = ['top', 'top', 'middle', 'bottom', 'bottom', 'bottom', 'middle', 'top', 'top'];
+        if (orient === 'top') {
+            align = ['center', 'right', 'right', 'right', 'center', 'left', 'left', 'left', 'right'];
+            baseline = ['bottom', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom'];
+        }
+        items.forEach(item => {
+            let angle = item.attribute.angle || 0;
+            if (angle < 0) {
+                while (angle < 0) {
+                    angle += Math.PI * 2;
+                }
+            }
+            if (angle > 0) {
+                while (angle >= Math.PI * 2) {
+                    angle -= Math.PI * 2;
+                }
+            }
+            const step = angle / (Math.PI * 0.5);
+            let index;
+            if (step === Math.floor(step)) {
+                index = Math.floor(step) * 2;
+            }
+            else {
+                index = Math.floor(step) * 2 + 1;
+            }
+            item.setAttributes({
+                textAlign: align[index],
+                textBaseline: baseline[index],
+                angle
+            });
+        });
+    }
+
+    function autoLimit(labels, config) {
+        const { limitLength, ellipsis = '...', orient } = config;
+        if (vutils.isEmpty(labels) || !vutils.isValidNumber(limitLength)) {
+            return;
+        }
+        labels.forEach(label => {
+            const limitLabelLength = label.attribute.angle === 0 || vutils.isNil(label.attribute.angle)
+                ? orient === 'top' || orient === 'bottom'
+                    ? null
+                    : limitLength
+                : limitLength / Math.sin(label.attribute.angle);
+            label.setAttributes({
+                maxLineWidth: limitLabelLength,
+                ellipsis
+            });
+        });
+    }
+
     function getCirclePoints(center, count, radius, startAngle, endAngle) {
         const points = [];
         const range = endAngle - startAngle;
@@ -2680,9 +3208,10 @@
                 const space = +vutils.get(this.attribute, 'label.space', 4);
                 labelLength += space;
                 if (axisVector[1] === 0) {
-                    Object.keys(this.axisLabelLayerSize).forEach((layer, index) => {
-                        labelLength += this.axisLabelLayerSize[layer].height + (index > 0 ? space : 0);
-                    });
+                    labelLength = this.axisLabelsContainer.AABBBounds.height();
+                }
+                else if (axisVector[0] === 0) {
+                    labelLength = this.axisLabelsContainer.AABBBounds.width();
                 }
                 else {
                     Object.keys(this.axisLabelLayerSize).forEach((layer, index) => {
@@ -2910,6 +3439,51 @@
             }
             return base;
         }
+        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
+            if (vutils.isEmpty(labelShapes)) {
+                return;
+            }
+            const { verticalLimitSize, label, title, line, tick, orient } = this.attribute;
+            const labelSpace = label.space ?? 4;
+            let limitLength = verticalLimitSize;
+            let titleHeight = 0;
+            let titleSpacing = 0;
+            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
+            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
+            if (title?.visible) {
+                titleHeight = measureTextSize(title.text, title.textStyle).height;
+                titleSpacing = title.space;
+            }
+            if (limitLength) {
+                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+            }
+            const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation } = label;
+            if (vutils.isFunction(layoutFunc)) {
+                layoutFunc(labelShapes, labelData, layer, this);
+            }
+            else {
+                if (autoRotate$1) {
+                    autoRotate(labelShapes, {
+                        labelRotateAngle: autoRotateAngle,
+                        orient
+                    });
+                }
+                if (autoLimit$1 && vutils.isValidNumber(limitLength) && limitLength > 0) {
+                    autoLimit(labelShapes, {
+                        limitLength,
+                        ellipsis: limitEllipsis,
+                        orient
+                    });
+                }
+                if (autoHide$1) {
+                    autoHide(labelShapes, {
+                        orient,
+                        method: autoHideMethod,
+                        separation: autoHideSeparation
+                    });
+                }
+            }
+        }
     }
 
     class CircleAxis extends AxisBase {
@@ -3164,6 +3738,9 @@
             }
             return base;
         }
+        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
+            return;
+        }
     }
 
     function getElMap(g) {
@@ -4184,17 +4761,24 @@
         _container;
         _label;
         render() {
-            this.removeAllChild();
             const markerVisible = this.attribute.visible ?? true;
             const markerInteractive = this.attribute.interactive ?? false;
             if (!markerInteractive) {
                 this.setAttribute('pickable', false);
                 this.setAttribute('childrenPickable', false);
             }
-            const group = vrender.createGroup({});
-            group.name = 'marker-container';
-            this.add(group);
-            markerVisible && this.renderMarker(group);
+            if (markerVisible) {
+                if (!this._container) {
+                    const group = vrender.createGroup({});
+                    group.name = 'marker-container';
+                    this.add(group);
+                    this._container = group;
+                    this.initMarker(group);
+                }
+                else {
+                    this.updateMarker();
+                }
+            }
         }
     }
 
@@ -4436,19 +5020,19 @@
             const labelOffsetX = label?.refX * Math.cos(labelAngle) + label.refY * Math.cos(labelAngle - Math.PI / 2);
             const labelOffsetY = label?.refX * Math.sin(labelAngle) + label.refY * Math.sin(labelAngle - Math.PI / 2);
             if (labelPosition.includes('start') || labelPosition.includes('Start')) {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     x: points[0].x + labelOffsetX,
                     y: points[0].y + labelOffsetY
                 });
             }
             else if (labelPosition.includes('middle') || labelPosition.includes('Middle')) {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     x: (points[0].x + points[points.length - 1].x) / 2 + labelOffsetX,
                     y: (points[0].y + points[points.length - 1].y) / 2 + labelOffsetY
                 });
             }
             else {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     x: points[points.length - 1].x + labelOffsetX,
                     y: points[points.length - 1].y + labelOffsetY
                 });
@@ -4461,7 +5045,7 @@
                 }
             });
         }
-        renderMarker(container) {
+        initMarker(container) {
             const { points, startSymbol, endSymbol, label, lineStyle } = this.attribute;
             const line = new Segment({
                 points,
@@ -4480,6 +5064,19 @@
             container.add(markLabel);
             this.setLabelPos();
         }
+        updateMarker() {
+            const { points, startSymbol, endSymbol, label, lineStyle } = this.attribute;
+            this._line?.setAttributes({
+                points,
+                startSymbol,
+                endSymbol,
+                lineStyle
+            });
+            this._label?.setAttributes({
+                ...label
+            });
+            this.setLabelPos();
+        }
     }
 
     class MarkArea extends Marker {
@@ -4522,38 +5119,38 @@
             const { label } = this.attribute;
             const labelPosition = label?.position ?? 'middle';
             if (labelPosition.includes('left') || labelPosition.includes('Left')) {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     ...this.getLeftPos()
                 });
             }
             else if (labelPosition.includes('right') || labelPosition.includes('Right')) {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     ...this.getRightPos()
                 });
             }
             else if (labelPosition.includes('top') || labelPosition.includes('Top')) {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     ...this.getTopPos()
                 });
             }
             else if (labelPosition.includes('bottom') || labelPosition.includes('Bottom')) {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     ...this.getBottomPos()
                 });
             }
             else {
-                this._label.setAttributes({
+                this._label?.setAttributes({
                     ...this.getMiddlePos()
                 });
             }
-            this._label.setAttributes({
+            this._label?.setAttributes({
                 textStyle: {
                     ...DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition],
                     ...label.textStyle
                 }
             });
         }
-        renderMarker(container) {
+        initMarker(container) {
             const { points, label, areaStyle } = this.attribute;
             const area = vrender.createPolygon({
                 points: points,
@@ -4570,6 +5167,17 @@
             container.add(markLabel);
             this.setLabelPos();
         }
+        updateMarker() {
+            const { points, label, areaStyle } = this.attribute;
+            this._area?.setAttributes({
+                points: points,
+                ...areaStyle
+            });
+            this._label?.setAttributes({
+                ...label
+            });
+            this.setLabelPos();
+        }
     }
 
     class MarkPoint extends Marker {
@@ -4588,7 +5196,7 @@
             const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);
             const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
             if (itemType === 'text') {
-                item.setAttributes({
+                item?.setAttributes({
                     ...textStyle,
                     textStyle: {
                         ...DEFAULT_MARK_POINT_TEXT_STYLE_MAP[itemContent?.position || 'end'],
@@ -4597,18 +5205,18 @@
                 });
             }
             else if (itemType === 'richText') {
-                item.setAttributes({
+                item?.setAttributes({
                     dx: this.getItemDx(item, position, richTextStyle) + (richTextStyle?.dx || 0),
                     dy: this.getItemDy(item, position, richTextStyle) + (richTextStyle?.dy || 0)
                 });
             }
             else if (itemType === 'image') {
-                item.setAttributes({
+                item?.setAttributes({
                     dx: this.getItemDx(item, position, imageStyle) + (imageStyle?.dx || 0),
                     dy: this.getItemDy(item, position, imageStyle) + (imageStyle?.dy || 0)
                 });
             }
-            item.setAttributes({
+            item?.setAttributes({
                 x: itemPosition.x + (itemOffsetX || 0),
                 y: itemPosition.y + (itemOffsetY || 0),
                 angle: autoRotate && itemAngle + refAngle
@@ -4634,7 +5242,7 @@
             }
             return 0;
         }
-        renderItem(itemContent, itemPosition) {
+        initItem(itemContent, itemPosition) {
             const { type = 'text', symbolStyle, richTextStyle, imageStyle, renderCustomCallback } = itemContent;
             let item;
             if (type === 'symbol') {
@@ -4666,9 +5274,9 @@
             this.setItemAttributes(item, itemContent, itemPosition, type);
             return item;
         }
-        renderItemLine(itemLine, position, itemPosition) {
-            const { startSymbol, endSymbol, lineStyle, type = 'type-s' } = itemLine;
+        getItemLineAttr(itemLine, position, itemPosition) {
             let points = [];
+            const { type = 'type-s' } = itemLine;
             if (type === 'type-do') {
                 points = [
                     position,
@@ -4702,23 +5310,37 @@
             else {
                 points = [position, itemPosition];
             }
-            const line = new Segment({
+            return points;
+        }
+        setItemLineAttr(itemLine, position, itemPosition, visible) {
+            const { startSymbol, endSymbol, lineStyle } = itemLine;
+            const points = this.getItemLineAttr(itemLine, position, itemPosition);
+            this._line?.setAttributes({
                 points,
                 startSymbol,
                 endSymbol,
-                lineStyle
+                lineStyle,
+                visible
             });
-            return line;
         }
-        renderDecorativeLine(itemLine, itemPosition) {
-            const { lineStyle } = itemLine;
+        getDecorativeLineAttr(itemLine, itemPosition) {
             const decorativeLength = itemLine?.decorativeLine?.length || 10;
             const itemAngle = this._line.getEndAngle() || 0;
             const startPointOffsetX = (decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);
             const startPointOffsetY = (decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);
             const endPointOffsetX = (-decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);
             const endPointOffsetY = (-decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);
-            return vrender.createLine({
+            return {
+                startPointOffsetX,
+                startPointOffsetY,
+                endPointOffsetX,
+                endPointOffsetY
+            };
+        }
+        setDecorativeLineAttr(itemLine, itemPosition, visible) {
+            const { lineStyle } = itemLine;
+            const { startPointOffsetX, startPointOffsetY, endPointOffsetX, endPointOffsetY } = this.getDecorativeLineAttr(itemLine, itemPosition);
+            this._decorativeLine?.setAttributes({
                 points: [
                     {
                         x: itemPosition.x + startPointOffsetX,
@@ -4729,31 +5351,45 @@
                         y: itemPosition.y + endPointOffsetY
                     }
                 ],
-                ...lineStyle
+                ...lineStyle,
+                visible
             });
         }
-        renderMarker(container) {
+        initMarker(container) {
             const { position, itemLine, itemContent } = this.attribute;
             const itemPosition = {
                 x: position.x + (itemContent?.offsetX || 0),
                 y: position.y + (itemContent?.offsetY || 0)
             };
-            if (itemLine?.visible) {
-                const line = this.renderItemLine(itemLine, position, itemPosition);
-                line.name = 'mark-point-line';
-                this._line = line;
-                container.add(line);
-                if (itemLine?.decorativeLine?.visible) {
-                    const decorativeLine = this.renderDecorativeLine(itemLine, itemPosition);
-                    decorativeLine.name = 'mark-point-decorativeLine';
-                    this._decorativeLine = decorativeLine;
-                    container.add(decorativeLine);
-                }
-            }
-            const item = this.renderItem(itemContent, itemPosition);
+            const line = new Segment({
+                points: []
+            });
+            line.name = 'mark-point-line';
+            this._line = line;
+            container.add(line);
+            const decorativeLine = vrender.createLine({
+                points: []
+            });
+            decorativeLine.name = 'mark-point-decorativeLine';
+            this._decorativeLine = decorativeLine;
+            container.add(decorativeLine);
+            this.setItemLineAttr(itemLine, position, itemPosition, itemLine?.visible);
+            this.setDecorativeLineAttr(itemLine, itemPosition, itemLine?.decorativeLine?.visible);
+            const item = this.initItem(itemContent, itemPosition);
             this._item = item;
             container.add(item);
         }
+        updateMarker() {
+            const { position, itemLine, itemContent } = this.attribute;
+            const { type = 'text' } = itemContent;
+            const itemPosition = {
+                x: position.x + (itemContent?.offsetX || 0),
+                y: position.y + (itemContent?.offsetY || 0)
+            };
+            this.setItemLineAttr(itemLine, position, itemPosition, itemLine?.visible);
+            this.setDecorativeLineAttr(itemLine, itemPosition, itemLine?.decorativeLine?.visible);
+            this.setItemAttributes(this._item, itemContent, itemPosition, type);
+        }
     }
 
     const DEFAULT_HANDLER_STYLE = {
@@ -5333,7 +5969,7 @@
                 ...shape,
                 ...shapeAttr.style
             });
-            Object.keys(shapeAttr.state).forEach(key => {
+            Object.keys(shapeAttr.state || {}).forEach(key => {
                 const color = shapeAttr.state[key].fill || shapeAttr.state[key].stroke;
                 if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
                     shapeAttr.state[key].fill = color;
@@ -8263,6 +8899,21 @@
             value: valueList.every(vutils.isNil) ? undefined : vutils.merge({}, ...valueList)
         });
     };
+    const getRichTextAttribute = (attr) => {
+        const { width, height, wordBreak = 'break-word', textAlign, textBaseline, text } = attr;
+        return {
+            width,
+            height,
+            wordBreak: wordBreak,
+            textAlign: textAlign,
+            textBaseline: textBaseline,
+            singleLine: false,
+            textConfig: vutils.array(text).map(text => ({
+                ...attr,
+                text
+            }))
+        };
+    };
 
     const defaultAttributes = {
         panel: {
@@ -8376,10 +9027,20 @@
             this._tooltipTitleSymbol = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, vutils.merge({ symbolType: 'circle' }, titleAttr.shape, {
                 visible: isVisible(titleAttr) && isVisible(titleAttr.shape)
             }), 'symbol');
+            if (titleAttr.value.multiLine) {
+                this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                    visible: isVisible(titleAttr) && isVisible(titleAttr.value),
+                    ...getRichTextAttribute(titleAttr.value)
+                }, 'richtext');
+            }
+            else {
+                this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                    text: '',
+                    visible: isVisible(titleAttr) && isVisible(titleAttr.value),
+                    ...titleAttr.value
+                }, 'text');
+            }
             const titlePaddingLeft = isVisible(titleAttr.shape) ? titleAttr.shape.size + titleAttr.shape.spacing : 0;
-            this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, vutils.merge({ text: '' }, titleAttr.value, {
-                visible: isVisible(titleAttr) && isVisible(titleAttr.value)
-            }), 'text');
             const { textAlign, textBaseline } = titleAttr.value;
             const contentWidth = panel.width - padding[3] - padding[0] - titlePaddingLeft;
             if (textAlign === 'center') {
@@ -8419,7 +9080,8 @@
                         itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, {
                             visible: true,
                             x: itemAttr.shape.size / 2,
-                            y: itemAttr.height / 2,
+                            y: itemAttr.shape.size / 2 +
+                                ((itemAttr.key.lineHeight ?? itemAttr.key.fontSize) - itemAttr.shape.size) / 2,
                             ...itemAttr.shape
                         }, 'symbol');
                     }
@@ -8427,10 +9089,21 @@
                         x += itemAttr.shape.size + itemAttr.shape.spacing;
                     }
                     if (isVisible(itemAttr.key)) {
-                        const element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, {
-                            visible: true,
-                            ...itemAttr.key
-                        }, 'text');
+                        let element;
+                        if (itemAttr.key.multiLine) {
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, {
+                                visible: true,
+                                ...getRichTextAttribute(itemAttr.key),
+                                textBaseline: 'top'
+                            }, 'richtext');
+                        }
+                        else {
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, {
+                                visible: true,
+                                ...itemAttr.key,
+                                textBaseline: 'top'
+                            }, 'text');
+                        }
                         const { textAlign } = itemAttr.key;
                         if (textAlign === 'center') {
                             element.setAttribute('x', x + keyWidth / 2);
@@ -8441,14 +9114,25 @@
                         else {
                             element.setAttribute('x', x);
                         }
-                        element.setAttribute('y', itemAttr.height / 2);
+                        element.setAttribute('y', 0);
                         x += keyWidth + itemAttr.key.spacing;
                     }
                     if (isVisible(itemAttr.value)) {
-                        const element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                            visible: true,
-                            ...itemAttr.value
-                        }, 'text');
+                        let element;
+                        if (itemAttr.value.multiLine) {
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                                visible: true,
+                                ...getRichTextAttribute(itemAttr.value),
+                                textBaseline: 'top'
+                            }, 'richtext');
+                        }
+                        else {
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                                visible: true,
+                                ...itemAttr.value,
+                                textBaseline: 'top'
+                            }, 'text');
+                        }
                         let textAlign = 'right';
                         if (vutils.isValid(itemAttr.value.textAlign)) {
                             textAlign = itemAttr.value.textAlign;
@@ -8467,7 +9151,7 @@
                             element.setAttribute('x', x);
                         }
                         x += valueWidth;
-                        element.setAttribute('y', itemAttr.height / 2);
+                        element.setAttribute('y', 0);
                         itemGroup.add(element);
                     }
                     lastYPos += itemAttr.height + itemAttr.spaceRow;
@@ -8624,7 +9308,7 @@
         }
     }
 
-    const version = "0.12.3";
+    const version = "0.13.0";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;
@@ -8661,6 +9345,7 @@
     exports.MarkPoint = MarkPoint;
     exports.Pager = Pager;
     exports.PolygonCrosshair = PolygonCrosshair;
+    exports.PopTip = PopTip;
     exports.RectCrosshair = RectCrosshair;
     exports.RectLabel = RectLabel;
     exports.ScrollBar = ScrollBar;
@@ -8672,9 +9357,11 @@
     exports.Tag = Tag;
     exports.Title = Title;
     exports.Tooltip = Tooltip;
+    exports.enablePoptip = enablePoptip;
     exports.getHorizontalPath = getHorizontalPath;
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;
+    exports.module = module;
     exports.version = version;
 
 }));