@visactor/vrender-components 0.16.3-alpha.0 → 0.16.4

package/es/brush/type.d.ts

@@ -1,4 +1,5 @@
 import type { GraphicEventType, IGroupGraphicAttribute, IPolygonGraphicAttribute } from '@visactor/vrender-core';
+import type { IDelayType } from '../interface';
 export interface BrushAttributes extends IGroupGraphicAttribute {
     trigger?: GraphicEventType;
     updateTrigger?: GraphicEventType;
@@ -25,7 +26,6 @@ export interface BrushAttributes extends IGroupGraphicAttribute {
 }
 export type IBrushType = 'x' | 'y' | 'rect' | 'polygon';
 export type IBrushMode = 'single' | 'multiple';
-export type IDelayType = 'debounce' | 'throttle';
 export declare enum IOperateType {
     drawStart = "drawStart",
     drawEnd = "drawEnd",

package/es/brush/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/brush/type.ts"],"names":[],"mappings":"AA0FA,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IACtB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;AAC3B,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB","file":"type.js","sourcesContent":["import type { GraphicEventType, IGroupGraphicAttribute, IPolygonGraphicAttribute } from '@visactor/vrender-core';\n\nexport interface BrushAttributes extends IGroupGraphicAttribute {\n  /**\n   * 触发框选的事件名称\n   */\n  trigger?: GraphicEventType;\n  /**\n   * 更新框选的事件名称\n   */\n  updateTrigger?: GraphicEventType;\n  /**\n   * 结束框选的事件名称\n   */\n  endTrigger?: GraphicEventType;\n  /**\n   * 清空框选的事件名称\n   */\n  resetTrigger?: GraphicEventType;\n  /**\n   * 可交互范围\n   */\n  interactiveRange?: {\n    minX: number;\n    maxX: number;\n    minY: number;\n    maxY: number;\n  };\n  /**\n   * 框选模式\n   * @default 'single'\n   */\n  brushMode?: IBrushMode;\n  /**\n   * 框选类型\n   * @default 'rect'\n   */\n  brushType?: IBrushType;\n  /**\n   * brushType为'y'时, x的左右边界位置, 不配置的话不会生效\n   * @default [0,0]\n   */\n  xRange?: [number, number];\n  /**\n   * brushType为'x'时, y的左右边界位置, 不配置的话不会生效\n   * @default [0,0]\n   */\n  yRange?: [number, number];\n  /** 是否展示brush mask */\n  hasMask?: boolean;\n  /**\n   * 框选区域的样式\n   */\n  brushStyle?: IPolygonGraphicAttribute;\n  /**\n   * 是否可被平移\n   * @default true\n   */\n  brushMoved?: boolean;\n  /**\n   * brushMode为'single'时，是否单击清除选框\n   * @default true\n   */\n  removeOnClick?: boolean;\n  /**\n   * brush选框的大小阈值\n   */\n  sizeThreshold?: number;\n  /**\n   * 事件触发延迟类型\n   * @default 'throttle'\n   */\n  delayType?: IDelayType;\n  /**\n   * 事件触发延迟时长\n   * @default 0\n   */\n  delayTime?: number;\n  /**\n   * 关闭交互效果\n   * @default false\n   */\n  disableTriggerEvent?: boolean;\n}\n\nexport type IBrushType = 'x' | 'y' | 'rect' | 'polygon';\nexport type IBrushMode = 'single' | 'multiple';\n\nexport type IDelayType = 'debounce' | 'throttle';\n\nexport enum IOperateType {\n  drawStart = 'drawStart',\n  drawEnd = 'drawEnd',\n  drawing = 'drawing',\n  moving = 'moving',\n  moveStart = 'moveStart',\n  moveEnd = 'moveEnd',\n  brushClear = 'brushClear'\n}\n"]}
+{"version":3,"sources":["../src/brush/type.ts"],"names":[],"mappings":"AAyFA,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IACtB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;AAC3B,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB","file":"type.js","sourcesContent":["import type { GraphicEventType, IGroupGraphicAttribute, IPolygonGraphicAttribute } from '@visactor/vrender-core';\nimport type { IDelayType } from '../interface';\n\nexport interface BrushAttributes extends IGroupGraphicAttribute {\n  /**\n   * 触发框选的事件名称\n   */\n  trigger?: GraphicEventType;\n  /**\n   * 更新框选的事件名称\n   */\n  updateTrigger?: GraphicEventType;\n  /**\n   * 结束框选的事件名称\n   */\n  endTrigger?: GraphicEventType;\n  /**\n   * 清空框选的事件名称\n   */\n  resetTrigger?: GraphicEventType;\n  /**\n   * 可交互范围\n   */\n  interactiveRange?: {\n    minX: number;\n    maxX: number;\n    minY: number;\n    maxY: number;\n  };\n  /**\n   * 框选模式\n   * @default 'single'\n   */\n  brushMode?: IBrushMode;\n  /**\n   * 框选类型\n   * @default 'rect'\n   */\n  brushType?: IBrushType;\n  /**\n   * brushType为'y'时, x的左右边界位置, 不配置的话不会生效\n   * @default [0,0]\n   */\n  xRange?: [number, number];\n  /**\n   * brushType为'x'时, y的左右边界位置, 不配置的话不会生效\n   * @default [0,0]\n   */\n  yRange?: [number, number];\n  /** 是否展示brush mask */\n  hasMask?: boolean;\n  /**\n   * 框选区域的样式\n   */\n  brushStyle?: IPolygonGraphicAttribute;\n  /**\n   * 是否可被平移\n   * @default true\n   */\n  brushMoved?: boolean;\n  /**\n   * brushMode为'single'时，是否单击清除选框\n   * @default true\n   */\n  removeOnClick?: boolean;\n  /**\n   * brush选框的大小阈值\n   */\n  sizeThreshold?: number;\n  /**\n   * 事件触发延迟类型\n   * @default 'throttle'\n   */\n  delayType?: IDelayType;\n  /**\n   * 事件触发延迟时长\n   * @default 0\n   */\n  delayTime?: number;\n  /**\n   * 关闭交互效果\n   * @default false\n   */\n  disableTriggerEvent?: boolean;\n}\n\nexport type IBrushType = 'x' | 'y' | 'rect' | 'polygon';\nexport type IBrushMode = 'single' | 'multiple';\n\nexport enum IOperateType {\n  drawStart = 'drawStart',\n  drawEnd = 'drawEnd',\n  drawing = 'drawing',\n  moving = 'moving',\n  moveStart = 'moveStart',\n  moveEnd = 'moveEnd',\n  brushClear = 'brushClear'\n}\n"]}

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

@@ -8,6 +8,12 @@ export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
     orient: string;
     showDetail: string;
     brushSelect: boolean;
+    zoomLock: boolean;
+    minSpan: number;
+    maxSpan: number;
+    delayType: string;
+    delayTime: number;
+    realTime: boolean;
     backgroundStyle: {
         fill: string;
         stroke: string;

package/es/data-zoom/config.js

@@ -9,6 +9,12 @@ export const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
     orient: "bottom",
     showDetail: "auto",
     brushSelect: !0,
+    zoomLock: !1,
+    minSpan: 0,
+    maxSpan: 1,
+    delayType: "throttle",
+    delayTime: 0,
+    realTime: !0,
     backgroundStyle: {
         fill: "white",
         stroke: "#D1DBEE",

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,kDAA6B,CAAA;IAC7B,8CAAyB,CAAA;IACzB,oDAA+B,CAAA;IAC/B,8CAAyB,CAAA;AAC3B,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B;AACD,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,SAAS;YACjB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export enum DataZoomActiveTag {\n  startHandler = 'startHandler',\n  endHandler = 'endHandler',\n  middleHandler = 'middleHandler',\n  background = 'background'\n}\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}
+{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,kDAA6B,CAAA;IAC7B,8CAAyB,CAAA;IACzB,oDAA+B,CAAA;IAC/B,8CAAyB,CAAA;AAC3B,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B;AACD,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,IAAI;IACd,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,SAAS;YACjB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export enum DataZoomActiveTag {\n  startHandler = 'startHandler',\n  endHandler = 'endHandler',\n  middleHandler = 'middleHandler',\n  background = 'background'\n}\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  zoomLock: false,\n  minSpan: 0,\n  maxSpan: 1,\n  delayType: 'throttle',\n  delayTime: 0,\n  realTime: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}

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

@@ -10,6 +10,12 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         orient: string;
         showDetail: string;
         brushSelect: boolean;
+        zoomLock: boolean;
+        minSpan: number;
+        maxSpan: number;
+        delayType: string;
+        delayTime: number;
+        realTime: boolean;
         backgroundStyle: {
             fill: string;
             stroke: string;
@@ -135,16 +141,18 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         start: number;
         end: number;
     };
-    private _previewCallbackX;
-    private _previewCallbackY;
-    private _previewCallbackX1;
-    private _previewCallbackY1;
+    protected _spanCache: number;
+    private _previewPointsX;
+    private _previewPointsY;
+    private _previewPointsX1;
+    private _previewPointsY1;
     private _updateStateCallback;
     private _statePointToData;
     private _layoutAttrFromConfig;
     constructor(attributes: DataZoomAttributes);
     protected bindEvents(): void;
     protected dragMaskSize(): number;
+    protected setStateAttr(start: number, end: number, shouldRender: boolean): void;
     protected eventPosToStagePos(e: FederatedPointerEvent): {
         x: number;
         y: number;
@@ -177,9 +185,9 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     getEndTextValue(): string | number;
     getMiddleHandlerSize(): number;
     setUpdateStateCallback(callback: (start: number, end: number) => void): void;
-    setPreviewCallbackX(callback: (d: any) => number): void;
-    setPreviewCallbackY(callback: (d: any) => number): void;
-    setPreviewCallbackX1(callback: (d: any) => number): void;
-    setPreviewCallbackY1(callback: (d: any) => number): void;
+    setPreviewPointsX(callback: (d: any) => number): void;
+    setPreviewPointsY(callback: (d: any) => number): void;
+    setPreviewPointsX1(callback: (d: any) => number): void;
+    setPreviewPointsY1(callback: (d: any) => number): void;
     setStatePointToData(callback: (state: number) => any): void;
 }

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

@@ -10,7 +10,7 @@ var __rest = this && this.__rest || function(s, e) {
 
 import { vglobal, CustomEvent } from "@visactor/vrender-core";
 
-import { array, clamp, isFunction, isValid, merge } from "@visactor/vutils";
+import { array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
@@ -18,6 +18,11 @@ import { Tag } from "../tag";
 
 import { DataZoomActiveTag, DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
 
+const delayMap = {
+    debounce: debounce,
+    throttle: throttle
+};
+
 export class DataZoom extends AbstractComponent {
     constructor(attributes) {
         super(merge({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", 
@@ -47,30 +52,28 @@ export class DataZoom extends AbstractComponent {
             this._activeCache.lastPos = this.eventPosToStagePos(e);
         }, this._onHandlerPointerMove = e => {
             e.stopPropagation();
-            const {start: start, end: end, brushSelect: brushSelect} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
-            this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? this.state.start + dis > this.state.end ? (this.state.start = this.state.end, 
-            this.state.end = this.state.start + dis, this._activeTag = DataZoomActiveTag.endHandler) : this.state.start = this.state.start + dis : this._activeTag === DataZoomActiveTag.endHandler && (this.state.end + dis < this.state.start ? (this.state.end = this.state.start, 
-            this.state.start = this.state.end + dis, this._activeTag = DataZoomActiveTag.startHandler) : this.state.end = this.state.end + dis), 
-            this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), this.state.start = Math.min(Math.max(this.state.start, 0), 1), 
-            this.state.end = Math.min(Math.max(this.state.end, 0), 1), start === this.state.start && end === this.state.end || (this.setAttributes({
-                start: this.state.start,
-                end: this.state.end
-            }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
-            this._dispatchChangeEvent(this.state.start, this.state.end));
+            const {start: startAttr, end: endAttr, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
+            let {start: start, end: end} = this.state;
+            this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, 
+            end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, 
+            start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : 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), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), 
+            realTime && this._updateStateCallback && this._updateStateCallback(start, end), 
+            this._dispatchChangeEvent(start, end));
         };
-        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewCallbackX: previewCallbackX, previewCallbackY: previewCallbackY, previewCallbackX1: previewCallbackX1, previewCallbackY1: previewCallbackY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
-        start && (this.state.start = start), end && (this.state.end = end), this._isHorizontal = "top" === orient || "bottom" === orient, 
-        this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", 
-        this._layoutCache.attSize = this._isHorizontal ? "width" : "height", this._activeCache.startPos = position, 
-        this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
-        previewData && (this._previewData = previewData), isFunction(previewCallbackX) && (this._previewCallbackX = previewCallbackX), 
-        isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY), isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), 
-        isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1), 
-        isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
+        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewPointsX: previewPointsX, previewPointsY: previewPointsY, previewPointsX1: previewPointsX1, previewPointsY1: previewPointsY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
+        start && (this.state.start = start), end && (this.state.end = end), this._spanCache = this.state.end - this.state.start, 
+        this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, 
+        this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", 
+        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
+        previewData && (this._previewData = previewData), isFunction(previewPointsX) && (this._previewPointsX = previewPointsX), 
+        isFunction(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), 
+        isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
     }
     bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
-        const {showDetail: showDetail, brushSelect: brushSelect} = this.attribute;
+        const {showDetail: showDetail, brushSelect: brushSelect, delayType: delayType = "throttle", delayTime: delayTime = 0} = this.attribute;
         this._startHandler && this._startHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "start"))), 
         this._endHandler && this._endHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "end"))), 
         this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleSymbol"))), 
