chore:update

dist/cjs/board/Whiteboard/index.js

-"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.isSyncing = 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();
-    }
-    Object.defineProperty(Whiteboard.prototype, "activePage", {
-        get: function () {
-            return this.pages[this.visiblePageIndex];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    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.show = function () {
-        if (this.activePage) {
-            this.activePage.show();
-        }
-    };
-    Whiteboard.prototype.hide = function () {
-        if (this.activePage) {
-            this.activePage.hide();
-        }
-    };
-    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.visibility = 'hidden';
-            _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.isSyncing) {
-            this.id = id;
-            this.sources = sources;
-            this.isSyncing = true;
-            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.visibility = 'hidden';
-                _this.pages.push(page);
-                page.open();
-            });
-            this.initSiema();
-        }
-        this.isInitialized = true;
-        this.isSyncing = false;
-        this.onPageChange(visiblePageIndex);
-    };
-    return Whiteboard;
-}());
-exports.Whiteboard = Whiteboard;

dist/cjs/board/Baseboard/index.js → dist/cjs/drawboard/Baseboard/index.js

     function Baseboard(source) {
         var _this = this;
         this.id = uuid_1.uuid();
-        this.initBoard = function () {
+        this.isFullscreen = false;
+        this.initBoard = function (mountContainer) {
             _this.boardHolder = document.createElement('div');
             _this.boardHolder.id = "fcw-board-holder-" + _this.id;
+            _this.boardHolder.className = "fcw-board-holder";
+            _this.boardHolder.style.zIndex = '999';
             _this.boardHolder.style.setProperty('touch-action', 'none');
             _this.boardHolder.style.setProperty('-ms-touch-action', 'none');
-            document.body.appendChild(_this.boardHolder);
+            mountContainer.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.position = 'fixed';
             _this.boardHolder.style.width = _this.width + "px";
             _this.boardHolder.style.height = _this.height + "px";
             _this.boardHolder.style.transformOrigin = 'top left';

dist/cjs/board/Drawboard/index.js → dist/cjs/drawboard/Drawboard/index.js

     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+var fc_hotkeys_1 = require("fc-hotkeys");
+var debounce = require("lodash.debounce");
 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 layout_1 = require("../../utils/layout");
+var index_2 = require("../../markers/RectMarker/index");
+var index_3 = require("../../markers/HighlightMarker/index");
+var index_4 = require("../../markers/CoverMarker/index");
+var index_5 = require("../../markers/LineMarker/index");
+var index_6 = require("../../markers/ArrowMarker/index");
+var index_7 = require("../../markers/TextMarker/index");
 var Drawboard = (function (_super) {
     __extends(Drawboard, _super);
     function Drawboard(source, _a) {
-        var _b = _a === void 0 ? {} : _a, page = _b.page, onChange = _b.onChange;
+        var _b = _a === void 0 ? {} : _a, _c = _b.allowKeyboard, allowKeyboard = _c === void 0 ? true : _c, extraToolbarItems = _b.extraToolbarItems, mountContainer = _b.mountContainer, page = _b.page, zIndex = _b.zIndex, onChange = _b.onChange;
         var _this = _super.call(this, source) || this;
+        _this.mountContainer = document.body;
         _this.scale = 1.0;
+        _this.zIndex = 999;
+        _this.allowKeyboard = true;
         _this.onComplete = function () { };
         _this.onChange = function () { };
         _this.open = function (onComplete, onCancel) {
                 _this.onCancel = onCancel;
             }
             _this.setTargetRect();
-            _this.initBoard();
+            _this.initBoard(_this.mountContainer);
             _this.attachEvents();
             _this.setStyles();
             window.addEventListener('resize', _this.adjustUI);
-            if (_this.page.mode === 'master') {
+            if ((_this.page && _this.page.mode === 'master') || !_this.page) {
                 _this.showUI();
             }
         };
                 _this.target.style.display = 'block';
             }
             _this.boardHolder.style.visibility = 'visible';
-            _this.boardHolder.style.zIndex = '9999';
+            _this.boardHolder.style.zIndex = "" + _this.zIndex;
             if (_this.toolbar) {
                 _this.toolbar.show();
             }
         };
-        _this.close = function () {
+        _this.destroy = function () {
             if (_this.toolbarUI) {
-                document.body.removeChild(_this.toolbarUI);
+                _this.mountContainer.removeChild(_this.toolbarUI);
             }
             if (_this.boardCanvas) {
-                document.body.removeChild(_this.boardHolder);
+                _this.mountContainer.removeChild(_this.boardHolder);
+            }
+            if (_this.listener) {
+                _this.listener.reset();
             }
         };
         _this.render = function (onComplete, onCancel) {
             _this.startRender(_this.renderFinished);
         };
         _this.addMarker = function (markerType, _a) {
-            var id = (_a === void 0 ? {} : _a).id;
+            var _b = _a === void 0 ? {} : _a, id = _b.id, originX = _b.originX, originY = _b.originY;
             var marker = markerType.createMarker(_this.page);
             if (id) {
                 marker.id = id;
             }
+            marker.drawboard = _this;
             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];
+                for (var _i = 0, _c = marker.defs; _i < _c.length; _i++) {
+                    var d = _c[_i];
                     if (d.id && !_this.boardCanvas.getElementById(d.id)) {
                         _this.defs.appendChild(d);
                     }
                 }
             }
+            _this.markers.push(marker);
+            _this.selectMarker(marker);
+            _this.boardCanvas.appendChild(marker.visual);
+            var x;
+            var y;
+            if (originX && originY) {
+                x = originX;
+                y = originY;
+            }
+            else {
+                var bbox = marker.visual.getBBox();
+                x = _this.width / 2 / _this.scale - bbox.width / 2;
+                y = _this.height / 2 / _this.scale - bbox.height / 2;
+            }
             _this.onChange({
                 target: 'marker',
                 parentId: _this.page ? _this.page.id : _this.id,
-                event: 'add',
-                data: { type: marker.type, id: marker.id }
+                event: 'addMarker',
+                marker: { type: marker.type, id: marker.id, dx: x, dy: y }
             });
-            _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);
+            marker.moveTo(x, y);
+            return marker;
         };
         _this.deleteActiveMarker = function () {
-            if (_this.activeMarker) {
+            _this.deleteMarkerWithEvent(_this.activeMarker);
+        };
+        _this.clearMarkers = function () {
+            _this.markers.slice().forEach(function (marker) {
+                _this.deleteMarkerWithEvent(marker);
+            });
+        };
+        _this.deleteMarkerWithEvent = function (marker) {
+            if (marker) {
                 if (_this.onChange) {
                     _this.onChange({
-                        event: 'remove',
-                        id: _this.activeMarker.id,
+                        event: 'removeMarker',
+                        id: marker.id,
                         target: 'marker',
-                        data: { id: _this.activeMarker.id }
+                        marker: { id: marker.id }
                     });
                 }
-                _this.deleteMarker(_this.activeMarker);
+                _this.deleteMarker(marker);
             }
         };
         _this.setTargetRect = function () {
                 _this.activeMarker.endManipulation();
             }
         };
+        _this.onKeyboard = function (e, _a) {
+            var hotkey = _a.hotkey;
+            switch (hotkey) {
+                case 'Shift+R':
+                    _this.addMarker(index_2.RectMarker);
+                    return;
+                case 'Shift+H':
+                    _this.addMarker(index_3.HighlightMarker);
+                    return;
+                case 'Shift+C':
+                    _this.addMarker(index_4.CoverMarker);
+                    return;
+                case 'Shift+L':
+                    _this.addMarker(index_5.LineMarker);
+                    return;
+                case 'Shift+A':
+                    _this.addMarker(index_6.ArrowMarker);
+                    return;
+                case 'Shift+T':
+                    _this.addMarker(index_7.TextMarker);
+                    return;
+                case 'ESC':
+                    _this.page.whiteboard.rollbackSnap();
+                    return;
+                default:
+                    break;
+            }
+            if (!_this.activeMarker) {
+                return;
+            }
+            switch (hotkey) {
+                case 'UP':
+                    _this.activeMarker.move(0, -10);
+                    return;
+                case 'LEFT':
+                    _this.activeMarker.move(-10, 0);
+                    return;
+                case 'RIGHT':
+                    _this.activeMarker.move(10, 0);
+                    return;
+                case 'DOWN':
+                    _this.activeMarker.move(0, 10);
+                    return;
+                case 'BACKSPACE':
+                    _this.deleteActiveMarker();
+                    return;
+                default:
+                    return;
+            }
+        };
         _this.adjustUI = function (ev) {
             _this.adjustSize();
             _this.positionUI();
             _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";
+            if (_this.toolbarUI && _this.targetRect) {
+                _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.toolbar = new Toolbar_1.Toolbar(_this.toolbarItems, _this.toolbarClick);
+            _this.toolbar.zIndex = _this.zIndex + 1;
+            _this.toolbarUI = _this.toolbar.getUI(_this);
+            _this.boardHolder.appendChild(_this.toolbarUI);
             _this.toolbarUI.style.position = 'absolute';
             _this.positionToolbar();
+            _this.toolbar.show();
+            _this.toolbar.toolbarButtons.forEach(function (button) {
+                if (button.toolbarItem.draggable) {
+                    button.container.draggable = true;
+                    button.container.ondragstart = function (ev) {
+                        if (ev) {
+                            ev.dataTransfer.setData('id', button.id);
+                        }
+                    };
+                }
+            });
+            _this.boardCanvas.ondragover = function (ev) {
+                ev.preventDefault();
+            };
+            _this.boardCanvas.ondrop = function (ev) {
+                var markerX = ev.x;
+                var markerY = ev.y;
+                var rect = _this.boardHolder.getBoundingClientRect();
+                if (layout_1.rectContains(rect, { x: markerX, y: markerY })) {
+                    var buttonId = ev.dataTransfer.getData('id');
+                    var button = _this.toolbar.toolbarButtonMap[buttonId];
+                    if (button.toolbarItem && button.toolbarItem.markerType) {
+                        _this.addMarker(button.toolbarItem.markerType, {
+                            originX: markerX - rect.left,
+                            originY: markerY - rect.top
+                        });
+                    }
+                }
+            };
         };
         _this.setStyles = function () {
             var editorStyleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
             _this.boardCanvas.appendChild(editorStyleSheet);
         };
         _this.toolbarClick = function (ev, toolbarItem) {
-            if (toolbarItem.markerType) {
+            if (toolbarItem.onClick) {
+                toolbarItem.onClick();
+            }
+            else if (toolbarItem.markerType) {
                 _this.addMarker(toolbarItem.markerType);
             }
             else {
             _this.startRender(_this.renderFinishedClose);
         };
         _this.cancel = function () {
-            _this.close();
+            _this.destroy();
             if (_this.onCancel) {
                 _this.onCancel();
             }
             _this.onComplete(dataUrl);
         };
         _this.renderFinishedClose = function (dataUrl) {
-            _this.close();
+            _this.destroy();
             _this.onComplete(dataUrl);
         };
         if (page) {
             _this.page = page;
         }
+        if (zIndex) {
+            _this.zIndex = zIndex;
+        }
+        _this.allowKeyboard = allowKeyboard;
         _this.markers = [];
         _this.activeMarker = null;
-        _this.toolbars = toolbar_items_1.getToolbars(page);
+        var toolbarItems = toolbar_items_1.getToolbars(page);
+        if (extraToolbarItems) {
+            toolbarItems.push.apply(toolbarItems, extraToolbarItems);
+        }
+        _this.toolbarItems = toolbarItems;
         if (onChange) {
             _this.onChange = onChange;
         }
+        if (allowKeyboard && _this.page && _this.page.mode === 'master') {
+            _this.listener = new fc_hotkeys_1.HotkeysListener();
+            _this.listener.on(fc_hotkeys_1.KEY_ALL, debounce(_this.onKeyboard, 150));
+        }
+        if (mountContainer) {
+            _this.mountContainer = mountContainer;
+        }
         return _this;
     }
     Object.defineProperty(Drawboard.prototype, "markerMap", {

dist/cjs/event/marker-events.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/cjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var Drawboard_1 = require("./board/Drawboard");
+var Drawboard_1 = require("./drawboard/Drawboard");
 exports.Drawboard = Drawboard_1.Drawboard;
-var Whiteboard_1 = require("./board/Whiteboard");
+var toolbar_items_1 = require("./toolbar/toolbar-items");
+exports.separatorToolbarItem = toolbar_items_1.separatorToolbarItem;
+exports.closeToolbarItem = toolbar_items_1.closeToolbarItem;
+var EventHub_1 = require("./event/EventHub");
+exports.EventHub = EventHub_1.EventHub;
+var Whiteboard_1 = require("./whiteboard/Whiteboard");
 exports.Whiteboard = Whiteboard_1.Whiteboard;
+var MirrorWhiteboard_1 = require("./whiteboard/MirrorWhiteboard");
+exports.MirrorWhiteboard = MirrorWhiteboard_1.MirrorWhiteboard;
+var ReplayWhiteboard_1 = require("./whiteboard/ReplayWhiteboard");
+exports.ReplayWhiteboard = ReplayWhiteboard_1.ReplayWhiteboard;

dist/cjs/markers/ArrowMarker/index.js

         _this.ARROW_SIZE = 6;
         return _this;
     }
-    ArrowMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    ArrowMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'arrow-marker']]);
         var tip = SvgHelper_1.SvgHelper.createPolygon("0,0 " + this.ARROW_SIZE + "," + this.ARROW_SIZE / 2 + " 0," + this.ARROW_SIZE, [['class', 'arrow-marker-tip']]);
         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));
     ArrowMarker.createMarker = function (page) {
         var marker = new ArrowMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return ArrowMarker;

dist/cjs/markers/BaseMarker/index.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var uuid = require("uuid/v1");
 var SvgHelper_1 = require("../../renderer/SvgHelper");
-var BaseMarker = (function () {
+var index_1 = require("../../renderer/DomEventAware/index");
+var types_1 = require("../../utils/types");
+var BaseMarker = (function (_super) {
+    __extends(BaseMarker, _super);
     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.manipulate = function (ev) {
+        var _this = _super !== null && _super.apply(this, arguments) || 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.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, function (pos) {
-                    _this.onChange({ target: 'marker', id: _this.id, event: 'resize', data: { dx: dx, dy: dy, pos: pos } });
+                    _this.onChange({
+                        target: 'marker',
+                        id: _this.id,
+                        event: 'resizeMarker',
+                        marker: { dx: dx, dy: dy, pos: pos }
+                    });
                 });
             }
             _this.previousMouseX = ev.screenX;
             _this.previousMouseY = ev.screenY;
         };
-        this.addToVisual = function (el) {
+        _this.move = function (dx, dy) {
+            var translate = _this.visual.transform.baseVal.getItem(0);
+            translate.setMatrix(translate.matrix.translate(dx, dy));
+            _this.visual.transform.baseVal.replaceItem(translate, 0);
+            _this.x += dx;
+            _this.y += dy;
+            _this.onChange({ target: 'marker', id: _this.id, event: 'moveMarker', marker: { dx: dx, dy: dy } });
+        };
+        _this.moveTo = function (x, y) {
+            var translate = _this.visual.transform.baseVal.getItem(0);
+            translate.setMatrix(translate.matrix.translate(x - _this.x, y - _this.y));
+            _this.visual.transform.baseVal.replaceItem(translate, 0);
+            _this.x = x;
+            _this.y = y;
+        };
+        _this.addToVisual = function (el) {
             _this.visual.appendChild(el);
         };
-        this.addToRenderVisual = function (el) {
+        _this.addToRenderVisual = function (el) {
             _this.renderVisual.appendChild(el);
         };
-        this.mouseDown = function (ev) {
+        _this.onMouseDown = function (ev) {
             ev.stopPropagation();
             if (_this.page && _this.page.mode === 'mirror') {
                 return;
             _this.previousMouseX = ev.screenX;
             _this.previousMouseY = ev.screenY;
         };
-        this.mouseUp = function (ev) {
+        _this.onMouseUp = function (ev) {
             ev.stopPropagation();
             _this.endManipulation();
         };
-        this.mouseMove = function (ev) {
+        _this.onMouseMove = function (ev) {
             ev.stopPropagation();
             _this.manipulate(ev);
         };
-        this.move = function (dx, dy) {
-            var translate = _this.visual.transform.baseVal.getItem(0);
-            translate.setMatrix(translate.matrix.translate(dx, dy));
-            _this.visual.transform.baseVal.replaceItem(translate, 0);
-        };
+        return _this;
     }
     BaseMarker.prototype.reactToManipulation = function (type, _a) {
-        var dx = _a.dx, dy = _a.dy, pos = _a.pos;
-        if (type === 'move') {
+        var _b = _a === void 0 ? {} : _a, dx = _b.dx, dy = _b.dy, pos = _b.pos;
+        if (type === 'moveMarker') {
+            if (types_1.isNil(dx) || types_1.isNil(dy)) {
+                return;
+            }
             this.move(dx, dy);
         }
-        if (type === 'resize') {
+        if (type === 'resizeMarker') {
+            if (types_1.isNil(dx) || types_1.isNil(dy)) {
+                return;
+            }
             this.resizeByEvent(dx, dy, pos);
         }
     };
         this.endManipulation();
         return;
     };
-    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);
-        this.visual.addEventListener('mouseup', this.mouseUp);
-        this.visual.addEventListener('mousemove', this.mouseMove);
-        this.visual.addEventListener('touchstart', this.onTouch, { passive: false });
-        this.visual.addEventListener('touchend', this.onTouch, { passive: false });
-        this.visual.addEventListener('touchmove', this.onTouch, { passive: false });
-        this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]);
-        this.visual.appendChild(this.renderVisual);
+    BaseMarker.prototype.captureSnap = function () {
+        return {
+            id: this.id,
+            type: this.type,
+            isActive: this.isActive,
+            x: this.x,
+            y: this.y
+        };
+    };
+    BaseMarker.prototype.applySnap = function (snap) {
+        this.id = snap.id;
+        this.type = snap.type;
+        if (snap.x && snap.y) {
+            this.moveTo(snap.x, snap.y);
+        }
+        if (this.isActive) {
+            this.select();
+        }
+    };
+    BaseMarker.prototype.destroy = function () {
+        this.visual.style.display = 'none';
     };
     BaseMarker.prototype.resize = function (x, y, cb) {
         return;
     BaseMarker.prototype.resizeByEvent = function (x, y, pos) {
         return;
     };
-    BaseMarker.prototype.onTouch = function (ev) {
-        ev.preventDefault();
-        var newEvt = document.createEvent('MouseEvents');
-        var touch = ev.changedTouches[0];
-        var type = null;
-        switch (ev.type) {
-            case 'touchstart':
-                type = 'mousedown';
-                break;
-            case 'touchmove':
-                type = 'mousemove';
-                break;
-            case 'touchend':
-                type = 'mouseup';
-                break;
-            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);
+    BaseMarker.prototype.init = function () {
+        this.visual = SvgHelper_1.SvgHelper.createGroup();
+        this.visual.transform.baseVal.appendItem(SvgHelper_1.SvgHelper.createTransform());
+        _super.prototype.init.call(this, this.visual);
+        this.renderVisual = SvgHelper_1.SvgHelper.createGroup([['class', 'render-visual']]);
+        this.visual.appendChild(this.renderVisual);
     };
     BaseMarker.createMarker = function (page) {
         var marker = new BaseMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return BaseMarker;
-}());
+}(index_1.DomEventAware));
 exports.BaseMarker = BaseMarker;

dist/cjs/markers/CoverMarker/index.js

         _this.type = 'cover';
         return _this;
     }
-    CoverMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    CoverMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'cover-marker']]);
     };
     CoverMarker.createMarker = function (page) {
         var marker = new CoverMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return CoverMarker;

dist/cjs/markers/HighlightMarker/index.js

         _this.type = 'highlight';
         return _this;
     }
