@visactor/vchart 2.0.20-alpha.2 → 2.0.20-alpha.3

package/build/index.js

@@ -22141,9 +22141,10 @@
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else {
           const {
-            backgroundCornerRadius: backgroundCornerRadius
+            backgroundCornerRadius: backgroundCornerRadius,
+            backgroundOpacity = 1
           } = graphic.attribute;
-          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
         }
         shouldReCalBounds && boundsAllocate.free(b), restore();
       }
@@ -44077,8 +44078,9 @@
           const label = labels[i];
           if (!label) continue;
           const baseMark = this.getRelatedGraphic(label.attribute);
-          let backgroundColor = baseMark.getAttributes(!0).fill,
-            foregroundColor = label.attribute.fill;
+          let backgroundColor = baseMark.getAttributes(!0).fill;
+          const backgroundOpacity = baseMark.getAttributes(!0).fillOpacity;
+          let foregroundColor = label.attribute.fill;
           if (isObject$2(backgroundColor) && backgroundColor.gradient) {
             const firstStopColor = null === (_g = null === (_f = backgroundColor.stops) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.color;
             firstStopColor && (backgroundColor = firstStopColor, foregroundColor = firstStopColor);
@@ -44092,11 +44094,26 @@
             if (fill && label.setAttributes({
               fill: fill
             }), 0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
-            const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
-            stroke && label.setAttributes({
-              stroke: stroke
-            });
+            if ("background" === interactInvertType) label.setAttributes({
+              stroke: !1
+            });else {
+              const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
+              stroke && label.setAttributes({
+                stroke: stroke
+              });
+            }
           } else if (isIntersect && "none" !== interactInvertType) {
+            if ("background" === interactInvertType) {
+              const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
+              fill && label.setAttributes({
+                fill: fill
+              }), label.setAttributes({
+                stroke: !1,
+                background: backgroundColor,
+                backgroundOpacity: backgroundOpacity
+              });
+              continue;
+            }
             if (0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
             if (label.attribute.stroke) {
               label.setAttributes({
@@ -44113,6 +44130,9 @@
               stroke: stroke
             });
           }
+          !1 === isInside && "background" === interactInvertType && label.setAttributes({
+            background: null
+          });
         }
       }
       _canPlaceInside(textBound, shapeBound) {
@@ -49656,7 +49676,31 @@
         return graphicCreator.symbol(style);
       }
       _renderHandlerText(value, position) {
-        var _a, _b, _c;
+        return graphicCreator.text(this._getHandlerTextAttributes(value, position));
+      }
+      _getHandlerPosition(isStart) {
+        return this.attribute.range && isStart ? "start" : "end";
+      }
+      _getHandlerTextStyle(value, position) {
+        const {
+          align: align,
+          handlerSize = 14,
+          handlerText = {},
+          railHeight: railHeight,
+          railWidth: railWidth,
+          slidable: slidable
+        } = this.attribute;
+        return isFunction$1(handlerText.style) ? handlerText.style(value, position, {
+          layout: this.attribute.layout,
+          align: align,
+          railWidth: railWidth,
+          railHeight: railHeight,
+          handlerSize: handlerSize,
+          slidable: slidable
+        }) : handlerText.style;
+      }
+      _getHandlerTextAttributes(value, position) {
+        var _a, _b;
         const {
             align: align,
             handlerSize = 14,
@@ -49668,13 +49712,13 @@
           isHorizontal = this._isHorizontal,
           pos = this.calculatePosByValue(value, position),
           textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
+          handlerTextStyle = this._getHandlerTextStyle(value, position),
           textStyle = {
             text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
-            lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+            lineHeight: null == handlerTextStyle ? void 0 : handlerTextStyle.lineHeight,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
-        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos), Object.assign(Object.assign({}, textStyle), handlerTextStyle);
       }
       _renderTooltip() {
         var _a;
@@ -49802,31 +49846,19 @@
         }
       }
       _updateHandler(handler, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal;
         handler.setAttribute(isHorizontal ? "x" : "y", position);
         const updateHandlerText = handler.name === SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
         if (updateHandlerText) {
-          const {
-            handlerText = {}
-          } = this.attribute;
-          updateHandlerText.setAttributes({
-            text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_a = handlerText.precision) && void 0 !== _a ? _a : 0),
-            [isHorizontal ? "x" : "y"]: position
-          });
+          const handlerPosition = this._getHandlerPosition(handler.name === SLIDER_ELEMENT_NAME.startHandler);
+          updateHandlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         }
         handler.name === SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
       }
       _updateHandlerText(handlerText, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal,
-          {
-            handlerText: handlerTextAttr = {}
-          } = this.attribute;
-        handlerText.setAttributes({
-          [isHorizontal ? "x" : "y"]: position,
-          text: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
-        });
+          handlerPosition = this._getHandlerPosition(handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText);
+        handlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         const updateHandler = handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
         updateHandler && updateHandler.setAttributes({
           [isHorizontal ? "x" : "y"]: position
@@ -55097,33 +55129,6 @@
         updateLayoutTag() {
             this._layoutState = LayoutState.before;
         }
-        _isGeoRegionRoamDragEnabled() {
-            var _a, _b;
-            const chartSpec = (_b = (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.getSpec) === null || _b === void 0 ? void 0 : _b.call(_a);
-            const regions = chartSpec === null || chartSpec === void 0 ? void 0 : chartSpec.region;
-            if (!isArray$1(regions)) {
-                return false;
-            }
-            return regions.some((region) => {
-                var _a;
-                if ((region === null || region === void 0 ? void 0 : region.coordinate) !== 'geo' || !region.roam) {
-                    return false;
-                }
-                if (region.roam === true) {
-                    return true;
-                }
-                return (_a = region.roam.drag) !== null && _a !== void 0 ? _a : true;
-            });
-        }
-        _shouldDisableCanvasTouchAction() {
-            if (!isTrueBrowser(this._option.mode)) {
-                return false;
-            }
-            const supportsTouchEvents = isValid$1(this._option.supportsTouchEvents)
-                ? this._option.supportsTouchEvents
-                : vglobal.supportsTouchEvents;
-            return supportsTouchEvents === false && this._isGeoRegionRoamDragEnabled();
-        }
         _setCanvasStyle() {
             if (!this._stage) {
                 return;
@@ -55134,7 +55139,6 @@
                 const canvas = this.getCanvas();
                 if (canvas) {
                     canvas.style.display = 'block';
-                    canvas.style.touchAction = this._shouldDisableCanvasTouchAction() ? 'none' : '';
                 }
             }
         }
@@ -55153,7 +55157,6 @@
                 this._cachedMarks = null;
             }
             chart.compile();
-            this._setCanvasStyle();
             chart.afterCompile();
         }
         clearNextRender() {
@@ -57733,6 +57736,9 @@
                 }
             });
         }
