@visactor/vrender-components 0.14.5 → 0.14.6-alpha.1

package/dist/index.js

@@ -495,6 +495,20 @@
         const { r, g, b } = c.color;
         return '#' + vutils.ColorUtil.rgbToHex(r, g, b);
     }
+    function smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor) {
+        let result;
+        switch (fillStrategy) {
+            case 'base':
+                result = baseColor;
+                break;
+            case 'invertBase':
+                result = invertColor;
+                break;
+            case 'similarBase':
+                result = similarColor;
+        }
+        return result;
+    }
 
     function scale(vector, scale) {
         return [vector[0] * scale, vector[1] * scale];
@@ -1403,12 +1417,6 @@
         }
         return !bitmap.getRange(range);
     }
-    function canPlaceInside(textBound, shapeBound) {
-        if (!textBound || !shapeBound) {
-            return false;
-        }
-        return shapeBound.encloses(textBound);
-    }
     function placeToCandidates($, bitmap, text, candidates = [], clampForce = true) {
         for (let i = 0; i < candidates.length; i++) {
             const tempText = text.clone();
@@ -1532,8 +1540,14 @@
     };
 
     class LabelBase extends AbstractComponent {
-        constructor() {
-            super(...arguments);
+        setBitmap(bitmap) {
+            this._bitmap = bitmap;
+        }
+        setBitmapTool(bmpTool) {
+            this._bmpTool = bmpTool;
+        }
+        constructor(attributes) {
+            super(vutils.merge({}, LabelBase.defaultAttributes, attributes));
             this.name = 'label';
             this._onHover = (e) => {
                 const target = e.target;
@@ -1581,15 +1595,11 @@
                 }
             };
         }
-        setBitmap(bitmap) {
-            this._bitmap = bitmap;
-        }
-        setBitmapTool(bmpTool) {
-            this._bmpTool = bmpTool;
+        labeling(textBounds, graphicBounds, position, offset) {
+            return;
         }
-        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
-            const arcs = [];
-            return arcs;
+        _labelLine(text) {
+            return;
         }
         render() {
             this._prepare();
@@ -1603,7 +1613,7 @@
                 labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
             }
             else {
-                labels = this.layout(data);
+                labels = this._layout(data);
                 if (vutils.isFunction(customOverlapFunc)) {
                     labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
                 }
@@ -1679,49 +1689,24 @@
                 }
             }
         }
-        layout(data = []) {
+        _layout(data = []) {
             const { textStyle = {}, position, offset } = this.attribute;
             const labels = [];
-            const textBoundsArray = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
                 const baseMark = this._idToGraphic.get(textData.id);
                 const labelAttribute = Object.assign(Object.assign({ fill: baseMark.attribute.fill }, textStyle), textData);
                 const text = this._createLabelText(labelAttribute);
                 const textBounds = this.getGraphicBounds(text);
-                textBoundsArray.push(textBounds);
                 const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
                 const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
-                if (!textLocation) {
-                    continue;
+                if (textLocation) {
+                    labelAttribute.x = textLocation.x;
+                    labelAttribute.y = textLocation.y;
+                    text.setAttributes(textLocation);
                 }
-                labelAttribute.x = textLocation.x;
-                labelAttribute.y = textLocation.y;
-                text.setAttributes(textLocation);
                 labels.push(text);
             }
-            if (this.attribute.type === 'arc') {
-                const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
-                const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
-                const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
-                const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
-                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
-                for (let i = 0; i < data.length; i++) {
-                    const textData = data[i];
-                    const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
-                    const labelAttribute = {
-                        visible: basedArc.labelVisible,
-                        x: basedArc.labelPosition.x,
-                        y: basedArc.labelPosition.y,
-                        angle: basedArc.angle,
-                        maxLineWidth: basedArc.labelLimit,
-                        points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
-                            ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
-                            : undefined
-                    };
-                    labels[i].setAttributes(labelAttribute);
-                }
-            }
             return labels;
         }
         _overlapping(labels) {
@@ -1773,7 +1758,7 @@
                         result.push(text);
                         continue;
                     }
-                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
+                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
@@ -1827,9 +1812,17 @@
                 });
         }
         _renderLabels(labels) {
+            const disableAnimation = this._enableAnimation === false || this.attribute.animation === false;
+            if (disableAnimation) {
+                this._renderWithOutAnimation(labels);
+            }
+            else {
+                this._renderWithAnimation(labels);
+            }
+        }
+        _renderWithAnimation(labels) {
             var _a, _b, _c, _d, _e;
             const animationConfig = ((_a = this.attribute.animation) !== null && _a !== void 0 ? _a : {});
-            const disableAnimation = this._enableAnimation === false || animationConfig === false;
             const mode = (_b = animationConfig.mode) !== null && _b !== void 0 ? _b : DefaultLabelAnimation.mode;
             const duration = (_c = animationConfig.duration) !== null && _c !== void 0 ? _c : DefaultLabelAnimation.duration;
             const easing = (_d = animationConfig.easing) !== null && _d !== void 0 ? _d : DefaultLabelAnimation.easing;
@@ -1838,27 +1831,18 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
-                    ? vrender.createLine({
-                        visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
-                        stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
-                        lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
-                        points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
-                    })
-                    : undefined;
+                var _a;
+                const labelLine = this._labelLine(text);
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
-                    if (!disableAnimation && relatedGraphic) {
+                    if (relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
-                        if (labelLine) {
-                            this.add(labelLine);
-                        }
-                        relatedGraphic.onAnimateBind = () => {
+                        labelLine && this.add(labelLine);
+                        relatedGraphic.once('animate-bind', () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                                 mode,
@@ -1868,58 +1852,69 @@
                                 delay
                             });
                             relatedGraphic.on('afterAttributeUpdate', listener);
-                        };
-                    }
-                    else {
-                        this.add(text);
-                        if (labelLine) {
-                            this.add(labelLine);
-                        }
+                        });
                     }
                 }
