whiteboard/dist/cjs/render/MarkerArea.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Activator_1 = require("./Activator");
var SvgHelper_1 = require("../utils/SvgHelper");
var Renderer_1 = require("./Renderer");
var Toolbar_1 = require("../toolbar/Toolbar");
var ArrowMarkerToolbarItem_1 = require("../markers/arrow/ArrowMarkerToolbarItem");
var CoverMarkerToolbarItem_1 = require("../markers/cover/CoverMarkerToolbarItem");
var HighlightMarkerToolbarItem_1 = require("../markers/highlight/HighlightMarkerToolbarItem");
var LineMarkerToolbarItem_1 = require("../markers/line/LineMarkerToolbarItem");
var RectMarkerToolbarItem_1 = require("../markers/rect/RectMarkerToolbarItem");
var TextMarkerToolbarItem_1 = require("../markers/text/TextMarkerToolbarItem");
var check_svg_1 = require("./assets/core-toolbar-icons/check.svg");
var eraser_svg_1 = require("./assets/core-toolbar-icons/eraser.svg");
var mouse_pointer_svg_1 = require("./assets/core-toolbar-icons/mouse-pointer.svg");
var times_svg_1 = require("./assets/core-toolbar-icons/times.svg");
var markerjs_logo_m_svg_1 = require("./assets/fc-whiteboardlogo-m.svg");
var MarkerArea = (function () {
    function MarkerArea(target) {
        var _this = this;
        this.toolbars = [
            {
                icon: mouse_pointer_svg_1.default,
                name: 'pointer',
                tooltipText: 'Pointer'
            },
            {
                icon: eraser_svg_1.default,
                name: 'delete',
                tooltipText: 'Delete'
            },
            {
                name: 'separator',
                tooltipText: ''
            },
            new RectMarkerToolbarItem_1.RectMarkerToolbarItem(),
            new CoverMarkerToolbarItem_1.CoverMarkerToolbarItem(),
            new HighlightMarkerToolbarItem_1.HighlightMarkerToolbarItem(),
            new LineMarkerToolbarItem_1.LineMarkerToolbarItem(),
            new ArrowMarkerToolbarItem_1.ArrowMarkerToolbarItem(),
            new TextMarkerToolbarItem_1.TextMarkerToolbarItem(),
            {
                name: 'separator',
                tooltipText: ''
            },
            {
                icon: check_svg_1.default,
                name: 'ok',
                tooltipText: 'OK'
            },
            {
                icon: times_svg_1.default,
                name: 'close',
                tooltipText: 'Close'
            }
        ];
        this.scale = 1.0;
        this.show = function (completeCallback, cancelCallback) {
            _this.completeCallback = completeCallback;
            if (cancelCallback) {
                _this.cancelCallback = cancelCallback;
            }
            _this.open();
            _this.showUI();
        };
        this.open = function () {
            _this.setTargetRect();
            _this.initMarkerCanvas();
            _this.attachEvents();
            _this.setStyles();
            if (!Activator_1.Activator.isLicensed) {
                _this.adLogo();
            }
            window.addEventListener('resize', _this.adjustUI);
        };
        this.render = function (completeCallback, cancelCallback) {
            _this.completeCallback = completeCallback;
            if (cancelCallback) {
                _this.cancelCallback = cancelCallback;
            }
            _this.selectMarker(null);
            _this.startRender(_this.renderFinished);
        };
        this.close = function () {
            if (_this.toolbarUI) {
                document.body.removeChild(_this.toolbarUI);
            }
            if (_this.markerImage) {
                document.body.removeChild(_this.markerImageHolder);
            }
            if (_this.logoUI) {
                document.body.removeChild(_this.logoUI);
            }
        };
        this.addMarker = function (markerType) {
            var marker = markerType.createMarker();
            marker.onSelected = _this.selectMarker;
            if (marker.defs && marker.defs.length > 0) {
                for (var _i = 0, _a = marker.defs; _i < _a.length; _i++) {
                    var d = _a[_i];
                    if (d.id && !_this.markerImage.getElementById(d.id)) {
                        _this.defs.appendChild(d);
                    }
                }
            }
            _this.markers.push(marker);
            _this.selectMarker(marker);
            _this.markerImage.appendChild(marker.visual);
            var bbox = marker.visual.getBBox();
            var x = _this.width / 2 / _this.scale - bbox.width / 2;
            var y = _this.height / 2 / _this.scale - bbox.height / 2;
            var translate = marker.visual.transform.baseVal.getItem(0);
            translate.setMatrix(translate.matrix.translate(x, y));
            marker.visual.transform.baseVal.replaceItem(translate, 0);
        };
        this.deleteActiveMarker = function () {
            if (_this.activeMarker) {
                _this.deleteMarker(_this.activeMarker);
            }
        };
        this.setTargetRect = function () {
            var targetRect = _this.target.getBoundingClientRect();
            var bodyRect = document.body.parentElement.getBoundingClientRect();
            _this.targetRect = {
                left: targetRect.left - bodyRect.left,
                top: targetRect.top - bodyRect.top
            };
        };
        this.startRender = function (done) {
            var renderer = new Renderer_1.Renderer();
            renderer.rasterize(_this.target, _this.markerImage, done);
        };
        this.attachEvents = function () {
            _this.markerImage.addEventListener('mousedown', _this.mouseDown);
            _this.markerImage.addEventListener('mousemove', _this.mouseMove);
            _this.markerImage.addEventListener('mouseup', _this.mouseUp);
        };
        this.mouseDown = function (ev) {
            if (_this.activeMarker && (ev.buttons & 1) > 0) {
                _this.activeMarker.deselect();
                _this.activeMarker = null;
            }
        };
        this.mouseMove = function (ev) {
            if (_this.activeMarker && (ev.buttons & 1) > 0) {
                _this.activeMarker.manipulate(ev);
            }
        };
        this.mouseUp = function (ev) {
            if (_this.activeMarker) {
                _this.activeMarker.endManipulation();
            }
        };
        this.initMarkerCanvas = function () {
            _this.markerImageHolder = document.createElement('div');
            _this.markerImageHolder.style.setProperty('touch-action', 'none');
            _this.markerImageHolder.style.setProperty('-ms-touch-action', 'none');
            _this.markerImage = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            _this.markerImage.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            _this.markerImage.setAttribute('width', _this.width.toString());
            _this.markerImage.setAttribute('height', _this.height.toString());
            _this.markerImage.setAttribute('viewBox', '0 0 ' + _this.width.toString() + ' ' + _this.height.toString());
            _this.markerImageHolder.style.position = 'absolute';
            _this.markerImageHolder.style.width = _this.width + "px";
            _this.markerImageHolder.style.height = _this.height + "px";
            _this.markerImageHolder.style.transformOrigin = 'top left';
            _this.positionMarkerImage();
            _this.defs = SvgHelper_1.SvgHelper.createDefs();
            _this.markerImage.appendChild(_this.defs);
            _this.markerImageHolder.appendChild(_this.markerImage);
            document.body.appendChild(_this.markerImageHolder);
        };
        this.adjustUI = function (ev) {
            _this.adjustSize();
            _this.positionUI();
        };
        this.adjustSize = function () {
            _this.width = _this.target.clientWidth;
            _this.height = _this.target.clientHeight;
            var scale = _this.target.clientWidth / _this.markerImageHolder.clientWidth;
            if (scale !== 1.0) {
                _this.scale *= scale;
                _this.markerImageHolder.style.width = _this.width + "px";
                _this.markerImageHolder.style.height = _this.height + "px";
                _this.markerImageHolder.style.transform = "scale(" + _this.scale + ")";
            }
        };
        this.positionUI = function () {
            _this.setTargetRect();
            _this.positionMarkerImage();
            _this.positionToolbar();
            if (_this.logoUI) {
                _this.positionLogo();
            }
        };
        this.positionMarkerImage = function () {
            _this.markerImageHolder.style.top = _this.targetRect.top + 'px';
            _this.markerImageHolder.style.left = _this.targetRect.left + 'px';
        };
        this.positionToolbar = function () {
            _this.toolbarUI.style.left = _this.targetRect.left +
                _this.target.offsetWidth -
                _this.toolbarUI.clientWidth + "px";
            _this.toolbarUI.style.top = _this.targetRect.top - _this.toolbarUI.clientHeight + "px";
        };
        this.showUI = function () {
            _this.toolbar = new Toolbar_1.Toolbar(_this.toolbars, _this.toolbarClick);
            _this.toolbarUI = _this.toolbar.getUI();
            document.body.appendChild(_this.toolbarUI);
            _this.toolbarUI.style.position = 'absolute';
            _this.positionToolbar();
        };
        this.setStyles = function () {
            var editorStyleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
            editorStyleSheet.innerHTML = "\n            .rect-marker .render-visual {\n                stroke: #ff0000;\n                stroke-width: 3;\n                fill: transparent;\n            }\n            .cover-marker .render-visual {\n                stroke-width: 0;\n                fill: #000000;\n            }\n            .highlight-marker .render-visual {\n                stroke: transparent;\n                stroke-width: 0;\n                fill: #ffff00;\n                fill-opacity: 0.4;\n            }\n            .line-marker .render-visual {\n                stroke: #ff0000;\n                stroke-width: 3;\n                fill: transparent;\n            }\n            .arrow-marker .render-visual {\n                stroke: #ff0000;\n                stroke-width: 3;\n                fill: transparent;\n            }\n            .arrow-marker-tip {\n                stroke-width: 0;\n                fill: #ff0000;\n            }\n            .text-marker text {\n                fill: #ff0000;\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n                    Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\",\n                    \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n            }\n            .fc-whiteboardrect-control-box .fc-whiteboardrect-control-rect {\n                stroke: black;\n                stroke-width: 1;\n                stroke-opacity: 0.5;\n                stroke-dasharray: 3, 2;\n                fill: transparent;\n            }\n            .fc-whiteboardcontrol-grip {\n                fill: #cccccc;\n                stroke: #333333;\n                stroke-width: 2;\n            }\n        ";
            _this.markerImage.appendChild(editorStyleSheet);
        };
        this.toolbarClick = function (ev, toolbarItem) {
            if (toolbarItem.markerType) {
                _this.addMarker(toolbarItem.markerType);
            }
            else {
                switch (toolbarItem.name) {
                    case 'delete': {
                        _this.deleteActiveMarker();
                        break;
                    }
                    case 'pointer': {
                        if (_this.activeMarker) {
                            _this.selectMarker(null);
                        }
                        break;
                    }
                    case 'close': {
                        _this.cancel();
                        break;
                    }
                    case 'ok': {
                        _this.complete();
                        break;
                    }
                }
            }
        };
        this.selectMarker = function (marker) {
            if (_this.activeMarker && _this.activeMarker !== marker) {
                _this.activeMarker.deselect();
            }
            _this.activeMarker = marker;
        };
        this.deleteMarker = function (marker) {
            _this.markerImage.removeChild(marker.visual);
            if (_this.activeMarker === marker) {
                _this.activeMarker = null;
            }
            _this.markers.splice(_this.markers.indexOf(marker), 1);
        };
        this.complete = function () {
            _this.selectMarker(null);
            _this.startRender(_this.renderFinishedClose);
        };
        this.cancel = function () {
            _this.close();
            if (_this.cancelCallback) {
                _this.cancelCallback();
            }
        };
        this.renderFinished = function (dataUrl) {
            _this.completeCallback(dataUrl);
        };
        this.renderFinishedClose = function (dataUrl) {
            _this.close();
            _this.completeCallback(dataUrl);
        };
        this.positionLogo = function () {
            if (_this.logoUI) {
                _this.logoUI.style.left = _this.targetRect.left + 10 + "px";
                _this.logoUI.style.top = _this.targetRect.top +
                    _this.target.offsetHeight -
                    _this.logoUI.clientHeight -
                    10 + "px";
            }
        };
        this.adLogo = function () {
            _this.logoUI = document.createElement('div');
            _this.logoUI.className = 'fc-whiteboardlogo';
            var link = document.createElement('a');
            link.href = 'https://markerjs.com/';
            link.target = '_blank';
            link.innerHTML = markerjs_logo_m_svg_1.default;
            link.title = 'Powered by marker.js';
            _this.logoUI.appendChild(link);
            document.body.appendChild(_this.logoUI);
            _this.logoUI.style.position = 'absolute';
            _this.positionLogo();
        };
        this.target = target;
        this.width = target.clientWidth;
        this.height = target.clientHeight;
        this.markers = [];
        this.activeMarker = null;
    }
    return MarkerArea;
}());
exports.MarkerArea = MarkerArea;