whiteboard/dist/cjs/markers/RectangularMarker/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 RectangularMarkerGrips_1 = require("./RectangularMarkerGrips");
var BaseMarker_1 = require("../BaseMarker");
var ResizeGrip_1 = require("../BaseMarker/ResizeGrip");
var SvgHelper_1 = require("../../renderer/SvgHelper");
var RectangularMarker = (function (_super) {
    __extends(RectangularMarker, _super);
    function RectangularMarker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.MIN_SIZE = 5;
        _this.CB_DISTANCE = 10;
        _this.addControlBox = function () {
            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboard-rect-control-box']]);
            var translate = SvgHelper_1.SvgHelper.createTransform();
            translate.setTranslate(-_this.CB_DISTANCE / 2, -_this.CB_DISTANCE / 2);
            _this.controlBox.transform.baseVal.appendItem(translate);
            _this.addToVisual(_this.controlBox);
            _this.controlRect = SvgHelper_1.SvgHelper.createRect(_this.width + _this.CB_DISTANCE, _this.height + _this.CB_DISTANCE, [['class', 'fc-whiteboard-rect-control-rect']]);
            _this.controlBox.appendChild(_this.controlRect);
            _this.controlGrips = new RectangularMarkerGrips_1.RectangularMarkerGrips();
            _this.addControlGrips();
        };
        _this.adjustControlBox = function () {
            _this.controlRect.setAttribute('width', (_this.width + _this.CB_DISTANCE).toString());
            _this.controlRect.setAttribute('height', (_this.height + _this.CB_DISTANCE).toString());
            _this.positionGrips();
        };
        _this.addControlGrips = function () {
            _this.controlGrips.topLeft = _this.createGrip();
            _this.controlGrips.topCenter = _this.createGrip();
            _this.controlGrips.topRight = _this.createGrip();
            _this.controlGrips.centerLeft = _this.createGrip();
            _this.controlGrips.centerRight = _this.createGrip();
            _this.controlGrips.bottomLeft = _this.createGrip();
            _this.controlGrips.bottomCenter = _this.createGrip();
            _this.controlGrips.bottomRight = _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.topLeft.GRIP_SIZE;
            var left = -gripSize / 2;
            var top = left;
            var cx = (_this.width + _this.CB_DISTANCE) / 2 - gripSize / 2;
            var cy = (_this.height + _this.CB_DISTANCE) / 2 - gripSize / 2;
            var bottom = _this.height + _this.CB_DISTANCE - gripSize / 2;
            var right = _this.width + _this.CB_DISTANCE - gripSize / 2;
            _this.positionGrip(_this.controlGrips.topLeft.visual, left, top);
            _this.positionGrip(_this.controlGrips.topCenter.visual, cx, top);
            _this.positionGrip(_this.controlGrips.topRight.visual, right, top);
            _this.positionGrip(_this.controlGrips.centerLeft.visual, left, cy);
            _this.positionGrip(_this.controlGrips.centerRight.visual, right, cy);
            _this.positionGrip(_this.controlGrips.bottomLeft.visual, left, bottom);
            _this.positionGrip(_this.controlGrips.bottomCenter.visual, cx, bottom);
            _this.positionGrip(_this.controlGrips.bottomRight.visual, right, bottom);
        };
        _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 = _this.controlGrips.findGripByVisual(ev.target) || null;
            _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.manipulate(ev);
            }
        };
        return _this;
    }
    RectangularMarker.prototype.endManipulation = function () {
        _super.prototype.endManipulation.call(this);
        this.isResizing = false;
        this.activeGrip = null;
    };
    RectangularMarker.prototype.select = function () {
        _super.prototype.select.call(this);
        this.controlBox.style.display = '';
    };
    RectangularMarker.prototype.deselect = function () {
        _super.prototype.deselect.call(this);
        this.controlBox.style.display = 'none';
    };
    RectangularMarker.prototype.setup = function () {
        _super.prototype.setup.call(this);
        this.addControlBox();
        if (this.page && this.page.mode === 'mirror') {
            this.controlBox.style.display = 'none';
        }
    };
    RectangularMarker.prototype.resizeByEvent = function (x, y, pos) {
        this.activeGrip = this.controlGrips[pos];
        this.resize(x, y);
    };
    RectangularMarker.prototype.resize = function (x, y, onPosition) {
        var translateX = 0;
        var translateY = 0;
        switch (this.activeGrip) {
            case this.controlGrips.topLeft:
                this.width -= x;
                this.height -= y;
                translateX += x;
                translateY += y;
                if (onPosition) {
                    onPosition('topLeft');
                }
                break;
            case this.controlGrips.bottomLeft:
                this.width -= x;
                this.height += y;
                translateX += x;
                if (onPosition) {
                    onPosition('bottomLeft');
                }
                break;
            case this.controlGrips.topRight:
                this.width += x;
                this.height -= y;
                translateY += y;
                if (onPosition) {
                    onPosition('topRight');
                }
                break;
            case this.controlGrips.bottomRight:
                this.width += x;
                this.height += y;
                if (onPosition) {
                    onPosition('bottomRight');
                }
                break;
            case this.controlGrips.centerLeft:
                this.width -= x;
                translateX += x;
                if (onPosition) {
                    onPosition('centerLeft');
                }
                break;
            case this.controlGrips.centerRight:
                this.width += x;
                if (onPosition) {
                    onPosition('centerRight');
                }
                break;
            case this.controlGrips.topCenter:
                this.height -= y;
                translateY += y;
                if (onPosition) {
                    onPosition('topCenter');
                }
                break;
            case this.controlGrips.bottomCenter:
                this.height += y;
                if (onPosition) {
                    onPosition('bottomCenter');
                }
                break;
            default:
                break;
        }
        if (this.width < this.MIN_SIZE) {
            var offset = this.MIN_SIZE - this.width;
            this.width = this.MIN_SIZE;
            if (translateX !== 0) {
                translateX -= offset;
            }
        }
        if (this.height < this.MIN_SIZE) {
            var offset = this.MIN_SIZE - this.height;
            this.height = this.MIN_SIZE;
            if (translateY !== 0) {
                translateY -= offset;
            }
        }
        if (translateX !== 0 || translateY !== 0) {
            var translate = this.visual.transform.baseVal.getItem(0);
            translate.setMatrix(translate.matrix.translate(translateX, translateY));
            this.visual.transform.baseVal.replaceItem(translate, 0);
        }
        this.adjustControlBox();
    };
    RectangularMarker.prototype.onTouch = function (ev) {
        _super.prototype.onTouch.call(this, ev);
    };
    RectangularMarker.createMarker = function (page) {
        var marker = new RectangularMarker();
        marker.page = page;
        marker.setup();
        return marker;
    };
    return RectangularMarker;
}(BaseMarker_1.BaseMarker));
exports.RectangularMarker = RectangularMarker;