feat: update

src/assets/drag.svg

@@ -0,0 +1 @@
+<?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="1555470391343" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2050" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" id="drag-handler"><defs><style type="text/css"></style></defs><path d="M298.666667 810.666667v-85.333334h85.333333v85.333334H298.666667m170.666666 0v-85.333334h85.333334v85.333334h-85.333334m170.666667 0v-85.333334h85.333333v85.333334h-85.333333m-341.333333-170.666667v-85.333333h85.333333v85.333333H298.666667m170.666666 0v-85.333333h85.333334v85.333333h-85.333334m170.666667 0v-85.333333h85.333333v85.333333h-85.333333m-341.333333-170.666667V384h85.333333v85.333333H298.666667m170.666666 0V384h85.333334v85.333333h-85.333334m170.666667 0V384h85.333333v85.333333h-85.333333M298.666667 298.666667V213.333333h85.333333v85.333334H298.666667m170.666666 0V213.333333h85.333334v85.333334h-85.333334m170.666667 0V213.333333h85.333333v85.333334h-85.333333z" fill="" p-id="2051"></path></svg>

src/drawboard/Baseboard/index.ts

@@ -71,12 +71,4 @@ export class Baseboard {
     this.boardHolder.style.top = this.targetRect.top + 'px';
     this.boardHolder.style.left = this.targetRect.left + 'px';
   };
-
-  protected initEmbeddingToolbar = () => {};
-
-  protected positionEmbeddingToolbar = () => {};
-
-  protected initFloatingToolbar = () => {};
-
-  protected positionFloatingToolbar = () => {};
 }

src/drawboard/Drawboard/index.less

@@ -19,53 +19,6 @@
   fill: #ff8080;
 }
 
