whiteboard/dist/cjs/markers/base/MarkerBase.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SvgHelper_1 = require("../../utils/SvgHelper");
var MarkerBase = (function () {
    function MarkerBase() {
        var _this = this;
        this.defs = [];
        this.width = 200;
        this.height = 50;
        this.isActive = true;
        this.isResizing = false;
        this.previousMouseX = 0;
        this.previousMouseY = 0;
        this.isDragging = false;
        this.manipulate = function (ev) {
            var scale = _this.visual.getScreenCTM().a;
            var dx = (ev.screenX - _this.previousMouseX) / scale;
            var dy = (ev.screenY - _this.previousMouseY) / scale;
            if (_this.isDragging) {
                _this.move(dx, dy);
            }
            if (_this.isResizing) {
                _this.resize(dx, dy);
            }
            _this.previousMouseX = ev.screenX;
            _this.previousMouseY = ev.screenY;
        };
        this.addToVisual = function (el) {
            _this.visual.appendChild(el);
        };
        this.addToRenderVisual = function (el) {
            _this.renderVisual.appendChild(el);
        };
        this.mouseDown = function (ev) {
            ev.stopPropagation();
            _this.select();
            _this.isDragging = true;
            _this.previousMouseX = ev.screenX;
            _this.previousMouseY = ev.screenY;
        };
        this.mouseUp = function (ev) {
            ev.stopPropagation();
            _this.endManipulation();
        };
        this.mouseMove = function (ev) {
            ev.stopPropagation();
            _this.manipulate(ev);
        };
        this.move = function (dx, dy) {
            var translate = _this.visual.transform.baseVal.getItem(0);
            translate.setMatrix(translate.matrix.translate(dx, dy));
            _this.visual.transform.baseVal.replaceItem(translate, 0);
        };
    }
    MarkerBase.prototype.endManipulation = function () {
        this.isDragging = false;
        this.isResizing = false;
    };
    MarkerBase.prototype.select = function () {
        this.isActive = true;
        if (this.onSelected) {
            this.onSelected(this);
        }
        return;
    };
    MarkerBase.prototype.deselect = function () {
        this.isActive = false;
        this.endManipulation();
        return;
    };
    MarkerBase.prototype.setup = function () {
        this.visual = SvgHelper_1.SvgHelper.createGroup();
        this.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
        this.visual.addEventListener('mousedown', this.mouseDown);
        this.visual.addEventListener('mouseup', this.mouseUp);
        this.visual.addEventListener('mousemove', this.mouseMove);
        this.visual.addEventListener('touchstart', this.onTouch, { passive: false });
        this.visual.addEventListener('touchend', this.onTouch, { passive: false });
        this.visual.addEventListener('touchmove', this.onTouch, { passive: false });
        this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]);
        this.visual.appendChild(this.renderVisual);
    };
    MarkerBase.prototype.resize = function (x, y) {
        return;
    };
    MarkerBase.prototype.onTouch = function (ev) {
        ev.preventDefault();
        var newEvt = document.createEvent('MouseEvents');
        var touch = ev.changedTouches[0];
        var type = null;
        switch (ev.type) {
            case 'touchstart':
                type = 'mousedown';
                break;
            case 'touchmove':
                type = 'mousemove';
                break;
            case 'touchend':
                type = 'mouseup';
                break;
        }
        newEvt.initMouseEvent(type, true, true, window, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, ev.ctrlKey, ev.altKey, ev.shiftKey, ev.metaKey, 0, null);
        ev.target.dispatchEvent(newEvt);
    };
    MarkerBase.createMarker = function () {
        var marker = new MarkerBase();
        marker.setup();
        return marker;
    };
    return MarkerBase;
}());
exports.MarkerBase = MarkerBase;