@visactor/vrender-components 0.18.0-alpha.0 → 0.18.0-alpha.1

package/es/label/base.d.ts

@@ -4,7 +4,7 @@ import { AbstractComponent } from '../core/base';
 import type { PointLocationCfg } from '../core/type';
 import type { Bitmap } from './overlap';
 import { bitmapTool } from './overlap';
-import type { BaseLabelAttrs, ILabelAnimation, LabelItem, ILabelEnterAnimation, ILabelExitAnimation, ILabelUpdateAnimation } from './type';
+import type { BaseLabelAttrs, ILabelAnimation, LabelItem, ILabelEnterAnimation, ILabelExitAnimation, ILabelUpdateAnimation, LabelContent } from './type';
 import type { ComponentOptions } from '../interface';
 export declare class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
     name: string;
@@ -20,10 +20,7 @@ export declare class LabelBase<T extends BaseLabelAttrs> extends AbstractCompone
     setBitmap(bitmap: Bitmap): void;
     protected _bmpTool?: ReturnType<typeof bitmapTool>;
     setBitmapTool(bmpTool: ReturnType<typeof bitmapTool>): void;
-    protected _graphicToText: Map<IGraphic, {
-        text: IText | IRichText;
-        labelLine?: ILine;
-    }>;
+    protected _graphicToText: Map<IGraphic, LabelContent>;
     protected _idToGraphic: Map<string, IGraphic>;
     protected _idToPoint: Map<string, IPointLike>;
     onAfterLabelOverlap?: (bitmap: Bitmap) => void;
@@ -35,18 +32,19 @@ export declare class LabelBase<T extends BaseLabelAttrs> extends AbstractCompone
         x: number;
         y: number;
     } | undefined;
-    protected _labelLine(text: LabelItem): ILine | undefined;
+    protected _createLabelLine(text: IText | IRichText, baseMark?: IGraphic): ILine | undefined;
     protected render(): void;
     private _bindEvent;
     private _setStatesOfText;
-    private _setStatesOfLabelLine;
+    protected _setStatesOfLabelLine(target: IGraphic): void;
     private _onHover;
     private _onUnHover;
     private _onClick;
     protected _createLabelText(attributes: LabelItem): IRichText | IText;
     private _prepare;
     protected getRelatedGraphic(item: LabelItem): IGraphic<Partial<import("@visactor/vrender-core").IGraphicAttribute>>;
-    protected _layout(data?: LabelItem[]): (IText | IRichText)[];
+    protected _initText(data?: LabelItem[]): (IText | IRichText)[];
+    protected _layout(texts: (IText | IRichText)[]): (IText | IRichText)[];
     protected _overlapping(labels: (IText | IRichText)[]): (IRichText | IText)[];
     protected getBaseMarkGroup(): IGroup;
     protected getGraphicBounds(graphic?: IGraphic, point?: Partial<PointLocationCfg>, position?: string): IBoundsLike;

package/es/label/base.js

@@ -1,12 +1,12 @@
 import { graphicCreator, AttributeUpdateType, IContainPointMode } from "@visactor/vrender-core";
 
-import { isFunction, isEmpty, isValid, isString, merge, isRectIntersect, isNil, isArray } from "@visactor/vutils";
+import { isFunction, isEmpty, isValid, isString, merge, isRectIntersect, isNil, isArray, isObject } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
 import { labelSmartInvert, contrastAccessibilityChecker, smartInvertStrategy } from "../util/label-smartInvert";
 
-import { getMarksByName, getNoneGroupMarksByName, traverseGroup } from "../util";
+import { getMarksByName, getNoneGroupMarksByName, isRichText, richTextAttributeTransform, traverseGroup } from "../util";
 
 import { StateValue } from "../constant";
 
@@ -14,9 +14,7 @@ import { bitmapTool, boundToRange, canPlace, clampText, place } from "./overlap"
 
 import { DefaultLabelAnimation, getAnimationAttributes, updateAnimation } from "./animate/animate";
 