-                if (state === 'update') {
+                else if (state === 'update') {
                     const prevLabel = prevTextMap.get(relatedGraphic);
                     prevTextMap.delete(relatedGraphic);
                     currentTextMap.set(relatedGraphic, prevLabel);
-                    if (!disableAnimation) {
-                        const prevText = prevLabel.text;
-                        prevText.animate().to(text.attribute, duration, easing);
-                        if (prevLabel.labelLine) {
-                            prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
-                                points: (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.points
-                            }), duration, easing);
-                        }
-                        if (animationConfig.increaseEffect !== false &&
-                            prevText.attribute.text !== text.attribute.text &&
-                            vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
-                            prevText
-                                .animate()
-                                .play(new vrender.IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
-                        }
+                    const prevText = prevLabel.text;
+                    prevText.animate().to(text.attribute, duration, easing);
+                    if (prevLabel.labelLine) {
+                        prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
+                            points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points
+                        }), duration, easing);
                     }
-                    else {
-                        prevLabel.text.setAttributes(text.attribute);
-                        if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
-                            prevLabel.labelLine.setAttributes({ points: (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.points });
-                        }
+                    if (animationConfig.increaseEffect !== false &&
+                        prevText.attribute.text !== text.attribute.text &&
+                        vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
+                        prevText
+                            .animate()
+                            .play(new vrender.IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
                     }
                 }
             });
             prevTextMap.forEach(label => {
                 var _a;
-                if (disableAnimation) {
+                (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
                     this.removeChild(label.text);
                     if (label === null || label === void 0 ? void 0 : label.labelLine) {
                         this.removeChild(label.labelLine);
                     }
+                });
+            });
+            this._graphicToText = currentTextMap;
+        }
+        _renderWithOutAnimation(labels) {
+            const currentTextMap = new Map();
+            const prevTextMap = this._graphicToText || new Map();
+            labels.forEach(text => {
+                var _a;
+                const labelLine = this._labelLine(text);
+                const relatedGraphic = this._idToGraphic.get(text.attribute.id);
+                const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
+                if (state === 'enter') {
+                    currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
+                    this.add(text);
+                    if (labelLine) {
+                        this.add(labelLine);
+                    }
                 }
-                else {
-                    (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
-                        this.removeChild(label.text);
-                        if (label === null || label === void 0 ? void 0 : label.labelLine) {
-                            this.removeChild(label.labelLine);
-                        }
-                    });
+                else if (state === 'update') {
+                    const prevLabel = prevTextMap.get(relatedGraphic);
+                    prevTextMap.delete(relatedGraphic);
+                    currentTextMap.set(relatedGraphic, prevLabel);
+                    prevLabel.text.setAttributes(text.attribute);
+                    if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
+                        prevLabel.labelLine.setAttributes({ points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points });
+                    }
+                }
+            });
+            prevTextMap.forEach(label => {
+                this.removeChild(label.text);
+                if (label === null || label === void 0 ? void 0 : label.labelLine) {
+                    this.removeChild(label.labelLine);
                 }
             });
             this._graphicToText = currentTextMap;
@@ -1990,21 +1985,20 @@
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                let isInside = canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
-                if (this.attribute.type === 'arc') {
-                    isInside = this.attribute.position === 'inside';
-                }
+                const isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
                 const backgroundColor = baseMark.attribute.fill;
                 const foregroundColor = label.attribute.fill;
                 const baseColor = backgroundColor;
                 const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
