@visactor/vgrammar-core 0.7.7 → 0.8.0

package/es/interactions/view-drag-mixin.js

@@ -0,0 +1,46 @@
+import { isNil } from "@visactor/vutils";
+
+import { handleScrolling } from "./view-utils";
+
+export class ViewDragMixin {
+    _shouldTriggerDragByPointer(e) {
+        if (!isNil(e.pointerId)) {
+            const shouldStart = isNil(this._pointerId) || this._pointerId === e.pointerId;
+            return this._pointerId = e.pointerId, shouldStart;
+        }
+        return !0;
+    }
+    _shouldStart(e) {
+        return this._shouldTriggerDragByPointer(e);
+    }
+    _shouldUpdate(e) {
+        return this._shouldTriggerDragByPointer(e);
+    }
+    handleDragStart(e, navState, dragOptions) {
+        if (this._shouldStart(e)) return this._dragStart = {
+            x: e.canvasX,
+            y: e.canvasY
+        }, null;
+    }
+    handleDragUpdate(e, navState, dragOptions) {
+        if (this._dragStart && this._shouldUpdate(e)) {
+            if (null == dragOptions ? void 0 : dragOptions.realtime) {
+                const x = e.canvasX - this._dragStart.x, y = e.canvasY - this._dragStart.y;
+                return handleScrolling({
+                    x: x,
+                    y: y
+                }, navState, dragOptions);
+            }
+            return null;
+        }
+    }
+    handleDragEnd(e, navState, dragOptions) {
+        if (!this._dragStart) return;
+        const res = !1 === (null == dragOptions ? void 0 : dragOptions.realtime) ? handleScrolling({
+            x: e.canvasX - this._dragStart.x,
+            y: e.canvasY - this._dragStart.y
+        }, navState, dragOptions) : null;
+        return this._pointerId = null, this._dragStart = null, res;
+    }
+}
+//# sourceMappingURL=view-drag-mixin.js.map

package/es/interactions/view-drag-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interactions/view-drag-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAQzC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,OAAO,aAAa;IAMd,2BAA2B,CAAC,CAAmB;QACvD,IAAI,CAAC,KAAK,CAAE,CAAS,CAAC,SAAS,CAAC,EAAE;YAChC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,KAAM,CAAS,CAAC,SAAS,CAAC;YACvF,IAAI,CAAC,UAAU,GAAI,CAAS,CAAC,SAAS,CAAC;YAEvC,OAAO,WAAW,CAAC;SACpB;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAES,YAAY,CAAC,CAAmB;QACxC,OAAO,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;IAC7C,CAAC;IAES,aAAa,CAAC,CAAmB;QACzC,OAAO,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;IAC7C,CAAC;IAED,eAAe,CACb,CAAmB,EACnB,QAAoD,EACpD,WAAmC;QAEnC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;YACzB,OAAO;SACR;QAED,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,gBAAgB,CACd,CAAmB,EACnB,QAAoD,EACpD,WAAmC;QAEnC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;YAC9C,OAAO;SACR;QAED,IAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,EAAE;YACzB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACxC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACxC,OAAO,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;SACzD;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa,CACX,CAAmB,EACnB,QAAoD,EACpD,WAAmC;QAEnC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QACD,MAAM,GAAG,GACP,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,KAAK;YAC7B,CAAC,CAAC,eAAe,CACb;gBACE,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;gBAChC,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;aACjC,EACD,QAAQ,EACR,WAAW,CACZ;YACH,CAAC,CAAC,IAAI,CAAC;QAEX,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,OAAO,GAAG,CAAC;IACb,CAAC;CACF","file":"view-drag-mixin.js","sourcesContent":["import { isNil } from '@visactor/vutils';\nimport type {\n  InteractionEvent,\n  IViewDragMixin,\n  ViewNavigationRange,\n  ViewDragSimpleOptions,\n  ViewStateByDim\n} from '../types';\nimport { handleScrolling } from './view-utils';\n\nexport class ViewDragMixin implements IViewDragMixin {\n  protected _pointerId: number;\n  protected _dragStart: { x: number; y: number };\n  protected _filterValueX: { start: number; end: number };\n  protected _filterValueY: { start: number; end: number };\n\n  protected _shouldTriggerDragByPointer(e: InteractionEvent) {\n    if (!isNil((e as any).pointerId)) {\n      const shouldStart = isNil(this._pointerId) || this._pointerId === (e as any).pointerId;\n      this._pointerId = (e as any).pointerId;\n\n      return shouldStart;\n    }\n\n    return true;\n  }\n\n  protected _shouldStart(e: InteractionEvent) {\n    return this._shouldTriggerDragByPointer(e);\n  }\n\n  protected _shouldUpdate(e: InteractionEvent) {\n    return this._shouldTriggerDragByPointer(e);\n  }\n\n  handleDragStart(\n    e: InteractionEvent,\n    navState: Partial<Record<'x' | 'y', ViewStateByDim>>,\n    dragOptions?: ViewDragSimpleOptions\n  ): ViewNavigationRange {\n    if (!this._shouldStart(e)) {\n      return;\n    }\n\n    this._dragStart = { x: e.canvasX, y: e.canvasY };\n    return null;\n  }\n\n  handleDragUpdate(\n    e: InteractionEvent,\n    navState: Partial<Record<'x' | 'y', ViewStateByDim>>,\n    dragOptions?: ViewDragSimpleOptions\n  ): ViewNavigationRange {\n    if (!this._dragStart || !this._shouldUpdate(e)) {\n      return;\n    }\n\n    if (dragOptions?.realtime) {\n      const x = e.canvasX - this._dragStart.x;\n      const y = e.canvasY - this._dragStart.y;\n      return handleScrolling({ x, y }, navState, dragOptions);\n    }\n\n    return null;\n  }\n\n  handleDragEnd(\n    e: InteractionEvent,\n    navState: Partial<Record<'x' | 'y', ViewStateByDim>>,\n    dragOptions?: ViewDragSimpleOptions\n  ): ViewNavigationRange {\n    if (!this._dragStart) {\n      return;\n    }\n    const res =\n      dragOptions?.realtime === false\n        ? handleScrolling(\n            {\n              x: e.canvasX - this._dragStart.x,\n              y: e.canvasY - this._dragStart.y\n            },\n            navState,\n            dragOptions\n          )\n        : null;\n\n    this._pointerId = null;\n    this._dragStart = null;\n\n    return res;\n  }\n}\n"]}

package/es/interactions/view-drag.d.ts

@@ -0,0 +1,19 @@
+import type { ViewDragOptions, IView, InteractionEvent, IViewDragMixin } from '../types';
+import { ViewNavigationBase } from './view-navigation-base';
+export interface ViewDrag extends Pick<IViewDragMixin, 'handleDragStart' | 'handleDragEnd' | 'handleDragUpdate'>, ViewNavigationBase<ViewDragOptions> {
+}
+export declare class ViewDrag extends ViewNavigationBase<ViewDragOptions> {
+    static type: string;
+    type: string;
+    static defaultOptions: ViewDragOptions;
+    protected _inited?: boolean;
+    protected handleUpdate: (e: InteractionEvent) => void;
+    constructor(view: IView, option?: ViewDragOptions);
+    protected getEvents(): {
+        type: import("../types").EventType;
+        handler: (e: InteractionEvent) => void;
+    }[];
+    handleStart: (e: InteractionEvent) => void;
+    handleUpdateInner: (e: InteractionEvent) => void;
+    handleEnd: (e: InteractionEvent) => void;
+}

