@visactor/vrender-components 1.0.41 → 1.0.43-alpha.0

package/dist/index.es.js

@@ -12230,9 +12230,10 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
       }), 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();
   }
@@ -23641,6 +23642,7 @@ class LabelBase extends AnimateComponent {
             }
             const baseMark = this.getRelatedGraphic(label.attribute);
             let backgroundColor = baseMark.getAttributes(true).fill;
+            const backgroundOpacity = baseMark.getAttributes(true).fillOpacity;
             let foregroundColor = label.attribute.fill;
             if (isObject(backgroundColor) && backgroundColor.gradient) {
                 const firstStopColor = (_g = (_f = backgroundColor.stops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.color;
@@ -23659,10 +23661,21 @@ class LabelBase extends AnimateComponent {
                 if (label.attribute.lineWidth === 0 || label.attribute.strokeOpacity === 0) {
                     continue;
                 }
-                const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
-                stroke && label.setAttributes({ stroke });
+                if (interactInvertType === 'background') {
+                    label.setAttributes({ stroke: false });
+                }
+                else {
+                    const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
+                    stroke && label.setAttributes({ stroke });
+                }
             }
             else if (isIntersect && interactInvertType !== 'none') {
+                if (interactInvertType === 'background') {
+                    const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
+                    fill && label.setAttributes({ fill });
+                    label.setAttributes({ stroke: false, background: backgroundColor, backgroundOpacity });
+                    continue;
+                }
                 if (label.attribute.lineWidth === 0 || label.attribute.strokeOpacity === 0) {
                     continue;
                 }
@@ -23677,6 +23690,9 @@ class LabelBase extends AnimateComponent {
                 const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
                 stroke && label.setAttributes({ stroke });
             }
+            if (isInside === false && interactInvertType === 'background') {
+                label.setAttributes({ background: null });
+            }
         }
     }
     _canPlaceInside(textBound, shapeBound) {
@@ -25247,6 +25263,16 @@ const DEFAULT_HANDLER_ATTR_MAP = {
         strokeBoundsBuffer: 0
     }
 };
+const LAYOUT_LEVEL = {
+    background: 0,
+    preview: 1,
+    dragMask: 2,
+    selectedBackground: 3,
+    selectedPreview: 4,
+    handler: 5,
+    handlerText: 5,
+    handlerMask: 999
+};
 
 const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
     if (!textBounds) {
@@ -25386,10 +25412,10 @@ class DataZoomRenderer {
         const { position, width, height } = this._getLayoutAttrFromConfig();
         const { start, end } = this._getState();
         if (this._isHorizontal) {
-            this._dragMask = this._getContainer().createOrUpdateChild('dragMask', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height }, dragMaskStyle), 'rect');
+            this._dragMask = this._getContainer().createOrUpdateChild('dragMask', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, zIndex: LAYOUT_LEVEL.dragMask }, dragMaskStyle), 'rect');
         }
         else {
-            this._dragMask = this._getContainer().createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height }, dragMaskStyle), 'rect');
+            this._dragMask = this._getContainer().createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, zIndex: LAYOUT_LEVEL.dragMask }, dragMaskStyle), 'rect');
         }
         return { start, end };
     }
@@ -25399,7 +25425,7 @@ class DataZoomRenderer {
         const { position, width, height } = this._getLayoutAttrFromConfig();
         const group = this._getContainer();
         this._background = group.createOrUpdateChild('background', Object.assign(Object.assign({ x: position.x, y: position.y, width,
-            height, cursor: brushSelect ? 'crosshair' : 'auto' }, backgroundStyle), { pickable: zoomLock ? false : (_a = backgroundStyle.pickable) !== null && _a !== void 0 ? _a : true }), 'rect');
+            height, cursor: brushSelect ? 'crosshair' : 'auto', zIndex: LAYOUT_LEVEL.background }, backgroundStyle), { pickable: zoomLock ? false : ((_a = backgroundStyle.pickable) !== null && _a !== void 0 ? _a : true) }), 'rect');
     }
     _renderHandler() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
