feat: add dist

dist/cjs/board/Baseboard/index.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var uuid_1 = require("./../../utils/uuid");
+var index_1 = require("./../../renderer/SvgHelper/index");
+var Baseboard = (function () {
+    function Baseboard(source) {
+        var _this = this;
+        this.id = uuid_1.uuid();
+        this.initBoard = function () {
+            _this.boardHolder = document.createElement('div');
+            _this.boardHolder.id = "fcw-board-holder-" + _this.id;
+            _this.boardHolder.style.setProperty('touch-action', 'none');
+            _this.boardHolder.style.setProperty('-ms-touch-action', 'none');
+            document.body.appendChild(_this.boardHolder);
+            _this.boardCanvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            _this.boardCanvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            _this.boardCanvas.setAttribute('width', _this.width.toString());
+            _this.boardCanvas.setAttribute('height', _this.height.toString());
+            _this.boardCanvas.setAttribute('viewBox', '0 0 ' + _this.width.toString() + ' ' + _this.height.toString());
+            _this.boardHolder.style.position = 'absolute';
+            _this.boardHolder.style.width = _this.width + "px";
+            _this.boardHolder.style.height = _this.height + "px";
+            _this.boardHolder.style.transformOrigin = 'top left';
+            _this.positionBoard();
+            _this.defs = index_1.SvgHelper.createDefs();
+            _this.boardCanvas.appendChild(_this.defs);
+            _this.boardHolder.appendChild(_this.boardCanvas);
+        };
+        this.positionBoard = function () {
+            _this.boardHolder.style.top = _this.targetRect.top + 'px';
+            _this.boardHolder.style.left = _this.targetRect.left + 'px';
+        };
+        this.source = source;
+        if (source.imgEle) {
+            this.target = source.imgEle;
+            this.width = this.target.clientWidth;
+            this.height = this.target.clientHeight;
+        }
+    }
+    return Baseboard;
+}());
+exports.Baseboard = Baseboard;

dist/cjs/board/Drawboard/index.js

@@ -0,0 +1,280 @@
+"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;

dist/cjs/board/WhitePage/index.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index_1 = require("./../Drawboard/index");
+var uuid_1 = require("./../../utils/uuid");
+var types_1 = require("../../markers/types");
+require("./index.less");
+var dom_1 = require("../../utils/dom");
+var prefix = 'fcw-page';
+var WhitePage = (function () {
+    function WhitePage(source, _a) {
+        var _b = _a === void 0 ? {} : _a, mode = _b.mode, eventHub = _b.eventHub, parentContainer = _b.parentContainer;
+        this.id = uuid_1.uuid();
+        this.mode = 'master';
+        if (mode) {
+            this.mode = mode;
+        }
+        this.eventHub = eventHub;
+        this.parentContainer = parentContainer;
+        this.initSource(source);
+        if (this.mode === 'master') {
+            this.initMaster();
+        }
+        if (this.mode === 'mirror') {
+            this.initMirror();
+        }
+    }
+    WhitePage.prototype.open = function () {
+        this.drawboard.open();
+    };
+    WhitePage.prototype.hide = function () {
+        this.drawboard.hide();
+    };
+    WhitePage.prototype.show = function () {
+        this.drawboard.show();
+    };
+    WhitePage.prototype.close = function () {
+        this.drawboard.close();
+    };
+    WhitePage.prototype.initSource = function (source) {
+        if (typeof source.imgSrc === 'string' && !this.parentContainer) {
+            throw new Error('Invalid source, If you set image url, you must also set parentContainer');
+        }
+        this.source = source;
+        if (source.imgEle) {
+            this.target = source.imgEle;
+        }
+        if (typeof source.imgSrc === 'string') {
+            this.container = dom_1.createDivWithClassName(prefix, this.parentContainer);
+            this.container.id = this.id;
+            this.target = document.createElement('img');
+            this.target.src = source.imgSrc;
+            this.target.alt = 'Siema image';
+            this.container.appendChild(this.target);
+        }
+    };
+    WhitePage.prototype.initMaster = function () {
+        var _this = this;
+        if (this.eventHub) {
+            this.drawboard = new index_1.Drawboard({ imgEle: this.target }, {
+                page: this,
+                onChange: function (ev) { return _this.eventHub.emit('sync', ev); }
+            });
+        }
+        else {
+            this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this });
+        }
+    };
+    WhitePage.prototype.initMirror = function () {
+        var _this = this;
+        if (!this.eventHub) {
+            throw new Error('Invalid eventHub');
+        }
+        this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this });
+        this.eventHub.on('sync', function (ev) {
+            try {
+                if (ev.target === 'page' && ev.id === _this.id) {
+                    _this.onPageSync();
+                }
+                if (ev.target === 'marker') {
+                    _this.onMarkerSync(ev);
+                }
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        });
+    };
+    WhitePage.prototype.onPageSync = function () { };
+    WhitePage.prototype.onMarkerSync = function (ev) {
+        if (ev.event === 'add' && ev.parentId === this.id) {
+            var data = ev.data;
+            var marker = this.drawboard.markerMap[data.id];
+            if (!marker) {
+                this.drawboard.addMarker(types_1.getMarkerByType(data.type), { id: data.id });
+            }
+        }
+        if (!ev.id) {
+            return;
+        }
+        if (ev.event === 'remove') {
+            var data = ev.data;
+            var marker = this.drawboard.markerMap[data.id];
+            if (marker) {
+                this.drawboard.deleteMarker(marker);
+            }
+        }
+        if (ev.event === 'move' || ev.event === 'resize') {
+            var marker = this.drawboard.markerMap[ev.id];
+            if (marker) {
+                marker.reactToManipulation(ev.event, ev.data);
+            }
+        }
+        if (ev.event === 'changeText') {
+            var marker = this.drawboard.markerMap[ev.id];
+            if (marker) {
+                marker.setText(ev.data);
+            }
+        }
+    };
+    return WhitePage;
+}());
+exports.WhitePage = WhitePage;

dist/cjs/board/Whiteboard/index.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Siema = require("siema");
+var index_1 = require("../WhitePage/index");
+var uuid_1 = require("../../utils/uuid");
+var dom_1 = require("../../utils/dom");
+require("./index.less");
+var LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
+var RightArrowIcon = require('../../assets/bx-right-arrow.svg');
+var prefix = 'fcw-board';
+var SerializableWhiteboard = (function () {
+    function SerializableWhiteboard() {
+    }
+    return SerializableWhiteboard;
+}());
+exports.SerializableWhiteboard = SerializableWhiteboard;
+var Whiteboard = (function () {
+    function Whiteboard(target, _a) {
+        var _b = _a === void 0 ? {} : _a, sources = _b.sources, eventHub = _b.eventHub, mode = _b.mode, visiblePageIndex = _b.visiblePageIndex;
+        this.id = uuid_1.uuid();
+        this.sources = [];
+        this.mode = 'master';
+        this.isFullscreen = false;
+        this.pages = [];
+        this.isInitialized = false;
+        this.visiblePageIndex = 0;
+        if (target) {
+            this.target = target;
+        }
+        else {
+            this.target = document.createElement('div');
+            document.body.appendChild(this.target);
+        }
+        if (!this.target.id) {
+            this.target.id = this.id;
+        }
+        dom_1.addClassName(this.target, prefix);
+        if (sources) {
+            this.sources = sources;
+        }
+        this.eventHub = eventHub;
+        if (mode) {
+            this.mode = mode;
+        }
+        if (typeof visiblePageIndex !== 'undefined') {
+            this.visiblePageIndex = visiblePageIndex;
+        }
+        this.init();
+    }
+    Whiteboard.prototype.open = function () {
+        var _this = this;
+        this.pages.forEach(function (page, i) {
+            page.open();
+            if (i !== _this.visiblePageIndex) {
+                page.hide();
+            }
+        });
+    };
+    Whiteboard.prototype.close = function () {
+        if (this.emitInterval) {
+            clearInterval(this.emitInterval);
+        }
+    };
+    Whiteboard.prototype.snap = function () {
+        return {
+            id: this.id,
+            sources: this.sources,
+            pageIds: this.pages.map(function (page) { return page.id; }),
+            visiblePageIndex: this.visiblePageIndex
+        };
+    };
+    Whiteboard.prototype.init = function () {
+        this.imgsContainer = dom_1.createDivWithClassName(prefix + "-imgs", this.target);
+        this.pagesContainer = dom_1.createDivWithClassName(prefix + "-pages", this.target);
+        if (this.mode === 'master') {
+            this.initMaster();
+            this.emitSnapshot();
+        }
+        if (this.mode === 'mirror') {
+            this.initMirror();
+        }
+    };
+    Whiteboard.prototype.initMaster = function () {
+        var _this = this;
+        this.sources.forEach(function (source) {
+            var page = new index_1.WhitePage({ imgSrc: source }, {
+                mode: _this.mode,
+                eventHub: _this.eventHub,
+                parentContainer: _this.pagesContainer
+            });
+            page.container.style.opacity = '0';
+            _this.pages.push(page);
+        });
+        this.initSiema();
+        var controller = dom_1.createDivWithClassName(prefix + "-controller", this.target);
+        var prevEle = dom_1.createDivWithClassName(prefix + "-flip-arrow", controller);
+        prevEle.innerHTML = LeftArrowIcon;
+        var nextEle = dom_1.createDivWithClassName(prefix + "-flip-arrow", controller);
+        nextEle.innerHTML = RightArrowIcon;
+        nextEle.addEventListener('click', function () {
+            var nextPageIndex = _this.visiblePageIndex + 1 > _this.pages.length - 1 ? 0 : _this.visiblePageIndex + 1;
+            _this.onPageChange(nextPageIndex);
+        });
+        prevEle.addEventListener('click', function () {
+            var nextPageIndex = _this.visiblePageIndex - 1 < 0 ? _this.pages.length - 1 : _this.visiblePageIndex - 1;
+            _this.onPageChange(nextPageIndex);
+        });
+    };
+    Whiteboard.prototype.initMirror = function () {
+        var _this = this;
+        if (!this.eventHub) {
+            throw new Error('Invalid eventHub');
+        }
+        this.eventHub.on('sync', function (ev) {
+            if (ev.target !== 'whiteboard') {
+                return;
+            }
+            if (ev.event === 'snap') {
+                if (_this.isInitialized) {
+                    return;
+                }
+                _this.onSnapshot(ev.data);
+            }
+            if (ev.event === 'changeIndex' && ev.id === _this.id) {
+                if (_this.isInitialized) {
+                    _this.onPageChange(ev.data);
+                }
+            }
+        });
+    };
+    Whiteboard.prototype.initSiema = function () {
+        var _this = this;
+        this.sources.forEach(function (source) {
+            var imgEle = document.createElement('img');
+            dom_1.addClassName(imgEle, prefix + "-img");
+            imgEle.src = source;
+            imgEle.alt = 'Siema image';
+            _this.imgsContainer.appendChild(imgEle);
+        });
+        this.siema = new Siema({
+            selector: this.imgsContainer,
+            duration: 200,
+            easing: 'ease-out',
+            perPage: 1,
+            startIndex: 0,
+            draggable: false,
+            multipleDrag: true,
+            threshold: 20,
+            loop: false,
+            rtl: false
+        });
+    };
+    Whiteboard.prototype.onPageChange = function (nextPageIndex) {
+        this.siema.goTo(nextPageIndex);
+        this.visiblePageIndex = nextPageIndex;
+        this.pages.forEach(function (page, i) {
+            if (nextPageIndex === i) {
+                page.show();
+            }
+            else {
+                page.hide();
+            }
+        });
+        if (this.mode === 'master' && this.eventHub) {
+            this.eventHub.emit('sync', {
+                event: 'changeIndex',
+                id: this.id,
+                target: 'whiteboard',
+                data: nextPageIndex
+            });
+        }
+    };
+    Whiteboard.prototype.emitSnapshot = function () {
+        var _this = this;
+        var innerFunc = function () {
+            if (_this.eventHub) {
+                _this.eventHub.emit('sync', {
+                    event: 'snap',
+                    id: _this.id,
+                    target: 'whiteboard',
+                    data: _this.snap()
+                });
+            }
+        };
+        this.emitInterval = setInterval(function () {
+            innerFunc();
+        }, 5 * 1000);
+        setTimeout(innerFunc, 500);
+    };
+    Whiteboard.prototype.onSnapshot = function (snap) {
+        var _this = this;
+        var id = snap.id, sources = snap.sources, pageIds = snap.pageIds, visiblePageIndex = snap.visiblePageIndex;
+        if (!this.isInitialized) {
+            this.id = id;
+            this.sources = sources;
+            this.initSiema();
+            this.sources.forEach(function (source, i) {
+                var page = new index_1.WhitePage({ imgSrc: source }, {
+                    mode: _this.mode,
+                    eventHub: _this.eventHub,
+                    parentContainer: _this.pagesContainer
+                });
+                page.id = pageIds[i];
+                page.container.style.opacity = '0';
+                _this.pages.push(page);
+                page.open();
+            });
+        }
+        this.isInitialized = true;
+        this.onPageChange(visiblePageIndex);
+    };
+    return Whiteboard;
+}());
+exports.Whiteboard = Whiteboard;

