"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var SvgHelper_1 = require("../../utils/SvgHelper"); var MarkerBase = (function () { function MarkerBase() { var _this = this; this.defs = []; this.width = 200; this.height = 50; this.isActive = true; this.isResizing = false; this.previousMouseX = 0; this.previousMouseY = 0; this.isDragging = false; this.manipulate = function (ev) { var scale = _this.visual.getScreenCTM().a; var dx = (ev.screenX - _this.previousMouseX) / scale; var dy = (ev.screenY - _this.previousMouseY) / scale; if (_this.isDragging) { _this.move(dx, dy); } if (_this.isResizing) { _this.resize(dx, dy); } _this.previousMouseX = ev.screenX; _this.previousMouseY = ev.screenY; }; this.addToVisual = function (el) { _this.visual.appendChild(el); }; this.addToRenderVisual = function (el) { _this.renderVisual.appendChild(el); }; this.mouseDown = function (ev) { ev.stopPropagation(); _this.select(); _this.isDragging = true; _this.previousMouseX = ev.screenX; _this.previousMouseY = ev.screenY; }; this.mouseUp = function (ev) { ev.stopPropagation(); _this.endManipulation(); }; this.mouseMove = function (ev) { ev.stopPropagation(); _this.manipulate(ev); }; this.move = function (dx, dy) { var translate = _this.visual.transform.baseVal.getItem(0); translate.setMatrix(translate.matrix.translate(dx, dy)); _this.visual.transform.baseVal.replaceItem(translate, 0); }; } MarkerBase.prototype.endManipulation = function () { this.isDragging = false; this.isResizing = false; }; MarkerBase.prototype.select = function () { this.isActive = true; if (this.onSelected) { this.onSelected(this); } return; }; MarkerBase.prototype.deselect = function () { this.isActive = false; this.endManipulation(); return; }; MarkerBase.prototype.setup = function () { this.visual = SvgHelper_1.SvgHelper.createGroup(); this.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform()); this.visual.addEventListener('mousedown', this.mouseDown); this.visual.addEventListener('mouseup', this.mouseUp); this.visual.addEventListener('mousemove', this.mouseMove); this.visual.addEventListener('touchstart', this.onTouch, { passive: false }); this.visual.addEventListener('touchend', this.onTouch, { passive: false }); this.visual.addEventListener('touchmove', this.onTouch, { passive: false }); this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]); this.visual.appendChild(this.renderVisual); }; MarkerBase.prototype.resize = function (x, y) { return; }; MarkerBase.prototype.onTouch = function (ev) { ev.preventDefault(); var newEvt = document.createEvent('MouseEvents'); var touch = ev.changedTouches[0]; var type = null; switch (ev.type) { case 'touchstart': type = 'mousedown'; break; case 'touchmove': type = 'mousemove'; break; case 'touchend': type = 'mouseup'; break; } newEvt.initMouseEvent(type, true, true, window, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, ev.ctrlKey, ev.altKey, ev.shiftKey, ev.metaKey, 0, null); ev.target.dispatchEvent(newEvt); }; MarkerBase.createMarker = function () { var marker = new MarkerBase(); marker.setup(); return marker; }; return MarkerBase; }()); exports.MarkerBase = MarkerBase;