-.fc-whiteboard-toolbar {
-  background-color: #cccccc;
-  padding: 0px 5px;
-  margin: 0px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-
-  display: grid;
-  grid-template-columns: repeat(20, auto);
-}
-
-.fc-whiteboard-toolbar-button,
-.fc-whiteboard-toolbar-logo a {
-  display: inline-block;
-  margin: 2px;
-  padding: 3px;
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  border-radius: 2px;
-  border-bottom: transparent solid 1px;
-  border-right: transparent solid 1px;
-
-  fill: #333333;
-
-  display: grid;
-  align-items: center;
-  justify-items: center;
-}
-
-.fc-whiteboard-toolbar-separator {
-  margin: 5px 5px;
-  border: 1px solid #dddddd;
-}
-
-.fc-whiteboard-toolbar-button:hover,
-.fc-whiteboard-toolbar-logo a:hover {
-  background-color: #eeeeee;
-  background: radial-gradient(#eeeeee, #cccccc);
-
-  fill: #ff8080;
-}
-
-.fc-whiteboard-toolbar-button svg {
-  height: 16px;
-}
-
 .fc-whiteboard-text-editor {
   position: fixed;
   z-index: 20000;

src/drawboard/Drawboard/index.ts

@@ -29,8 +29,9 @@ export class Drawboard extends Baseboard {
   }
   activeMarker: BaseMarker | null;
 
+  toolbarItems: ToolbarItem[];
+
   toolbar: Toolbar;
-  toolbars: ToolbarItem[];
   toolbarUI: HTMLElement;
 
   /** 回调 */
@@ -40,7 +41,12 @@ export class Drawboard extends Baseboard {
 
   constructor(
     source: Source,
-    { page, zIndex, onChange }: { page?: WhitePage; zIndex?: number; onChange?: onSyncFunc } = {}
+    {
+      page,
+      zIndex,
+      extraToolbarItems,
+      onChange
+    }: Partial<Drawboard> & { extraToolbarItems?: ToolbarItem[] } = {}
   ) {
     super(source);
 
@@ -54,7 +60,14 @@ export class Drawboard extends Baseboard {
 
     this.markers = [];
     this.activeMarker = null;
-    this.toolbars = getToolbars(page);
+
+    const toolbarItems = getToolbars(page);
+
+    if (extraToolbarItems) {
+      toolbarItems.push(...extraToolbarItems);
+    }
+
+    this.toolbarItems = toolbarItems;
 
     if (onChange) {
       this.onChange = onChange;
@@ -80,7 +93,7 @@ export class Drawboard extends Baseboard {
 
     window.addEventListener('resize', this.adjustUI);
 
-    if (this.page.mode === 'master') {
+    if ((this.page && this.page.mode === 'master') || !this.page) {
       this.showUI();
     }
   };
@@ -263,15 +276,34 @@ export class Drawboard extends Baseboard {
   };
 
   private showUI = () => {
-    this.toolbar = new Toolbar(this.toolbars, this.toolbarClick);
+    this.toolbar = new Toolbar(this.toolbarItems, this.toolbarClick);
     this.toolbar.zIndex = this.zIndex;
 
-    this.toolbarUI = this.toolbar.getUI();
+    this.toolbarUI = this.toolbar.getUI(this);
 
     document.body.appendChild(this.toolbarUI);
     this.toolbarUI.style.position = 'absolute';
 
     this.positionToolbar();
+
+    // 处理元素的拖拽事件
+    this.toolbar.toolbarButtons.forEach(button => {
+      if (button.toolbarItem.draggable) {
+        button.container.draggable = true;
+        button.container.ondragstart = ev => {
+          if (ev) {
+            ev.dataTransfer!.setData('id', button.id);
+          }
+        };
+      }
+    });
+
+    this.boardCanvas.ondragover = ev => {
+      ev.preventDefault();
+    };
+    this.boardCanvas.ondrop = ev => {
+      console.log(ev);
+    };
   };
 
   private setStyles = () => {
@@ -329,8 +361,11 @@ export class Drawboard extends Baseboard {
     this.boardCanvas.appendChild(editorStyleSheet);
   };
 
+  /** 处理 Toolbar 的点击事件 */
   private toolbarClick = (ev: MouseEvent, toolbarItem: ToolbarItem) => {
-    if (toolbarItem.markerType) {
+    if (toolbarItem.onClick) {
+      toolbarItem.onClick();
+    } else if (toolbarItem.markerType) {
       this.addMarker(toolbarItem.markerType);
     } else {
       // command button

src/index.ts

@@ -1,4 +1,9 @@
-export { EventHub } from './event/EventHub';
 export { Drawboard } from './drawboard/Drawboard';
-export { Whiteboard } from './whiteboard/Whiteboard';
+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';

src/markers/ArrowMarker/index.ts

@@ -9,14 +9,14 @@ export class ArrowMarker extends LinearMarker {
   public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new ArrowMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
   private readonly ARROW_SIZE = 6;
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
     SvgHelper.setAttributes(this.visual, [['class', 'arrow-marker']]);
 
     const tip = SvgHelper.createPolygon(

src/markers/BaseMarker/index.ts

@@ -6,8 +6,10 @@ import * as uuid from 'uuid/v1';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
 import { Drawboard } from '../../drawboard/Drawboard/index';
+import { DomEventAware } from '../../renderer/DomEventAware/index';
+import { isNil } from '../../utils/types';
 
-export class BaseMarker {
+export class BaseMarker extends DomEventAware {
   id: string = uuid();
   type: MarkerType = 'base';
   // 归属的 WhitePage
@@ -20,7 +22,7 @@ export class BaseMarker {
   public static createMarker = (page?: WhitePage): BaseMarker => {
     const marker = new BaseMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
@@ -31,36 +33,31 @@ export class BaseMarker {
 
   public defs: SVGElement[] = [];
 
-  x: number = 0;
-  y: number = 0;
   width: number = 200;
   height: number = 50;
 
-  protected isActive: boolean = true;
-  protected isDragging: boolean = false;
-  protected isResizing: boolean = false;
-
-  protected previousMouseX: number = 0;
-  protected previousMouseY: number = 0;
+  isActive: boolean = true;
+  isDragging: boolean = false;
+  isResizing: boolean = false;
 
   public reactToManipulation(
     type: EventType,
     { dx, dy, pos }: { dx?: number; dy?: number; pos?: PositionType } = {}
   ) {
     if (type === 'moveMarker') {
-      if (!dx || !dy) {
+      if (isNil(dx) || isNil(dy)) {
         return;
       }
 
-      this.move(dx, dy);
+      this.move(dx!, dy!);
     }
 
     if (type === 'resizeMarker') {
-      if (!dx || !dy) {
+      if (isNil(dx) || isNil(dy)) {
         return;
       }
 
-      this.resizeByEvent(dx, dy, pos);
+      this.resizeByEvent(dx!, dy!, pos);
     }
   }
 
@@ -163,20 +160,13 @@ export class BaseMarker {
     this.y = y;
   };
 
-  /** Init */
-  protected setup() {
+  /** Init base marker */
+  protected init() {
     this.visual = SvgHelper.createGroup();
     // translate
     this.visual.transform.baseVal.appendItem(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 });
-
+    super.init(this.visual);
     this.renderVisual = SvgHelper.createGroup([['class', 'render-visual']]);
     this.visual.appendChild(this.renderVisual);
   }
@@ -189,49 +179,7 @@ export class BaseMarker {
     this.renderVisual.appendChild(el);
   };
 
-  /** 截获 Touch 事件，并且转发为 Mouse 事件 */
-  protected onTouch(ev: TouchEvent) {
-    ev.preventDefault();
-    const newEvt = document.createEvent('MouseEvents');
-    const touch = ev.changedTouches[0];
-    let 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);
-  }
-
-  private mouseDown = (ev: MouseEvent) => {
+  protected onMouseDown = (ev: MouseEvent) => {
     ev.stopPropagation();
 
     if (this.page && this.page.mode === 'mirror') {
@@ -244,12 +192,12 @@ export class BaseMarker {
     this.previousMouseY = ev.screenY;
   };
 
-  private mouseUp = (ev: MouseEvent) => {
+  protected onMouseUp = (ev: MouseEvent) => {
     ev.stopPropagation();
     this.endManipulation();
   };
 
-  private mouseMove = (ev: MouseEvent) => {
+  protected onMouseMove = (ev: MouseEvent) => {
     ev.stopPropagation();
     this.manipulate(ev);
   };

src/markers/CoverMarker/index.ts

@@ -9,12 +9,12 @@ export class CoverMarker extends RectBaseMarker {
   public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new CoverMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
     SvgHelper.setAttributes(this.visual, [['class', 'cover-marker']]);
   }
 }

src/markers/HighlightMarker/index.ts

@@ -9,12 +9,12 @@ export class HighlightMarker extends RectBaseMarker {
   public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new HighlightMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
     SvgHelper.setAttributes(this.visual, [['class', 'highlight-marker']]);
   }
 }

src/markers/LineMarker/index.ts

@@ -9,12 +9,12 @@ export class LineMarker extends LinearMarker {
   public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new LineMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
     SvgHelper.setAttributes(this.visual, [['class', 'line-marker']]);
   }
 }

src/markers/LinearMarker/index.ts

@@ -13,7 +13,7 @@ export class LinearMarker extends BaseMarker implements LinearBound {
   public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new LinearMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
@@ -78,8 +78,8 @@ export class LinearMarker extends BaseMarker implements LinearBound {
     this.controlBox.style.display = 'none';
   }
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
 
     this.markerBgLine = SvgHelper.createLine(0, 0, this.x2, 0, [
       ['stroke', 'transparent'],
@@ -138,16 +138,13 @@ export class LinearMarker extends BaseMarker implements LinearBound {
     } else {
       this.activeGrip = this.controlGrips.right;
     }
-
     this.resize(x, y);
   }
 
   /** Init */
-
   private addControlBox = () => {
     this.controlBox = SvgHelper.createGroup([['class', 'fc-whiteboard-line-control-box']]);
     this.addToVisual(this.controlBox);
-
     this.addControlGrips();
   };
 
@@ -177,6 +174,10 @@ export class LinearMarker extends BaseMarker implements LinearBound {
     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;
   };
 

src/markers/RectMarker/RectBaseMarker.ts

@@ -8,7 +8,7 @@ export class RectBaseMarker extends RectangularMarker {
   public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new RectBaseMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
@@ -25,8 +25,8 @@ export class RectBaseMarker extends RectangularMarker {
     }
   }
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
 
     this.markerRect = SvgHelper.createRect(this.width, this.height);
     this.addToRenderVisual(this.markerRect);

src/markers/RectMarker/index.ts

@@ -9,12 +9,12 @@ export class RectMarker extends RectBaseMarker {
   public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new RectMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
     SvgHelper.setAttributes(this.visual, [['class', 'rect-marker']]);
   }
 }

src/markers/RectangularMarker/index.ts

@@ -10,7 +10,7 @@ export class RectangularMarker extends BaseMarker {
   public static createMarker = (page?: WhitePage): RectangularMarker => {
     const marker = new RectangularMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
@@ -65,8 +65,8 @@ export class RectangularMarker extends BaseMarker {
     this.controlBox.style.display = 'none';
   }
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
 
     this.addControlBox();
 

src/markers/TextMarker/index.ts

@@ -14,7 +14,7 @@ export class TextMarker extends RectangularMarker {
   public static createMarker = (page?: WhitePage): TextMarker => {
     const marker = new TextMarker();
     marker.page = page;
-    marker.setup();
+    marker.init();
     return marker;
   };
 
@@ -51,8 +51,8 @@ export class TextMarker extends RectangularMarker {
     }
   }
 
-  protected setup() {
-    super.setup();
+  protected init() {
+    super.init();
     this.textElement = SvgHelper.createText();
     this.addToRenderVisual(this.textElement);
     SvgHelper.setAttributes(this.visual, [['class', 'text-marker']]);

src/renderer/DomEventAware/index.ts

@@ -0,0 +1,62 @@
+export abstract class DomEventAware {
+  x: number = 0;
+  y: number = 0;
+  previousMouseX: number = 0;
+  previousMouseY: number = 0;
+
+  protected init(ele: Element) {
+    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 });
+  }
+
+  /** 截获 Touch 事件，并且转发为 Mouse 事件 */
+  protected onTouch(ev: TouchEvent) {
+    ev.preventDefault();
+    const newEvt = document.createEvent('MouseEvents');
+    const touch = ev.changedTouches[0];
+    let 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);
+  }
+
+  protected abstract onMouseDown(ev: MouseEvent): void;
+  protected abstract onMouseUp(ev: MouseEvent): void;
+  protected abstract onMouseMove(ev: MouseEvent): void;
+}

src/toolbar/Toolbar.ts

@@ -1,13 +1,23 @@
+import interact from 'interactjs';
+
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarItem } from './ToolbarItem';
 import { uuid } from '../utils/uuid';
 
-export class Toolbar {
+import './index.less';
+import { DomEventAware } from '../renderer/DomEventAware/index';
+import { dragToolbarItem } from './toolbar-items';
+import { Drawboard } from '../drawboard/Drawboard/index';
+
+export type MouseHandler = (ev: MouseEvent) => void;
+
+export class Toolbar extends DomEventAware {
   id: string = uuid();
   zIndex: number = 999;
 
   toolbarItems: ToolbarItem[];
   toolbarUI: HTMLElement;
+  toolbarButtons: ToolbarButton[] = [];
 
   clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
 
@@ -15,21 +25,32 @@ export class Toolbar {
     toolbarItems: ToolbarItem[],
     clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void
   ) {
-    this.toolbarItems = toolbarItems;
+    super();
+
+    this.toolbarItems = [dragToolbarItem, ...toolbarItems];
     this.clickHandler = clickHandler;
   }
 
   /** 获取 UI 元素 */
-  public getUI = (): HTMLElement => {
+  public getUI = (drawboard: Drawboard): HTMLElement => {
     this.toolbarUI = document.createElement('div');
     this.toolbarUI.id = `fcw-toolbar-${this.id}`;
     this.toolbarUI.className = 'fc-whiteboard-toolbar';
 
     for (const toolbarItem of this.toolbarItems) {
       const toolbarButton = new ToolbarButton(toolbarItem, this.clickHandler);
+      toolbarButton.drawboard = drawboard;
       this.toolbarUI.appendChild(toolbarButton.getElement());
+
+      this.toolbarButtons.push(toolbarButton);
     }
 
+    super.init(this.toolbarUI);
+
+    interact('#drag-handler').draggable({
+      onmove: this.onDragMove
+    });
+
     return this.toolbarUI;
   };
 
@@ -42,4 +63,25 @@ export class Toolbar {
     this.toolbarUI.style.visibility = 'visible';
     this.toolbarUI.style.zIndex = `${this.zIndex}`;
   }
+
+  protected onMouseDown = (downEv: MouseEvent) => {};
+
+  protected onMouseUp = (ev: MouseEvent) => {};
+
+  protected onMouseMove = (ev: MouseEvent) => {};
+
+  protected onDragMove = (event: any) => {
+    var 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;
+
+    // translate the element
+    target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+
+    // update the posiion attributes
+    target.setAttribute('data-x', x);
+    target.setAttribute('data-y', y);
+  };
 }

src/toolbar/ToolbarButton.ts

@@ -1,8 +1,15 @@
+import { uuid } from './../utils/uuid';
 import { ToolbarItem } from './ToolbarItem';
+import { Drawboard } from '../drawboard/Drawboard';
 
+/** 工作栏按钮 */
 export class ToolbarButton {
-  private toolbarItem: ToolbarItem;
-  private clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
+  id = uuid();
+  drawboard: Drawboard;
+  toolbarItem: ToolbarItem;
+  container: HTMLDivElement;
+
+  clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
 
   constructor(
     toolbarItem: ToolbarItem,
@@ -17,8 +24,10 @@ export class ToolbarButton {
 
   public getElement = (): HTMLElement => {
     const div = document.createElement('div');
+
     if (this.toolbarItem.name !== 'separator') {
       div.className = 'fc-whiteboard-toolbar-button';
+
       if (this.clickHandler) {
         div.addEventListener('click', (ev: MouseEvent) => {
           if (this.clickHandler) {
@@ -28,15 +37,17 @@ export class ToolbarButton {
       }
 
       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 || '';
       }
     } else {
       div.className = 'fc-whiteboard-toolbar-separator';
     }
 
+    this.container = div;
+
     return div;
   };
 }

src/toolbar/ToolbarItem.ts

@@ -1,24 +1,24 @@
 import { BaseMarker } from './../markers/BaseMarker/index';
+
+/** 对于工具栏的定义 */
 export class ToolbarItem {
   name: string;
-  tooltipText: string;
+  tooltipText?: string;
   icon?: string;
   markerType?: typeof BaseMarker;
+  onClick?: () => void;
+  draggable?: boolean;
+
+  constructor({ name, tooltipText, icon, markerType, onClick, draggable }: Partial<ToolbarItem>) {
+    if (!name) {
+      throw new Error('Invalid params');
+    }
 
-  constructor({
-    name,
-    tooltipText,
-    icon,
-    markerType
-  }: {
-    name: string;
-    tooltipText: string;
-    icon?: string;
-    markerType?: typeof BaseMarker;
-  }) {
     this.name = name;
     this.tooltipText = tooltipText;
     this.icon = icon;
     this.markerType = markerType;
+    this.onClick = onClick;
+    this.draggable = draggable;
   }
 }

src/toolbar/index.less

@@ -0,0 +1,49 @@
+.fc-whiteboard-toolbar {
+  height: 36px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 9px 0px rgba(194, 185, 187, 0.29);
+  border-radius: 13px;
+  opacity: 0.9;
+  border: 1px solid rgba(230, 236, 247, 1);
+
+  display: flex;
+  align-items: center;
+}
+
+.fc-whiteboard-toolbar-button,
+.fc-whiteboard-toolbar-logo a {
+  display: inline-block;
+  margin: 2px;
+  padding: 3px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  border-bottom: transparent solid 1px;
+  border-right: transparent solid 1px;
+
+  fill: #333333;
+
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.fc-whiteboard-toolbar-separator {
+  width: 0px;
+  height: 20px;
+  margin: 5px 5px;
+  border: 1px solid #cad3df;
+}
+
+.fc-whiteboard-toolbar-button:hover,
+.fc-whiteboard-toolbar-logo a:hover {
+  background-color: #eeeeee;
+  background: radial-gradient(#eeeeee, #cccccc);
+
+  fill: #ff8080;
+}
+
+.fc-whiteboard-toolbar-button svg {
+  height: 16px;
+}

src/toolbar/toolbar-items.ts

@@ -12,6 +12,12 @@ const DeleteIcon = require('../assets/eraser.svg');
 const PointerIcon = require('../assets/mouse-pointer.svg');
 const CloseIcon = require('../assets/times.svg');
 
+export const dragToolbarItem = new ToolbarItem({
+  name: 'drag',
+  tooltipText: 'Drag',
+  icon: require('../assets/drag.svg')
+});
+
 export const highlightMarkerToolbarItem = new ToolbarItem({
   name: 'cover-marker',
   tooltipText: 'Cover',
@@ -54,32 +60,33 @@ export const lineMarkerToolbarItem = new ToolbarItem({
   markerType: LineMarker
 });
 
+export const closeToolbarItem = new ToolbarItem({
+  icon: CloseIcon,
+  name: 'close',
+  tooltipText: 'Close'
+});
+
+export const separatorToolbarItem = new ToolbarItem({ name: 'separator', tooltipText: '' });
+
 export function getToolbars(page?: WhitePage) {
   const toolbars = [
     {
       icon: PointerIcon,
       name: 'pointer',
-      tooltipText: 'Pointer'
+      tooltipText: 'Pointer',
+      draggable: true
     },
     {
       icon: DeleteIcon,
       name: 'delete',
       tooltipText: 'Delete'
     },
-    {
-      name: 'separator',
-      tooltipText: ''
-    },
     rectMarkerToolbarItem,
     coverMarkerToolbarItem,
     highlightMarkerToolbarItem,
     lineMarkerToolbarItem,
     arrowMarkerToolbarItem,
-    textMarkerToolbarItem,
-    {
-      name: 'separator',
-      tooltipText: ''
-    }
+    textMarkerToolbarItem
   ];
 
   if (!page) {
@@ -94,11 +101,5 @@ export function getToolbars(page?: WhitePage) {
     );
   }
 
-  toolbars.push({
-    icon: CloseIcon,
-    name: 'close',
-    tooltipText: 'Close'
-  });
-
   return toolbars;
 }

src/utils/types.ts

@@ -8,3 +8,7 @@ export type Source = {
   // 需要展示的图片地址
   imgSrc?: string;
 };
+
+export function isNil(mayBeNil: any) {
+  return mayBeNil === null || mayBeNil === undefined;
+}

src/whiteboard/AbstractWhiteboard/index.less

@@ -1,4 +1,6 @@
 .fcw-board {
+  position: relative;
+
   // 设置需要元素的绝对布局
   &-imgs,
   &-pages,

src/whiteboard/AbstractWhiteboard/index.ts

@@ -19,6 +19,7 @@ export abstract class AbstractWhiteboard {
   /** 元素 */
   // 如果传入的是图片地址，则需要挂载到该 Target 元素下
   target: HTMLDivElement;
+  imgEles: HTMLImageElement[] = [];
   imgsContainer: HTMLDivElement;
   pagesContainer: HTMLDivElement;
 
@@ -169,6 +170,7 @@ export abstract class AbstractWhiteboard {
       imgEle.src = source;
       imgEle.alt = 'Siema image';
 
+      this.imgEles.push(imgEle);
       this.imgsContainer.appendChild(imgEle);
     });
 

src/whiteboard/MirrorWhiteboard/index.ts

@@ -66,7 +66,7 @@ export class MirrorWhiteboard extends AbstractWhiteboard {
 
   /** 响应获取到的快照事件 */
   private applySnap(snap: WhiteboardSnap) {
-    const { id, sources, pageIds, visiblePageIndex } = snap;
+    const { id, sources, pageIds } = snap;
 
     if (!this.isInitialized && !this.isSyncing) {
       this.id = id;
@@ -96,7 +96,6 @@ export class MirrorWhiteboard extends AbstractWhiteboard {
       this.initSiema();
       this.isInitialized = true;
       this.isSyncing = false;
-      this.onPageChange(visiblePageIndex);
     }
 
     // 如果已经初始化完毕，则进行状态同步

src/whiteboard/ReplayWhiteboard/index.ts

@@ -0,0 +1,119 @@
+import { MirrorWhiteboard } from '../MirrorWhiteboard';
+import { SyncEvent } from '../../event/SyncEvent';
+import { EventHub } from 'fc-whiteboard/src/event/EventHub';
+
+// 窗口大小为一分钟
+const windowSize = 60 * 1000;
+const duration = 0.05;
+
+/** 根据某个时间点，获取一系列的 Event，获取的是绝对时间；这里的 startTime 和 endTime 都是当初记录时候关联的绝对时间 */
+export type onLoadFunc = (startTime: number, endTime: number) => Promise<SyncEvent[]>;
+
+export class ReplayWhiteboard extends MirrorWhiteboard {
+  leftEvents: SyncEvent[] = [];
+
+  // 记录开始时间
+  recordStartTime: number;
+  // 当前的相对时间
+  currentRelativeTime: number = 0;
+  loadedRelativeTime: number = -1;
+
+  // Inner Handler
+  interval: any;
+  loadingLock: boolean = false;
+  seekingLock: boolean = false;
+  onLoad: onLoadFunc;
+
+  /** Getter & Setter */
+  /** 设置录播相关的上下文信息 */
+  setContext(recordStartTime: number, onLoad: onLoadFunc) {
+    this.recordStartTime = recordStartTime;
+    this.onLoad = onLoad;
+
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+
+    this.interval = setInterval(() => {
+      this.seek();
+    }, duration * 1000);
+  }
+
+  setCurrentRelativeTime(time: number) {
+    this.currentRelativeTime = time;
+    this.loadedRelativeTime = this.currentRelativeTime - 1;
+  }
+
+  /** 扩展父类的关闭函数 */
+  close() {
+    super.close();
+
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+
+  protected init() {
+    this.eventHub = new EventHub();
+
+    super.init();
+  }
+
+  /** 加载全部的事件 */
+  private loadEvents() {
+    if (this.onLoad && !this.loadingLock) {
+      this.loadingLock = true;
+
+      const startTime = this.recordStartTime + this.currentRelativeTime;
+      const endTime = startTime + windowSize;
+
+      this.onLoad(startTime, endTime)
+        .then(events => {
+          this.loadedRelativeTime = this.currentRelativeTime;
+          this.leftEvents.push(...(events || []));
+        })
+        .finally(() => {
+          this.loadingLock = false;
+        });
+    }
+  }
+
+  /** 回调，定期更新时间，执行操作 */
+  private seek = () => {
+    if (this.seekingLock) {
+      return;
+    }
+    this.seekingLock = true;
+    // 如果已经进入到了加载完毕的状态，则
+    if (this.loadedRelativeTime < this.currentRelativeTime) {
+      this.loadEvents();
+    }
+
+    // 获取需要回放的 Events，即所有小于当前时间点的 Events
+
+    const waitingEvents: SyncEvent[] = [];
+    const leftEvents: SyncEvent[] = [];
+
+    this.leftEvents.forEach((e, i) => {
+      if (e.timestamp && e.timestamp < this.currentRelativeTime + this.recordStartTime) {
+        waitingEvents.push(e);
+      } else {
+        leftEvents.push(e);
+      }
+    });
+
+    this.leftEvents = leftEvents;
+
+    waitingEvents.forEach(e => {
+      this.perform(e);
+    });
+
+    this.currentRelativeTime += duration;
+    this.seekingLock = false;
+  };
+
+  /** 执行事件回放操作 */
+  private perform = (e: SyncEvent) => {
+    this.eventHub!.emit('sync', e);
+  };
+}

src/whiteboard/WhitePage/index.ts

@@ -9,6 +9,7 @@ import { WhitepageSnap } from '../AbstractWhiteboard/snap';
 import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
 
 import './index.less';
+import { ToolbarItem } from 'fc-whiteboard/src/toolbar/ToolbarItem';
 
 const prefix = 'fcw-page';
 
@@ -34,8 +35,11 @@ export class WhitePage {
     {
       mode,
       whiteboard,
-      parentContainer
-    }: { mode?: Mode; whiteboard?: AbstractWhiteboard; parentContainer?: HTMLDivElement } = {}
+      parentContainer,
+      extraToolbarItems
+    }: Partial<WhitePage> & {
+      extraToolbarItems?: ToolbarItem[];
+    } = {}
   ) {
     if (mode) {
       this.mode = mode;
@@ -46,7 +50,7 @@ export class WhitePage {
     this.initSource(source);
 
     if (this.mode === 'master') {
-      this.initMaster();
+      this.initMaster(extraToolbarItems);
     }
 
     if (this.mode === 'mirror') {
@@ -126,13 +130,14 @@ export class WhitePage {
   }
 
   /** 以 Master 模式启动 */
-  protected initMaster() {
+  protected initMaster(extraToolbarItems?: ToolbarItem[]) {
     if (this.whiteboard) {
       // 对于 WhitePage 中加载的 Drawboard，必须是传入自身可控的 Image 元素
       this.drawboard = new Drawboard(
         { imgEle: this.target },
         {
           page: this,
+          extraToolbarItems,
           onChange: ev => this.whiteboard!.emit(ev)
         }
       );

src/whiteboard/Whiteboard/index.ts

@@ -2,6 +2,7 @@ import { WhitePage } from '../WhitePage/index';
 import { createDivWithClassName } from '../../utils/dom';
 import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
 import { Mode } from '../../utils/types';
+import { separatorToolbarItem } from '../../toolbar/toolbar-items';
 
 const LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
 const RightArrowIcon = require('../../assets/bx-right-arrow.svg');
@@ -25,6 +26,30 @@ export class Whiteboard extends AbstractWhiteboard {
 
   /** 以主模式启动 */
   private initMaster() {
+    // 初始化控制节点
+    const prevToolbarItem = {
+      icon: LeftArrowIcon,
+      name: 'prev-flip-arrow',
+      tooltipText: 'Prev',
+      onClick: () => {
+        const nextPageIndex =
+          this.visiblePageIndex + 1 > this.pages.length - 1 ? 0 : this.visiblePageIndex + 1;
+        this.onPageChange(nextPageIndex);
+      }
+    };
+
+    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.onPageChange(nextPageIndex);
+      }
+    };
+
     // 初始化所有的 WhitePages
     this.sources.forEach(source => {
       const page = new WhitePage(
@@ -32,7 +57,8 @@ export class Whiteboard extends AbstractWhiteboard {
         {
           mode: this.mode,
           whiteboard: this,
-          parentContainer: this.pagesContainer
+          parentContainer: this.pagesContainer,
+          extraToolbarItems: [separatorToolbarItem, prevToolbarItem, nextToolbarItem]
         }
       );
 
@@ -43,27 +69,6 @@ export class Whiteboard extends AbstractWhiteboard {
     });
 
     this.initSiema();
-
-    // 初始化控制节点
-    const controller = createDivWithClassName(`${prefix}-controller`, this.target);
-
-    const prevEle = createDivWithClassName(`${prefix}-flip-arrow`, controller);
-    prevEle.innerHTML = LeftArrowIcon;
-
-    const nextEle = createDivWithClassName(`${prefix}-flip-arrow`, controller);
-    nextEle.innerHTML = RightArrowIcon;
-
-    nextEle!.addEventListener('click', () => {
-      const nextPageIndex =
-        this.visiblePageIndex + 1 > this.pages.length - 1 ? 0 : this.visiblePageIndex + 1;
-      this.onPageChange(nextPageIndex);
-    });
-    prevEle!.addEventListener('click', () => {
-      const nextPageIndex =
-        this.visiblePageIndex - 1 < 0 ? this.pages.length - 1 : this.visiblePageIndex - 1;
-
-      this.onPageChange(nextPageIndex);
-    });
   }
 
   /** 响应页面切换的事件 */