@visactor/vrender-components 0.14.3-alpha.2 → 0.14.3-alpha.4

package/dist/index.js

@@ -1779,6 +1779,20 @@
                         continue;
                     }
                 }
+                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 });
+                        result.push(text);
+                        continue;
+                    }
+                }
                 let hasPlace = false;
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
@@ -1974,67 +1988,42 @@
             return listener;
         }
         _smartInvert(labels) {
-            var _a, _b, _c, _d;
             const option = (this.attribute.smartInvert || {});
             const { textType, contrastRatiosThreshold, alternativeColors } = option;
-            const fillStrategy = (_a = option.fillStrategy) !== null && _a !== void 0 ? _a : 'invertSeries';
-            const strokeStrategy = (_b = option.strokeStrategy) !== null && _b !== void 0 ? _b : 'series';
-            const brightColor = (_c = option.brightColor) !== null && _c !== void 0 ? _c : '#ffffff';
-            const darkColor = (_d = option.darkColor) !== null && _d !== void 0 ? _d : '#000000';
-            if (fillStrategy === 'null' && strokeStrategy === 'null') {
-                return;
-            }
             for (let i = 0; i < labels.length; i++) {
                 const label = labels[i];
                 if (!label) {
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                const backgroundColor = baseMark.attribute.fill;
-                const foregroundColor = label.attribute.fill;
-                const seriesColor = backgroundColor;
-                const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
-                const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
-                switch (fillStrategy) {
-                    case 'null':
-                        break;
-                    case 'series':
-                        label.setAttributes({
-                            fill: seriesColor
-                        });
-                        break;
-                    case 'invertSeries':
-                        label.setAttributes({
-                            fill: invertColor
-                        });
-                        break;
-                    case 'similarSeries':
-                        label.setAttributes({
-                            fill: simialrColor
-                        });
-                        break;
+                let isInside = canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+                if (this.attribute.type === 'arc') {
+                    if (this.attribute.position === 'inside') {
+                        isInside = true;
+                    }
+                    else {
+                        isInside = false;
+                    }
                 }
-                if (label.attribute.lineWidth === 0) {
-                    continue;
+                if (label.attribute.stroke && label.attribute.lineWidth > 0) {
+                    label.setAttributes({
+                        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
-                switch (strokeStrategy) {
-                    case 'null':
-                        break;
-                    case 'series':
-                        label.setAttributes({
-                            stroke: seriesColor
-                        });
-                        break;
-                    case 'invertSeries':
-                        label.setAttributes({
-                            stroke: invertColor
-                        });
-                        break;
-                    case 'similarSeries':
-                        label.setAttributes({
-                            stroke: simialrColor
-                        });
-                        break;
+                else if (isInside) {
+                    const backgroundColor = baseMark.attribute.fill;
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, 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)
+                    });
                 }
             }
         }
@@ -2607,7 +2596,7 @@
             }
             else {
                 const alignOffset = 0;
-                labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * targetCenterOffset);
+                labelPosition.x = cx + alignOffset + flag * (spaceWidth + targetCenterOffset);
             }
         }
         _computeAlignOffset(align, labelWidth, alignFlag) {
@@ -3007,7 +2996,8 @@
             align: 'arc',
             strategy: 'priority',
             tangentConstraint: true
-        }
+        },
+        pickable: false
     };
 
     const labelComponentMap = {
@@ -3866,8 +3856,10 @@
             textStyle = vutils.isFunction(textStyle)
                 ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
                 : textStyle;
-            const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
-            textStyle = vutils.merge(labelAlign, textStyle);
+            textStyle = vutils.merge({
+                textAlign: this.getTextAlign(vector),
+                textBaseline: this.getTextBaseline(vector, inside)
+            }, textStyle);
             if (vutils.isFunction(textStyle.text)) {
                 textStyle.text = textStyle.text({
                     label: tickDatum.label,
@@ -4033,70 +4025,73 @@
             item.rotatedBounds = bounds;
         });
     }
-    function clampAngle(angle = 0) {
-        if (angle < 0) {
-            while (angle < 0) {
-                angle += Math.PI * 2;
-            }
-        }
-        if (angle > 0) {
-            while (angle >= Math.PI * 2) {
-                angle -= Math.PI * 2;
-            }
-        }
-        return angle;
-    }
     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) => {
-            item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            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) {
-        items.forEach(item => {
-            item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
-        });
-    }
-    function getXAxisLabelAlign(orient, angle = 0) {
         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'];
         }
