@visactor/vrender-components 0.13.7 → 0.13.8-alpha.4

package/dist/index.js

@@ -341,6 +341,26 @@
         }
         return obj.visible !== false;
     };
+    function getMarksByName(root, name) {
+        if (!name) {
+            return [];
+        }
+        const group = root.find(node => node.name === name, true);
+        if (!group) {
+            return [];
+        }
+        return group.getChildren();
+    }
+    function getNoneGroupMarksByName(root, name) {
+        if (!name) {
+            return [];
+        }
+        const group = root.find(node => node.name === name, true);
+        if (!group) {
+            return [];
+        }
+        return group.findAll(node => node.type !== 'group', true);
+    }
 
     const defaultAlternativeColors = ['#ffffff', '#000000'];
     function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
@@ -1514,6 +1534,28 @@
                 return DefaultPositions;
         }
     }
+    function clampText(text, width, height) {
+        const { x1, x2, y1, y2 } = text.AABBBounds;
+        const minX = Math.min(x1, x2);
+        const maxX = Math.max(x1, x2);
+        const minY = Math.min(y1, y2);
+        const maxY = Math.max(y1, y2);
+        let dx = 0;
+        let dy = 0;
+        if (minX < 0 && maxX - minX <= width) {
+            dx = -minX;
+        }
+        else if (maxX > width && minX - (maxX - width) >= 0) {
+            dx = width - maxX;
+        }
+        if (minY < 0 && maxY - minY <= height) {
+            dy = -minY;
+        }
+        else if (maxY > height && minY - (maxY - height) >= 0) {
+            dy = height - maxY;
+        }
+        return { dx, dy };
+    }
 
     const fadeIn = (textAttribute = {}) => {
         return {
@@ -1564,17 +1606,37 @@
         setBitmapTool(bmpTool) {
             this._bmpTool = bmpTool;
         }
-        _relationMap;
-        _prevRelationMap;
-        _textMap;
+        _graphicToText;
+        _idToGraphic;
         onAfterLabelOverlap;
         _lastHover;
         _lastSelect;
         _enableAnimation;
         render() {
-            const currentBaseMarks = this._checkMarks();
-            const labels = this.layout(currentBaseMarks);
-            this._smartInvert(labels);
+            this._prepare();
+            const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
+            let data = this.attribute.data;
+            if (vutils.isFunction(dataFilter)) {
+                data = dataFilter(data);
+            }
+            let labels;
+            if (vutils.isFunction(customLayoutFunc)) {
+                labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
+            }
+            else {
+                labels = this.layout(data);
+                if (vutils.isFunction(customOverlapFunc)) {
+                    labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+                }
+                else {
+                    if (overlap !== false) {
+                        labels = this._overlapping(labels);
+                    }
+                }
+            }
+            if (smartInvert !== false) {
+                this._smartInvert(labels);
+            }
             this._renderLabels(labels);
         }
         _bindEvent(target) {
@@ -1651,67 +1713,66 @@
             this._setStates(text);
             return text;
         }
-        _checkMarks() {
-            const baseMarks = this.getBaseMarks();
+        _prepare() {
+            const baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
             const currentBaseMarks = [];
             baseMarks.forEach(mark => {
                 if (mark.releaseStatus !== 'willRelease') {
                     currentBaseMarks.push(mark);
                 }
             });
-            this._prevRelationMap = new Map(this._relationMap);
-            this._relationMap?.clear();
-            return currentBaseMarks;
-        }
-        layout(currentMarks) {
-            const { textStyle, position, offset } = this.attribute;
-            let { data } = this.attribute;
-            if (vutils.isFunction(data)) {
-                data = data({});
+            this._idToGraphic?.clear();
+            this._baseMarks = currentBaseMarks;
+            if (!currentBaseMarks || currentBaseMarks.length === 0) {
+                return;
             }
+            const { data } = this.attribute;
             if (!data || data.length === 0) {
-                return [];
+                return;
             }
-            let labels = [];
-            if (vutils.isFunction(this.attribute.sort) && currentMarks && currentMarks.length) {
-                currentMarks = currentMarks.sort(this.attribute.sort);
+            if (!this._idToGraphic) {
+                this._idToGraphic = new Map();
             }
-            if (!this._relationMap) {
-                this._relationMap = new Map();
+            for (let i = 0; i < currentBaseMarks.length; i++) {
+                const textData = data[i];
+                const baseMark = currentBaseMarks[i];
+                if (textData && baseMark) {
+                    if (!vutils.isValid(textData.id)) {
+                        textData.id = `vrender-component-${this.name}-${i}`;
+                    }
+                    this._idToGraphic.set(textData.id, baseMark);
+                }
             }
+        }
+        layout(data = []) {
+            const { textStyle = {}, position, offset } = this.attribute;
+            const labels = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
-                const baseMark = currentMarks?.[i];
+                const baseMark = this._idToGraphic.get(textData.id);
                 const labelAttribute = {
                     ...textStyle,
-                    ...textData,
-                    _relatedIndex: i
+                    ...textData
                 };
-                this._relationMap.set(i, baseMark);
-                if (textData) {
-                    const text = vrender.createText(labelAttribute);
-                    text.update();
-                    const textBounds = this.getGraphicBounds(text);
-                    const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
-                    const textAttributes = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
-                    if (!textAttributes) {
-                        continue;
-                    }
-                    labelAttribute.x = textAttributes.x;
-                    labelAttribute.y = textAttributes.y;
-                    labels.push(labelAttribute);
+                const text = this._createLabelText(labelAttribute);
+                const textBounds = this.getGraphicBounds(text);
+                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;
                 }
-            }
-            this._baseMarks = currentMarks;
-            if (this.attribute.overlap !== false) {
-                labels = this.overlapping(labels, this.attribute.overlap);
+                labelAttribute.x = textLocation.x;
+                labelAttribute.y = textLocation.y;
+                text.setAttributes(textLocation);
+                labels.push(text);
             }
             return labels;
         }
-        overlapping(labels, option = {}) {
+        _overlapping(labels) {
             if (labels.length === 0) {
                 return [];
             }
+            const option = this.attribute.overlap;
             const result = [];
             const baseMarkGroup = this.getBaseMarkGroup();
             const size = option.size ?? {
@@ -1721,7 +1782,7 @@
             if (size.width === 0 || size.height === 0) {
                 return labels;
             }
-            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true } = option;
+            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [] } = option;
             const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
             const bitmap = this._bitmap || bmpTool.bitmap();
             const checkBounds = strategy.some(s => s.type === 'bound');
@@ -1730,22 +1791,34 @@
                     mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds, true));
                 });
             }
+            if (avoidMarks.length > 0) {
+                avoidMarks.forEach(avoid => {
+                    if (vutils.isString(avoid)) {
+                        getNoneGroupMarksByName(this.getRootNode(), avoid).forEach(avoidMark => {
+                            avoidMark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, avoidMark.AABBBounds, true));
+                        });
+                    }
+                    else if (avoid.AABBBounds) {
+                        bitmap.setRange(boundToRange(bmpTool, avoid.AABBBounds, true));
+                    }
+                });
+            }
             for (let i = 0; i < labels.length; i++) {
                 if (labels[i].visible === false) {
                     continue;
                 }
-                const text = vrender.createText(labels[i]);
-                const baseMark = this._baseMarks?.[i];
+                const text = labels[i];
+                const baseMark = this._idToGraphic.get(text.attribute.id);
                 text.update();
                 if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
                     if (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push({ ...text.attribute });
+                        result.push(text);
                         continue;
                     }
                     if (checkBounds && baseMark?.AABBBounds && canPlaceInside(text.AABBBounds, baseMark?.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push({ ...text.attribute });
+                        result.push(text);
                         continue;
                     }
                 }
@@ -1753,28 +1826,33 @@
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
                     if (hasPlace !== false) {
-                        result.push({
-                            ...text.attribute,
-                            x: hasPlace.x,
-                            y: hasPlace.y
-                        });
+                        text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
+                        result.push(text);
                         break;
                     }
                 }