package/es/interactions/view-drag.js

@@ -0,0 +1,47 @@
+import { throttle } from "@visactor/vutils";
+
+import { InteractionEventEnum } from "../graph/enums";
+
+import { ViewNavigationBase } from "./view-navigation-base";
+
+export class ViewDrag extends ViewNavigationBase {
+    constructor(view, option) {
+        super(view, Object.assign({}, ViewDrag.defaultOptions, option)), this.type = ViewDrag.type, 
+        this.handleStart = e => {
+            !e || this.options.shouldStart && !this.options.shouldStart(e) || (this._inited || this._initGrammars(), 
+            this.updateView(InteractionEventEnum.viewDragStart, this.handleDragStart(e, this._state, {
+                reversed: this.options.reversed
+            }), e));
+        }, this.handleUpdateInner = e => {
+            !e || this.options.shouldUpdate && !this.options.shouldUpdate(e) || this.updateView(InteractionEventEnum.viewDragUpdate, this.handleDragUpdate(e, this._state, {
+                reversed: this.options.reversed
+            }), e);
+        }, this.handleEnd = e => {
+            !e || this.options.shouldEnd && !this.options.shouldEnd(e) || this.updateView(InteractionEventEnum.viewDragEnd, this.handleDragEnd(e, this._state, {
+                reversed: this.options.reversed
+            }), e);
+        }, this.handleUpdate = throttle(this.handleUpdateInner, this.options.throttle);
+    }
+    getEvents() {
+        return [ {
+            type: this.options.trigger,
+            handler: this.handleStart
+        }, {
+            type: this.options.endTrigger,
+            handler: this.handleEnd
+        }, {
+            type: this.options.updateTrigger,
+            handler: this.handleUpdate
+        } ];
+    }
+}
+
+ViewDrag.type = "view-drag", ViewDrag.defaultOptions = {
+    realtime: !0,
+    reversed: !1,
+    trigger: "pointerdown",
+    updateTrigger: "pointermove",
+    endTrigger: "pointerup",
+    throttle: 100
+};
+//# sourceMappingURL=view-drag.js.map

package/es/interactions/view-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interactions/view-drag.ts"],"names":[],"mappings":"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","file":"view-drag.js","sourcesContent":["import { throttle } from '@visactor/vutils';\nimport { InteractionEventEnum } from '../graph/enums';\nimport type { ViewDragOptions, IView, InteractionEvent, IViewDragMixin } from '../types';\nimport { ViewNavigationBase } from './view-navigation-base';\n\nexport interface ViewDrag\n  extends Pick<IViewDragMixin, 'handleDragStart' | 'handleDragEnd' | 'handleDragUpdate'>,\n    ViewNavigationBase<ViewDragOptions> {}\nexport class ViewDrag extends ViewNavigationBase<ViewDragOptions> {\n  static type: string = 'view-drag';\n  type: string = ViewDrag.type;\n\n  static defaultOptions: ViewDragOptions = {\n    realtime: true,\n    reversed: false,\n    trigger: 'pointerdown',\n    updateTrigger: 'pointermove',\n    endTrigger: 'pointerup',\n    throttle: 100\n  };\n\n  protected _inited?: boolean;\n\n  protected handleUpdate: (e: InteractionEvent) => void;\n\n  constructor(view: IView, option?: ViewDragOptions) {\n    super(view, Object.assign({}, ViewDrag.defaultOptions, option));\n    this.handleUpdate = throttle(this.handleUpdateInner, this.options.throttle);\n  }\n\n  protected getEvents() {\n    return [\n      { type: this.options.trigger, handler: this.handleStart },\n      { type: this.options.endTrigger, handler: this.handleEnd },\n      { type: this.options.updateTrigger, handler: this.handleUpdate }\n    ];\n  }\n\n  handleStart = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldStart && !this.options.shouldStart(e))) {\n      return;\n    }\n\n    if (!this._inited) {\n      this._initGrammars();\n    }\n\n    this.updateView(\n      InteractionEventEnum.viewDragStart,\n      this.handleDragStart(e, this._state, { reversed: this.options.reversed }),\n      e\n    );\n  };\n\n  handleUpdateInner = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldUpdate && !this.options.shouldUpdate(e))) {\n      return;\n    }\n\n    this.updateView(\n      InteractionEventEnum.viewDragUpdate,\n      this.handleDragUpdate(e, this._state, { reversed: this.options.reversed }),\n      e\n    );\n  };\n\n  handleEnd = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldEnd && !this.options.shouldEnd(e))) {\n      return;\n    }\n\n    this.updateView(\n      InteractionEventEnum.viewDragEnd,\n      this.handleDragEnd(e, this._state, { reversed: this.options.reversed }),\n      e\n    );\n  };\n}\n"]}

package/es/interactions/view-navigation-base.d.ts

@@ -0,0 +1,17 @@
+import type { FilterDataTarget, IBaseInteractionOptions, IDataFilter, IDatazoom, IScale, IScrollbar, IView, InteractionEvent, ViewNavigationBaseOptions, ViewNavigationRange, ViewStateByDim } from '../types';
+import { BaseInteraction } from './base';
+export declare abstract class ViewNavigationBase<T extends ViewNavigationBaseOptions & IBaseInteractionOptions> extends BaseInteraction<T> {
+    options: T;
+    protected _state: Partial<Record<'x' | 'y', ViewStateByDim>>;
+    protected _inited?: boolean;
+    protected _dataFilterX: IDataFilter;
+    protected _dataFilterY: IDataFilter;
+    constructor(view: IView, options?: T);
+    protected _parseLinkedComponent(option: string | IDatazoom | IScrollbar): IDatazoom | IScrollbar;
+    protected _initStateByDim(dim: 'x' | 'y', linkedComponent?: string | IDatazoom | IScrollbar, scale?: string | IScale, dataTarget?: FilterDataTarget): void;
+    protected _initGrammars(): void;
+    protected _updateLinkedComponent(comp: IDatazoom | IScrollbar, newRange: [number, number]): void;
+    updateView(type: string, newRange: ViewNavigationRange, e?: InteractionEvent): void;
+    protected dispatchEvent(type: string, viewRange: ViewNavigationRange, e?: InteractionEvent): void;
+    unbind(): void;
+}

package/es/interactions/view-navigation-base.js