@@ -25412,34 +25438,34 @@ class DataZoomRenderer {
         if (this._isHorizontal) {
             if (middleHandlerStyle.visible) {
                 const middleHandlerBackgroundSize = ((_c = middleHandlerStyle.background) === null || _c === void 0 ? void 0 : _c.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign(Object.assign({ x: position.x + start * width, y: position.y - middleHandlerBackgroundSize, width: (end - start) * width, height: middleHandlerBackgroundSize }, (_d = middleHandlerStyle.background) === null || _d === void 0 ? void 0 : _d.style), { pickable: zoomLock ? false : (_g = (_f = (_e = middleHandlerStyle.background) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.pickable) !== null && _g !== void 0 ? _g : true }), 'rect');
-                this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign(Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - middleHandlerBackgroundSize / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_j = (_h = middleHandlerStyle.icon) === null || _h === void 0 ? void 0 : _h.symbolType) !== null && _j !== void 0 ? _j : 'square' }, middleHandlerStyle.icon), { pickable: zoomLock ? false : (_k = middleHandlerStyle.icon.pickable) !== null && _k !== void 0 ? _k : true }), 'symbol');
+                this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign(Object.assign({ x: position.x + start * width, y: position.y - middleHandlerBackgroundSize, width: (end - start) * width, height: middleHandlerBackgroundSize, zIndex: LAYOUT_LEVEL.handler }, (_d = middleHandlerStyle.background) === null || _d === void 0 ? void 0 : _d.style), { pickable: zoomLock ? false : ((_g = (_f = (_e = middleHandlerStyle.background) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.pickable) !== null && _g !== void 0 ? _g : true) }), 'rect');
+                this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign(Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - middleHandlerBackgroundSize / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_j = (_h = middleHandlerStyle.icon) === null || _h === void 0 ? void 0 : _h.symbolType) !== null && _j !== void 0 ? _j : 'square', zIndex: LAYOUT_LEVEL.handler }, middleHandlerStyle.icon), { pickable: zoomLock ? false : ((_k = middleHandlerStyle.icon.pickable) !== null && _k !== void 0 ? _k : true) }), 'symbol');
             }
-            this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_l = startHandlerStyle.symbolType) !== null && _l !== void 0 ? _l : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), { pickable: zoomLock ? false : (_m = startHandlerStyle.pickable) !== null && _m !== void 0 ? _m : true }), 'symbol');
-            this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_o = endHandlerStyle.symbolType) !== null && _o !== void 0 ? _o : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), { pickable: zoomLock ? false : (_p = endHandlerStyle.pickable) !== null && _p !== void 0 ? _p : true }), 'symbol');
+            this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_l = startHandlerStyle.symbolType) !== null && _l !== void 0 ? _l : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { zIndex: LAYOUT_LEVEL.handler }), startHandlerStyle), { pickable: zoomLock ? false : ((_m = startHandlerStyle.pickable) !== null && _m !== void 0 ? _m : true) }), 'symbol');
+            this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign(Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_o = endHandlerStyle.symbolType) !== null && _o !== void 0 ? _o : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { zIndex: LAYOUT_LEVEL.handler }), endHandlerStyle), { pickable: zoomLock ? false : ((_p = endHandlerStyle.pickable) !== null && _p !== void 0 ? _p : true) }), 'symbol');
             const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
             const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
             const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
             const endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