-import { getPointsOfLineArea } from "./util";
-
-import { DEFAULT_HTML_TEXT_SPEC } from "../constant";
+import { connectLineBetweenBounds, getPointsOfLineArea } from "./util";
 
 import { loadLabelComponent } from "./register";
 
@@ -51,9 +49,9 @@ export class LabelBase extends AbstractComponent {
                 node === target || isEmpty(node.states) || node.addState(StateValue.selectedReverse, !0);
             })), this._lastSelect = target);
         }, this._handleRelatedGraphicSetState = e => {
-            var _a, _b, _c;
-            if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === AttributeUpdateType.STATE) {
-                const currentStates = null !== (_c = null === (_b = e.target) || void 0 === _b ? void 0 : _b.currentStates) && void 0 !== _c ? _c : [];
+            var _a, _b, _c, _d, _e;
+            if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === AttributeUpdateType.STATE || (null === (_b = e.detail) || void 0 === _b ? void 0 : _b.type) === AttributeUpdateType.ANIMATE_UPDATE && (null === (_c = e.detail.animationState) || void 0 === _c ? void 0 : _c.isFirstFrameOfStep)) {
+                const currentStates = null !== (_e = null === (_d = e.target) || void 0 === _d ? void 0 : _d.currentStates) && void 0 !== _e ? _e : [];
                 (this._isCollectionBase ? [ ...this._graphicToText.values() ] : [ this._graphicToText.get(e.target) ]).forEach((label => {
                     label && (label.text && label.text.useStates(currentStates), label.labelLine && label.labelLine.useStates(currentStates));
                 }));
@@ -61,12 +59,24 @@ export class LabelBase extends AbstractComponent {
         };
     }
     labeling(textBounds, graphicBounds, position, offset) {}