+        clearAllStateInfo() {
+            this._stateInfoList = [];
+        }
         _isMultiMark() {
             return !this._mark || isMultiDatumMark(this._mark.type);
         }
@@ -58746,7 +58752,11 @@
                 return;
             }
             this._product = mark.getProduct();
+            this._product.clearStates();
             this._graphics = mark.getGraphics();
+            this._graphics.forEach(g => {
+                g.clearStates();
+            });
             this._graphicMap = mark._graphicMap;
             this._graphicMap.forEach(g => {
                 g.context = Object.assign(Object.assign({}, g.context), this._getCommonContext());
@@ -59241,6 +59251,9 @@
             if (this.isCommited()) {
                 if (this.getVisible() &&
                     (!this._skipBeforeLayouted || this.getCompiler().getLayoutState() !== LayoutState.before)) {
+                    if (!this._product) {
+                        this._initProduct();
+                    }
                     log(`render mark: ${this.getProductId()}, type is ${this.type}`);
                     this.renderInner();
                 }
@@ -59455,6 +59468,14 @@
         runAnimation() {
             this._runStateAnimation(this.getGraphics());
         }
+        clearBeforeReInit() {
+            this.state.clearAllStateInfo();
+            this.uncommit();
+            this.stateStyle = {};
+            this.getGraphics().forEach(g => {
+                g.clearStates();
+            });
+        }
     }
 
     exports.MarkTypeEnum = void 0;
@@ -63554,6 +63575,7 @@
             super.reInit(spec);
             const marks = this.getMarksWithoutRoot();
             marks.forEach(mark => {
+                mark.clearBeforeReInit();
                 this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
             });
             this.initMarkStyle();
@@ -66151,6 +66173,9 @@
         getTickData(index = 0) {
             return this._tickData[index];
         }
+        getVisible() {
+            return this._visible;
+        }
         get visible() {
             return this._visible;
         }
@@ -66161,20 +66186,34 @@
             return this._coordinateType;
         }
         constructor(spec, options) {
-            var _a;
+            var _a, _b;
             super(spec, options);
             this.specKey = 'axes';
             this._scales = [];
             this._tickData = [];
             this._visible = true;
+            this._specVisible = true;
+            this._hideWhenEmpty = false;
             this._tick = undefined;
             this._onTickDataChange = (tickData) => {
                 this._forceLayout();
                 tickData === null || tickData === void 0 ? void 0 : tickData.updateData();
             };
-            this._visible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
+            this._specVisible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
+            this._hideWhenEmpty = (_b = spec.hideWhenEmpty) !== null && _b !== void 0 ? _b : false;
+            this._visible = this._specVisible;
             this._coordinateType = 'none';
         }
+        setAttrFromSpec() {
+            var _a, _b;
+            super.setAttrFromSpec();
+            this._specVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
+            this._hideWhenEmpty = (_b = this._spec.hideWhenEmpty) !== null && _b !== void 0 ? _b : false;
+            this._visible = this._specVisible;
+            if (this._scale) {
+                this._refreshVisibilityByData();
+            }
+        }
         getVRenderComponents() {
             var _a, _b;
             return [(_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct(), (_b = this._gridMark) === null || _b === void 0 ? void 0 : _b.getProduct()].filter(isValid$1);
@@ -66186,8 +66225,9 @@
             this.initEvent();
             this.initScales();
             this.updateSeriesScale();
+            this._refreshVisibilityByData();
             this._shouldComputeTickData() && this._initData();
-            if (this._visible) {
+            if (this._specVisible) {
                 const axisMark = this._createMark({ type: 'component', name: `axis-${this.getOrient()}` }, {
                     componentType: this.getOrient() === 'angle' ? AxisEnum.circleAxis : AxisEnum.lineAxis,
                     mode: this._spec.mode
@@ -66217,6 +66257,7 @@
                     this._marks.addMark(gridMark);
                     this._gridMark = gridMark;
                 }
+                this._syncComponentVisibility();
                 if (((_h = this._option.globalInstance) === null || _h === void 0 ? void 0 : _h.isAnimationEnable()) &&
                     get$1(this._option.getChart().getSpec(), 'animation') !== false &&
                     this._spec.animation === true) {
@@ -66237,7 +66278,7 @@
             }
         }
         _shouldComputeTickData() {
-            return this.getVisible() || this._spec.forceInitTick;
+            return this._specVisible && (this.getVisible() || this._spec.forceInitTick || this._hideWhenEmpty);
         }
         _initData() {
             const tickData = this._initTickDataSet(this._tickTransformOption());
@@ -66249,40 +66290,41 @@
         }
         collectData(depth, rawData) {
             const data = [];
-            eachSeries(this._regions, s => {
-                var _a;
-                let field = this.collectSeriesField(depth, s);
-                field = (isArray$1(field) ? (isContinuous(this._scale.type) ? field : [field[0]]) : [field]);
-                if (!depth) {
-                    this._dataFieldText = s.getFieldAlias(field[0]);
-                }
-                if (field) {
-                    const viewData = s.getViewData();
-                    if (rawData) {
-                        field.forEach(f => {
-                            data.push(s.getRawDataStatisticsByField(f, !!isContinuous(this._scale.type)));
-                        });
-                    }
-                    else if (viewData && viewData.latestData && viewData.latestData.length) {
-                        const seriesData = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s);
-                        const userSetBreaks = this.type === ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
-                        field.forEach(f => {
-                            var _a;
-                            if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
-                                if (userSetBreaks) {
-                                    data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), { values: viewData.latestData.map((obj) => obj[f]) }));
-                                }
-                                else {
-                                    data.push(seriesData.latestData[f]);
+            this._regions &&
+                eachSeries(this._regions, s => {
+                    var _a;
+                    let field = this.collectSeriesField(depth, s);
+                    field = (isArray$1(field) ? (isContinuous(this._scale.type) ? field : [field[0]]) : [field]);
+                    if (!depth) {
+                        this._dataFieldText = s.getFieldAlias(field[0]);
+                    }
+                    if (field) {
+                        const viewData = s.getViewData();
+                        if (rawData) {
+                            field.forEach(f => {
+                                data.push(s.getRawDataStatisticsByField(f, !!isContinuous(this._scale.type)));
+                            });
+                        }
+                        else if (viewData && viewData.latestData && viewData.latestData.length) {
+                            const seriesData = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s);
+                            const userSetBreaks = this.type === ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
+                            field.forEach(f => {
+                                var _a;
+                                if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
+                                    if (userSetBreaks) {
+                                        data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), { values: viewData.latestData.map((obj) => obj[f]) }));
+                                    }
+                                    else {
+                                        data.push(seriesData.latestData[f]);
+                                    }
                                 }
-                            }
-                        });
+                            });
+                        }
                     }
-                }
-            }, {
-                userId: this._seriesUserId,
-                specIndex: this._seriesIndex
-            });
+                }, {
+                    userId: this._seriesUserId,
+                    specIndex: this._seriesIndex
+                });
             return data;
         }
         isSeriesDataEnable() {
@@ -66342,6 +66384,30 @@
         }
         updateScaleDomain() {
         }