-            this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign(Object.assign({ x: position.x + start * width - startHandlerWidth / 2, y: position.y + height / 2 - startHandlerHeight / 2, width: startHandlerWidth, height: startHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { pickable: !zoomLock }), 'rect');
-            this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign(Object.assign({ x: position.x + end * width - endHandlerWidth / 2, y: position.y + height / 2 - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { pickable: !zoomLock }), 'rect');
+            this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign(Object.assign({ x: position.x + start * width - startHandlerWidth / 2, y: position.y + height / 2 - startHandlerHeight / 2, width: startHandlerWidth, height: startHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: LAYOUT_LEVEL.handlerMask }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { pickable: !zoomLock }), 'rect');
+            this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign(Object.assign({ x: position.x + end * width - endHandlerWidth / 2, y: position.y + height / 2 - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: LAYOUT_LEVEL.handlerMask }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { pickable: !zoomLock }), 'rect');
         }
         else {
             if (middleHandlerStyle.visible) {
                 const middleHandlerBackgroundSize = ((_q = middleHandlerStyle.background) === null || _q === void 0 ? void 0 : _q.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign(Object.assign({ x: orient === 'left' ? position.x - middleHandlerBackgroundSize : position.x + width, y: position.y + start * height, width: middleHandlerBackgroundSize, height: (end - start) * height }, (_r = middleHandlerStyle.background) === null || _r === void 0 ? void 0 : _r.style), { pickable: zoomLock ? false : (_u = (_t = (_s = middleHandlerStyle.background) === null || _s === void 0 ? void 0 : _s.style) === null || _t === void 0 ? void 0 : _t.pickable) !== null && _u !== void 0 ? _u : true }), 'rect');
+                this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign(Object.assign({ x: orient === 'left' ? position.x - middleHandlerBackgroundSize : position.x + width, y: position.y + start * height, width: middleHandlerBackgroundSize, height: (end - start) * height, zIndex: LAYOUT_LEVEL.handler }, (_r = middleHandlerStyle.background) === null || _r === void 0 ? void 0 : _r.style), { pickable: zoomLock ? false : ((_u = (_t = (_s = middleHandlerStyle.background) === null || _s === void 0 ? void 0 : _s.style) === null || _t === void 0 ? void 0 : _t.pickable) !== null && _u !== void 0 ? _u : true) }), 'rect');
                 this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign(Object.assign({ x: orient === 'left'
                         ? position.x - middleHandlerBackgroundSize / 2
-                        : position.x + width + middleHandlerBackgroundSize / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_w = (_v = middleHandlerStyle.icon) === null || _v === void 0 ? void 0 : _v.symbolType) !== null && _w !== void 0 ? _w : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle.icon), { pickable: zoomLock ? false : (_y = (_x = middleHandlerStyle.icon) === null || _x === void 0 ? void 0 : _x.pickable) !== null && _y !== void 0 ? _y : true }), 'symbol');
+                        : position.x + width + middleHandlerBackgroundSize / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_w = (_v = middleHandlerStyle.icon) === null || _v === void 0 ? void 0 : _v.symbolType) !== null && _w !== void 0 ? _w : 'square', strokeBoundsBuffer: 0, zIndex: LAYOUT_LEVEL.handler }, middleHandlerStyle.icon), { pickable: zoomLock ? false : ((_y = (_x = middleHandlerStyle.icon) === null || _x === void 0 ? void 0 : _x.pickable) !== null && _y !== void 0 ? _y : true) }), 'symbol');
             }
-            this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_z = startHandlerStyle.symbolType) !== null && _z !== void 0 ? _z : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), { pickable: zoomLock ? false : (_0 = startHandlerStyle.pickable) !== null && _0 !== void 0 ? _0 : true }), 'symbol');
-            this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_1 = endHandlerStyle.symbolType) !== null && _1 !== void 0 ? _1 : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), { pickable: zoomLock ? false : (_2 = endHandlerStyle.pickable) !== null && _2 !== void 0 ? _2 : true }), 'symbol');
+            this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_z = startHandlerStyle.symbolType) !== null && _z !== void 0 ? _z : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), { zIndex: LAYOUT_LEVEL.handler }), startHandlerStyle), { pickable: zoomLock ? false : ((_0 = startHandlerStyle.pickable) !== null && _0 !== void 0 ? _0 : true) }), 'symbol');
+            this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_1 = endHandlerStyle.symbolType) !== null && _1 !== void 0 ? _1 : 'square', zIndex: LAYOUT_LEVEL.handler }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), { pickable: zoomLock ? false : ((_2 = endHandlerStyle.pickable) !== null && _2 !== void 0 ? _2 : true) }), 'symbol');
             const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
             const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
             const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
             const endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
