whiteboard/dist/cjs/markers/BaseMarker/index.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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var uuid = require("uuid/v1");
var SvgHelper_1 = require("../../renderer/SvgHelper");
var index_1 = require("../../renderer/DomEventAware/index");
var types_1 = require("../../utils/types");
var BaseMarker = (function (_super) {
    __extends(BaseMarker, _super);
    function BaseMarker() {
        var _this = _super !== null && _super.apply(this, arguments) || 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.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, function (pos) {
                    _this.onChange({
                        target: 'marker',
                        id: _this.id,
                        event: 'resizeMarker',
                        marker: { dx: dx, dy: dy, pos: pos }
                    });
                });
            }
            _this.previousMouseX = ev.screenX;
            _this.previousMouseY = ev.screenY;
        };
        _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);
            _this.x += dx;
            _this.y += dy;
            _this.onChange({ target: 'marker', id: _this.id, event: 'moveMarker', marker: { dx: dx, dy: dy } });
        };
        _this.moveTo = function (x, y) {
            var translate = _this.visual.transform.baseVal.getItem(0);
            translate.setMatrix(translate.matrix.translate(x - _this.x, y - _this.y));
            _this.visual.transform.baseVal.replaceItem(translate, 0);
            _this.x = x;
            _this.y = y;
        };
        _this.addToVisual = function (el) {
            _this.visual.appendChild(el);
        };
        _this.addToRenderVisual = function (el) {
            _this.renderVisual.appendChild(el);
        };
        _this.onMouseDown = 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.onMouseUp = function (ev) {
            ev.stopPropagation();
            _this.endManipulation();
        };
        _this.onMouseMove = function (ev) {
            ev.stopPropagation();
            _this.manipulate(ev);
        };
        return _this;
    }
    BaseMarker.prototype.reactToManipulation = function (type, _a) {
        var _b = _a === void 0 ? {} : _a, dx = _b.dx, dy = _b.dy, pos = _b.pos;
        if (type === 'moveMarker') {
            if (types_1.isNil(dx) || types_1.isNil(dy)) {
                return;
            }
            this.move(dx, dy);
        }
        if (type === 'resizeMarker') {
            if (types_1.isNil(dx) || types_1.isNil(dy)) {
                return;
            }
            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.captureSnap = function () {
        return {
            id: this.id,
            type: this.type,
            isActive: this.isActive,
            x: this.x,
            y: this.y
        };
    };
    BaseMarker.prototype.applySnap = function (snap) {
        this.id = snap.id;
        this.type = snap.type;
        if (snap.x && snap.y) {
            this.moveTo(snap.x, snap.y);
        }
        if (this.isActive) {
            this.select();
        }
    };
    BaseMarker.prototype.destroy = function () {
        this.visual.style.display = 'none';
    };
    BaseMarker.prototype.resize = function (x, y, cb) {
        return;
    };
    BaseMarker.prototype.resizeByEvent = function (x, y, pos) {
        return;
    };
    BaseMarker.prototype.init = function () {
        this.visual = SvgHelper_1.SvgHelper.createGroup();
        this.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
        _super.prototype.init.call(this, this.visual);
        this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]);
        this.visual.appendChild(this.renderVisual);
    };
    BaseMarker.createMarker = function (page) {
        var marker = new BaseMarker();
        marker.page = page;
        marker.init();
        return marker;
    };
    return BaseMarker;
}(index_1.DomEventAware));
exports.BaseMarker = BaseMarker;