+        _hasCollectedSeriesData() {
+            return this.collectData(0).length > 0;
+        }
+        _refreshVisibilityByData() {
+            const nextVisible = this._specVisible && (!this._hideWhenEmpty || this._hasCollectedSeriesData());
+            const changed = this._visible !== nextVisible;
+            this._visible = nextVisible;
+            if (this._axisMark || this._gridMark) {
+                this._syncComponentVisibility();
+            }
+            if (changed) {
+                this._forceLayout();
+            }
+            return changed;
+        }
+        _syncComponentVisibility() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            (_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.setVisible(this._visible);
+            (_b = this._gridMark) === null || _b === void 0 ? void 0 : _b.setVisible(this._visible && ((_c = this._spec.grid) === null || _c === void 0 ? void 0 : _c.visible) !== false);
+            (_g = (_f = (_e = (_d = this._axisMark) === null || _d === void 0 ? void 0 : _d.getComponent) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f.setAttributes) === null || _g === void 0 ? void 0 : _g.call(_f, { visibleAll: this._visible });
+            (_l = (_k = (_j = (_h = this._gridMark) === null || _h === void 0 ? void 0 : _h.getComponent) === null || _j === void 0 ? void 0 : _j.call(_h)) === null || _k === void 0 ? void 0 : _k.setAttributes) === null || _l === void 0 ? void 0 : _l.call(_k, {
+                visibleAll: this._visible && ((_m = this._spec.grid) === null || _m === void 0 ? void 0 : _m.visible) !== false
+            });
+        }
         _clearRawDomain() {
         }
         onLayoutEnd() {
@@ -66803,6 +66869,10 @@
                 return padding;
             };
             this._updateAxisLayout = () => {
+                if (!this._visible) {
+                    this._syncComponentVisibility();
+                    return;
+                }
                 const startPoint = this.getLayoutStartPoint();
                 const _a = this._getUpdateAttribute(false), { grid: updateGridAttrs } = _a, updateAxisAttrs = __rest$e(_a, ["grid"]);
                 const axisAttrs = mergeSpec({ x: startPoint.x, y: startPoint.y }, this._axisStyle, updateAxisAttrs);
@@ -66810,6 +66880,7 @@
                 if (this._gridMark) {
                     this._gridMark.setSimpleStyle(mergeSpec({ x: startPoint.x, y: startPoint.y }, this._getGridAttributes(), updateGridAttrs));
                 }
+                this._syncComponentVisibility();
             };
             this._fixAxisOnZero = () => {
                 const { onZero, visible } = this._spec.domainLine;
@@ -66976,7 +67047,7 @@
         setAttrFromSpec() {
             var _a;
             super.setAttrFromSpec();
-            if (this.visible) {
+            if (this._specVisible) {
                 const isX = isXAxis(this.getOrient());
                 if (isX) {
                     if (isUndefined$1(this._spec.maxHeight)) {
@@ -67306,7 +67377,7 @@
         }
         initEvent() {
             super.initEvent();
-            if (this.visible) {
+            if (this._specVisible) {
                 this.event.on(exports.ChartEvent.layoutEnd, this._updateAxisLayout);
                 this.event.on(exports.ChartEvent.layoutEnd, this._fixAxisOnZero);
                 this.event.on(exports.ChartEvent.layoutRectUpdate, () => {
@@ -67825,6 +67896,7 @@
             }
             this._updateNiceLabelFormatter(domain);
             this._domainAfterSpec = this._scale.domain();
+            this._refreshVisibilityByData();
             this.event.emit(exports.ChartEvent.scaleDomainUpdate, { model: this });
             this.event.emit(exports.ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
@@ -68223,6 +68295,7 @@
                 }
             }
             this.transformScaleDomain();
+            this._refreshVisibilityByData();
             this.event.emit(exports.ChartEvent.scaleDomainUpdate, { model: this });
             this.event.emit(exports.ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
@@ -78444,6 +78517,14 @@
             this._labelMark = null;
             this._labelLineMark = null;
             this._emptyArcMark = null;
+            this._pendingViewDataLabelUpdate = false;
+            this.flushViewDataLabelUpdate = () => {
+                if (!this._pendingViewDataLabelUpdate) {
+                    return;
+                }
+                this._pendingViewDataLabelUpdate = false;
+                this._viewDataLabel.getDataView().reRunAllTransform();
+            };
             this.dataToCentralPosition = (datum) => {
                 const angle = datum[ARC_MIDDLE_ANGLE];
                 if (isNil$1(angle)) {
@@ -78619,12 +78700,13 @@
             var _a;
             super.initEvent();
             (_a = this._viewDataLabel.getDataView()) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.viewDataLabelUpdate.bind(this));
+            this.event.on(exports.ChartEvent.afterRender, this.flushViewDataLabelUpdate);
         }
         initGroups() {
             return;
         }
         onLayoutEnd() {
-            this._viewDataLabel.getDataView().reRunAllTransform();
+            this._pendingViewDataLabelUpdate = true;
             this.onMarkPositionUpdate();
             super.onLayoutEnd();
         }
@@ -79028,7 +79110,7 @@
         }
         setAttrFromSpec() {
             super.setAttrFromSpec();
-            if (this.visible) {
+            if (this._specVisible) {
                 this._axisStyle = this._getAxisAttributes();
                 this._gridStyle = this._getGridAttributes();
             }
@@ -95554,6 +95636,20 @@
         return data;
     };
 
+    function transformHandlerText(handlerText) {
+        if (!handlerText) {
+            return handlerText;
+        }
+        const nextHandlerText = Object.assign({}, handlerText);
+        const handlerTextStyle = handlerText.style;
+        if (isFunction$1(handlerTextStyle)) {
+            nextHandlerText.style = (value, position, context) => transformToGraphic(handlerTextStyle(value, position, context));
+        }
+        else if (!isEmpty(handlerTextStyle)) {
+            nextHandlerText.style = transformToGraphic(handlerTextStyle);
+        }
+        return nextHandlerText;
+    }
     function getContinuousLegendAttributes(spec) {
         const _a = mergeSpec({}, spec), { title = {}, handler = {}, rail = {}, track = {}, startText, endText, handlerText, sizeBackground, background = {}, type, id, visible, orient, position, data, defaultSelected, field, filter, regionId, regionIndex, seriesIndex, seriesId, padding } = _a, restSpec = __rest$e(_a, ["title", "handler", "rail", "track", "startText", "endText", "handlerText", "sizeBackground", "background", "type", "id", "visible", "orient", "position", "data", "defaultSelected", "field", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
         const attrs = restSpec;
@@ -95581,7 +95677,7 @@
         }
         attrs.startText = transformComponentStyle(startText);
         attrs.endText = transformComponentStyle(endText);
-        attrs.handlerText = transformComponentStyle(handlerText);
+        attrs.handlerText = transformHandlerText(handlerText);
         if (!isEmpty(sizeBackground)) {
             attrs.sizeBackground = transformToGraphic(sizeBackground);
         }