@@ -0,0 +1,78 @@
+import { isNil, isString } from "@visactor/vutils";
+
+import { BaseInteraction } from "./base";
+
+import { ComponentEnum, DataFilterRank, GrammarMarkType } from "../graph/enums";
+
+import { getScaleRangeRatio } from "../util/scale";
+
+export class ViewNavigationBase extends BaseInteraction {
+    constructor(view, options) {
+        super(view, options), this.options = options;
+    }
+    _parseLinkedComponent(option) {
+        if (!option) return null;
+        const comp = isString(option) ? this.view.getMarkById(option) : option;
+        return !comp || comp.markType !== GrammarMarkType.component || comp.componentType !== ComponentEnum.datazoom && comp.componentType !== ComponentEnum.scrollbar ? null : comp;
+    }
+    _initStateByDim(dim, linkedComponent, scale, dataTarget) {
+        const comp = this._parseLinkedComponent(linkedComponent);
+        if (comp) return void (this._state[dim] = {
+            linkedComponent: comp
+        });
+        const scaleGrammar = isNil(scale) ? null : isString(scale) ? this.view.getScaleById(scale) : scale, dataGrammar = isNil(null == dataTarget ? void 0 : dataTarget.data) ? null : isString(dataTarget.data) ? this.view.getDataById(dataTarget.data) : dataTarget.data;
+        if (!scaleGrammar || !dataGrammar) return void (this._state[dim] = {
+            data: dataGrammar,
+            scale: scaleGrammar
+        });
+        dataGrammar.attach(scaleGrammar);
+        const filterByScale = isString(dataTarget.filter) ? (datum, filterValue) => {
+            const scale = scaleGrammar.getScale(), ratio = getScaleRangeRatio(scale, datum[dataTarget.filter]);
+            return ratio >= filterValue[0] && ratio <= filterValue[1];
+        } : dataTarget.filter, dataFilter = {
+            source: `${scaleGrammar.uid}`,
+            rank: DataFilterRank.normal,
+            filter: data => {
+                var _a, _b, _c, _d;
+                const filterValue = "x" === dim ? null === (_b = null === (_a = this._state) || void 0 === _a ? void 0 : _a.x) || void 0 === _b ? void 0 : _b.filterValue : null === (_d = null === (_c = this._state) || void 0 === _c ? void 0 : _c.y) || void 0 === _d ? void 0 : _d.filterValue;
+                if (!filterValue) return data;
+                const filteredData = data.filter((datum => filterByScale(datum, filterValue)));
+                return dataTarget.transform ? dataTarget.transform(filteredData, filterValue) : filteredData;
+            }
+        };
+        "x" === dim ? this._dataFilterX = dataFilter : this._dataFilterY = dataFilter, dataGrammar.addDataFilter(dataFilter), 
+        this._state[dim] = {
+            data: dataGrammar,
+            scale: scaleGrammar
+        };
+    }
+    _initGrammars() {
+        const {enableX: enableX, enableY: enableY, scaleX: scaleX, scaleY: scaleY, dataTargetX: dataTargetX, dataTargetY: dataTargetY, linkedComponentX: linkedComponentX, linkedComponentY: linkedComponentY} = this.options;
+        this._state = {}, !1 !== enableX && this._initStateByDim("x", linkedComponentX, scaleX, dataTargetX), 
+        !1 !== enableY && this._initStateByDim("y", linkedComponentY, scaleY, dataTargetY), 
+        this._inited = !0;
+    }
+    _updateLinkedComponent(comp, newRange) {
+        comp.componentType === ComponentEnum.datazoom ? comp.setStartEndValue(newRange[0], newRange[1]) : comp.setScrollStart(newRange[0]);
+    }
+    updateView(type, newRange, e) {
+        var _a, _b, _c, _d;
+        (null == newRange ? void 0 : newRange.x) && (null === (_b = null === (_a = this._state) || void 0 === _a ? void 0 : _a.x) || void 0 === _b ? void 0 : _b.linkedComponent) && this._updateLinkedComponent(this._state.x.linkedComponent, newRange.x), 
+        (null == newRange ? void 0 : newRange.y) && (null === (_d = null === (_c = this._state) || void 0 === _c ? void 0 : _c.y) || void 0 === _d ? void 0 : _d.linkedComponent) && this._updateLinkedComponent(this._state.y.linkedComponent, newRange.y), 
+        (null == newRange ? void 0 : newRange.needUpdate) && this.view.runAsync(), this.dispatchEvent(type, newRange, e);
+    }
+    dispatchEvent(type, viewRange, e) {
+        this.view.emit(type, {
+            viewRange: viewRange,
+            event: e
+        });
+    }
+    unbind() {
+        super.unbind(), this._state && Object.keys(this._state).forEach((dim => {
+            const {data: data, scale: scale} = this._state[dim];
+            data && scale ? (data.detach(scale), data.removeDataFilter("x" === dim ? this._dataFilterX : this._dataFilterY)) : scale && (scale.setRangeFactor(null), 
+            scale.commit());
+        })), this._state = null;
+    }
+}
+//# sourceMappingURL=view-navigation-base.js.map

