sigma/captors/mouse.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * Sigma.js Mouse Captor
 * ======================
 *
 * Sigma's captor dealing with the user's mouse.
 */
var camera_1 = __importDefault(require("../camera"));
var captor_1 = __importDefault(require("../captor"));
var utils_1 = require("./utils");
/**
 * Constants.
 */
var DRAG_TIMEOUT = 200;
var MOUSE_INERTIA_DURATION = 200;
var MOUSE_INERTIA_RATIO = 3;
var MOUSE_ZOOM_DURATION = 200;
var ZOOMING_RATIO = 1.7;
var DOUBLE_CLICK_TIMEOUT = 300;
var DOUBLE_CLICK_ZOOMING_RATIO = 2.2;
var DOUBLE_CLICK_ZOOMING_DURATION = 200;
/**
 * Mouse captor class.
 *
 * @constructor
 */
var MouseCaptor = /** @class */ (function (_super) {
    __extends(MouseCaptor, _super);
    function MouseCaptor(container, camera) {
        var _this = _super.call(this, container, camera) || this;
        // State
        _this.enabled = true;
        _this.hasDragged = false;
        _this.downStartTime = null;
        _this.lastMouseX = null;
        _this.lastMouseY = null;
        _this.isMouseDown = false;
        _this.isMoving = null;
        _this.movingTimeout = null;
        _this.startCameraState = null;
        _this.lastCameraState = null;
        _this.clicks = 0;
        _this.doubleClickTimeout = null;
        _this.wheelLock = false;
        // Binding methods
        _this.handleClick = _this.handleClick.bind(_this);
        _this.handleRightClick = _this.handleRightClick.bind(_this);
        _this.handleDown = _this.handleDown.bind(_this);
        _this.handleUp = _this.handleUp.bind(_this);
        _this.handleMove = _this.handleMove.bind(_this);
        _this.handleWheel = _this.handleWheel.bind(_this);
        _this.handleOut = _this.handleOut.bind(_this);
        // Binding events
        container.addEventListener("click", _this.handleClick, false);
        container.addEventListener("contextmenu", _this.handleRightClick, false);
        container.addEventListener("mousedown", _this.handleDown, false);
        container.addEventListener("mousemove", _this.handleMove, false);
        container.addEventListener("DOMMouseScroll", _this.handleWheel, false);
        container.addEventListener("mousewheel", _this.handleWheel, false);
        container.addEventListener("mouseout", _this.handleOut, false);
        document.addEventListener("mouseup", _this.handleUp, false);
        return _this;
    }
    MouseCaptor.prototype.kill = function () {
        var container = this.container;
        container.removeEventListener("click", this.handleClick);
        container.removeEventListener("contextmenu", this.handleRightClick);
        container.removeEventListener("mousedown", this.handleDown);
        container.removeEventListener("mousemove", this.handleMove);
        container.removeEventListener("DOMMouseScroll", this.handleWheel);
        container.removeEventListener("mousewheel", this.handleWheel);
        container.removeEventListener("mouseout", this.handleOut);
        document.removeEventListener("mouseup", this.handleUp);
    };
    MouseCaptor.prototype.handleClick = function (e) {
        var _this = this;
        if (!this.enabled)
            return;
        this.clicks++;
        if (this.clicks === 2) {
            this.clicks = 0;
            clearTimeout(this.doubleClickTimeout);
            this.doubleClickTimeout = null;
            return this.handleDoubleClick(e);
        }
        setTimeout(function () {
            _this.clicks = 0;
            _this.doubleClickTimeout = null;
        }, DOUBLE_CLICK_TIMEOUT);
        // NOTE: this is here to prevent click events on drag
        if (!this.hasDragged)
            this.emit("click", utils_1.getMouseCoords(e));
    };
    MouseCaptor.prototype.handleRightClick = function (e) {
        if (!this.enabled)
            return;
        this.emit("rightClick", utils_1.getMouseCoords(e));
    };
    MouseCaptor.prototype.handleDoubleClick = function (e) {
        if (!this.enabled)
            return;
        var center = utils_1.getCenter(e);
        var cameraState = this.camera.getState();
        var newRatio = cameraState.ratio / DOUBLE_CLICK_ZOOMING_RATIO;
        // TODO: factorize
        var dimensions = {
            width: this.container.offsetWidth,
            height: this.container.offsetHeight,
        };
        var clickX = utils_1.getX(e), clickY = utils_1.getY(e);
        // TODO: baaaad we mustn't mutate the camera, create a Camera.from or #.copy
        // TODO: factorize pan & zoomTo
        var cameraWithNewRatio = new camera_1.default();
        cameraWithNewRatio.ratio = newRatio;
        cameraWithNewRatio.x = cameraState.x;
        cameraWithNewRatio.y = cameraState.y;
        var clickGraph = this.camera.viewportToGraph(dimensions, clickX, clickY), centerGraph = this.camera.viewportToGraph(dimensions, center.x, center.y);
        var clickGraphNew = cameraWithNewRatio.viewportToGraph(dimensions, clickX, clickY), centerGraphNew = cameraWithNewRatio.viewportToGraph(dimensions, center.x, center.y);
        var deltaX = clickGraphNew.x - centerGraphNew.x - clickGraph.x + centerGraph.x, deltaY = clickGraphNew.y - centerGraphNew.y - clickGraph.y + centerGraph.y;
        this.camera.animate({
            x: cameraState.x - deltaX,
            y: cameraState.y - deltaY,
            ratio: newRatio,
        }, {
            easing: "quadraticInOut",
            duration: DOUBLE_CLICK_ZOOMING_DURATION,
        });
        if (e.preventDefault)
            e.preventDefault();
        else
            e.returnValue = false;
        e.stopPropagation();
        return false;
    };
    MouseCaptor.prototype.handleDown = function (e) {
        if (!this.enabled)
            return;
        this.startCameraState = this.camera.getState();
        this.lastCameraState = this.startCameraState;
        this.lastMouseX = utils_1.getX(e);
        this.lastMouseY = utils_1.getY(e);
        this.hasDragged = false;
        this.downStartTime = Date.now();
        // TODO: dispatch events
        switch (e.which) {
            default:
                // Left button pressed
                this.isMouseDown = true;
                this.emit("mousedown", utils_1.getMouseCoords(e));
        }
    };
    MouseCaptor.prototype.handleUp = function (e) {
        var _this = this;
        if (!this.enabled || !this.isMouseDown)
            return;
        this.isMouseDown = false;
        if (this.movingTimeout) {
            this.movingTimeout = null;
            clearTimeout(this.movingTimeout);
        }
        var x = utils_1.getX(e), y = utils_1.getY(e);
        var cameraState = this.camera.getState(), previousCameraState = this.camera.getPreviousState();
        if (this.isMoving) {
            this.camera.animate({
                x: cameraState.x + MOUSE_INERTIA_RATIO * (cameraState.x - previousCameraState.x),
                y: cameraState.y + MOUSE_INERTIA_RATIO * (cameraState.y - previousCameraState.y),
            }, {
                duration: MOUSE_INERTIA_DURATION,
                easing: "quadraticOut",
            });
        }
        else if (this.lastMouseX !== x || this.lastMouseY !== y) {
            this.camera.setState({
                x: cameraState.x,
                y: cameraState.y,
            });
        }
        this.isMoving = false;
        setImmediate(function () { return (_this.hasDragged = false); });
        this.emit("mouseup", utils_1.getMouseCoords(e));
    };
    MouseCaptor.prototype.handleMove = function (e) {
        var _this = this;
        if (!this.enabled)
            return;
        this.emit("mousemove", utils_1.getMouseCoords(e));
        if (this.isMouseDown) {
            // TODO: dispatch events
            this.isMoving = true;
            this.hasDragged = true;
            if (this.movingTimeout)
                clearTimeout(this.movingTimeout);
            this.movingTimeout = window.setTimeout(function () {
                _this.movingTimeout = null;
                _this.isMoving = false;
            }, DRAG_TIMEOUT);
            var dimensions = {
                width: this.container.offsetWidth,
                height: this.container.offsetHeight,
            };
            var eX = utils_1.getX(e), eY = utils_1.getY(e);
            var lastMouse = this.camera.viewportToGraph(dimensions, this.lastMouseX, this.lastMouseY);
            var mouse = this.camera.viewportToGraph(dimensions, eX, eY);
            var offsetX = lastMouse.x - mouse.x, offsetY = lastMouse.y - mouse.y;
            var cameraState = this.camera.getState();
            var x = cameraState.x + offsetX, y = cameraState.y + offsetY;
            this.camera.setState({ x: x, y: y });
            this.lastMouseX = eX;
            this.lastMouseY = eY;
        }
        if (e.preventDefault)
            e.preventDefault();
        else
            e.returnValue = false;
        e.stopPropagation();
        return false;
    };
    MouseCaptor.prototype.handleWheel = function (e) {
        var _this = this;
        if (e.preventDefault)
            e.preventDefault();
        else
            e.returnValue = false;
        e.stopPropagation();
        if (!this.enabled)
            return false;
        var delta = utils_1.getWheelDelta(e);
        if (!delta)
            return false;
        if (this.wheelLock)
            return false;
        this.wheelLock = true;
        // TODO: handle max zoom
        var ratio = delta > 0 ? 1 / ZOOMING_RATIO : ZOOMING_RATIO;
        var cameraState = this.camera.getState();
        var newRatio = ratio * cameraState.ratio;
        var center = utils_1.getCenter(e);
        var dimensions = {
            width: this.container.offsetWidth,
            height: this.container.offsetHeight,
        };
        var clickX = utils_1.getX(e), clickY = utils_1.getY(e);
        // TODO: baaaad we mustn't mutate the camera, create a Camera.from or #.copy
        // TODO: factorize pan & zoomTo
        var cameraWithNewRatio = new camera_1.default();
        cameraWithNewRatio.ratio = newRatio;
        cameraWithNewRatio.x = cameraState.x;
        cameraWithNewRatio.y = cameraState.y;
        var clickGraph = this.camera.viewportToGraph(dimensions, clickX, clickY), centerGraph = this.camera.viewportToGraph(dimensions, center.x, center.y);
        var clickGraphNew = cameraWithNewRatio.viewportToGraph(dimensions, clickX, clickY), centerGraphNew = cameraWithNewRatio.viewportToGraph(dimensions, center.x, center.y);
        var deltaX = clickGraphNew.x - centerGraphNew.x - clickGraph.x + centerGraph.x, deltaY = clickGraphNew.y - centerGraphNew.y - clickGraph.y + centerGraph.y;
        this.camera.animate({
            x: cameraState.x - deltaX,
            y: cameraState.y - deltaY,
            ratio: newRatio,
        }, {
            easing: "linear",
            duration: MOUSE_ZOOM_DURATION,
        }, function () { return (_this.wheelLock = false); });
        return false;
    };
    MouseCaptor.prototype.handleOut = function () {
        // TODO: dispatch event
    };
    return MouseCaptor;
}(captor_1.default));
exports.default = MouseCaptor;