-    _labelLine(text) {}
+    _createLabelLine(text, baseMark) {
+        const points = connectLineBetweenBounds(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds);
+        if (points) {
+            const line = graphicCreator.line({
+                points: points
+            });
+            return baseMark && baseMark.attribute.fill && line.setAttribute("stroke", baseMark.attribute.fill), 
+            this.attribute.line && !isEmpty(this.attribute.line.style) && line.setAttributes(this.attribute.line.style), 
+            this._setStatesOfLabelLine(line), line;
+        }
+    }
     render() {
         if (this._prepare(), isNil(this._idToGraphic) || this._isCollectionBase && isNil(this._idToPoint)) return;
         const {overlap: overlap, smartInvert: smartInvert, dataFilter: dataFilter, customLayoutFunc: customLayoutFunc, customOverlapFunc: customOverlapFunc} = this.attribute;
-        let labels, data = this.attribute.data;
-        isFunction(dataFilter) && (data = dataFilter(data)), labels = isFunction(customLayoutFunc) ? customLayoutFunc(data, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : this._layout(data), 
+        let data = this.attribute.data;
+        isFunction(dataFilter) && (data = dataFilter(data));
+        let labels = this._initText(data);
+        labels = isFunction(customLayoutFunc) ? customLayoutFunc(data, labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : this._layout(labels), 
         isFunction(customOverlapFunc) ? labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : !1 !== overlap && (labels = this._overlapping(labels)), 
         labels && labels.length && labels.forEach((label => {
             this._bindEvent(label), this._setStatesOfText(label);
@@ -90,19 +100,7 @@ export class LabelBase extends AbstractComponent {
         state && !isEmpty(state) && (target.states = state);
     }
     _createLabelText(attributes) {
-        var _a, _b;
-        if ("rich" === attributes.textType) {
-            attributes.textConfig = attributes.text, attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, 
-            attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0;
-            return graphicCreator.richtext(attributes);
-        }
-        if ("html" === attributes.textType) {
-            attributes.textConfig = [], attributes.html = Object.assign(Object.assign({
-                dom: attributes.text
-            }, DEFAULT_HTML_TEXT_SPEC), attributes);
-            return graphicCreator.richtext(attributes);
-        }
-        return graphicCreator.text(attributes);
+        return isRichText(attributes, "textType") ? graphicCreator.richtext(richTextAttributeTransform(attributes)) : graphicCreator.text(attributes);
     }
     _prepare() {
         var _a, _b, _c, _d, _e;
@@ -121,7 +119,7 @@ export class LabelBase extends AbstractComponent {
                 let cur = 0;
                 for (let i = 0; i < currentBaseMarks.length; i++) {
                     const baseMark = currentBaseMarks[i], points = getPointsOfLineArea(baseMark);
-                    if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
+                    if (points && points.length) for (let j = 0; j < points.length; j++) {
                         const textData = data[cur];
                         textData && points[j] && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${cur}`), 
                         this._idToPoint.set(textData.id, points[j]), this._idToGraphic.set(textData.id, baseMark)), 
@@ -133,34 +131,53 @@ export class LabelBase extends AbstractComponent {
                 textData && baseMark && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), 
                 this._idToGraphic.set(textData.id, baseMark));
             }
-            !1 !== this.attribute.animation && (this._animationConfig = {
-                enter: merge({}, DefaultLabelAnimation, this.attribute.animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
-                exit: merge({}, DefaultLabelAnimation, this.attribute.animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
-                update: isArray(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge({}, DefaultLabelAnimation, this.attribute.animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
-            });
+            if (!1 !== this.attribute.animation) {
+                const animation = isObject(this.attribute.animation) ? this.attribute.animation : {};
+                this._animationConfig = {
+                    enter: merge({}, DefaultLabelAnimation, animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
+                    exit: merge({}, DefaultLabelAnimation, animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
+                    update: isArray(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge({}, DefaultLabelAnimation, animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
+                };
+            }
         }
     }
     getRelatedGraphic(item) {
         return this._idToGraphic.get(item.id);
     }
-    _layout(data = []) {
-        const {textStyle: textStyle = {}, position: position, offset: offset} = this.attribute, labels = [];
+    _initText(data = []) {
+        const {textStyle: textStyle = {}} = this.attribute, labels = [];
         for (let i = 0; i < data.length; i++) {
-            const textData = data[i], baseMark = this.getRelatedGraphic(textData), labelAttribute = Object.assign(Object.assign({
+            const textData = data[i], baseMark = this.getRelatedGraphic(textData);
+            if (!baseMark) continue;
+            const labelAttribute = Object.assign(Object.assign({
                 fill: this._isCollectionBase ? isArray(baseMark.attribute.stroke) ? baseMark.attribute.stroke.find((entry => !!entry && !0 !== entry)) : baseMark.attribute.stroke : baseMark.attribute.fill
-            }, textStyle), textData), text = this._createLabelText(labelAttribute), textBounds = this.getGraphicBounds(text), actualPosition = isFunction(position) ? position(textData) : position, graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id), actualPosition) : this.getGraphicBounds(baseMark, {
+            }, textStyle), textData), text = this._createLabelText(labelAttribute);
+            labels.push(text);
+        }
+        return labels;
+    }
+    _layout(texts) {
+        const {position: position, offset: offset} = this.attribute;
+        for (let i = 0; i < texts.length; i++) {
+            const text = texts[i];
+            if (!text) return;
+            const textData = text.attribute, baseMark = this.getRelatedGraphic(textData);
+            if (!baseMark) continue;
+            text.attachedThemeGraphic = this;
+            const textBounds = this.getGraphicBounds(text);
+            text.attachedThemeGraphic = null;
+            const actualPosition = isFunction(position) ? position(textData) : position, graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id), actualPosition) : this.getGraphicBounds(baseMark, {
                 x: textData.x,
                 y: textData.y
             }, actualPosition), textLocation = this.labeling(textBounds, graphicBounds, actualPosition, offset);
-            textLocation && (labelAttribute.x = textLocation.x, labelAttribute.y = textLocation.y, 
-            text.setAttributes(textLocation)), labels.push(text);
+            textLocation && text.setAttributes(textLocation);
         }
-        return labels;
+        return texts;
     }
     _overlapping(labels) {
         var _a, _b, _c, _d;
         if (0 === labels.length) return [];
-        const option = this.attribute.overlap, result = [], baseMarkGroup = this.getBaseMarkGroup(), size = null !== (_a = option.size) && void 0 !== _a ? _a : {
+        const option = isObject(this.attribute.overlap) ? this.attribute.overlap : {}, result = [], baseMarkGroup = this.getBaseMarkGroup(), size = null !== (_a = option.size) && void 0 !== _a ? _a : {
             width: null !== (_b = null == baseMarkGroup ? void 0 : baseMarkGroup.AABBBounds.width()) && void 0 !== _b ? _b : 0,
             height: null !== (_c = null == baseMarkGroup ? void 0 : baseMarkGroup.AABBBounds.height()) && void 0 !== _c ? _c : 0
         };
@@ -187,7 +204,7 @@ export class LabelBase extends AbstractComponent {
                     bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
                     continue;
                 }
-                if (checkBounds && (null == baseMark ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
+                if (checkBounds && baseMark && baseMark.AABBBounds && this._canPlaceInside(text.AABBBounds, baseMark.AABBBounds)) {
                     bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
                     continue;
                 }
@@ -231,22 +248,35 @@ export class LabelBase extends AbstractComponent {
         if (baseMarkGroupName) return this.getRootNode().find((node => node.name === baseMarkGroupName), !0);
     }
     getGraphicBounds(graphic, point = {}) {
-        return (null == graphic ? void 0 : graphic.AABBBounds) || {
-            x1: point.x,
-            x2: point.x,
-            y1: point.y,
-            y2: point.y
+        if (graphic) {
+            if (!1 !== graphic.attribute.visible) return graphic.AABBBounds;
+            const {x: x, y: y} = graphic.attribute;
+            return {
+                x1: x,
+                x2: x,
+                y1: y,
+                y2: y
+            };
+        }
+        const {x: x, y: y} = point;
+        return {
+            x1: x,
+            x2: x,
+            y1: y,
+            y2: y
         };
     }
     _renderLabels(labels) {
         !1 === this._enableAnimation || !1 === this.attribute.animation ? this._renderWithOutAnimation(labels) : this._renderWithAnimation(labels);
     }
     _renderWithAnimation(labels) {
-        const currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [], labelLines = [];
+        var _a;
+        const currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [], labelLines = [], {visible: showLabelLine} = null !== (_a = this.attribute.line) && void 0 !== _a ? _a : {};
         labels.forEach(((text, index) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const labelLine = this._labelLine(text), relatedGraphic = this.getRelatedGraphic(text.attribute), textId = text.attribute.id, textKey = this._isCollectionBase ? textId : relatedGraphic, state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
-            if ("enter" === state) {
+            const relatedGraphic = this.getRelatedGraphic(text.attribute), textId = text.attribute.id, textKey = this._isCollectionBase ? textId : relatedGraphic, state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
+            let labelLine;
+            if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), 
+            "enter" === state) {
                 if (texts.push(text), currentTextMap.set(textKey, labelLine ? {
                     text: text,
                     labelLine: labelLine
@@ -254,8 +284,8 @@ export class LabelBase extends AbstractComponent {
                     text: text
                 }), relatedGraphic) {
                     const {from: from, to: to} = getAnimationAttributes(text.attribute, "fadeIn");
-                    this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), labelLines.push(labelLine), 
-                    this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", (a => {
+                    this.add(text), labelLine && (labelLines.push(labelLine), this.add(labelLine)), 
+                    this._syncStateWithRelatedGraphic(relatedGraphic), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", (a => {
                         text.setAttributes(from), labelLine && labelLine.setAttributes(from);
                         const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
                         relatedGraphic.on("afterAttributeUpdate", listener);
@@ -265,24 +295,23 @@ export class LabelBase extends AbstractComponent {
                 const prevLabel = prevTextMap.get(textKey);
                 prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel);
                 const prevText = prevLabel.text, {duration: duration, easing: easing} = this._animationConfig.update;
-                updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && prevLabel.labelLine.animate().to(merge({}, prevLabel.labelLine.attribute, {
-                    visible: null === (_f = null !== (_d = (null === (_b = null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.line) || void 0 === _b ? void 0 : _b.visible) && (null === (_c = text.attribute) || void 0 === _c ? void 0 : _c.visible)) && void 0 !== _d ? _d : null === (_e = text.attribute) || void 0 === _e ? void 0 : _e.visible) || void 0 === _f || _f,
-                    points: null === (_g = text.attribute) || void 0 === _g ? void 0 : _g.points
-                }), duration, easing);
+                updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && labelLine && prevLabel.labelLine.animate().to(labelLine.attribute, duration, easing);
             }
         })), prevTextMap.forEach((label => {
             var _a;
             null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd((() => {
-                this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
+                this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
             }));
         })), this._graphicToText = currentTextMap;
     }
     _renderWithOutAnimation(labels) {
-        const currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [];
+        var _a;
+        const currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [], {visible: showLabelLine} = null !== (_a = this.attribute.line) && void 0 !== _a ? _a : {};
         labels.forEach((text => {
-            var _a;
-            const labelLine = this._labelLine(text), relatedGraphic = this.getRelatedGraphic(text.attribute), state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter", textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
-            if ("enter" === state) texts.push(text), currentTextMap.set(textKey, labelLine ? {
+            const relatedGraphic = this.getRelatedGraphic(text.attribute), state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter", textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
+            let labelLine;
+            if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), 
+            "enter" === state) texts.push(text), currentTextMap.set(textKey, labelLine ? {
                 text: text,
                 labelLine: labelLine
             } : {
@@ -290,12 +319,10 @@ export class LabelBase extends AbstractComponent {
             }), this.add(text), labelLine && this.add(labelLine), this._syncStateWithRelatedGraphic(relatedGraphic); else if ("update" === state) {
                 const prevLabel = prevTextMap.get(textKey);
                 prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), 
-                (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
-                    points: null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.points
-                });
+                prevLabel.labelLine && labelLine && prevLabel.labelLine.setAttributes(labelLine.attribute);
             }
         })), prevTextMap.forEach((label => {
-            this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
+            this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
         })), this._graphicToText = currentTextMap;
     }
     _syncStateWithRelatedGraphic(relatedGraphic) {
@@ -345,7 +372,7 @@ export class LabelBase extends AbstractComponent {
     }
     _smartInvert(labels) {
         var _a, _b, _c, _d, _e;
-        const option = this.attribute.smartInvert || {}, {textType: textType, contrastRatiosThreshold: contrastRatiosThreshold, alternativeColors: alternativeColors, mode: mode} = option, fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase", strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base", brightColor = null !== (_c = option.brightColor) && void 0 !== _c ? _c : "#ffffff", darkColor = null !== (_d = option.darkColor) && void 0 !== _d ? _d : "#000000", outsideEnable = null !== (_e = option.outsideEnable) && void 0 !== _e && _e;
+        const option = isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {}, {textType: textType, contrastRatiosThreshold: contrastRatiosThreshold, alternativeColors: alternativeColors, mode: mode} = option, fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase", strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base", brightColor = null !== (_c = option.brightColor) && void 0 !== _c ? _c : "#ffffff", darkColor = null !== (_d = option.darkColor) && void 0 !== _d ? _d : "#000000", outsideEnable = null !== (_e = option.outsideEnable) && void 0 !== _e && _e;
         if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
             const label = labels[i];
             if (!label) continue;
@@ -360,7 +387,7 @@ export class LabelBase extends AbstractComponent {
                     stroke: stroke
                 });
             } else {
-                if (this._canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
+                if (this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds)) {
                     const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
                     if (fill && label.setAttributes({
                         fill: fill