-    HighlightMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    HighlightMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'highlight-marker']]);
     };
     HighlightMarker.createMarker = function (page) {
         var marker = new HighlightMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return HighlightMarker;

dist/cjs/markers/LineMarker/index.js

         _this.type = 'line';
         return _this;
     }
-    LineMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    LineMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         index_1.SvgHelper.setAttributes(this.visual, [['class', 'line-marker']]);
     };
     LineMarker.createMarker = function (page) {
         var marker = new LineMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return LineMarker;

dist/cjs/markers/LinearMarker/index.js

             grip.visual.addEventListener('touchstart', _this.onTouch, { passive: false });
             grip.visual.addEventListener('touchend', _this.onTouch, { passive: false });
             grip.visual.addEventListener('touchmove', _this.onTouch, { passive: false });
+            if (_this.page && _this.page.mode === 'mirror') {
+                grip.visual.style.visibility = 'hidden';
+            }
             return grip;
         };
-        _this.positionGrips = function () {
-            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.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);
-            translate.setTranslate(x, y);
-            grip.transform.baseVal.replaceItem(translate, 0);
-        };
         _this.gripMouseDown = function (ev) {
             _this.isResizing = true;
             _this.activeGrip =
                 _this.resize(ev.movementX, ev.movementY);
             }
         };
+        _this.positionLine = function (bound) {
+            _this.x1 = bound.x1;
+            _this.y1 = bound.y1;
+            _this.x2 = bound.x2;
+            _this.y2 = bound.y2;
+            _this.markerBgLine.setAttribute('x1', _this.x1.toString());
+            _this.markerBgLine.setAttribute('y1', _this.y1.toString());
+            _this.markerLine.setAttribute('x2', _this.x2.toString());
+            _this.markerLine.setAttribute('y2', _this.y2.toString());
+        };
+        _this.positionGrips = function () {
+            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.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);
+            translate.setTranslate(x, y);
+            grip.transform.baseVal.replaceItem(translate, 0);
+        };
         return _this;
     }
+    LinearMarker.prototype.captureSnap = function () {
+        var baseSnap = _super.prototype.captureSnap.call(this);
+        baseSnap.linearSnap = {
+            x1: this.x1,
+            y1: this.y1,
+            x2: this.x2,
+            y2: this.y2
+        };
+        return baseSnap;
+    };
+    LinearMarker.prototype.applySnap = function (snap) {
+        _super.prototype.applySnap.call(this, snap);
+        if (snap.linearSnap) {
+            this.positionLine(snap.linearSnap);
+        }
+    };
     LinearMarker.prototype.endManipulation = function () {
         _super.prototype.endManipulation.call(this);
         this.isResizing = false;
         _super.prototype.deselect.call(this);
         this.controlBox.style.display = 'none';
     };
-    LinearMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    LinearMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         this.markerBgLine = SvgHelper_1.SvgHelper.createLine(0, 0, this.x2, 0, [
             ['stroke', 'transparent'],
             ['stroke-width', '30']
     LinearMarker.createMarker = function (page) {
         var marker = new LinearMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return LinearMarker;

dist/cjs/markers/RectMarker/RectBaseMarker.js

     function RectBaseMarker() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    RectBaseMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    RectBaseMarker.prototype.applySnap = function (snap) {
+        _super.prototype.applySnap.call(this, snap);
+        if (snap.rectSnap) {
+            this.markerRect.setAttribute('width', this.width.toString());
+            this.markerRect.setAttribute('height', this.height.toString());
+        }
+    };
+    RectBaseMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         this.markerRect = SvgHelper_1.SvgHelper.createRect(this.width, this.height);
         this.addToRenderVisual(this.markerRect);
     };
     RectBaseMarker.createMarker = function (page) {
         var marker = new RectBaseMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return RectBaseMarker;

dist/cjs/markers/RectMarker/index.js

         _this.type = 'rect';
         return _this;
     }
-    RectMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    RectMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'rect-marker']]);
     };
     RectMarker.createMarker = function (page) {
         var marker = new RectMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return RectMarker;

dist/cjs/markers/RectangularMarker/index.js

             grip.visual.addEventListener('touchmove', _this.onTouch, { passive: false });
             return grip;
         };
+        _this.gripMouseDown = function (ev) {
+            _this.isResizing = true;
+            _this.activeGrip = _this.controlGrips.findGripByVisual(ev.target) || null;
+            _this.previousMouseX = ev.screenX;
+            _this.previousMouseY = ev.screenY;
+            ev.stopPropagation();
+        };
+        _this.gripMouseUp = function (ev) {
+            _this.isResizing = false;
+            _this.activeGrip = null;
+            ev.stopPropagation();
+        };
+        _this.gripMouseMove = function (ev) {
+            if (_this.isResizing) {
+                _this.manipulate(ev);
+            }
+        };
         _this.positionGrips = function () {
             var gripSize = _this.controlGrips.topLeft.GRIP_SIZE;
             var left = -gripSize / 2;
             translate.setTranslate(x, y);
             grip.transform.baseVal.replaceItem(translate, 0);
         };
-        _this.gripMouseDown = function (ev) {
-            _this.isResizing = true;
-            _this.activeGrip = _this.controlGrips.findGripByVisual(ev.target) || null;
-            _this.previousMouseX = ev.screenX;
-            _this.previousMouseY = ev.screenY;
-            ev.stopPropagation();
-        };
-        _this.gripMouseUp = function (ev) {
-            _this.isResizing = false;
-            _this.activeGrip = null;
-            ev.stopPropagation();
-        };
-        _this.gripMouseMove = function (ev) {
-            if (_this.isResizing) {
-                _this.manipulate(ev);
-            }
-        };
         return _this;
     }
+    RectangularMarker.prototype.captureSnap = function () {
+        var snap = _super.prototype.captureSnap.call(this);
+        snap.rectSnap = {
+            width: this.width,
+            height: this.height
+        };
+        return snap;
+    };
+    RectangularMarker.prototype.applySnap = function (snap) {
+        _super.prototype.applySnap.call(this, snap);
+        if (snap.rectSnap) {
+            var _a = snap.rectSnap, width = _a.width, height = _a.height;
+            if (width && height) {
+                this.width = width;
+                this.height = height;
+                this.adjustControlBox();
+            }
+        }
+    };
     RectangularMarker.prototype.endManipulation = function () {
         _super.prototype.endManipulation.call(this);
         this.isResizing = false;
         _super.prototype.deselect.call(this);
         this.controlBox.style.display = 'none';
     };
-    RectangularMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    RectangularMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         this.addControlBox();
         if (this.page && this.page.mode === 'mirror') {
             this.controlBox.style.display = 'none';
         }
     };
-    RectangularMarker.prototype.resizeByEvent = function (x, y, pos) {
+    RectangularMarker.prototype.resizeByEvent = function (dx, dy, pos) {
         this.activeGrip = this.controlGrips[pos];
-        this.resize(x, y);
+        this.resize(dx, dy);
     };
-    RectangularMarker.prototype.resize = function (x, y, onPosition) {
+    RectangularMarker.prototype.resize = function (dx, dy, onPosition) {
         var translateX = 0;
         var translateY = 0;
         switch (this.activeGrip) {
             case this.controlGrips.topLeft:
-                this.width -= x;
-                this.height -= y;
-                translateX += x;
-                translateY += y;
+                this.width -= dx;
+                this.height -= dy;
+                translateX += dx;
+                translateY += dy;
+                this.x += dx;
+                this.y += dy;
                 if (onPosition) {
                     onPosition('topLeft');
                 }
                 break;
             case this.controlGrips.bottomLeft:
-                this.width -= x;
-                this.height += y;
-                translateX += x;
+                this.width -= dx;
+                this.height += dy;
+                translateX += dx;
+                this.x += dx;
                 if (onPosition) {
                     onPosition('bottomLeft');
                 }
                 break;
             case this.controlGrips.topRight:
-                this.width += x;
-                this.height -= y;
-                translateY += y;
+                this.width += dx;
+                this.height -= dy;
+                translateY += dy;
+                this.y += dy;
                 if (onPosition) {
                     onPosition('topRight');
                 }
                 break;
             case this.controlGrips.bottomRight:
-                this.width += x;
-                this.height += y;
+                this.width += dx;
+                this.height += dy;
                 if (onPosition) {
                     onPosition('bottomRight');
                 }
                 break;
             case this.controlGrips.centerLeft:
-                this.width -= x;
-                translateX += x;
+                this.width -= dx;
+                translateX += dx;
+                this.x += dx;
                 if (onPosition) {
                     onPosition('centerLeft');
                 }
                 break;
             case this.controlGrips.centerRight:
-                this.width += x;
+                this.width += dx;
                 if (onPosition) {
                     onPosition('centerRight');
                 }
                 break;
             case this.controlGrips.topCenter:
-                this.height -= y;
-                translateY += y;
+                this.height -= dy;
+                translateY += dy;
+                this.y += dy;
                 if (onPosition) {
                     onPosition('topCenter');
                 }
                 break;
             case this.controlGrips.bottomCenter:
-                this.height += y;
+                this.height += dy;
                 if (onPosition) {
                     onPosition('bottomCenter');
                 }
     RectangularMarker.createMarker = function (page) {
         var marker = new RectangularMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return RectangularMarker;

dist/cjs/markers/TextMarker/index.js

             else {
                 _this.text = _this.DEFAULT_TEXT;
             }
-            _this.onChange({ target: 'marker', id: _this.id, event: 'changeText', data: _this.text });
+            _this.onChange({
+                target: 'marker',
+                id: _this.id,
+                event: 'inputMarker',
+                marker: { text: _this.text }
+            });
             _this.renderText();
             _this.closeEditor();
         };
         this.text = text;
         this.renderText();
     };
-    TextMarker.prototype.setup = function () {
-        _super.prototype.setup.call(this);
+    TextMarker.prototype.captureSnap = function () {
+        var baseSnap = _super.prototype.captureSnap.call(this);
+        baseSnap.textSnap = { text: this.text };
+        return baseSnap;
+    };
+    TextMarker.prototype.applySnap = function (snap) {
+        _super.prototype.applySnap.call(this, snap);
+        if (snap.textSnap && snap.textSnap.text !== this.text) {
+            this.setText(snap.textSnap.text);
+        }
+    };
+    TextMarker.prototype.init = function () {
+        _super.prototype.init.call(this);
         this.textElement = SvgHelper_1.SvgHelper.createText();
         this.addToRenderVisual(this.textElement);
         SvgHelper_1.SvgHelper.setAttributes(this.visual, [['class', 'text-marker']]);
     TextMarker.createMarker = function (page) {
         var marker = new TextMarker();
         marker.page = page;
-        marker.setup();
+        marker.init();
         return marker;
     };
     return TextMarker;

dist/cjs/renderer/DomEventAware/index.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var DomEventAware = (function () {
+    function DomEventAware() {
+        this.x = 0;
+        this.y = 0;
+        this.previousMouseX = 0;
+        this.previousMouseY = 0;
+    }
+    DomEventAware.prototype.init = function (ele) {
+        ele.addEventListener('mousedown', this.onMouseDown);
+        ele.addEventListener('mouseup', this.onMouseUp);
+        ele.addEventListener('mousemove', this.onMouseMove);
+        ele.addEventListener('touchstart', this.onTouch, { passive: false });
+        ele.addEventListener('touchend', this.onTouch, { passive: false });
+        ele.addEventListener('touchmove', this.onTouch, { passive: false });
+    };
+    DomEventAware.prototype.onTouch = function (ev) {
+        ev.preventDefault();
+        var newEvt = document.createEvent('MouseEvents');
+        var touch = ev.changedTouches[0];
+        var type = null;
+        switch (ev.type) {
+            case 'touchstart':
+                type = 'mousedown';
+                break;
+            case 'touchmove':
+                type = 'mousemove';
+                break;
+            case 'touchend':
+                type = 'mouseup';
+                break;
+            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);
+    };
+    return DomEventAware;
+}());
+exports.DomEventAware = DomEventAware;

dist/cjs/renderer/Synthetizer/index.js

     }
     Synthetizer.prototype.rasterize = function (target, markerImage, done) {
         if (!validator_1.isHTMLImageElement(target)) {
-            throw new Error('Error: only support export HTMLImageElement');
+            throw new Error('Error: only support export to HTMLImageElement');
         }
         var canvas = document.createElement('canvas');
         canvas.width = markerImage.width.baseVal.value;

dist/cjs/toolbar/Toolbar.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
+var interactjs_1 = require("interactjs");
 var ToolbarButton_1 = require("./ToolbarButton");
 var uuid_1 = require("../utils/uuid");
-var Toolbar = (function () {
+require("./index.less");
+var index_1 = require("../renderer/DomEventAware/index");
+var toolbar_items_1 = require("./toolbar-items");
+var Toolbar = (function (_super) {
+    __extends(Toolbar, _super);
     function Toolbar(toolbarItems, clickHandler) {
-        var _this = this;
-        this.id = uuid_1.uuid();
-        this.getUI = function () {
+        var _this = _super.call(this) || this;
+        _this.id = uuid_1.uuid();
+        _this.zIndex = 999;
+        _this.toolbarButtons = [];
+        _this.getUI = function (drawboard) {
             _this.toolbarUI = document.createElement('div');
             _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);
+                toolbarButton.drawboard = drawboard;
                 _this.toolbarUI.appendChild(toolbarButton.getElement());
+                _this.toolbarButtons.push(toolbarButton);
             }
+            _super.prototype.init.call(_this, _this.toolbarUI);
+            interactjs_1.default('#drag-handler').draggable({
+                onmove: _this.onDragMove
+            });
             return _this.toolbarUI;
         };
-        this.toolbarItems = toolbarItems;
-        this.clickHandler = clickHandler;
+        _this.onMouseDown = function (downEv) { };
+        _this.onMouseUp = function (ev) { };
+        _this.onMouseMove = function (ev) { };
+        _this.onDragMove = function (event) {
+            var target = _this.toolbarUI;
+            var x = ((parseFloat(target.getAttribute('data-x')) || 0) + event.dx);
+            var y = ((parseFloat(target.getAttribute('data-y')) || 0) + event.dy);
+            target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+            target.style.zIndex = "" + _this.zIndex;
+            target.setAttribute('data-x', x);
+            target.setAttribute('data-y', y);
+        };
+        _this.toolbarItems = [toolbar_items_1.dragToolbarItem].concat(toolbarItems);
+        _this.clickHandler = clickHandler;
+        return _this;
     }
+    Object.defineProperty(Toolbar.prototype, "toolbarButtonMap", {
+        get: function () {
+            var buttonMap = {};
+            this.toolbarButtons.forEach(function (b) {
+                buttonMap[b.id] = b;
+            });
+            return buttonMap;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Toolbar.prototype.hide = function () {
         this.toolbarUI.style.visibility = 'hidden';
         this.toolbarUI.style.zIndex = '-1';
     };
     Toolbar.prototype.show = function () {
         this.toolbarUI.style.visibility = 'visible';
-        this.toolbarUI.style.zIndex = '999';
+        this.toolbarUI.style.zIndex = "" + this.zIndex;
     };
     return Toolbar;
-}());
+}(index_1.DomEventAware));
 exports.Toolbar = Toolbar;

dist/cjs/toolbar/ToolbarButton.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tippy_js_1 = require("tippy.js");
+var uuid_1 = require("../utils/uuid");
 var ToolbarButton = (function () {
     function ToolbarButton(toolbarItem, clickHandler) {
         var _this = this;
+        this.id = uuid_1.uuid();
         this.getElement = function () {
+            if (_this.toolbarItem.onRender) {
+                _this.container = _this.toolbarItem.onRender().cloneNode(true);
+                return _this.container;
+            }
             var div = document.createElement('div');
             if (_this.toolbarItem.name !== 'separator') {
                 div.className = 'fc-whiteboard-toolbar-button';
                     });
                 }
                 if (_this.toolbarItem.icon) {
-                    div.title = _this.toolbarItem.tooltipText;
+                    div.title = _this.toolbarItem.tooltipText || '';
                     div.innerHTML = _this.toolbarItem.icon;
                 }
                 else {
-                    div.innerText = _this.toolbarItem.tooltipText;
+                    div.innerText = _this.toolbarItem.tooltipText || '';
+                }
+                if (_this.toolbarItem.tooltipText) {
+                    tippy_js_1.default(div, {
+                        content: _this.toolbarItem.shortcut
+                            ? _this.toolbarItem.tooltipText + " " + _this.toolbarItem.shortcut
+                            : _this.toolbarItem.tooltipText
+                    });
                 }
             }
             else {
                 div.className = 'fc-whiteboard-toolbar-separator';
             }
+            div.id = "fc-whiteboard-toolbar-" + _this.toolbarItem.name;
+            _this.container = div;
             return div;
         };
         this.toolbarItem = toolbarItem;

dist/cjs/toolbar/ToolbarItem.js

 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;
+        var name = _a.name, tooltipText = _a.tooltipText, shortcut = _a.shortcut, icon = _a.icon, draggable = _a.draggable, markerType = _a.markerType, onRender = _a.onRender, onClick = _a.onClick;
+        if (!name) {
+            throw new Error('Invalid params');
+        }
         this.name = name;
         this.tooltipText = tooltipText;
+        this.shortcut = shortcut;
         this.icon = icon;
         this.markerType = markerType;
+        this.draggable = draggable;
+        this.onClick = onClick;
+        this.onRender = onRender;
     }
     return ToolbarItem;
 }());

dist/cjs/toolbar/toolbar-items.js

 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.dragToolbarItem = new ToolbarItem_1.ToolbarItem({
+    name: 'drag',
+    tooltipText: 'Drag',
+    icon: require('../assets/drag.svg')
+});
 exports.highlightMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
     name: 'cover-marker',
-    tooltipText: 'Cover',
+    tooltipText: 'Hightlight',
+    shortcut: 'Shift+H',
     icon: require('../assets/highlight.svg'),
-    markerType: index_5.HighlightMarker
+    markerType: index_5.HighlightMarker,
+    draggable: true
 });
 exports.arrowMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
     name: 'arrow-marker',
     tooltipText: 'Arrow',
+    shortcut: 'Shift+A',
     icon: require('../assets/arrow.svg'),
-    markerType: index_4.ArrowMarker
+    markerType: index_4.ArrowMarker,
+    draggable: true
 });
 exports.textMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
     name: 'text-marker',
     tooltipText: 'Text',