-        angle = clampAngle(angle);
-        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;
-        }
-        return {
-            textAlign: align[index],
-            textBaseline: baseline[index]
-        };
-    }
-    function getYAxisLabelAlign(orient, angle = 0) {
-        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'];
-        }
-        angle = clampAngle(angle);
-        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;
-        }
-        return {
-            textAlign: align[index],
-            textBaseline: baseline[index]
-        };
+        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) {
@@ -4503,23 +4498,14 @@
             }
             return base;
         }
-        getLabelAlign(vector, inside, angle) {
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             const orient = this.attribute.orient;
-            if (vutils.isValidNumber(angle)) {
-                if (orient === 'top' || orient === 'bottom') {
-                    return getXAxisLabelAlign(orient, angle);
-                }
-                if (orient === 'left' || orient === 'right') {
-                    return getYAxisLabelAlign(orient, angle);
-                }
+            if (orient === 'left' || orient === 'right') {
+                rotateYAxis(orient, labelShapes);
+            }
+            else if (orient === 'bottom' || orient === 'top') {
+                rotateXAxis(orient, labelShapes);
             }
-            return {
-                textAlign: this.getTextAlign(vector),
-                textBaseline: this.getTextBaseline(vector, inside)
-            };
-        }
-        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            return;
         }
         handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             if (vutils.isEmpty(labelShapes)) {
@@ -4867,12 +4853,6 @@
         afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             return;
         }
-        getLabelAlign(vector, inside, angle) {
-            return {
-                textAlign: this.getTextAlign(vector),
-                textBaseline: this.getTextBaseline(vector)
-            };
-        }
     }
     CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
 
