@visactor/vgrammar-core/es/interactions/fish-eye.js

VGrammar is a visual grammar library

import { isNil, isString, throttle } from "@visactor/vutils";

import { BaseInteraction } from "./base";

export class FishEye extends BaseInteraction {
    constructor(view, options) {
        super(view, options), this.type = FishEye.type, this.handleStart = e => {
            e && (this.options.shouldStart ? this.options.shouldStart(e) : this.shouldHandle(e)) && (this._inited || this._initGrammars(), 
            this._isActive || (this._isActive = !0, this.updateView({
                x: e.canvasX,
                y: e.canvasY
            }, e)));
        }, this.handleUpdateInner = e => {
            e && (this.options.shouldUpdate ? this.options.shouldUpdate(e) : this.shouldUpdate(e)) && this._isActive && this.updateView({
                x: e.canvasX,
                y: e.canvasY
            }, e);
        }, this.handleEnd = e => {
            e && (this.options.shouldEnd ? this.options.shouldEnd(e) : this.shouldHandle(e)) && !this.options.triggerOff && this._isActive && (this._isActive = !1, 
            this.updateView(null, e));
        }, this.handleReset = e => {
            e && (this.options.shouldReset ? this.options.shouldReset(e) : this.shouldHandle(e)) && this._isActive && (this.updateView(null, e), 
            this._isActive = !1);
        }, this.options = Object.assign({}, FishEye.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), 
        this.handleUpdate = throttle(this.handleUpdateInner, this.options.throttle);
    }
    getEvents() {
        return [ {
            type: this.options.trigger,
            handler: this.handleStart
        }, {
            type: this.options.updateTrigger,
            handler: this.handleUpdate
        }, {
            type: this.options.endTrigger,
            handler: this.handleEnd
        }, {
            type: this.options.triggerOff,
            handler: this.handleReset
        } ];
    }
    _initStateByDim(dim, distortion, scale, radius, radiusRatio) {
        const scaleGrammar = isNil(scale) ? null : isString(scale) ? this.view.getScaleById(scale) : scale;
        this._state[dim] = {
            scale: scaleGrammar,
            distortion: distortion,
            radius: radius,
            radiusRatio: radiusRatio
        };
    }
    _initGrammars() {
        const {enableX: enableX, enableY: enableY, scaleX: scaleX, scaleY: scaleY, distortionX: distortionX, distortionY: distortionY, radiusRatioX: radiusRatioX, radiusRatioY: radiusRatioY, radiusX: radiusX, radiusY: radiusY} = this.options;
        this._state = {}, !1 !== enableX && this._initStateByDim("x", distortionX, scaleX, radiusX, radiusRatioX), 
        !1 !== enableY && this._initStateByDim("y", distortionY, scaleY, radiusY, radiusRatioY), 
        this._inited = !0;
    }
    updateView(focus, e) {
        let needUpdate = !1;
        focus ? Object.keys(this._state).forEach((dim => {
            const dimState = this._state[dim];
            dimState.scale && dimState.focus !== focus[dim] && (needUpdate = !0, dimState.focus = focus[dim], 
            dimState.scale.setFishEye({
                distortion: dimState.distortion,
                radius: dimState.radius,
                radiusRatio: dimState.radiusRatio,
                focus: focus[dim]
            }), dimState.scale.commit());
        })) : Object.keys(this._state).forEach((dim => {
            const dimState = this._state[dim];
            dimState.scale && !isNil(dimState.focus) && (needUpdate = !0, dimState.focus = null, 
            dimState.scale.setFishEye(null), dimState.scale.commit());
        })), needUpdate && this.view.run();
    }
    shouldHandle(e) {
        var _a, _b, _c;
        return this._marks ? e.element && this._marks && this._marks.includes(e.element.mark) : e.target === (null === (_c = null === (_b = null === (_a = this.view) || void 0 === _a ? void 0 : _a.renderer) || void 0 === _b ? void 0 : _b.stage) || void 0 === _c ? void 0 : _c.call(_b));
    }
    shouldUpdate(e) {
        if (this._marks) return e.element && this._marks && this._marks.includes(e.element.mark);
        const viewBox = this.view.getViewBox();
        return e.canvasX >= viewBox.x1 && e.canvasX <= viewBox.x2 && e.canvasY >= viewBox.y1 && e.canvasY <= viewBox.y2;
    }
    unbind() {
        super.unbind(), this._state && Object.keys(this._state).forEach((dim => {
            const {scale: scale} = this._state[dim];
            scale && (scale.setRangeFactor(null), scale.commit());
        })), this._state = null;
    }
}

FishEye.type = "fish-eye", FishEye.defaultOptions = {
    trigger: "pointerenter",
    updateTrigger: "pointermove",
    endTrigger: "pointerleave",
    distortionX: 2,
    distortionY: 2,
    throttle: 100
};
//# sourceMappingURL=fish-eye.js.map