package/es/interactions/view-navigation-base.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interactions/view-navigation-base.ts"],"names":[],"mappings":"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","file":"view-navigation-base.js","sourcesContent":["import { isNil, isString } from '@visactor/vutils';\nimport type {\n  FilterDataTarget,\n  IBaseInteractionOptions,\n  IComponent,\n  IDataFilter,\n  IDatazoom,\n  IMark,\n  IScale,\n  IScrollbar,\n  IView,\n  InteractionEvent,\n  ViewNavigationBaseOptions,\n  ViewNavigationRange,\n  ViewStateByDim\n} from '../types';\nimport { BaseInteraction } from './base';\nimport { ComponentEnum, DataFilterRank, GrammarMarkType } from '../graph/enums';\nimport { getScaleRangeRatio } from '../util/scale';\n\nexport abstract class ViewNavigationBase<\n  T extends ViewNavigationBaseOptions & IBaseInteractionOptions\n> extends BaseInteraction<T> {\n  options: T;\n\n  protected _state: Partial<Record<'x' | 'y', ViewStateByDim>>;\n  protected _inited?: boolean;\n  protected _dataFilterX: IDataFilter;\n  protected _dataFilterY: IDataFilter;\n\n  constructor(view: IView, options?: T) {\n    super(view, options);\n    this.options = options;\n  }\n\n  protected _parseLinkedComponent(option: string | IDatazoom | IScrollbar): IDatazoom | IScrollbar {\n    if (!option) {\n      return null;\n    }\n    const comp: IMark = isString(option) ? this.view.getMarkById(option) : option;\n\n    if (\n      comp &&\n      comp.markType === GrammarMarkType.component &&\n      ((comp as IComponent).componentType === ComponentEnum.datazoom ||\n        (comp as IComponent).componentType === ComponentEnum.scrollbar)\n    ) {\n      return comp as IDatazoom | IScrollbar;\n    }\n\n    return null;\n  }\n\n  protected _initStateByDim(\n    dim: 'x' | 'y',\n    linkedComponent?: string | IDatazoom | IScrollbar,\n    scale?: string | IScale,\n    dataTarget?: FilterDataTarget\n  ) {\n    const comp = this._parseLinkedComponent(linkedComponent);\n\n    if (comp) {\n      this._state[dim] = { linkedComponent: comp };\n      return;\n    }\n\n    const scaleGrammar = !isNil(scale) ? (isString(scale) ? this.view.getScaleById(scale) : scale) : null;\n    const dataGrammar = !isNil(dataTarget?.data)\n      ? isString(dataTarget.data)\n        ? this.view.getDataById(dataTarget.data)\n        : dataTarget.data\n      : null;\n\n    if (!scaleGrammar || !dataGrammar) {\n      this._state[dim] = { data: dataGrammar, scale: scaleGrammar };\n      return;\n    }\n\n    dataGrammar.attach(scaleGrammar);\n\n    const filterByScale = isString(dataTarget.filter)\n      ? (datum: any, filterValue: number[]) => {\n          const scale = scaleGrammar.getScale();\n          const ratio = getScaleRangeRatio(scale, datum[dataTarget.filter as string]);\n\n          return ratio >= filterValue[0] && ratio <= filterValue[1];\n        }\n      : dataTarget.filter;\n    const dataFilter = {\n      source: `${scaleGrammar.uid}`,\n      rank: DataFilterRank.normal,\n      filter: (data: any[]) => {\n        const filterValue = dim === 'x' ? this._state?.x?.filterValue : this._state?.y?.filterValue;\n        if (!filterValue) {\n          return data;\n        }\n        const filteredData = data.filter(datum => filterByScale(datum, filterValue));\n        return dataTarget.transform ? dataTarget.transform(filteredData, filterValue) : filteredData;\n      }\n    };\n\n    if (dim === 'x') {\n      this._dataFilterX = dataFilter;\n    } else {\n      this._dataFilterY = dataFilter;\n    }\n\n    dataGrammar.addDataFilter(dataFilter);\n\n    this._state[dim] = { data: dataGrammar, scale: scaleGrammar };\n  }\n\n  protected _initGrammars() {\n    const { enableX, enableY, scaleX, scaleY, dataTargetX, dataTargetY, linkedComponentX, linkedComponentY } =\n      this.options;\n\n    this._state = {};\n\n    if (enableX !== false) {\n      this._initStateByDim('x', linkedComponentX, scaleX, dataTargetX);\n    }\n\n    if (enableY !== false) {\n      this._initStateByDim('y', linkedComponentY, scaleY, dataTargetY);\n    }\n\n    this._inited = true;\n  }\n\n  protected _updateLinkedComponent(comp: IDatazoom | IScrollbar, newRange: [number, number]) {\n    if (comp.componentType === ComponentEnum.datazoom) {\n      (comp as IDatazoom).setStartEndValue(newRange[0], newRange[1]);\n    } else {\n      // fix: need to update range scrollbar\n      (comp as IScrollbar).setScrollStart(newRange[0]);\n    }\n  }\n\n  updateView(type: string, newRange: ViewNavigationRange, e?: InteractionEvent) {\n    if (newRange?.x && this._state?.x?.linkedComponent) {\n      this._updateLinkedComponent(this._state.x.linkedComponent, newRange.x);\n    }\n\n    if (newRange?.y && this._state?.y?.linkedComponent) {\n      this._updateLinkedComponent(this._state.y.linkedComponent, newRange.y);\n    }\n\n    if (newRange?.needUpdate) {\n      this.view.runAsync();\n    }\n\n    this.dispatchEvent(type, newRange, e);\n  }\n\n  protected dispatchEvent(type: string, viewRange: ViewNavigationRange, e?: InteractionEvent) {\n    this.view.emit(type, {\n      viewRange,\n      event: e\n    });\n  }\n\n  unbind() {\n    super.unbind();\n\n    if (this._state) {\n      Object.keys(this._state).forEach(dim => {\n        const { data, scale } = this._state[dim as 'x' | 'y'];\n\n        if (data && scale) {\n          data.detach(scale);\n          data.removeDataFilter(dim === 'x' ? this._dataFilterX : this._dataFilterY);\n        } else if (scale) {\n          scale.setRangeFactor(null);\n          scale.commit();\n        }\n      });\n    }\n\n    this._state = null;\n  }\n}\n"]}

package/es/interactions/view-roam.d.ts

@@ -0,0 +1,30 @@
+import type { ViewRoamOptions, IView, InteractionEvent, IScale, IData, IViewZoomMixin, IViewScrollMixin, IViewDragMixin, InteractionEventHandler } from '../types';
+import { ViewNavigationBase } from './view-navigation-base';
+export interface ViewRoam extends Pick<IViewDragMixin, 'handleDragStart' | 'handleDragEnd' | 'handleDragUpdate'>, Pick<IViewScrollMixin, 'formatScrollEvent' | 'handleScrollStart' | 'handleScrollEnd'>, Pick<IViewZoomMixin, 'formatZoomEvent' | 'handleZoomStart' | 'handleZoomEnd' | 'handleZoomReset' | 'updateZoomRange'>, ViewNavigationBase<ViewRoamOptions> {
+}
+export declare class ViewRoam extends ViewNavigationBase<ViewRoamOptions> {
+    static type: string;
+    type: string;
+    static defaultOptions: ViewRoamOptions;
+    protected _inited?: boolean;
+    protected _lastScale: number;
+    protected _scaleX: IScale;
+    protected _scaleY: IScale;
+    protected _data: IData;
+    protected handleRoamZoomStart: (e: InteractionEvent) => void;
+    protected handleRoamDragUpdate: (e: InteractionEvent) => void;
+    protected handleRoamScrollStart: (e: InteractionEvent) => void;
+    constructor(view: IView, option?: ViewRoamOptions);
+    protected getEvents(): {
+        type: string;
+        handler: InteractionEventHandler;
+    }[];
+    handleRoamZoomStartInner: (e: InteractionEvent) => void;
+    handleRoamZoomEnd: (e: InteractionEvent) => void;
+    handleRoamZoomReset: (e: InteractionEvent) => void;
+    handleRoamDragStart: (e: InteractionEvent) => void;
+    handleRoamDragUpdateInner: (e: InteractionEvent) => void;
+    handleRoamDragEnd: (e: InteractionEvent) => void;
+    handleRoamScrollStartInner: (e: InteractionEvent) => void;
+    handleRoamScrollEnd: (e: InteractionEvent) => void;
+}

package/es/interactions/view-roam.js

@@ -0,0 +1,91 @@
+import { merge, throttle } from "@visactor/vutils";
+
+import { ViewNavigationBase } from "./view-navigation-base";
+
+import { InteractionEventEnum } from "../graph/enums";
+
+export class ViewRoam extends ViewNavigationBase {
+    constructor(view, option) {
+        super(view, merge({}, ViewRoam.defaultOptions, option)), this.type = ViewRoam.type, 
+        this.handleRoamZoomStartInner = e => {
+            this.formatZoomEvent(e), !e || this.options.shouldStart && !this.options.shouldStart(e) || (this._inited || this._initGrammars(), 
+            this.updateView(InteractionEventEnum.viewZoomStart, this.handleZoomStart(e, this._state, this.options.zoom), e));
+        }, this.handleRoamZoomEnd = e => {
+            this.formatZoomEvent(e), !e || this.options.shouldEnd && !this.options.shouldEnd(e) || this.updateView(InteractionEventEnum.viewZoomEnd, this.handleZoomEnd(e, this._state, this.options.zoom), e);
+        }, this.handleRoamZoomReset = e => {
+            !e || this.options.shouldReset && !this.options.shouldReset(e) || this.updateView(InteractionEventEnum.viewZoomReset, this.handleZoomReset(e, this._state, this.options.zoom), e);
+        }, this.handleRoamDragStart = e => {
+            !e || this.options.shouldStart && !this.options.shouldStart(e) || (this._inited || this._initGrammars(), 
+            this.updateView(InteractionEventEnum.viewDragStart, this.handleDragStart(e, this._state, this.options.drag), e));
+        }, this.handleRoamDragUpdateInner = e => {
+            !e || this.options.shouldUpdate && !this.options.shouldUpdate(e) || this.updateView(InteractionEventEnum.viewDragUpdate, this.handleDragUpdate(e, this._state, this.options.drag), e);
+        }, this.handleRoamDragEnd = e => {
+            !e || this.options.shouldEnd && !this.options.shouldEnd(e) || this.updateView(InteractionEventEnum.viewDragEnd, this.handleDragEnd(e, this._state, this.options.drag), e);
+        }, this.handleRoamScrollStartInner = e => {
+            this.formatScrollEvent(e), !e || this.options.shouldStart && !this.options.shouldStart(e) || (this._inited || this._initGrammars(), 
+            this.updateView(InteractionEventEnum.viewScrollStart, this.handleScrollStart(e, this._state, this.options.scroll), e));
+        }, this.handleRoamScrollEnd = e => {
+            this.formatScrollEvent(e), !e || this.options.shouldEnd && !this.options.shouldEnd(e) || this.updateView(InteractionEventEnum.viewScrollEnd, this.handleScrollEnd(e, this._state, this.options.scroll), e);
+        }, this.handleRoamZoomStart = throttle(this.handleRoamZoomStartInner, this.options.throttle), 
+        this.handleRoamDragUpdate = throttle(this.handleRoamDragUpdateInner, this.options.throttle), 
+        this.handleRoamScrollStart = throttle(this.handleRoamScrollStartInner, this.options.throttle);
+    }
+    getEvents() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const events = [];
+        return (null === (_a = this.options.zoom) || void 0 === _a ? void 0 : _a.enable) && ((null === (_b = this.options.zoom) || void 0 === _b ? void 0 : _b.trigger) && events.push({
+            type: this.options.zoom.trigger,
+            handler: this.handleRoamZoomStart
+        }), (null === (_c = this.options.zoom) || void 0 === _c ? void 0 : _c.endTrigger) && events.push({
+            type: this.options.zoom.endTrigger,
+            handler: this.handleRoamZoomEnd
+        }), (null === (_d = this.options.zoom) || void 0 === _d ? void 0 : _d.resetTrigger) && events.push({
+            type: null === (_e = this.options.zoom) || void 0 === _e ? void 0 : _e.resetTrigger,
+            handler: this.handleRoamZoomReset
+        })), (null === (_f = this.options.scroll) || void 0 === _f ? void 0 : _f.enable) && ((null === (_g = this.options.scroll) || void 0 === _g ? void 0 : _g.trigger) && events.push({
+            type: this.options.scroll.trigger,
+            handler: this.handleRoamScrollStart
+        }), (null === (_h = this.options.scroll) || void 0 === _h ? void 0 : _h.trigger) && events.push({
+            type: this.options.scroll.endTrigger,
+            handler: this.handleRoamScrollEnd
+        })), (null === (_j = this.options.drag) || void 0 === _j ? void 0 : _j.enable) && ((null === (_k = this.options.drag) || void 0 === _k ? void 0 : _k.trigger) && events.push({
+            type: this.options.drag.trigger,
+            handler: this.handleRoamDragStart
+        }), (null === (_l = this.options.drag) || void 0 === _l ? void 0 : _l.updateTrigger) && events.push({
+            type: this.options.drag.updateTrigger,
+            handler: this.handleRoamDragUpdate
+        }), (null === (_m = this.options.drag) || void 0 === _m ? void 0 : _m.endTrigger) && events.push({
+            type: this.options.drag.endTrigger,
+            handler: this.handleRoamDragEnd
+        })), events;
+    }
+}
+
+ViewRoam.type = "view-roam", ViewRoam.defaultOptions = {
+    zoom: {
+        realtime: !0,
+        enable: !0,
+        focus: !0,
+        trigger: "wheel",
+        endTrigger: "pointerup",
+        resetTrigger: "dblclick",
+        rate: 1
+    },
+    scroll: {
+        realtime: !0,
+        enable: !1,
+        reversed: !1,
+        trigger: "wheel",
+        endTrigger: "pointerup"
+    },
+    drag: {
+        realtime: !0,
+        enable: !0,
+        reversed: !1,
+        trigger: "pointerdown",
+        updateTrigger: "pointermove",
+        endTrigger: "pointerup"
+    },
+    throttle: 100
+};
+//# sourceMappingURL=view-roam.js.map

package/es/interactions/view-roam.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interactions/view-roam.ts"],"names":[],"mappings":"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","file":"view-roam.js","sourcesContent":["import { merge, throttle } from '@visactor/vutils';\nimport type {\n  ViewRoamOptions,\n  IView,\n  InteractionEvent,\n  IScale,\n  IData,\n  IViewZoomMixin,\n  IViewScrollMixin,\n  IViewDragMixin,\n  InteractionEventHandler\n} from '../types';\nimport { ViewNavigationBase } from './view-navigation-base';\nimport { InteractionEventEnum } from '../graph/enums';\n\nexport interface ViewRoam\n  extends Pick<IViewDragMixin, 'handleDragStart' | 'handleDragEnd' | 'handleDragUpdate'>,\n    Pick<IViewScrollMixin, 'formatScrollEvent' | 'handleScrollStart' | 'handleScrollEnd'>,\n    Pick<\n      IViewZoomMixin,\n      'formatZoomEvent' | 'handleZoomStart' | 'handleZoomEnd' | 'handleZoomReset' | 'updateZoomRange'\n    >,\n    ViewNavigationBase<ViewRoamOptions> {}\n\nexport class ViewRoam extends ViewNavigationBase<ViewRoamOptions> {\n  static type: string = 'view-roam';\n  type: string = ViewRoam.type;\n\n  static defaultOptions: ViewRoamOptions = {\n    zoom: {\n      realtime: true,\n      enable: true,\n      focus: true,\n      trigger: 'wheel',\n      endTrigger: 'pointerup',\n      resetTrigger: 'dblclick',\n      rate: 1\n    },\n    scroll: {\n      realtime: true,\n      enable: false,\n      reversed: false,\n      trigger: 'wheel',\n      endTrigger: 'pointerup'\n    },\n    drag: {\n      realtime: true,\n      enable: true,\n      reversed: false,\n      trigger: 'pointerdown',\n      updateTrigger: 'pointermove',\n      endTrigger: 'pointerup'\n    },\n    throttle: 100\n  };\n\n  protected _inited?: boolean;\n  protected _lastScale: number;\n  protected _scaleX: IScale;\n  protected _scaleY: IScale;\n  protected _data: IData;\n  protected handleRoamZoomStart: (e: InteractionEvent) => void;\n  protected handleRoamDragUpdate: (e: InteractionEvent) => void;\n  protected handleRoamScrollStart: (e: InteractionEvent) => void;\n\n  constructor(view: IView, option?: ViewRoamOptions) {\n    super(view, merge({}, ViewRoam.defaultOptions, option));\n    this.handleRoamZoomStart = throttle(this.handleRoamZoomStartInner, this.options.throttle);\n    this.handleRoamDragUpdate = throttle(this.handleRoamDragUpdateInner, this.options.throttle);\n    this.handleRoamScrollStart = throttle(this.handleRoamScrollStartInner, this.options.throttle);\n  }\n\n  protected getEvents() {\n    const events: Array<{ type: string; handler: InteractionEventHandler }> = [];\n\n    if (this.options.zoom?.enable) {\n      this.options.zoom?.trigger && events.push({ type: this.options.zoom.trigger, handler: this.handleRoamZoomStart });\n      this.options.zoom?.endTrigger &&\n        events.push({ type: this.options.zoom.endTrigger, handler: this.handleRoamZoomEnd });\n      this.options.zoom?.resetTrigger &&\n        events.push({ type: this.options.zoom?.resetTrigger, handler: this.handleRoamZoomReset });\n    }\n\n    if (this.options.scroll?.enable) {\n      this.options.scroll?.trigger &&\n        events.push({ type: this.options.scroll.trigger, handler: this.handleRoamScrollStart });\n      this.options.scroll?.trigger &&\n        events.push({ type: this.options.scroll.endTrigger, handler: this.handleRoamScrollEnd });\n    }\n\n    if (this.options.drag?.enable) {\n      this.options.drag?.trigger && events.push({ type: this.options.drag.trigger, handler: this.handleRoamDragStart });\n      this.options.drag?.updateTrigger &&\n        events.push({ type: this.options.drag.updateTrigger, handler: this.handleRoamDragUpdate });\n      this.options.drag?.endTrigger &&\n        events.push({ type: this.options.drag.endTrigger, handler: this.handleRoamDragEnd });\n    }\n\n    return events;\n  }\n\n  handleRoamZoomStartInner = (e: InteractionEvent) => {\n    this.formatZoomEvent(e);\n    if (!e || (this.options.shouldStart && !this.options.shouldStart(e))) {\n      return;\n    }\n\n    if (!this._inited) {\n      this._initGrammars();\n    }\n\n    this.updateView(InteractionEventEnum.viewZoomStart, this.handleZoomStart(e, this._state, this.options.zoom), e);\n  };\n\n  handleRoamZoomEnd = (e: InteractionEvent) => {\n    this.formatZoomEvent(e);\n    if (!e || (this.options.shouldEnd && !this.options.shouldEnd(e))) {\n      return;\n    }\n\n    this.updateView(InteractionEventEnum.viewZoomEnd, this.handleZoomEnd(e, this._state, this.options.zoom), e);\n  };\n\n  handleRoamZoomReset = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldReset && !this.options.shouldReset(e))) {\n      return;\n    }\n    this.updateView(InteractionEventEnum.viewZoomReset, this.handleZoomReset(e, this._state, this.options.zoom), e);\n  };\n\n  handleRoamDragStart = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldStart && !this.options.shouldStart(e))) {\n      return;\n    }\n\n    if (!this._inited) {\n      this._initGrammars();\n    }\n\n    this.updateView(InteractionEventEnum.viewDragStart, this.handleDragStart(e, this._state, this.options.drag), e);\n  };\n\n  handleRoamDragUpdateInner = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldUpdate && !this.options.shouldUpdate(e))) {\n      return;\n    }\n    this.updateView(InteractionEventEnum.viewDragUpdate, this.handleDragUpdate(e, this._state, this.options.drag), e);\n  };\n\n  handleRoamDragEnd = (e: InteractionEvent) => {\n    if (!e || (this.options.shouldEnd && !this.options.shouldEnd(e))) {\n      return;\n    }\n\n    this.updateView(InteractionEventEnum.viewDragEnd, this.handleDragEnd(e, this._state, this.options.drag), e);\n  };\n\n  handleRoamScrollStartInner = (e: InteractionEvent) => {\n    this.formatScrollEvent(e);\n    if (!e || (this.options.shouldStart && !this.options.shouldStart(e))) {\n      return;\n    }\n\n    if (!this._inited) {\n      this._initGrammars();\n    }\n\n    this.updateView(\n      InteractionEventEnum.viewScrollStart,\n      this.handleScrollStart(e, this._state, this.options.scroll),\n      e\n    );\n  };\n\n  handleRoamScrollEnd = (e: InteractionEvent) => {\n    this.formatScrollEvent(e);\n    if (!e || (this.options.shouldEnd && !this.options.shouldEnd(e))) {\n      return;\n    }\n\n    this.updateView(InteractionEventEnum.viewScrollEnd, this.handleScrollEnd(e, this._state, this.options.scroll), e);\n  };\n}\n"]}