-            this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign(Object.assign({ x: position.x + width / 2 + startHandlerWidth / 2, y: position.y + start * height - startHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.vertical), { pickable: !zoomLock }), 'rect');
-            this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign(Object.assign({ x: position.x + width / 2 + endHandlerWidth / 2, y: position.y + end * height - endHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.vertical), { pickable: !zoomLock }), 'rect');
+            this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign(Object.assign({ x: position.x + width / 2 + startHandlerWidth / 2, y: position.y + start * height - startHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: LAYOUT_LEVEL.handlerMask }, DEFAULT_HANDLER_ATTR_MAP.vertical), { pickable: !zoomLock }), 'rect');
+            this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign(Object.assign({ x: position.x + width / 2 + endHandlerWidth / 2, y: position.y + end * height - endHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: LAYOUT_LEVEL.handlerMask }, DEFAULT_HANDLER_ATTR_MAP.vertical), { pickable: !zoomLock }), 'rect');
         }
     }
     _renderSelectedBackground() {
@@ -25449,15 +25475,15 @@ class DataZoomRenderer {
         const { position, width, height } = this._getLayoutAttrFromConfig();
         const group = this._getContainer();
         if (this._isHorizontal) {
-            this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign(Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), { pickable: zoomLock ? false : (_a = selectedBackgroundChartStyle.pickable) !== null && _a !== void 0 ? _a : true }), 'rect');
+            this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign(Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move', zIndex: LAYOUT_LEVEL.selectedBackground }, selectedBackgroundStyle), { pickable: zoomLock ? false : ((_a = selectedBackgroundChartStyle.pickable) !== null && _a !== void 0 ? _a : true) }), 'rect');
         }
         else {
-            this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign(Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), { pickable: zoomLock ? false : (_b = selectedBackgroundStyle.pickable) !== null && _b !== void 0 ? _b : true }), 'rect');
+            this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign(Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move', zIndex: LAYOUT_LEVEL.selectedBackground }, selectedBackgroundStyle), { pickable: zoomLock ? false : ((_b = selectedBackgroundStyle.pickable) !== null && _b !== void 0 ? _b : true) }), 'rect');
         }
     }
     _setPreviewAttributes(type, group) {
         if (!this._previewGroup) {
-            this._previewGroup = group.createOrUpdateChild('previewGroup', { pickable: false }, 'group');
+            this._previewGroup = group.createOrUpdateChild('previewGroup', { pickable: false, zIndex: LAYOUT_LEVEL.preview }, 'group');
         }
         if (type === 'line') {
             this._previewLine = this._previewGroup.createOrUpdateChild('previewLine', {}, 'line');
@@ -25473,7 +25499,7 @@ class DataZoomRenderer {
     }
     _setSelectedPreviewClipAttributes(type, group) {
         if (!this._selectedPreviewGroupClip) {
-            this._selectedPreviewGroupClip = group.createOrUpdateChild('selectedPreviewGroupClip', { pickable: false }, 'group');
+            this._selectedPreviewGroupClip = group.createOrUpdateChild('selectedPreviewGroupClip', { pickable: false, zIndex: LAYOUT_LEVEL.selectedPreview }, 'group');
             this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild('selectedPreviewGroup', {}, 'group');
         }
         const { start, end } = this._getState();
@@ -34970,6 +34996,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.0.41";
+const version = "1.0.43-alpha.0";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/data-zoom/config.d.ts

@@ -114,3 +114,13 @@ export declare const DEFAULT_HANDLER_ATTR_MAP: {
         strokeBoundsBuffer: number;
     };
 };
+export declare const LAYOUT_LEVEL: {
+    background: number;
+    preview: number;
+    dragMask: number;
+    selectedBackground: number;
+    selectedPreview: number;
+    handler: number;
+    handlerText: number;
+    handlerMask: number;
+};

package/es/data-zoom/config.js

@@ -116,4 +116,15 @@ export const DEFAULT_HANDLER_ATTR_MAP = {
         strokeBoundsBuffer: 0
     }
 };
+
+export const LAYOUT_LEVEL = {
+    background: 0,
+    preview: 1,
+    dragMask: 2,
+    selectedBackground: 3,
+    selectedPreview: 4,
+    handler: 5,
+    handlerText: 5,
+    handlerMask: 999
+};
 //# sourceMappingURL=config.js.map

package/es/data-zoom/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":"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","file":"config.js","sourcesContent":["export const DEFAULT_HANDLER_PATH =\n  // eslint-disable-next-line max-len\n  'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z';\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  zoomLock: false,\n  minSpan: 0,\n  maxSpan: 1,\n  delayType: 'throttle',\n  delayTime: 0,\n  realTime: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    triggerMinSize: 0,\n    symbolType: DEFAULT_HANDLER_PATH,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    triggerMinSize: 0,\n    symbolType: DEFAULT_HANDLER_PATH,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n\nexport const DEFAULT_HANDLER_ATTR_MAP = {\n  horizontal: {\n    angle: 0,\n    strokeBoundsBuffer: 0,\n    boundsPadding: 2,\n    pickMode: 'imprecise',\n    cursor: 'ew-resize'\n  },\n  vertical: {\n    angle: 90 * (Math.PI / 180),\n    cursor: 'ns-resize',\n    boundsPadding: 2,\n    pickMode: 'imprecise',\n    strokeBoundsBuffer: 0\n  }\n};\n"]}
+{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":"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","file":"config.js","sourcesContent":["export const DEFAULT_HANDLER_PATH =\n  // eslint-disable-next-line max-len\n  'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z';\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  zoomLock: false,\n  minSpan: 0,\n  maxSpan: 1,\n  delayType: 'throttle',\n  delayTime: 0,\n  realTime: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    triggerMinSize: 0,\n    symbolType: DEFAULT_HANDLER_PATH,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    triggerMinSize: 0,\n    symbolType: DEFAULT_HANDLER_PATH,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n\nexport const DEFAULT_HANDLER_ATTR_MAP = {\n  horizontal: {\n    angle: 0,\n    strokeBoundsBuffer: 0,\n    boundsPadding: 2,\n    pickMode: 'imprecise',\n    cursor: 'ew-resize'\n  },\n  vertical: {\n    angle: 90 * (Math.PI / 180),\n    cursor: 'ns-resize',\n    boundsPadding: 2,\n    pickMode: 'imprecise',\n    strokeBoundsBuffer: 0\n  }\n};\n\nexport const LAYOUT_LEVEL = {\n  background: 0, // 背景\n  preview: 1, // 背景图表\n  dragMask: 2, // 背景选框\n  selectedBackground: 3, // 选中背景\n  selectedPreview: 4, // 选中背景图表\n  handler: 5, // 手柄\n  handlerText: 5, // 文字\n  handlerMask: 999 // 热区\n};\n"]}

package/es/data-zoom/renderer.js

@@ -14,7 +14,7 @@ import { Bounds, isFunction, merge } from "@visactor/vutils";
 
 import { Tag } from "../tag";
 
-import { DEFAULT_HANDLER_ATTR_MAP } from "./config";
+import { DEFAULT_HANDLER_ATTR_MAP, LAYOUT_LEVEL } from "./config";
 
 import { isTextOverflow } from "./utils";
 
@@ -112,12 +112,14 @@ export class DataZoomRenderer {
             x: position.x + start * width,
             y: position.y,
             width: (end - start) * width,
-            height: height
+            height: height,
+            zIndex: LAYOUT_LEVEL.dragMask
         }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
             x: position.x,
             y: position.y + start * height,
             width: width,
-            height: (end - start) * height
+            height: (end - start) * height,
+            zIndex: LAYOUT_LEVEL.dragMask
         }, dragMaskStyle), "rect"), {
             start: start,
             end: end
@@ -131,7 +133,8 @@ export class DataZoomRenderer {
             y: position.y,
             width: width,
             height: height,
-            cursor: brushSelect ? "crosshair" : "auto"
+            cursor: brushSelect ? "crosshair" : "auto",
+            zIndex: LAYOUT_LEVEL.background
         }, backgroundStyle), {
             pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
         }), "rect");