dist/cjs/board/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/cjs/event/Event.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/cjs/event/EventHub.js

@@ -0,0 +1,24 @@
+"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 EventEmitter = require("eventemitter3");
+var EventHub = (function (_super) {
+    __extends(EventHub, _super);
+    function EventHub() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return EventHub;
+}(EventEmitter));
+exports.EventHub = EventHub;

dist/cjs/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Drawboard_1 = require("./board/Drawboard");
+exports.Drawboard = Drawboard_1.Drawboard;

dist/cjs/markers/arrow/ArrowMarker.js → dist/cjs/markers/ArrowMarker/index.js

@@ -13,12 +13,13 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var LineMarkerBase_1 = require("../line/LineMarkerBase");
-var SvgHelper_1 = require("../../utils/SvgHelper");
+var LinearMarker_1 = require("../LinearMarker");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
 var ArrowMarker = (function (_super) {
     __extends(ArrowMarker, _super);
     function ArrowMarker() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'arrow';
         _this.ARROW_SIZE = 6;
         return _this;
     }
@@ -29,11 +30,12 @@ var ArrowMarker = (function (_super) {
         this.defs.push(SvgHelper_1.SvgHelper.createMarker('arrow-marker-head', 'auto', this.ARROW_SIZE, this.ARROW_SIZE, this.ARROW_SIZE - 1, this.ARROW_SIZE / 2, tip));
         this.markerLine.setAttribute('marker-end', 'url(#arrow-marker-head');
     };
-    ArrowMarker.createMarker = function () {
+    ArrowMarker.createMarker = function (page) {
         var marker = new ArrowMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
     return ArrowMarker;
-}(LineMarkerBase_1.LineMarkerBase));
+}(LinearMarker_1.LinearMarker));
 exports.ArrowMarker = ArrowMarker;

dist/cjs/markers/base/ResizeGrip.js → dist/cjs/markers/BaseMarker/ResizeGrip.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
 var ResizeGrip = (function () {
     function ResizeGrip() {
         this.GRIP_SIZE = 10;
-        this.visual = SvgHelper_1.SvgHelper.createCircle(this.GRIP_SIZE, [['class', 'fc-whiteboardcontrol-grip']]);
+        this.visual = SvgHelper_1.SvgHelper.createCircle(this.GRIP_SIZE, [['class', 'fc-whiteboard-control-grip']]);
     }
     return ResizeGrip;
 }());

dist/cjs/markers/base/MarkerBase.js → dist/cjs/markers/BaseMarker/index.js

@@ -1,26 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var MarkerBase = (function () {
-    function MarkerBase() {
+var uuid = require("uuid/v1");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
+var BaseMarker = (function () {
+    function BaseMarker() {
         var _this = this;
+        this.id = uuid();
+        this.type = 'base';
+        this.onChange = function () { };
         this.defs = [];
         this.width = 200;
         this.height = 50;
         this.isActive = true;
+        this.isDragging = false;
         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.onChange({ target: 'marker', id: _this.id, event: 'move', data: { dx: dx, dy: dy } });
                 _this.move(dx, dy);
             }
             if (_this.isResizing) {
-                _this.resize(dx, dy);
+                _this.resize(dx, dy, function (pos) {
+                    _this.onChange({ target: 'marker', id: _this.id, event: 'resize', data: { dx: dx, dy: dy, pos: pos } });
+                });
             }
             _this.previousMouseX = ev.screenX;
             _this.previousMouseY = ev.screenY;
@@ -33,6 +40,9 @@ var MarkerBase = (function () {
         };
         this.mouseDown = function (ev) {
             ev.stopPropagation();
+            if (_this.page && _this.page.mode === 'mirror') {
+                return;
+            }
             _this.select();
             _this.isDragging = true;
             _this.previousMouseX = ev.screenX;
@@ -52,23 +62,32 @@ var MarkerBase = (function () {
             _this.visual.transform.baseVal.replaceItem(translate, 0);
         };
     }
-    MarkerBase.prototype.endManipulation = function () {
+    BaseMarker.prototype.reactToManipulation = function (type, _a) {
+        var dx = _a.dx, dy = _a.dy, pos = _a.pos;
+        if (type === 'move') {
+            this.move(dx, dy);
+        }
+        if (type === 'resize') {
+            this.resizeByEvent(dx, dy, pos);
+        }
+    };
+    BaseMarker.prototype.endManipulation = function () {
         this.isDragging = false;
         this.isResizing = false;
     };
-    MarkerBase.prototype.select = function () {
+    BaseMarker.prototype.select = function () {
         this.isActive = true;
         if (this.onSelected) {
             this.onSelected(this);
         }
         return;
     };
-    MarkerBase.prototype.deselect = function () {
+    BaseMarker.prototype.deselect = function () {
         this.isActive = false;
         this.endManipulation();
         return;
     };
-    MarkerBase.prototype.setup = function () {
+    BaseMarker.prototype.setup = function () {
         this.visual = SvgHelper_1.SvgHelper.createGroup();
         this.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
         this.visual.addEventListener('mousedown', this.mouseDown);
@@ -80,10 +99,13 @@ var MarkerBase = (function () {
         this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]);
         this.visual.appendChild(this.renderVisual);
     };
-    MarkerBase.prototype.resize = function (x, y) {
+    BaseMarker.prototype.resize = function (x, y, cb) {
+        return;
+    };
+    BaseMarker.prototype.resizeByEvent = function (x, y, pos) {
         return;
     };
-    MarkerBase.prototype.onTouch = function (ev) {
+    BaseMarker.prototype.onTouch = function (ev) {
         ev.preventDefault();
         var newEvt = document.createEvent('MouseEvents');
         var touch = ev.changedTouches[0];
@@ -98,15 +120,18 @@ var MarkerBase = (function () {
             case 'touchend':
                 type = 'mouseup';
                 break;
+            default:
+                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();
+    BaseMarker.createMarker = function (page) {
+        var marker = new BaseMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
-    return MarkerBase;
+    return BaseMarker;
 }());
-exports.MarkerBase = MarkerBase;
+exports.BaseMarker = BaseMarker;

dist/cjs/markers/cover/CoverMarker.js → dist/cjs/markers/CoverMarker/index.js

@@ -13,22 +13,25 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var RectMarkerBase_1 = require("../rect/RectMarkerBase");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
+var RectBaseMarker_1 = require("../RectMarker/RectBaseMarker");
 var CoverMarker = (function (_super) {
     __extends(CoverMarker, _super);
     function CoverMarker() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'cover';
+        return _this;
     }
     CoverMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'cover-marker']]);
     };
-    CoverMarker.createMarker = function () {
+    CoverMarker.createMarker = function (page) {
         var marker = new CoverMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
     return CoverMarker;
-}(RectMarkerBase_1.RectMarkerBase));
+}(RectBaseMarker_1.RectBaseMarker));
 exports.CoverMarker = CoverMarker;

dist/cjs/markers/highlight/HighlightMarker.js → dist/cjs/markers/HighlightMarker/index.js

@@ -13,22 +13,25 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var RectMarkerBase_1 = require("../rect/RectMarkerBase");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
+var RectBaseMarker_1 = require("../RectMarker/RectBaseMarker");
 var HighlightMarker = (function (_super) {
     __extends(HighlightMarker, _super);
     function HighlightMarker() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'highlight';
+        return _this;
     }
     HighlightMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'highlight-marker']]);
     };
-    HighlightMarker.createMarker = function () {
+    HighlightMarker.createMarker = function (page) {
         var marker = new HighlightMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
     return HighlightMarker;
-}(RectMarkerBase_1.RectMarkerBase));
+}(RectBaseMarker_1.RectBaseMarker));
 exports.HighlightMarker = HighlightMarker;

dist/cjs/markers/line/LineMarker.js → dist/cjs/markers/LineMarker/index.js

@@ -13,22 +13,25 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var LineMarkerBase_1 = require("./LineMarkerBase");
+var LinearMarker_1 = require("../LinearMarker");
+var index_1 = require("./../../renderer/SvgHelper/index");
 var LineMarker = (function (_super) {
     __extends(LineMarker, _super);
     function LineMarker() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'line';
+        return _this;
     }
     LineMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
-        SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'line-marker']]);
+        index_1.SvgHelper.setAttributes(this.visual, [['class', 'line-marker']]);
     };
-    LineMarker.createMarker = function () {
+    LineMarker.createMarker = function (page) {
         var marker = new LineMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
     return LineMarker;
-}(LineMarkerBase_1.LineMarkerBase));
+}(LinearMarker_1.LinearMarker));
 exports.LineMarker = LineMarker;