+    shortcut: 'Shift+T',
     icon: require('../assets/text.svg'),
-    markerType: index_3.TextMarker
+    markerType: index_3.TextMarker,
+    draggable: true
 });
 exports.coverMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
     name: 'cover-marker',
     tooltipText: 'Cover',
+    shortcut: 'Shift+C',
     icon: require('../assets/cover.svg'),
-    markerType: index_2.CoverMarker
+    markerType: index_2.CoverMarker,
+    draggable: true
 });
 exports.rectMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
     name: 'rect-marker',
     tooltipText: 'Rectangle',
+    shortcut: 'Shift+R',
     icon: require('../assets/rect.svg'),
-    markerType: index_1.RectMarker
+    markerType: index_1.RectMarker,
+    draggable: true
 });
 exports.lineMarkerToolbarItem = new ToolbarItem_1.ToolbarItem({
     name: 'line-marker',
     tooltipText: 'Line',
+    shortcut: 'Shift+L',
     icon: require('../assets/line.svg'),
-    markerType: LineMarker_1.LineMarker
+    markerType: LineMarker_1.LineMarker,
+    draggable: true
 });
+exports.closeToolbarItem = new ToolbarItem_1.ToolbarItem({
+    icon: CloseIcon,
+    name: 'close',
+    tooltipText: 'Close'
+});
+exports.separatorToolbarItem = new ToolbarItem_1.ToolbarItem({ name: 'separator', tooltipText: '' });
 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: ''
-        }
+        exports.textMarkerToolbarItem
     ];
     if (!page) {
         toolbars.push.apply(toolbars, [
             }
         ]);
     }
-    toolbars.push({
-        icon: CloseIcon,
-        name: 'close',
-        tooltipText: 'Close'
-    });
     return toolbars;
 }
 exports.getToolbars = getToolbars;

dist/cjs/utils/layout.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function rectContains(rect, _a) {
+    var x = _a.x, y = _a.y;
+    if (x < rect.left || x > rect.left + rect.width || y < rect.top || y > rect.top + rect.height) {
+        return false;
+    }
+    return true;
+}
+exports.rectContains = rectContains;

dist/cjs/utils/types.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function isNil(mayBeNil) {
+    return mayBeNil === null || mayBeNil === undefined;
+}
+exports.isNil = isNil;

