whiteboard/dist/cjs/board/Drawboard/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 index_1 = require("./../Baseboard/index");
var toolbar_items_1 = require("./../../toolbar/toolbar-items");
var Synthetizer_1 = require("../../renderer/Synthetizer");
var Toolbar_1 = require("../../toolbar/Toolbar");
require("./index.less");
var Drawboard = (function (_super) {
    __extends(Drawboard, _super);
    function Drawboard(source, _a) {
        var _b = _a === void 0 ? {} : _a, page = _b.page, onChange = _b.onChange;
        var _this = _super.call(this, source) || this;
        _this.scale = 1.0;
        _this.onComplete = function () { };
        _this.onChange = function () { };
        _this.open = function (onComplete, onCancel) {
            if (onComplete) {
                _this.onComplete = onComplete;
            }
            if (onCancel) {
                _this.onCancel = onCancel;
            }
            _this.setTargetRect();
            _this.initBoard();
            _this.attachEvents();
            _this.setStyles();
            window.addEventListener('resize', _this.adjustUI);
            if (_this.page.mode === 'master') {
                _this.showUI();
            }
        };
        _this.hide = function () {
            if (_this.source.imgSrc) {
                _this.target.style.display = 'none';
            }
            _this.boardHolder.style.opacity = '0';
            _this.boardHolder.style.zIndex = '-1';
            if (_this.toolbar) {
                _this.toolbar.hide();
            }
        };
        _this.show = function () {
            if (_this.source.imgSrc) {
                _this.target.style.display = 'block';
            }
            _this.boardHolder.style.opacity = '1';
            _this.boardHolder.style.zIndex = '9999';
            if (_this.toolbar) {
                _this.toolbar.show();
            }
        };
        _this.close = function () {
            if (_this.toolbarUI) {
                document.body.removeChild(_this.toolbarUI);
            }
            if (_this.boardCanvas) {
                document.body.removeChild(_this.boardHolder);
            }
        };
        _this.render = function (onComplete, onCancel) {
            _this.onComplete = onComplete;
            if (onCancel) {
                _this.onCancel = onCancel;
            }
            _this.selectMarker(null);
            _this.startRender(_this.renderFinished);
        };
        _this.addMarker = function (markerType, _a) {
            var id = (_a === void 0 ? {} : _a).id;
            var marker = markerType.createMarker(_this.page);
            if (id) {
                marker.id = id;
            }
            marker.onSelected = _this.selectMarker;
            marker.onChange = _this.onChange;
            if (marker.defs && marker.defs.length > 0) {
                for (var _i = 0, _b = marker.defs; _i < _b.length; _i++) {
                    var d = _b[_i];
                    if (d.id && !_this.boardCanvas.getElementById(d.id)) {
                        _this.defs.appendChild(d);
                    }
                }
            }
            _this.onChange({
                target: 'marker',
                parentId: _this.page ? _this.page.id : _this.id,
                event: 'add',
                data: { type: marker.type, id: marker.id }
            });
            _this.markers.push(marker);
            _this.selectMarker(marker);
            _this.boardCanvas.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) {
                if (_this.onChange) {
                    _this.onChange({
                        event: 'remove',
                        id: _this.activeMarker.id,
                        target: 'marker',
                        data: { id: _this.activeMarker.id }
                    });
                }
                _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 Synthetizer_1.Synthetizer();
            renderer.rasterize(_this.target, _this.boardCanvas, done);
        };
        _this.attachEvents = function () {
            _this.boardCanvas.addEventListener('mousedown', _this.mouseDown);
            _this.boardCanvas.addEventListener('mousemove', _this.mouseMove);
            _this.boardCanvas.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.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.boardHolder.clientWidth;
            if (scale !== 1.0) {
                _this.scale *= scale;
                _this.boardHolder.style.width = _this.width + "px";
                _this.boardHolder.style.height = _this.height + "px";
                _this.boardHolder.style.transform = "scale(" + _this.scale + ")";
            }
        };
        _this.positionUI = function () {
            _this.setTargetRect();
            _this.positionBoard();
            _this.positionToolbar();
        };
        _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-whiteboard-rect-control-box .fc-whiteboard-rect-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-whiteboard-control-grip {\n                fill: #cccccc;\n                stroke: #333333;\n                stroke-width: 2;\n            }\n        ";
            _this.boardCanvas.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;
                    }
                    default:
                        break;
                }
            }
        };
        _this.selectMarker = function (marker) {
            if (_this.activeMarker && _this.activeMarker !== marker) {
                _this.activeMarker.deselect();
            }
            _this.activeMarker = marker;
        };
        _this.deleteMarker = function (marker) {
            _this.boardCanvas.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.onCancel) {
                _this.onCancel();
            }
        };
        _this.renderFinished = function (dataUrl) {
            _this.onComplete(dataUrl);
        };
        _this.renderFinishedClose = function (dataUrl) {
            _this.close();
            _this.onComplete(dataUrl);
        };
        if (page) {
            _this.page = page;
        }
        _this.markers = [];
        _this.activeMarker = null;
        _this.toolbars = toolbar_items_1.getToolbars(page);
        if (onChange) {
            _this.onChange = onChange;
        }
        return _this;
    }
    Object.defineProperty(Drawboard.prototype, "markerMap", {
        get: function () {
            var map = {};
            this.markers.forEach(function (marker) {
                map[marker.id] = marker;
            });
            return map;
        },
        enumerable: true,
        configurable: true
    });
    return Drawboard;
}(index_1.Baseboard));
exports.Drawboard = Drawboard;