package/es/interactions/view-scroll-mixin.d.ts

@@ -0,0 +1,10 @@
+import type { InteractionEvent, IViewScrollMixin, ViewNavigationRange, ViewScrollSimpleOptions, ViewStateByDim } from '../types';
+export declare class ViewScrollMixin implements IViewScrollMixin {
+    protected _scrollX: number;
+    protected _scrollY: number;
+    protected formatPanScroll(e: InteractionEvent): InteractionEvent;
+    protected formatWheelScroll(e: InteractionEvent): InteractionEvent;
+    formatScrollEvent(e: InteractionEvent): InteractionEvent;
+    handleScrollStart(e: InteractionEvent, navState: Partial<Record<'x' | 'y', ViewStateByDim>>, scrollOptions?: ViewScrollSimpleOptions): ViewNavigationRange;
+    handleScrollEnd(e: InteractionEvent, navState: Partial<Record<'x' | 'y', ViewStateByDim>>, scrollOptions?: ViewScrollSimpleOptions): ViewNavigationRange;
+}

package/es/interactions/view-scroll-mixin.js

@@ -0,0 +1,37 @@
+import { isNil } from "@visactor/vutils";
+
+import { handleScrolling } from "./view-utils";
+
+export class ViewScrollMixin {
+    formatPanScroll(e) {
+        return e;
+    }
+    formatWheelScroll(e) {
+        return e.ctrlKey || 0 === e.deltaY && 0 === e.deltaX || (e.scrollX = e.deltaX, e.scrollY = e.deltaY), 
+        e;
+    }
+    formatScrollEvent(e) {
+        return e ? "pan" === e.type ? this.formatPanScroll(e) : "wheel" === e.type ? this.formatWheelScroll(e) : e : e;
+    }
+    handleScrollStart(e, navState, scrollOptions) {
+        if (e.stopPropagation(), e.preventDefault(), !isNil(e.scrollX) || !isNil(e.scrollY)) {
+            if (null == scrollOptions ? void 0 : scrollOptions.realtime) return handleScrolling({
+                x: e.scrollX,
+                y: e.scrollY
+            }, navState, scrollOptions);
+            isNil(e.scrollX) || (this._scrollX = isNil(this._scrollX) ? e.scrollX : this._scrollX + e.scrollX), 
+            isNil(e.scrollY) || (this._scrollY = isNil(this._scrollY) ? e.scrollY : this._scrollY + e.scrollY);
+        }
+    }
+    handleScrollEnd(e, navState, scrollOptions) {
+        if (!1 === (null == scrollOptions ? void 0 : scrollOptions.realtime) && (isNil(this._scrollX) || isNil(this._scrollY))) {
+            const res = handleScrolling({
+                x: this._scrollX,
+                y: this._scrollY
+            }, navState, scrollOptions);
+            return this._scrollX = null, this._scrollY = null, res;
+        }
+        return null;
+    }
+}
+//# sourceMappingURL=view-scroll-mixin.js.map