dist/cjs/whiteboard/AbstractWhiteboard/index.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index_1 = require("../WhitePage/index");
+var uuid_1 = require("../../utils/uuid");
+var dom_1 = require("../../utils/dom");
+require("./index.less");
+var Siema = require("siema");
+var prefix = 'fcw-board';
+var AbstractWhiteboard = (function () {
+    function AbstractWhiteboard(target, _a) {
+        var _b = _a === void 0 ? {} : _a, sources = _b.sources, eventHub = _b.eventHub, visiblePageIndex = _b.visiblePageIndex, allowRollback = _b.allowRollback, onlyEmitSnap = _b.onlyEmitSnap;
+        this.id = uuid_1.uuid();
+        this.sources = [];
+        this.imgEles = [];
+        this.allowRollback = false;
+        this.onlyEmitSnap = false;
+        this.snapInterval = 15 * 1000;
+        this.mode = 'master';
+        this.isFullscreen = false;
+        this.pages = [];
+        this.snapHistory = [];
+        this.isInitialized = false;
+        this.isSyncing = 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 (typeof visiblePageIndex !== 'undefined') {
+            this.visiblePageIndex = visiblePageIndex;
+        }
+        this.onlyEmitSnap = !!onlyEmitSnap;
+        if (typeof allowRollback !== 'undefined') {
+            this.allowRollback = !!allowRollback;
+        }
+        this.init();
+    }
+    Object.defineProperty(AbstractWhiteboard.prototype, "activePage", {
+        get: function () {
+            return this.pages[this.visiblePageIndex];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AbstractWhiteboard.prototype, "pageMap", {
+        get: function () {
+            var map = {};
+            this.pages.forEach(function (p) { return (map[p.id] = p); });
+            return map;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AbstractWhiteboard.prototype.open = function () {
+        var _this = this;
+        this.pages.forEach(function (page, i) {
+            page.open();
+            if (i !== _this.visiblePageIndex) {
+                page.hide();
+            }
+        });
+    };
+    AbstractWhiteboard.prototype.close = function () {
+        if (this.emitInterval) {
+            clearInterval(this.emitInterval);
+        }
+    };
+    AbstractWhiteboard.prototype.show = function () {
+        if (this.activePage) {
+            this.activePage.show();
+        }
+    };
+    AbstractWhiteboard.prototype.hide = function () {
+        if (this.activePage) {
+            this.activePage.hide();
+        }
+    };
+    AbstractWhiteboard.prototype.emit = function (borderEvent) {
+        if (this.mode !== 'master' || !this.eventHub) {
+            return;
+        }
+        if (this.onlyEmitSnap) {
+            if (borderEvent.event !== 'borderSnap') {
+                return;
+            }
+        }
+        if (this.allowRollback &&
+            (borderEvent.event === 'addMarker' || borderEvent.event === 'removeMarker')) {
+            if (this.snapHistory.length > 20) {
+                this.snapHistory.shift();
+            }
+            this.snapHistory.push(this.captureSnap(false));
+        }
+        borderEvent.timestamp = Math.floor(Date.now() / 1000);
+        this.eventHub.emit('sync', borderEvent);
+    };
+    AbstractWhiteboard.prototype.captureSnap = function (shadow) {
+        if (shadow === void 0) { shadow = true; }
+        if (shadow) {
+            return {
+                id: this.id,
+                sources: this.sources,
+                pageIds: this.pages.map(function (page) { return page.id; }),
+                visiblePageIndex: this.visiblePageIndex
+            };
+        }
+        return {
+            id: this.id,
+            sources: this.sources,
+            pageIds: this.pages.map(function (page) { return page.id; }),
+            visiblePageIndex: this.visiblePageIndex,
+            pages: this.pages.map(function (p) { return p.captureSnap(); })
+        };
+    };
+    AbstractWhiteboard.prototype.rollbackSnap = function () {
+        if (this.snapHistory.length === 0) {
+            return;
+        }
+        this.snapHistory.pop();
+        var snap = this.snapHistory[this.snapHistory.length - 1];
+        if (snap) {
+            this.applySnap(snap);
+        }
+    };
+    AbstractWhiteboard.prototype.destroy = function () {
+        if (this.emitInterval) {
+            clearInterval(this.emitInterval);
+        }
+        if (this.eventHub) {
+            this.eventHub.removeAllListeners();
+        }
+        if (this.siema) {
+            this.siema.destroy();
+        }
+        this.imgsContainer.remove();
+        this.pagesContainer.remove();
+        this.pages.forEach(function (page) {
+            page.destroy();
+        });
+    };
+    AbstractWhiteboard.prototype.initSiema = function () {
+        var _this = this;
+        this.sources.forEach(function (source) {
+            var imgEle = document.createElement('div');
+            dom_1.addClassName(imgEle, prefix + "-img-wrapper");
+            imgEle.style.backgroundImage = "url(" + source + ")";
+            _this.imgEles.push(imgEle);
+            _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
+        });
+    };
+    AbstractWhiteboard.prototype.applySnap = function (snap) {
+        var _this = this;
+        var id = snap.id, sources = snap.sources, pageIds = snap.pageIds;
+        if (!this.isInitialized && !this.isSyncing) {
+            this.id = id;
+            this.sources = sources;
+            this.isSyncing = true;
+            this.sources.forEach(function (source, i) {
+                var page = new index_1.WhitePage({ imgSrc: source }, {
+                    mode: _this.mode,
+                    whiteboard: _this,
+                    parentContainer: _this.pagesContainer
+                });
+                page.id = pageIds[i];
+                page.container.style.visibility = 'hidden';
+                _this.pages.push(page);
+                page.open();
+            });
+            this.initSiema();
+            this.isInitialized = true;
+            this.isSyncing = false;
+        }
+        this.onPageChange(snap.visiblePageIndex);
+        (snap.pages || []).forEach(function (pageSnap) {
+            var page = _this.pageMap[pageSnap.id];
+            if (page) {
+                page.applySnap(pageSnap);
+            }
+        });
+    };
+    return AbstractWhiteboard;
+}());
+exports.AbstractWhiteboard = AbstractWhiteboard;

dist/cjs/whiteboard/AbstractWhiteboard/snap.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var WhiteboardSnap = (function () {
+    function WhiteboardSnap() {
+    }
+    return WhiteboardSnap;
+}());
+exports.WhiteboardSnap = WhiteboardSnap;
+var WhitepageSnap = (function () {
+    function WhitepageSnap() {
+    }
+    return WhitepageSnap;
+}());
+exports.WhitepageSnap = WhitepageSnap;
+var MarkerSnap = (function () {
+    function MarkerSnap() {
+    }
+    return MarkerSnap;
+}());
+exports.MarkerSnap = MarkerSnap;

dist/cjs/whiteboard/MirrorWhiteboard/index.js

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var dom_1 = require("../../utils/dom");
+var index_1 = require("../AbstractWhiteboard/index");
+var prefix = 'fcw-board';
+var MirrorWhiteboard = (function (_super) {
+    __extends(MirrorWhiteboard, _super);
+    function MirrorWhiteboard() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.mode = 'mirror';
+        return _this;
+    }
+    MirrorWhiteboard.prototype.init = function () {
+        var _this = this;
+        this.imgsContainer = dom_1.createDivWithClassName(prefix + "-imgs", this.target);
+        this.pagesContainer = dom_1.createDivWithClassName(prefix + "-pages", this.target);
+        if (!this.eventHub) {
+            throw new Error('Invalid eventHub');
+        }
+        this.eventHub.on('sync', function (ev) {
+            if (ev.target !== 'whiteboard' || !ev.border) {
+                return;
+            }
+            if (ev.event === 'borderSnap') {
+                _this.applySnap(ev.border);
+            }
+            if (ev.event === 'borderChangePage' && ev.id === _this.id) {
+                if (_this.isInitialized) {
+                    _this.onPageChange(ev.border.visiblePageIndex);
+                }
+            }
+            if (ev.event === 'finish' && ev.id === _this.id) {
+                _this.destroy();
+            }
+        });
+    };
+    MirrorWhiteboard.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+    };
+    MirrorWhiteboard.prototype.onPageChange = function (nextPageIndex) {
+        if (this.visiblePageIndex === nextPageIndex) {
+            return;
+        }
+        this.siema.goTo(nextPageIndex);
+        this.visiblePageIndex = nextPageIndex;
+        this.pages.forEach(function (page, i) {
+            if (nextPageIndex === i) {
+                page.show();
+            }
+            else {
+                page.hide();
+            }
+        });
+        this.emit({
+            event: 'borderChangePage',
+            id: this.id,
+            target: 'whiteboard',
+            border: this.captureSnap()
+        });
+    };
+    return MirrorWhiteboard;
+}(index_1.AbstractWhiteboard));
+exports.MirrorWhiteboard = MirrorWhiteboard;

dist/cjs/whiteboard/ReplayWhiteboard/index.js

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var MirrorWhiteboard_1 = require("../MirrorWhiteboard");
+var EventHub_1 = require("../../event/EventHub");
+var windowSize = 60 * 1000;
+var duration = 0.05;
+var ReplayWhiteboard = (function (_super) {
+    __extends(ReplayWhiteboard, _super);
+    function ReplayWhiteboard() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.leftEvents = [];
+        _this.currentRelativeTime = 0;
+        _this.loadedRelativeTime = -1;
+        _this.loadingLock = false;
+        _this.seekingLock = false;
+        _this.seek = function () {
+            if (_this.seekingLock) {
+                return;
+            }
+            _this.seekingLock = true;
+            if (_this.loadedRelativeTime < _this.currentRelativeTime) {
+                _this.loadEvents();
+            }
+            var waitingEvents = [];
+            var leftEvents = [];
+            _this.leftEvents.forEach(function (e, i) {
+                if (e.timestamp && e.timestamp < _this.currentRelativeTime + _this.recordStartTime) {
+                    waitingEvents.push(e);
+                }
+                else {
+                    leftEvents.push(e);
+                }
+            });
+            _this.leftEvents = leftEvents;
+            waitingEvents.forEach(function (e) {
+                _this.perform(e);
+            });
+            _this.currentRelativeTime += duration;
+            _this.seekingLock = false;
+        };
+        _this.perform = function (e) {
+            _this.eventHub.emit('sync', e);
+        };
+        return _this;
+    }
+    ReplayWhiteboard.prototype.setContext = function (recordStartTime, onLoad) {
+        var _this = this;
+        this.recordStartTime = recordStartTime;
+        this.onLoad = onLoad;
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+        this.interval = setInterval(function () {
+            _this.seek();
+        }, duration * 1000);
+    };
+    ReplayWhiteboard.prototype.setCurrentRelativeTime = function (time) {
+        this.currentRelativeTime = time;
+        this.loadedRelativeTime = this.currentRelativeTime - 1;
+    };
+    ReplayWhiteboard.prototype.close = function () {
+        _super.prototype.close.call(this);
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    };
+    ReplayWhiteboard.prototype.init = function () {
+        this.eventHub = new EventHub_1.EventHub();
+        _super.prototype.init.call(this);
+    };
+    ReplayWhiteboard.prototype.loadEvents = function () {
+        var _this = this;
+        if (this.onLoad && !this.loadingLock) {
+            this.loadingLock = true;
+            var startTime = this.recordStartTime + this.currentRelativeTime;
+            var endTime = startTime + windowSize;
+            this.onLoad(startTime, endTime)
+                .then(function (events) {
+                var _a;
+                _this.loadedRelativeTime = _this.currentRelativeTime;
+                (_a = _this.leftEvents).push.apply(_a, (events || []));
+            })
+                .finally(function () {
+                _this.loadingLock = false;
+            });
+        }
+    };
+    return ReplayWhiteboard;
+}(MirrorWhiteboard_1.MirrorWhiteboard));
+exports.ReplayWhiteboard = ReplayWhiteboard;

dist/cjs/board/WhitePage/index.js → dist/cjs/whiteboard/WhitePage/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var index_1 = require("./../Drawboard/index");
-var uuid_1 = require("./../../utils/uuid");
+var index_1 = require("./../../drawboard/Drawboard/index");
+var uuid_1 = require("../../utils/uuid");
 var types_1 = require("../../markers/types");
-require("./index.less");
 var dom_1 = require("../../utils/dom");
+require("./index.less");
 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;
+        var _b = _a === void 0 ? {} : _a, mode = _b.mode, whiteboard = _b.whiteboard, parentContainer = _b.parentContainer, extraToolbarItems = _b.extraToolbarItems;
         this.id = uuid_1.uuid();
         this.mode = 'master';
         if (mode) {
             this.mode = mode;
         }
-        this.eventHub = eventHub;
         this.parentContainer = parentContainer;
+        this.whiteboard = whiteboard;
         this.initSource(source);
         if (this.mode === 'master') {
-            this.initMaster();
+            this.initMaster(extraToolbarItems);
         }
         if (this.mode === 'mirror') {
             this.initMirror();
     WhitePage.prototype.show = function () {
         this.drawboard.show();
     };
-    WhitePage.prototype.close = function () {
-        this.drawboard.close();
+    WhitePage.prototype.destroy = function () {
+        this.drawboard.destroy();
+    };
+    WhitePage.prototype.captureSnap = function () {
+        var markerSnaps = this.drawboard.markers.map(function (m) { return m.captureSnap(); });
+        return {
+            id: this.id,
+            markers: markerSnaps
+        };
+    };
+    WhitePage.prototype.applySnap = function (snap) {
+        var _this = this;
+        var markerIdsSet = new Set();
+        snap.markers.forEach(function (markerSnap) {
+            var marker = _this.drawboard.markerMap[markerSnap.id];
+            markerIdsSet.add(markerSnap.id);
+            if (marker) {
+                marker.applySnap(markerSnap);
+            }
+            else {
+                var newMarker = _this.drawboard.addMarker(types_1.getMarkerByType(markerSnap.type), {
+                    id: markerSnap.id
+                });
+                newMarker.applySnap(markerSnap);
+            }
+        });
+        this.drawboard.markers.forEach(function (marker) {
+            if (!markerIdsSet.has(marker.id)) {
+                _this.drawboard.deleteMarkerWithEvent(marker);
+            }
+        });
     };
     WhitePage.prototype.initSource = function (source) {
         if (typeof source.imgSrc === 'string' && !this.parentContainer) {
             this.container.appendChild(this.target);
         }
     };
-    WhitePage.prototype.initMaster = function () {
+    WhitePage.prototype.initMaster = function (extraToolbarItems) {
         var _this = this;
-        if (this.eventHub) {
+        if (this.whiteboard) {
             this.drawboard = new index_1.Drawboard({ imgEle: this.target }, {
+                extraToolbarItems: extraToolbarItems,
+                mountContainer: this.whiteboard.target,
                 page: this,
-                onChange: function (ev) { return _this.eventHub.emit('sync', ev); }
+                onChange: function (ev) { return _this.whiteboard.emit(ev); }
             });
         }
         else {
-            this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this });
+            this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this, mountContainer: this.whiteboard.target });
         }
     };
     WhitePage.prototype.initMirror = function () {
         var _this = this;
-        if (!this.eventHub) {
-            throw new Error('Invalid eventHub');
+        if (!this.whiteboard) {
+            throw new Error('Invalid whiteboard');
         }
-        this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this });
-        this.eventHub.on('sync', function (ev) {
+        this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this, mountContainer: this.whiteboard.target });
+        this.whiteboard.eventHub.on('sync', function (ev) {
             try {
                 if (ev.target === 'page' && ev.id === _this.id) {
                     _this.onPageSync();
     };
     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 (!ev.marker) {
+            return;
+        }
+        var id = ev.id;
+        if (ev.event === 'addMarker' && ev.parentId === this.id) {
+            var marker = this.drawboard.markerMap[id];
             if (!marker) {
-                this.drawboard.addMarker(types_1.getMarkerByType(data.type), { id: data.id });
+                this.drawboard.addMarker(types_1.getMarkerByType(ev.marker.type), {
+                    id: ev.marker.id,
+                    originX: ev.marker.dx,
+                    originY: ev.marker.dy
+                });
             }
         }
-        if (!ev.id) {
+        if (!id) {
             return;
         }
-        if (ev.event === 'remove') {
-            var data = ev.data;
-            var marker = this.drawboard.markerMap[data.id];
+        if (ev.event === 'removeMarker') {
+            var marker = this.drawboard.markerMap[id];
             if (marker) {
                 this.drawboard.deleteMarker(marker);
             }
         }
-        if (ev.event === 'move' || ev.event === 'resize') {
-            var marker = this.drawboard.markerMap[ev.id];
+        if (ev.event === 'moveMarker' || ev.event === 'resizeMarker') {
+            var marker = this.drawboard.markerMap[id];
             if (marker) {
-                marker.reactToManipulation(ev.event, ev.data);
+                marker.reactToManipulation(ev.event, ev.marker);
             }
         }
-        if (ev.event === 'changeText') {
-            var marker = this.drawboard.markerMap[ev.id];
+        if (ev.event === 'inputMarker') {
+            var marker = this.drawboard.markerMap[id];
             if (marker) {
-                marker.setText(ev.data);
+                marker.setText(ev.marker.text);
             }
         }
     };

dist/cjs/whiteboard/Whiteboard/index.js

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var index_1 = require("../WhitePage/index");
+var dom_1 = require("../../utils/dom");
+var index_2 = require("../AbstractWhiteboard/index");
+var toolbar_items_1 = require("../../toolbar/toolbar-items");
+var LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
+var RightArrowIcon = require('../../assets/bx-right-arrow.svg');
+var FinishIcon = require('../../assets/finish.svg');
+var RollbackIcon = require('../../assets/rollback.svg');
+var prefix = 'fcw-board';
+var Whiteboard = (function (_super) {
+    __extends(Whiteboard, _super);
+    function Whiteboard() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.mode = 'master';
+        return _this;
+    }
+    Whiteboard.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+    };
+    Whiteboard.prototype.init = function () {
+        this.imgsContainer = dom_1.createDivWithClassName(prefix + "-imgs", this.target);
+        this.pagesContainer = dom_1.createDivWithClassName(prefix + "-pages", this.target);
+        this.initMaster();
+        this.snapHistory.push(this.captureSnap(false));
+        this.emitSnapshot();
+    };
+    Whiteboard.prototype.initMaster = function () {
+        var _this = this;
+        this.isInitialized = true;
+        var prevToolbarItem = {
+            icon: LeftArrowIcon,
+            name: 'prev-flip-arrow',
+            tooltipText: 'Prev',
+            onClick: function () {
+                var nextPageIndex = _this.visiblePageIndex - 1 < 0 ? _this.pages.length - 1 : _this.visiblePageIndex - 1;
+                document.querySelectorAll('.fc-whiteboard-indicator-current').forEach(function (e) {
+                    e.innerHTML = "" + (nextPageIndex + 1);
+                });
+                _this.onPageChange(nextPageIndex);
+            }
+        };
+        var indicatorContainer = document.createElement('div');
+        indicatorContainer.className = 'fc-whiteboard-indicator-container';
+        var indicatorCurrent = document.createElement('span');
+        indicatorCurrent.className = 'fc-whiteboard-indicator-current';
+        indicatorCurrent.innerHTML = "" + (this.visiblePageIndex + 1);
+        indicatorContainer.appendChild(indicatorCurrent);
+        indicatorContainer.appendChild(document.createTextNode("/" + this.sources.length));
+        var indicatorItem = {
+            name: 'indicator',
+            onRender: function () { return indicatorContainer; }
+        };
+        var nextToolbarItem = {
+            icon: RightArrowIcon,
+            name: 'next-flip-arrow',
+            tooltipText: 'Next',
+            onClick: function () {
+                var nextPageIndex = _this.visiblePageIndex + 1 > _this.pages.length - 1 ? 0 : _this.visiblePageIndex + 1;
+                document.querySelectorAll('.fc-whiteboard-indicator-current').forEach(function (e) {
+                    e.innerHTML = "" + (nextPageIndex + 1);
+                });
+                _this.onPageChange(nextPageIndex);
+            }
+        };
+        var finishItem = {
+            icon: FinishIcon,
+            name: 'finish',
+            tooltipText: 'Finish',
+            onClick: function () {
+                _this.emit({
+                    event: 'finish',
+                    id: _this.id,
+                    target: 'whiteboard'
+                });
+            }
+        };
+        var rollbackItem = {
+            icon: RollbackIcon,
+            name: 'rollback',
+            tooltipText: 'Rollback',
+            shortcut: 'ESC',
+            onClick: function () {
+                _this.rollbackSnap();
+            }
+        };
+        this.sources.forEach(function (source) {
+            var page = new index_1.WhitePage({ imgSrc: source }, {
+                mode: _this.mode,
+                whiteboard: _this,
+                parentContainer: _this.pagesContainer,
+                extraToolbarItems: [
+                    toolbar_items_1.separatorToolbarItem,
+                    prevToolbarItem,
+                    indicatorItem,
+                    nextToolbarItem,
+                    toolbar_items_1.separatorToolbarItem,
+                    finishItem,
+                    rollbackItem
+                ]
+            });
+            page.container.style.visibility = 'hidden';
+            _this.pages.push(page);
+        });
+        this.initSiema();
+    };
+    Whiteboard.prototype.onPageChange = function (nextPageIndex) {
+        if (this.visiblePageIndex === nextPageIndex) {
+            return;
+        }
+        this.siema.goTo(nextPageIndex);
+        this.visiblePageIndex = nextPageIndex;
+        this.pages.forEach(function (page, i) {
+            if (nextPageIndex === i) {
+                page.show();
+            }
+            else {
+                page.hide();
+            }
+        });
+        this.emit({
+            event: 'borderChangePage',
+            id: this.id,
+            target: 'whiteboard',
+            border: this.captureSnap()
+        });
+    };
+    Whiteboard.prototype.emitSnapshot = function () {
+        var _this = this;
+        var innerFunc = function () {
+            _this.emit({
+                event: 'borderSnap',
+                id: _this.id,
+                target: 'whiteboard',
+                border: _this.captureSnap(false)
+            });
+        };
+        this.emitInterval = setInterval(function () {
+            innerFunc();
+        }, this.snapInterval);
+        setTimeout(innerFunc, 500);
+    };
+    return Whiteboard;
+}(index_2.AbstractWhiteboard));
+exports.Whiteboard = Whiteboard;

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

-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

-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

-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[];
-    readonly activePage: WhitePage;
-    siema: any;
-    isInitialized: boolean;
-    isSyncing: boolean;
-    visiblePageIndex: number;
-    emitInterval: any;
-    constructor(target: HTMLDivElement, { sources, eventHub, mode, visiblePageIndex }?: {
-        sources?: string[];
-        eventHub?: EventHub;
-        mode?: WhiteboardMode;
-        visiblePageIndex?: number;
-    });
-    open(): void;
-    close(): void;
-    show(): void;
-    hide(): void;
-    snap(): SerializableWhiteboard;
-    private init;
-    private initMaster;
-    private initMirror;
-    private initSiema;
-    private onPageChange;
-    private emitSnapshot;
-    private onSnapshot;
-}

dist/types/board/types.d.ts

-export declare type WhiteboardMode = 'master' | 'mirror';
-export declare type WhitePageSource = {
-    imgEle?: HTMLImageElement;
-    imgSrc?: string;
-};

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

-import { WhitePageSource } from './../types';
+import { Source } from './../../utils/types';
 export declare class Baseboard {
     id: string;
-    source: WhitePageSource;
+    isFullscreen: boolean;
+    source: Source;
     target: HTMLImageElement;
     targetRect: ClientRect;
     boardCanvas: SVGSVGElement;
     defs: SVGDefsElement;
     width: number;
     height: number;
-    constructor(source: WhitePageSource);
-    protected initBoard: () => void;
+    constructor(source: Source);
+    protected initBoard: (mountContainer: HTMLElement) => void;
     protected positionBoard: () => void;
 }

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

+import { HotkeysListener } from 'fc-hotkeys';
+import { Source } from './../../utils/types';
+import { Baseboard } from './../Baseboard/index';
+import { BaseMarker } from './../../markers/BaseMarker/index';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { onSyncFunc } from '../../event/SyncEvent';
+import { Toolbar } from '../../toolbar/Toolbar';
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+import './index.less';
+export declare class Drawboard extends Baseboard {
+    mountContainer: HTMLElement;
+    scale: number;
+    zIndex: number;
+    allowKeyboard?: boolean | undefined;
+    page: WhitePage;
+    listener: HotkeysListener;
+    markers: BaseMarker[];
+    readonly markerMap: {
+        [key: string]: BaseMarker;
+    };
+    activeMarker: BaseMarker | null;
+    toolbarItems: ToolbarItem[];
+    toolbar: Toolbar;
+    toolbarUI: HTMLElement;
+    onComplete: (dataUrl: string) => void;
+    onChange: onSyncFunc;
+    onCancel: () => void;
+    constructor(source: Source, { allowKeyboard, extraToolbarItems, mountContainer, page, zIndex, onChange }?: Partial<Drawboard> & {
+        extraToolbarItems?: ToolbarItem[];
+    });
+    open: (onComplete?: ((dataUrl: string) => void) | undefined, onCancel?: (() => void) | undefined) => void;
+    hide: () => void;
+    show: () => void;
+    destroy: () => void;
+    render: (onComplete: (dataUrl: string) => void, onCancel?: (() => void) | undefined) => void;
+    addMarker: (markerType: typeof BaseMarker, { id, originX, originY }?: {
+        id?: string | undefined;
+        originX?: number | undefined;
+        originY?: number | undefined;
+    }) => BaseMarker;
+    deleteActiveMarker: () => void;
+    clearMarkers: () => void;
+    deleteMarkerWithEvent: (marker: BaseMarker | null) => void;
+    private setTargetRect;
+    private startRender;
+    private attachEvents;
+    private mouseDown;
+    private mouseMove;
+    private mouseUp;
+    private onKeyboard;
+    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/event/Event.d.ts

-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/SyncEvent.d.ts

+import { BorderEventType } from './border-events';
+import { MarkerEventType, MarkerData } from './marker-events';
+import { WhiteboardSnap } from '../whiteboard/AbstractWhiteboard/snap';
+export declare type TargetType = 'whiteboard' | 'page' | 'marker';
+export declare type EventType = MarkerEventType | BorderEventType;
+export declare type onSyncFunc = (ev: SyncEvent) => void;
+export interface SyncEvent {
+    target: TargetType;
+    id?: string;
+    parentId?: string;
+    event: EventType;
+    marker?: MarkerData;
+    border?: WhiteboardSnap;
+    timestamp?: number;
+}

dist/types/event/border-events.d.ts

+export declare type BorderEventType = 'borderSnap' | 'borderChangePage' | 'finish';

dist/types/event/marker-events.d.ts

+import { MarkerType } from './../markers/types';
+import { PositionType } from '../utils/layout';
+export declare type MarkerEventType = 'addMarker' | 'resizeMarker' | 'moveMarker' | 'removeMarker' | 'inputMarker';
+export interface MarkerData {
+    id?: string;
+    type?: MarkerType;
+    text?: string;
+    dx?: number;
+    dy?: number;
+    pos?: PositionType;
+}

dist/types/index.d.ts

-export { Drawboard } from './board/Drawboard';
-export { Whiteboard } from './board/Whiteboard';
-export { WhiteboardMode } from './board/types';
+export { Drawboard } from './drawboard/Drawboard';
+export { separatorToolbarItem, closeToolbarItem } from './toolbar/toolbar-items';
+export { Mode } from './utils/types';
+export { SyncEvent } from './event/SyncEvent';
+export { EventHub } from './event/EventHub';
+export { Whiteboard } from './whiteboard/Whiteboard';
+export { MirrorWhiteboard } from './whiteboard/MirrorWhiteboard';
+export { ReplayWhiteboard } from './whiteboard/ReplayWhiteboard';

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

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

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

-import { WhitePage } from './../../board/WhitePage/index';
-import { PositionType } from '../../event/Event';
-import { onSyncFunc, EventType } from '../../event/Event';
+import { WhitePage } from '../../whiteboard/WhitePage/index';
+import { PositionType } from '../../utils/layout';
+import { onSyncFunc, EventType } from '../../event/SyncEvent';
 import { MarkerType } from '../types';
-export declare class BaseMarker {
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
+import { Drawboard } from '../../drawboard/Drawboard/index';
+import { DomEventAware } from '../../renderer/DomEventAware/index';
+export declare class BaseMarker extends DomEventAware {
     id: string;
     type: MarkerType;
     page?: WhitePage;
+    drawboard?: Drawboard;
     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;
+    width: number;
+    height: number;
+    isActive: boolean;
+    isDragging: boolean;
+    isResizing: boolean;
+    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;
+    captureSnap(): MarkerSnap;
+    applySnap(snap: MarkerSnap): void;
+    destroy(): 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;
+    move: (dx: number, dy: number) => void;
+    moveTo: (x: number, y: number) => void;
+    protected init(): void;
+    protected addToVisual: (el: SVGElement) => void;
+    protected addToRenderVisual: (el: SVGElement) => void;
+    protected onMouseDown: (ev: MouseEvent) => void;
+    protected onMouseUp: (ev: MouseEvent) => void;
+    protected onMouseMove: (ev: MouseEvent) => void;
 }

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

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

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

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

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

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

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

-import { WhitePage } from './../../board/WhitePage/index';
+import { WhitePage } from '../../whiteboard/WhitePage/index';
 import { BaseMarker } from '../BaseMarker';
-import { PositionType } from '../../event/Event';
-export declare class LinearMarker extends BaseMarker {
+import { PositionType } from '../../utils/layout';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
+import { LinearBound } from '../types';
+export declare class LinearMarker extends BaseMarker implements LinearBound {
     static createMarker: (page?: WhitePage | undefined) => LinearMarker;
-    protected markerLine: SVGLineElement;
     private readonly MIN_LENGTH;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    protected markerLine: SVGLineElement;
     private markerBgLine;
     private controlBox;
     private controlGrips;
     private activeGrip;
-    private x1;
-    private y1;
-    private x2;
-    private y2;
+    getLineLength: (x1: number, y1: number, x2: number, y2: number) => number;
+    captureSnap(): MarkerSnap;
+    applySnap(snap: MarkerSnap): void;
     endManipulation(): void;
     select(): void;
     deselect(): void;
-    protected setup(): void;
+    protected init(): 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;
+    private positionLine;
+    private positionGrips;
+    private positionGrip;
 }

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

-import { PositionType } from '../../event/Event';
+import { PositionType } from '../../utils/layout';
 import { RectangularMarker } from '../RectangularMarker';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
 export declare class RectBaseMarker extends RectangularMarker {
     static createMarker: (page?: WhitePage | undefined) => RectBaseMarker;
     private markerRect;
-    protected setup(): void;
+    applySnap(snap: MarkerSnap): void;
+    protected init(): void;
     protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void): void;
 }

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

-import { WhitePage } from './../../board/WhitePage/index';
+import { WhitePage } from '../../whiteboard/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;
+    protected init(): void;
 }

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

 import { BaseMarker } from '../BaseMarker';
-import { PositionType } from '../../event/Event';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { PositionType } from '../../utils/layout';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
 export declare class RectangularMarker extends BaseMarker {
     static createMarker: (page?: WhitePage | undefined) => RectangularMarker;
     protected MIN_SIZE: number;
     private controlRect;
     private controlGrips;
     private activeGrip;
+    captureSnap(): MarkerSnap;
+    applySnap(snap: MarkerSnap): void;
     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;
+    protected init(): void;
+    protected resizeByEvent(dx: number, dy: number, pos: PositionType): void;
+    protected resize(dx: number, dy: number, onPosition?: (pos: PositionType) => void): void;
     private addControlBox;
     private adjustControlBox;
     private addControlGrips;
     private createGrip;
-    private positionGrips;
-    private positionGrip;
+    protected onTouch(ev: TouchEvent): void;
     private gripMouseDown;
     private gripMouseUp;
     private gripMouseMove;
+    private positionGrips;
+    private positionGrip;
 }

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

 import { MarkerType } from '../types';
 import { RectangularMarker } from '../RectangularMarker';
-import { PositionType } from '../../event/Event';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { PositionType } from '../../utils/layout';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
 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 textElement;
     private editor;
     private editorTextArea;
-    protected setup(): void;
+    setText(text: string): void;
+    captureSnap(): MarkerSnap;
+    applySnap(snap: MarkerSnap): void;
+    protected init(): void;
     protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void): void;
     private renderText;
     private sizeText;

dist/types/markers/types.d.ts

 import { BaseMarker } from './BaseMarker/index';
 export declare type MarkerType = 'base' | 'arrow' | 'cover' | 'line' | 'rect' | 'text' | 'highlight';
+export interface LinearBound {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
 export declare function getMarkerByType(type: MarkerType): typeof BaseMarker;

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

+export declare abstract class DomEventAware {
+    x: number;
+    y: number;
+    previousMouseX: number;
+    previousMouseY: number;
+    protected init(ele: Element): void;
+    protected onTouch(ev: TouchEvent): void;
+    protected abstract onMouseDown(ev: MouseEvent): void;
+    protected abstract onMouseUp(ev: MouseEvent): void;
+    protected abstract onMouseMove(ev: MouseEvent): void;
+}

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

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

dist/types/toolbar/Toolbar.d.ts

+import { ToolbarButton } from './ToolbarButton';
 import { ToolbarItem } from './ToolbarItem';
-export declare class Toolbar {
+import './index.less';
+import { DomEventAware } from '../renderer/DomEventAware/index';
+import { Drawboard } from '../drawboard/Drawboard/index';
+export declare type MouseHandler = (ev: MouseEvent) => void;
+export declare class Toolbar extends DomEventAware {
     id: string;
-    private toolbarItems;
-    private toolbarUI;
-    private clickHandler;
+    zIndex: number;
+    toolbarItems: ToolbarItem[];
+    toolbarUI: HTMLElement;
+    toolbarButtons: ToolbarButton[];
+    readonly toolbarButtonMap: Record<string, ToolbarButton>;
+    clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
     constructor(toolbarItems: ToolbarItem[], clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void);
-    getUI: () => HTMLElement;
+    getUI: (drawboard: Drawboard) => HTMLElement;
     hide(): void;
     show(): void;
+    protected onMouseDown: (downEv: MouseEvent) => void;
+    protected onMouseUp: (ev: MouseEvent) => void;
+    protected onMouseMove: (ev: MouseEvent) => void;
+    protected onDragMove: (event: any) => void;
 }

dist/types/toolbar/ToolbarButton.d.ts

 import { ToolbarItem } from './ToolbarItem';
+import { Drawboard } from '../drawboard/Drawboard';
 export declare class ToolbarButton {
-    private toolbarItem;
-    private clickHandler;
+    id: string;
+    drawboard: Drawboard;
+    toolbarItem: ToolbarItem;
+    container: HTMLDivElement;
+    clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
     constructor(toolbarItem: ToolbarItem, clickHandler?: (ev: MouseEvent, toolbarItem: ToolbarItem) => void);
     getElement: () => HTMLElement;
 }

dist/types/toolbar/ToolbarItem.d.ts

 import { BaseMarker } from './../markers/BaseMarker/index';
 export declare class ToolbarItem {
     name: string;
-    tooltipText: string;
+    tooltipText?: string;
+    shortcut?: string;
     icon?: string;
     markerType?: typeof BaseMarker;
-    constructor({ name, tooltipText, icon, markerType }: {
-        name: string;
-        tooltipText: string;
-        icon?: string;
-        markerType?: typeof BaseMarker;
-    });
+    onRender?: () => HTMLDivElement;
+    onClick?: () => void;
+    draggable?: boolean;
+    constructor({ name, tooltipText, shortcut, icon, draggable, markerType, onRender, onClick }: Partial<ToolbarItem>);
 }

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

-import { WhitePage } from './../board/WhitePage/index';
+import { WhitePage } from '../whiteboard/WhitePage/index';
 import { ToolbarItem } from './ToolbarItem';
+export declare const dragToolbarItem: 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 const closeToolbarItem: ToolbarItem;
+export declare const separatorToolbarItem: ToolbarItem;
 export declare function getToolbars(page?: WhitePage): (ToolbarItem | {
     icon: any;
     name: string;

dist/types/utils/layout.d.ts

+export declare type PositionType = 'left' | 'right' | 'topLeft' | 'bottomLeft' | 'topRight' | 'bottomRight' | 'centerLeft' | 'centerRight' | 'topCenter' | 'bottomCenter';
+export declare function rectContains(rect: ClientRect, { x, y }: {
+    x: number;
+    y: number;
+}): boolean;

dist/types/utils/types.d.ts

+export declare type Mode = 'master' | 'mirror' | 'replay';
+export declare type Source = {
+    imgEle?: HTMLImageElement;
+    imgSrc?: string;
+};
+export declare function isNil(mayBeNil: any): boolean;

dist/types/whiteboard/AbstractWhiteboard/index.d.ts

+import { Mode } from './../../utils/types';
+import { SyncEvent } from '../../event/SyncEvent';
+import { WhitePage } from '../WhitePage/index';
+import { EventHub } from '../../event/EventHub';
+import './index.less';
+import { WhiteboardSnap } from '../AbstractWhiteboard/snap';
+export declare abstract class AbstractWhiteboard {
+    id: string;
+    sources: string[];
+    target: HTMLDivElement;
+    imgEles: HTMLDivElement[];
+    imgsContainer: HTMLDivElement;
+    pagesContainer: HTMLDivElement;
+    allowRollback: boolean;
+    onlyEmitSnap: boolean;
+    snapInterval: number;
+    eventHub?: EventHub;
+    mode: Mode;
+    isFullscreen: boolean;
+    pages: WhitePage[];
+    readonly activePage: WhitePage;
+    readonly pageMap: Record<string, WhitePage>;
+    siema: any;
+    snapHistory: WhiteboardSnap[];
+    isInitialized: boolean;
+    isSyncing: boolean;
+    visiblePageIndex: number;
+    emitInterval: any;
+    constructor(target: HTMLDivElement, { sources, eventHub, visiblePageIndex, allowRollback, onlyEmitSnap }?: Partial<AbstractWhiteboard>);
+    open(): void;
+    close(): void;
+    show(): void;
+    hide(): void;
+    emit(borderEvent: SyncEvent): void;
+    captureSnap(shadow?: boolean): WhiteboardSnap;
+    rollbackSnap(): void;
+    destroy(): void;
+    protected abstract init(): void;
+    protected initSiema(): void;
+    protected abstract onPageChange(nextPageIndex: number): void;
+    protected applySnap(snap: WhiteboardSnap): void;
+}

dist/types/whiteboard/AbstractWhiteboard/snap.d.ts

+import { MarkerType } from '../../markers/types';
+export declare class WhiteboardSnap {
+    id: string;
+    sources: string[];
+    pageIds: string[];
+    visiblePageIndex: number;
+    pages?: WhitepageSnap[];
+}
+export declare class WhitepageSnap {
+    id: string;
+    markers: MarkerSnap[];
+}
+export declare class MarkerSnap {
+    id: string;
+    type: MarkerType;
+    isActive: boolean;
+    x: number;
+    y: number;
+    linearSnap?: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    };
+    rectSnap?: {
+        width: number;
+        height: number;
+    };
+    textSnap?: {
+        text: string;
+    };
+}

dist/types/whiteboard/MirrorWhiteboard/index.d.ts

+import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
+import { Mode } from '../../utils/types';
+export declare class MirrorWhiteboard extends AbstractWhiteboard {
+    mode: Mode;
+    protected init(): void;
+    destroy(): void;
+    onPageChange(nextPageIndex: number): void;
+}

dist/types/whiteboard/ReplayWhiteboard/index.d.ts

+import { MirrorWhiteboard } from '../MirrorWhiteboard';
+import { SyncEvent } from '../../event/SyncEvent';
+export declare type onLoadFunc = (startTime: number, endTime: number) => Promise<SyncEvent[]>;
+export declare class ReplayWhiteboard extends MirrorWhiteboard {
+    leftEvents: SyncEvent[];
+    recordStartTime: number;
+    currentRelativeTime: number;
+    loadedRelativeTime: number;
+    interval: any;
+    loadingLock: boolean;
+    seekingLock: boolean;
+    onLoad: onLoadFunc;
+    setContext(recordStartTime: number, onLoad: onLoadFunc): void;
+    setCurrentRelativeTime(time: number): void;
+    close(): void;
+    protected init(): void;
+    private loadEvents;
+    private seek;
+    private perform;
+}

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

+import { Source, Mode } from './../../utils/types';
+import { Drawboard } from './../../drawboard/Drawboard/index';
+import { WhitepageSnap } from '../AbstractWhiteboard/snap';
+import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
+import './index.less';
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
+export declare class WhitePage {
+    id: string;
+    source: Source;
+    target: HTMLImageElement;
+    container: HTMLDivElement;
+    parentContainer?: HTMLDivElement;
+    mode: Mode;
+    drawboard: Drawboard;
+    whiteboard?: AbstractWhiteboard;
+    constructor(source: Source, { mode, whiteboard, parentContainer, extraToolbarItems }?: Partial<WhitePage> & {
+        extraToolbarItems?: ToolbarItem[];
+    });
+    open(): void;
+    hide(): void;
+    show(): void;
+    destroy(): void;
+    captureSnap(): WhitepageSnap;
+    applySnap(snap: WhitepageSnap): void;
+    private initSource;
+    protected initMaster(extraToolbarItems?: ToolbarItem[]): void;
+    protected initMirror(): void;
+    private onPageSync;
+    private onMarkerSync;
+}

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

+import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
+import { Mode } from '../../utils/types';
+export declare class Whiteboard extends AbstractWhiteboard {
+    mode: Mode;
+    destroy(): void;
+    protected init(): void;
+    private initMaster;
+    onPageChange(nextPageIndex: number): void;
+    private emitSnapshot;
+}

example/index.ts

-import { EventHub } from './../src/event/EventHub';
-import { Whiteboard } from './../src/board/Whiteboard/index';
-
-const eventHub = new EventHub();
-
-eventHub.on('sync', (changeEv: SyncEvent) => {});
-
-const images = [
-  'https://upload-images.jianshu.io/upload_images/1647496-6bede989c09af527.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
-  'http://upload-images.jianshu.io/upload_images/1647496-d281090a702045e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
-  'http://upload-images.jianshu.io/upload_images/1647496-611a416be07d7ca3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
-];
-
-const whiteboard = new Whiteboard(document.getElementById('root') as HTMLDivElement, {
-  sources: images,
-  eventHub
-});
-
-whiteboard.open();
-
-const mirrorWhiteboard = new Whiteboard(document.getElementById('root-mirror') as HTMLDivElement, {
-  sources: images,
-  eventHub,
-  mode: 'mirror'
-});
-
-mirrorWhiteboard.open();

example/mirror/index.ts

-import { EventHub } from './../../src/event/EventHub';
-import { WhitePage } from '../../src/board/WhitePage/index';
-import { SyncEvent } from '../../src/event/Event';
-
-const eventHub = new EventHub();
-
-eventHub.on('sync', (changeEv: SyncEvent) => {
-  console.log(changeEv);
-});
-
-const page1 = new WhitePage(
-  { imgEle: document.getElementById('image1') as HTMLImageElement },
-  { eventHub }
-);
-
-page1.drawboard.open((dataUrl: string) => {
-  const res = document.getElementById('resultImage') as HTMLImageElement;
-  res.src = dataUrl;
-});
-
-const page2 = new WhitePage(
-  { imgEle: document.getElementById('image2') as HTMLImageElement },
-  {
-    mode: 'mirror',
-    eventHub
-  }
-);
-
-page2.drawboard.open((dataUrl: string) => {
-  const res = document.getElementById('resultImage') as HTMLImageElement;
-  res.src = dataUrl;
-});

example/whiteboard/index.ts

-import { Whiteboard } from '../../src/board/Whiteboard/index';
-
-const images = [
-  'https://upload-images.jianshu.io/upload_images/1647496-6bede989c09af527.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
-  'http://upload-images.jianshu.io/upload_images/1647496-d281090a702045e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
-  'http://upload-images.jianshu.io/upload_images/1647496-611a416be07d7ca3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
-];
-
-const whiteboard = new Whiteboard(document.getElementById('root') as HTMLDivElement, {
-  sources: images
-});
-
-whiteboard.open();

package.json

   },
   "dependencies": {
     "eventemitter3": "^3.1.0",
+    "fc-hotkeys": "^0.0.1-alpha.1",
+    "interactjs": "^1.4.9",
+    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.6.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "siema": "^1.5.1",
+    "tippy.js": "^4.3.4",
     "uuid": "^3.3.2"
   },
   "devDependencies": {

src/assets/finish.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" style="height:20px;" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
+    <title>teacher_ppt_bar_btn_finish</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Demo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.776211504">
+        <g id="教师端_白板" transform="translate(-957.000000, -578.000000)" fill="#FF3366">
+            <g id="分组-6" transform="translate(484.000000, 569.000000)">
+                <g id="Group-29">
+                    <g id="teacher_ppt_bar_bj">
+                        <g id="分组-10" transform="translate(382.000000, 9.000000)">
+                            <g id="分组-5">
+                                <g id="teacher_ppt_bar_btn_finish" transform="translate(91.000000, 0.000000)">
+                                    <g id="icon/ppt/结束">
+                                        <g id="结束" transform="translate(3.000000, 3.000000)">
+                                            <path d="M6.13493151,13 C5.30684932,13 4.50547945,12.839726 3.77534247,12.5191781 C3.03630137,12.1986301 2.38630137,11.7534247 1.83424658,11.210274 C1.28219178,10.6671233 0.845890411,10.0082192 0.525342466,9.27808219 C0.204794521,8.5390411 0.0445205479,7.73767123 0.0445205479,6.90068493 C0.0445205479,6.41986301 0.0979452055,5.94794521 0.21369863,5.48493151 C0.329452055,5.02191781 0.489726027,4.57671233 0.694520548,4.15821918 C0.899315068,3.73972603 1.16643836,3.34794521 1.46917808,2.99178082 C1.78082192,2.62671233 2.12808219,2.29726027 2.5109589,2.00342466 C2.64452055,1.90547945 2.77808219,1.8609589 2.92945205,1.8609589 C2.96506849,1.8609589 3.00068493,1.8609589 3.04520548,1.86986301 C3.24109589,1.89657534 3.39246575,1.99452055 3.51712329,2.15479452 C3.64178082,2.31506849 3.67739726,2.48424658 3.65068493,2.68013699 C3.6239726,2.8760274 3.5260274,3.03630137 3.36575342,3.15205479 C2.76027397,3.58835616 2.27945205,4.14041096 1.95890411,4.79041096 C1.63835616,5.44041096 1.46917808,6.14383562 1.46917808,6.89178082 C1.46917808,7.53287671 1.59383562,8.13835616 1.83424658,8.70821918 C2.07465753,9.27808219 2.4130137,9.77671233 2.83150685,10.1952055 C3.25,10.6136986 3.74863014,10.9520548 4.31849315,11.2013699 C4.88835616,11.4506849 5.49383562,11.5753425 6.13493151,11.5753425 C6.7760274,11.5753425 7.39041096,11.4506849 7.95136986,11.2013699 C8.51232877,10.9520548 9.01986301,10.6136986 9.43835616,10.1952055 C9.85684932,9.77671233 10.1952055,9.27808219 10.4445205,8.70821918 C10.6938356,8.13835616 10.8184932,7.53287671 10.8184932,6.89178082 C10.8184932,6.13493151 10.640411,5.41369863 10.2931507,4.7369863 C9.94589041,4.06027397 9.44726027,3.49931507 8.81506849,3.0630137 C8.64589041,2.94726027 8.54794521,2.79589041 8.52123288,2.6 C8.48561644,2.40410959 8.53013699,2.2260274 8.6369863,2.05684932 C8.74383562,1.90547945 8.89520548,1.80753425 9.09109589,1.77191781 C9.13561644,1.7630137 9.18013699,1.7630137 9.22465753,1.7630137 C9.36712329,1.7630137 9.50068493,1.80753425 9.63424658,1.89657534 C10.0349315,2.18150685 10.4089041,2.51986301 10.7205479,2.88493151 C11.0410959,3.25 11.3171233,3.65068493 11.539726,4.07808219 C11.7623288,4.50547945 11.940411,4.95958904 12.0561644,5.43150685 C12.1719178,5.90342466 12.2342466,6.39315068 12.2342466,6.88287671 C12.2342466,7.71986301 12.0739726,8.52123288 11.7534247,9.26027397 C11.4328767,9.99931507 10.9876712,10.6493151 10.4445205,11.2013699 C9.90136986,11.7445205 9.24246575,12.189726 8.50342466,12.510274 C7.78219178,12.839726 6.98082192,13 6.13493151,13 Z M6.13493151,6.75821918 C5.9390411,6.75821918 5.77876712,6.6869863 5.63630137,6.55342466 C5.50273973,6.4109589 5.43150685,6.25068493 5.43150685,6.05479452 L5.43150685,0.721232877 C5.43150685,0.525342466 5.50273973,0.356164384 5.63630137,0.21369863 C5.77876712,0.0712328767 5.9390411,0 6.13493151,0 C6.33972603,0 6.50890411,0.0712328767 6.64246575,0.21369863 C6.78493151,0.356164384 6.84726027,0.525342466 6.84726027,0.721232877 L6.84726027,6.05479452 C6.84726027,6.25068493 6.7760274,6.4109589 6.64246575,6.55342466 C6.50890411,6.6869863 6.33972603,6.75821918 6.13493151,6.75821918 Z" id="Shape" fill-rule="nonzero"></path>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/rollback-disable.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1560078592996" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2653" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M811.488 424.512Q722.976 336 597.984 336h-336l114.016-114.016q12-12 12-28.512t-12-28-28.512-11.488-28.512 12l-183.008 183.008q-12 12-12 28.512t12 28.512l178.016 178.016q12 12 28.512 12t28-11.488 11.488-28-11.008-28.512l-112.992-112h340q92 0 156.992 64.992t64.992 156.992v192q0 16.992 12 28.512t28.512 11.488 28-11.488 11.488-28.512v-192q0-124.992-88.512-213.504z" p-id="2654" fill="#cdcdcd"></path></svg>

src/assets/rollback.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1560078592996" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2653" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M811.488 424.512Q722.976 336 597.984 336h-336l114.016-114.016q12-12 12-28.512t-12-28-28.512-11.488-28.512 12l-183.008 183.008q-12 12-12 28.512t12 28.512l178.016 178.016q12 12 28.512 12t28-11.488 11.488-28-11.008-28.512l-112.992-112h340q92 0 156.992 64.992t64.992 156.992v192q0 16.992 12 28.512t28.512 11.488 28-11.488 11.488-28.512v-192q0-124.992-88.512-213.504z" p-id="2654" fill="#2c2c2c"></path></svg>

src/drawboard/Baseboard/index.ts

     // 如果仅传入图片地址或者 Blob，则必须为全屏模式
   }
 
-  protected initBoard = () => {
+  protected initBoard = (mountContainer: HTMLElement) => {
     // init holder
     this.boardHolder = document.createElement('div');
     this.boardHolder.id = `fcw-board-holder-${this.id}`;
+    this.boardHolder.className = `fcw-board-holder`;
+    this.boardHolder.style.zIndex = '999';
     // fix for Edge's touch behavior
     this.boardHolder.style.setProperty('touch-action', 'none');
     this.boardHolder.style.setProperty('-ms-touch-action', 'none');
-    document.body.appendChild(this.boardHolder);
+
+    mountContainer.appendChild(this.boardHolder);
 
     // init canvas
     this.boardCanvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
       '0 0 ' + this.width.toString() + ' ' + this.height.toString()
     );
 
-    this.boardHolder.style.position = 'absolute';
+    this.boardHolder.style.position = 'fixed';
     this.boardHolder.style.width = `${this.width}px`;
     this.boardHolder.style.height = `${this.height}px`;
     this.boardHolder.style.transformOrigin = 'top left';

src/drawboard/Drawboard/index.ts

+import { HotkeysListener, KEY_ALL } from 'fc-hotkeys';
+import * as debounce from 'lodash.debounce';
+
 import { Source } from './../../utils/types';
 import { Baseboard } from './../Baseboard/index';
 import { BaseMarker } from './../../markers/BaseMarker/index';
 import { ToolbarItem } from '../../toolbar/ToolbarItem';
 
 import './index.less';
+import { rectContains } from '../../utils/layout';
+import { RectMarker } from '../../markers/RectMarker/index';
+import { HighlightMarker } from '../../markers/HighlightMarker/index';
+import { CoverMarker } from '../../markers/CoverMarker/index';
+import { LineMarker } from '../../markers/LineMarker/index';
+import { ArrowMarker } from '../../markers/ArrowMarker/index';
+import { TextMarker } from '../../markers/TextMarker/index';
 
 export class Drawboard extends Baseboard {
   /** Options */
+  mountContainer = document.body;
   scale = 1.0;
   zIndex: number = 999;
+  allowKeyboard? = true;
 
   /** 句柄 */
   page: WhitePage;
+  listener: HotkeysListener;
 
   markers: BaseMarker[];
   get markerMap(): { [key: string]: BaseMarker } {
   constructor(
     source: Source,
     {
+      allowKeyboard = true,
+      extraToolbarItems,
+      mountContainer,
       page,
       zIndex,
-      extraToolbarItems,
       onChange
     }: Partial<Drawboard> & { extraToolbarItems?: ToolbarItem[] } = {}
   ) {
       this.zIndex = zIndex;
     }
 
+    this.allowKeyboard = allowKeyboard;
+
     this.markers = [];
     this.activeMarker = null;
 
     if (onChange) {
       this.onChange = onChange;
     }
+
+    if (allowKeyboard && this.page && this.page.mode === 'master') {
+      this.listener = new HotkeysListener();
+      this.listener.on(KEY_ALL, debounce(this.onKeyboard, 150));
+    }
+
+    if (mountContainer) {
+      this.mountContainer = mountContainer;
+    }
   }
 
   /** @region LifeCycle open - hide - show - ... - close */
 
     this.setTargetRect();
 
-    this.initBoard();
+    this.initBoard(this.mountContainer);
     this.attachEvents();
     this.setStyles();
 
     }
   };
 
-  public close = () => {
+  public destroy = () => {
     if (this.toolbarUI) {
-      document.body.removeChild(this.toolbarUI);
+      this.mountContainer.removeChild(this.toolbarUI);
     }
+
     if (this.boardCanvas) {
-      document.body.removeChild(this.boardHolder);
+      this.mountContainer.removeChild(this.boardHolder);
+    }
+
+    if (this.listener) {
+      this.listener.reset();
     }
   };
 
   };
 
   /** 添加某个 Marker */
-  public addMarker = (markerType: typeof BaseMarker, { id }: { id?: string } = {}) => {
+  public addMarker = (
+    markerType: typeof BaseMarker,
+    { id, originX, originY }: { id?: string; originX?: number; originY?: number } = {}
+  ) => {
     // 假如 Drawboard 存在 Page 引用，则传导给 Marker
     const marker = markerType.createMarker(this.page);
 
       }
     }
 
+    this.markers.push(marker);
+    this.selectMarker(marker);
+    this.boardCanvas.appendChild(marker.visual);
+
+    let x;
+    let y;
+
+    if (originX && originY) {
+      x = originX;
+      y = originY;
+    } else {
+      // 默认居中
+      const bbox = marker.visual.getBBox();
+      x = this.width / 2 / this.scale - bbox.width / 2;
+      y = this.height / 2 / this.scale - bbox.height / 2;
+    }
+
     // 触发事件流
     this.onChange({
       target: 'marker',
       parentId: this.page ? this.page.id : this.id,
       event: 'addMarker',
-      marker: { type: marker.type, id: marker.id }
+      marker: { type: marker.type, id: marker.id, dx: x, dy: y }
     });
 
-    this.markers.push(marker);
-    this.selectMarker(marker);
-    this.boardCanvas.appendChild(marker.visual);
-
-    // 默认居中
-    const bbox = marker.visual.getBBox();
-    const x = this.width / 2 / this.scale - bbox.width / 2;
-    const y = this.height / 2 / this.scale - bbox.height / 2;
-
     marker.moveTo(x, y);
 
     return marker;
   };
 
   public deleteActiveMarker = () => {
-    if (this.activeMarker) {
+    this.deleteMarkerWithEvent(this.activeMarker);
+  };
+
+  public clearMarkers = () => {
+    [...this.markers].forEach(marker => {
+      this.deleteMarkerWithEvent(marker);
+    });
+  };
+
+  public deleteMarkerWithEvent = (marker: BaseMarker | null) => {
+    if (marker) {
       // 触发事件
       if (this.onChange) {
         this.onChange({
           event: 'removeMarker',
-          id: this.activeMarker.id,
+          id: marker.id,
           target: 'marker',
-          marker: { id: this.activeMarker.id }
+          marker: { id: marker.id }
         });
       }
-      this.deleteMarker(this.activeMarker);
+      this.deleteMarker(marker);
     }
   };
 
   private setTargetRect = () => {
     const targetRect = this.target.getBoundingClientRect() as DOMRect;
     const bodyRect = document.body.parentElement!.getBoundingClientRect();
+
     this.targetRect = {
       left: targetRect.left - bodyRect.left,
       top: targetRect.top - bodyRect.top
     }
   };
 
+  private onKeyboard = (e: any, { hotkey }: { hotkey: string }) => {
+    switch (hotkey) {
+      case 'Shift+R':
+        this.addMarker(RectMarker);
+        return;
+      case 'Shift+H':
+        this.addMarker(HighlightMarker);
+        return;
+      case 'Shift+C':
+        this.addMarker(CoverMarker);
+        return;
+      case 'Shift+L':
+        this.addMarker(LineMarker);
+        return;
+      case 'Shift+A':
+        this.addMarker(ArrowMarker);
+        return;
+      case 'Shift+T':
+        this.addMarker(TextMarker);
+        return;
+      case 'ESC':
+        this.page.whiteboard!.rollbackSnap();
+        return;
+      default:
+        break;
+    }
+    if (!this.activeMarker) {
+      return;
+    }
+
+    switch (hotkey) {
+      case 'UP':
+        this.activeMarker.move(0, -10);
+        return;
+      case 'LEFT':
+        this.activeMarker.move(-10, 0);
+        return;
+      case 'RIGHT':
+        this.activeMarker.move(10, 0);
+        return;
+      case 'DOWN':
+        this.activeMarker.move(0, 10);
+        return;
+      case 'BACKSPACE':
+        this.deleteActiveMarker();
+        return;
+      default:
+        return;
+    }
+  };
+
   private adjustUI = (ev: UIEvent) => {
     this.adjustSize();
     this.positionUI();
   };
 
   private positionToolbar = () => {
-    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`;
+    if (this.toolbarUI && this.targetRect) {
+      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`;
+    }
   };
 
   private showUI = () => {
     this.toolbar = new Toolbar(this.toolbarItems, this.toolbarClick);
-    this.toolbar.zIndex = this.zIndex;
+    this.toolbar.zIndex = this.zIndex + 1;
 
     this.toolbarUI = this.toolbar.getUI(this);
 
-    document.body.appendChild(this.toolbarUI);
+    this.boardHolder.appendChild(this.toolbarUI);
     this.toolbarUI.style.position = 'absolute';
 
     this.positionToolbar();
+    this.toolbar.show();
 
     // 处理元素的拖拽事件
     this.toolbar.toolbarButtons.forEach(button => {
     this.boardCanvas.ondragover = ev => {
       ev.preventDefault();
     };
+
     this.boardCanvas.ondrop = ev => {
-      console.log(ev);
+      const markerX = ev.x;
+      const markerY = ev.y;
+
+      const rect = this.boardHolder.getBoundingClientRect();
+
+      if (rectContains(rect, { x: markerX, y: markerY })) {
+        const buttonId = ev.dataTransfer!.getData('id');
+
+        const button = this.toolbar.toolbarButtonMap[buttonId];
+
+        if (button.toolbarItem && button.toolbarItem.markerType) {
+          this.addMarker(button.toolbarItem.markerType, {
+            originX: markerX - rect.left,
+            originY: markerY - rect.top
+          });
+        }
+      }
     };
   };
 
   };
 
   private cancel = () => {
-    this.close();
+    this.destroy();
     if (this.onCancel) {
       this.onCancel();
     }
   };
 
   private renderFinishedClose = (dataUrl: string) => {
-    this.close();
+    this.destroy();
     this.onComplete(dataUrl);
   };
 }

src/event/border-events.ts

   // 完全的状态同步，FCW 支持两种状态的同步交换：Snapshot(Snap) 与 KeyActions(KA) 方式
   | 'borderSnap'
   // 下标改变
-  | 'borderChangePage';
+  | 'borderChangePage'
+  // 结束
+  | 'finish';

src/markers/BaseMarker/index.ts

 
     // 如果在拖拽
     if (this.isDragging) {
-      this.onChange({ target: 'marker', id: this.id, event: 'moveMarker', marker: { dx, dy } });
       this.move(dx, dy);
     }
 
     }
   }
 
+  /** 移除该 Marker */
+  public destroy() {
+    this.visual.style.display = 'none';
+  }
+
   protected resize(x: number, y: number, cb?: Function) {
     return;
   }
 
     this.x += dx;
     this.y += dy;
+
+    this.onChange({ target: 'marker', id: this.id, event: 'moveMarker', marker: { dx, dy } });
   };
 
+  /** Move to relative position */
   public moveTo = (x: number, y: number) => {
     const translate = this.visual.transform.baseVal.getItem(0);
     translate.setMatrix(translate.matrix.translate(x - this.x, y - this.y));

src/toolbar/Toolbar.ts

   toolbarUI: HTMLElement;
   toolbarButtons: ToolbarButton[] = [];
 
+  get toolbarButtonMap(): Record<string, ToolbarButton> {
+    const buttonMap = {};
+
+    this.toolbarButtons.forEach(b => {
+      buttonMap[b.id] = b;
+    });
+
+    return buttonMap;
+  }
+
   clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
 
   constructor(
       const toolbarButton = new ToolbarButton(toolbarItem, this.clickHandler);
       toolbarButton.drawboard = drawboard;
       this.toolbarUI.appendChild(toolbarButton.getElement());
-
       this.toolbarButtons.push(toolbarButton);
     }
 
   protected onMouseMove = (ev: MouseEvent) => {};
 
   protected onDragMove = (event: any) => {
-    var target = this.toolbarUI;
+    let target = this.toolbarUI;
 
     // keep the dragged position in the data-x/data-y attributes
-    var x = ((parseFloat(target.getAttribute('data-x') as string) || 0) + event.dx) as any;
-    var y = ((parseFloat(target.getAttribute('data-y') as string) || 0) + event.dy) as any;
+    let x = ((parseFloat(target.getAttribute('data-x') as string) || 0) + event.dx) as any;
+    let y = ((parseFloat(target.getAttribute('data-y') as string) || 0) + event.dy) as any;
 
     // translate the element
     target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+    target.style.zIndex = `${this.zIndex}`;
 
     // update the posiion attributes
     target.setAttribute('data-x', x);

src/toolbar/ToolbarButton.ts

-import { uuid } from './../utils/uuid';
+import tippy from 'tippy.js';
+
 import { ToolbarItem } from './ToolbarItem';
+import { uuid } from '../utils/uuid';
 import { Drawboard } from '../drawboard/Drawboard';
 
 /** 工作栏按钮 */
   }
 
   public getElement = (): HTMLElement => {
+    if (this.toolbarItem.onRender) {
+      this.container = this.toolbarItem.onRender().cloneNode(true) as HTMLDivElement;
+      return this.container;
+    }
+
     const div = document.createElement('div');
 
     if (this.toolbarItem.name !== 'separator') {
       } else {
         div.innerText = this.toolbarItem.tooltipText || '';
       }
+
+      if (this.toolbarItem.tooltipText) {
+        tippy(div, {
+          content: this.toolbarItem.shortcut
+            ? `${this.toolbarItem.tooltipText} ${this.toolbarItem.shortcut}`
+            : this.toolbarItem.tooltipText
+        });
+      }
     } else {
       div.className = 'fc-whiteboard-toolbar-separator';
     }
 
+    div.id = `fc-whiteboard-toolbar-${this.toolbarItem.name}`;
+
     this.container = div;
 
     return div;

src/toolbar/ToolbarItem.ts

 export class ToolbarItem {
   name: string;
   tooltipText?: string;
+  shortcut?: string;
   icon?: string;
   markerType?: typeof BaseMarker;
+  onRender?: () => HTMLDivElement;
   onClick?: () => void;
+
   draggable?: boolean;
 
-  constructor({ name, tooltipText, icon, markerType, onClick, draggable }: Partial<ToolbarItem>) {
+  constructor({
+    name,
+    tooltipText,
+    shortcut,
+    icon,
+    draggable,
+    markerType,
+    onRender,
+    onClick
+  }: Partial<ToolbarItem>) {
     if (!name) {
       throw new Error('Invalid params');
     }
 
     this.name = name;
     this.tooltipText = tooltipText;
+    this.shortcut = shortcut;
     this.icon = icon;
     this.markerType = markerType;
-    this.onClick = onClick;
     this.draggable = draggable;
+
+    this.onClick = onClick;
+    this.onRender = onRender;
   }
 }

src/toolbar/index.less

   border-radius: 13px;
   opacity: 0.9;
   border: 1px solid rgba(230, 236, 247, 1);
+  padding: 0 8px;
 
   display: flex;
   align-items: center;
 .fc-whiteboard-toolbar-button svg {
   height: 16px;
 }
+
+.fc-whiteboard-indicator-container {
+  font-size: 13px;
+  line-height: 27px;
+  height: 27px;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  letter-spacing: 2;
+}

src/toolbar/toolbar-items.ts

 
 const OkIcon = require('../assets/check.svg');
 const DeleteIcon = require('../assets/eraser.svg');
-const PointerIcon = require('../assets/mouse-pointer.svg');
 const CloseIcon = require('../assets/times.svg');
 
 export const dragToolbarItem = new ToolbarItem({
 
 export const highlightMarkerToolbarItem = new ToolbarItem({
   name: 'cover-marker',
-  tooltipText: 'Cover',
+  tooltipText: 'Hightlight',
+  shortcut: 'Shift+H',
   icon: require('../assets/highlight.svg'),
-  markerType: HighlightMarker
+  markerType: HighlightMarker,
+  draggable: true
 });
 
 export const arrowMarkerToolbarItem = new ToolbarItem({
   name: 'arrow-marker',
   tooltipText: 'Arrow',
+  shortcut: 'Shift+A',
   icon: require('../assets/arrow.svg'),
-  markerType: ArrowMarker
+  markerType: ArrowMarker,
+  draggable: true
 });
 
 export const textMarkerToolbarItem = new ToolbarItem({
   name: 'text-marker',
   tooltipText: 'Text',
+  shortcut: 'Shift+T',
   icon: require('../assets/text.svg'),
-  markerType: TextMarker
+  markerType: TextMarker,
+  draggable: true
 });
 
 export const coverMarkerToolbarItem = new ToolbarItem({
   name: 'cover-marker',
   tooltipText: 'Cover',
+  shortcut: 'Shift+C',
   icon: require('../assets/cover.svg'),
-  markerType: CoverMarker
+  markerType: CoverMarker,
+  draggable: true
 });
 
 export const rectMarkerToolbarItem = new ToolbarItem({
   name: 'rect-marker',
   tooltipText: 'Rectangle',
+  shortcut: 'Shift+R',
   icon: require('../assets/rect.svg'),
-  markerType: RectMarker
+  markerType: RectMarker,
+  draggable: true
 });
 
 export const lineMarkerToolbarItem = new ToolbarItem({
   name: 'line-marker',
   tooltipText: 'Line',
+  shortcut: 'Shift+L',
   icon: require('../assets/line.svg'),
-  markerType: LineMarker
+  markerType: LineMarker,
+  draggable: true
 });
 
 export const closeToolbarItem = new ToolbarItem({
 
 export function getToolbars(page?: WhitePage) {
   const toolbars = [
-    {
-      icon: PointerIcon,
-      name: 'pointer',
-      tooltipText: 'Pointer',
-      draggable: true
-    },
+    // {
+    //   icon: PointerIcon,
+    //   name: 'pointer',
+    //   tooltipText: 'Pointer'
+    // },
     {
       icon: DeleteIcon,
       name: 'delete',

src/types.d.ts

 }
 
 declare module 'siema';
+
+declare module 'lodash.debounce';

src/utils/layout.ts

   | 'centerRight'
   | 'topCenter'
   | 'bottomCenter';
+
+/** 判断是否在某个包含的区域呢 */
+export function rectContains(rect: ClientRect, { x, y }: { x: number; y: number }) {
+  if (x < rect.left || x > rect.left + rect.width || y < rect.top || y > rect.top + rect.height) {
+    return false;
+  }
+
+  return true;
+}

src/whiteboard/AbstractWhiteboard/index.less

     height: 100%;
   }
 
+  &-imgs {
+    > div,
+    > div > div {
+      height: 100%;
+    }
+  }
+
   &-img {
     width: 100%;
     height: 100%;
   }
 
+  &-img-wrapper {
+    background-image: url(https://i.postimg.cc/RZwf0MRw/image.png);
+    background-size: contain;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+  }
+
   &-flip-arrow {
     height: 20px;
     width: 20px;

src/whiteboard/AbstractWhiteboard/index.ts

   /** 元素 */
   // 如果传入的是图片地址，则需要挂载到该 Target 元素下
   target: HTMLDivElement;
-  imgEles: HTMLImageElement[] = [];
+  imgEles: HTMLDivElement[] = [];
   imgsContainer: HTMLDivElement;
   pagesContainer: HTMLDivElement;
 
   /** Options */
   // 是否仅同步快照数据，用于弱网状态下
+  allowRollback: boolean = false;
   onlyEmitSnap: boolean = false;
   snapInterval: number = 15 * 1000;
 
     return map;
   }
   siema: any;
+  // 历史快照记录
+  snapHistory: WhiteboardSnap[] = [];
 
   /** State | 内部状态 */
   // 是否被初始化过，如果尚未被初始化，则等待来自于 Master 的同步消息
 
   constructor(
     target: HTMLDivElement,
-    { sources, eventHub, visiblePageIndex, onlyEmitSnap }: Partial<AbstractWhiteboard> = {}
+    {
+      sources,
+      eventHub,
+      visiblePageIndex,
+      allowRollback,
+      onlyEmitSnap
+    }: Partial<AbstractWhiteboard> = {}
   ) {
     if (target) {
       this.target = target;
 
     this.onlyEmitSnap = !!onlyEmitSnap;
 
+    if (typeof allowRollback !== 'undefined') {
+      this.allowRollback = !!allowRollback;
+    }
+
     this.init();
   }
 
       }
     }
 
+    // 判断是否进行了元素的增加或者删除，如果开启了则添加历史记录
+    if (
+      this.allowRollback &&
+      (borderEvent.event === 'addMarker' || borderEvent.event === 'removeMarker')
+    ) {
+      if (this.snapHistory.length > 20) {
+        this.snapHistory.shift();
+      }
+
+      this.snapHistory.push(this.captureSnap(false));
+    }
+
     borderEvent.timestamp = Math.floor(Date.now() / 1000);
     this.eventHub.emit('sync', borderEvent);
   }
     };
   }
 
+  /** 回退到上一个 Snap */
+  public rollbackSnap() {
+    if (this.snapHistory.length === 0) {
+      return;
+    }
+
+    this.snapHistory.pop();
+    const snap = this.snapHistory[this.snapHistory.length - 1];
+
+    if (snap) {
+      this.applySnap(snap);
+    }
+  }
+
+  /** 销毁操作操作 */
+  public destroy(): void {
+    if (this.emitInterval) {
+      clearInterval(this.emitInterval);
+    }
+
+    if (this.eventHub) {
+      this.eventHub.removeAllListeners();
+    }
+
+    if (this.siema) {
+      this.siema.destroy();
+    }
+
+    this.imgsContainer.remove();
+    this.pagesContainer.remove();
+
+    this.pages.forEach(page => {
+      page.destroy();
+    });
+  }
+
   /** 初始化操作 */
   protected abstract init(): void;
 
   protected initSiema() {
     // 初始化所有的占位图片，用于给 Siema 播放使用
     this.sources.forEach(source => {
-      const imgEle = document.createElement('img');
-      addClassName(imgEle, `${prefix}-img`);
-      imgEle.src = source;
-      imgEle.alt = 'Siema image';
+      const imgEle = document.createElement('div');
+      addClassName(imgEle, `${prefix}-img-wrapper`);
+      imgEle.style.backgroundImage = `url(${source})`;
 
       this.imgEles.push(imgEle);
       this.imgsContainer.appendChild(imgEle);
       rtl: false
     });
   }
+
+  protected abstract onPageChange(nextPageIndex: number): void;
+
+  /** 响应获取到的快照事件 */
+  protected applySnap(snap: WhiteboardSnap) {
+    const { id, sources, pageIds } = snap;
+
+    if (!this.isInitialized && !this.isSyncing) {
+      this.id = id;
+      this.sources = sources;
+      this.isSyncing = true;
+
+      // 初始化所有的 WhitePages
+      this.sources.forEach((source, i) => {
+        const page = new WhitePage(
+          { imgSrc: source },
+          {
+            mode: this.mode,
+            whiteboard: this,
+            parentContainer: this.pagesContainer
+          }
+        );
+        page.id = pageIds[i];
+
+        // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
+        page.container.style.visibility = 'hidden';
+
+        this.pages.push(page);
+
+        page.open();
+      });
+
+      this.initSiema();
+      this.isInitialized = true;
+      this.isSyncing = false;
+    }
+
+    // 如果已经初始化完毕，则进行状态同步
+    this.onPageChange(snap.visiblePageIndex);
+
+    // 同步 Pages
+    (snap.pages || []).forEach(pageSnap => {
+      const page = this.pageMap[pageSnap.id];
+
+      if (page) {
+        page.applySnap(pageSnap);
+      }
+    });
+  }
 }

src/whiteboard/MirrorWhiteboard/index.ts

 import { SyncEvent } from '../../event/SyncEvent';
-import { WhitePage } from '../WhitePage/index';
 import { createDivWithClassName } from '../../utils/dom';
-import { WhiteboardSnap } from '../AbstractWhiteboard/snap';
 import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
 import { Mode } from '../../utils/types';
 
           this.onPageChange(ev.border.visiblePageIndex);
         }
       }
+
+      if (ev.event === 'finish' && ev.id === this.id) {
+        this.destroy();
+      }
     });
   }
 
+  public destroy() {
+    super.destroy();
+  }
+
   /** 响应页面切换的事件 */
-  private onPageChange(nextPageIndex: number) {
+  onPageChange(nextPageIndex: number) {
     if (this.visiblePageIndex === nextPageIndex) {
       return;
     }
       border: this.captureSnap()
     });
   }
