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

package/dist/index.js

@@ -543,7 +543,7 @@
             super(vutils.merge({}, Tag.defaultAttributes, attributes));
         }
         render() {
-            const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, formatMethod } = this.attribute;
+            const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state } = this.attribute;
             const parsedPadding = vutils.normalizePadding(padding);
             const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
             let symbol;
@@ -574,7 +574,7 @@
             tagWidth += symbolPlaceWidth;
             textX += symbolPlaceWidth;
             const textAttrs = {
-                text: formatMethod ? formatMethod(text) : text,
+                text,
                 visible: vutils.isValid(text) && visible !== false,
                 lineHeight: textStyle?.fontSize,
                 ...textStyle,
@@ -1514,6 +1514,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 +1586,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,7 +1693,7 @@
             this._setStates(text);
             return text;
         }
-        _checkMarks() {
+        _prepare() {
             const baseMarks = this.getBaseMarks();
             const currentBaseMarks = [];
             baseMarks.forEach(mark => {
@@ -1659,59 +1701,58 @@
                     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 ?? {
@@ -1734,18 +1775,18 @@
                 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,15 +1794,27 @@
                 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 (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);
@@ -1799,17 +1852,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 +1911,7 @@
                     });
                 }
             });
-            this._textMap = currentTextMap;
+            this._graphicToText = currentTextMap;
         }
         _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
             const listener = (event) => {
@@ -1910,30 +1962,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 +2444,7 @@
             },
             startSymbol: {
                 visible: false,
+                autoRotate: true,
                 symbolType: 'triangle',
                 size: 12,
                 refX: 0,
@@ -2400,6 +2457,7 @@
             },
             endSymbol: {
                 visible: false,
+                autoRotate: true,
                 symbolType: 'triangle',
                 size: 12,
                 refX: 0,
@@ -2471,6 +2529,7 @@
             this.add(line);
         }
         renderSymbol(attribute, dim) {
+            const { autoRotate = true } = attribute;
             let symbol;
             if (attribute?.visible) {
                 const startAngle = this._startAngle;
@@ -2499,7 +2558,7 @@
                     ...position,
                     symbolType: symbolType,
                     size,
-                    angle: rotate + refAngle,
+                    angle: autoRotate ? rotate + refAngle : 0,
                     strokeBoundsBuffer: 0,
                     ...style
                 });
@@ -9537,7 +9596,7 @@
         }
     }
 
-    const version = "0.13.7";
+    const version = "0.13.8-alpha.1";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;