@@ -146,7 +149,8 @@ export class DataZoomRenderer {
                     x: position.x + start * width,
                     y: position.y - middleHandlerBackgroundSize,
                     width: (end - start) * width,
-                    height: middleHandlerBackgroundSize
+                    height: middleHandlerBackgroundSize,
+                    zIndex: LAYOUT_LEVEL.handler
                 }, null === (_d = middleHandlerStyle.background) || void 0 === _d ? void 0 : _d.style), {
                     pickable: !zoomLock && (null === (_g = null === (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.pickable) || void 0 === _g || _g)
                 }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
@@ -154,24 +158,29 @@ export class DataZoomRenderer {
                     y: position.y - middleHandlerBackgroundSize / 2,
                     strokeBoundsBuffer: 0,
                     angle: 0,
-                    symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
+                    symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square",
+                    zIndex: LAYOUT_LEVEL.handler
                 }, middleHandlerStyle.icon), {
                     pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
                 }), "symbol");
             }
-            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
                 x: position.x + start * width,
                 y: position.y + height / 2,
                 size: height,
                 symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
+            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+                zIndex: LAYOUT_LEVEL.handler
+            }), startHandlerStyle), {
                 pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-            }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
+            }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
                 x: position.x + end * width,
                 y: position.y + height / 2,
                 size: height,
                 symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
+            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+                zIndex: LAYOUT_LEVEL.handler
+            }), endHandlerStyle), {
                 pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
             }), "symbol");
             const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize), startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize), endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize), endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