-
-  /** 响应获取到的快照事件 */
-  private applySnap(snap: WhiteboardSnap) {
-    const { id, sources, pageIds } = snap;
-
-    if (!this.isInitialized && !this.isSyncing) {
-      this.id = id;
-      this.sources = sources;
-      this.isSyncing = true;
-
-      // 初始化所有的 WhitePages
-      this.sources.forEach((source, i) => {
-        const page = new WhitePage(
-          { imgSrc: source },
-          {
-            mode: this.mode,
-            whiteboard: this,
-            parentContainer: this.pagesContainer
-          }
-        );
-        page.id = pageIds[i];
-
-        // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
-        page.container.style.visibility = 'hidden';
-
-        this.pages.push(page);
-
-        page.open();
-      });
-
-      this.initSiema();
-      this.isInitialized = true;
-      this.isSyncing = false;
-    }
-
-    // 如果已经初始化完毕，则进行状态同步
-    this.onPageChange(snap.visiblePageIndex);
-
-    // 同步 Pages
-    (snap.pages || []).forEach(pageSnap => {
-      const page = this.pageMap[pageSnap.id];
-
-      if (page) {
-        page.applySnap(pageSnap);
-      }
-    });
-  }
 }

src/whiteboard/ReplayWhiteboard/index.ts

 import { MirrorWhiteboard } from '../MirrorWhiteboard';
 import { SyncEvent } from '../../event/SyncEvent';
