whiteboard/dist/cjs/markers/LinearMarker/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 BaseMarker_1 = require("../BaseMarker");
var ResizeGrip_1 = require("../BaseMarker/ResizeGrip");
var SvgHelper_1 = require("../../renderer/SvgHelper");
var LinearMarker = (function (_super) {
    __extends(LinearMarker, _super);
    function LinearMarker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.MIN_LENGTH = 20;
        _this.x1 = 0;
        _this.y1 = 0;
        _this.x2 = _this.width;
        _this.y2 = 0;
        _this.getLineLength = function (x1, y1, x2, y2) {
            var dx = Math.abs(x1 - x2);
            var dy = Math.abs(y1 - y2);
            return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
        };
        _this.addControlBox = function () {
            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboard-line-control-box']]);
            _this.addToVisual(_this.controlBox);
            _this.addControlGrips();
        };
        _this.adjustControlBox = function () {
            _this.positionGrips();
        };
        _this.addControlGrips = function () {
            _this.controlGrips = {
                left: _this.createGrip(),
                right: _this.createGrip()
            };
            _this.positionGrips();
        };
        _this.createGrip = function () {
            var grip = new ResizeGrip_1.ResizeGrip();
            grip.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
            _this.controlBox.appendChild(grip.visual);
            grip.visual.addEventListener('mousedown', _this.gripMouseDown);
            grip.visual.addEventListener('mousemove', _this.gripMouseMove);
            grip.visual.addEventListener('mouseup', _this.gripMouseUp);
            grip.visual.addEventListener('touchstart', _this.onTouch, { passive: false });
            grip.visual.addEventListener('touchend', _this.onTouch, { passive: false });
            grip.visual.addEventListener('touchmove', _this.onTouch, { passive: false });
            return grip;
        };
        _this.positionGrips = function () {
            var gripSize = _this.controlGrips.left.GRIP_SIZE;
            var x1 = _this.x1 - gripSize / 2;
            var y1 = _this.y1 - gripSize / 2;
            var x2 = _this.x2 - gripSize / 2;
            var y2 = _this.y2 - gripSize / 2;
            _this.positionGrip(_this.controlGrips.left.visual, x1, y1);
            _this.positionGrip(_this.controlGrips.right.visual, x2, y2);
        };
        _this.positionGrip = function (grip, x, y) {
            var translate = grip.transform.baseVal.getItem(0);
            translate.setTranslate(x, y);
            grip.transform.baseVal.replaceItem(translate, 0);
        };
        _this.gripMouseDown = function (ev) {
            _this.isResizing = true;
            _this.activeGrip =
                ev.target === _this.controlGrips.left.visual
                    ? _this.controlGrips.left
                    : _this.controlGrips.right;
            _this.previousMouseX = ev.screenX;
            _this.previousMouseY = ev.screenY;
            ev.stopPropagation();
        };
        _this.gripMouseUp = function (ev) {
            _this.isResizing = false;
            _this.activeGrip = null;
            ev.stopPropagation();
        };
        _this.gripMouseMove = function (ev) {
            if (_this.isResizing) {
                _this.resize(ev.movementX, ev.movementY);
            }
        };
        return _this;
    }
    LinearMarker.prototype.endManipulation = function () {
        _super.prototype.endManipulation.call(this);
        this.isResizing = false;
        this.activeGrip = null;
    };
    LinearMarker.prototype.select = function () {
        _super.prototype.select.call(this);
        this.controlBox.style.display = '';
    };
    LinearMarker.prototype.deselect = function () {
        _super.prototype.deselect.call(this);
        this.controlBox.style.display = 'none';
    };
    LinearMarker.prototype.setup = function () {
        _super.prototype.setup.call(this);
        this.markerBgLine = SvgHelper_1.SvgHelper.createLine(0, 0, this.x2, 0, [
            ['stroke', 'transparent'],
            ['stroke-width', '30']
        ]);
        this.addToRenderVisual(this.markerBgLine);
        this.markerLine = SvgHelper_1.SvgHelper.createLine(0, 0, this.x2, 0);
        this.addToRenderVisual(this.markerLine);
        this.addControlBox();
        if (this.page && this.page.mode === 'mirror') {
            this.controlBox.style.display = 'none';
        }
    };
    LinearMarker.prototype.resize = function (x, y, onPosition) {
        if (this.activeGrip) {
            if (this.activeGrip === this.controlGrips.left &&
                this.getLineLength(this.x1 + x, this.y1 + 1, this.x2, this.y2) >= this.MIN_LENGTH) {
                this.x1 += x;
                this.y1 += y;
                this.markerBgLine.setAttribute('x1', this.x1.toString());
                this.markerBgLine.setAttribute('y1', this.y1.toString());
                this.markerLine.setAttribute('x1', this.x1.toString());
                this.markerLine.setAttribute('y1', this.y1.toString());
                if (onPosition) {
                    onPosition('left');
                }
            }
            else if (this.activeGrip === this.controlGrips.right &&
                this.getLineLength(this.x1, this.y1, this.x2 + x, this.y2 + y) >= this.MIN_LENGTH) {
                this.x2 += x;
                this.y2 += y;
                this.markerBgLine.setAttribute('x2', this.x2.toString());
                this.markerBgLine.setAttribute('y2', this.y2.toString());
                this.markerLine.setAttribute('x2', this.x2.toString());
                this.markerLine.setAttribute('y2', this.y2.toString());
                if (onPosition) {
                    onPosition('right');
                }
            }
        }
        this.adjustControlBox();
    };
    LinearMarker.prototype.resizeByEvent = function (x, y, pos) {
        if (pos === 'left') {
            this.activeGrip = this.controlGrips.left;
        }
        else {
            this.activeGrip = this.controlGrips.right;
        }
        this.resize(x, y);
    };
    LinearMarker.createMarker = function (page) {
        var marker = new LinearMarker();
        marker.page = page;
        marker.setup();
        return marker;
    };
    return LinearMarker;
}(BaseMarker_1.BaseMarker));
exports.LinearMarker = LinearMarker;