@@ -182,7 +191,7 @@ export class DataZoomRenderer {
                 height: startHandlerHeight,
                 fill: "white",
                 fillOpacity: 0,
-                zIndex: 999
+                zIndex: LAYOUT_LEVEL.handlerMask
             }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
                 pickable: !zoomLock
             }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -192,7 +201,7 @@ export class DataZoomRenderer {
                 height: endHandlerHeight,
                 fill: "white",
                 fillOpacity: 0,
-                zIndex: 999
+                zIndex: LAYOUT_LEVEL.handlerMask
             }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
                 pickable: !zoomLock
             }), "rect");
@@ -203,7 +212,8 @@ export class DataZoomRenderer {
                     x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
                     y: position.y + start * height,
                     width: middleHandlerBackgroundSize,
-                    height: (end - start) * height
+                    height: (end - start) * height,
+                    zIndex: LAYOUT_LEVEL.handler
                 }, null === (_r = middleHandlerStyle.background) || void 0 === _r ? void 0 : _r.style), {
                     pickable: !zoomLock && (null === (_u = null === (_t = null === (_s = middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.style) || void 0 === _t ? void 0 : _t.pickable) || void 0 === _u || _u)
                 }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
@@ -211,23 +221,27 @@ export class DataZoomRenderer {
                     y: position.y + (start + end) / 2 * height,
                     angle: Math.PI / 180 * 90,
                     symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
-                    strokeBoundsBuffer: 0
+                    strokeBoundsBuffer: 0,
+                    zIndex: LAYOUT_LEVEL.handler
                 }, middleHandlerStyle.icon), {
                     pickable: !zoomLock && (null === (_y = null === (_x = middleHandlerStyle.icon) || void 0 === _x ? void 0 : _x.pickable) || void 0 === _y || _y)
                 }), "symbol");
             }
-            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
                 x: position.x + width / 2,
                 y: position.y + start * height,
                 size: width,
                 symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
+            }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+                zIndex: LAYOUT_LEVEL.handler
+            }), startHandlerStyle), {
                 pickable: !zoomLock && (null === (_0 = startHandlerStyle.pickable) || void 0 === _0 || _0)
             }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
                 x: position.x + width / 2,
                 y: position.y + end * height,
                 size: width,
-                symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
+                symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square",
+                zIndex: LAYOUT_LEVEL.handler
             }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
                 pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
             }), "symbol");
@@ -239,7 +253,7 @@ export class DataZoomRenderer {
                 height: endHandlerWidth,
                 fill: "white",
                 fillOpacity: 0,
-                zIndex: 999
+                zIndex: LAYOUT_LEVEL.handlerMask
             }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
                 pickable: !zoomLock
             }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -249,7 +263,7 @@ export class DataZoomRenderer {
                 height: endHandlerWidth,
                 fill: "white",
                 fillOpacity: 0,
-                zIndex: 999
+                zIndex: LAYOUT_LEVEL.handlerMask
             }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
                 pickable: !zoomLock
             }), "rect");
@@ -263,7 +277,8 @@ export class DataZoomRenderer {
             y: position.y,
             width: (end - start) * width,
             height: height,
-            cursor: brushSelect ? "crosshair" : "move"
+            cursor: brushSelect ? "crosshair" : "move",
+            zIndex: LAYOUT_LEVEL.selectedBackground
         }, selectedBackgroundStyle), {
             pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
         }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
@@ -271,14 +286,16 @@ export class DataZoomRenderer {
             y: position.y + start * height,
             width: width,
             height: (end - start) * height,
-            cursor: brushSelect ? "crosshair" : "move"
+            cursor: brushSelect ? "crosshair" : "move",
+            zIndex: LAYOUT_LEVEL.selectedBackground
         }, selectedBackgroundStyle), {
             pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
         }), "rect");
     }
     _setPreviewAttributes(type, group) {
         this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-            pickable: !1
+            pickable: !1,
+            zIndex: LAYOUT_LEVEL.preview
         }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
             curveType: "basis"
         }, "area");
@@ -295,7 +312,8 @@ export class DataZoomRenderer {
     }
     _setSelectedPreviewClipAttributes(type, group) {
         this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-            pickable: !1
+            pickable: !1,
+            zIndex: LAYOUT_LEVEL.selectedPreview
         }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
         const {start: start, end: end} = this._getState(), {position: position, width: width, height: height} = this._getLayoutAttrFromConfig();
         this._selectedPreviewGroupClip.setAttributes({