-import { EventHub } from 'fc-whiteboard/src/event/EventHub';
+import { EventHub } from '../../event/EventHub';
 
 // 窗口大小为一分钟
 const windowSize = 60 * 1000;

src/whiteboard/WhitePage/index.ts

 import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
 
 import './index.less';
-import { ToolbarItem } from 'fc-whiteboard/src/toolbar/ToolbarItem';
+import { ToolbarItem } from '../../toolbar/ToolbarItem';
 
 const prefix = 'fcw-page';
 
     }
   }
 
-  /** LifeCycle open - close */
+  /** LifeCycle open - destroy */
   public open() {
     this.drawboard.open();
   }
     this.drawboard.show();
   }
 
-  public close() {
-    this.drawboard.close();
+  public destroy() {
+    this.drawboard.destroy();
   }
 
   /** 生成快照 */
 
   /** 应用快照 */
   public applySnap(snap: WhitepageSnap) {
+    const markerIdsSet = new Set();
+
     snap.markers.forEach(markerSnap => {
       // 判断是否存在，存在则同步，否则创建
       const marker = this.drawboard.markerMap[markerSnap.id];
 
+      markerIdsSet.add(markerSnap.id);
+
+      // 如果存在则直接应用，否则创建新的 Marker
       if (marker) {
         marker.applySnap(markerSnap);
       } else {
         newMarker.applySnap(markerSnap);
       }
     });
+
+    // 移除当前不存在的 Marker
+    this.drawboard.markers.forEach(marker => {
+      if (!markerIdsSet.has(marker.id)) {
+        // 如果不存在该 Marker，则删除
+        this.drawboard.deleteMarkerWithEvent(marker);
+      }
+    });
   }
 
   /** 初始化源 */
       this.drawboard = new Drawboard(
         { imgEle: this.target },
         {
-          page: this,
           extraToolbarItems,
+          mountContainer: this.whiteboard!.target,
+          page: this,
           onChange: ev => this.whiteboard!.emit(ev)
         }
       );
     } else {
-      this.drawboard = new Drawboard({ imgEle: this.target }, { page: this });
+      this.drawboard = new Drawboard(
+        { imgEle: this.target },
+        { page: this, mountContainer: this.whiteboard!.target }
+      );
     }
   }
 
       throw new Error('Invalid whiteboard');
     }
 
