"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.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); } }; _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); }; return _this; } RectangularMarker.prototype.captureSnap = function () { var snap = _super.prototype.captureSnap.call(this); snap.rectSnap = { width: this.width, height: this.height }; return snap; }; RectangularMarker.prototype.applySnap = function (snap) { _super.prototype.applySnap.call(this, snap); if (snap.rectSnap) { var _a = snap.rectSnap, width = _a.width, height = _a.height; if (width && height) { this.width = width; this.height = height; this.adjustControlBox(); } } }; 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.init = function () { _super.prototype.init.call(this); this.addControlBox(); if (this.page && this.page.mode === 'mirror') { this.controlBox.style.display = 'none'; } }; RectangularMarker.prototype.resizeByEvent = function (dx, dy, pos) { this.activeGrip = this.controlGrips[pos]; this.resize(dx, dy); }; RectangularMarker.prototype.resize = function (dx, dy, onPosition) { var translateX = 0; var translateY = 0; switch (this.activeGrip) { case this.controlGrips.topLeft: this.width -= dx; this.height -= dy; translateX += dx; translateY += dy; this.x += dx; this.y += dy; if (onPosition) { onPosition('topLeft'); } break; case this.controlGrips.bottomLeft: this.width -= dx; this.height += dy; translateX += dx; this.x += dx; if (onPosition) { onPosition('bottomLeft'); } break; case this.controlGrips.topRight: this.width += dx; this.height -= dy; translateY += dy; this.y += dy; if (onPosition) { onPosition('topRight'); } break; case this.controlGrips.bottomRight: this.width += dx; this.height += dy; if (onPosition) { onPosition('bottomRight'); } break; case this.controlGrips.centerLeft: this.width -= dx; translateX += dx; this.x += dx; if (onPosition) { onPosition('centerLeft'); } break; case this.controlGrips.centerRight: this.width += dx; if (onPosition) { onPosition('centerRight'); } break; case this.controlGrips.topCenter: this.height -= dy; translateY += dy; this.y += dy; if (onPosition) { onPosition('topCenter'); } break; case this.controlGrips.bottomCenter: this.height += dy; 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.init(); return marker; }; return RectangularMarker; }(BaseMarker_1.BaseMarker)); exports.RectangularMarker = RectangularMarker;