@visactor/vrender-components 1.0.18 → 1.0.19

package/dist/index.es.js

@@ -499,14 +499,20 @@ class ContributionProviderCache {
   }
 }
 function bindContributionProvider(bind, id) {
-  bind(ContributionProvider).toDynamicValue(({
-    container: container
-  }) => new ContributionProviderCache(id, container)).inSingletonScope().whenTargetNamed(id);
+  bind(ContributionProvider).toDynamicValue(_ref => {
+    let {
+      container: container
+    } = _ref;
+    return new ContributionProviderCache(id, container);
+  }).inSingletonScope().whenTargetNamed(id);
 }
 function bindContributionProviderNoSingletonScope(bind, id) {
-  bind(ContributionProvider).toDynamicValue(({
-    container: container
-  }) => new ContributionProviderCache(id, container)).whenTargetNamed(id);
+  bind(ContributionProvider).toDynamicValue(_ref2 => {
+    let {
+      container: container
+    } = _ref2;
+    return new ContributionProviderCache(id, container);
+  }).whenTargetNamed(id);
 }
 class ContributionStore {
   static getStore(id) {
@@ -576,7 +582,10 @@ class Hook {
 }
 
 class SyncHook extends Hook {
-  call(...args) {
+  call() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
     this.taps.map(t => t.fn).forEach(cb => cb(...args));
   }
 }
@@ -860,13 +869,16 @@ let DefaultGlobal = class extends EventListenerManager {
   updateDom(dom, params) {
     return this._env || this.setEnv("browser"), this.envContribution.updateDom(dom, params);
   }
-  getElementTop(dom, baseWindow = !1) {
+  getElementTop(dom) {
+    let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     return this._env || this.setEnv("browser"), this.envContribution.getElementTop(dom, baseWindow);
   }
-  getElementLeft(dom, baseWindow = !1) {
+  getElementLeft(dom) {
+    let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     return this._env || this.setEnv("browser"), this.envContribution.getElementLeft(dom, baseWindow);
   }
-  getElementTopLeft(dom, baseWindow = !1) {
+  getElementTopLeft(dom) {
+    let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
   }
   isMacOS() {
@@ -951,7 +963,7 @@ class BoundsContext {
   clear() {
     this.bounds.clear();
   }
-  release(...params) {}
+  release() {}
 }
 
 class CurvePath {
@@ -1126,7 +1138,8 @@ function drawArc(context, x, y, coords) {
     context.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5]);
   }
 }
-const addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, counterclockwise = !1) => {
+const addArcToBezierPath = function (bezierPath, startAngle, endAngle, cx, cy, rx, ry) {
+  let counterclockwise = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : !1;
   const PI2 = 2 * Math.PI,
     sAngle = (startAngle % PI2 + PI2) % PI2;
   let deltaAngle,
@@ -1154,7 +1167,12 @@ const addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, co
 };
 
 const commandFuncs = [(command, context, x, y, sx, sy, z) => context.arc(command[1] * sx + x, command[2] * sy + y, command[3] * (sx + sy) / 2, command[4], command[5], command[6], z), (command, context, x, y, sx, sy, z) => context.arcTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * (sx + sy) / 2, z), (command, context, x, y, sx, sy, z) => context.bezierCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * sx + x, command[6] * sy + y, z), (command, context, x, y) => context.closePath(), (command, context, x, y, sx, sy) => context.ellipse(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, command[5], command[6], command[7], command[8]), (command, context, x, y, sx, sy, z) => context.lineTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.moveTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.quadraticCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, z), (command, context, x, y, sx, sy, z) => context.rect(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, z)];
-function renderCommandList(commandList, context, x = 0, y = 0, sx = 1, sy = 1, z) {
+function renderCommandList(commandList, context) {
+  let x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let y = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let sx = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let sy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
+  let z = arguments.length > 6 ? arguments[6] : undefined;
   for (let i = 0; i < commandList.length; i++) {
     const command = commandList[i];
     commandFuncs[command[0]](command, context, x, y, sx, sy, z);
@@ -1395,7 +1413,7 @@ class ReflectSegContext extends SegContext {
   }
 }
 
-function genCurveSegments(path, points, step = 1) {
+function genCurveSegments(path, points) {
   let defined0 = !1;
   for (let i = 0, n = points.length; i <= n; i++) i >= n === defined0 && ((defined0 = !defined0) ? path.lineStart() : path.lineEnd()), defined0 && path.point(points[i]);
 }
@@ -1438,7 +1456,8 @@ class Linear {
     return this.context.tryUpdateLength();
   }
 }
-function genLinearSegments(points, params = {}) {
+function genLinearSegments(points) {
+  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1448,7 +1467,7 @@ function genLinearSegments(points, params = {}) {
   return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
 }
 function genLinearTypeSegments(path, points) {
-  return genCurveSegments(path, points, 1);
+  return genCurveSegments(path, points);
 }
 
 function point$3(curveClass, x, y, defined, p) {
@@ -1491,9 +1510,10 @@ class Basis {
   }
 }
 function genBasisTypeSegments(path, points) {
-  return genCurveSegments(path, points, 2);
+  return genCurveSegments(path, points);
 }
-function genBasisSegments(points, params = {}) {
+function genBasisSegments(points) {
+  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1586,9 +1606,10 @@ class MonotoneY extends MonotoneX {
   }
 }
 function genMonotoneXTypeSegments(path, points) {
-  return genCurveSegments(path, points, 2);
+  return genCurveSegments(path, points);
 }
-function genMonotoneXSegments(points, params = {}) {
+function genMonotoneXSegments(points) {
+  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1599,9 +1620,10 @@ function genMonotoneXSegments(points, params = {}) {
   return genMonotoneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
 }
 function genMonotoneYTypeSegments(path, points) {
-  return genCurveSegments(path, points, 2);
+  return genCurveSegments(path, points);
 }
-function genMonotoneYSegments(points, params = {}) {
+function genMonotoneYSegments(points) {
+  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1613,7 +1635,9 @@ function genMonotoneYSegments(points, params = {}) {
 }
 
 let Step$1 = class Step {
-  constructor(context, t = .5, startPoint) {
+  constructor(context) {
+    let t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
+    let startPoint = arguments.length > 2 ? arguments[2] : undefined;
     this.context = context, this._t = t, this.startPoint = startPoint;
   }
   areaStart() {
@@ -1654,7 +1678,8 @@ class StepClosed extends Step$1 {
     this.context.closePath();
   }
 }
-function genStepSegments(points, t, params = {}) {
+function genStepSegments(points, t) {
+  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1664,9 +1689,10 @@ function genStepSegments(points, t, params = {}) {
   return genStepTypeSegments(new Step$1(segContext, t, startPoint), points), segContext;
 }
 function genStepTypeSegments(path, points) {
-  return genCurveSegments(path, points, 1);
+  return genCurveSegments(path, points);
 }
-function genStepClosedSegments(points, t, params = {}) {
+function genStepClosedSegments(points, t) {
+  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1681,7 +1707,8 @@ class LinearClosed extends Linear {
     this.context.closePath();
   }
 }
-function genLinearClosedSegments(points, params = {}) {
+function genLinearClosedSegments(points) {
+  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     direction: direction,
     startPoint: startPoint
@@ -1691,7 +1718,7 @@ function genLinearClosedSegments(points, params = {}) {
   return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
 }
 function genLinearClosedTypeSegments(path, points) {
-  return genCurveSegments(path, points, 1);
+  return genCurveSegments(path, points);
 }
 
 function point$1(curveClass, x, y, defined, p) {
@@ -1712,7 +1739,9 @@ function point$1(curveClass, x, y, defined, p) {
   curveClass.context.bezierCurveTo(x1, y1, x2, y2, curveClass._x2, curveClass._y2, defined, curveClass.lastPoint1);
 }
 class CatmullRom {
-  constructor(context, alpha = .5, startPoint) {
+  constructor(context) {
+    let alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
+    let startPoint = arguments.length > 2 ? arguments[2] : undefined;
     this.context = context, this.startPoint = startPoint, this._alpha = alpha;
   }
   areaStart() {
@@ -1766,7 +1795,8 @@ class CatmullRom {
   }
 }
 function commonGenCatmullRomSegments(type, cons) {
-  return function (points, alpha, params = {}) {
+  return function (points, alpha) {
+    let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     const {
       direction: direction,
       startPoint: startPoint
@@ -1775,13 +1805,15 @@ function commonGenCatmullRomSegments(type, cons) {
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
     const segContext = genSegContext(type, direction, points),
       gatmullRom = new cons(segContext, alpha, startPoint);
-    return genCurveSegments(gatmullRom, points, 2), segContext;
+    return genCurveSegments(gatmullRom, points), segContext;
   };
 }
 const genCatmullRomSegments = commonGenCatmullRomSegments("catmullRom", CatmullRom);
 
 class CatmullRomClosed {
-  constructor(context, alpha = .5, startPoint) {
+  constructor(context) {
+    let alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
+    let startPoint = arguments.length > 2 ? arguments[2] : undefined;
     this.context = context, this.startPoint = startPoint, this._alpha = alpha;
   }
   areaStart() {
@@ -2091,7 +2123,11 @@ class CustomPath2D extends CurvePath {
     cmd[1] = cmd[1] * sx + x, cmd[2] = cmd[2] * sy + y, cmd[3] = cmd[3] * (sx + sy) / 2;
   }
   closePathTransform() {}
-  _runCommandStrList(commandStrList, l = 0, t = 0, sX = 1, sY = 1) {
+  _runCommandStrList(commandStrList) {
+    let l = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let sX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    let sY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
     let current,
       tempX,
       tempY,
@@ -2165,7 +2201,11 @@ class CustomPath2D extends CurvePath {
       previous = current;
     }
   }
-  _runCommandList(commandList, l = 0, t = 0, sX = 1, sY = 1) {
+  _runCommandList(commandList) {
+    let l = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let sX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    let sY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
     if (0 !== l || 0 !== t || 1 !== sX || 1 !== sY) for (let i = 0, len = commandList.length; i < len; ++i) {
       const current = commandList[i].slice();
       switch (current[0]) {
@@ -2837,7 +2877,9 @@ function getScaledStroke(context, width, dpr) {
     scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
   return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
 }
-function createColor(context, c, params, offsetX = 0, offsetY = 0) {
+function createColor(context, c, params) {
+  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   var _a, _b, _c, _d;
   if (!c || !0 === c) return "black";
   let result, color;
@@ -2976,7 +3018,8 @@ function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter)
   }
   return needTestLetter && (index = testLetter(desc, index)), index;
 }
-function testLetter(string, index, negativeWrongMatch = !1) {
+function testLetter(string, index) {
+  let negativeWrongMatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
   let i = index;
   for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return negativeWrongMatch ? testLetter2(string, index) : index;
   return i;
@@ -2986,7 +3029,8 @@ function testLetter2(string, index) {
   for (; regLetter.test(string[i + 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i++, i >= string.length) return i;
   return i + 1;
 }
-function measureTextCanvas(text, character, mode = "actual") {
+function measureTextCanvas(text, character) {
+  let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
   var _a;
   if ("" === text) return {
     ascent: 0,
@@ -3059,9 +3103,10 @@ let ATextMeasure = class {
     }
     return metrics;
   }
-  estimate(text, {
-    fontSize = DefaultTextAttribute.fontSize
-  }) {
+  estimate(text, _ref) {
+    let {
+      fontSize = DefaultTextAttribute.fontSize
+    } = _ref;
     let eCharLen = 0,
       cCharLen = 0;
     for (let i = 0; i < text.length; i++) text.charCodeAt(i) < 128 ? eCharLen++ : cCharLen++;
@@ -3372,7 +3417,8 @@ let ATextMeasure = class {
       });
     });
   }
-  clipTextWithSuffix(text, options, width, suffix, wordBreak, position, forceSuffix = !1) {
+  clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
+    let forceSuffix = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !1;
     if ("" === suffix) return this.clipText(text, options, width, wordBreak);
     if (0 === text.length) return {
       str: "",
@@ -3818,7 +3864,7 @@ class DefaultCanvasAllocate {
   get length() {
     return this.pools.length;
   }
-  release(...params) {
+  release() {
     this.pools = [];
   }
 }
@@ -4018,7 +4064,8 @@ let DefaultGraphicUtil = class {
   bindTextMeasure(tm) {
     this._textMeasure && "DefaultTextMeasureContribution" !== tm.id || (this._textMeasure = tm), this._textMeasureMap.has(tm.id) || this._textMeasureMap.set(tm.id, tm);
   }
-  measureText(text, tc, method = "native") {
+  measureText(text, tc) {
+    let method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "native";
     var _a;
     this.configure(this.global, this.global.env);
     const m = this.global.measureTextMethod;
@@ -4201,7 +4248,8 @@ class Theme {
     for (; group.parent;) if ((group = group.parent).theme) return group;
     return null;
   }
-  applyTheme(group, pt, force = !1) {
+  applyTheme(group, pt) {
+    let force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
     if (this.dirty) {
       const parentGroup = this.getParentWithTheme(group);
       if (parentGroup) {
@@ -4300,7 +4348,8 @@ class Node extends EventEmitter {
   constructor() {
     super(), this._uid = Generator.GenAutoIncrementId(), this._firstChild = null, this._lastChild = null, this.parent = null, this._count = 1;
   }
-  forEachChildren(cb, reverse = !1) {
+  forEachChildren(cb) {
+    let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     if (reverse) {
       let child = this._lastChild,
         i = 0;
@@ -4317,7 +4366,8 @@ class Node extends EventEmitter {
       }
     }
   }
-  forEachChildrenAsync(cb, reverse = !1) {
+  forEachChildrenAsync(cb) {
+    let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     return __awaiter$3(this, void 0, void 0, function* () {
       if (reverse) {
         let child = this._lastChild,
@@ -4341,12 +4391,13 @@ class Node extends EventEmitter {
   forEach(cb) {
     return this.forEachChildren(cb);
   }
-  appendChild(node, highPerformance = !0) {
+  appendChild(node) {
+    let highPerformance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     if (this._uid === node._uid) return null;
     if (!highPerformance && node.isAncestorsOf(this)) throw new Error("【Node::appendChild】不能将父辈元素append为子元素");
     return node.parent && node.parent.removeChild(node), node.parent = this, this._lastChild ? (this._lastChild._next = node, node._prev = this._lastChild, this._lastChild = node) : (this._firstChild = this._lastChild = node, node._prev = node._next = null), this._idMap || (this._idMap = new Map()), this._idMap.set(node._uid, node), this.setCount(node.count), this._structEdit = !0, node;
   }
-  appendChildArrHighPerformance(nodes, replace = !1) {
+  appendChildArrHighPerformance(nodes) {
     return console.error("暂不支持该函数"), nodes;
   }
   insertBefore(newNode, referenceNode) {
@@ -4414,7 +4465,8 @@ class Node extends EventEmitter {
   replaceChild(newChild, oldChild) {
     throw new Error("暂不支持");
   }
-  find(callback, deep = !1) {
+  find(callback) {
+    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     let target = null;
     return this.forEachChildren((node, index) => !(node === this || !callback(node, index)) && (target = node, !0)), deep && this.forEachChildren(child => {
       if (child.isContainer) {
@@ -4424,7 +4476,8 @@ class Node extends EventEmitter {
       return !1;
     }), target;
   }
-  findAll(callback, deep = !1) {
+  findAll(callback) {
+    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     let nodes = [];
     return this.forEachChildren((node, index) => {
       node !== this && callback(node, index) && nodes.push(node);
@@ -4453,7 +4506,8 @@ class Node extends EventEmitter {
   getElementsByType(type) {
     return this.findAll(node => node.type === type, !0);
   }
-  getChildByName(name, deep = !1) {
+  getChildByName(name) {
+    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     return this.find(node => node.name === name, deep);
   }
   getChildAt(idx) {
@@ -4572,7 +4626,10 @@ class Node extends EventEmitter {
   removeAllListeners() {
     return this.removeAllEventListeners();
   }
-  dispatchEvent(event, ...args) {
+  dispatchEvent(event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
     return super.emit(event.type, event, ...args), !event.defaultPrevented;
   }
   emit(event, data) {
@@ -4967,7 +5024,8 @@ class SquareSymbol extends BaseSymbol {
 }
 var square$1 = new SquareSymbol();
 
-function trianglUpOffset(ctx, r, x, y, offset = 0) {
+function trianglUpOffset(ctx, r, x, y) {
+  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   return ctx.moveTo(x + r + 2 * offset, r + y + offset), ctx.lineTo(x - r - 2 * offset, r + y + offset), ctx.lineTo(x, y - r - 2 * offset), ctx.closePath(), !0;
 }
 class TriangleUpSymbol extends BaseSymbol {
@@ -5113,7 +5171,8 @@ class TriangleLeftSymbol extends BaseSymbol {
 }
 var triangleLeft = new TriangleLeftSymbol();
 
-function trianglRightOffset(ctx, r, x, y, offset = 0) {
+function trianglRightOffset(ctx, r, x, y) {
+  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   return ctx.moveTo(x - r - offset, r + y + 2 * offset), ctx.lineTo(r + x + 2 * offset, y), ctx.lineTo(x - r - offset, y - r - 2 * offset), ctx.closePath(), !0;
 }
 class TriangleRightSymbol extends BaseSymbol {
@@ -5129,7 +5188,8 @@ class TriangleRightSymbol extends BaseSymbol {
 }
 var triangleRight = new TriangleRightSymbol();
 
-function trianglDownOffset(ctx, r, x, y, offset = 0) {
+function trianglDownOffset(ctx, r, x, y) {
+  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   return ctx.moveTo(x - r - 2 * offset, y - r - offset), ctx.lineTo(x + r + 2 * offset, y - r - offset), ctx.lineTo(x, y + r + 2 * offset), ctx.closePath(), !0;
 }
 class TriangleDownSymbol extends BaseSymbol {
@@ -5346,7 +5406,8 @@ var rect = new RectSymbol();
 
 const tempBounds = new AABBBounds();
 class CustomSymbolClass {
-  constructor(type, path, isSvg = !1) {
+  constructor(type, path) {
+    let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
     this.pathStr = "", this.type = type, isArray(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
   }
   drawOffset(ctx, size, x, y, offset, z, cb) {
@@ -5368,9 +5429,10 @@ class CustomSymbolClass {
   bounds(size, bounds) {
     if (size = this.parseSize(size), this.isSvg) {
       if (!this.svgCache) return;
-      return bounds.clear(), void this.svgCache.forEach(({
-        path: path
-      }) => {
+      return bounds.clear(), void this.svgCache.forEach(_ref => {
+        let {
+          path: path
+        } = _ref;
         tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
       });
     }
@@ -5426,7 +5488,8 @@ function findClosingIndex(xmlData, str, i, errMsg) {
   if (-1 === closingIndex) throw new Error(errMsg);
   return closingIndex + str.length - 1;
 }
-function tagExpWithClosingIndex(xmlData, i, closingChar = ">") {
+function tagExpWithClosingIndex(xmlData, i) {
+  let closingChar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ">";
   let attrBoundary,
     tagExp = "";
   for (let index = i; index < xmlData.length; index++) {
@@ -5444,7 +5507,8 @@ function tagExpWithClosingIndex(xmlData, i, closingChar = ">") {
     tagExp += ch;
   }
 }
-function readTagExp(xmlData, i, removeNSPrefix, closingChar = ">") {
+function readTagExp(xmlData, i, removeNSPrefix) {
+  let closingChar = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ">";
   const result = tagExpWithClosingIndex(xmlData, i + 1, closingChar);
   if (!result) return;
   let tagExp = result.data;
@@ -5606,7 +5670,8 @@ undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator)
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-function boundStroke(bounds, halfW, miter, pad = 0) {
+function boundStroke(bounds, halfW, miter) {
+  let pad = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   return bounds.expand(halfW + (pad / 2 + (miter ? miterAdjustment(miter, halfW) : 0))), bounds;
 }
 function miterAdjustment(miter, strokeWidth) {
@@ -5791,7 +5856,7 @@ class DefaultMatrixAllocate {
   get length() {
     return this.pools.length;
   }
-  release(...params) {
+  release() {
     this.pools = [];
   }
 }
@@ -5819,7 +5884,7 @@ class DefaultMat4Allocate {
   get length() {
     return this.pools.length;
   }
-  release(...params) {
+  release() {
     this.pools = [];
   }
 }
@@ -5854,7 +5919,8 @@ let EmptyContext2d = class {
   getContext() {
     throw new Error("不支持getContext");
   }
-  setTransformForCurrent(force = !1) {
+  setTransformForCurrent() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     !force && this.applyedMatrix.equalToMatrix(this.matrix) || (this.applyedMatrix = this.cloneMatrix(this.matrix));
   }
   get currentMatrix() {
@@ -5875,7 +5941,8 @@ let EmptyContext2d = class {
   highPerformanceRestore() {
     this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop());
   }
-  rotate(rad, setTransform = !0) {
+  rotate(rad) {
+    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     this.matrix.rotate(rad), setTransform && this.setTransformForCurrent();
   }
   save() {
@@ -5886,41 +5953,55 @@ let EmptyContext2d = class {
     const matrix = this.cloneMatrix(this.matrix);
     this.stack.push(matrix);
   }
-  scale(sx, sy, setTransform = !0) {
+  scale(sx, sy) {
+    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
     this.matrix.scale(sx, sy), setTransform && this.setTransformForCurrent();
   }
-  setScale(sx, sy, setTransform = !0) {
+  setScale(sx, sy) {
+    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
     this.matrix.setScale(sx, sy), setTransform && this.setTransformForCurrent();
   }
-  scalePoint(sx, sy, px, py, setTransform = !0) {
+  scalePoint(sx, sy, px, py) {
+    let setTransform = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !0;
     this.translate(px, py, !1), this.scale(sx, sy, !1), this.translate(-px, -py, !1), setTransform && this.setTransformForCurrent();
   }
-  setTransform(a, b, c, d, e, f, setTransform = !0, dpr = this.dpr) {
+  setTransform(a, b, c, d, e, f) {
+    let setTransform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
+    let dpr = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : this.dpr;
     this.matrix.setValue(dpr * a, dpr * b, dpr * c, dpr * d, dpr * e, dpr * f), setTransform && this.setTransformForCurrent();
   }
-  setTransformFromMatrix(matrix, setTransform = !0, dpr = this.dpr) {
+  setTransformFromMatrix(matrix) {
+    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    let dpr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.dpr;
     this.matrix.setValue(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr), setTransform && this.setTransformForCurrent();
   }
-  resetTransform(setTransform = !0, dpr = this.dpr) {
+  resetTransform() {
+    let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+    let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
     this.setTransform(dpr, 0, 0, dpr, 0, 0), setTransform && this.setTransformForCurrent();
   }
-  transform(a, b, c, d, e, f, setTransform = !0) {
+  transform(a, b, c, d, e, f) {
+    let setTransform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
     this.matrix.multiply(a, b, c, d, e, f), setTransform && this.setTransformForCurrent();
   }
   transformFromMatrix(matrix, setTransform) {
     this.matrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f), setTransform && this.setTransformForCurrent();
   }
-  translate(x, y, setTransform = !0) {
+  translate(x, y) {
+    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
     this.matrix.translate(x, y), setTransform && this.setTransformForCurrent();
   }
-  rotateDegrees(deg, setTransform = !0) {
+  rotateDegrees(deg) {
+    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     const rad = deg * Math.PI / 180;
     this.rotate(rad, setTransform);
   }
-  rotateAbout(rad, x, y, setTransform = !0) {
+  rotateAbout(rad, x, y) {
+    let setTransform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !0;
     this.translate(x, y, !1), this.rotate(rad, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
   }
-  rotateDegreesAbout(deg, x, y, setTransform = !0) {
+  rotateDegreesAbout(deg, x, y) {
+    let setTransform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !0;
     this.translate(x, y, !1), this.rotateDegrees(deg, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
   }
   beginPath() {
@@ -6014,16 +6095,19 @@ let EmptyContext2d = class {
   setTextStyleWithoutAlignBaseline(params, defaultParams) {}
   setTextStyle(params, defaultParams) {}
   draw() {}
-  clearMatrix(setTransform = !0, dpr = this.dpr) {
+  clearMatrix() {
+    let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+    let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
     this.setTransformFromMatrix(initMatrix, setTransform, dpr);
   }
   setClearMatrix(a, b, c, d, e, f) {
     this._clearMatrix.setValue(a, b, c, d, e, f);
   }
-  onlyTranslate(dpr = this.dpr) {
+  onlyTranslate() {
+    let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
     return this.matrix.a === dpr && 0 === this.matrix.b && 0 === this.matrix.c && this.matrix.d === dpr;
   }
-  release(...params) {
+  release() {
     this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
   }
 };
@@ -6034,7 +6118,9 @@ var ColorType;
   ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
 }(ColorType || (ColorType = {}));
 class ColorStore {
-  static Get(str, size = ColorType.Color1, arr = [0, 0, 0, 1]) {
+  static Get(str) {
+    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
+    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
     if (size === ColorType.Color1) {
       const color = ColorStore.store1[str];
       if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
@@ -6062,7 +6148,8 @@ class ColorStore {
 }
 ColorStore.store255 = {}, ColorStore.store1 = {};
 
-function colorArrayToString(color, alphaChannel = !1) {
+function colorArrayToString(color) {
+  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
   return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
 }
 function interpolateColor(from, to, ratio, alphaChannel, cb) {
@@ -6246,7 +6333,8 @@ class Graphic extends Node {
   get globalTransMatrix() {
     return this.tryUpdateGlobalTransMatrix(!0);
   }
-  constructor(params = {}) {
+  constructor() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _a;
     super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
   }
@@ -6266,7 +6354,8 @@ class Graphic extends Node {
   set2dMode() {
     this.in3dMode = !1;
   }
-  getOffsetXY(attr, includeScroll = !1) {
+  getOffsetXY(attr) {
+    let includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     var _a, _b;
     const {
       dx = attr.dx,
@@ -6377,7 +6466,7 @@ class Graphic extends Node {
     const b = this.AABBBounds;
     return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this._globalAABBBounds.empty() || this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
   }
-  tryUpdateGlobalTransMatrix(clearTag = !0) {
+  tryUpdateGlobalTransMatrix() {
     if (this._globalTransMatrix) {
       if (this.parent) {
         const m = this.parent.globalTransMatrix;
@@ -6389,7 +6478,8 @@ class Graphic extends Node {
   shouldUpdateGlobalMatrix() {
     return !0;
   }
-  tryUpdateLocalTransMatrix(clearTag = !0) {
+  tryUpdateLocalTransMatrix() {
+    let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
     return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
   }
   shouldUpdateAABBBounds() {
@@ -6429,17 +6519,24 @@ class Graphic extends Node {
   setWidthHeightWithoutTransform(aabbBounds) {
     this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
   }
-  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
+  setAttributesAndPreventAnimate(params) {
+    let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+    let context = arguments.length > 2 ? arguments[2] : undefined;
+    let ignorePriority = arguments.length > 3 ? arguments[3] : undefined;
     this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
       (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
         animate.preventAttr(key);
       });
     });
   }
-  setAttributes(params, forceUpdateTag = !1, context) {
+  setAttributes(params) {
+    let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+    let context = arguments.length > 2 ? arguments[2] : undefined;
     params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
   }
-  _setAttributes(params, forceUpdateTag = !1, context) {
+  _setAttributes(params) {
+    let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+    let context = arguments.length > 2 ? arguments[2] : undefined;
     const keys = Object.keys(params);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
@@ -6454,14 +6551,16 @@ class Graphic extends Node {
     }, this.attribute, key, context);
     params ? this._setAttributes(params, forceUpdateTag, context) : isNil(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "shadowGraphic" === key && this.setShadowGraphic(value);
   }
-  needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
+  needUpdateTags(keys) {
+    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
     for (let i = 0; i < k.length; i++) {
       const attrKey = k[i];
       if (-1 !== keys.indexOf(attrKey)) return !0;
     }
     return !1;
   }
-  needUpdateTag(key, k = GRAPHIC_UPDATE_TAG_KEY) {
+  needUpdateTag(key) {
+    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
     for (let i = 0; i < k.length; i++) {
       if (key === k[i]) return !0;
     }
@@ -6617,7 +6716,8 @@ class Graphic extends Node {
       newNormalAttrs[key] = this.getNormalAttribute(key);
     }), this.normalAttrs = newNormalAttrs;
   }
-  stopStateAnimates(type = "end") {
+  stopStateAnimates() {
+    let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "end";
     this.animates && this.animates.forEach(animate => {
       animate.stateNames && (animate.stop(type), this.animates.delete(animate.id));
     });
@@ -6781,7 +6881,8 @@ class Graphic extends Node {
     var _a;
     return null !== (_a = this.attribute[name]) && void 0 !== _a ? _a : this.getDefaultAttribute(name);
   }
-  onSetStage(cb, immediate = !1) {
+  onSetStage(cb) {
+    let immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
   }
   attachShadow(shadowRoot) {
@@ -6802,7 +6903,8 @@ class Graphic extends Node {
   createPathProxy(path) {
     return isString(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
   }
-  loadImage(image, background = !1) {
+  loadImage(image) {
+    let background = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     if (!image || background && backgroundNotImage(image)) return;
     const url = image;
     this.resources || (this.resources = new Map());
@@ -6832,7 +6934,8 @@ class Graphic extends Node {
       animate.stop();
     });
   }
-  stopAnimates(stopChildren = !1) {
+  stopAnimates() {
+    let stopChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     this._stopAnimates(this.animates), this.shadowRoot && this.shadowRoot.stopAnimates(!0), this.isContainer && stopChildren && this.forEachChildren(c => {
       c.stopAnimates(stopChildren);
     });
@@ -6980,7 +7083,8 @@ class Group extends Graphic {
   _updateChildToStage(child) {
     return this.stage && child && child.setStage(this.stage, this.layer), this.addUpdateBoundTag(), child;
   }
-  appendChild(node, addStage = !0) {
+  appendChild(node) {
+    let addStage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     const data = super.appendChild(node);
     return addStage && this.stage && data && data.setStage(this.stage, this.layer), this.addUpdateBoundTag(), data;
   }
@@ -6997,7 +7101,8 @@ class Group extends Graphic {
     const data = super.removeChild(child);
     return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
   }
-  removeAllChild(deep = !1) {
+  removeAllChild() {
+    let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     this.forEachChildren(child => {
       this.getGraphicService().onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
     }), super.removeAllChild(), this.addUpdateBoundTag();
@@ -7017,7 +7122,8 @@ class Group extends Graphic {
       g.isContainer && g.addUpdateGlobalPositionTag();
     });
   }
-  tryUpdateGlobalTransMatrix(clearTag = !0) {
+  tryUpdateGlobalTransMatrix() {
+    let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
     if (this.shouldUpdateGlobalMatrix()) {
       if (this._globalTransMatrix) {
         if (this.parent) {
@@ -7091,7 +7197,8 @@ class Layer extends Group {
       zIndex: null !== (_a = params.zIndex) && void 0 !== _a ? _a : 0
     }), this.layer = this, this.subLayers = new Map(), this.theme = new Theme(), this.background = "rgba(0, 0, 0, 0)", this.afterDrawCbs = [];
   }
-  combineSubLayer(removeIncrementalKey = !0) {
+  combineSubLayer() {
+    let removeIncrementalKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
     const subLayers = Array.from(this.subLayers.values()).sort((a, b) => a.zIndex - b.zIndex);
     this.layerHandler.merge(subLayers.map(l => (l.layer.subLayers.size && l.layer.combineSubLayer(removeIncrementalKey), l.layer.getNativeHandler()))), removeIncrementalKey && subLayers.forEach(l => {
       l.group && (l.group.incremental = 0);
@@ -7200,9 +7307,10 @@ let DefaultLayerService = DefaultLayerService_1 = class {
     let layerHandler;
     return layerHandler = "static" === layerMode ? container.get(StaticLayerHandlerContribution) : "dynamic" === layerMode ? container.get(DynamicLayerHandlerContribution) : container.get(VirtualLayerHandlerContribution), layerHandler;
   }
-  createLayer(stage, options = {
-    main: !1
-  }) {
+  createLayer(stage) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      main: !1
+    };
     var _a;
     this.tryInit();
     let layerMode = this.getRecommendedLayerType(options.layerMode);
@@ -7443,7 +7551,8 @@ const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContrib
 function textDrawOffsetX(textAlign, width) {
   return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
 }
-function textLayoutOffsetY(baseline, lineHeight, fontSize, buf = 0) {
+function textLayoutOffsetY(baseline, lineHeight, fontSize) {
+  let buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
 }
 
@@ -7657,9 +7766,10 @@ const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
 
 const CIRCLE_UPDATE_TAG_KEY = ["radius", "startAngle", "endAngle", ...GRAPHIC_UPDATE_TAG_KEY];
 class Circle extends Graphic {
-  constructor(params = {
-    radius: 1
-  }) {
+  constructor() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      radius: 1
+    };
     super(params), this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
   }
   isValid() {
@@ -7741,7 +7851,10 @@ class CanvasTextLayout {
     } else bbox.yOffset = -bbox.height;
     return bbox;
   }
-  GetLayoutByLines(lines, textAlign, textBaseline, lineHeight, suffix = "", wordBreak, params) {
+  GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
+    let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
+    let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
+    let params = arguments.length > 6 ? arguments[6] : undefined;
     const {
       lineWidth: lineWidth,
       suffixPosition = "end",
@@ -7864,10 +7977,11 @@ class Text extends Graphic {
   get isMultiLine() {
     return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
   }
-  constructor(params = {
-    text: "",
-    fontSize: 16
-  }) {
+  constructor() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      text: "",
+      fontSize: 16
+    };
     super(params), this.type = "text", this.numberType = TEXT_NUMBER_TYPE, this.cache = {};
   }
   isValid() {
@@ -8199,10 +8313,12 @@ class Text extends Graphic {
     var _a;
     return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
   }
-  needUpdateTags(keys, k = TEXT_UPDATE_TAG_KEY) {
+  needUpdateTags(keys) {
+    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
     return super.needUpdateTags(keys, k);
   }
-  needUpdateTag(key, k = TEXT_UPDATE_TAG_KEY) {
+  needUpdateTag(key) {
+    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
     return super.needUpdateTag(key, k);
   }
   _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
@@ -8405,15 +8521,19 @@ const updateBoundsOfSymbolOuterBorder = (attribute, symbolTheme, aabbBounds) =>
 
 const SYMBOL_UPDATE_TAG_KEY = ["symbolType", "size", ...GRAPHIC_UPDATE_TAG_KEY];
 let Symbol$1 = class Symbol extends Graphic {
-  constructor(params = {
-    symbolType: "circle"
-  }) {
+  constructor() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      symbolType: "circle"
+    };
     super(params), this.type = "symbol", this.numberType = SYMBOL_NUMBER_TYPE;
   }
   getParsedPath() {
     return this.shouldUpdateShape() && (this._parsedPath = this.doUpdateParsedPath(), this.clearUpdateShapeTag()), this._parsedPath;
   }
-  getParsedPath2D(x = 0, y = 0, size = 1) {
+  getParsedPath2D() {
+    let x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     let path = null;
     try {
       path = new Path2D();
@@ -8498,7 +8618,8 @@ function createSymbol(attributes) {
 
 const LINE_UPDATE_TAG_KEY = ["segments", "points", "curveType", "curveTension", ...GRAPHIC_UPDATE_TAG_KEY];
 let Line$1 = class Line extends Graphic {
-  constructor(params = {}) {
+  constructor() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(params), this.type = "line", this.numberType = LINE_NUMBER_TYPE;
   }
   isValid() {
@@ -9236,7 +9357,8 @@ class Wrapper {
       line = new Line(this.frame.left, this[this.directionKey.width], this.y + maxAscent, maxAscent, maxDescent, this.lineBuffer, this.direction, "horizontal" === this.direction ? this.frame.isWidthMax : this.frame.isHeightMax);
     this.frame.lines.push(line), this.frame.actualHeight += line.height, this.y += line.height, this.lineBuffer.length = 0, this.lineWidth = this.maxAscent = this.maxDescent = this.maxAscentForBlank = this.maxDescentForBlank = 0;
   }
-  deal(paragraph, singleLine = !1) {
+  deal(paragraph) {
+    let singleLine = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     paragraph instanceof RichTextIcon ? "horizontal" === this.direction && 0 === this.width || "vertical" === this.direction && 0 === this.height || this.lineWidth + paragraph[this.directionKey.width] <= this[this.directionKey.width] ? this.store(paragraph) : 0 === this.lineBuffer.length ? (this.store(paragraph), this.send()) : (this.send(), this.deal(paragraph)) : "number" != typeof this.width || this.width < 0 || (paragraph.newLine && this.send(), (0 !== paragraph.text.length || this.newLine) && ("horizontal" === this.direction && 0 === this.width || "vertical" === this.direction && 0 === this.height || this.lineWidth + paragraph[this.directionKey.width] <= this[this.directionKey.width] ? this.store(paragraph) : this.lineWidth === this[this.directionKey.width] ? (this.send(), this.deal(paragraph)) : this.cut(paragraph, singleLine)));
   }
   cut(paragraph, singleLine) {
@@ -10548,7 +10670,9 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
 const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
 
 const halfPi = pi / 2;
-function createRectPath(path, x, y, width, height, rectCornerRadius, roundCorner = !0, edgeCb) {
+function createRectPath(path, x, y, width, height, rectCornerRadius) {
+  let roundCorner = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
+  let edgeCb = arguments.length > 7 ? arguments[7] : undefined;
   let cornerRadius;
   if (Array.isArray(roundCorner) && (edgeCb = roundCorner, roundCorner = !0), width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
     const cornerRadiusArr = rectCornerRadius;
@@ -10889,7 +11013,8 @@ class BaseRender {
       doStroke: doStroke
     };
   }
-  transform(graphic, graphicAttribute, context, use3dMatrixIn3dMode = !1) {
+  transform(graphic, graphicAttribute, context) {
+    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
     const {
         x = graphicAttribute.x,
         y = graphicAttribute.y,
@@ -12012,7 +12137,7 @@ class DefaultBoundsAllocate {
   get length() {
     return this.pools.length;
   }
-  release(...params) {
+  release() {
     this.pools = [];
   }
 }
@@ -12237,7 +12362,8 @@ function drawPolygon(path, points, x, y) {
     for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
   }
 }
-function drawRoundedPolygon(path, points, x, y, cornerRadius, closePath = !0) {
+function drawRoundedPolygon(path, points, x, y, cornerRadius) {
+  let closePath = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : !0;
   var _a;
   if (points.length < 3) return void drawPolygon(path, points, x, y);
   let startI = 0,
@@ -12994,7 +13120,7 @@ let DefaultPluginService = class {
   unRegister(plugin) {
     "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1) : "onRegister" === plugin.activeEvent && this.onRegisterPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1), plugin.deactivate(this);
   }
-  release(...params) {
+  release() {
     this.onStartupFinishedPlugin.forEach(plugin => {
       plugin.deactivate(this);
     }), this.onStartupFinishedPlugin = [], this.onRegisterPlugin.forEach(plugin => {
@@ -13141,7 +13267,9 @@ function parseChildMap(graphic, defaultZIndex, reverse) {
     zIdxArray: zIdxArray
   };
 }
-function foreach(graphic, defaultZIndex, cb, reverse = !1, sort3d = !1) {
+function foreach(graphic, defaultZIndex, cb) {
+  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+  let sort3d = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
   let needSort = !1;
   if (sort3d) needSort = !0;else {
     let lastZIndex;
@@ -13172,12 +13300,14 @@ function foreach(graphic, defaultZIndex, cb, reverse = !1, sort3d = !1) {
     }
   } else graphic.forEachChildren(cb, reverse);
 }
-function foreachAsync(graphic, defaultZIndex, cb, reverse = !1) {
+function foreachAsync(graphic, defaultZIndex, cb) {
+  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
   return __awaiter$2(this, void 0, void 0, function* () {
     yield graphic.forEachChildrenAsync(cb, reverse);
   });
 }
-function findNextGraphic(graphic, id, defaultZIndex, reverse = !1) {
+function findNextGraphic(graphic, id, defaultZIndex) {
+  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
   let needSort = !1;
   graphic.forEachChildren((item, i) => {
     const {
@@ -18755,7 +18885,8 @@ class Step {
   getLastProps() {
     return this.prev ? this.prev.props || {} : this.animate.getStartProps();
   }
-  setDuration(duration, updateDownstream = !0) {
+  setDuration(duration) {
+    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     this.duration = duration, updateDownstream && this.updateDownstreamStartTimes();
   }
   getDuration() {
@@ -18776,7 +18907,8 @@ class Step {
       } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
     }), this.interpolateUpdateFunctions = funcs;
   }
-  setStartTime(time, updateDownstream = !0) {
+  setStartTime(time) {
+    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     this._startTime = time, updateDownstream && this.updateDownstreamStartTimes();
   }
   getStartTime() {
@@ -18902,7 +19034,8 @@ class DefaultTimeline extends EventEmitter {
       animate.release();
     }), this.head = null, this.tail = null, this.animateMap.clear(), this._animateCount = 0, this._totalDuration = 0;
   }
-  removeAnimate(animate, release = !0) {
+  removeAnimate(animate) {
+    let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     const node = this.animateMap.get(animate);
     node && (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), node.prev ? node.prev.next = node.next : this.head = node.next, node.next ? node.next.prev = node.prev : this.tail = node.prev, this.animateMap.delete(animate), this._animateCount--, animate.getStartTime() + animate.getDuration() >= this._totalDuration && this.recalculateTotalDuration());
   }
@@ -18940,7 +19073,10 @@ const defaultTimeline = new DefaultTimeline();
 defaultTimeline.isGlobal = !0;
 
 class Animate {
-  constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
+  constructor() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
+    let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
+    let slience = arguments.length > 2 ? arguments[2] : undefined;
     this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
   }
   getStartProps() {
@@ -18963,7 +19099,9 @@ class Animate {
       this.stop(), this.target.animates.delete(this.id);
     }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
-  to(props, duration = 300, easing = "linear") {
+  to(props) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
     const step = new Step(AnimateStepType.to, props, duration, easing);
     return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
   }
@@ -18993,7 +19131,9 @@ class Animate {
       this._endProps[key] = currentStep.props[key];
     }), currentStep = currentStep.next;
   }
-  from(props, duration = 300, easing = "linear") {
+  from(props) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
     const step = new Step(AnimateStepType.from, props, duration, easing);
     return this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.updateDuration(), this;
   }
@@ -19193,10 +19333,12 @@ class DefaultTicker extends EventEmitter {
   getTimelines() {
     return this.timelines;
   }
-  initHandler(force = !1) {
+  initHandler() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     this.setupTickHandler(force);
   }
-  setupTickHandler(force = !1) {
+  setupTickHandler() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     if (!force && this.tickerHandler) return !0;
     const handler = new RAFTickHandler();
     return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
@@ -19238,7 +19380,8 @@ class DefaultTicker extends EventEmitter {
     }
     return !1;
   }
-  start(force = !1) {
+  start() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     if (this.status === STATUS$1.RUNNING) return !1;
     if (!this.tickerHandler) return !1;
     if (!force) {
@@ -19606,17 +19749,22 @@ class AnimateExecutor {
     var _a, _b;
     return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : value;
   }
-  executeItem(params, graphic, index = 0, count = 1) {
+  executeItem(params, graphic) {
+    let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
     return Array.isArray(params) ? params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean) : [this._executeItem(params, graphic, index, count)].filter(Boolean);
   }
-  _executeItem(params, graphic, index = 0, count = 1) {
+  _executeItem(params, graphic) {
+    let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
     if (!graphic) return null;
     const isTimeline = ("timeSlices" in params);
     let animate = null;
     const parsedParams = this.parseParams(params, isTimeline);
     return animate = isTimeline ? this.executeTimelineItem(parsedParams, graphic, index, count) : this.executeTypeConfigItem(parsedParams, graphic, index, count), animate && this._trackAnimation(animate), animate;
   }
-  stop(type, callEnd = !0) {
+  stop(type) {
+    let callEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
     for (; this._animates.length > 0;) {
       const animate = this._animates.pop();
       !1 === callEnd && (animate.status = AnimateStatus.END), null == animate || animate.stop(type);
@@ -19773,7 +19921,8 @@ class GraphicStateExtension {
   applyUnhighlightState(animationConfig, callback) {
     return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
   }
-  stopAnimationState(state, type, deep = !1) {
+  stopAnimationState(state, type) {
+    let deep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
     return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
       child.stopAnimationState(state, type, deep);
     }), this;
@@ -19782,7 +19931,8 @@ class GraphicStateExtension {
     const stateManager = this._animationStateManager;
     return stateManager && stateManager.clearState(), this;
   }
-  reApplyAnimationState(state, deep = !1) {
+  reApplyAnimationState(state) {
+    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     const stateManager = this._animationStateManager;
     return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
       child.reApplyAnimationState(state, deep);
@@ -19794,7 +19944,8 @@ class GraphicStateExtension {
 }
 
 class AnimateExtension {
-  getAttributes(final = !1) {
+  getAttributes() {
+    let final = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     return final && this.finalAttribute ? this.finalAttribute : this.attribute;
   }
   animate(params) {
@@ -19836,20 +19987,24 @@ class AnimateExtension {
   getFinalAttribute() {
     return this.finalAttribute;
   }
-  getGraphicAttribute(key, prev = !1) {
+  getGraphicAttribute(key) {
+    let prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
   }
-  pauseAnimation(deep = !1) {
+  pauseAnimation() {
+    let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
       child.pauseAnimation(deep);
     });
   }
-  resumeAnimation(deep = !1) {
+  resumeAnimation() {
+    let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
       child.resumeAnimation(deep);
     });
   }
-  stopAnimation(deep = !1) {
+  stopAnimation() {
+    let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
     this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
       child.stopAnimation(deep);
     });
@@ -20595,8 +20750,8 @@ class LineAxis extends AxisBase {
         let limitLength = limitSize;
         let titleHeight = 0;
         let titleSpacing = 0;
-        const axisLineWidth = line && line.visible ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
-        const tickLength = tick && tick.visible ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
+        const axisLineWidth = line && line.visible ? ((_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1) : 0;
+        const tickLength = tick && tick.visible ? ((_c = tick.length) !== null && _c !== void 0 ? _c : 4) : 0;
         if (title && title.visible && typeof title.text === 'string') {
             titleHeight = measureTextSize(title.text, title.textStyle, (_e = (_d = this.stage) === null || _d === void 0 ? void 0 : _d.getTheme()) === null || _e === void 0 ? void 0 : _e.text).height;
             const padding = normalizePadding(title.padding);
@@ -24618,6 +24773,24 @@ class CircleAxisGrid extends BaseGrid {
 }
 mixin(CircleAxisGrid, CircleAxisMixin);
 
+var DataZoomActiveTag;
+(function (DataZoomActiveTag) {
+    DataZoomActiveTag["startHandler"] = "startHandler";
+    DataZoomActiveTag["endHandler"] = "endHandler";
+    DataZoomActiveTag["middleHandler"] = "middleHandler";
+    DataZoomActiveTag["background"] = "background";
+})(DataZoomActiveTag || (DataZoomActiveTag = {}));
+var IDataZoomInteractiveEvent;
+(function (IDataZoomInteractiveEvent) {
+    IDataZoomInteractiveEvent["stateUpdate"] = "stateUpdate";
+    IDataZoomInteractiveEvent["maskUpdate"] = "maskUpdate";
+    IDataZoomInteractiveEvent["dataZoomUpdate"] = "dataZoomUpdate";
+})(IDataZoomInteractiveEvent || (IDataZoomInteractiveEvent = {}));
+var IDataZoomEvent;
+(function (IDataZoomEvent) {
+    IDataZoomEvent["dataZoomChange"] = "dataZoomChange";
+})(IDataZoomEvent || (IDataZoomEvent = {}));
+
 const DEFAULT_HANDLER_PATH = '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';
 const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
     orient: 'bottom',
@@ -24735,538 +24908,175 @@ const DEFAULT_HANDLER_ATTR_MAP = {
     }
 };
 
-var DataZoomActiveTag;
-(function (DataZoomActiveTag) {
-    DataZoomActiveTag["startHandler"] = "startHandler";
-    DataZoomActiveTag["endHandler"] = "endHandler";
-    DataZoomActiveTag["middleHandler"] = "middleHandler";
-    DataZoomActiveTag["background"] = "background";
-})(DataZoomActiveTag || (DataZoomActiveTag = {}));
-
-function loadDataZoomComponent() {
-    loadTagComponent();
-    registerRect();
-    registerSymbol();
-    registerArea();
-    registerLine();
-}
-
-const delayMap$1 = {
-    debounce: debounce,
-    throttle: throttle
-};
-loadDataZoomComponent();
-class DataZoom extends AbstractComponent {
-    setPropsFromAttrs() {
-        const { start, end, orient, previewData, previewPointsX, previewPointsY, previewPointsX1, previewPointsY1 } = this
-            .attribute;
-        start && (this.state.start = start);
-        end && (this.state.end = end);
-        const { width, height } = this.getLayoutAttrFromConfig();
-        this._spanCache = this.state.end - this.state.start;
-        this._isHorizontal = orient === 'top' || orient === 'bottom';
-        this._layoutCache.max = this._isHorizontal ? width : height;
-        this._layoutCache.attPos = this._isHorizontal ? 'x' : 'y';
-        this._layoutCache.attSize = this._isHorizontal ? 'width' : 'height';
-        previewData && (this._previewData = previewData);
-        isFunction(previewPointsX) && (this._previewPointsX = previewPointsX);
-        isFunction(previewPointsY) && (this._previewPointsY = previewPointsY);
-        isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1);
-        isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
+    if (!textBounds) {
+        return false;
     }
-    constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, DataZoom.defaultAttributes, attributes));
-        this.name = 'dataZoom';
-        this._previewData = [];
-        this._activeState = false;
-        this._activeCache = {
-            startPos: { x: 0, y: 0 },
-            lastPos: { x: 0, y: 0 }
-        };
-        this._layoutCache = {
-            attPos: 'x',
-            attSize: 'width',
-            max: 0
-        };
-        this.state = {
-            start: 0,
-            end: 1
-        };
-        this._statePointToData = state => state;
-        this._handleTouchMove = (e) => {
-            if (this._activeState) {
-                e.preventDefault();
-            }
-        };
-        this._onHandlerPointerDown = (e, tag) => {
-            this._clearDragEvents();
-            if (tag === 'start') {
-                this._activeTag = DataZoomActiveTag.startHandler;
-                this._activeItem = this._startHandlerMask;
-            }
-            else if (tag === 'end') {
-                this._activeTag = DataZoomActiveTag.endHandler;
-                this._activeItem = this._endHandlerMask;
-            }
-            else if (tag === 'middleRect') {
-                this._activeTag = DataZoomActiveTag.middleHandler;
-                this._activeItem = this._middleHandlerRect;
-            }
-            else if (tag === 'middleSymbol') {
-                this._activeTag = DataZoomActiveTag.middleHandler;
-                this._activeItem = this._middleHandlerSymbol;
-            }
-            else if (tag === 'background') {
-                this._activeTag = DataZoomActiveTag.background;
-                this._activeItem = this._background;
+    if (isHorizontal) {
+        if (layout === 'start') {
+            if (textBounds.x1 < componentBoundsLike.x1) {
+                return true;
             }
-            this._activeState = true;
-            this._activeCache.startPos = this.eventPosToStagePos(e);
-            this._activeCache.lastPos = this.eventPosToStagePos(e);
-            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
-            const triggers = getEndTriggersOfDrag();
-            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            this.addEventListener('pointermove', this._onHandlerPointerMove, {
-                capture: true
-            });
-            triggers.forEach((trigger) => {
-                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
-            });
-        };
-        this._pointerMove = (e) => {
-            const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
-            const pos = this.eventPosToStagePos(e);
-            const { attPos, max } = this._layoutCache;
-            const dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
-            let { start, end } = this.state;
-            if (this._activeState) {
-                if (this._activeTag === DataZoomActiveTag.middleHandler) {
-                    this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis);
-                }
-                else if (this._activeTag === DataZoomActiveTag.startHandler) {
-                    if (start + dis > end) {
-                        start = end;
-                        end = start + dis;
-                        this._activeTag = DataZoomActiveTag.endHandler;
-                    }
-                    else {
-                        start = start + dis;
-                    }
-                }
-                else if (this._activeTag === DataZoomActiveTag.endHandler) {
-                    if (end + dis < start) {
-                        end = start;
-                        start = end + dis;
-                        this._activeTag = DataZoomActiveTag.startHandler;
-                    }
-                    else {
-                        end = end + dis;
-                    }
-                }
-                this._activeCache.lastPos = pos;
-                brushSelect && this.renderDragMask();
-            }
-            start = Math.min(Math.max(start, 0), 1);
-            end = Math.min(Math.max(end, 0), 1);
-            if (startAttr !== start || endAttr !== end) {
-                this.setStateAttr(start, end, true);
-                if (realTime) {
-                    this._dispatchEvent('change', {
-                        start,
-                        end,
-                        tag: this._activeTag
-                    });
-                }
+        }
+        else {
+            if (textBounds.x2 > componentBoundsLike.x2) {
+                return true;
             }
-        };
-        this._onHandlerPointerMove = this.attribute.delayTime === 0
-            ? this._pointerMove
-            : delayMap$1[this.attribute.delayType](this._pointerMove, this.attribute.delayTime);
-        this._onHandlerPointerUp = (e) => {
-            const { start, end, brushSelect, realTime = true } = this.attribute;
-            if (this._activeState) {
-                if (this._activeTag === DataZoomActiveTag.background) {
-                    const pos = this.eventPosToStagePos(e);
-                    this.backgroundDragZoom(this._activeCache.startPos, pos);
-                }
+        }
+    }
+    else {
+        if (layout === 'start') {
+            if (textBounds.y1 < componentBoundsLike.y1) {
+                return true;
             }
-            this._activeState = false;
-            brushSelect && this.renderDragMask();
-            this._dispatchEvent('change', {
-                start: this.state.start,
-                end: this.state.end,
-                tag: this._activeTag
-            });
-            this._clearDragEvents();
-        };
-        const { position, showDetail } = attributes;
-        this._activeCache.startPos = position;
-        this._activeCache.lastPos = position;
-        if (showDetail === 'auto') {
-            this._showText = false;
         }
         else {
-            this._showText = showDetail;
+            if (textBounds.y2 > componentBoundsLike.y2) {
+                return true;
+            }
         }
-        this.setPropsFromAttrs();
     }
-    setAttributes(params, forceUpdateTag) {
-        super.setAttributes(params, forceUpdateTag);
-        this.setPropsFromAttrs();
+    return false;
+};
+
+class DataZoomRenderer {
+    get startHandlerMask() {
+        return this._startHandlerMask;
     }
-    bindEvents() {
-        if (this.attribute.disableTriggerEvent) {
-            this.setAttribute('childrenPickable', false);
-            return;
-        }
-        const { showDetail, brushSelect } = this.attribute;
-        if (this._startHandlerMask) {
-            this._startHandlerMask.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
-        }
-        if (this._endHandlerMask) {
-            this._endHandlerMask.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'end'));
-        }
-        if (this._middleHandlerSymbol) {
-            this._middleHandlerSymbol.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'middleSymbol'));
-        }
-        if (this._middleHandlerRect) {
-            this._middleHandlerRect.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'middleRect'));
-        }
-        const selectedTag = brushSelect ? 'background' : 'middleRect';
-        if (this._selectedBackground) {
-            this._selectedBackground.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
-        }
-        if (brushSelect && this._background) {
-            this._background.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'background'));
-        }
-        if (brushSelect && this._previewGroup) {
-            this._previewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'background'));
-        }
-        if (this._selectedPreviewGroup) {
-            this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
-        }
-        if (showDetail === 'auto') {
-            this.addEventListener('pointerenter', this._onHandlerPointerEnter);
-            this.addEventListener('pointerleave', this._onHandlerPointerLeave);
-        }
-        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
-            passive: false
-        });
+    get middleHandlerSymbol() {
+        return this._middleHandlerSymbol;
     }
-    dragMaskSize() {
-        const { position } = this.attribute;
-        const { attPos, max } = this._layoutCache;
-        if (this._activeCache.lastPos[attPos] - position[attPos] > max) {
-            return max + position[attPos] - this._activeCache.startPos[attPos];
-        }
-        else if (this._activeCache.lastPos[attPos] - position[attPos] < 0) {
-            return position[attPos] - this._activeCache.startPos[attPos];
-        }
-        return this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
+    get middleHandlerRect() {
+        return this._middleHandlerRect;
     }
-    setStateAttr(start, end, shouldRender) {
-        const { zoomLock = false, minSpan = 0, maxSpan = 1 } = this.attribute;
-        const span = end - start;
-        if (span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan)) {
-            return;
-        }
-        this._spanCache = span;
-        this.state.start = start;
-        this.state.end = end;
-        shouldRender && this.setAttributes({ start, end });
+    get endHandlerMask() {
+        return this._endHandlerMask;
     }
-    _clearDragEvents() {
-        const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
-        const triggers = getEndTriggersOfDrag();
-        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-        triggers.forEach((trigger) => {
-            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
-        });
-        this.removeEventListener('pointermove', this._onHandlerPointerMove, {
-            capture: true
-        });
+    get selectedBackground() {
+        return this._selectedBackground;
     }
-    _onHandlerPointerEnter(e) {
-        this._showText = true;
-        this.renderText();
+    get dragMask() {
+        return this._dragMask;
     }
-    _onHandlerPointerLeave(e) {
-        this._showText = false;
-        this.renderText();
+    get startText() {
+        return this._startText;
     }
-    backgroundDragZoom(startPos, endPos) {
-        const { attPos, max } = this._layoutCache;
-        const { position } = this.attribute;
-        const startPosInComponent = startPos[attPos] - position[attPos];
-        const endPosInComponent = endPos[attPos] - position[attPos];
-        const start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1);
-        const end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
-        if (Math.abs(start - end) < 0.01) {
-            this.moveZoomWithMiddle(start);
-        }
-        else {
-            this.setStateAttr(start, end, false);
-        }
+    get endText() {
+        return this._endText;
     }
-    moveZoomWithMiddle(middle) {
-        const currentMiddle = (this.state.start + this.state.end) / 2;
-        let offset = middle - currentMiddle;
-        if (offset === 0) {
-            return;
-        }
-        else if (offset > 0) {
-            if (this.state.end + offset > 1) {
-                offset = 1 - this.state.end;
-            }
-        }
-        else if (offset < 0) {
-            if (this.state.start + offset < 0) {
-                offset = -this.state.start;
-            }
-        }
-        this.setStateAttr(this.state.start + offset, this.state.end + offset, false);
+    get startValue() {
+        return this._startValue;
     }
-    renderDragMask() {
-        const { dragMaskStyle } = this.attribute;
-        const { position, width, height } = this.getLayoutAttrFromConfig();
-        if (this._isHorizontal) {
-            this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width), y: position.y, width: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
-                    0, height }, dragMaskStyle), 'rect');
-        }
-        else {
-            this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height), width, height: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
-                    0 }, dragMaskStyle), 'rect');
-        }
+    get endValue() {
+        return this._endValue;
     }
-    isTextOverflow(componentBoundsLike, textBounds, layout) {
-        if (!textBounds) {
-            return false;
-        }
-        if (this._isHorizontal) {
-            if (layout === 'start') {
-                if (textBounds.x1 < componentBoundsLike.x1) {
-                    return true;
-                }
-            }
-            else {
-                if (textBounds.x2 > componentBoundsLike.x2) {
-                    return true;
-                }
-            }
-        }
-        else {
-            if (layout === 'start') {
-                if (textBounds.y1 < componentBoundsLike.y1) {
-                    return true;
-                }
-            }
-            else {
-                if (textBounds.y2 > componentBoundsLike.y2) {
-                    return true;
-                }
-            }
-        }
-        return false;
+    set showText(showText) {
+        this._showText = showText;
     }
-    setTextAttr(startTextBounds, endTextBounds) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const { startTextStyle, endTextStyle } = this.attribute;
-        const { formatMethod: startTextFormat } = startTextStyle, restStartTextStyle = __rest(startTextStyle, ["formatMethod"]);
-        const { formatMethod: endTextFormat } = endTextStyle, restEndTextStyle = __rest(endTextStyle, ["formatMethod"]);
-        const { start, end } = this.state;
-        this._startValue = this._statePointToData(start);
-        this._endValue = this._statePointToData(end);
-        const { position, width, height } = this.getLayoutAttrFromConfig();
-        const startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue;
-        const endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue;
-        const componentBoundsLike = {
-            x1: position.x,
-            y1: position.y,
-            x2: position.x + width,
-            y2: position.y + height
-        };
-        let startTextPosition;
-        let endTextPosition;
-        let startTextAlignStyle;
-        let endTextAlignStyle;
-        if (this._isHorizontal) {
-            startTextPosition = {
-                x: position.x + start * width,
-                y: position.y + height / 2
-            };
-            endTextPosition = {
-                x: position.x + end * width,
-                y: position.y + height / 2
-            };
-            startTextAlignStyle = {
-                textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, 'start') ? 'left' : 'right',
-                textBaseline: (_b = (_a = restStartTextStyle === null || restStartTextStyle === void 0 ? void 0 : restStartTextStyle.textStyle) === null || _a === void 0 ? void 0 : _a.textBaseline) !== null && _b !== void 0 ? _b : 'middle'
-            };
-            endTextAlignStyle = {
-                textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, 'end') ? 'right' : 'left',
-                textBaseline: (_d = (_c = restEndTextStyle === null || restEndTextStyle === void 0 ? void 0 : restEndTextStyle.textStyle) === null || _c === void 0 ? void 0 : _c.textBaseline) !== null && _d !== void 0 ? _d : 'middle'
-            };
-        }
-        else {
-            startTextPosition = {
-                x: position.x + width / 2,
-                y: position.y + start * height
-            };
-            endTextPosition = {
-                x: position.x + width / 2,
-                y: position.y + end * height
-            };
-            startTextAlignStyle = {
-                textAlign: (_f = (_e = restStartTextStyle === null || restStartTextStyle === void 0 ? void 0 : restStartTextStyle.textStyle) === null || _e === void 0 ? void 0 : _e.textAlign) !== null && _f !== void 0 ? _f : 'center',
-                textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, 'start') ? 'top' : 'bottom'
-            };
-            endTextAlignStyle = {
-                textAlign: (_h = (_g = restEndTextStyle === null || restEndTextStyle === void 0 ? void 0 : restEndTextStyle.textStyle) === null || _g === void 0 ? void 0 : _g.textAlign) !== null && _h !== void 0 ? _h : 'center',
-                textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, 'end') ? 'bottom' : 'top'
-            };
-        }
-        this._startText = this.maybeAddLabel(this._container, merge({}, restStartTextStyle, {
-            text: startTextValue,
-            x: startTextPosition.x,
-            y: startTextPosition.y,
-            visible: this._showText,
-            pickable: false,
-            childrenPickable: false,
-            textStyle: startTextAlignStyle
-        }), `data-zoom-start-text-${position}`);
-        this._endText = this.maybeAddLabel(this._container, merge({}, restEndTextStyle, {
-            text: endTextValue,
-            x: endTextPosition.x,
-            y: endTextPosition.y,
-            visible: this._showText,
-            pickable: false,
-            childrenPickable: false,
-            textStyle: endTextAlignStyle
-        }), `data-zoom-end-text-${position}`);
+    get background() {
+        return this._background;
     }
-    renderText() {
-        let startTextBounds = null;
-        let endTextBounds = null;
-        this.setTextAttr(startTextBounds, endTextBounds);
-        startTextBounds = this._startText.AABBBounds;
-        endTextBounds = this._endText.AABBBounds;
-        this.setTextAttr(startTextBounds, endTextBounds);
-        startTextBounds = this._startText.AABBBounds;
-        endTextBounds = this._endText.AABBBounds;
-        const { x1, x2, y1, y2 } = startTextBounds;
-        const { dx: startTextDx = 0, dy: startTextDy = 0 } = this.attribute.startTextStyle;
-        if (new Bounds().set(x1, y1, x2, y2).intersects(endTextBounds)) {
-            const direction = this.attribute.orient === 'bottom' || this.attribute.orient === 'right' ? -1 : 1;
-            if (this._isHorizontal) {
-                const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
-                this._startText.setAttribute('dy', startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
-            }
-            else {
-                const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
-                this._startText.setAttribute('dx', startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
-            }
-        }
-        else {
-            if (this._isHorizontal) {
-                this._startText.setAttribute('dy', startTextDy);
-            }
-            else {
-                this._startText.setAttribute('dx', startTextDx);
-            }
-        }
+    set previewData(previewData) {
+        this._previewData = previewData;
+    }
+    get previewGroup() {
+        return this._previewGroup;
     }
-    getLayoutAttrFromConfig() {
+    get selectedPreviewGroup() {
+        return this._selectedPreviewGroup;
+    }
+    set previewPointsX(previewPointsX) {
+        this._previewPointsX = previewPointsX;
+    }
+    set previewPointsY(previewPointsY) {
+        this._previewPointsY = previewPointsY;
+    }
+    set previewPointsX1(previewPointsX1) {
+        this._previewPointsX1 = previewPointsX1;
+    }
+    set previewPointsY1(previewPointsY1) {
+        this._previewPointsY1 = previewPointsY1;
+    }
+    set statePointToData(statePointToData) {
+        this._statePointToData = statePointToData;
+    }
+    _initAttrs(props) {
+        this.attribute = props.attribute;
+        this._isHorizontal = this.attribute.orient === 'top' || this.attribute.orient === 'bottom';
+        const { previewData, previewPointsX, previewPointsY, previewPointsX1, previewPointsY1 } = this
+            .attribute;
+        previewData && (this._previewData = previewData);
+        isFunction(previewPointsX) && (this._previewPointsX = previewPointsX);
+        isFunction(previewPointsY) && (this._previewPointsY = previewPointsY);
+        isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1);
+        isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+        this._getState = props.getState;
+        this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig;
+        this._getContainer = props.getContainer;
+    }
+    constructor(props) {
+        this._previewData = [];
+        this._statePointToData = state => state;
+        const { showDetail } = props.attribute;
+        this._showText = showDetail === 'auto' ? false : showDetail;
+        this._initAttrs(props);
+    }
+    setAttributes(props) {
+        this._initAttrs(props);
+    }
+    renderDataZoom(onlyStateChange = false) {
         var _a, _b, _c, _d, _e, _f;
-        if (this._layoutAttrFromConfig) {
-            return this._layoutAttrFromConfig;
-        }
-        const { position: positionConfig, size, orient, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, backgroundStyle = {} } = this.attribute;
-        const { width: widthConfig, height: heightConfig } = size;
-        const middleHandlerSize = (_b = (_a = middleHandlerStyle.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 10;
-        let width;
-        let height;
-        let position;
-        if (middleHandlerStyle.visible) {
-            if (this._isHorizontal) {
-                width = widthConfig;
-                height = heightConfig - middleHandlerSize;
-                position = {
-                    x: positionConfig.x,
-                    y: positionConfig.y + middleHandlerSize
-                };
-            }
-            else {
-                width = widthConfig - middleHandlerSize;
-                height = heightConfig;
-                position = {
-                    x: positionConfig.x + (orient === 'left' ? middleHandlerSize : 0),
-                    y: positionConfig.y
-                };
-            }
-        }
-        else {
-            width = widthConfig;
-            height = heightConfig;
-            position = positionConfig;
-        }
-        const startHandlerSize = (_c = startHandlerStyle.size) !== null && _c !== void 0 ? _c : (this._isHorizontal ? height : width);
-        const endHandlerSize = (_d = endHandlerStyle.size) !== null && _d !== void 0 ? _d : (this._isHorizontal ? height : width);
-        if (startHandlerStyle.visible) {
-            if (this._isHorizontal) {
-                width -= (startHandlerSize + endHandlerSize) / 2;
-                position = {
-                    x: position.x + startHandlerSize / 2,
-                    y: position.y
-                };
-            }
-            else {
-                height -= (startHandlerSize + endHandlerSize) / 2;
-                position = {
-                    x: position.x,
-                    y: position.y + startHandlerSize / 2
-                };
-            }
+        const { backgroundChartStyle = {}, selectedBackgroundChartStyle = {}, brushSelect } = this.attribute;
+        this._renderBackground();
+        ((_a = backgroundChartStyle.line) === null || _a === void 0 ? void 0 : _a.visible) && !onlyStateChange && this._setPreviewAttributes('line', this._getContainer());
+        ((_b = backgroundChartStyle.area) === null || _b === void 0 ? void 0 : _b.visible) && !onlyStateChange && this._setPreviewAttributes('area', this._getContainer());
+        brushSelect && this.renderDragMask();
+        this._renderSelectedBackground();
+        ((_c = selectedBackgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this._setSelectedPreviewClipAttributes('line', this._getContainer());
+        ((_d = selectedBackgroundChartStyle.line) === null || _d === void 0 ? void 0 : _d.visible) && !onlyStateChange && this._setSelectedPreviewAttributes('line');
+        ((_e = selectedBackgroundChartStyle.line) === null || _e === void 0 ? void 0 : _e.visible) && this._setSelectedPreviewClipAttributes('area', this._getContainer());
+        ((_f = selectedBackgroundChartStyle.area) === null || _f === void 0 ? void 0 : _f.visible) && !onlyStateChange && this._setSelectedPreviewAttributes('area');
+        this._renderHandler();
+        if (this._showText) {
+            this.renderText();
         }
-        height += (_e = backgroundStyle.lineWidth / 2) !== null && _e !== void 0 ? _e : 1;
-        width += (_f = backgroundStyle.lineWidth / 2) !== null && _f !== void 0 ? _f : 1;
-        this._layoutAttrFromConfig = {
-            position,
-            width,
-            height
-        };
-        return this._layoutAttrFromConfig;
     }
-    render() {
-        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, _3, _4, _5, _6, _7, _8, _9;
-        this._layoutAttrFromConfig = null;
-        const { orient, backgroundStyle, backgroundChartStyle = {}, selectedBackgroundStyle = {}, selectedBackgroundChartStyle = {}, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, brushSelect, zoomLock } = this.attribute;
-        const { start, end } = this.state;
-        const { position, width, height } = this.getLayoutAttrFromConfig();
-        const startHandlerMinSize = (_a = startHandlerStyle.triggerMinSize) !== null && _a !== void 0 ? _a : 40;
-        const endHandlerMinSize = (_b = endHandlerStyle.triggerMinSize) !== null && _b !== void 0 ? _b : 40;
-        const group = this.createOrUpdateChild('dataZoom-container', {}, 'group');
-        this._container = group;
-        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 : (_c = backgroundStyle.pickable) !== null && _c !== void 0 ? _c : true }), 'rect');
-        ((_d = backgroundChartStyle.line) === null || _d === void 0 ? void 0 : _d.visible) && this.setPreviewAttributes('line', group);
-        ((_e = backgroundChartStyle.area) === null || _e === void 0 ? void 0 : _e.visible) && this.setPreviewAttributes('area', group);
-        brushSelect && this.renderDragMask();
+    renderDragMask() {
+        const { dragMaskStyle } = this.attribute;
+        const { position, width, height } = this._getLayoutAttrFromConfig();
+        const { start, end } = this._getState();
         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 : (_f = selectedBackgroundChartStyle.pickable) !== null && _f !== void 0 ? _f : true }), 'rect');
+            this._dragMask = this._getContainer().createOrUpdateChild('dragMask', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height }, dragMaskStyle), '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 : (_g = selectedBackgroundStyle.pickable) !== null && _g !== void 0 ? _g : true }), 'rect');
+            this._dragMask = this._getContainer().createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height }, dragMaskStyle), 'rect');
         }
-        ((_h = selectedBackgroundChartStyle.line) === null || _h === void 0 ? void 0 : _h.visible) && this.setSelectedPreviewAttributes('line', group);
-        ((_j = selectedBackgroundChartStyle.area) === null || _j === void 0 ? void 0 : _j.visible) && this.setSelectedPreviewAttributes('area', group);
+        return { start, end };
+    }
+    _renderBackground() {
+        var _a;
+        const { backgroundStyle, brushSelect, zoomLock } = this.attribute;
+        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');
+    }
+    _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;
+        const { orient, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, zoomLock } = this.attribute;
+        const { start, end } = this._getState();
+        const { position, width, height } = this._getLayoutAttrFromConfig();
+        const startHandlerMinSize = (_a = startHandlerStyle.triggerMinSize) !== null && _a !== void 0 ? _a : 40;
+        const endHandlerMinSize = (_b = endHandlerStyle.triggerMinSize) !== null && _b !== void 0 ? _b : 40;
+        const group = this._getContainer();
         if (this._isHorizontal) {
             if (middleHandlerStyle.visible) {
-                const middleHandlerBackgroundSize = ((_k = middleHandlerStyle.background) === null || _k === void 0 ? void 0 : _k.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 }, (_l = middleHandlerStyle.background) === null || _l === void 0 ? void 0 : _l.style), { pickable: zoomLock ? false : (_p = (_o = (_m = middleHandlerStyle.background) === null || _m === void 0 ? void 0 : _m.style) === null || _o === void 0 ? void 0 : _o.pickable) !== null && _p !== void 0 ? _p : 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: (_r = (_q = middleHandlerStyle.icon) === null || _q === void 0 ? void 0 : _q.symbolType) !== null && _r !== void 0 ? _r : 'square' }, middleHandlerStyle.icon), { pickable: zoomLock ? false : (_s = middleHandlerStyle.icon.pickable) !== null && _s !== void 0 ? _s : true }), 'symbol');
+                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._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_t = startHandlerStyle.symbolType) !== null && _t !== void 0 ? _t : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), { pickable: zoomLock ? false : (_u = startHandlerStyle.pickable) !== null && _u !== void 0 ? _u : 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: (_v = endHandlerStyle.symbolType) !== null && _v !== void 0 ? _v : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), { pickable: zoomLock ? false : (_w = endHandlerStyle.pickable) !== null && _w !== void 0 ? _w : 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');
             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);
@@ -25276,14 +25086,14 @@ class DataZoom extends AbstractComponent {
         }
         else {
             if (middleHandlerStyle.visible) {
-                const middleHandlerBackgroundSize = ((_x = middleHandlerStyle.background) === null || _x === void 0 ? void 0 : _x.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 }, (_y = middleHandlerStyle.background) === null || _y === void 0 ? void 0 : _y.style), { pickable: zoomLock ? false : (_1 = (_0 = (_z = middleHandlerStyle.background) === null || _z === void 0 ? void 0 : _z.style) === null || _0 === void 0 ? void 0 : _0.pickable) !== null && _1 !== void 0 ? _1 : true }), 'rect');
+                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._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: (_3 = (_2 = middleHandlerStyle.icon) === null || _2 === void 0 ? void 0 : _2.symbolType) !== null && _3 !== void 0 ? _3 : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle.icon), { pickable: zoomLock ? false : (_5 = (_4 = middleHandlerStyle.icon) === null || _4 === void 0 ? void 0 : _4.pickable) !== null && _5 !== void 0 ? _5 : 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 }, 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: (_6 = startHandlerStyle.symbolType) !== null && _6 !== void 0 ? _6 : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), { pickable: zoomLock ? false : (_7 = startHandlerStyle.pickable) !== null && _7 !== void 0 ? _7 : 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: (_8 = endHandlerStyle.symbolType) !== null && _8 !== void 0 ? _8 : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), { pickable: zoomLock ? false : (_9 = endHandlerStyle.pickable) !== null && _9 !== void 0 ? _9 : 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');
             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);
@@ -25291,13 +25101,75 @@ class DataZoom extends AbstractComponent {
             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');
         }
-        if (this._showText) {
-            this.renderText();
+    }
+    _renderSelectedBackground() {
+        var _a, _b;
+        const { selectedBackgroundStyle = {}, selectedBackgroundChartStyle = {}, brushSelect, zoomLock } = this.attribute;
+        const { start, end } = this._getState();
+        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');
+        }
+        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');
+        }
+    }
+    _setPreviewAttributes(type, group) {
+        if (!this._previewGroup) {
+            this._previewGroup = group.createOrUpdateChild('previewGroup', { pickable: false }, 'group');
+        }
+        if (type === 'line') {
+            this._previewLine = this._previewGroup.createOrUpdateChild('previewLine', {}, 'line');
+        }
+        else {
+            this._previewArea = this._previewGroup.createOrUpdateChild('previewArea', { curveType: 'basis' }, 'area');
+        }
+        const { backgroundChartStyle = {} } = this.attribute;
+        type === 'line' &&
+            this._previewLine.setAttributes(Object.assign({ points: this._getPreviewLinePoints(), curveType: 'basis', pickable: false }, backgroundChartStyle.line));
+        type === 'area' &&
+            this._previewArea.setAttributes(Object.assign({ points: this._getPreviewAreaPoints(), curveType: 'basis', pickable: false }, backgroundChartStyle.area));
+    }
+    _setSelectedPreviewClipAttributes(type, group) {
+        if (!this._selectedPreviewGroupClip) {
+            this._selectedPreviewGroupClip = group.createOrUpdateChild('selectedPreviewGroupClip', { pickable: false }, 'group');
+            this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild('selectedPreviewGroup', {}, 'group');
+        }
+        const { start, end } = this._getState();
+        const { position, width, height } = this._getLayoutAttrFromConfig();
+        this._selectedPreviewGroupClip.setAttributes({
+            x: this._isHorizontal ? position.x + start * width : position.x,
+            y: this._isHorizontal ? position.y : position.y + start * height,
+            width: this._isHorizontal ? (end - start) * width : width,
+            height: this._isHorizontal ? height : (end - start) * height,
+            clip: true,
+            pickable: false
+        });
+        this._selectedPreviewGroup.setAttributes({
+            x: -(this._isHorizontal ? position.x + start * width : position.x),
+            y: -(this._isHorizontal ? position.y : position.y + start * height),
+            width: this._isHorizontal ? (end - start) * width : width,
+            height: this._isHorizontal ? height : (end - start) * height,
+            pickable: false
+        });
+    }
+    _setSelectedPreviewAttributes(type) {
+        const { selectedBackgroundChartStyle = {} } = this.attribute;
+        if (type === 'line') {
+            this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild('selectedPreviewLine', {}, 'line');
+        }
+        else {
+            this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild('selectedPreviewArea', { curveType: 'basis' }, 'area');
         }
+        type === 'line' &&
+            this._selectedPreviewLine.setAttributes(Object.assign({ points: this._getPreviewLinePoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle.line));
+        type === 'area' &&
+            this._selectedPreviewArea.setAttributes(Object.assign({ points: this._getPreviewAreaPoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle.area));
     }
-    computeBasePoints() {
+    _computeBasePoints() {
         const { orient } = this.attribute;
-        const { position, width, height } = this.getLayoutAttrFromConfig();
+        const { position, width, height } = this._getLayoutAttrFromConfig();
         let basePointStart;
         let basePointEnd;
         if (this._isHorizontal) {
@@ -25347,7 +25219,7 @@ class DataZoom extends AbstractComponent {
             basePointEnd
         };
     }
-    simplifyPoints(points) {
+    _simplifyPoints(points) {
         var _a;
         const niceCount = 10000;
         if (points.length > niceCount) {
@@ -25356,7 +25228,7 @@ class DataZoom extends AbstractComponent {
         }
         return points;
     }
-    getPreviewLinePoints() {
+    _getPreviewLinePoints() {
         let previewPoints = this._previewData.map(d => {
             return {
                 x: this._previewPointsX && this._previewPointsX(d),
@@ -25366,11 +25238,11 @@ class DataZoom extends AbstractComponent {
         if (previewPoints.length === 0) {
             return previewPoints;
         }
-        previewPoints = this.simplifyPoints(previewPoints);
-        const { basePointStart, basePointEnd } = this.computeBasePoints();
+        previewPoints = this._simplifyPoints(previewPoints);
+        const { basePointStart, basePointEnd } = this._computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
     }
-    getPreviewAreaPoints() {
+    _getPreviewAreaPoints() {
         let previewPoints = this._previewData.map(d => {
             return {
                 x: this._previewPointsX && this._previewPointsX(d),
@@ -25382,103 +25254,583 @@ class DataZoom extends AbstractComponent {
         if (previewPoints.length === 0) {
             return previewPoints;
         }
-        previewPoints = this.simplifyPoints(previewPoints);
-        const { basePointStart, basePointEnd } = this.computeBasePoints();
+        previewPoints = this._simplifyPoints(previewPoints);
+        const { basePointStart, basePointEnd } = this._computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
     }
-    setPreviewAttributes(type, group) {
-        if (!this._previewGroup) {
-            this._previewGroup = group.createOrUpdateChild('previewGroup', { pickable: false }, 'group');
-        }
-        if (type === 'line') {
-            this._previewLine = this._previewGroup.createOrUpdateChild('previewLine', {}, 'line');
-        }
-        else {
-            this._previewArea = this._previewGroup.createOrUpdateChild('previewArea', { curveType: 'basis' }, 'area');
+    renderText() {
+        let startTextBounds = null;
+        let endTextBounds = null;
+        this._setTextAttr(startTextBounds, endTextBounds);
+        if (this._showText) {
+            startTextBounds = this._startText.AABBBounds;
+            endTextBounds = this._endText.AABBBounds;
+            this._setTextAttr(startTextBounds, endTextBounds);
+            startTextBounds = this._startText.AABBBounds;
+            endTextBounds = this._endText.AABBBounds;
+            const { x1, x2, y1, y2 } = startTextBounds;
+            const { dx: startTextDx = 0, dy: startTextDy = 0 } = this.attribute.startTextStyle;
+            if (new Bounds().set(x1, y1, x2, y2).intersects(endTextBounds)) {
+                const direction = this.attribute.orient === 'bottom' || this.attribute.orient === 'right' ? -1 : 1;
+                if (this._isHorizontal) {
+                    this._startText.setAttribute('dy', startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2));
+                }
+                else {
+                    this._startText.setAttribute('dx', startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+                }
+            }
+            else {
+                if (this._isHorizontal) {
+                    this._startText.setAttribute('dy', startTextDy);
+                }
+                else {
+                    this._startText.setAttribute('dx', startTextDx);
+                }
+            }
         }
-        const { backgroundChartStyle = {} } = this.attribute;
-        type === 'line' &&
-            this._previewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, backgroundChartStyle.line));
-        type === 'area' &&
-            this._previewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, backgroundChartStyle.area));
     }
-    setSelectedPreviewAttributes(type, group) {
-        if (!this._selectedPreviewGroupClip) {
-            this._selectedPreviewGroupClip = group.createOrUpdateChild('selectedPreviewGroupClip', { pickable: false }, 'group');
-            this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild('selectedPreviewGroup', {}, 'group');
-        }
-        if (type === 'line') {
-            this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild('selectedPreviewLine', {}, 'line');
+    _setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const { startTextStyle, endTextStyle } = this.attribute;
+        const { formatMethod: startTextFormat } = startTextStyle, restStartTextStyle = __rest(startTextStyle, ["formatMethod"]);
+        const { formatMethod: endTextFormat } = endTextStyle, restEndTextStyle = __rest(endTextStyle, ["formatMethod"]);
+        const { start, end } = this._getState();
+        this._startValue = this._statePointToData(start);
+        this._endValue = this._statePointToData(end);
+        const { position, width, height } = this._getLayoutAttrFromConfig();
+        const startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue;
+        const endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue;
+        const componentBoundsLike = {
+            x1: position.x,
+            y1: position.y,
+            x2: position.x + width,
+            y2: position.y + height
+        };
+        let startTextPosition;
+        let endTextPosition;
+        let startTextAlignStyle;
+        let endTextAlignStyle;
+        if (this._isHorizontal) {
+            startTextPosition = {
+                x: position.x + start * width,
+                y: position.y + height / 2
+            };
+            endTextPosition = {
+                x: position.x + end * width,
+                y: position.y + height / 2
+            };
+            startTextAlignStyle = {
+                textAlign: isTextOverflow(componentBoundsLike, startTextBounds, 'start', this._isHorizontal) ? 'left' : 'right',
+                textBaseline: (_b = (_a = restStartTextStyle === null || restStartTextStyle === void 0 ? void 0 : restStartTextStyle.textStyle) === null || _a === void 0 ? void 0 : _a.textBaseline) !== null && _b !== void 0 ? _b : 'middle'
+            };
+            endTextAlignStyle = {
+                textAlign: isTextOverflow(componentBoundsLike, endTextBounds, 'end', this._isHorizontal) ? 'right' : 'left',
+                textBaseline: (_d = (_c = restEndTextStyle === null || restEndTextStyle === void 0 ? void 0 : restEndTextStyle.textStyle) === null || _c === void 0 ? void 0 : _c.textBaseline) !== null && _d !== void 0 ? _d : 'middle'
+            };
         }
         else {
-            this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild('selectedPreviewArea', { curveType: 'basis' }, 'area');
+            startTextPosition = {
+                x: position.x + width / 2,
+                y: position.y + start * height
+            };
+            endTextPosition = {
+                x: position.x + width / 2,
+                y: position.y + end * height
+            };
+            startTextAlignStyle = {
+                textAlign: (_f = (_e = restStartTextStyle === null || restStartTextStyle === void 0 ? void 0 : restStartTextStyle.textStyle) === null || _e === void 0 ? void 0 : _e.textAlign) !== null && _f !== void 0 ? _f : 'center',
+                textBaseline: isTextOverflow(componentBoundsLike, startTextBounds, 'start', this._isHorizontal)
+                    ? 'top'
+                    : 'bottom'
+            };
+            endTextAlignStyle = {
+                textAlign: (_h = (_g = restEndTextStyle === null || restEndTextStyle === void 0 ? void 0 : restEndTextStyle.textStyle) === null || _g === void 0 ? void 0 : _g.textAlign) !== null && _h !== void 0 ? _h : 'center',
+                textBaseline: isTextOverflow(componentBoundsLike, endTextBounds, 'end', this._isHorizontal) ? 'bottom' : 'top'
+            };
         }
-        const { selectedBackgroundChartStyle = {} } = this.attribute;
-        const { start, end } = this.state;
-        const { position, width, height } = this.getLayoutAttrFromConfig();
-        this._selectedPreviewGroupClip.setAttributes({
-            x: this._isHorizontal ? position.x + start * width : position.x,
-            y: this._isHorizontal ? position.y : position.y + start * height,
-            width: this._isHorizontal ? (end - start) * width : width,
-            height: this._isHorizontal ? height : (end - start) * height,
-            clip: true,
-            pickable: false
-        });
-        this._selectedPreviewGroup.setAttributes({
-            x: -(this._isHorizontal ? position.x + start * width : position.x),
-            y: -(this._isHorizontal ? position.y : position.y + start * height),
-            width: this._isHorizontal ? (end - start) * width : width,
-            height: this._isHorizontal ? height : (end - start) * height,
-            pickable: false
-        });
-        type === 'line' &&
-            this._selectedPreviewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle.line));
-        type === 'area' &&
-            this._selectedPreviewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle.area));
+        this._startText = this._maybeAddLabel(this._getContainer(), merge({}, restStartTextStyle, {
+            text: startTextValue,
+            x: startTextPosition.x,
+            y: startTextPosition.y,
+            visible: this._showText,
+            pickable: false,
+            childrenPickable: false,
+            textStyle: startTextAlignStyle
+        }), `data-zoom-start-text`);
+        this._endText = this._maybeAddLabel(this._getContainer(), merge({}, restEndTextStyle, {
+            text: endTextValue,
+            x: endTextPosition.x,
+            y: endTextPosition.y,
+            visible: this._showText,
+            pickable: false,
+            childrenPickable: false,
+            textStyle: endTextAlignStyle
+        }), `data-zoom-end-text`);
     }
-    maybeAddLabel(container, attributes, name) {
-        let labelShape = this.find(node => node.name === name, true);
+    _maybeAddLabel(container, attributes, name) {
+        let labelShape = container.find(node => node.name === name, true);
         if (labelShape) {
             labelShape.setAttributes(attributes);
         }
         else {
             labelShape = new Tag(attributes);
             labelShape.name = name;
+            container.add(labelShape);
         }
-        container.add(labelShape);
         return labelShape;
     }
-    setStartAndEnd(start, end) {
-        const { start: startAttr, end: endAttr } = this.attribute;
-        if (isValid(start) && isValid(end) && (start !== this.state.start || end !== this.state.end)) {
-            this.state.start = start;
-            this.state.end = end;
-            if (startAttr !== this.state.start || endAttr !== this.state.end) {
-                this.setStateAttr(start, end, true);
-                this._dispatchEvent('change', {
-                    start,
-                    end,
+}
+
+const delayMap$1 = {
+    debounce: debounce,
+    throttle: throttle
+};
+class DataZoomInteraction extends EventEmitter {
+    constructor(props) {
+        super();
+        this._activeState = false;
+        this._activeCache = {
+            startPos: { x: 0, y: 0 },
+            lastPos: { x: 0, y: 0 }
+        };
+        this._layoutCache = {
+            attPos: 'x',
+            attSize: 'width',
+            size: 0
+        };
+        this._handleTouchMove = (e) => {
+            if (this._activeState) {
+                e.preventDefault();
+            }
+        };
+        this._onHandlerPointerDown = (e, tag) => {
+            this.clearDragEvents();
+            if (tag === 'start') {
+                this._activeTag = DataZoomActiveTag.startHandler;
+                this._activeItem = this._startHandlerMask;
+            }
+            else if (tag === 'end') {
+                this._activeTag = DataZoomActiveTag.endHandler;
+                this._activeItem = this._endHandlerMask;
+            }
+            else if (tag === 'middleRect') {
+                this._activeTag = DataZoomActiveTag.middleHandler;
+                this._activeItem = this._middleHandlerRect;
+            }
+            else if (tag === 'middleSymbol') {
+                this._activeTag = DataZoomActiveTag.middleHandler;
+                this._activeItem = this._middleHandlerSymbol;
+            }
+            else if (tag === 'background') {
+                this._activeTag = DataZoomActiveTag.background;
+                this._activeItem = this._background;
+            }
+            this._activeState = true;
+            this._activeCache.startPos = this._eventPosToStagePos(e);
+            this._activeCache.lastPos = this._eventPosToStagePos(e);
+            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+            const triggers = getEndTriggersOfDrag();
+            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            this.on('pointermove', this._onHandlerPointerMove, {
+                capture: true
+            });
+            triggers.forEach((trigger) => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            });
+        };
+        this._pointerMove = (e) => {
+            const { brushSelect } = this.attribute;
+            const { position } = this._getLayoutAttrFromConfig();
+            const pos = this._eventPosToStagePos(e);
+            const { attPos, size, attSize } = this._layoutCache;
+            const dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / size;
+            const statePos = (pos[attPos] - position[attPos]) / this._getLayoutAttrFromConfig()[attSize];
+            let { start, end } = this._getState();
+            let shouldRender = true;
+            if (this._activeState) {
+                if (this._activeTag === DataZoomActiveTag.middleHandler) {
+                    ({ start, end } = this._moveZoomWithMiddle(dis));
+                }
+                else if (this._activeTag === DataZoomActiveTag.startHandler) {
+                    ({ start, end } = this._moveZoomWithHandler(statePos, 'start'));
+                }
+                else if (this._activeTag === DataZoomActiveTag.endHandler) {
+                    ({ start, end } = this._moveZoomWithHandler(statePos, 'end'));
+                }
+                else if (this._activeTag === DataZoomActiveTag.background && brushSelect) {
+                    ({ start, end } = this._moveZoomWithBackground(statePos));
+                    shouldRender = false;
+                    this._dispatchEvent(IDataZoomInteractiveEvent.maskUpdate);
+                }
+                this._activeCache.lastPos = pos;
+            }
+            if (this._getState().start !== start || this._getState().end !== end) {
+                this._setStateAttr(start, end);
+                this._dispatchEvent(IDataZoomInteractiveEvent.stateUpdate, {
+                    start: this._getState().start,
+                    end: this._getState().end,
+                    shouldRender,
                     tag: this._activeTag
                 });
+                if (this.attribute.realTime) {
+                    this._dispatchEvent(IDataZoomInteractiveEvent.dataZoomUpdate, {
+                        start: this._getState().start,
+                        end: this._getState().end,
+                        shouldRender: true,
+                        tag: this._activeTag
+                    });
+                }
+            }
+        };
+        this._onHandlerPointerUp = (e) => {
+            if (this._activeState) {
+                if (this._activeTag === DataZoomActiveTag.background) {
+                    this._setStateAttr(this._getState().start, this._getState().end);
+                    this._dispatchEvent(IDataZoomInteractiveEvent.stateUpdate, {
+                        start: this._getState().start,
+                        end: this._getState().end,
+                        shouldRender: true,
+                        tag: this._activeTag
+                    });
+                }
             }
+            this._activeState = false;
+            this._dispatchEvent(IDataZoomInteractiveEvent.dataZoomUpdate, {
+                start: this._getState().start,
+                end: this._getState().end,
+                shouldRender: true,
+                tag: this._activeTag
+            });
+            this.clearDragEvents();
+        };
+        this._initAttrs(props);
+    }
+    setAttributes(props) {
+        var _a, _b, _c, _d, _e, _f;
+        this._initAttrs(props);
+        this._onHandlerPointerMove =
+            ((_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.delayTime) !== null && _b !== void 0 ? _b : 0) === 0
+                ? this._pointerMove
+                : delayMap$1[(_d = (_c = this.attribute) === null || _c === void 0 ? void 0 : _c.delayType) !== null && _d !== void 0 ? _d : 'debounce'](this._pointerMove, (_f = (_e = this.attribute) === null || _e === void 0 ? void 0 : _e.delayTime) !== null && _f !== void 0 ? _f : 0);
+    }
+    _initAttrs(props) {
+        this.stage = props.stage;
+        this.attribute = props.attribute;
+        this._startHandlerMask = props.startHandlerMask;
+        this._endHandlerMask = props.endHandlerMask;
+        this._middleHandlerSymbol = props.middleHandlerSymbol;
+        this._middleHandlerRect = props.middleHandlerRect;
+        this._selectedBackground = props.selectedBackground;
+        this._background = props.background;
+        this._previewGroup = props.previewGroup;
+        this._selectedPreviewGroup = props.selectedPreviewGroup;
+        this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig;
+        this._getState = props.getState;
+        this._setState = props.setState;
+        const { width, height } = this._getLayoutAttrFromConfig();
+        this._spanCache = this._getState().end - this._getState().start;
+        const isHorizontal = this.attribute.orient === 'top' || this.attribute.orient === 'bottom';
+        this._layoutCache.size = isHorizontal ? width : height;
+        this._layoutCache.attPos = isHorizontal ? 'x' : 'y';
+        this._layoutCache.attSize = isHorizontal ? 'width' : 'height';
+        this._getGlobalTransMatrix = props.getGlobalTransMatrix;
+    }
+    clearDragEvents() {
+        const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+        const triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+        triggers.forEach((trigger) => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        this.off('pointermove', this._onHandlerPointerMove, {
+            capture: true
+        });
+    }
+    clearVGlobalEvents() {
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+    }
+    bindEvents() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const { brushSelect } = this.attribute;
+        (_a = this._startHandlerMask) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
+        (_b = this._endHandlerMask) === null || _b === void 0 ? void 0 : _b.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'end'));
+        (_c = this._middleHandlerSymbol) === null || _c === void 0 ? void 0 : _c.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'middleSymbol'));
+        (_d = this._middleHandlerRect) === null || _d === void 0 ? void 0 : _d.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'middleRect'));
+        const selectedTag = brushSelect ? 'background' : 'middleRect';
+        (_e = this._selectedBackground) === null || _e === void 0 ? void 0 : _e.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
+        brushSelect &&
+            ((_f = this._background) === null || _f === void 0 ? void 0 : _f.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'background')));
+        brushSelect &&
+            ((_g = this._previewGroup) === null || _g === void 0 ? void 0 : _g.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'background')));
+        (_h = this._selectedPreviewGroup) === null || _h === void 0 ? void 0 : _h.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+    }
+    _setStateAttr(start, end) {
+        const { zoomLock = false, minSpan = 0, maxSpan = 1 } = this.attribute;
+        const span = end - start;
+        if (span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan)) {
+            return;
+        }
+        this._spanCache = span;
+        this._setState({ start, end });
+    }
+    _moveZoomWithMiddle(dis) {
+        const { start: staetState, end: endState } = this._getState();
+        if (dis > 0 && endState + dis > 1) {
+            dis = 1 - endState;
+        }
+        else if (dis < 0 && staetState + dis < 0) {
+            dis = -staetState;
+        }
+        return {
+            start: clamp(staetState + dis, 0, 1),
+            end: clamp(endState + dis, 0, 1)
+        };
+    }
+    _moveZoomWithHandler(statePos, handler) {
+        const { start, end } = this._getState();
+        let newStart = start;
+        let newEnd = end;
+        if (handler === 'start') {
+            if (statePos > end) {
+                newStart = end;
+                newEnd = statePos;
+                this._activeTag = DataZoomActiveTag.endHandler;
+            }
+            else {
+                newStart = statePos;
+            }
+        }
+        else if (handler === 'end') {
+            if (statePos < start) {
+                newEnd = start;
+                newStart = statePos;
+                this._activeTag = DataZoomActiveTag.startHandler;
+            }
+            else {
+                newEnd = statePos;
+            }
+        }
+        return {
+            start: clamp(newStart, 0, 1),
+            end: clamp(newEnd, 0, 1)
+        };
+    }
+    _moveZoomWithBackground(statePos) {
+        const { position } = this._getLayoutAttrFromConfig();
+        const { attSize } = this._layoutCache;
+        const startPos = (this._activeCache.startPos[this._layoutCache.attPos] - position[this._layoutCache.attPos]) /
+            this._getLayoutAttrFromConfig()[attSize];
+        const endPos = statePos;
+        let start = clamp(startPos, 0, 1);
+        let end = clamp(endPos, 0, 1);
+        if (start > end) {
+            [start, end] = [end, start];
+        }
+        return { start, end };
+    }
+    _eventPosToStagePos(e) {
+        var _a, _b;
+        const result = { x: 0, y: 0 };
+        const stagePoints = (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
+        this._getGlobalTransMatrix().transformPoint(stagePoints, result);
+        return result;
+    }
+    _dispatchEvent(eventName, details) {
+        this.emit(eventName, details);
+    }
+}
+
+function loadDataZoomComponent() {
+    loadTagComponent();
+    registerRect();
+    registerSymbol();
+    registerArea();
+    registerLine();
+}
+
+loadDataZoomComponent();
+class DataZoom extends AbstractComponent {
+    constructor(attributes, options) {
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, DataZoom.defaultAttributes, attributes));
+        this.name = 'dataZoom';
+        this._state = { start: 0, end: 1 };
+        this.getLayoutAttrFromConfig = () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this._layoutCacheFromConfig) {
+                return this._layoutCacheFromConfig;
+            }
+            const { position: positionConfig, size, orient, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, backgroundStyle = {} } = this.attribute;
+            const { width: widthConfig, height: heightConfig } = size;
+            const middleHandlerSize = (_b = (_a = middleHandlerStyle.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 10;
+            let width;
+            let height;
+            let position;
+            if (middleHandlerStyle.visible) {
+                if (this._isHorizontal) {
+                    width = widthConfig;
+                    height = heightConfig - middleHandlerSize;
+                    position = {
+                        x: positionConfig.x,
+                        y: positionConfig.y + middleHandlerSize
+                    };
+                }
+                else {
+                    width = widthConfig - middleHandlerSize;
+                    height = heightConfig;
+                    position = {
+                        x: positionConfig.x + (orient === 'left' ? middleHandlerSize : 0),
+                        y: positionConfig.y
+                    };
+                }
+            }
+            else {
+                width = widthConfig;
+                height = heightConfig;
+                position = positionConfig;
+            }
+            const startHandlerSize = (_c = startHandlerStyle.size) !== null && _c !== void 0 ? _c : (this._isHorizontal ? height : width);
+            const endHandlerSize = (_d = endHandlerStyle.size) !== null && _d !== void 0 ? _d : (this._isHorizontal ? height : width);
+            if (startHandlerStyle.visible) {
+                if (this._isHorizontal) {
+                    width -= (startHandlerSize + endHandlerSize) / 2;
+                    position = {
+                        x: position.x + startHandlerSize / 2,
+                        y: position.y
+                    };
+                }
+                else {
+                    height -= (startHandlerSize + endHandlerSize) / 2;
+                    position = {
+                        x: position.x,
+                        y: position.y + startHandlerSize / 2
+                    };
+                }
+            }
+            height += ((_e = backgroundStyle.lineWidth) !== null && _e !== void 0 ? _e : 2) / 2;
+            width += ((_f = backgroundStyle.lineWidth) !== null && _f !== void 0 ? _f : 2) / 2;
+            this._layoutCacheFromConfig = {
+                position,
+                width,
+                height
+            };
+            return this._layoutCacheFromConfig;
+        };
+        const { start, end, orient } = this.attribute;
+        this._isHorizontal = orient === 'top' || orient === 'bottom';
+        start && (this._state.start = start);
+        end && (this._state.end = end);
+        this._renderer = new DataZoomRenderer(this._getRendererAttrs());
+        this._interaction = new DataZoomInteraction(this._getInteractionAttrs());
+    }
+    _getRendererAttrs() {
+        return {
+            attribute: this.attribute,
+            getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+            setState: (state) => {
+                this._state = state;
+            },
+            getState: () => this._state,
+            getContainer: () => this._container
+        };
+    }
+    _getInteractionAttrs() {
+        return {
+            stage: this.stage,
+            attribute: this.attribute,
+            startHandlerMask: this._renderer.startHandlerMask,
+            endHandlerMask: this._renderer.endHandlerMask,
+            middleHandlerSymbol: this._renderer.middleHandlerSymbol,
+            middleHandlerRect: this._renderer.middleHandlerRect,
+            selectedBackground: this._renderer.selectedBackground,
+            background: this._renderer.background,
+            previewGroup: this._renderer.previewGroup,
+            selectedPreviewGroup: this._renderer.selectedPreviewGroup,
+            getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+            setState: (state) => {
+                this._state = state;
+            },
+            getState: () => this._state,
+            getGlobalTransMatrix: () => this.globalTransMatrix
+        };
+    }
+    bindEvents() {
+        if (this.attribute.disableTriggerEvent) {
+            this.setAttribute('childrenPickable', false);
+            return;
+        }
+        this._interaction.bindEvents();
+        this._interaction.on(IDataZoomInteractiveEvent.stateUpdate, ({ shouldRender }) => {
+            if (shouldRender) {
+                this._renderer.renderDataZoom(true);
+            }
+        });
+        this._interaction.on(IDataZoomInteractiveEvent.dataZoomUpdate, ({ start, end, tag }) => {
+            this._dispatchEvent(IDataZoomEvent.dataZoomChange, { start, end, tag });
+        });
+        this._interaction.on(IDataZoomInteractiveEvent.maskUpdate, () => {
+            this._renderer.renderDragMask();
+        });
+        if (this.attribute.showDetail === 'auto') {
+            this._container.addEventListener('pointerenter', () => {
+                this._renderer.showText = true;
+                this._renderer.renderText();
+            });
+            this._container.addEventListener('pointerleave', () => {
+                this._renderer.showText = false;
+                this._renderer.renderText();
+            });
+        }
+    }
+    setAttributes(params, forceUpdateTag) {
+        const { start, end } = this.attribute;
+        start && (this._state.start = start);
+        end && (this._state.end = end);
+        this._renderer.setAttributes(this._getRendererAttrs());
+        this._interaction.setAttributes(this._getInteractionAttrs());
+        super.setAttributes(params, forceUpdateTag);
+    }
+    render() {
+        this._layoutCacheFromConfig = null;
+        this._container = this.createOrUpdateChild('datazoom-container', {}, 'group');
+        this._renderer.renderDataZoom();
+        this._interaction.setAttributes(this._getInteractionAttrs());
+    }
+    release(all) {
+        super.release(all);
+        this._interaction.clearDragEvents();
+    }
+    setStartAndEnd(start, end) {
+        const { start: startState, end: endState } = this._state;
+        if (isValid(start) && isValid(end) && (start !== startState || end !== endState)) {
+            this._state = { start, end };
+            this._renderer.renderDataZoom(true);
+            this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+                start,
+                end
+            });
         }
     }
     setPreviewData(data) {
-        this._previewData = data;
+        this._renderer.previewData = data;
     }
     setText(text, tag) {
         if (tag === 'start') {
-            this._startText.setAttribute('text', text);
+            this._renderer.startText.setAttribute('text', text);
         }
         else {
-            this._endText.setAttribute('text', text);
+            this._renderer.endText.setAttribute('text', text);
         }
     }
     getStartValue() {
-        return this._startValue;
+        return this._renderer.startValue;
     }
     getEndTextValue() {
-        return this._endValue;
+        return this._renderer.endValue;
     }
     getMiddleHandlerSize() {
         var _a, _b, _c, _d;
@@ -25488,26 +25840,19 @@ class DataZoom extends AbstractComponent {
         return Math.max(middleHandlerRectSize, ...array(middleHandlerSymbolSize));
     }
     setPreviewPointsX(callback) {
-        isFunction(callback) && (this._previewPointsX = callback);
+        isFunction(callback) && (this._renderer.previewPointsX = callback);
     }
     setPreviewPointsY(callback) {
-        isFunction(callback) && (this._previewPointsY = callback);
+        isFunction(callback) && (this._renderer.previewPointsY = callback);
     }
     setPreviewPointsX1(callback) {
-        isFunction(callback) && (this._previewPointsX1 = callback);
+        isFunction(callback) && (this._renderer.previewPointsX1 = callback);
     }
     setPreviewPointsY1(callback) {
-        isFunction(callback) && (this._previewPointsY1 = callback);
+        isFunction(callback) && (this._renderer.previewPointsY1 = callback);
     }
     setStatePointToData(callback) {
-        isFunction(callback) && (this._statePointToData = callback);
-    }
-    release(all) {
-        super.release(all);
-        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
-            passive: false
-        });
-        this._clearDragEvents();
+        isFunction(callback) && (this._renderer.statePointToData = callback);
     }
 }
 DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
@@ -31699,7 +32044,7 @@ class Brush extends AbstractComponent {
     _addBrushMask() {
         var _a;
         const { brushStyle, hasMask } = this.attribute;
-        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? (_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1 : 0 }));
+        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? ((_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1) : 0 }));
         brushMask.name = `brush-${Date.now()}`;
         this._operatingMask = brushMask;
         this._container.add(brushMask);
@@ -34193,6 +34538,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.0.18";
+const version = "1.0.19";
 
-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, 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 };
+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 };