dist/cjs/markers/line/LineMarkerBase.js → dist/cjs/markers/LinearMarker/index.js

@@ -13,12 +13,12 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var MarkerBase_1 = require("../base/MarkerBase");
-var ResizeGrip_1 = require("../base/ResizeGrip");
-var LineMarkerBase = (function (_super) {
-    __extends(LineMarkerBase, _super);
-    function LineMarkerBase() {
+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;
@@ -31,7 +31,7 @@ var LineMarkerBase = (function (_super) {
             return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
         };
         _this.addControlBox = function () {
-            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboardline-control-box']]);
+            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboard-line-control-box']]);
             _this.addToVisual(_this.controlBox);
             _this.addControlGrips();
         };
@@ -39,8 +39,10 @@ var LineMarkerBase = (function (_super) {
             _this.positionGrips();
         };
         _this.addControlGrips = function () {
-            _this.controlGrip1 = _this.createGrip();
-            _this.controlGrip2 = _this.createGrip();
+            _this.controlGrips = {
+                left: _this.createGrip(),
+                right: _this.createGrip()
+            };
             _this.positionGrips();
         };
         _this.createGrip = function () {
@@ -56,13 +58,13 @@ var LineMarkerBase = (function (_super) {
             return grip;
         };
         _this.positionGrips = function () {
-            var gripSize = _this.controlGrip1.GRIP_SIZE;
+            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.controlGrip1.visual, x1, y1);
-            _this.positionGrip(_this.controlGrip2.visual, x2, y2);
+            _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);
@@ -72,9 +74,9 @@ var LineMarkerBase = (function (_super) {
         _this.gripMouseDown = function (ev) {
             _this.isResizing = true;
             _this.activeGrip =
-                ev.target === _this.controlGrip1.visual
-                    ? _this.controlGrip1
-                    : _this.controlGrip2;
+                ev.target === _this.controlGrips.left.visual
+                    ? _this.controlGrips.left
+                    : _this.controlGrips.right;
             _this.previousMouseX = ev.screenX;
             _this.previousMouseY = ev.screenY;
             ev.stopPropagation();
@@ -91,20 +93,20 @@ var LineMarkerBase = (function (_super) {
         };
         return _this;
     }
-    LineMarkerBase.prototype.endManipulation = function () {
+    LinearMarker.prototype.endManipulation = function () {
         _super.prototype.endManipulation.call(this);
         this.isResizing = false;
         this.activeGrip = null;
     };
-    LineMarkerBase.prototype.select = function () {
+    LinearMarker.prototype.select = function () {
         _super.prototype.select.call(this);
         this.controlBox.style.display = '';
     };
-    LineMarkerBase.prototype.deselect = function () {
+    LinearMarker.prototype.deselect = function () {
         _super.prototype.deselect.call(this);
         this.controlBox.style.display = 'none';
     };
-    LineMarkerBase.prototype.setup = function () {
+    LinearMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
         this.markerBgLine = SvgHelper_1.SvgHelper.createLine(0, 0, this.x2, 0, [
             ['stroke', 'transparent'],
@@ -114,10 +116,13 @@ var LineMarkerBase = (function (_super) {
         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';
+        }
     };
-    LineMarkerBase.prototype.resize = function (x, y) {
+    LinearMarker.prototype.resize = function (x, y, onPosition) {
         if (this.activeGrip) {
-            if (this.activeGrip === this.controlGrip1 &&
+            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;
@@ -125,8 +130,11 @@ var LineMarkerBase = (function (_super) {
                 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.controlGrip2 &&
+            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;
@@ -134,15 +142,28 @@ var LineMarkerBase = (function (_super) {
                 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();
     };
-    LineMarkerBase.createMarker = function () {
-        var marker = new LineMarkerBase();
+    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.setup();
         return marker;
     };
-    return LineMarkerBase;
-}(MarkerBase_1.MarkerBase));
-exports.LineMarkerBase = LineMarkerBase;
+    return LinearMarker;
+}(BaseMarker_1.BaseMarker));
+exports.LinearMarker = LinearMarker;

dist/cjs/markers/rect/RectMarkerBase.js → dist/cjs/markers/RectMarker/RectBaseMarker.js

@@ -13,28 +13,29 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var RectangularMarkerBase_1 = require("../base/RectangularMarkerBase");
-var RectMarkerBase = (function (_super) {
-    __extends(RectMarkerBase, _super);
-    function RectMarkerBase() {
+var SvgHelper_1 = require("../../renderer/SvgHelper");
+var RectangularMarker_1 = require("../RectangularMarker");
+var RectBaseMarker = (function (_super) {
+    __extends(RectBaseMarker, _super);
+    function RectBaseMarker() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    RectMarkerBase.prototype.setup = function () {
+    RectBaseMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
         this.markerRect = SvgHelper_1.SvgHelper.createRect(this.width, this.height);
         this.addToRenderVisual(this.markerRect);
     };
-    RectMarkerBase.prototype.resize = function (x, y) {
-        _super.prototype.resize.call(this, x, y);
+    RectBaseMarker.prototype.resize = function (x, y, onPosition) {
+        _super.prototype.resize.call(this, x, y, onPosition);
         this.markerRect.setAttribute('width', this.width.toString());
         this.markerRect.setAttribute('height', this.height.toString());
     };
-    RectMarkerBase.createMarker = function () {
-        var marker = new RectMarkerBase();
+    RectBaseMarker.createMarker = function (page) {
+        var marker = new RectBaseMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
-    return RectMarkerBase;
-}(RectangularMarkerBase_1.RectangularMarkerBase));
-exports.RectMarkerBase = RectMarkerBase;
+    return RectBaseMarker;
+}(RectangularMarker_1.RectangularMarker));
+exports.RectBaseMarker = RectBaseMarker;

dist/cjs/markers/rect/RectMarker.js → dist/cjs/markers/RectMarker/index.js

@@ -13,22 +13,25 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var RectMarkerBase_1 = require("./RectMarkerBase");
+var RectBaseMarker_1 = require("./RectBaseMarker");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
 var RectMarker = (function (_super) {
     __extends(RectMarker, _super);
     function RectMarker() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'rect';
+        return _this;
     }
     RectMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'rect-marker']]);
     };
-    RectMarker.createMarker = function () {
+    RectMarker.createMarker = function (page) {
         var marker = new RectMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
     return RectMarker;
-}(RectMarkerBase_1.RectMarkerBase));
+}(RectBaseMarker_1.RectBaseMarker));
 exports.RectMarker = RectMarker;

dist/cjs/markers/base/RectangularMarkerBase.js → dist/cjs/markers/RectangularMarker/index.js

@@ -13,23 +13,23 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var MarkerBase_1 = require("./MarkerBase");
 var RectangularMarkerGrips_1 = require("./RectangularMarkerGrips");
-var ResizeGrip_1 = require("./ResizeGrip");
-var RectangularMarkerBase = (function (_super) {
-    __extends(RectangularMarkerBase, _super);
-    function RectangularMarkerBase() {
+var BaseMarker_1 = require("../BaseMarker");
+var ResizeGrip_1 = require("../BaseMarker/ResizeGrip");
+var SvgHelper_1 = require("../../renderer/SvgHelper");
+var RectangularMarker = (function (_super) {
+    __extends(RectangularMarker, _super);
+    function RectangularMarker() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.MIN_SIZE = 5;
         _this.CB_DISTANCE = 10;
         _this.addControlBox = function () {
-            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboardrect-control-box']]);
+            _this.controlBox = SvgHelper_1.SvgHelper.createGroup([['class', 'fc-whiteboard-rect-control-box']]);
             var translate = SvgHelper_1.SvgHelper.createTransform();
             translate.setTranslate(-_this.CB_DISTANCE / 2, -_this.CB_DISTANCE / 2);
             _this.controlBox.transform.baseVal.appendItem(translate);
             _this.addToVisual(_this.controlBox);
-            _this.controlRect = SvgHelper_1.SvgHelper.createRect(_this.width + _this.CB_DISTANCE, _this.height + _this.CB_DISTANCE, [['class', 'fc-whiteboardrect-control-rect']]);
+            _this.controlRect = SvgHelper_1.SvgHelper.createRect(_this.width + _this.CB_DISTANCE, _this.height + _this.CB_DISTANCE, [['class', 'fc-whiteboard-rect-control-rect']]);
             _this.controlBox.appendChild(_this.controlRect);
             _this.controlGrips = new RectangularMarkerGrips_1.RectangularMarkerGrips();
             _this.addControlGrips();
@@ -103,24 +103,31 @@ var RectangularMarkerBase = (function (_super) {
         };
         return _this;
     }
-    RectangularMarkerBase.prototype.endManipulation = function () {
+    RectangularMarker.prototype.endManipulation = function () {
         _super.prototype.endManipulation.call(this);
         this.isResizing = false;
         this.activeGrip = null;
     };
-    RectangularMarkerBase.prototype.select = function () {
+    RectangularMarker.prototype.select = function () {
         _super.prototype.select.call(this);
         this.controlBox.style.display = '';
     };
-    RectangularMarkerBase.prototype.deselect = function () {
+    RectangularMarker.prototype.deselect = function () {
         _super.prototype.deselect.call(this);
         this.controlBox.style.display = 'none';
     };
-    RectangularMarkerBase.prototype.setup = function () {
+    RectangularMarker.prototype.setup = function () {
         _super.prototype.setup.call(this);
         this.addControlBox();
+        if (this.page && this.page.mode === 'mirror') {
+            this.controlBox.style.display = 'none';
+        }
+    };
+    RectangularMarker.prototype.resizeByEvent = function (x, y, pos) {
+        this.activeGrip = this.controlGrips[pos];
+        this.resize(x, y);
     };
-    RectangularMarkerBase.prototype.resize = function (x, y) {
+    RectangularMarker.prototype.resize = function (x, y, onPosition) {
         var translateX = 0;
         var translateY = 0;
         switch (this.activeGrip) {
@@ -129,34 +136,60 @@ var RectangularMarkerBase = (function (_super) {
                 this.height -= y;
                 translateX += x;
                 translateY += y;
+                if (onPosition) {
+                    onPosition('topLeft');
+                }
                 break;
             case this.controlGrips.bottomLeft:
                 this.width -= x;
                 this.height += y;
                 translateX += x;
+                if (onPosition) {
+                    onPosition('bottomLeft');
+                }
                 break;
             case this.controlGrips.topRight:
                 this.width += x;
                 this.height -= y;
                 translateY += y;
+                if (onPosition) {
+                    onPosition('topRight');
+                }
                 break;
             case this.controlGrips.bottomRight:
                 this.width += x;
                 this.height += y;
+                if (onPosition) {
+                    onPosition('bottomRight');
+                }
                 break;
             case this.controlGrips.centerLeft:
                 this.width -= x;
                 translateX += x;
+                if (onPosition) {
+                    onPosition('centerLeft');
+                }
                 break;
             case this.controlGrips.centerRight:
                 this.width += x;
+                if (onPosition) {
+                    onPosition('centerRight');
+                }
                 break;
             case this.controlGrips.topCenter:
                 this.height -= y;
                 translateY += y;
+                if (onPosition) {
+                    onPosition('topCenter');
+                }
                 break;
             case this.controlGrips.bottomCenter:
                 this.height += y;
+                if (onPosition) {
+                    onPosition('bottomCenter');
+                }
+                break;
+            default:
                 break;
         }
         if (this.width < this.MIN_SIZE) {
@@ -180,14 +213,15 @@ var RectangularMarkerBase = (function (_super) {
         }
         this.adjustControlBox();
     };
-    RectangularMarkerBase.prototype.onTouch = function (ev) {
+    RectangularMarker.prototype.onTouch = function (ev) {
         _super.prototype.onTouch.call(this, ev);
     };
-    RectangularMarkerBase.createMarker = function () {
-        var marker = new RectangularMarkerBase();
+    RectangularMarker.createMarker = function (page) {
+        var marker = new RectangularMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
-    return RectangularMarkerBase;
-}(MarkerBase_1.MarkerBase));
-exports.RectangularMarkerBase = RectangularMarkerBase;
+    return RectangularMarker;
+}(BaseMarker_1.BaseMarker));
+exports.RectangularMarker = RectangularMarker;

dist/cjs/markers/text/TextMarker.js → dist/cjs/markers/TextMarker/index.js

@@ -13,14 +13,15 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var SvgHelper_1 = require("../../utils/SvgHelper");
-var RectangularMarkerBase_1 = require("../base/RectangularMarkerBase");
-var check_svg_1 = require("./check.svg");
-var times_svg_1 = require("./times.svg");
+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;
@@ -72,7 +73,7 @@ var TextMarker = (function (_super) {
         };
         _this.showEditor = function () {
             _this.editor = document.createElement('div');
-            _this.editor.className = 'fc-whiteboardtext-editor';
+            _this.editor.className = 'fc-whiteboard-text-editor';
             _this.editorTextArea = document.createElement('textarea');
             if (_this.text !== _this.DEFAULT_TEXT) {
                 _this.editorTextArea.value = _this.text;
@@ -81,16 +82,16 @@ var TextMarker = (function (_super) {
             _this.editor.appendChild(_this.editorTextArea);
             document.body.appendChild(_this.editor);
             var buttons = document.createElement('div');
-            buttons.className = 'fc-whiteboardtext-editor-button-bar';
+            buttons.className = 'fc-whiteboard-text-editor-button-bar';
             _this.editor.appendChild(buttons);
             var okButton = document.createElement('div');
-            okButton.className = 'fc-whiteboardtext-editor-button';
-            okButton.innerHTML = check_svg_1.default;
+            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-whiteboardtext-editor-button';
-            cancelButton.innerHTML = times_svg_1.default;
+            cancelButton.className = 'fc-whiteboard-text-editor-button';
+            cancelButton.innerHTML = CancelIcon;
             cancelButton.addEventListener('click', _this.closeEditor);
             buttons.appendChild(cancelButton);
         };
@@ -101,6 +102,7 @@ var TextMarker = (function (_super) {
             else {
                 _this.text = _this.DEFAULT_TEXT;
             }
+            _this.onChange({ target: 'marker', id: _this.id, event: 'changeText', data: _this.text });
             _this.renderText();
             _this.closeEditor();
         };
@@ -115,6 +117,10 @@ var TextMarker = (function (_super) {
         };
         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();
@@ -126,15 +132,16 @@ var TextMarker = (function (_super) {
         this.visual.addEventListener('dblclick', this.onDblClick);
         this.visual.addEventListener('touchstart', this.onTap);
     };
-    TextMarker.prototype.resize = function (x, y) {
-        _super.prototype.resize.call(this, x, y);
+    TextMarker.prototype.resize = function (x, y, onPosition) {
+        _super.prototype.resize.call(this, x, y, onPosition);
         this.sizeText();
     };
-    TextMarker.createMarker = function () {
+    TextMarker.createMarker = function (page) {
         var marker = new TextMarker();
+        marker.page = page;
         marker.setup();
         return marker;
     };
     return TextMarker;
-}(RectangularMarkerBase_1.RectangularMarkerBase));
+}(RectangularMarker_1.RectangularMarker));
 exports.TextMarker = TextMarker;

dist/cjs/markers/arrow/ArrowMarkerToolbarItem.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var ArrowMarker_1 = require("./ArrowMarker");
-var arrow_marker_toolbar_icon_svg_1 = require("./arrow-marker-toolbar-icon.svg");
-var ArrowMarkerToolbarItem = (function () {
-    function ArrowMarkerToolbarItem() {
-        this.name = 'arrow-marker';
-        this.tooltipText = 'Arrow';
-        this.icon = arrow_marker_toolbar_icon_svg_1.default;
-        this.markerType = ArrowMarker_1.ArrowMarker;
-    }
-    return ArrowMarkerToolbarItem;
-}());
-exports.ArrowMarkerToolbarItem = ArrowMarkerToolbarItem;

dist/cjs/markers/cover/CoverMarkerToolbarItem.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var CoverMarker_1 = require("./CoverMarker");
-var cover_marker_toolbar_icon_svg_1 = require("./cover-marker-toolbar-icon.svg");
-var CoverMarkerToolbarItem = (function () {
-    function CoverMarkerToolbarItem() {
-        this.name = 'cover-marker';
-        this.tooltipText = 'Cover';
-        this.icon = cover_marker_toolbar_icon_svg_1.default;
-        this.markerType = CoverMarker_1.CoverMarker;
-    }
-    return CoverMarkerToolbarItem;
-}());
-exports.CoverMarkerToolbarItem = CoverMarkerToolbarItem;

dist/cjs/markers/highlight/HighlightMarkerToolbarItem.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var HighlightMarker_1 = require("./HighlightMarker");
-var highlight_marker_toolbar_icon_svg_1 = require("./highlight-marker-toolbar-icon.svg");
-var HighlightMarkerToolbarItem = (function () {
-    function HighlightMarkerToolbarItem() {
-        this.name = 'cover-marker';
-        this.tooltipText = 'Cover';
-        this.icon = highlight_marker_toolbar_icon_svg_1.default;
-        this.markerType = HighlightMarker_1.HighlightMarker;
-    }
-    return HighlightMarkerToolbarItem;
-}());
-exports.HighlightMarkerToolbarItem = HighlightMarkerToolbarItem;

dist/cjs/markers/line/LineMarkerToolbarItem.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var LineMarker_1 = require("./LineMarker");
-var line_marker_toolbar_icon_svg_1 = require("./line-marker-toolbar-icon.svg");
-var LineMarkerToolbarItem = (function () {
-    function LineMarkerToolbarItem() {
-        this.name = 'line-marker';
-        this.tooltipText = 'Line';
-        this.icon = line_marker_toolbar_icon_svg_1.default;
-        this.markerType = LineMarker_1.LineMarker;
-    }
-    return LineMarkerToolbarItem;
-}());
-exports.LineMarkerToolbarItem = LineMarkerToolbarItem;

dist/cjs/markers/rect/RectMarkerToolbarItem.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var RectMarker_1 = require("./RectMarker");
-var rect_marker_toolbar_icon_svg_1 = require("./rect-marker-toolbar-icon.svg");
-var RectMarkerToolbarItem = (function () {
-    function RectMarkerToolbarItem() {
-        this.name = "rect-marker";
-        this.tooltipText = "Rectangle";
-        this.icon = rect_marker_toolbar_icon_svg_1.default;
-        this.markerType = RectMarker_1.RectMarker;
-    }
-    return RectMarkerToolbarItem;
-}());
-exports.RectMarkerToolbarItem = RectMarkerToolbarItem;

dist/cjs/markers/text/TextMarkerToolbarItem.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var TextMarker_1 = require("./TextMarker");
-var text_marker_toolbar_icon_svg_1 = require("./text-marker-toolbar-icon.svg");
-var TextMarkerToolbarItem = (function () {
-    function TextMarkerToolbarItem() {
-        this.name = "text-marker";
-        this.tooltipText = "Text";
-        this.icon = text_marker_toolbar_icon_svg_1.default;
-        this.markerType = TextMarker_1.TextMarker;
-    }
-    return TextMarkerToolbarItem;
-}());
-exports.TextMarkerToolbarItem = TextMarkerToolbarItem;

dist/cjs/markers/types.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index_1 = require("./HighlightMarker/index");
+var index_2 = require("./TextMarker/index");
+var index_3 = require("./ArrowMarker/index");
+var index_4 = require("./BaseMarker/index");
+var CoverMarker_1 = require("./CoverMarker");
+var LineMarker_1 = require("./LineMarker");
+var RectMarker_1 = require("./RectMarker");
+function getMarkerByType(type) {
+    switch (type) {
+        case 'arrow':
+            return index_3.ArrowMarker;
+        case 'base':
+            return index_4.BaseMarker;
+        case 'cover':
+            return CoverMarker_1.CoverMarker;
+        case 'highlight':
+            return index_1.HighlightMarker;
+        case 'line':
+            return LineMarker_1.LineMarker;
+        case 'rect':
+            return RectMarker_1.RectMarker;
+        case 'text':
+            return index_2.TextMarker;
+        default:
+            return index_4.BaseMarker;
+    }
+}
+exports.getMarkerByType = getMarkerByType;

dist/cjs/render/Activator.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var Activator = (function () {
-    function Activator() {
-    }
-    Object.defineProperty(Activator, "isLicensed", {
-        get: function () {
-            if (Activator.key) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return Activator;
-}());
-exports.Activator = Activator;

dist/cjs/render/MarkerArea.js

@@ -1,305 +0,0 @@
-"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;

dist/cjs/render/Renderer.js → dist/cjs/renderer/Synthetizer/index.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var Renderer = (function () {
-    function Renderer() {
+var validator_1 = require("../../utils/validator");
+var Synthetizer = (function () {
+    function Synthetizer() {
     }
-    Renderer.prototype.rasterize = function (target, markerImage, done) {
+    Synthetizer.prototype.rasterize = function (target, markerImage, done) {
+        if (!validator_1.isHTMLImageElement(target)) {
+            throw new Error('Error: only support export HTMLImageElement');
+        }
         var canvas = document.createElement('canvas');
         canvas.width = markerImage.width.baseVal.value;
         canvas.height = markerImage.height.baseVal.value;
@@ -25,6 +29,6 @@ var Renderer = (function () {
         };
         img.src = url;
     };
-    return Renderer;
+    return Synthetizer;
 }());
-exports.Renderer = Renderer;
+exports.Synthetizer = Synthetizer;

dist/cjs/toolbar/Toolbar.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var ToolbarButton_1 = require("./ToolbarButton");
+var uuid_1 = require("../utils/uuid");
 var Toolbar = (function () {
     function Toolbar(toolbarItems, clickHandler) {
         var _this = this;
+        this.id = uuid_1.uuid();
         this.getUI = function () {
             _this.toolbarUI = document.createElement('div');
-            _this.toolbarUI.className = 'fc-whiteboardtoolbar';
+            _this.toolbarUI.id = "fcw-toolbar-" + _this.id;
+            _this.toolbarUI.className = 'fc-whiteboard-toolbar';
             for (var _i = 0, _a = _this.toolbarItems; _i < _a.length; _i++) {
                 var toolbarItem = _a[_i];
                 var toolbarButton = new ToolbarButton_1.ToolbarButton(toolbarItem, _this.clickHandler);
@@ -17,6 +20,14 @@ var Toolbar = (function () {
         this.toolbarItems = toolbarItems;
         this.clickHandler = clickHandler;
     }
+    Toolbar.prototype.hide = function () {
+        this.toolbarUI.style.opacity = '0';
+        this.toolbarUI.style.zIndex = '-1';
+    };
+    Toolbar.prototype.show = function () {
+        this.toolbarUI.style.opacity = '1';
+        this.toolbarUI.style.zIndex = '999';
+    };
     return Toolbar;
 }());
 exports.Toolbar = Toolbar;

dist/cjs/toolbar/ToolbarButton.js

@@ -6,7 +6,7 @@ var ToolbarButton = (function () {
         this.getElement = function () {
             var div = document.createElement('div');
             if (_this.toolbarItem.name !== 'separator') {
-                div.className = 'fc-whiteboardtoolbar-button';
+                div.className = 'fc-whiteboard-toolbar-button';
                 if (_this.clickHandler) {
                     div.addEventListener('click', function (ev) {
                         if (_this.clickHandler) {
@@ -23,7 +23,7 @@ var ToolbarButton = (function () {
                 }
             }
             else {
-                div.className = 'fc-whiteboardtoolbar-separator';
+                div.className = 'fc-whiteboard-toolbar-separator';
             }
             return div;
         };

dist/cjs/toolbar/ToolbarItem.js

@@ -1,2 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var ToolbarItem = (function () {
+    function ToolbarItem(_a) {
+        var name = _a.name, tooltipText = _a.tooltipText, icon = _a.icon, markerType = _a.markerType;
+        this.name = name;
+        this.tooltipText = tooltipText;
+        this.icon = icon;
+        this.markerType = markerType;
+    }
+    return ToolbarItem;
+}());
+exports.ToolbarItem = ToolbarItem;

dist/cjs/toolbar/toolbar-items.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index_1 = require("./../markers/RectMarker/index");
+var index_2 = require("./../markers/CoverMarker/index");
+var index_3 = require("./../markers/TextMarker/index");
+var index_4 = require("./../markers/ArrowMarker/index");
+var index_5 = require("./../markers/HighlightMarker/index");
+var ToolbarItem_1 = require("./ToolbarItem");
+var LineMarker_1 = require("../markers/LineMarker");
+var OkIcon = require('../assets/check.svg');
+var DeleteIcon = require('../assets/eraser.svg');
+var PointerIcon = require('../assets/mouse-pointer.svg');
+var CloseIcon = require('../assets/times.svg');
+exports.highlightMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'cover-marker',
+    tooltipText: 'Cover',
+    icon: require('../assets/highlight.svg'),
+    markerType: index_5.HighlightMarker
+});
+exports.arrowMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'arrow-marker',
+    tooltipText: 'Arrow',
+    icon: require('../assets/arrow.svg'),
+    markerType: index_4.ArrowMarker
+});
+exports.textMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'text-marker',
+    tooltipText: 'Text',
+    icon: require('../assets/text.svg'),
+    markerType: index_3.TextMarker
+});
+exports.coverMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'cover-marker',
+    tooltipText: 'Cover',
+    icon: require('../assets/cover.svg'),
+    markerType: index_2.CoverMarker
+});
+exports.rectMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'rect-marker',
+    tooltipText: 'Rectangle',
+    icon: require('../assets/rect.svg'),
+    markerType: index_1.RectMarker
+});
+exports.lineMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'line-marker',
+    tooltipText: 'Line',
+    icon: require('../assets/line.svg'),
+    markerType: LineMarker_1.LineMarker
+});
+function getToolbars(page) {
+    var toolbars = [
+        {
+            icon: PointerIcon,
+            name: 'pointer',
+            tooltipText: 'Pointer'
+        },
+        {
+            icon: DeleteIcon,
+            name: 'delete',
+            tooltipText: 'Delete'
+        },
+        {
+            name: 'separator',
+            tooltipText: ''
+        },
+        exports.rectMarkerToolbarItem,
+        exports.coverMarkerToolbarItem,
+        exports.highlightMarkerToolbarItem,
+        exports.lineMarkerToolbarItem,
+        exports.arrowMarkerToolbarItem,
+        exports.textMarkerToolbarItem,
+        {
+            name: 'separator',
+            tooltipText: ''
+        }
+    ];
+    if (!page) {
+        toolbars.push.apply(toolbars, [
+            {
+                icon: OkIcon,
+                name: 'ok',
+                tooltipText: 'OK'
+            }
+        ]);
+    }
+    toolbars.push({
+        icon: CloseIcon,
+        name: 'close',
+        tooltipText: 'Close'
+    });
+    return toolbars;
+}
+exports.getToolbars = getToolbars;

dist/cjs/utils/dom.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function createDivWithClassName(className, parent) {
+    var ele = document.createElement('div');
+    if (parent) {
+        parent.appendChild(ele);
+    }
+    if (className) {
+        addClassName(ele, className);
+    }
+    return ele;
+}
+exports.createDivWithClassName = createDivWithClassName;
+function addClassName(ele, className) {
+    if (!ele) {
+        return;
+    }
+    ele.className = ((ele.className || '') + " " + className).trim();
+}
+exports.addClassName = addClassName;

dist/cjs/utils/uuid.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var uuidV1 = require("uuid/v1");
+exports.uuid = uuidV1;

dist/cjs/utils/validator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function isHTMLImageElement(ele) {
+    if (typeof ele === 'object' && ele instanceof HTMLImageElement) {
+        return true;
+    }
+    return false;
+}
+exports.isHTMLImageElement = isHTMLImageElement;

dist/types/board/Baseboard/index.d.ts

@@ -0,0 +1,15 @@
+import { WhitePageSource } from './../types';
+export declare class Baseboard {
+    id: string;
+    source: WhitePageSource;
+    target: HTMLImageElement;
+    targetRect: ClientRect;
+    boardCanvas: SVGSVGElement;
+    boardHolder: HTMLDivElement;
+    defs: SVGDefsElement;
+    width: number;
+    height: number;
+    constructor(source: WhitePageSource);
+    protected initBoard: () => void;
+    protected positionBoard: () => void;
+}

dist/types/board/Drawboard/index.d.ts

@@ -0,0 +1,53 @@
+import { WhitePageSource } from './../types';
+import { Baseboard } from './../Baseboard/index';
+import { BaseMarker } from './../../markers/BaseMarker/index';
+import { WhitePage } from './../WhitePage/index';
+import { onSyncFunc } from './../../event/Event';
+import './index.less';
+export declare class Drawboard extends Baseboard {
+    private scale;
+    page: WhitePage;
+    private markers;
+    readonly markerMap: {
+        [key: string]: BaseMarker;
+    };
+    private activeMarker;
+    private toolbar;
+    private toolbars;
+    private toolbarUI;
+    private onComplete;
+    private onChange;
+    private onCancel;
+    constructor(source: WhitePageSource, { page, onChange }?: {
+        page?: WhitePage;
+        onChange?: onSyncFunc;
+    });
+    open: (onComplete?: ((dataUrl: string) => void) | undefined, onCancel?: (() => void) | undefined) => void;
+    hide: () => void;
+    show: () => void;
+    close: () => void;
+    render: (onComplete: (dataUrl: string) => void, onCancel?: (() => void) | undefined) => void;
+    addMarker: (markerType: typeof BaseMarker, { id }?: {
+        id?: string | undefined;
+    }) => void;
+    deleteActiveMarker: () => void;
+    private setTargetRect;
+    private startRender;
+    private attachEvents;
+    private mouseDown;
+    private mouseMove;
+    private mouseUp;
+    private adjustUI;
+    private adjustSize;
+    private positionUI;
+    private positionToolbar;
+    private showUI;
+    private setStyles;
+    private toolbarClick;
+    private selectMarker;
+    deleteMarker: (marker: BaseMarker) => void;
+    private complete;
+    private cancel;
+    private renderFinished;
+    private renderFinishedClose;
+}

dist/types/board/WhitePage/index.d.ts

@@ -0,0 +1,28 @@
+import { EventHub } from '../../event/EventHub';
+import { WhiteboardMode, WhitePageSource } from './../types';
+import { Drawboard } from './../Drawboard/index';
+import './index.less';
+export declare class WhitePage {
+    id: string;
+    source: WhitePageSource;
+    target: HTMLImageElement;
+    container: HTMLDivElement;
+    parentContainer?: HTMLDivElement;
+    mode: WhiteboardMode;
+    drawboard: Drawboard;
+    eventHub?: EventHub;
+    constructor(source: WhitePageSource, { mode, eventHub, parentContainer }?: {
+        mode?: WhiteboardMode;
+        eventHub?: EventHub;
+        parentContainer?: HTMLDivElement;
+    });
+    open(): void;
+    hide(): void;
+    show(): void;
+    close(): void;
+    private initSource;
+    protected initMaster(): void;
+    protected initMirror(): void;
+    private onPageSync;
+    private onMarkerSync;
+}

dist/types/board/Whiteboard/index.d.ts

@@ -0,0 +1,41 @@
+import { WhiteboardMode } from '../types';
+import { WhitePage } from '../WhitePage/index';
+import { EventHub } from '../../event/EventHub';
+import './index.less';
+export declare class SerializableWhiteboard {
+    id: string;
+    sources: string[];
+    pageIds: string[];
+    visiblePageIndex: number;
+}
+export declare class Whiteboard {
+    id: string;
+    sources: string[];
+    target: HTMLDivElement;
+    imgsContainer: HTMLDivElement;
+    pagesContainer: HTMLDivElement;
+    eventHub?: EventHub;
+    mode: WhiteboardMode;
+    isFullscreen: boolean;
+    pages: WhitePage[];
+    siema: any;
+    isInitialized: boolean;
+    visiblePageIndex: number;
+    emitInterval: any;
+    constructor(target: HTMLDivElement, { sources, eventHub, mode, visiblePageIndex }?: {
+        sources?: string[];
+        eventHub?: EventHub;
+        mode?: WhiteboardMode;
+        visiblePageIndex?: number;
+    });
+    open(): void;
+    close(): void;
+    snap(): SerializableWhiteboard;
+    private init;
+    private initMaster;
+    private initMirror;
+    private initSiema;
+    private onPageChange;
+    private emitSnapshot;
+    private onSnapshot;
+}

dist/types/board/types.d.ts

@@ -0,0 +1,5 @@
+export declare type WhiteboardMode = 'master' | 'mirror';
+export declare type WhitePageSource = {
+    imgEle?: HTMLImageElement;
+    imgSrc?: string;
+};

dist/types/event/Event.d.ts

@@ -0,0 +1,11 @@
+export declare type TargetType = 'whiteboard' | 'page' | 'marker';
+export declare type EventType = 'snap' | 'add' | 'resize' | 'move' | 'remove' | 'changeIndex' | 'changeText';
+export declare type PositionType = 'left' | 'right' | 'topLeft' | 'bottomLeft' | 'topRight' | 'bottomRight' | 'centerLeft' | 'centerRight' | 'topCenter' | 'bottomCenter';
+export interface SyncEvent {
+    target: TargetType;
+    id?: string;
+    parentId?: string;
+    event: EventType;
+    data?: object | string | number;
+}
+export declare type onSyncFunc = (ev: SyncEvent) => void;

dist/types/event/EventHub.d.ts

@@ -0,0 +1,3 @@
+import * as EventEmitter from 'eventemitter3';
+export declare class EventHub extends EventEmitter<'sync'> {
+}

dist/types/index.d.ts

@@ -0,0 +1 @@
+export { Drawboard } from './board/Drawboard';

dist/types/markers/ArrowMarker/index.d.ts

@@ -0,0 +1,9 @@
+import { MarkerType } from './../types';
+import { LinearMarker } from '../LinearMarker';
+import { WhitePage } from '../../board/WhitePage';
+export declare class ArrowMarker extends LinearMarker {
+    type: MarkerType;
+    static createMarker: (page?: WhitePage | undefined) => LinearMarker;
+    private readonly ARROW_SIZE;
+    protected setup(): void;
+}

dist/types/markers/BaseMarker/index.d.ts

@@ -0,0 +1,41 @@
+import { WhitePage } from './../../board/WhitePage/index';
+import { PositionType } from '../../event/Event';
+import { onSyncFunc, EventType } from '../../event/Event';
+import { MarkerType } from '../types';
+export declare class BaseMarker {
+    id: string;
+    type: MarkerType;
+    page?: WhitePage;
+    onChange: onSyncFunc;
+    static createMarker: (page?: WhitePage | undefined) => BaseMarker;
+    visual: SVGGElement;
+    renderVisual: SVGGElement;
+    onSelected: (marker: BaseMarker) => void;
+    defs: SVGElement[];
+    protected width: number;
+    protected height: number;
+    protected isActive: boolean;
+    protected isDragging: boolean;
+    protected isResizing: boolean;
+    protected previousMouseX: number;
+    protected previousMouseY: number;
+    reactToManipulation(type: EventType, { dx, dy, pos }: {
+        dx: number;
+        dy: number;
+        pos: PositionType;
+    }): void;
+    manipulate: (ev: MouseEvent) => void;
+    endManipulation(): void;
+    select(): void;
+    deselect(): void;
+    protected setup(): void;
+    protected addToVisual: (el: SVGElement) => void;
+    protected addToRenderVisual: (el: SVGElement) => void;
+    protected resize(x: number, y: number, cb?: Function): void;
+    protected resizeByEvent(x: number, y: number, pos?: PositionType): void;
+    protected onTouch(ev: TouchEvent): void;
+    private mouseDown;
+    private mouseUp;
+    private mouseMove;
+    private move;
+}

dist/types/markers/CoverMarker/index.d.ts

@@ -0,0 +1,8 @@
+import { MarkerType } from './../types';
+import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
+import { WhitePage } from '../../board/WhitePage';
+export declare class CoverMarker extends RectBaseMarker {
+    type: MarkerType;
+    static createMarker: (page?: WhitePage | undefined) => RectBaseMarker;
+    protected setup(): void;
+}

dist/types/markers/HighlightMarker/index.d.ts

@@ -0,0 +1,8 @@
+import { MarkerType } from './../types';
+import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
+import { WhitePage } from '../../board/WhitePage';
+export declare class HighlightMarker extends RectBaseMarker {
+    type: MarkerType;
+    static createMarker: (page?: WhitePage | undefined) => RectBaseMarker;
+    protected setup(): void;
+}

dist/types/markers/LineMarker/index.d.ts

@@ -0,0 +1,8 @@
+import { MarkerType } from './../types';
+import { LinearMarker } from '../LinearMarker';
+import { WhitePage } from '../../board/WhitePage';
+export declare class LineMarker extends LinearMarker {
+    type: MarkerType;
+    static createMarker: (page?: WhitePage | undefined) => LinearMarker;
+    protected setup(): void;
+}

dist/types/markers/LinearMarker/index.d.ts

@@ -0,0 +1,32 @@
+import { WhitePage } from './../../board/WhitePage/index';
+import { BaseMarker } from '../BaseMarker';
+import { PositionType } from '../../event/Event';
+export declare class LinearMarker extends BaseMarker {
+    static createMarker: (page?: WhitePage | undefined) => LinearMarker;
+    protected markerLine: SVGLineElement;
+    private readonly MIN_LENGTH;
+    private markerBgLine;
+    private controlBox;
+    private controlGrips;
+    private activeGrip;
+    private x1;
+    private y1;
+    private x2;
+    private y2;
+    endManipulation(): void;
+    select(): void;
+    deselect(): void;
+    protected setup(): void;
+    protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void): void;
+    protected resizeByEvent(x: number, y: number, pos?: PositionType): void;
+    private getLineLength;
+    private addControlBox;
+    private adjustControlBox;
+    private addControlGrips;
+    private createGrip;
+    private positionGrips;
+    private positionGrip;
+    private gripMouseDown;
+    private gripMouseUp;
+    private gripMouseMove;
+}

dist/types/markers/RectMarker/RectBaseMarker.d.ts

@@ -0,0 +1,9 @@
+import { PositionType } from '../../event/Event';
+import { RectangularMarker } from '../RectangularMarker';
+import { WhitePage } from '../../board/WhitePage';
+export declare class RectBaseMarker extends RectangularMarker {
+    static createMarker: (page?: WhitePage | undefined) => RectBaseMarker;
+    private markerRect;
+    protected setup(): void;
+    protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void): void;
+}

dist/types/markers/RectMarker/index.d.ts

@@ -0,0 +1,8 @@
+import { WhitePage } from './../../board/WhitePage/index';
+import { MarkerType } from './../types';
+import { RectBaseMarker } from './RectBaseMarker';
+export declare class RectMarker extends RectBaseMarker {
+    type: MarkerType;
+    static createMarker: (page?: WhitePage | undefined) => RectBaseMarker;
+    protected setup(): void;
+}

dist/types/markers/base/RectangularMarkerGrips.d.ts → dist/types/markers/RectangularMarker/RectangularMarkerGrips.d.ts

@@ -1,4 +1,4 @@
-import { ResizeGrip } from './ResizeGrip';
+import { ResizeGrip } from '../BaseMarker/ResizeGrip';
 export declare class RectangularMarkerGrips {
     topLeft: ResizeGrip;
     topCenter: ResizeGrip;

dist/types/markers/RectangularMarker/index.d.ts

@@ -0,0 +1,28 @@
+import { BaseMarker } from '../BaseMarker';
+import { PositionType } from '../../event/Event';
+import { WhitePage } from '../../board/WhitePage';
+export declare class RectangularMarker extends BaseMarker {
+    static createMarker: (page?: WhitePage | undefined) => RectangularMarker;
+    protected MIN_SIZE: number;
+    private controlBox;
+    private readonly CB_DISTANCE;
+    private controlRect;
+    private controlGrips;
+    private activeGrip;
+    endManipulation(): void;
+    select(): void;
+    deselect(): void;
+    protected setup(): void;
+    protected resizeByEvent(x: number, y: number, pos: PositionType): void;
+    protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void): void;
+    protected onTouch(ev: TouchEvent): void;
+    private addControlBox;
+    private adjustControlBox;
+    private addControlGrips;
+    private createGrip;
+    private positionGrips;
+    private positionGrip;
+    private gripMouseDown;
+    private gripMouseUp;
+    private gripMouseMove;
+}

dist/types/markers/TextMarker/index.d.ts

@@ -0,0 +1,26 @@
+import { MarkerType } from '../types';
+import { RectangularMarker } from '../RectangularMarker';
+import { PositionType } from '../../event/Event';
+import { WhitePage } from '../../board/WhitePage';
+export declare class TextMarker extends RectangularMarker {
+    type: MarkerType;
+    static createMarker: (page?: WhitePage | undefined) => TextMarker;
+    setText(text: string): void;
+    protected readonly MIN_SIZE = 50;
+    private readonly DEFAULT_TEXT;
+    private text;
+    private textElement;
+    private inDoubleTap;
+    private editor;
+    private editorTextArea;
+    protected setup(): void;
+    protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void): void;
+    private renderText;
+    private sizeText;
+    private onDblClick;
+    private onTap;
+    private showEditor;
+    private onEditorOkClick;
+    private closeEditor;
+    private onEditorKeyDown;
+}

dist/types/markers/arrow/ArrowMarker.d.ts

@@ -1,6 +0,0 @@
-import { LineMarkerBase } from '../line/LineMarkerBase';
-export declare class ArrowMarker extends LineMarkerBase {
-  static createMarker: () => LineMarkerBase;
-  private readonly ARROW_SIZE;
-  protected setup(): void;
-}

dist/types/markers/arrow/ArrowMarkerToolbarItem.d.ts

@@ -1,8 +0,0 @@
-import { ToolbarItem } from '../../toolbar/ToolbarItem';
-import { ArrowMarker } from './ArrowMarker';
-export declare class ArrowMarkerToolbarItem implements ToolbarItem {
-    name: string;
-    tooltipText: string;
-    icon: string;
-    markerType: typeof ArrowMarker;
-}

dist/types/markers/base/MarkerBase.d.ts

@@ -1,27 +0,0 @@
-export declare class MarkerBase {
-  static createMarker: () => MarkerBase;
-  visual: SVGGElement;
-  renderVisual: SVGGElement;
-  onSelected: (marker: MarkerBase) => void;
-  defs: SVGElement[];
-  protected width: number;
-  protected height: number;
-  protected isActive: boolean;
-  protected isResizing: boolean;
-  protected previousMouseX: number;
-  protected previousMouseY: number;
-  private isDragging;
-  manipulate: (ev: MouseEvent) => void;
-  endManipulation(): void;
-  select(): void;
-  deselect(): void;
-  protected setup(): void;
-  protected addToVisual: (el: SVGElement) => void;
-  protected addToRenderVisual: (el: SVGElement) => void;
-  protected resize(x: number, y: number): void;
-  protected onTouch(ev: TouchEvent): void;
-  private mouseDown;
-  private mouseUp;
-  private mouseMove;
-  private move;
-}

dist/types/markers/base/RectangularMarkerBase.d.ts

@@ -1,25 +0,0 @@
-import { MarkerBase } from './MarkerBase';
-export declare class RectangularMarkerBase extends MarkerBase {
-  static createMarker: () => RectangularMarkerBase;
-  protected MIN_SIZE: number;
-  private controlBox;
-  private readonly CB_DISTANCE;
-  private controlRect;
-  private controlGrips;
-  private activeGrip;
-  endManipulation(): void;
-  select(): void;
-  deselect(): void;
-  protected setup(): void;
-  protected resize(x: number, y: number): void;
-  protected onTouch(ev: TouchEvent): void;
-  private addControlBox;
-  private adjustControlBox;
-  private addControlGrips;
-  private createGrip;
-  private positionGrips;
-  private positionGrip;
-  private gripMouseDown;
-  private gripMouseUp;
-  private gripMouseMove;
-}

dist/types/markers/cover/CoverMarker.d.ts

@@ -1,5 +0,0 @@
-import { RectMarkerBase } from '../rect/RectMarkerBase';
-export declare class CoverMarker extends RectMarkerBase {
-  static createMarker: () => RectMarkerBase;
-  protected setup(): void;
-}

dist/types/markers/cover/CoverMarkerToolbarItem.d.ts

@@ -1,8 +0,0 @@
-import { ToolbarItem } from '../../toolbar/ToolbarItem';
-import { CoverMarker } from './CoverMarker';
-export declare class CoverMarkerToolbarItem implements ToolbarItem {
-    name: string;
-    tooltipText: string;
-    icon: string;
-    markerType: typeof CoverMarker;
-}

dist/types/markers/highlight/HighlightMarker.d.ts

@@ -1,5 +0,0 @@
-import { RectMarkerBase } from '../rect/RectMarkerBase';
-export declare class HighlightMarker extends RectMarkerBase {
-  static createMarker: () => RectMarkerBase;
-  protected setup(): void;
-}

dist/types/markers/highlight/HighlightMarkerToolbarItem.d.ts

@@ -1,8 +0,0 @@
-import { ToolbarItem } from '../../toolbar/ToolbarItem';
-import { HighlightMarker } from './HighlightMarker';
-export declare class HighlightMarkerToolbarItem implements ToolbarItem {
-    name: string;
-    tooltipText: string;
-    icon: string;
-    markerType: typeof HighlightMarker;
-}

dist/types/markers/line/LineMarker.d.ts

@@ -1,5 +0,0 @@
-import { LineMarkerBase } from './LineMarkerBase';
-export declare class LineMarker extends LineMarkerBase {
-  static createMarker: () => LineMarkerBase;
-  protected setup(): void;
-}

dist/types/markers/line/LineMarkerBase.d.ts

@@ -1,30 +0,0 @@
-import { MarkerBase } from '../base/MarkerBase';
-export declare class LineMarkerBase extends MarkerBase {
-  static createMarker: () => LineMarkerBase;
-  protected markerLine: SVGLineElement;
-  private readonly MIN_LENGTH;
-  private markerBgLine;
-  private controlBox;
-  private controlGrip1;
-  private controlGrip2;
-  private activeGrip;
-  private x1;
-  private y1;
-  private x2;
-  private y2;
-  endManipulation(): void;
-  select(): void;
-  deselect(): void;
-  protected setup(): void;
-  protected resize(x: number, y: number): void;
-  private getLineLength;
-  private addControlBox;
-  private adjustControlBox;
-  private addControlGrips;
-  private createGrip;
-  private positionGrips;
-  private positionGrip;
-  private gripMouseDown;
-  private gripMouseUp;
-  private gripMouseMove;
-}

dist/types/markers/line/LineMarkerToolbarItem.d.ts

@@ -1,8 +0,0 @@
-import { ToolbarItem } from '../../toolbar/ToolbarItem';
-import { LineMarker } from './LineMarker';
-export declare class LineMarkerToolbarItem implements ToolbarItem {
-    name: string;
-    tooltipText: string;
-    icon: string;
-    markerType: typeof LineMarker;
-}

dist/types/markers/rect/RectMarker.d.ts

@@ -1,5 +0,0 @@
-import { RectMarkerBase } from './RectMarkerBase';
-export declare class RectMarker extends RectMarkerBase {
-  static createMarker: () => RectMarkerBase;
-  protected setup(): void;
-}

dist/types/markers/rect/RectMarkerBase.d.ts

@@ -1,7 +0,0 @@
-import { RectangularMarkerBase } from '../base/RectangularMarkerBase';
-export declare class RectMarkerBase extends RectangularMarkerBase {
-  static createMarker: () => RectMarkerBase;
-  private markerRect;
-  protected setup(): void;
-  protected resize(x: number, y: number): void;
-}

dist/types/markers/rect/RectMarkerToolbarItem.d.ts

@@ -1,8 +0,0 @@
-import { ToolbarItem } from "../../toolbar/ToolbarItem";
-import { RectMarker } from "./RectMarker";
-export declare class RectMarkerToolbarItem implements ToolbarItem {
-    name: string;
-    tooltipText: string;
-    icon: string;
-    markerType: typeof RectMarker;
-}

dist/types/markers/text/TextMarker.d.ts

@@ -1,21 +0,0 @@
-import { RectangularMarkerBase } from '../base/RectangularMarkerBase';
-export declare class TextMarker extends RectangularMarkerBase {
-  static createMarker: () => TextMarker;
-  protected readonly MIN_SIZE = 50;
-  private readonly DEFAULT_TEXT;
-  private text;
-  private textElement;
-  private inDoubleTap;
-  private editor;
-  private editorTextArea;
-  protected setup(): void;
-  protected resize(x: number, y: number): void;
-  private renderText;
-  private sizeText;
-  private onDblClick;
-  private onTap;
-  private showEditor;
-  private onEditorOkClick;
-  private closeEditor;
-  private onEditorKeyDown;
-}

dist/types/markers/text/TextMarkerToolbarItem.d.ts

@@ -1,8 +0,0 @@
-import { ToolbarItem } from "../../toolbar/ToolbarItem";
-import { TextMarker } from "./TextMarker";
-export declare class TextMarkerToolbarItem implements ToolbarItem {
-    name: string;
-    tooltipText: string;
-    icon: string;
-    markerType: typeof TextMarker;
-}

dist/types/markers/types.d.ts

@@ -0,0 +1,3 @@
+import { BaseMarker } from './BaseMarker/index';
+export declare type MarkerType = 'base' | 'arrow' | 'cover' | 'line' | 'rect' | 'text' | 'highlight';
+export declare function getMarkerByType(type: MarkerType): typeof BaseMarker;

dist/types/render/Activator.d.ts

@@ -1,4 +0,0 @@
-export declare class Activator {
-    static key: string;
-    static readonly isLicensed: boolean;
-}

dist/types/render/MarkerArea.d.ts

@@ -1,55 +0,0 @@
-import { MarkerBase } from '../markers/base/MarkerBase';
-export declare class MarkerArea {
-  private target;
-  private markerImage;
-  private markerImageHolder;
-  private defs;
-  private targetRect;
-  private width;
-  private height;
-  private markers;
-  private activeMarker;
-  private toolbar;
-  private toolbarUI;
-  private logoUI;
-  private completeCallback;
-  private cancelCallback;
-  private toolbars;
-  private scale;
-  constructor(target: HTMLImageElement);
-  show: (
-    completeCallback: (dataUrl: string) => void,
-    cancelCallback?: (() => void) | undefined
-  ) => void;
-  open: () => void;
-  render: (
-    completeCallback: (dataUrl: string) => void,
-    cancelCallback?: (() => void) | undefined
-  ) => void;
-  close: () => void;
-  addMarker: (markerType: typeof MarkerBase) => void;
-  deleteActiveMarker: () => void;
-  private setTargetRect;
-  private startRender;
-  private attachEvents;
-  private mouseDown;
-  private mouseMove;
-  private mouseUp;
-  private initMarkerCanvas;
-  private adjustUI;
-  private adjustSize;
-  private positionUI;
-  private positionMarkerImage;
-  private positionToolbar;
-  private showUI;
-  private setStyles;
-  private toolbarClick;
-  private selectMarker;
-  private deleteMarker;
-  private complete;
-  private cancel;
-  private renderFinished;
-  private renderFinishedClose;
-  private positionLogo;
-  private adLogo;
-}

dist/types/render/Renderer.d.ts

@@ -1,3 +0,0 @@
-export declare class Renderer {
-    rasterize(target: HTMLImageElement, markerImage: SVGSVGElement, done: (dataUrl: string) => void): void;
-}

dist/types/renderer/Synthetizer/index.d.ts

@@ -0,0 +1,3 @@
+export declare class Synthetizer {
+    rasterize(target: HTMLImageElement | HTMLDivElement, markerImage: SVGSVGElement, done: (dataUrl: string) => void): void;
+}

dist/types/toolbar/Toolbar.d.ts

@@ -1,8 +1,11 @@
 import { ToolbarItem } from './ToolbarItem';
 export declare class Toolbar {
+    id: string;
     private toolbarItems;
     private toolbarUI;
     private clickHandler;
     constructor(toolbarItems: ToolbarItem[], clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void);
     getUI: () => HTMLElement;
+    hide(): void;
+    show(): void;
 }

dist/types/toolbar/ToolbarItem.d.ts

@@ -1,7 +1,13 @@
-import { MarkerBase } from '../markers/base/MarkerBase';
-export interface ToolbarItem {
-  name: string;
-  tooltipText: string;
-  icon?: string;
-  markerType?: typeof MarkerBase;
+import { BaseMarker } from './../markers/BaseMarker/index';
+export declare class ToolbarItem {
+    name: string;
+    tooltipText: string;
+    icon?: string;
+    markerType?: typeof BaseMarker;
+    constructor({ name, tooltipText, icon, markerType }: {
+        name: string;
+        tooltipText: string;
+        icon?: string;
+        markerType?: typeof BaseMarker;
+    });
 }

dist/types/toolbar/toolbar-items.d.ts

@@ -0,0 +1,13 @@
+import { WhitePage } from './../board/WhitePage/index';
+import { ToolbarItem } from './ToolbarItem';
+export declare const highlightMarkerToolbarItem: ToolbarItem;
+export declare const arrowMarkerToolbarItem: ToolbarItem;
+export declare const textMarkerToolbarItem: ToolbarItem;
+export declare const coverMarkerToolbarItem: ToolbarItem;
+export declare const rectMarkerToolbarItem: ToolbarItem;
+export declare const lineMarkerToolbarItem: ToolbarItem;
+export declare function getToolbars(page?: WhitePage): (ToolbarItem | {
+    icon: any;
+    name: string;
+    tooltipText: string;
+})[];

dist/types/utils/dom.d.ts

@@ -0,0 +1,2 @@
+export declare function createDivWithClassName(className?: string, parent?: HTMLElement): HTMLDivElement;
+export declare function addClassName(ele: HTMLElement, className: string): void;

dist/types/utils/uuid.d.ts

@@ -0,0 +1 @@
+export declare const uuid: import("uuid/interfaces").v1;

dist/types/utils/validator.d.ts

@@ -0,0 +1 @@
+export declare function isHTMLImageElement(ele: any): boolean;

scripts/base/webpack.config.prod.js

@@ -25,13 +25,13 @@ const config = {
       ),
       {
         test: /\.css$/,
-        use: ['style - loader', 'css-loader', 'postcss-loader']
+        use: ['style-loader', 'css-loader', 'postcss-loader']
       },
       {
         test: /\.less$/,
         exclude: /node_modules/,
         use: [
-          'style - loader',
+          'style-loader',
           baseConfig.extra.moduleCSSLoader,
           'postcss-loader',
           baseConfig.extra.lessLoader

tsconfig.json

@@ -21,9 +21,7 @@
     "noUnusedLocals": true,
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
-    "paths": {
-      "lego-form-core": ["lego-form-core/src/"]
-    }
+    "paths": {}
   },
   "include": ["**/*.js", "**/*.ts", "**/*.tsx"],
   "exclude": [