whiteboard/dist/cjs/markers/line/LineMarkerBase.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 SvgHelper_1 = require("../../utils/SvgHelper");
var MarkerBase_1 = require("../base/MarkerBase");
var ResizeGrip_1 = require("../base/ResizeGrip");
var LineMarkerBase = (function (_super) {
    __extends(LineMarkerBase, _super);
    function LineMarkerBase() {
        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-whiteboardline-control-box']]);
            _this.addToVisual(_this.controlBox);
            _this.addControlGrips();
        };
        _this.adjustControlBox = function () {
            _this.positionGrips();
        };
        _this.addControlGrips = function () {
            _this.controlGrip1 = _this.createGrip();
            _this.controlGrip2 = _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.controlGrip1.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.controlGrip1.visual, x1, y1);
            _this.positionGrip(_this.controlGrip2.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.controlGrip1.visual
                    ? _this.controlGrip1
                    : _this.controlGrip2;
            _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;
    }
    LineMarkerBase.prototype.endManipulation = function () {
        _super.prototype.endManipulation.call(this);
        this.isResizing = false;
        this.activeGrip = null;
    };
    LineMarkerBase.prototype.select = function () {
        _super.prototype.select.call(this);
        this.controlBox.style.display = '';
    };
    LineMarkerBase.prototype.deselect = function () {
        _super.prototype.deselect.call(this);
        this.controlBox.style.display = 'none';
    };
    LineMarkerBase.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();
    };
    LineMarkerBase.prototype.resize = function (x, y) {
        if (this.activeGrip) {
            if (this.activeGrip === this.controlGrip1 &&
                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());
            }
            else if (this.activeGrip === this.controlGrip2 &&
                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());
            }
        }
        this.adjustControlBox();
    };
    LineMarkerBase.createMarker = function () {
        var marker = new LineMarkerBase();
        marker.setup();
        return marker;
    };
    return LineMarkerBase;
}(MarkerBase_1.MarkerBase));
exports.LineMarkerBase = LineMarkerBase;