@visactor/vrender-components 1.0.0-alpha.4 → 1.0.0-alpha.6

package/es/brush/config.d.ts

@@ -1,7 +1,7 @@
 export declare const DEFAULT_BRUSH_ATTRIBUTES: {
     trigger: string;
     updateTrigger: string;
-    endTrigger: string;
+    endTrigger: string[];
     resetTrigger: string;
     hasMask: boolean;
     brushMode: string;
@@ -17,10 +17,10 @@ export declare const DEFAULT_BRUSH_ATTRIBUTES: {
     delayType: string;
     delayTime: number;
     interactiveRange: {
-        y1: number;
-        y2: number;
-        x1: number;
-        x2: number;
+        minY: number;
+        maxY: number;
+        minX: number;
+        maxX: number;
     };
 };
 export declare const DEFAULT_SIZE_THRESHOLD = 5;

package/es/brush/config.js

@@ -1,7 +1,7 @@
 export const DEFAULT_BRUSH_ATTRIBUTES = {
     trigger: "pointerdown",
     updateTrigger: "pointermove",
-    endTrigger: "pointerup",
+    endTrigger: [ "pointerup", "pointerleave" ],
     resetTrigger: "pointerupoutside",
     hasMask: !0,
     brushMode: "single",
@@ -17,10 +17,10 @@ export const DEFAULT_BRUSH_ATTRIBUTES = {
     delayType: "throttle",
     delayTime: 10,
     interactiveRange: {
-        y1: -1 / 0,
-        y2: 1 / 0,
-        x1: -1 / 0,
-        x2: 1 / 0
+        minY: -1 / 0,
+        maxY: 1 / 0,
+        minX: -1 / 0,
+        maxX: 1 / 0
     }
 };
 

package/es/brush/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/brush/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,OAAO,EAAE,aAAa;IACtB,aAAa,EAAE,aAAa;IAC5B,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,kBAAkB;IAChC,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;QAChB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,CAAC;KACf;IACD,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE;QAChB,EAAE,EAAE,CAAC,QAAQ;QACb,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,CAAC,QAAQ;QACb,EAAE,EAAE,QAAQ;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_BRUSH_ATTRIBUTES = {\n  trigger: 'pointerdown',\n  updateTrigger: 'pointermove',\n  endTrigger: 'pointerup',\n  resetTrigger: 'pointerupoutside',\n  hasMask: true,\n  brushMode: 'single',\n  brushType: 'rect',\n  brushStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2,\n    stroke: '#B0C8F9',\n    strokeWidth: 2\n  },\n  brushMoved: true,\n  removeOnClick: true,\n  delayType: 'throttle',\n  delayTime: 10,\n  interactiveRange: {\n    y1: -Infinity,\n    y2: Infinity,\n    x1: -Infinity,\n    x2: Infinity\n  }\n};\n\nexport const DEFAULT_SIZE_THRESHOLD = 5;\n"]}
+{"version":3,"sources":["../src/brush/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,OAAO,EAAE,aAAa;IACtB,aAAa,EAAE,aAAa;IAC5B,UAAU,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC;IACzC,YAAY,EAAE,kBAAkB;IAChC,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;QAChB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,CAAC;KACf;IACD,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC,QAAQ;QACf,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,QAAQ;QACf,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_BRUSH_ATTRIBUTES = {\n  trigger: 'pointerdown',\n  updateTrigger: 'pointermove',\n  endTrigger: ['pointerup', 'pointerleave'],\n  resetTrigger: 'pointerupoutside',\n  hasMask: true,\n  brushMode: 'single',\n  brushType: 'rect',\n  brushStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2,\n    stroke: '#B0C8F9',\n    strokeWidth: 2\n  },\n  brushMoved: true,\n  removeOnClick: true,\n  delayType: 'throttle',\n  delayTime: 10,\n  interactiveRange: {\n    minY: -Infinity,\n    maxY: Infinity,\n    minX: -Infinity,\n    maxX: Infinity\n  }\n};\n\nexport const DEFAULT_SIZE_THRESHOLD = 5;\n"]}

package/es/brush/type.d.ts

@@ -33,5 +33,6 @@ export declare enum IOperateType {
     moving = "moving",
     moveStart = "moveStart",
     moveEnd = "moveEnd",
+    brushActive = "brushActive",
     brushClear = "brushClear"
 }

package/es/brush/type.js

@@ -3,6 +3,6 @@ export var IOperateType;
 !function(IOperateType) {
     IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", 
     IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", 
-    IOperateType.brushClear = "brushClear";
+    IOperateType.brushActive = "brushActive", IOperateType.brushClear = "brushClear";
 }(IOperateType || (IOperateType = {}));
 //# sourceMappingURL=type.js.map

package/es/brush/type.js.map

@@ -1 +1 @@
-{"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 | GraphicEventType[];\n  /**\n   * 更新框选的事件名称\n   */\n  updateTrigger?: GraphicEventType | GraphicEventType[];\n  /**\n   * 结束框选的事件名称\n   */\n  endTrigger?: GraphicEventType | GraphicEventType[];\n  /**\n   * 清空框选的事件名称\n   */\n  resetTrigger?: GraphicEventType | 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"]}
+{"version":3,"sources":["../src/brush/type.ts"],"names":[],"mappings":"AAyFA,MAAM,CAAN,IAAY,YASX;AATD,WAAY,YAAY;IACtB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,2CAA2B,CAAA;IAC3B,yCAAyB,CAAA;AAC3B,CAAC,EATW,YAAY,KAAZ,YAAY,QASvB","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 | GraphicEventType[];\n  /**\n   * 更新框选的事件名称\n   */\n  updateTrigger?: GraphicEventType | GraphicEventType[];\n  /**\n   * 结束框选的事件名称\n   */\n  endTrigger?: GraphicEventType | GraphicEventType[];\n  /**\n   * 清空框选的事件名称\n   */\n  resetTrigger?: GraphicEventType | 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   * 是否单击空白处, 清除选框\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  brushActive = 'brushActive',\n  brushClear = 'brushClear'\n}\n"]}

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

