whiteboard/dist/cjs/markers/BaseMarker/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var uuid = require("uuid/v1");
var SvgHelper_1 = require("../../renderer/SvgHelper");
var BaseMarker = (function () {
    function BaseMarker() {
        var _this = this;
        this.id = uuid();
        this.type = 'base';
        this.onChange = function () { };
        this.defs = [];
        this.width = 200;
        this.height = 50;
        this.isActive = true;
        this.isDragging = false;
        this.isResizing = false;
        this.previousMouseX = 0;
        this.previousMouseY = 0;
        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.onChange({ target: 'marker', id: _this.id, event: 'move', data: { dx: dx, dy: dy } });
                _this.move(dx, dy);
            }
            if (_this.isResizing) {
                _this.resize(dx, dy, function (pos) {
                    _this.onChange({ target: 'marker', id: _this.id, event: 'resize', data: { dx: dx, dy: dy, pos: pos } });
                });
            }
            _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();
            if (_this.page && _this.page.mode === 'mirror') {
                return;
            }
            _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);
        };
    }
    BaseMarker.prototype.reactToManipulation = function (type, _a) {
        var dx = _a.dx, dy = _a.dy, pos = _a.pos;
        if (type === 'move') {
            this.move(dx, dy);
        }
        if (type === 'resize') {
            this.resizeByEvent(dx, dy, pos);
        }
    };
    BaseMarker.prototype.endManipulation = function () {
        this.isDragging = false;
        this.isResizing = false;
    };
    BaseMarker.prototype.select = function () {
        this.isActive = true;
        if (this.onSelected) {
            this.onSelected(this);
        }
        return;
    };
    BaseMarker.prototype.deselect = function () {
        this.isActive = false;
        this.endManipulation();
        return;
    };
    BaseMarker.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);
    };
    BaseMarker.prototype.resize = function (x, y, cb) {
        return;
    };
    BaseMarker.prototype.resizeByEvent = function (x, y, pos) {
        return;
    };
    BaseMarker.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;
            default:
                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);
    };
    BaseMarker.createMarker = function (page) {
        var marker = new BaseMarker();
        marker.page = page;
        marker.setup();
        return marker;
    };
    return BaseMarker;
}());
exports.BaseMarker = BaseMarker;