@@ -80,10 +83,10 @@ export class DataZoom extends AbstractComponent {
         brushSelect && this._background && this._background.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background"))), 
         brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background"))), 
         this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, selectedTag))), 
-        "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove.bind(this), {
+        "browser" === vglobal.env && (vglobal.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
             capture: !0
         }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
-        this.addEventListener("pointermove", this._onHandlerPointerMove, {
+        this.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove, delayTime), {
             capture: !0
         }), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), 
         "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
@@ -93,6 +96,14 @@ export class DataZoom extends AbstractComponent {
         const {position: position} = this.attribute, {attPos: attPos, max: max} = this._layoutCache;
         return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
     }
+    setStateAttr(start, end, shouldRender) {
+        const {zoomLock: zoomLock = !1, minSpan: minSpan = 0, maxSpan: maxSpan = 1} = this.attribute, span = end - start;
+        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, 
+        this.state.start = start, this.state.end = end, shouldRender && this.setAttributes({
+            start: start,
+            end: end
+        }));
+    }
     eventPosToStagePos(e) {
         var _a, _b, _c;
         const stagePosition = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window.getBoundingClientRect();
@@ -103,15 +114,13 @@ export class DataZoom extends AbstractComponent {
     }
     _onHandlerPointerUp(e) {
         e.preventDefault();
-        const {start: start, end: end, brushSelect: brushSelect} = this.attribute;
+        const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
         if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
             const pos = this.eventPosToStagePos(e);
             this.backgroundDragZoom(this._activeCache.startPos, pos);
         }
-        this._activeState = !1, brushSelect && this.renderDragMask(), start === this.state.start && end === this.state.end || (this.setAttributes({
-            start: this.state.start,
-            end: this.state.end
-        }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
+        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), 
+        this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
         this._dispatchChangeEvent(this.state.start, this.state.end));
     }
     _onHandlerPointerEnter(e) {
@@ -122,13 +131,12 @@ export class DataZoom extends AbstractComponent {
     }
     backgroundDragZoom(startPos, endPos) {
         const {attPos: attPos, max: max} = this._layoutCache, {position: position} = this.attribute, startPosInComponent = startPos[attPos] - position[attPos], endPosInComponent = endPos[attPos] - position[attPos], start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1), end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
-        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : (this.state.start = start, 
-        this.state.end = end);
+        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : this.setStateAttr(start, end, !1);
     }
     moveZoomWithMiddle(middle) {
         let offset = middle - (this.state.start + this.state.end) / 2;
         0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), 
