"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 }); if (_this.page && _this.page.mode === 'mirror') { grip.visual.style.visibility = 'hidden'; } return grip; }; _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); } }; _this.positionLine = function (bound) { _this.x1 = bound.x1; _this.y1 = bound.y1; _this.x2 = bound.x2; _this.y2 = bound.y2; _this.markerBgLine.setAttribute('x1', _this.x1.toString()); _this.markerBgLine.setAttribute('y1', _this.y1.toString()); _this.markerLine.setAttribute('x2', _this.x2.toString()); _this.markerLine.setAttribute('y2', _this.y2.toString()); }; _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); }; return _this; } LinearMarker.prototype.captureSnap = function () { var baseSnap = _super.prototype.captureSnap.call(this); baseSnap.linearSnap = { x1: this.x1, y1: this.y1, x2: this.x2, y2: this.y2 }; return baseSnap; }; LinearMarker.prototype.applySnap = function (snap) { _super.prototype.applySnap.call(this, snap); if (snap.linearSnap) { this.positionLine(snap.linearSnap); } }; 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.init = function () { _super.prototype.init.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.init(); return marker; }; return LinearMarker; }(BaseMarker_1.BaseMarker)); exports.LinearMarker = LinearMarker;