@@ -5763,27 +5743,6 @@
     })(exports.IMarkPointItemPosition || (exports.IMarkPointItemPosition = {}));
 
     class Marker extends AbstractComponent {
-        _initContainer() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const groupClip = vrender.createGroup(Object.assign(Object.assign({}, (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.clipRange), { clip: (_c = vutils.isValid((_b = this.attribute) === null || _b === void 0 ? void 0 : _b.clipRange)) !== null && _c !== void 0 ? _c : false }));
-            groupClip.name = 'marker-container';
-            const group = vrender.createGroup({
-                x: -((_f = (_e = (_d = this.attribute) === null || _d === void 0 ? void 0 : _d.clipRange) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0),
-                y: -((_j = (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.clipRange) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0)
-            });
-            groupClip.add(group);
-            this._containerClip = groupClip;
-            this.add(groupClip);
-            this._container = group;
-        }
-        _updateContainer() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            this._containerClip.setAttributes(Object.assign(Object.assign({}, (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.clipRange), { clip: (_c = vutils.isValid((_b = this.attribute) === null || _b === void 0 ? void 0 : _b.clipRange)) !== null && _c !== void 0 ? _c : false }));
-            this._container.setAttributes({
-                x: -((_f = (_e = (_d = this.attribute) === null || _d === void 0 ? void 0 : _d.clipRange) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0),
-                y: -((_j = (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.clipRange) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0)
-            });
-        }
         render() {
             var _a, _b;
             const markerVisible = (_a = this.attribute.visible) !== null && _a !== void 0 ? _a : true;
@@ -5793,12 +5752,14 @@
                 this.setAttribute('childrenPickable', false);
             }
             if (markerVisible) {
-                if (!this._containerClip) {
-                    this._initContainer();
-                    this.initMarker(this._container);
+                if (!this._container) {
+                    const group = vrender.createGroup({});
+                    group.name = 'marker-container';
+                    this.add(group);
+                    this._container = group;
+                    this.initMarker(group);
                 }
                 else {
-                    this._updateContainer();
                     this.updateMarker();
                 }
             }
@@ -6559,7 +6520,6 @@
         LegendEvent["legendItemHover"] = "legendItemHover";
         LegendEvent["legendItemUnHover"] = "legendItemUnHover";
         LegendEvent["legendItemClick"] = "legendItemClick";
-        LegendEvent["legendItemAttributeUpdate"] = "legendItemAttributeUpdate";
     })(exports.LegendEvent || (exports.LegendEvent = {}));
     exports.LEGEND_ELEMENT_NAME = void 0;
     (function (LEGEND_ELEMENT_NAME) {
@@ -6683,21 +6643,12 @@
                 const target = e.target;
                 if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
                     const legendItem = target.delegate;
-                    let attributeUpdate = false;
-                    if (legendItem.hasState(exports.LegendStateValue.unSelectedHover) ||
-                        legendItem.hasState(exports.LegendStateValue.selectedHover)) {
-                        attributeUpdate = true;
-                    }
                     legendItem.removeState(exports.LegendStateValue.unSelectedHover);
                     legendItem.removeState(exports.LegendStateValue.selectedHover);
                     legendItem
                         .getChildren()[0]
                         .getChildren()
                         .forEach((child) => {
-                        if (!attributeUpdate &&
-                            (child.hasState(exports.LegendStateValue.unSelectedHover) || child.hasState(exports.LegendStateValue.selectedHover))) {
-                            attributeUpdate = true;
-                        }
                         child.removeState(exports.LegendStateValue.unSelectedHover);
                         child.removeState(exports.LegendStateValue.selectedHover);
                     });
@@ -6705,9 +6656,6 @@
                     if (focusButton) {
                         focusButton.setAttribute('visible', false);
                     }
-                    if (attributeUpdate) {
-                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
-                    }
                     this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem);
                 }
             };
@@ -6978,30 +6926,15 @@
                 this._appendDataToShape(valueShape, exports.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.state);
                 valueShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
                 if (this._itemWidthByUser) {
-                    const layoutWidth = this._itemWidthByUser -
+                    valueShape.setAttribute('maxLineWidth', this._itemWidthByUser -
                         parsedPadding[1] -
                         parsedPadding[3] -
                         shapeSize -
                         shapeSpace -
+                        labelShape.AABBBounds.width() -
                         labelSpace -
                         focusSpace -
-                        valueSpace;
-                    const valueBounds = valueShape.AABBBounds;
-                    const labelBounds = labelShape.AABBBounds;
-                    const valueWidth = valueBounds.width();
-                    const labelWidth = labelBounds.width();
-                    if (labelWidth > layoutWidth) {
-                        if ((layoutWidth - valueWidth) / labelWidth > 0.4) {
-                            labelShape.setAttribute('maxLineWidth', layoutWidth - valueWidth);
-                        }
-                        else {
-                            valueShape.setAttribute('maxLineWidth', layoutWidth * 0.5);
-                            labelShape.setAttribute('maxLineWidth', layoutWidth * 0.5);
-                        }
-                    }
-                    else {
-                        valueShape.setAttribute('maxLineWidth', layoutWidth - labelWidth);
-                    }
+                        valueSpace);
                     if (valueAttr.alignRight) {
                         valueShape.setAttributes({
                             textAlign: 'right',
@@ -7151,32 +7084,18 @@
             return true;
         }
         _setLegendItemState(legendItem, stateName, keepCurrentStates = true) {
-            let attributeUpdate = false;
-            if (!legendItem.hasState(stateName)) {
-                attributeUpdate = true;
-            }
             legendItem.addState(stateName, keepCurrentStates);
             legendItem
                 .getChildren()[0]
                 .getChildren()
-                .forEach((child) => {
+                .forEach(child => {
                 if (child.name !== exports.LEGEND_ELEMENT_NAME.focus) {
-                    if (!attributeUpdate && !child.hasState(stateName)) {
-                        attributeUpdate = true;
-                    }
                     child.addState(stateName, keepCurrentStates);
                 }
             });
-            if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
-            }
         }
         _removeLegendItemState(legendItem, stateNames) {
-            let attributeUpdate = false;
             stateNames.forEach(name => {
-                if (!attributeUpdate && legendItem.hasState(name)) {
-                    attributeUpdate = true;
-                }
                 legendItem.removeState(name);
             });
             legendItem
@@ -7185,16 +7104,10 @@
                 .forEach(child => {
                 if (child.name !== exports.LEGEND_ELEMENT_NAME.focus) {
                     stateNames.forEach(name => {
-                        if (!attributeUpdate && child.hasState(name)) {
-                            attributeUpdate = true;
-                        }
                         child.removeState(name);
                     });
                 }
             });
-            if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
-            }
         }
         _getSelectedLegends() {
             var _a;
@@ -10068,7 +9981,7 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.3-alpha.2";
+    const version = "0.14.3-alpha.4";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;