@@ -158,12 +158,14 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     constructor(attributes: DataZoomAttributes, options?: ComponentOptions);
     setAttributes(params: Partial<Required<DataZoomAttributes>>, forceUpdateTag?: boolean): void;
     protected bindEvents(): void;
+    private _handleTouchMove;
     protected dragMaskSize(): number;
     protected setStateAttr(start: number, end: number, shouldRender: boolean): void;
     protected eventPosToStagePos(e: FederatedPointerEvent): {
         x: number;
         y: number;
     };
+    private _clearDragEvents;
     private _onHandlerPointerDown;
     private _pointerMove;
     private _onHandlerPointerMove;
@@ -199,4 +201,5 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     setPreviewPointsX1(callback: (d: any) => number): void;
     setPreviewPointsY1(callback: (d: any) => number): void;
     setStatePointToData(callback: (state: number) => any): void;
+    release(all?: boolean): void;
 }

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

@@ -22,6 +22,8 @@ import { DataZoomActiveTag } from "./type";
 
 import { loadDataZoomComponent } from "./register";
 
+import { getEndTriggersOfDrag } from "../util/event";
+
 const delayMap = {
     debounce: debounce,
     throttle: throttle
@@ -58,20 +60,26 @@ export class DataZoom extends AbstractComponent {
         }, this.state = {
             start: 0,
             end: 1
-        }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
-            e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, 
+        }, this._statePointToData = state => state, this._handleTouchMove = e => {
+            this._activeState && e.preventDefault();
+        }, this._onHandlerPointerDown = (e, tag) => {
+            this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, 
             this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, 
             this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
             this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
             this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, 
             this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), 
-            this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+            this._activeCache.lastPos = this.eventPosToStagePos(e);
+            const evtTarget = "browser" === vglobal.env ? vglobal : this.stage, triggers = getEndTriggersOfDrag();
+            evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
                 capture: !0
-            }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)), this.addEventListener("pointermove", this._onHandlerPointerMove, {
+            }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
                 capture: !0
-            });
+            }), triggers.forEach((trigger => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            }));
         }, this._pointerMove = e => {
-            e.stopPropagation();
+            e.preventDefault();
             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, 
@@ -86,7 +94,6 @@ export class DataZoom extends AbstractComponent {
             }));
         }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), 
         this._onHandlerPointerUp = e => {
-            e.preventDefault();
             const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
             if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
                 const pos = this.eventPosToStagePos(e);
@@ -96,11 +103,7 @@ export class DataZoom extends AbstractComponent {
                 start: this.state.start,
                 end: this.state.end,
                 tag: this._activeTag
-            }), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-                capture: !0
-            }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-                capture: !0
-            }), this.removeEventListener("pointerup", this._onHandlerPointerUp);
+            }), this._clearDragEvents();
         };
         const {position: position, showDetail: showDetail} = attributes;
         this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
@@ -121,9 +124,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))), 
-        this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), 
         "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
-        this.addEventListener("pointerleave", this._onHandlerPointerLeave));
+        this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+            passive: !1
+        });
     }
     dragMaskSize() {
         const {position: position} = this.attribute, {attPos: attPos, max: max} = this._layoutCache;
@@ -144,11 +148,21 @@ export class DataZoom extends AbstractComponent {
             y: 0
         };
     }
+    _clearDragEvents() {
+        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage, triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+        }), triggers.forEach((trigger => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        })), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+        });
+    }
     _onHandlerPointerEnter(e) {
-        e.stopPropagation(), this._showText = !0, this.renderText();
+        this._showText = !0, this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        e.stopPropagation(), this._showText = !1, this.renderText();
+        this._showText = !1, this.renderText();
     }
     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);
@@ -577,6 +591,11 @@ export class DataZoom extends AbstractComponent {
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);
     }
+    release(all) {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+            passive: !1
+        }), this._clearDragEvents();
+    }
 }
 
 DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;