feat: update whiteboard

example/index.ts

@@ -1,19 +1,27 @@
-import { eventHub } from './../src/event/EventHub';
-import { WhitePage } from './../src/board/WhitePage/index';
+import { EventHub } from './../src/event/EventHub';
+import { Whiteboard } from './../src/board/Whiteboard/index';
 
-const page1 = new WhitePage(document.getElementById('image1') as HTMLImageElement, { eventHub });
+const eventHub = new EventHub();
 
-page1.drawboard.show((dataUrl: string) => {
-  const res = document.getElementById('resultImage') as HTMLImageElement;
-  res.src = dataUrl;
-});
+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 page2 = new WhitePage(document.getElementById('image2') as HTMLImageElement, {
-  mode: 'mirror',
+const whiteboard = new Whiteboard(document.getElementById('root') as HTMLDivElement, {
+  sources: images,
   eventHub
 });
 
-page2.drawboard.show((dataUrl: string) => {
-  const res = document.getElementById('resultImage') as HTMLImageElement;
-  res.src = dataUrl;
+whiteboard.open();
+
+const mirrorWhiteboard = new Whiteboard(document.getElementById('root-mirror') as HTMLDivElement, {
+  sources: images,
+  eventHub,
+  mode: 'mirror'
 });
+
+mirrorWhiteboard.open();

example/mirror/index.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,13 @@
+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();

src/assets/bx-left-arrow.svg

@@ -0,0 +1 @@
+<svg t="1553418887330" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2264" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M787.797333 90.197333a42.581333 42.581333 0 0 0-44.074666 2.688l-554.666667 384a42.794667 42.794667 0 0 0 0 70.186667l554.666667 384A42.666667 42.666667 0 0 0 810.666667 896V128a42.666667 42.666667 0 0 0-22.869334-37.802667zM725.333333 814.549333L288.298667 512 725.333333 209.450667v605.098666z" p-id="2265"></path></svg>

src/assets/bx-right-arrow.svg

@@ -0,0 +1 @@
+<svg t="1553418900235" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.202667 933.802667a42.837333 42.837333 0 0 0 44.074666-2.730667l554.666667-384a42.666667 42.666667 0 0 0 0-70.144l-554.666667-384A42.581333 42.581333 0 0 0 213.333333 128v768a42.666667 42.666667 0 0 0 22.869334 37.802667zM298.666667 209.450667L735.701333 512 298.666667 814.549333V209.450667z" p-id="2710"></path></svg>

src/board/Baseboard/index.ts

@@ -0,0 +1,68 @@
+import { uuid } from './../../utils/uuid';
+import { WhitePageSource } from './../types';
+import { SvgHelper } from './../../renderer/SvgHelper/index';
+
+/** 基础的绘制版 */
+export class Baseboard {
+  id: string = uuid();
+
+  /** 元素 */
+  source: WhitePageSource;
+
+  // 目前使用 Image 元素作为输出源
+  target: HTMLImageElement;
+  targetRect: ClientRect;
+
+  boardCanvas: SVGSVGElement;
+  boardHolder: HTMLDivElement;
+  defs: SVGDefsElement;
+
+  width: number;
+  height: number;
+
+  constructor(source: WhitePageSource) {
+    this.source = source;
+
+    if (source.imgEle) {
+      this.target = source.imgEle!;
+
+      // 如果仅传入图片地址或者 Blob，则必须为全屏模式
+      this.width = this.target.clientWidth;
+      this.height = this.target.clientHeight;
+    }
+  }
+
+  protected initBoard = () => {
+    // init holder
+    this.boardHolder = document.createElement('div');
+    this.boardHolder.id = `fcw-board-holder-${this.id}`;
+    // 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);
+
+    // init canvas
+    this.boardCanvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.boardCanvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    this.boardCanvas.setAttribute('width', this.width.toString());
+    this.boardCanvas.setAttribute('height', this.height.toString());
+    this.boardCanvas.setAttribute(
+      'viewBox',
+      '0 0 ' + this.width.toString() + ' ' + this.height.toString()
+    );
+
+    this.boardHolder.style.position = 'absolute';
+    this.boardHolder.style.width = `${this.width}px`;
+    this.boardHolder.style.height = `${this.height}px`;
+    this.boardHolder.style.transformOrigin = 'top left';
+    this.positionBoard();
+    this.defs = SvgHelper.createDefs();
+    this.boardCanvas.appendChild(this.defs);
+    this.boardHolder.appendChild(this.boardCanvas);
+  };
+
+  protected positionBoard = () => {
+    this.boardHolder.style.top = this.targetRect.top + 'px';
+    this.boardHolder.style.left = this.targetRect.left + 'px';
+  };
+}

src/board/Drawboard/index.ts

@@ -1,42 +1,23 @@
+import { WhitePageSource } from './../types';
+import { Baseboard } from './../Baseboard/index';
 import { BaseMarker } from './../../markers/BaseMarker/index';
-import { lineMarkerToolbarItem } from './../../toolbar/toolbar-items';
+import { getToolbars } from './../../toolbar/toolbar-items';
 import { WhitePage } from './../WhitePage/index';
-import { onChangeFunc } from './../../event/Event';
-import { uuid } from './../../utils/uuid';
-import { SvgHelper } from '../../renderer/SvgHelper';
+import { onSyncFunc } from './../../event/Event';
+
 import { Synthetizer } from '../../renderer/Synthetizer';
 import { Toolbar } from '../../toolbar/Toolbar';
 import { ToolbarItem } from '../../toolbar/ToolbarItem';
 
 import './index.less';
-import {
-  arrowMarkerToolbarItem,
-  highlightMarkerToolbarItem,
-  textMarkerToolbarItem,
-  coverMarkerToolbarItem,
-  rectMarkerToolbarItem
-} from '../../toolbar/toolbar-items';
-
-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 class Drawboard {
-  id: string = uuid();
+
+export class Drawboard extends Baseboard {
+  /** Options */
+  private scale = 1.0;
 
   /** 句柄 */
   page: WhitePage;
 
-  private target: HTMLImageElement;
-  private markerImage: SVGSVGElement;
-  private markerImageHolder: HTMLDivElement;
-  private defs: SVGDefsElement;
-
-  private targetRect: ClientRect;
-  private width: number;
-  private height: number;
-
   private markers: BaseMarker[];
   get markerMap(): { [key: string]: BaseMarker } {
     const map = {};
@@ -48,125 +29,107 @@ export class Drawboard {
   private activeMarker: BaseMarker | null;
 
   private toolbar: Toolbar;
+  private toolbars: ToolbarItem[];
   private toolbarUI: HTMLElement;
 
-  private completeCallback: (dataUrl: string) => void;
-  private cancelCallback: () => void;
-  private onChange: onChangeFunc = () => {};
-
-  private toolbars: ToolbarItem[] = [
-    {
-      icon: PointerIcon,
-      name: 'pointer',
-      tooltipText: 'Pointer'
-    },
-    {
-      icon: DeleteIcon,
-      name: 'delete',
-      tooltipText: 'Delete'
-    },
-    {
-      name: 'separator',
-      tooltipText: ''
-    },
-    rectMarkerToolbarItem,
-    coverMarkerToolbarItem,
-    highlightMarkerToolbarItem,
-    lineMarkerToolbarItem,
-    arrowMarkerToolbarItem,
-    textMarkerToolbarItem,
-    {
-      name: 'separator',
-      tooltipText: ''
-    },
-    {
-      icon: OkIcon,
-      name: 'ok',
-      tooltipText: 'OK'
-    },
-    {
-      icon: CloseIcon,
-      name: 'close',
-      tooltipText: 'Close'
-    }
-  ];
-
-  private scale = 1.0;
+  /** 回调 */
+  private onComplete: (dataUrl: string) => void = () => {};
+  private onChange: onSyncFunc = () => {};
+  private onCancel: () => void;
 
   constructor(
-    target: HTMLImageElement,
-    { page, onChange }: { page?: WhitePage; onChange?: onChangeFunc } = {}
+    source: WhitePageSource,
+    { page, onChange }: { page?: WhitePage; onChange?: onSyncFunc } = {}
   ) {
+    super(source);
+
     if (page) {
       this.page = page;
     }
 
-    this.target = target;
-
-    // 如果仅传入图片地址或者 Blob，则必须为全屏模式
-    this.width = target.clientWidth;
-    this.height = target.clientHeight;
-
     this.markers = [];
     this.activeMarker = null;
+    this.toolbars = getToolbars(page);
 
     if (onChange) {
       this.onChange = onChange;
     }
   }
 
-  public show = (completeCallback: (dataUrl: string) => void, cancelCallback?: () => void) => {
-    this.completeCallback = completeCallback;
-
-    if (cancelCallback) {
-      this.cancelCallback = cancelCallback;
+  /** @region LifeCycle open - hide - show - ... - close */
+  /** 打开画板 */
+  public open = (onComplete?: (dataUrl: string) => void, onCancel?: () => void) => {
+    if (onComplete) {
+      this.onComplete = onComplete;
     }
 
-    this.open();
-
-    if (this.page.mode !== 'mirror') {
-      this.showUI();
+    if (onCancel) {
+      this.onCancel = onCancel;
     }
-  };
 
-  public open = () => {
     this.setTargetRect();
 
-    this.initMarkerCanvas();
+    this.initBoard();
     this.attachEvents();
     this.setStyles();
 
     window.addEventListener('resize', this.adjustUI);
+
+    if (this.page.mode === 'master') {
+      this.showUI();
+    }
   };
 
-  public render = (completeCallback: (dataUrl: string) => void, cancelCallback?: () => void) => {
-    this.completeCallback = completeCallback;
+  public hide = () => {
+    if (this.source.imgSrc) {
+      this.target.style.display = 'none';
+    }
+    // 这里不使用 display:none，是为了保证在隐藏时候仍然可以执行更新
+    this.boardHolder.style.opacity = '0';
+    this.boardHolder.style.zIndex = '-1';
+
+    if (this.toolbar) {
+      this.toolbar.hide();
+    }
+  };
 
-    if (cancelCallback) {
-      this.cancelCallback = cancelCallback;
+  public show = () => {
+    if (this.source.imgSrc) {
+      this.target.style.display = 'block';
     }
 
-    this.selectMarker(null);
-    this.startRender(this.renderFinished);
+    this.boardHolder.style.opacity = '1';
+    this.boardHolder.style.zIndex = '9999';
+
+    if (this.toolbar) {
+      this.toolbar.show();
+    }
   };
 
   public close = () => {
     if (this.toolbarUI) {
       document.body.removeChild(this.toolbarUI);
     }
-    if (this.markerImage) {
-      document.body.removeChild(this.markerImageHolder);
+    if (this.boardCanvas) {
+      document.body.removeChild(this.boardHolder);
     }
   };
 
-  public addMarker = (markerType: typeof BaseMarker, { id }: { id?: string } = {}) => {
-    const marker = markerType.createMarker();
+  public render = (onComplete: (dataUrl: string) => void, onCancel?: () => void) => {
+    this.onComplete = onComplete;
 
-    // 假如 Drawboard 存在 Page 引用，则传导给 Marker
-    if (this.page) {
-      marker.page = this.page;
+    if (onCancel) {
+      this.onCancel = onCancel;
     }
 
+    this.selectMarker(null);
+    this.startRender(this.renderFinished);
+  };
+
+  public addMarker = (markerType: typeof BaseMarker, { id }: { id?: string } = {}) => {
+    // 假如 Drawboard 存在 Page 引用，则传导给 Marker
+    const marker = markerType.createMarker(this.page);
+
     if (id) {
       marker.id = id;
     }
@@ -176,7 +139,7 @@ export class Drawboard {
 
     if (marker.defs && marker.defs.length > 0) {
       for (const d of marker.defs) {
-        if (d.id && !this.markerImage.getElementById(d.id)) {
+        if (d.id && !this.boardCanvas.getElementById(d.id)) {
           this.defs.appendChild(d);
         }
       }
@@ -184,8 +147,8 @@ export class Drawboard {
 
     // 触发事件流
     this.onChange({
-      target: 'drawboard',
-      id: this.id,
+      target: 'marker',
+      parentId: this.page ? this.page.id : this.id,
       event: 'add',
       data: { type: marker.type, id: marker.id }
     });
@@ -194,7 +157,7 @@ export class Drawboard {
 
     this.selectMarker(marker);
 
-    this.markerImage.appendChild(marker.visual);
+    this.boardCanvas.appendChild(marker.visual);
 
     const bbox = marker.visual.getBBox();
     const x = this.width / 2 / this.scale - bbox.width / 2;
@@ -207,6 +170,15 @@ export class Drawboard {
 
   public deleteActiveMarker = () => {
     if (this.activeMarker) {
+      // 触发事件
+      if (this.onChange) {
+        this.onChange({
+          event: 'remove',
+          id: this.activeMarker.id,
+          target: 'marker',
+          data: { id: this.activeMarker.id }
+        });
+      }
       this.deleteMarker(this.activeMarker);
     }
   };
@@ -222,13 +194,13 @@ export class Drawboard {
 
   private startRender = (done: (dataUrl: string) => void) => {
     const renderer = new Synthetizer();
-    renderer.rasterize(this.target, this.markerImage, done);
+    renderer.rasterize(this.target, this.boardCanvas, done);
   };
 
   private attachEvents = () => {
-    this.markerImage.addEventListener('mousedown', this.mouseDown);
-    this.markerImage.addEventListener('mousemove', this.mouseMove);
-    this.markerImage.addEventListener('mouseup', this.mouseUp);
+    this.boardCanvas.addEventListener('mousedown', this.mouseDown);
+    this.boardCanvas.addEventListener('mousemove', this.mouseMove);
+    this.boardCanvas.addEventListener('mouseup', this.mouseUp);
   };
 
   private mouseDown = (ev: MouseEvent) => {
@@ -252,35 +224,6 @@ export class Drawboard {
     }
   };
 
-  private initMarkerCanvas = () => {
-    this.markerImageHolder = document.createElement('div');
-    // fix for Edge's touch behavior
-    this.markerImageHolder.style.setProperty('touch-action', 'none');
-    this.markerImageHolder.style.setProperty('-ms-touch-action', 'none');
-
-    this.markerImage = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    this.markerImage.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    this.markerImage.setAttribute('width', this.width.toString());
-    this.markerImage.setAttribute('height', this.height.toString());
-    this.markerImage.setAttribute(
-      'viewBox',
-      '0 0 ' + this.width.toString() + ' ' + this.height.toString()
-    );
-
-    this.markerImageHolder.style.position = 'absolute';
-    this.markerImageHolder.style.width = `${this.width}px`;
-    this.markerImageHolder.style.height = `${this.height}px`;
-    this.markerImageHolder.style.transformOrigin = 'top left';
-    this.positionMarkerImage();
-
-    this.defs = SvgHelper.createDefs();
-    this.markerImage.appendChild(this.defs);
-
-    this.markerImageHolder.appendChild(this.markerImage);
-
-    document.body.appendChild(this.markerImageHolder);
-  };
-
   private adjustUI = (ev: UIEvent) => {
     this.adjustSize();
     this.positionUI();
@@ -290,27 +233,22 @@ export class Drawboard {
     this.width = this.target.clientWidth;
     this.height = this.target.clientHeight;
 
-    const scale = this.target.clientWidth / this.markerImageHolder.clientWidth;
+    const scale = this.target.clientWidth / this.boardHolder.clientWidth;
     if (scale !== 1.0) {
       this.scale *= scale;
-      this.markerImageHolder.style.width = `${this.width}px`;
-      this.markerImageHolder.style.height = `${this.height}px`;
+      this.boardHolder.style.width = `${this.width}px`;
+      this.boardHolder.style.height = `${this.height}px`;
 
-      this.markerImageHolder.style.transform = `scale(${this.scale})`;
+      this.boardHolder.style.transform = `scale(${this.scale})`;
     }
   };
 
   private positionUI = () => {
     this.setTargetRect();
-    this.positionMarkerImage();
+    this.positionBoard();
     this.positionToolbar();
   };
 
-  private positionMarkerImage = () => {
-    this.markerImageHolder.style.top = this.targetRect.top + 'px';
-    this.markerImageHolder.style.left = this.targetRect.left + 'px';
-  };
-
   private positionToolbar = () => {
     this.toolbarUI.style.left = `${this.targetRect.left +
       this.target.offsetWidth -
@@ -378,7 +316,7 @@ export class Drawboard {
             }
         `;
 
-    this.markerImage.appendChild(editorStyleSheet);
+    this.boardCanvas.appendChild(editorStyleSheet);
   };
 
   private toolbarClick = (ev: MouseEvent, toolbarItem: ToolbarItem) => {
@@ -418,8 +356,8 @@ export class Drawboard {
     this.activeMarker = marker;
   };
 
-  private deleteMarker = (marker: BaseMarker) => {
-    this.markerImage.removeChild(marker.visual);
+  public deleteMarker = (marker: BaseMarker) => {
+    this.boardCanvas.removeChild(marker.visual);
     if (this.activeMarker === marker) {
       this.activeMarker = null;
     }
@@ -433,17 +371,17 @@ export class Drawboard {
 
   private cancel = () => {
     this.close();
-    if (this.cancelCallback) {
-      this.cancelCallback();
+    if (this.onCancel) {
+      this.onCancel();
     }
   };
 
   private renderFinished = (dataUrl: string) => {
-    this.completeCallback(dataUrl);
+    this.onComplete(dataUrl);
   };
 
   private renderFinishedClose = (dataUrl: string) => {
     this.close();
-    this.completeCallback(dataUrl);
+    this.onComplete(dataUrl);
   };
 }

src/board/WhitePage/index.less

@@ -0,0 +1,6 @@
+.fcw-page {
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}

src/board/WhitePage/index.ts

@@ -1,58 +1,192 @@
+import { TextMarker } from './../../markers/TextMarker/index';
 import { MarkerType } from './../../markers/types';
-import { ChangeEvent } from './../../event/Event';
+import { SyncEvent } from './../../event/Event';
 import { EventHub } from '../../event/EventHub';
-import { WhiteboardMode } from './../types';
+import { WhiteboardMode, WhitePageSource } from './../types';
 import { Drawboard } from './../Drawboard/index';
 import { uuid } from './../../utils/uuid';
 import { getMarkerByType } from '../../markers/types';
 
+import './index.less';
+import { createDivWithClassName } from 'fc-whiteboard/src/utils/dom';
+
+const prefix = 'fcw-page';
+
 /** 白板中的每一页 */
 export class WhitePage {
   id: string = uuid();
 
-  drawboard: Drawboard;
+  source: WhitePageSource;
+  target: HTMLImageElement;
+
+  /** UI Options */
+  container: HTMLDivElement;
+  // 父容器指针
+  parentContainer?: HTMLDivElement;
   mode: WhiteboardMode = 'master';
 
+  /** Handlers */
+  drawboard: Drawboard;
+  eventHub?: EventHub;
+
   constructor(
-    target: HTMLImageElement,
-    { mode, eventHub }: { mode?: WhiteboardMode; eventHub?: EventHub } = {}
+    source: WhitePageSource,
+    {
+      mode,
+      eventHub,
+      parentContainer
+    }: { mode?: WhiteboardMode; eventHub?: EventHub; parentContainer?: HTMLDivElement } = {}
   ) {
     if (mode) {
       this.mode = mode;
     }
+    this.eventHub = eventHub;
+    this.parentContainer = parentContainer;
+
+    this.initSource(source);
 
     if (this.mode === 'master') {
-      if (eventHub) {
-        this.drawboard = new Drawboard(target, {
-          page: this,
-          onChange: ev => eventHub.emit('change', ev)
-        });
-      } else {
-        this.drawboard = new Drawboard(target, { page: this });
-      }
+      this.initMaster();
     }
 
     if (this.mode === 'mirror') {
-      if (!eventHub) {
-        throw new Error('Invalid eventHub');
-      }
+      this.initMirror();
+    }
+  }
+
+  /** LifeCycle open - close */
+  public open() {
+    this.drawboard.open();
+  }
+
+  public hide() {
+    this.drawboard.hide();
+  }
+
+  public show() {
+    this.drawboard.show();
+  }
+
+  public close() {
+    this.drawboard.close();
+  }
+
+  /** 初始化源 */
+  private initSource(source: WhitePageSource) {
+    // 判断 Source 的类型是否符合要求
+    if (typeof source.imgSrc === 'string' && !this.parentContainer) {
+      throw new Error('Invalid source, If you set image url, you must also set parentContainer');
+    }
+
+    this.source = source;
+
+    // 如果传入的 imgEle，则直接使用
+    if (source.imgEle) {
+      this.target = source.imgEle!;
+    }
+
+    // 如果是图片，则需要创建 Image 元素
+    if (typeof source.imgSrc === 'string') {
+      this.container = createDivWithClassName(prefix, this.parentContainer!);
+      this.container.id = this.id;
+
+      this.target = document.createElement('img');
+      this.target.src = source.imgSrc;
+      this.target.alt = 'Siema image';
+
+      this.container.appendChild(this.target);
+    }
+  }
+
+  /** 以 Master 模式启动 */
+  protected initMaster() {
+    if (this.eventHub) {
+      // 对于 WhitePage 中加载的 Drawboard，必须是传入自身可控的 Image 元素
+      this.drawboard = new Drawboard(
+        { imgEle: this.target },
+        {
+          page: this,
+          onChange: ev => this.eventHub!.emit('sync', ev)
+        }
+      );
+    } else {
+      this.drawboard = new Drawboard({ imgEle: this.target }, { page: this });
+    }
+  }
 
-      this.drawboard = new Drawboard(target, { page: this });
+  /** 以 Mirror 模式启动 */
+  protected initMirror() {
+    if (!this.eventHub) {
+      throw new Error('Invalid eventHub');
+    }
+
+    this.drawboard = new Drawboard({ imgEle: this.target }, { page: this });
 
-      eventHub.on('change', (ev: ChangeEvent) => {
-        if (ev.event === 'add') {
-          const data: { id: string; type: MarkerType } = ev.data as {
-            id: string;
-            type: MarkerType;
-          };
-          this.drawboard.addMarker(getMarkerByType(data.type), { id: data.id });
+    this.eventHub.on('sync', (ev: SyncEvent) => {
+      try {
+        // 判断是否为 WhitePage 的同步
+        if (ev.target === 'page' && ev.id === this.id) {
+          this.onPageSync();
         }
 
-        if (ev.event === 'move' || ev.event === 'resize') {
-          const marker = this.drawboard.markerMap[ev.id];
-          marker.reactToManipulation(ev.event, ev.data as any);
+        // 处理 Marker 的同步事件
+        if (ev.target === 'marker') {
+          this.onMarkerSync(ev);
         }
-      });
+      } catch (e) {
+        console.warn(e);
+      }
+    });
+  }
+
+  /** 处理 Page 的同步事件 */
+  private onPageSync() {}
+
+  /** 处理 Marker 的同步事件 */
+  private onMarkerSync(ev: SyncEvent) {
+    if (ev.event === 'add' && ev.parentId === this.id) {
+      const data: { id: string; type: MarkerType } = ev.data as {
+        id: string;
+        type: MarkerType;
+      };
+
+      // 这里判断该 Marker 是否已经添加过；如果已经存在则忽略
+      const marker = this.drawboard.markerMap[data.id];
+      if (!marker) {
+        this.drawboard.addMarker(getMarkerByType(data.type), { id: data.id });
+      }
+    }
+
+    // 其余的情况，不存在 id 则直接返回空
+    if (!ev.id) {
+      return;
+    }
+
+    if (ev.event === 'remove') {
+      const data: { id: string } = ev.data as {
+        id: string;
+      };
+
+      const marker = this.drawboard.markerMap[data.id];
+      if (marker) {
+        this.drawboard.deleteMarker(marker);
+      }
+    }
+
+    if (ev.event === 'move' || ev.event === 'resize') {
+      const marker = this.drawboard.markerMap[ev.id];
+
+      if (marker) {
+        marker.reactToManipulation(ev.event, ev.data as any);
+      }
+    }
+
+    // 响应文本变化事件
+    if (ev.event === 'changeText') {
+      const marker = this.drawboard.markerMap[ev.id] as TextMarker;
+      if (marker) {
+        marker.setText(ev.data as string);
+      }
     }
   }
 }

src/board/Whiteboard/index.less

@@ -0,0 +1,39 @@
+.fcw-board {
+  // 设置需要元素的绝对布局
+  &-imgs,
+  &-pages,
+  .fcw-page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-flip-arrow {
+    height: 20px;
+    width: 20px;
+
+    cursor: pointer;
+  }
+
+  &-controller {
+    position: absolute;
+    display: flex;
+    width: 50px;
+    height: 30px;
+    justify-content: space-between;
+    align-items: center;
+    top: -30px;
+    background-color: #cccccc;
+    padding: 0px 5px;
+    margin: 0px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+}

src/board/Whiteboard/index.ts

@@ -1,15 +1,320 @@
-import { WhiteboardMode, WhitePageSource } from '../types';
+import { SyncEvent } from './../../event/Event';
+import * as Siema from 'siema';
+
+import { WhiteboardMode } from '../types';
+import { WhitePage } from '../WhitePage/index';
+import { EventHub } from '../../event/EventHub';
+import { uuid } from '../../utils/uuid';
+import { addClassName, createDivWithClassName } from '../../utils/dom';
+
+import './index.less';
+
+const LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
+const RightArrowIcon = require('../../assets/bx-right-arrow.svg');
+
+const prefix = 'fcw-board';
+
+export class SerializableWhiteboard {
+  id: string;
+  sources: string[];
+  pageIds: string[];
+  visiblePageIndex: number;
+}
 
 export class Whiteboard {
-  mode: WhiteboardMode = 'master';
-  sources: WhitePageSource[] = [];
+  id: string = uuid();
+  sources: string[] = [];
 
-  /** @region UI Options */
+  /** 元素 */
+  // 如果传入的是图片地址，则需要挂载到该 Target 元素下
+  target: HTMLDivElement;
+  imgsContainer: HTMLDivElement;
+  pagesContainer: HTMLDivElement;
+
+  /** UI Options */
+  // 事件中心
+  eventHub?: EventHub;
+  // 编辑模式
+  mode: WhiteboardMode = 'master';
   // 是否为全屏模式
   isFullscreen: boolean = false;
 
-  constructor() {}
+  /** 句柄 */
+  pages: WhitePage[] = [];
+  siema: any;
+
+  /** State | 内部状态 */
+  // 是否被初始化过，如果尚未被初始化，则等待来自于 Master 的同步消息
+  isInitialized: boolean = false;
+  visiblePageIndex: number = 0;
+  emitInterval: any;
+
+  constructor(
+    target: HTMLDivElement,
+    {
+      sources,
+      eventHub,
+      mode,
+      visiblePageIndex
+    }: {
+      sources?: string[];
+      eventHub?: EventHub;
+      mode?: WhiteboardMode;
+      visiblePageIndex?: number;
+    } = {}
+  ) {
+    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;
+    }
+
+    addClassName(this.target, prefix);
+
+    if (sources) {
+      this.sources = sources;
+    }
+
+    this.eventHub = eventHub;
+
+    if (mode) {
+      this.mode = mode;
+    }
+
+    // set inner state
+    if (typeof visiblePageIndex !== 'undefined') {
+      this.visiblePageIndex = visiblePageIndex;
+    }
+
+    this.init();
+  }
+
+  /** LifeCycle */
+  public open() {
+    // 依次渲染所有的页，隐藏非当前页之外的其他页
+    this.pages.forEach((page, i) => {
+      page.open();
+
+      if (i !== this.visiblePageIndex) {
+        page.hide();
+      }
+    });
+  }
+
+  /** 关闭当前的 Whiteboard */
+  public close() {
+    if (this.emitInterval) {
+      clearInterval(this.emitInterval);
+    }
+  }
+
+  /** 获取当前快照 */
+  public snap(): SerializableWhiteboard {
+    return {
+      id: this.id,
+      sources: this.sources,
+      pageIds: this.pages.map(page => page.id),
+      visiblePageIndex: this.visiblePageIndex
+    };
+  }
 
   /** 初始化操作 */
-  init() {}
+  private init() {
+    // 为 target 添加子 imgs 容器
+    this.imgsContainer = createDivWithClassName(`${prefix}-imgs`, this.target);
+    // 为 target 添加子 pages 容器
+    this.pagesContainer = createDivWithClassName(`${prefix}-pages`, this.target);
+
+    if (this.mode === 'master') {
+      this.initMaster();
+
+      this.emitSnapshot();
+    }
+
+    if (this.mode === 'mirror') {
+      this.initMirror();
+    }
+  }
+
+  /** 以主模式启动 */
+  private initMaster() {
+    // 初始化所有的 WhitePages
+    this.sources.forEach(source => {
+      const page = new WhitePage(
+        { imgSrc: source },
+        {
+          mode: this.mode,
+          eventHub: this.eventHub,
+          parentContainer: this.pagesContainer
+        }
+      );
+
+      // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
+      page.container.style.opacity = '0';
+
+      this.pages.push(page);
+    });
+
+    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);
+    });
+  }
+
+  /** 以镜像模式启动 */
+  private initMirror() {
+    if (!this.eventHub) {
+      throw new Error('Invalid eventHub');
+    }
+
+    this.eventHub.on('sync', (ev: SyncEvent) => {
+      if (ev.target !== 'whiteboard') {
+        return;
+      }
+
+      if (ev.event === 'snap') {
+        // 如果已经初始化完毕，则直接跳过
+        if (this.isInitialized) {
+          return;
+        }
+
+        this.onSnapshot(ev.data as SerializableWhiteboard);
+      }
+
+      if (ev.event === 'changeIndex' && ev.id === this.id) {
+        if (this.isInitialized) {
+          this.onPageChange(ev.data as number);
+        }
+      }
+    });
+  }
+
+  /** 初始化 Siema */
+  private initSiema() {
+    // 初始化所有的占位图片，用于给 Siema 播放使用
+    this.sources.forEach(source => {
+      const imgEle = document.createElement('img');
+      addClassName(imgEle, `${prefix}-img`);
+      imgEle.src = source;
+      imgEle.alt = 'Siema image';
+
+      this.imgsContainer.appendChild(imgEle);
+    });
+
+    // 初始化 Siema，并且添加控制节点
+    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
+    });
+  }
+
+  /** 响应页面切换的事件 */
+  private onPageChange(nextPageIndex: number) {
+    this.siema.goTo(nextPageIndex);
+    this.visiblePageIndex = nextPageIndex;
+
+    // 将所有的 Page 隐藏
+    this.pages.forEach((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
+      });
+    }
+  }
+
+  private emitSnapshot() {
+    const innerFunc = () => {
+      if (this.eventHub) {
+        this.eventHub.emit('sync', {
+          event: 'snap',
+          id: this.id,
+          target: 'whiteboard',
+          data: this.snap()
+        });
+      }
+    };
+
+    // 定期触发事件
+    this.emitInterval = setInterval(() => {
+      innerFunc();
+    }, 5 * 1000);
+
+    // 首次事件，延时 500ms 发出
+    setTimeout(innerFunc, 500);
+  }
+
+  /** 响应获取到的快照事件 */
+  private onSnapshot(snap: SerializableWhiteboard) {
+    const { id, sources, pageIds, visiblePageIndex } = snap;
+
+    if (!this.isInitialized) {
+      this.id = id;
+      this.sources = sources;
+      this.initSiema();
+
+      // 初始化所有的 WhitePages
+      this.sources.forEach((source, i) => {
+        const page = new WhitePage(
+          { imgSrc: source },
+          {
+            mode: this.mode,
+            eventHub: this.eventHub,
+            parentContainer: this.pagesContainer
+          }
+        );
+        page.id = pageIds[i];
+
+        // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
+        page.container.style.opacity = '0';
+
+        this.pages.push(page);
+
+        page.open();
+      });
+    }
+
+    this.isInitialized = true;
+    this.onPageChange(visiblePageIndex);
+  }
 }

src/board/types.ts

@@ -1,6 +1,10 @@
 // 是主动绘制模式，还是镜像模式
 export type WhiteboardMode = 'master' | 'mirror';
 
-export type RenderCallback = (container: HTMLElement) => void;
+export type WhitePageSource = {
+  // 需要展示的图片元素
+  imgEle?: HTMLImageElement;
 
-export type WhitePageSource = string | RenderCallback;
+  // 需要展示的图片地址
+  imgSrc?: string;
+};

src/event/Event.ts

@@ -1,5 +1,19 @@
-export type TargetType = 'page' | 'drawboard' | 'marker';
-export type EventType = 'add' | 'resize' | 'move' | 'remove';
+export type TargetType = 'whiteboard' | 'page' | 'marker';
+export type EventType =
+  // 完全的状态同步，FCW 支持两种状态的同步交换：Snapshot(Snap) 与 KeyActions(KA) 方式
+  | 'snap'
+  // 添加
+  | 'add'
+  // 尺寸重置
+  | 'resize'
+  // 移动
+  | 'move'
+  // 移除
+  | 'remove'
+  // 下标改变
+  | 'changeIndex'
+  // 文本改变
+  | 'changeText';
 export type PositionType =
   | 'left'
   | 'right'
@@ -12,11 +26,12 @@ export type PositionType =
   | 'topCenter'
   | 'bottomCenter';
 
-export interface ChangeEvent {
+export interface SyncEvent {
   target: TargetType;
-  id: string;
+  id?: string;
+  parentId?: string;
   event: EventType;
-  data?: object | string;
+  data?: object | string | number;
 }
 
-export type onChangeFunc = (ev: ChangeEvent) => void;
+export type onSyncFunc = (ev: SyncEvent) => void;

src/event/EventHub.ts

@@ -1,10 +1,3 @@
-import { ChangeEvent } from './Event';
 import * as EventEmitter from 'eventemitter3';
 
-export class EventHub extends EventEmitter<'change'> {}
-
-export const eventHub = new EventHub();
-
-eventHub.on('change', (changeEv: ChangeEvent) => {
-  console.log(changeEv);
-});
+export class EventHub extends EventEmitter<'sync'> {}

src/markers/ArrowMarker/index.ts

@@ -1,12 +1,14 @@
 import { MarkerType } from './../types';
 import { LinearMarker } from '../LinearMarker';
 import { SvgHelper } from 'fc-whiteboard/src/renderer/SvgHelper';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 export class ArrowMarker extends LinearMarker {
   type: MarkerType = 'arrow';
 
-  public static createMarker = (): LinearMarker => {
+  public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new ArrowMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };

src/markers/BaseMarker/index.ts

@@ -1,6 +1,6 @@
 import { WhitePage } from './../../board/WhitePage/index';
 import { PositionType } from 'fc-whiteboard/src/event/Event';
-import { onChangeFunc, EventType } from '../../event/Event';
+import { onSyncFunc, EventType } from '../../event/Event';
 import { MarkerType } from '../types';
 import * as uuid from 'uuid/v1';
 import { SvgHelper } from '../../renderer/SvgHelper';
@@ -9,12 +9,13 @@ export class BaseMarker {
   id: string = uuid();
   type: MarkerType = 'base';
   // 归属的
-  page: WhitePage;
+  page?: WhitePage;
   // Marker 的属性发生变化后的回调
-  onChange: onChangeFunc = () => {};
+  onChange: onSyncFunc = () => {};
 
-  public static createMarker = (): BaseMarker => {
+  public static createMarker = (page?: WhitePage): BaseMarker => {
     const marker = new BaseMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };
@@ -30,13 +31,12 @@ export class BaseMarker {
   protected height: number = 50;
 
   protected isActive: boolean = true;
+  protected isDragging: boolean = false;
   protected isResizing: boolean = false;
 
   protected previousMouseX: number = 0;
   protected previousMouseY: number = 0;
 
-  private isDragging: boolean = false;
-
   public reactToManipulation(
     type: EventType,
     { dx, dy, pos }: { dx: number; dy: number; pos: PositionType }
@@ -50,6 +50,7 @@ export class BaseMarker {
     }
   }
 
+  /** 响应元素视图状态变化 */
   public manipulate = (ev: MouseEvent) => {
     const scale = this.visual.getScreenCTM()!.a;
     const dx = (ev.screenX - this.previousMouseX) / scale;
@@ -165,6 +166,11 @@ export class BaseMarker {
 
   private mouseDown = (ev: MouseEvent) => {
     ev.stopPropagation();
+
+    if (this.page && this.page.mode === 'mirror') {
+      return;
+    }
+
     this.select();
     this.isDragging = true;
     this.previousMouseX = ev.screenX;

src/markers/CoverMarker/index.ts

@@ -1,12 +1,14 @@
 import { MarkerType } from './../types';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 export class CoverMarker extends RectBaseMarker {
   type: MarkerType = 'cover';
 
-  public static createMarker = (): RectBaseMarker => {
+  public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new CoverMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };

src/markers/HighlightMarker/index.ts

@@ -1,12 +1,14 @@
 import { MarkerType } from './../types';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 export class HighlightMarker extends RectBaseMarker {
   type: MarkerType = 'highlight';
 
-  public static createMarker = (): RectBaseMarker => {
+  public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new HighlightMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };

src/markers/LineMarker/index.ts

@@ -1,12 +1,14 @@
 import { MarkerType } from './../types';
 import { LinearMarker } from '../LinearMarker';
 import { SvgHelper } from './../../renderer/SvgHelper/index';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 export class LineMarker extends LinearMarker {
   type: MarkerType = 'line';
 
-  public static createMarker = (): LinearMarker => {
+  public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new LineMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };

src/markers/LinearMarker/index.ts

@@ -1,11 +1,13 @@
+import { WhitePage } from './../../board/WhitePage/index';
 import { BaseMarker } from '../BaseMarker';
 import { ResizeGrip } from '../BaseMarker/ResizeGrip';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { PositionType } from 'fc-whiteboard/src/event/Event';
 
 export class LinearMarker extends BaseMarker {
-  public static createMarker = (): LinearMarker => {
+  public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new LinearMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };
@@ -54,6 +56,10 @@ export class LinearMarker extends BaseMarker {
     this.addToRenderVisual(this.markerLine);
 
     this.addControlBox();
+
+    if (this.page && this.page.mode === 'mirror') {
+      this.controlBox.style.display = 'none';
+    }
   }
 
   protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void) {

src/markers/RectMarker/RectBaseMarker.ts

@@ -1,10 +1,12 @@
 import { PositionType } from '../../event/Event';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { RectangularMarker } from '../RectangularMarker';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 export class RectBaseMarker extends RectangularMarker {
-  public static createMarker = (): RectBaseMarker => {
+  public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new RectBaseMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };

src/markers/RectMarker/index.ts

@@ -1,3 +1,4 @@
+import { WhitePage } from './../../board/WhitePage/index';
 import { MarkerType } from './../types';
 import { RectBaseMarker } from './RectBaseMarker';
 import { SvgHelper } from 'fc-whiteboard/src/renderer/SvgHelper';
@@ -5,8 +6,9 @@ import { SvgHelper } from 'fc-whiteboard/src/renderer/SvgHelper';
 export class RectMarker extends RectBaseMarker {
   type: MarkerType = 'rect';
 
-  public static createMarker = (): RectBaseMarker => {
+  public static createMarker = (page?: WhitePage): RectBaseMarker => {
     const marker = new RectMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };

src/markers/RectangularMarker/index.ts

@@ -3,10 +3,12 @@ import { BaseMarker } from '../BaseMarker';
 import { ResizeGrip } from '../BaseMarker/ResizeGrip';
 import { PositionType } from '../../event/Event';
 import { SvgHelper } from '../../renderer/SvgHelper';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 export class RectangularMarker extends BaseMarker {
-  public static createMarker = (): RectangularMarker => {
+  public static createMarker = (page?: WhitePage): RectangularMarker => {
     const marker = new RectangularMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };
@@ -40,6 +42,10 @@ export class RectangularMarker extends BaseMarker {
     super.setup();
 
     this.addControlBox();
+
+    if (this.page && this.page.mode === 'mirror') {
+      this.controlBox.style.display = 'none';
+    }
   }
 
   protected resizeByEvent(x: number, y: number, pos: PositionType) {

src/markers/TextMarker/index.ts

@@ -1,6 +1,8 @@
 import { MarkerType } from '../types';
 import { RectangularMarker } from '../RectangularMarker';
 import { SvgHelper } from '../../renderer/SvgHelper';
+import { PositionType } from 'fc-whiteboard/src/event/Event';
+import { WhitePage } from 'fc-whiteboard/src/board/WhitePage';
 
 const OkIcon = require('../../assets/check.svg');
 const CancelIcon = require('../../assets/times.svg');
@@ -8,12 +10,19 @@ const CancelIcon = require('../../assets/times.svg');
 export class TextMarker extends RectangularMarker {
   type: MarkerType = 'text';
 
-  public static createMarker = (): TextMarker => {
+  public static createMarker = (page?: WhitePage): TextMarker => {
     const marker = new TextMarker();
+    marker.page = page;
     marker.setup();
     return marker;
   };
 
+  /** 设置文本 */
+  public setText(text: string) {
+    this.text = text;
+    this.renderText();
+  }
+
   protected readonly MIN_SIZE = 50;
 
   private readonly DEFAULT_TEXT = 'Double-click to edit text';
@@ -41,8 +50,9 @@ export class TextMarker extends RectangularMarker {
     this.visual.addEventListener('touchstart', this.onTap);
   }
 
-  protected resize(x: number, y: number) {
-    super.resize(x, y);
+  protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void) {
+    super.resize(x, y, onPosition);
+
     this.sizeText();
   }
 
@@ -128,12 +138,17 @@ export class TextMarker extends RectangularMarker {
     buttons.appendChild(cancelButton);
   };
 
+  /** 响应文本输入的事件 */
   private onEditorOkClick = (ev: MouseEvent | null) => {
     if (this.editorTextArea.value.trim()) {
       this.text = this.editorTextArea.value;
     } else {
       this.text = this.DEFAULT_TEXT;
     }
+
+    // 触发文本修改时间
+    this.onChange({ target: 'marker', id: this.id, event: 'changeText', data: this.text });
+
     this.renderText();
     this.closeEditor();
   };

src/markers/types.ts

@@ -1,3 +1,4 @@
+import { HighlightMarker } from './HighlightMarker/index';
 import { TextMarker } from './TextMarker/index';
 import { ArrowMarker } from './ArrowMarker/index';
 import { BaseMarker } from './BaseMarker/index';
@@ -9,12 +10,14 @@ export type MarkerType = 'base' | 'arrow' | 'cover' | 'line' | 'rect' | 'text' |
 
 export function getMarkerByType(type: MarkerType): typeof BaseMarker {
   switch (type) {
-    case 'base':
-      return BaseMarker;
     case 'arrow':
       return ArrowMarker;
+    case 'base':
+      return BaseMarker;
     case 'cover':
       return CoverMarker;
+    case 'highlight':
+      return HighlightMarker;
     case 'line':
       return LineMarker;
     case 'rect':

src/renderer/Synthetizer/index.ts

@@ -1,9 +1,16 @@
+import { isHTMLImageElement } from 'fc-whiteboard/src/utils/validator';
+
+/** 图片导出 */
 export class Synthetizer {
   public rasterize(
-    target: HTMLImageElement,
+    target: HTMLImageElement | HTMLDivElement,
     markerImage: SVGSVGElement,
     done: (dataUrl: string) => void
   ) {
+    if (!isHTMLImageElement(target)) {
+      throw new Error('Error: only support export HTMLImageElement');
+    }
+
     const canvas = document.createElement('canvas');
     canvas.width = markerImage.width.baseVal.value;
     canvas.height = markerImage.height.baseVal.value;
@@ -16,7 +23,7 @@ export class Synthetizer {
       throw new Error('Invalid ctx');
     }
 
-    ctx.drawImage(target, 0, 0, canvas.width, canvas.height);
+    ctx.drawImage(target as HTMLImageElement, 0, 0, canvas.width, canvas.height);
 
     const DOMURL = window.URL; // || window.webkitURL || window;
 

src/toolbar/Toolbar.ts

@@ -1,7 +1,10 @@
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarItem } from './ToolbarItem';
+import { uuid } from '../utils/uuid';
 
 export class Toolbar {
+  id: string = uuid();
+
   private toolbarItems: ToolbarItem[];
   private toolbarUI: HTMLElement;
 
@@ -15,8 +18,10 @@ export class Toolbar {
     this.clickHandler = clickHandler;
   }
 
+  /** 获取 UI 元素 */
   public getUI = (): 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) {
@@ -26,4 +31,14 @@ export class Toolbar {
 
     return this.toolbarUI;
   };
+
+  public hide() {
+    this.toolbarUI.style.opacity = '0';
+    this.toolbarUI.style.zIndex = '-1';
+  }
+
+  public show() {
+    this.toolbarUI.style.opacity = '1';
+    this.toolbarUI.style.zIndex = '999';
+  }
 }

src/toolbar/toolbar-items.ts

@@ -1,3 +1,4 @@
+import { WhitePage } from './../board/WhitePage/index';
 import { RectMarker } from './../markers/RectMarker/index';
 import { CoverMarker } from './../markers/CoverMarker/index';
 import { TextMarker } from './../markers/TextMarker/index';
@@ -6,6 +7,11 @@ import { HighlightMarker } from './../markers/HighlightMarker/index';
 import { ToolbarItem } from './ToolbarItem';
 import { LineMarker } from '../markers/LineMarker';
 
+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 highlightMarkerToolbarItem = new ToolbarItem({
   name: 'cover-marker',
   tooltipText: 'Cover',
@@ -47,3 +53,52 @@ export const lineMarkerToolbarItem = new ToolbarItem({
   icon: require('../assets/line.svg'),
   markerType: LineMarker
 });
+
+export function getToolbars(page?: WhitePage) {
+  const toolbars = [
+    {
+      icon: PointerIcon,
+      name: 'pointer',
+      tooltipText: 'Pointer'
+    },
+    {
+      icon: DeleteIcon,
+      name: 'delete',
+      tooltipText: 'Delete'
+    },
+    {
+      name: 'separator',
+      tooltipText: ''
+    },
+    rectMarkerToolbarItem,
+    coverMarkerToolbarItem,
+    highlightMarkerToolbarItem,
+    lineMarkerToolbarItem,
+    arrowMarkerToolbarItem,
+    textMarkerToolbarItem,
+    {
+      name: 'separator',
+      tooltipText: ''
+    }
+  ];
+
+  if (!page) {
+    toolbars.push(
+      ...[
+        {
+          icon: OkIcon,
+          name: 'ok',
+          tooltipText: 'OK'
+        }
+      ]
+    );
+  }
+
+  toolbars.push({
+    icon: CloseIcon,
+    name: 'close',
+    tooltipText: 'Close'
+  });
+
+  return toolbars;
+}

src/types.d.ts

@@ -11,3 +11,5 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module 'siema';

src/utils/dom.ts

@@ -0,0 +1,23 @@
+/** 创建包含样式类名的 Div 元素 */
+export function createDivWithClassName(className?: string, parent?: HTMLElement) {
+  const ele = document.createElement('div');
+
+  if (parent) {
+    parent.appendChild(ele);
+  }
+
+  if (className) {
+    addClassName(ele, className);
+  }
+
+  return ele;
+}
+
+/** 添加样式类名 */
+export function addClassName(ele: HTMLElement, className: string) {
+  if (!ele) {
+    return;
+  }
+
+  ele.className = `${ele.className || ''} ${className}`.trim();
+}

src/utils/validator.ts

@@ -0,0 +1,8 @@
+/** 判断是否为有效的 HTMLImageElement */
+export function isHTMLImageElement(ele: any) {
+  if (typeof ele === 'object' && ele instanceof HTMLImageElement) {
+    return true;
+  }
+
+  return false;
+}