-    this.drawboard = new Drawboard({ imgEle: this.target }, { page: this });
+    this.drawboard = new Drawboard(
+      { imgEle: this.target },
+      { page: this, mountContainer: this.whiteboard!.target }
+    );
 
     this.whiteboard!.eventHub!.on('sync', (ev: SyncEvent) => {
       try {
     if (ev.event === 'addMarker' && ev.parentId === this.id) {
       const marker = this.drawboard.markerMap[id!];
       if (!marker) {
-        this.drawboard.addMarker(getMarkerByType(ev.marker.type!), { id: ev.marker.id });
+        this.drawboard.addMarker(getMarkerByType(ev.marker.type!), {
+          id: ev.marker.id,
+          originX: ev.marker.dx,
+          originY: ev.marker.dy
+        });
       }
     }
 

src/whiteboard/Whiteboard/index.ts

+import { ToolbarItem } from './../../toolbar/ToolbarItem';
 import { WhitePage } from '../WhitePage/index';
 import { createDivWithClassName } from '../../utils/dom';
 import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
 
 const LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
 const RightArrowIcon = require('../../assets/bx-right-arrow.svg');
+const FinishIcon = require('../../assets/finish.svg');
+const RollbackIcon = require('../../assets/rollback.svg');
 
 const prefix = 'fcw-board';
 
 export class Whiteboard extends AbstractWhiteboard {
   mode: Mode = 'master';
 
+  /** 销毁操作 */
+  public destroy() {
+    super.destroy();
+  }
+
   /** 初始化操作 */
   protected init() {
     // 为 target 添加子 imgs 容器
 
     this.initMaster();
 
+    // 添加初始化的 Snapshot
+    this.snapHistory.push(this.captureSnap(false));
+
     this.emitSnapshot();
   }
 
   /** 以主模式启动 */
   private initMaster() {
+    this.isInitialized = true;
+
     // 初始化控制节点
     const prevToolbarItem = {
       icon: LeftArrowIcon,
       tooltipText: 'Prev',
       onClick: () => {
         const nextPageIndex =
-          this.visiblePageIndex + 1 > this.pages.length - 1 ? 0 : this.visiblePageIndex + 1;
+          this.visiblePageIndex - 1 < 0 ? this.pages.length - 1 : this.visiblePageIndex - 1;
+
+        document.querySelectorAll('.fc-whiteboard-indicator-current').forEach(e => {
+          e.innerHTML = `${nextPageIndex + 1}`;
+        });
+
         this.onPageChange(nextPageIndex);
       }
     };
 
+    const indicatorContainer = document.createElement('div');
+    indicatorContainer.className = 'fc-whiteboard-indicator-container';
+    const indicatorCurrent = document.createElement('span');
+    indicatorCurrent.className = 'fc-whiteboard-indicator-current';
+    indicatorCurrent.innerHTML = `${this.visiblePageIndex + 1}`;
+
+    indicatorContainer.appendChild(indicatorCurrent);
+    indicatorContainer.appendChild(document.createTextNode(`/${this.sources.length}`));
+
+    const indicatorItem: ToolbarItem = {
+      name: 'indicator',
+      onRender: () => indicatorContainer
+    };
+
     const nextToolbarItem = {
       icon: RightArrowIcon,
       name: 'next-flip-arrow',
       tooltipText: 'Next',
       onClick: () => {
         const nextPageIndex =
-          this.visiblePageIndex - 1 < 0 ? this.pages.length - 1 : this.visiblePageIndex - 1;
+          this.visiblePageIndex + 1 > this.pages.length - 1 ? 0 : this.visiblePageIndex + 1;
+
+        document.querySelectorAll('.fc-whiteboard-indicator-current').forEach(e => {
+          e.innerHTML = `${nextPageIndex + 1}`;
+        });
 
         this.onPageChange(nextPageIndex);
       }
     };
 
+    const finishItem: ToolbarItem = {
+      icon: FinishIcon,
+      name: 'finish',
+      tooltipText: 'Finish',
+      onClick: () => {
+        this.emit({
+          event: 'finish',
+          id: this.id,
+          target: 'whiteboard'
+        });
+      }
+    };
+
+    const rollbackItem: ToolbarItem = {
+      icon: RollbackIcon,
+      name: 'rollback',
+      tooltipText: 'Rollback',
+      shortcut: 'ESC',
+      onClick: () => {
+        this.rollbackSnap();
+      }
+    };
+
     // 初始化所有的 WhitePages
     this.sources.forEach(source => {
       const page = new WhitePage(
           mode: this.mode,
           whiteboard: this,
           parentContainer: this.pagesContainer,
-          extraToolbarItems: [separatorToolbarItem, prevToolbarItem, nextToolbarItem]
+          extraToolbarItems: [
+            separatorToolbarItem,
+            prevToolbarItem,
+            indicatorItem,
+            nextToolbarItem,
+            separatorToolbarItem,
+            finishItem,
+            rollbackItem
+          ]
         }
       );
 
   }
 
   /** 响应页面切换的事件 */
-  private onPageChange(nextPageIndex: number) {
+  onPageChange(nextPageIndex: number) {
     if (this.visiblePageIndex === nextPageIndex) {
       return;
     }

yarn.lock

     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@interactjs/actions@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/actions/download/@interactjs/actions-1.4.9.tgz#be7c71b17e0aa5510a6110a45e33c42382597130"
+  integrity sha1-vnxxsX4KpVEKYRCkXjPEI4JZcTA=
+
+"@interactjs/auto-scroll@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/auto-scroll/download/@interactjs/auto-scroll-1.4.9.tgz#4bafff16d0dfefe699c7547f7a751a8716412e2a"
+  integrity sha1-S6//FtDf7+aZx1R/enUahxZBLio=
+
+"@interactjs/auto-start@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/auto-start/download/@interactjs/auto-start-1.4.9.tgz#acf6178419275ff46f026e2daf01b499d2fde546"
+  integrity sha1-rPYXhBknX/RvAm4trwG0mdL95UY=
+
+"@interactjs/core@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/core/download/@interactjs/core-1.4.9.tgz#85993b67a9839676719f3e80719f0254b417439a"
+  integrity sha1-hZk7Z6mDlnZxnz6AcZ8CVLQXQ5o=
+
+"@interactjs/dev-tools@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/dev-tools/download/@interactjs/dev-tools-1.4.9.tgz#ffd555f956814a93aa12535a38186216aaa55878"
+  integrity sha1-/9VV+VaBSpOqElNaOBhiFqqlWHg=
+  dependencies:
+    "@interactjs/utils" "1.4.9"
+
+"@interactjs/inertia@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/inertia/download/@interactjs/inertia-1.4.9.tgz#9268750f1e04ae0f0e9d111bf3e12c2a05992c26"
+  integrity sha1-kmh1Dx4Erg8OnREb8+EsKgWZLCY=
+
+"@interactjs/interact@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/interact/download/@interactjs/interact-1.4.9.tgz#f0d7fb9555bb552bff421436e651cc2127f88572"
+  integrity sha1-8Nf7lVW7VSv/QhQ25lHMISf4hXI=
+
+"@interactjs/modifiers@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/modifiers/download/@interactjs/modifiers-1.4.9.tgz#9d96f7c72c4b3dab7f99fcfc9b0c50c97a7d80c9"
+  integrity sha1-nZb3xyxLPat/mfz8mwxQyXp9gMk=
+
+"@interactjs/pointer-events@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/pointer-events/download/@interactjs/pointer-events-1.4.9.tgz#1939f0076dcf10f9ca2f6dc1895a0d0bad515887"
+  integrity sha1-GTnwB23PEPnKL23BiVoNC61RWIc=
+
+"@interactjs/reflow@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/reflow/download/@interactjs/reflow-1.4.9.tgz#c4191ccf104049c46e9405593a4d23e0ac3b3db1"
+  integrity sha1-xBkczxBAScRulAVZOk0j4Kw7PbE=
+
+"@interactjs/types@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/types/download/@interactjs/types-1.4.9.tgz#13e25b1ad942071b42af95985f71407d932f8591"
+  integrity sha1-E+JbGtlCBxtCr5WYX3FAfZMvhZE=
+  dependencies:
+    "@interactjs/actions" "1.4.9"
+    "@interactjs/auto-scroll" "1.4.9"
+    "@interactjs/auto-start" "1.4.9"
+    "@interactjs/core" "1.4.9"
+    "@interactjs/dev-tools" "1.4.9"
+    "@interactjs/inertia" "1.4.9"
+    "@interactjs/interact" "1.4.9"
+    "@interactjs/modifiers" "1.4.9"
+    "@interactjs/pointer-events" "1.4.9"
+    "@interactjs/reflow" "1.4.9"
+    "@interactjs/utils" "1.4.9"
+
+"@interactjs/utils@1.4.9":
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/@interactjs/utils/download/@interactjs/utils-1.4.9.tgz#be06d81eae37ceded95205500fbd3f7dd2fdadc5"
+  integrity sha1-vgbYHq43zt7ZUgVQD70/fdL9rcU=
+
 "@lerna/add@3.13.1":
   version "3.13.1"
   resolved "http://registry.npm.taobao.org/@lerna/add/download/@lerna/add-3.13.1.tgz#2cd7838857edb3b43ed73e3c21f69a20beb9b702"
   resolved "http://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
   integrity sha1-CQtNbNvWRe0Qv3UNS1QHlC17oWM=
 
+eventemitter3@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=
+
 events@^3.0.0:
   version "3.0.0"
   resolved "http://registry.npm.taobao.org/events/download/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
   dependencies:
     bser "^2.0.0"
 
+fc-hotkeys@^0.0.1-alpha.1:
+  version "0.0.1-alpha.1"
+  resolved "https://registry.npm.taobao.org/fc-hotkeys/download/fc-hotkeys-0.0.1-alpha.1.tgz#531cf2ffd73cf52ace324e76be2bd5ad4e2e9759"
+  integrity sha1-Uxzy/9c89SrOMk52vivVrU4ul1k=
+  dependencies:
+    eventemitter3 "^3.1.2"
+    interactjs "^1.4.0"
+    mousetrap "^1.6.3"
+    prop-types "^15.7.2"
+    react "^16.8.6"
+    react-dom "^16.8.6"
+    siema "^1.5.1"
+    uuid "^3.3.2"
+
 figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "http://registry.npm.taobao.org/figgy-pudding/download/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
     pify "^3.0.0"
     yargs "^11.0.0"
 
+interactjs@^1.4.0, interactjs@^1.4.9:
+  version "1.4.9"
+  resolved "https://registry.npm.taobao.org/interactjs/download/interactjs-1.4.9.tgz#7fb30c7c1c5befb767e700ebef12acaf22f8e563"
+  integrity sha1-f7MMfBxb77dn5wDr7xKsryL45WM=
+  dependencies:
+    "@interactjs/types" "1.4.9"
+
 internal-ip@^4.2.0:
   version "4.2.0"
   resolved "http://registry.npm.taobao.org/internal-ip/download/internal-ip-4.2.0.tgz#46e81b638d84c338e5c67e42b1a17db67d0814fa"
   resolved "http://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.debounce%2Fdownload%2Flodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.defaults@^3.1.2:
   version "3.1.2"
   resolved "http://registry.npm.taobao.org/lodash.defaults/download/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
     "@most/prelude" "^1.4.0"
     symbol-observable "^1.0.2"
 
+mousetrap@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.npm.taobao.org/mousetrap/download/mousetrap-1.6.3.tgz#80fee49665fd478bccf072c9d46bdf1bfed3558a"
+  integrity sha1-gP7klmX9R4vM8HLJ1GvfG/7TVYo=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
   resolved "http://registry.npm.taobao.org/pn/download/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha1-4vTO8OIZ9GPBeas3Rj5OHs3Muvs=
 
+popper.js@^1.14.7:
+  version "1.15.0"
+  resolved "https://registry.npm.taobao.org/popper.js/download/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+  integrity sha1-VWC5m7rXZH6fqkdca4BWYh9aT/I=
+
 portfinder@^1.0.9:
   version "1.0.20"
   resolved "http://registry.npm.taobao.org/portfinder/download/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
   dependencies:
     read "1"
 
-prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "http://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
     prop-types "^15.6.2"
     scheduler "^0.13.4"
 
+react-dom@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.npm.taobao.org/react-dom/download/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha1-cdYwP2MeiwCX9WFl72CPBR/24Q8=
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 react-hot-loader@^4.6.3:
   version "4.8.0"
   resolved "http://registry.npm.taobao.org/react-hot-loader/download/react-hot-loader-4.8.0.tgz#0b7c7dd9407415e23eb8246fdd28b0b839f54cb6"
     prop-types "^15.6.2"
     scheduler "^0.13.4"
 
+react@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.npm.taobao.org/react/download/react-16.8.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha1-rWw6lhT9Ok6e9REX9U2IjaAfK74=
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 read-cmd-shim@^1.0.1:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/read-cmd-shim/download/read-cmd-shim-1.0.1.tgz#2d5d157786a37c055d22077c32c53f8329e91c7b"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.npm.taobao.org/scheduler/download/scheduler-0.13.6.tgz?cache=0&sync_timestamp=1559596534856&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fscheduler%2Fdownload%2Fscheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha1-RmpOwzJGezGpG5v3TlNHBy5M2Ik=
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.taobao.org/schema-utils/download/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
   resolved "http://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npm.taobao.org/tippy.js/download/tippy.js-4.3.4.tgz#9a91fd5ce8c401f181b7adaa6b2c27f3d105f3ba"
+  integrity sha1-mpH9XOjEAfGBt62qaywn89EF87o=
+  dependencies:
+    popper.js "^1.14.7"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "http://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"