-        this.state.start = this.state.start + offset, this.state.end = this.state.end + offset);
+        this.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
     }
     renderDragMask() {
         const {dragMaskStyle: dragMaskStyle} = this.attribute, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
@@ -341,8 +349,8 @@ export class DataZoom extends AbstractComponent {
     }
     getPreviewLinePoints() {
         const previewPoints = this._previewData.map((d => ({
-            x: this._previewCallbackX && this._previewCallbackX(d),
-            y: this._previewCallbackY && this._previewCallbackY(d)
+            x: this._previewPointsX && this._previewPointsX(d),
+            y: this._previewPointsY && this._previewPointsY(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
@@ -350,10 +358,10 @@ export class DataZoom extends AbstractComponent {
     }
     getPreviewAreaPoints() {
         const previewPoints = this._previewData.map((d => ({
-            x: this._previewCallbackX && this._previewCallbackX(d),
-            y: this._previewCallbackY && this._previewCallbackY(d),
-            x1: this._previewCallbackX1 && this._previewCallbackX1(d),
-            y1: this._previewCallbackY1 && this._previewCallbackY1(d)
+            x: this._previewPointsX && this._previewPointsX(d),
+            y: this._previewPointsY && this._previewPointsY(d),
+            x1: this._previewPointsX1 && this._previewPointsX1(d),
+            y1: this._previewPointsY1 && this._previewPointsY1(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
@@ -425,10 +433,8 @@ export class DataZoom extends AbstractComponent {
     setStartAndEnd(start, end) {
         const {start: startAttr, end: endAttr} = this.attribute;
         isValid(start) && isValid(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, 
-        this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setAttributes({
-            start: start,
-            end: end
-        }), this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end)));
+        this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), 
+        this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end)));
     }
     setPreviewData(data) {
         this._previewData = data;
@@ -450,17 +456,17 @@ export class DataZoom extends AbstractComponent {
     setUpdateStateCallback(callback) {
         isFunction(callback) && (this._updateStateCallback = callback);
     }
-    setPreviewCallbackX(callback) {
-        isFunction(callback) && (this._previewCallbackX = callback);
+    setPreviewPointsX(callback) {
+        isFunction(callback) && (this._previewPointsX = callback);
     }
-    setPreviewCallbackY(callback) {
-        isFunction(callback) && (this._previewCallbackY = callback);
+    setPreviewPointsY(callback) {
+        isFunction(callback) && (this._previewPointsY = callback);
     }
-    setPreviewCallbackX1(callback) {
-        isFunction(callback) && (this._previewCallbackX1 = callback);
+    setPreviewPointsX1(callback) {
+        isFunction(callback) && (this._previewPointsX1 = callback);
     }
-    setPreviewCallbackY1(callback) {
-        isFunction(callback) && (this._previewCallbackY1 = callback);
+    setPreviewPointsY1(callback) {
+        isFunction(callback) && (this._previewPointsY1 = callback);
     }
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);