-                !hasPlace && !hideOnHit && result.push({ ...text.attribute });
+                if (!hasPlace && clampForce) {
+                    const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                    if (!(dx === 0 && dy === 0) &&
+                        canPlace(bmpTool, bitmap, {
+                            x1: text.AABBBounds.x1 + dx,
+                            x2: text.AABBBounds.x2 + dx,
+                            y1: text.AABBBounds.y1 + dy,
+                            y2: text.AABBBounds.y2 + dy
+                        })) {
+                        text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                        bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
+                        result.push(text);
+                        continue;
+                    }
+                }
+                !hasPlace && !hideOnHit && result.push(text);
             }
             if (vutils.isFunction(this.onAfterLabelOverlap)) {
                 this.onAfterLabelOverlap(bitmap);
             }
             return result;
         }
-        getBaseMarks() {
-            const baseMarkGroup = this.getBaseMarkGroup();
-            if (!baseMarkGroup) {
-                return;
-            }
-            return baseMarkGroup.getChildren();
-        }
         getBaseMarkGroup() {
             const { baseMarkGroupName } = this.attribute;
             if (!baseMarkGroupName) {
@@ -1799,17 +1877,16 @@
             const easing = animationConfig.easing ?? DefaultLabelAnimation.easing;
             const delay = animationConfig.delay ?? 0;
             const currentTextMap = new Map();
-            const prevTextMap = this._textMap || new Map();
+            const prevTextMap = this._graphicToText || new Map();
             const texts = [];
-            labels.forEach((label, index) => {
-                const text = this._createLabelText(label);
-                const relatedGraphic = this._relationMap.get(label._relatedIndex);
+            labels.forEach((text, index) => {
+                const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, text);
                     if (!disableAnimation && relatedGraphic) {
-                        const { from, to } = getAnimationAttributes(label, 'fadeIn');
+                        const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
                         relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
@@ -1859,7 +1936,7 @@
                     });
                 }
             });
-            this._textMap = currentTextMap;
+            this._graphicToText = currentTextMap;
         }
         _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
             const listener = (event) => {
@@ -1910,30 +1987,34 @@
             return listener;
         }
         _smartInvert(labels) {
-            if (this.attribute.smartInvert === false) {
-                return;
-            }
+            const option = (this.attribute.smartInvert || {});
+            const { textType, contrastRatiosThreshold, alternativeColors } = option;
             for (let i = 0; i < labels.length; i++) {
-                const label = labels?.[i];
+                const label = labels[i];
                 if (!label) {
                     continue;
                 }
-                const isInside = canPlaceInside(vrender.createText(label).AABBBounds, this._relationMap.get(label._relatedIndex)?.AABBBounds);
-                if (label.stroke && label.lineWidth > 0) {
-                    label.fill = labelSmartInvert(label.fill, label.stroke, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                const baseMark = this._idToGraphic.get(label.attribute.id);
+                const isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
+                if (label.attribute.stroke && label.attribute.lineWidth > 0) {
+                    label.setAttributes({
+                        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
                 else if (isInside) {
-                    const baseMark = this._relationMap.get(label._relatedIndex);
                     const backgroundColor = baseMark.attribute.fill;
-                    const foregroundColor = label.fill;
-                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
-                else if (label.lineWidth > 0) {
-                    const baseMark = this._relationMap.get(label._relatedIndex);
-                    label.stroke = baseMark.attribute.fill;
-                    const backgroundColor = label.stroke;
-                    const foregroundColor = label.fill;
-                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                else if (label.attribute.lineWidth > 0) {
+                    const backgroundColor = label.attribute.stroke;
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        stroke: baseMark.attribute.fill,
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
             }
         }
@@ -2388,6 +2469,7 @@
             },
             startSymbol: {
                 visible: false,
+                autoRotate: true,
                 symbolType: 'triangle',
                 size: 12,
                 refX: 0,
@@ -2400,6 +2482,7 @@
             },
             endSymbol: {
                 visible: false,
+                autoRotate: true,
                 symbolType: 'triangle',
                 size: 12,
                 refX: 0,
@@ -2471,6 +2554,7 @@
             this.add(line);
         }
         renderSymbol(attribute, dim) {
+            const { autoRotate = true } = attribute;
             let symbol;
             if (attribute?.visible) {
                 const startAngle = this._startAngle;
@@ -2499,7 +2583,7 @@
                     ...position,
                     symbolType: symbolType,
                     size,
-                    angle: rotate + refAngle,
+                    angle: autoRotate ? rotate + refAngle : 0,
                     strokeBoundsBuffer: 0,
                     ...style
                 });
@@ -9537,7 +9621,7 @@
         }
     }
 
-    const version = "0.13.7";
+    const version = "0.13.8-alpha.4";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;