package/es/interactions/view-scroll-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interactions/view-scroll-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAQzC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,OAAO,eAAe;IAIhB,eAAe,CAAC,CAAmB;QAC3C,OAAO,CAAC,CAAC;IACX,CAAC;IAES,iBAAiB,CAAC,CAAmB;QAM7C,IAAI,CAAE,CAAS,CAAC,OAAO,IAAI,CAAE,CAAS,CAAC,MAAM,KAAK,CAAC,IAAK,CAAS,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;YAC9E,CAAS,CAAC,OAAO,GAAI,CAAS,CAAC,MAAM,CAAC;YACtC,CAAS,CAAC,OAAO,GAAI,CAAS,CAAC,MAAM,CAAC;YACvC,OAAO,CAAC,CAAC;SACV;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAED,iBAAiB,CAAC,CAAmB;QACnC,IAAI,CAAC,CAAC,EAAE;YACN,OAAO,CAAC,CAAC;SACV;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,EAAE;YACpB,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;SAChC;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;YACtB,OAAO,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;SAClC;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAED,iBAAiB,CACf,CAAmB,EACnB,QAAoD,EACpD,aAAuC;QAEvC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,KAAK,CAAE,CAAS,CAAC,OAAO,CAAC,IAAI,KAAK,CAAE,CAAS,CAAC,OAAO,CAAC,EAAE;YAC1D,OAAO;SACR;QAED,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE;YAC3B,OAAO,eAAe,CAAC,EAAE,CAAC,EAAG,CAAS,CAAC,OAAO,EAAE,CAAC,EAAG,CAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;SACnG;QAED,IAAI,CAAC,KAAK,CAAE,CAAS,CAAC,OAAO,CAAC,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAE,CAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAI,CAAS,CAAC,OAAO,CAAC;SAChG;QAED,IAAI,CAAC,KAAK,CAAE,CAAS,CAAC,OAAO,CAAC,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAE,CAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAI,CAAS,CAAC,OAAO,CAAC;SAChG;IACH,CAAC;IAED,eAAe,CACb,CAAmB,EACnB,QAAoD,EACpD,aAAuC;QAIvC,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,MAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;YACvF,MAAM,GAAG,GAAG,eAAe,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;YAC7F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YAErB,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF","file":"view-scroll-mixin.js","sourcesContent":["import { isNil } from '@visactor/vutils';\nimport type {\n  InteractionEvent,\n  IViewScrollMixin,\n  ViewNavigationRange,\n  ViewScrollSimpleOptions,\n  ViewStateByDim\n} from '../types';\nimport { handleScrolling } from './view-utils';\n\nexport class ViewScrollMixin implements IViewScrollMixin {\n  protected _scrollX: number;\n  protected _scrollY: number;\n\n  protected formatPanScroll(e: InteractionEvent) {\n    return e;\n  }\n\n  protected formatWheelScroll(e: InteractionEvent) {\n    /**\n     * @see https://vega.github.io/vega/examples/zoomable-world-map/\n     * After testing, the ctrlKey field will only be true when the directions of the two fingers are inconsistent.\n     * Based on this, determine whether to trigger the scroll event.\n     */\n    if (!(e as any).ctrlKey && ((e as any).deltaY !== 0 || (e as any).deltaX !== 0)) {\n      (e as any).scrollX = (e as any).deltaX;\n      (e as any).scrollY = (e as any).deltaY;\n      return e;\n    }\n\n    return e;\n  }\n\n  formatScrollEvent(e: InteractionEvent) {\n    if (!e) {\n      return e;\n    }\n\n    if (e.type === 'pan') {\n      return this.formatPanScroll(e);\n    }\n\n    if (e.type === 'wheel') {\n      return this.formatWheelScroll(e);\n    }\n\n    return e;\n  }\n\n  handleScrollStart(\n    e: InteractionEvent,\n    navState: Partial<Record<'x' | 'y', ViewStateByDim>>,\n    scrollOptions?: ViewScrollSimpleOptions\n  ): ViewNavigationRange {\n    e.stopPropagation();\n    e.preventDefault();\n\n    if (isNil((e as any).scrollX) && isNil((e as any).scrollY)) {\n      return;\n    }\n\n    if (scrollOptions?.realtime) {\n      return handleScrolling({ x: (e as any).scrollX, y: (e as any).scrollY }, navState, scrollOptions);\n    }\n\n    if (!isNil((e as any).scrollX)) {\n      this._scrollX = isNil(this._scrollX) ? (e as any).scrollX : this._scrollX + (e as any).scrollX;\n    }\n\n    if (!isNil((e as any).scrollY)) {\n      this._scrollY = isNil(this._scrollY) ? (e as any).scrollY : this._scrollY + (e as any).scrollY;\n    }\n  }\n\n  handleScrollEnd(\n    e: InteractionEvent,\n    navState: Partial<Record<'x' | 'y', ViewStateByDim>>,\n    scrollOptions?: ViewScrollSimpleOptions\n  ): ViewNavigationRange {\n    // do nothing now\n\n    if (scrollOptions?.realtime === false && (isNil(this._scrollX) || isNil(this._scrollY))) {\n      const res = handleScrolling({ x: this._scrollX, y: this._scrollY }, navState, scrollOptions);\n      this._scrollX = null;\n      this._scrollY = null;\n\n      return res;\n    }\n\n    return null;\n  }\n}\n"]}

package/es/interactions/view-scroll.d.ts

@@ -0,0 +1,17 @@
+import type { ViewScrollOptions, IView, InteractionEvent, IViewScrollMixin } from '../types';
+import { ViewNavigationBase } from './view-navigation-base';
+export interface ViewScroll extends Pick<IViewScrollMixin, 'formatScrollEvent' | 'handleScrollStart' | 'handleScrollEnd'>, ViewNavigationBase<ViewScrollOptions> {
+}
+export declare class ViewScroll extends ViewNavigationBase<ViewScrollOptions> {
+    static type: string;
+    type: string;
+    static defaultOptions: ViewScrollOptions;
+    protected handleStart: (e: InteractionEvent) => void;
+    constructor(view: IView, option?: ViewScrollOptions);
+    protected getEvents(): {
+        type: import("../types").EventType;
+        handler: (e: InteractionEvent) => void;
+    }[];
+    handleStartInner: (e: InteractionEvent) => void;
+    handleEnd: (e: InteractionEvent) => void;
+}

package/es/interactions/view-scroll.js

@@ -0,0 +1,35 @@
+import { throttle } from "@visactor/vutils";
+
+import { InteractionEventEnum } from "../graph/enums";
+
+import { ViewNavigationBase } from "./view-navigation-base";
+
+export class ViewScroll extends ViewNavigationBase {
+    constructor(view, option) {
+        super(view, Object.assign({}, ViewScroll.defaultOptions, option)), this.type = ViewScroll.type, 
+        this.handleStartInner = e => {
+            this.formatScrollEvent(e), !e || this.options.shouldStart && !this.options.shouldStart(e) || (this._inited || this._initGrammars(), 
+            this.updateView(InteractionEventEnum.viewScrollStart, this.handleScrollStart(e, this._state, this.options), e));
+        }, this.handleEnd = e => {
+            this.formatScrollEvent(e), !e || this.options.shouldEnd && !this.options.shouldEnd(e) || this.updateView(InteractionEventEnum.viewScrollEnd, this.handleScrollEnd(e, this._state, this.options), e);
+        }, this.handleStart = throttle(this.handleStartInner, this.options.throttle);
+    }
+    getEvents() {
+        return [ {
+            type: this.options.trigger,
+            handler: this.handleStart
+        }, {
+            type: this.options.endTrigger,
+            handler: this.handleEnd
+        } ];
+    }
+}
+
+ViewScroll.type = "view-scroll", ViewScroll.defaultOptions = {
+    realtime: !0,
+    reversed: !1,
+    trigger: "wheel",
+    endTrigger: "pointerup",
+    throttle: 100
+};
+//# sourceMappingURL=view-scroll.js.map

package/es/interactions/view-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interactions/view-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAM5D,MAAM,OAAO,UAAW,SAAQ,kBAAqC;IAcnE,YAAY,IAAW,EAAE,MAA0B;QACjD,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;QAbpE,SAAI,GAAW,UAAU,CAAC,IAAI,CAAC;QAyB/B,qBAAgB,GAAG,CAAC,CAAmB,EAAE,EAAE;YACxC,IAAoC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE;gBACpE,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;YAED,IAAI,CAAC,UAAU,CACb,oBAAoB,CAAC,eAAe,EACnC,IAAoC,CAAC,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,EACrF,CAAC,CACF,CAAC;QACJ,CAAC,CAAC;QAEF,cAAS,GAAG,CAAC,CAAmB,EAAE,EAAE;YACjC,IAAoC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE;gBAChE,OAAO;aACR;YAED,IAAI,CAAC,UAAU,CACb,oBAAoB,CAAC,aAAa,EACjC,IAAoC,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,EACnF,CAAC,CACF,CAAC;QACJ,CAAC,CAAC;QAtCA,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC;IAES,SAAS;QACjB,OAAO;YACL,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;YACzD,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;SAC3D,CAAC;IACJ,CAAC;;AAxBM,eAAI,GAAW,aAAa,CAAC;AAG7B,yBAAc,GAAsB;IACzC,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,WAAW;IACvB,QAAQ,EAAE,GAAG;CACd,CAAC","file":"view-scroll.js","sourcesContent":["import { throttle } from '@visactor/vutils';\nimport { InteractionEventEnum } from '../graph/enums';\nimport type { ViewScrollOptions, IView, InteractionEvent, IViewScrollMixin } from '../types';\nimport { ViewNavigationBase } from './view-navigation-base';\n\nexport interface ViewScroll\n  extends Pick<IViewScrollMixin, 'formatScrollEvent' | 'handleScrollStart' | 'handleScrollEnd'>,\n    ViewNavigationBase<ViewScrollOptions> {}\n\nexport class ViewScroll extends ViewNavigationBase<ViewScrollOptions> {\n  static type: string = 'view-scroll';\n  type: string = ViewScroll.type;\n\n  static defaultOptions: ViewScrollOptions = {\n    realtime: true,\n    reversed: false,\n    trigger: 'wheel',\n    endTrigger: 'pointerup',\n    throttle: 100\n  };\n\n  protected handleStart: (e: InteractionEvent) => void;\n\n  constructor(view: IView, option?: ViewScrollOptions) {\n    super(view, Object.assign({}, ViewScroll.defaultOptions, option));\n\n    this.handleStart = throttle(this.handleStartInner, this.options.throttle);\n  }\n\n  protected getEvents() {\n    return [\n      { type: this.options.trigger, handler: this.handleStart },\n      { type: this.options.endTrigger, handler: this.handleEnd }\n    ];\n  }\n\n  handleStartInner = (e: InteractionEvent) => {\n    (this as unknown as IViewScrollMixin).formatScrollEvent(e);\n    if (!e || (this.options.shouldStart && !this.options.shouldStart(e))) {\n      return;\n    }\n\n    if (!this._inited) {\n      this._initGrammars();\n    }\n\n    this.updateView(\n      InteractionEventEnum.viewScrollStart,\n      (this as unknown as IViewScrollMixin).handleScrollStart(e, this._state, this.options),\n      e\n    );\n  };\n\n  handleEnd = (e: InteractionEvent) => {\n    (this as unknown as IViewScrollMixin).formatScrollEvent(e);\n    if (!e || (this.options.shouldEnd && !this.options.shouldEnd(e))) {\n      return;\n    }\n\n    this.updateView(\n      InteractionEventEnum.viewScrollEnd,\n      (this as unknown as IViewScrollMixin).handleScrollEnd(e, this._state, this.options),\n      e\n    );\n  };\n}\n"]}

package/es/interactions/view-utils.d.ts

@@ -0,0 +1,14 @@
+import { type IBaseScale } from '@visactor/vscale';
+import type { IDatazoom, IScrollbar, ViewNavigationRange, ViewStateByDim } from '../types';
+export declare const getRangeOfLinkedComponent: (comp: IDatazoom | IScrollbar) => [number, number];
+export declare const getBoundsRangeOfLinkedComponent: (comp: IDatazoom | IScrollbar, dim: 'x' | 'y') => [number, number];
+export declare const getFilteredValuesFromScale: (scale: IBaseScale, range: [number, number]) => any;
+export declare const updateScrollRange: (rangeFactor: [number, number], range: [number, number], scrollValue?: number, scrollOptions?: {
+    reversed?: boolean;
+}) => [number, number];
+export declare const handleScrolling: (scrollPos: {
+    x?: number;
+    y?: number;
+}, navState: Partial<Record<'x' | 'y', ViewStateByDim>>, scrollOptions?: {
+    reversed?: boolean;
+}) => ViewNavigationRange;

package/es/interactions/view-utils.js

@@ -0,0 +1,60 @@
+import { isContinuous } from "@visactor/vscale";
+
+import { ComponentEnum } from "../graph/enums";
+
+export const getRangeOfLinkedComponent = comp => {
+    if (comp.componentType === ComponentEnum.datazoom) {
+        const res = comp.getStartEndValue();
+        return res ? [ res.start, res.end ] : null;
+    }
+    return comp.getScrollRange();
+};
+
+export const getBoundsRangeOfLinkedComponent = (comp, dim) => {
+    const bounds = comp.getBounds();
+    if (bounds && !bounds.empty()) return "y" === dim ? [ bounds.y1, bounds.y2 ] : [ bounds.x1, bounds.x2 ];
+};
+
+export const getFilteredValuesFromScale = (scale, range) => {
+    const scaleRange = scale.range(), startPos = scaleRange[0] + (scaleRange[1] - scaleRange[0]) * range[0], endPos = scaleRange[0] + (scaleRange[1] - scaleRange[0]) * range[1];
+    if (isContinuous(scale.type)) {
+        const startValue = scale.invert(startPos), endValue = scale.invert(endPos);
+        return [ Math.min(startValue, endValue), Math.max(startValue, endValue) ];
+    }
+    return scale.domain().filter((entry => {
+        const val = scale.scale(entry);
+        return val >= startPos && val <= endPos;
+    }));
+};
+
+export const updateScrollRange = (rangeFactor = [ 0, 1 ], range, scrollValue = 0, scrollOptions) => {
+    if (Math.abs(scrollValue) < .001) return;
+    if (Math.abs(rangeFactor[1] - rangeFactor[0]) >= 1) return;
+    const size = Math.abs(range[range.length - 1] - range[0]);
+    if (size <= 0 || Number.isNaN(size)) return;
+    const value = (scrollOptions.reversed ? -1 : 1) * scrollValue;
+    if (value > 0 && rangeFactor[1] < 1) {
+        const delta = Math.min(1 - rangeFactor[1], value / size);
+        return [ rangeFactor[0] + delta, rangeFactor[1] + delta ];
+    }
+    if (value < 0 && rangeFactor[0] > 0) {
+        const delta = Math.max(-rangeFactor[0], value / size);
+        return [ rangeFactor[0] + delta, rangeFactor[1] + delta ];
+    }
+};
+
+export const handleScrolling = (scrollPos, navState, scrollOptions) => {
+    const res = {
+        needUpdate: !1
+    };
+    return navState ? (Object.keys(navState).forEach((dim => {
+        const {scale: scale, data: data, linkedComponent: linkedComponent, rangeFactor: rangeFactor, wholeScale: wholeScale} = navState[dim];
+        if (linkedComponent) res[dim] = updateScrollRange(getRangeOfLinkedComponent(linkedComponent), getBoundsRangeOfLinkedComponent(linkedComponent, dim), scrollPos[dim], scrollOptions); else if (scale) {
+            const innerScale = scale.getScale(), newRange = updateScrollRange(rangeFactor, innerScale.range(), scrollPos[dim], scrollOptions);
+            newRange && (navState[dim].rangeFactor = newRange, data ? (navState[dim].filterValue = rangeFactor, 
+            data.commit()) : (scale.setRangeFactor(newRange), scale.commit()), res.needUpdate = !0, 
+            res[dim] = newRange);
+        }
+    })), res) : res;
+};
+//# sourceMappingURL=view-utils.js.map