-                const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
+                const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
                 if (isInside) {
-                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
+                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+                    fill && label.setAttributes({ fill });
                     if (label.attribute.lineWidth === 0) {
                         continue;
                     }
-                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+                    stroke && label.setAttributes({ stroke });
                 }
                 else {
                     if (label.attribute.lineWidth === 0) {
@@ -2016,47 +2010,18 @@
                         });
                         continue;
                     }
-                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
-                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+                    fill && label.setAttributes({ fill });
+                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+                    stroke && label.setAttributes({ stroke });
                 }
             }
         }
-        setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor) {
-            switch (fillStrategy) {
-                case 'base':
-                    label.setAttributes({
-                        fill: baseColor
-                    });
-                    break;
-                case 'invertBase':
-                    label.setAttributes({
-                        fill: invertColor
-                    });
-                    break;
-                case 'similarBase':
-                    label.setAttributes({
-                        fill: simialrColor
-                    });
-            }
-        }
-        setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor) {
-            switch (strokeStrategy) {
-                case 'base':
-                    label.setAttributes({
-                        stroke: baseColor
-                    });
-                    break;
-                case 'invertBase':
-                    label.setAttributes({
-                        stroke: invertColor
-                    });
-                    break;
-                case 'similarBase':
-                    label.setAttributes({
-                        stroke: simialrColor
-                    });
-                    break;
+        _canPlaceInside(textBound, shapeBound) {
+            if (!textBound || !shapeBound) {
+                return false;
             }
+            return shapeBound.encloses(textBound);
         }
         setLocation(point) {
             this.translateTo(point.x, point.y);
@@ -2068,6 +2033,17 @@
             this._enableAnimation = true;
         }
     }
+    LabelBase.defaultAttributes = {
+        textStyle: {
+            fontSize: 12,
+            fill: '#000',
+            textAlign: 'center',
+            textBaseline: 'middle',
+            boundsPadding: [-1, 0, -1, 0]
+        },
+        offset: 0,
+        pickable: false
+    };
 
     class SymbolLabel extends LabelBase {
         constructor(attributes) {
@@ -2422,6 +2398,31 @@
             }
             return { x: 0, y: 0 };
         }
+        _layout(data = []) {
+            const labels = super._layout(data);
+            const textBoundsArray = labels.map(label => this.getGraphicBounds(label));
+            const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
+            const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
+            const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
+            const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
+            const arcs = this.layoutArcLabels(this.attribute.position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
+            for (let i = 0; i < data.length; i++) {
+                const textData = data[i];
+                const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
+                const labelAttribute = {
+                    visible: basedArc.labelVisible,
+                    x: basedArc.labelPosition.x,
+                    y: basedArc.labelPosition.y,
+                    angle: basedArc.angle,
+                    maxLineWidth: basedArc.labelLimit,
+                    points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
+                        ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
+                        : undefined
+                };
+                labels[i].setAttributes(labelAttribute);
+            }
+            return labels;
+        }
         layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
             var _a;
             this._arcLeft.clear();
@@ -2988,6 +2989,18 @@
                 }
             }
         }
+        _labelLine(text) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
+                ? vrender.createLine({
+                    visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
+                    stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
+                    lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
+                    points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
+                })
+                : undefined;
+            return labelLine;
+        }
         computeRadius(r, width, height, centerOffset, k) {
             var _a;
             return ((_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k) + centerOffset) !== null && _a !== void 0 ? _a : 0);
@@ -2995,6 +3008,9 @@
         computeLayoutRadius(width, height) {
             return Math.min(width / 2, height / 2);
         }
+        _canPlaceInside(textBound, shapeBound) {
+            return this.attribute.position === 'inside';
+        }
         computeLayoutOuterRadius(r, width, height) {
             return r / (Math.min(width, height) / 2);
         }
@@ -3059,7 +3075,8 @@
             const prevComponentMap = this._componentMap;
             for (let i = 0; i < dataLabels.length; i++) {
                 const dataLabel = dataLabels[i];
-                if (labelComponentMap[dataLabel.type]) {
+                const labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
+                if (labelComponent) {
                     const { baseMarkGroupName } = dataLabel;
                     let component = this._componentMap.get(baseMarkGroupName);
                     if (component) {
@@ -3069,7 +3086,7 @@
                         currentComponentMap.set(baseMarkGroupName, component);
                     }
                     else {
-                        component = new labelComponentMap[dataLabel.type](dataLabel);
+                        component = new labelComponent(dataLabel);
                         component.setBitmap(bitmap);
                         component.setBitmapTool(tool);
                         this.add(component);
@@ -10119,7 +10136,7 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.5";
+    const version = "0.14.6-alpha.1";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;