whiteboard/dist/cjs/markers/TextMarker/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 RectangularMarker_1 = require("../RectangularMarker");
var SvgHelper_1 = require("../../renderer/SvgHelper");
var OkIcon = require('../../assets/check.svg');
var CancelIcon = require('../../assets/times.svg');
var TextMarker = (function (_super) {
    __extends(TextMarker, _super);
    function TextMarker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'text';
        _this.MIN_SIZE = 50;
        _this.DEFAULT_TEXT = 'Double-click to edit text';
        _this.text = _this.DEFAULT_TEXT;
        _this.inDoubleTap = false;
        _this.renderText = function () {
            var LINE_SIZE = '1.2em';
            while (_this.textElement.lastChild) {
                _this.textElement.removeChild(_this.textElement.lastChild);
            }
            var lines = _this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/);
            for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
                var line = lines_1[_i];
                if (line.trim() === '') {
                    line = ' ';
                }
                _this.textElement.appendChild(SvgHelper_1.SvgHelper.createTSpan(line, [['x', '0'], ['dy', LINE_SIZE]]));
            }
            setTimeout(_this.sizeText, 10);
        };
        _this.sizeText = function () {
            var textSize = _this.textElement.getBBox();
            var x = 0;
            var y = 0;
            var scale = 1.0;
            if (textSize.width > 0 && textSize.height > 0) {
                var xScale = (_this.width * 1.0) / textSize.width;
                var yScale = (_this.height * 1.0) / textSize.height;
                scale = Math.min(xScale, yScale);
                x = (_this.width - textSize.width * scale) / 2;
                y = (_this.height - textSize.height * scale) / 2;
            }
            _this.textElement.transform.baseVal.getItem(0).setTranslate(x, y);
            _this.textElement.transform.baseVal.getItem(1).setScale(scale, scale);
        };
        _this.onDblClick = function (ev) {
            _this.showEditor();
        };
        _this.onTap = function (ev) {
            if (_this.inDoubleTap) {
                _this.inDoubleTap = false;
                _this.showEditor();
            }
            else {
                _this.inDoubleTap = true;
                setTimeout(function () {
                    _this.inDoubleTap = false;
                }, 300);
            }
        };
        _this.showEditor = function () {
            _this.editor = document.createElement('div');
            _this.editor.className = 'fc-whiteboard-text-editor';
            _this.editorTextArea = document.createElement('textarea');
            if (_this.text !== _this.DEFAULT_TEXT) {
                _this.editorTextArea.value = _this.text;
            }
            _this.editorTextArea.addEventListener('keydown', _this.onEditorKeyDown);
            _this.editor.appendChild(_this.editorTextArea);
            document.body.appendChild(_this.editor);
            var buttons = document.createElement('div');
            buttons.className = 'fc-whiteboard-text-editor-button-bar';
            _this.editor.appendChild(buttons);
            var okButton = document.createElement('div');
            okButton.className = 'fc-whiteboard-text-editor-button';
            okButton.innerHTML = OkIcon;
            okButton.addEventListener('click', _this.onEditorOkClick);
            buttons.appendChild(okButton);
            var cancelButton = document.createElement('div');
            cancelButton.className = 'fc-whiteboard-text-editor-button';
            cancelButton.innerHTML = CancelIcon;
            cancelButton.addEventListener('click', _this.closeEditor);
            buttons.appendChild(cancelButton);
        };
        _this.onEditorOkClick = function (ev) {
            if (_this.editorTextArea.value.trim()) {
                _this.text = _this.editorTextArea.value;
            }
            else {
                _this.text = _this.DEFAULT_TEXT;
            }
            _this.onChange({ target: 'marker', id: _this.id, event: 'changeText', data: _this.text });
            _this.renderText();
            _this.closeEditor();
        };
        _this.closeEditor = function () {
            document.body.removeChild(_this.editor);
        };
        _this.onEditorKeyDown = function (ev) {
            if (ev.key === 'Enter' && ev.ctrlKey) {
                ev.preventDefault();
                _this.onEditorOkClick(null);
            }
        };
        return _this;
    }
    TextMarker.prototype.setText = function (text) {
        this.text = text;
        this.renderText();
    };
    TextMarker.prototype.setup = function () {
        _super.prototype.setup.call(this);
        this.textElement = SvgHelper_1.SvgHelper.createText();
        this.addToRenderVisual(this.textElement);
        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'text-marker']]);
        this.textElement.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
        this.textElement.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
        this.renderText();
        this.visual.addEventListener('dblclick', this.onDblClick);
        this.visual.addEventListener('touchstart', this.onTap);
    };
    TextMarker.prototype.resize = function (x, y, onPosition) {
        _super.prototype.resize.call(this, x, y, onPosition);
        this.sizeText();
    };
    TextMarker.createMarker = function (page) {
        var marker = new TextMarker();
        marker.page = page;
        marker.setup();
        return marker;
    };
    return TextMarker;
}(RectangularMarker_1.RectangularMarker));
exports.TextMarker = TextMarker;