feat: add multiple whiteboard & snap sync

src/board/Whiteboard/index.ts

@@ -1,340 +0,0 @@
-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 {
-  id: string = uuid();
-  sources: string[] = [];
-
-  /** 元素 */
-  // 如果传入的是图片地址，则需要挂载到该 Target 元素下
-  target: HTMLDivElement;
-  imgsContainer: HTMLDivElement;
-  pagesContainer: HTMLDivElement;
-
-  /** UI Options */
-  // 事件中心
-  eventHub?: EventHub;
-  // 编辑模式
-  mode: WhiteboardMode = 'master';
-  // 是否为全屏模式
-  isFullscreen: boolean = false;
-
-  /** 句柄 */
-  pages: WhitePage[] = [];
-  get activePage() {
-    return this.pages[this.visiblePageIndex];
-  }
-  siema: any;
-
-  /** State | 内部状态 */
-  // 是否被初始化过，如果尚未被初始化，则等待来自于 Master 的同步消息
-  isInitialized: boolean = false;
-  isSyncing: 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);
-    }
-  }
-
-  /** 展示当前的 WhitePage */
-  public show() {
-    if (this.activePage) {
-      this.activePage.show();
-    }
-  }
-
-  public hide() {
-    if (this.activePage) {
-      this.activePage.hide();
-    }
-  }
-
-  /** 获取当前快照 */
-  public snap(): SerializableWhiteboard {
-    return {
-      id: this.id,
-      sources: this.sources,
-      pageIds: this.pages.map(page => page.id),
-      visiblePageIndex: this.visiblePageIndex
-    };
-  }
-
-  /** 初始化操作 */
-  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.visibility = 'hidden';
-
-      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.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,
-            eventHub: this.eventHub,
-            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(visiblePageIndex);
-  }
-}

src/board/Baseboard/index.ts → src/drawboard/Baseboard/index.ts

@@ -1,13 +1,16 @@
+import { Source } from './../../utils/types';
 import { uuid } from './../../utils/uuid';
-import { WhitePageSource } from './../types';
 import { SvgHelper } from './../../renderer/SvgHelper/index';
 
 /** 基础的绘制版 */
 export class Baseboard {
   id: string = uuid();
 
+  // 状态
+  isFullscreen: boolean = false;
+
   /** 元素 */
-  source: WhitePageSource;
+  source: Source;
 
   // 目前使用 Image 元素作为输出源
   target: HTMLImageElement;
@@ -20,16 +23,18 @@ export class Baseboard {
   width: number;
   height: number;
 
-  constructor(source: WhitePageSource) {
+  constructor(source: Source) {
     this.source = source;
 
+    // 如果传入的是某个元素，则直接附着
     if (source.imgEle) {
       this.target = source.imgEle!;
 
-      // 如果仅传入图片地址或者 Blob，则必须为全屏模式
       this.width = this.target.clientWidth;
       this.height = this.target.clientHeight;
     }
+
+    // 如果仅传入图片地址或者 Blob，则必须为全屏模式
   }
 
   protected initBoard = () => {
@@ -61,8 +66,17 @@ export class Baseboard {
     this.boardHolder.appendChild(this.boardCanvas);
   };
 
+  /** 放置 Board */
   protected positionBoard = () => {
     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/board/Drawboard/index.ts → src/drawboard/Drawboard/index.ts

@@ -1,9 +1,9 @@
-import { WhitePageSource } from './../types';
+import { Source } from './../../utils/types';
 import { Baseboard } from './../Baseboard/index';
 import { BaseMarker } from './../../markers/BaseMarker/index';
 import { getToolbars } from './../../toolbar/toolbar-items';
-import { WhitePage } from './../WhitePage/index';
-import { onSyncFunc } from './../../event/Event';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { onSyncFunc } from '../../event/SyncEvent';
 
 import { Synthetizer } from '../../renderer/Synthetizer';
 import { Toolbar } from '../../toolbar/Toolbar';
@@ -13,12 +13,13 @@ import './index.less';
 
 export class Drawboard extends Baseboard {
   /** Options */
-  private scale = 1.0;
+  scale = 1.0;
+  zIndex: number = 999;
 
   /** 句柄 */
   page: WhitePage;
 
-  private markers: BaseMarker[];
+  markers: BaseMarker[];
   get markerMap(): { [key: string]: BaseMarker } {
     const map = {};
     this.markers.forEach(marker => {
@@ -26,20 +27,20 @@ export class Drawboard extends Baseboard {
     });
     return map;
   }
-  private activeMarker: BaseMarker | null;
+  activeMarker: BaseMarker | null;
 
-  private toolbar: Toolbar;
-  private toolbars: ToolbarItem[];
-  private toolbarUI: HTMLElement;
+  toolbar: Toolbar;
+  toolbars: ToolbarItem[];
+  toolbarUI: HTMLElement;
 
   /** 回调 */
-  private onComplete: (dataUrl: string) => void = () => {};
-  private onChange: onSyncFunc = () => {};
-  private onCancel: () => void;
+  onComplete: (dataUrl: string) => void = () => {};
+  onChange: onSyncFunc = () => {};
+  onCancel: () => void;
 
   constructor(
-    source: WhitePageSource,
-    { page, onChange }: { page?: WhitePage; onChange?: onSyncFunc } = {}
+    source: Source,
+    { page, zIndex, onChange }: { page?: WhitePage; zIndex?: number; onChange?: onSyncFunc } = {}
   ) {
     super(source);
 
@@ -47,6 +48,10 @@ export class Drawboard extends Baseboard {
       this.page = page;
     }
 
+    if (zIndex) {
+      this.zIndex = zIndex;
+    }
+
     this.markers = [];
     this.activeMarker = null;
     this.toolbars = getToolbars(page);
@@ -99,7 +104,7 @@ export class Drawboard extends Baseboard {
     }
 
     this.boardHolder.style.visibility = 'visible';
-    this.boardHolder.style.zIndex = '9999';
+    this.boardHolder.style.zIndex = `${this.zIndex}`;
 
     if (this.toolbar) {
       this.toolbar.show();
@@ -126,6 +131,7 @@ export class Drawboard extends Baseboard {
     this.startRender(this.renderFinished);
   };
 
+  /** 添加某个 Marker */
   public addMarker = (markerType: typeof BaseMarker, { id }: { id?: string } = {}) => {
     // 假如 Drawboard 存在 Page 引用，则传导给 Marker
     const marker = markerType.createMarker(this.page);
@@ -134,6 +140,7 @@ export class Drawboard extends Baseboard {
       marker.id = id;
     }
 
+    marker.drawboard = this;
     marker.onSelected = this.selectMarker;
     marker.onChange = this.onChange;
 
@@ -149,23 +156,22 @@ export class Drawboard extends Baseboard {
     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 }
     });
 
     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;
 
-    const 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;
   };
 
   public deleteActiveMarker = () => {
@@ -173,10 +179,10 @@ export class Drawboard extends Baseboard {
       // 触发事件
       if (this.onChange) {
         this.onChange({
-          event: 'remove',
+          event: 'removeMarker',
           id: this.activeMarker.id,
           target: 'marker',
-          data: { id: this.activeMarker.id }
+          marker: { id: this.activeMarker.id }
         });
       }
       this.deleteMarker(this.activeMarker);
@@ -258,9 +264,13 @@ export class Drawboard extends Baseboard {
 
   private showUI = () => {
     this.toolbar = new Toolbar(this.toolbars, this.toolbarClick);
+    this.toolbar.zIndex = this.zIndex;
+
     this.toolbarUI = this.toolbar.getUI();
+
     document.body.appendChild(this.toolbarUI);
     this.toolbarUI.style.position = 'absolute';
+
     this.positionToolbar();
   };
 

src/event/Event.ts

@@ -1,37 +0,0 @@
-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'
-  | 'topLeft'
-  | 'bottomLeft'
-  | 'topRight'
-  | 'bottomRight'
-  | 'centerLeft'
-  | 'centerRight'
-  | 'topCenter'
-  | 'bottomCenter';
-
-export interface SyncEvent {
-  target: TargetType;
-  id?: string;
-  parentId?: string;
-  event: EventType;
-  data?: object | string | number;
-}
-
-export type onSyncFunc = (ev: SyncEvent) => void;

src/event/SyncEvent.ts

@@ -0,0 +1,21 @@
+import { BorderEventType } from './border-events';
+import { MarkerEventType, MarkerData } from './marker-events';
+import { WhiteboardSnap } from '../whiteboard/AbstractWhiteboard/snap';
+
+export type TargetType = 'whiteboard' | 'page' | 'marker';
+
+export type EventType = MarkerEventType | BorderEventType;
+
+export type onSyncFunc = (ev: SyncEvent) => void;
+
+export interface SyncEvent {
+  target: TargetType;
+
+  // 当前事件触发者的 ID
+  id?: string;
+  parentId?: string;
+  event: EventType;
+  marker?: MarkerData;
+  border?: WhiteboardSnap;
+  timestamp?: number;
+}

src/event/border-events.ts

@@ -0,0 +1,5 @@
+export type BorderEventType =
+  // 完全的状态同步，FCW 支持两种状态的同步交换：Snapshot(Snap) 与 KeyActions(KA) 方式
+  | 'borderSnap'
+  // 下标改变
+  | 'borderChangePage';

src/event/marker-events.ts

@@ -0,0 +1,27 @@
+import { MarkerType } from './../markers/types';
+import { PositionType } from '../utils/layout';
+
+export type MarkerEventType =
+  // 添加
+  | 'addMarker'
+  // 尺寸重置
+  | 'resizeMarker'
+  // 移动
+  | 'moveMarker'
+  // 移除
+  | 'removeMarker'
+  // 改变 Marker 文本
+  | 'inputMarker';
+
+export interface MarkerData {
+  id?: string;
+  type?: MarkerType;
+
+  // 内部数据
+  text?: string;
+
+  // 位置信息
+  dx?: number;
+  dy?: number;
+  pos?: PositionType;
+}

src/index.ts

@@ -1,3 +1,4 @@
-export { Drawboard } from './board/Drawboard';
-export { Whiteboard } from './board/Whiteboard';
-export { WhiteboardMode } from './board/types';
+export { EventHub } from './event/EventHub';
+export { Drawboard } from './drawboard/Drawboard';
+export { Whiteboard } from './whiteboard/Whiteboard';
+export { Mode } from './utils/types';

src/markers/ArrowMarker/index.ts

@@ -1,7 +1,7 @@
 import { MarkerType } from './../types';
 import { LinearMarker } from '../LinearMarker';
 import { SvgHelper } from '../../renderer/SvgHelper';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
 
 export class ArrowMarker extends LinearMarker {
   type: MarkerType = 'arrow';

src/markers/BaseMarker/ResizeGrip.ts

@@ -1,5 +1,6 @@
 import { SvgHelper } from '../../renderer/SvgHelper';
 
+/** 操作小圆点 */
 export class ResizeGrip {
   public visual: SVGGraphicsElement;
 

src/markers/BaseMarker/index.ts

@@ -1,15 +1,19 @@
-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';
 import * as uuid from 'uuid/v1';
 import { SvgHelper } from '../../renderer/SvgHelper';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
+import { Drawboard } from '../../drawboard/Drawboard/index';
 
 export class BaseMarker {
   id: string = uuid();
   type: MarkerType = 'base';
-  // 归属的
+  // 归属的 WhitePage
   page?: WhitePage;
+  // 归属的 Drawboard
+  drawboard?: Drawboard;
   // Marker 的属性发生变化后的回调
   onChange: onSyncFunc = () => {};
 
@@ -27,8 +31,10 @@ export class BaseMarker {
 
   public defs: SVGElement[] = [];
 
-  protected width: number = 200;
-  protected height: number = 50;
+  x: number = 0;
+  y: number = 0;
+  width: number = 200;
+  height: number = 50;
 
   protected isActive: boolean = true;
   protected isDragging: boolean = false;
@@ -39,13 +45,21 @@ export class BaseMarker {
 
   public reactToManipulation(
     type: EventType,
-    { dx, dy, pos }: { dx: number; dy: number; pos: PositionType }
+    { dx, dy, pos }: { dx?: number; dy?: number; pos?: PositionType } = {}
   ) {
-    if (type === 'move') {
+    if (type === 'moveMarker') {
+      if (!dx || !dy) {
+        return;
+      }
+
       this.move(dx, dy);
     }
 
-    if (type === 'resize') {
+    if (type === 'resizeMarker') {
+      if (!dx || !dy) {
+        return;
+      }
+
       this.resizeByEvent(dx, dy, pos);
     }
   }
@@ -56,14 +70,21 @@ export class BaseMarker {
     const dx = (ev.screenX - this.previousMouseX) / scale;
     const dy = (ev.screenY - this.previousMouseY) / scale;
 
+    // 如果在拖拽
     if (this.isDragging) {
-      this.onChange({ target: 'marker', id: this.id, event: 'move', data: { dx, dy } });
+      this.onChange({ target: 'marker', id: this.id, event: 'moveMarker', marker: { dx, dy } });
       this.move(dx, dy);
     }
 
+    // 如果是缩放
     if (this.isResizing) {
       this.resize(dx, dy, (pos: PositionType) => {
-        this.onChange({ target: 'marker', id: this.id, event: 'resize', data: { dx, dy, pos } });
+        this.onChange({
+          target: 'marker',
+          id: this.id,
+          event: 'resizeMarker',
+          marker: { dx, dy, pos }
+        });
       });
     }
 
@@ -90,6 +111,59 @@ export class BaseMarker {
     return;
   }
 
+  /** 生成某个快照 */
+  public captureSnap(): MarkerSnap {
+    return {
+      id: this.id,
+      type: this.type,
+      isActive: this.isActive,
+      x: this.x,
+      y: this.y
+    };
+  }
+
+  /** 应用某个快照 */
+  public applySnap(snap: MarkerSnap): void {
+    this.id = snap.id;
+    this.type = snap.type;
+
+    if (snap.x && snap.y) {
+      // 移动当前位置
+      this.moveTo(snap.x, snap.y);
+    }
+
+    // 判断是否为激活
+    if (this.isActive) {
+      this.select();
+    }
+  }
+
+  protected resize(x: number, y: number, cb?: Function) {
+    return;
+  }
+  protected resizeByEvent(x: number, y: number, pos?: PositionType) {
+    return;
+  }
+
+  public move = (dx: number, dy: number) => {
+    const 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;
+  };
+
+  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));
+    this.visual.transform.baseVal.replaceItem(translate, 0);
+
+    this.x = x;
+    this.y = y;
+  };
+
+  /** Init */
   protected setup() {
     this.visual = SvgHelper.createGroup();
     // translate
@@ -115,13 +189,6 @@ export class BaseMarker {
     this.renderVisual.appendChild(el);
   };
 
-  protected resize(x: number, y: number, cb?: Function) {
-    return;
-  }
-  protected resizeByEvent(x: number, y: number, pos?: PositionType) {
-    return;
-  }
-
   /** 截获 Touch 事件，并且转发为 Mouse 事件 */
   protected onTouch(ev: TouchEvent) {
     ev.preventDefault();
@@ -186,10 +253,4 @@ export class BaseMarker {
     ev.stopPropagation();
     this.manipulate(ev);
   };
-
-  private move = (dx: number, dy: number) => {
-    const translate = this.visual.transform.baseVal.getItem(0);
-    translate.setMatrix(translate.matrix.translate(dx, dy));
-    this.visual.transform.baseVal.replaceItem(translate, 0);
-  };
 }

src/markers/CoverMarker/index.ts

@@ -1,7 +1,7 @@
 import { MarkerType } from './../types';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
 
 export class CoverMarker extends RectBaseMarker {
   type: MarkerType = 'cover';

src/markers/HighlightMarker/index.ts

@@ -1,7 +1,7 @@
 import { MarkerType } from './../types';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { RectBaseMarker } from '../RectMarker/RectBaseMarker';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
 
 export class HighlightMarker extends RectBaseMarker {
   type: MarkerType = 'highlight';

src/markers/LineMarker/index.ts

@@ -1,7 +1,7 @@
 import { MarkerType } from './../types';
 import { LinearMarker } from '../LinearMarker';
 import { SvgHelper } from './../../renderer/SvgHelper/index';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
 
 export class LineMarker extends LinearMarker {
   type: MarkerType = 'line';

src/markers/LinearMarker/index.ts

@@ -1,10 +1,15 @@
-import { WhitePage } from './../../board/WhitePage/index';
+import { WhitePage } from '../../whiteboard/WhitePage/index';
 import { BaseMarker } from '../BaseMarker';
 import { ResizeGrip } from '../BaseMarker/ResizeGrip';
 import { SvgHelper } from '../../renderer/SvgHelper';
-import { PositionType } from '../../event/Event';
-
-export class LinearMarker extends BaseMarker {
+import { PositionType } from '../../utils/layout';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
+import { LinearBound } from '../types';
+
+/**
+ * 线性标识
+ */
+export class LinearMarker extends BaseMarker implements LinearBound {
   public static createMarker = (page?: WhitePage): LinearMarker => {
     const marker = new LinearMarker();
     marker.page = page;
@@ -12,22 +17,51 @@ export class LinearMarker extends BaseMarker {
     return marker;
   };
 
-  protected markerLine: SVGLineElement;
-
   private readonly MIN_LENGTH = 20;
+  // 线的左端点与右端点
+  x1: number = 0;
+  y1: number = 0;
+  x2: number = this.width;
+  y2: number = 0;
 
+  /** @region UI Handlers */
+  protected markerLine: SVGLineElement;
   private markerBgLine: SVGLineElement; // touch target
-
   private controlBox: SVGGElement;
 
   private controlGrips: { left: ResizeGrip; right: ResizeGrip };
   private activeGrip: ResizeGrip | null;
 
-  private x1: number = 0;
-  private y1: number = 0;
-  private x2: number = this.width;
-  private y2: number = 0;
+  /** Getter & Setter */
+  public getLineLength = (x1: number, y1: number, x2: number, y2: number): number => {
+    const dx = Math.abs(x1 - x2);
+    const dy = Math.abs(y1 - y2);
+
+    return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+  };
+
+  public captureSnap(): MarkerSnap {
+    const baseSnap = super.captureSnap();
+
+    baseSnap.linearSnap = {
+      x1: this.x1,
+      y1: this.y1,
+      x2: this.x2,
+      y2: this.y2
+    };
+
+    return baseSnap;
+  }
+
+  public applySnap(snap: MarkerSnap): void {
+    super.applySnap(snap);
 
+    if (snap.linearSnap) {
+      this.positionLine(snap.linearSnap);
+    }
+  }
+
+  /** 复写操作事件 */
   public endManipulation() {
     super.endManipulation();
     this.isResizing = false;
@@ -62,6 +96,7 @@ export class LinearMarker extends BaseMarker {
     }
   }
 
+  /** 主动伸缩操作 */
   protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void) {
     if (this.activeGrip) {
       if (
@@ -96,6 +131,7 @@ export class LinearMarker extends BaseMarker {
     this.adjustControlBox();
   }
 
+  /** 根据事件进行伸缩操作 */
   protected resizeByEvent(x: number, y: number, pos?: PositionType) {
     if (pos === 'left') {
       this.activeGrip = this.controlGrips.left;
@@ -106,12 +142,7 @@ export class LinearMarker extends BaseMarker {
     this.resize(x, y);
   }
 
-  private getLineLength = (x1: number, y1: number, x2: number, y2: number): number => {
-    const dx = Math.abs(x1 - x2);
-    const dy = Math.abs(y1 - y2);
-
-    return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
-  };
+  /** Init */
 
   private addControlBox = () => {
     this.controlBox = SvgHelper.createGroup([['class', 'fc-whiteboard-line-control-box']]);
@@ -149,24 +180,7 @@ export class LinearMarker extends BaseMarker {
     return grip;
   };
 
-  private positionGrips = () => {
-    const gripSize = this.controlGrips.left.GRIP_SIZE;
-
-    const x1 = this.x1 - gripSize / 2;
-    const y1 = this.y1 - gripSize / 2;
-    const x2 = this.x2 - gripSize / 2;
-    const y2 = this.y2 - gripSize / 2;
-
-    this.positionGrip(this.controlGrips.left.visual, x1, y1);
-    this.positionGrip(this.controlGrips.right.visual, x2, y2);
-  };
-
-  private positionGrip = (grip: SVGGraphicsElement, x: number, y: number) => {
-    const translate = grip.transform.baseVal.getItem(0);
-    translate.setTranslate(x, y);
-    grip.transform.baseVal.replaceItem(translate, 0);
-  };
-
+  /** Event Handlers */
   private gripMouseDown = (ev: MouseEvent) => {
     this.isResizing = true;
     this.activeGrip =
@@ -189,4 +203,35 @@ export class LinearMarker extends BaseMarker {
       this.resize(ev.movementX, ev.movementY);
     }
   };
+
+  /** UI Position */
+  private positionLine = (bound: LinearBound) => {
+    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());
+  };
+
+  private positionGrips = () => {
+    const gripSize = this.controlGrips.left.GRIP_SIZE;
+
+    const x1 = this.x1 - gripSize / 2;
+    const y1 = this.y1 - gripSize / 2;
+    const x2 = this.x2 - gripSize / 2;
+    const y2 = this.y2 - gripSize / 2;
+
+    this.positionGrip(this.controlGrips.left.visual, x1, y1);
+    this.positionGrip(this.controlGrips.right.visual, x2, y2);
+  };
+
+  private positionGrip = (grip: SVGGraphicsElement, x: number, y: number) => {
+    const translate = grip.transform.baseVal.getItem(0);
+    translate.setTranslate(x, y);
+    grip.transform.baseVal.replaceItem(translate, 0);
+  };
 }

src/markers/RectMarker/RectBaseMarker.ts

@@ -1,7 +1,8 @@
-import { PositionType } from '../../event/Event';
+import { PositionType } from '../../utils/layout';
 import { SvgHelper } from '../../renderer/SvgHelper';
 import { RectangularMarker } from '../RectangularMarker';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
 
 export class RectBaseMarker extends RectangularMarker {
   public static createMarker = (page?: WhitePage): RectBaseMarker => {
@@ -13,6 +14,17 @@ export class RectBaseMarker extends RectangularMarker {
 
   private markerRect: SVGRectElement;
 
+  /** Getter & Setter */
+
+  public applySnap(snap: MarkerSnap) {
+    super.applySnap(snap);
+
+    if (snap.rectSnap) {
+      this.markerRect.setAttribute('width', this.width.toString());
+      this.markerRect.setAttribute('height', this.height.toString());
+    }
+  }
+
   protected setup() {
     super.setup();
 

src/markers/RectMarker/index.ts

@@ -1,4 +1,4 @@
-import { WhitePage } from './../../board/WhitePage/index';
+import { WhitePage } from '../../whiteboard/WhitePage/index';
 import { MarkerType } from './../types';
 import { RectBaseMarker } from './RectBaseMarker';
 import { SvgHelper } from '../../renderer/SvgHelper';

src/markers/RectangularMarker/index.ts

@@ -1,9 +1,10 @@
 import { RectangularMarkerGrips } from './RectangularMarkerGrips';
 import { BaseMarker } from '../BaseMarker';
 import { ResizeGrip } from '../BaseMarker/ResizeGrip';
-import { PositionType } from '../../event/Event';
 import { SvgHelper } from '../../renderer/SvgHelper';
-import { WhitePage } from '../../board/WhitePage';
+import { WhitePage } from '../../whiteboard/WhitePage';
+import { PositionType } from '../../utils/layout';
+import { MarkerSnap } from '../../whiteboard/AbstractWhiteboard/snap';
 
 export class RectangularMarker extends BaseMarker {
   public static createMarker = (page?: WhitePage): RectangularMarker => {
@@ -22,6 +23,32 @@ export class RectangularMarker extends BaseMarker {
   private controlGrips: RectangularMarkerGrips;
   private activeGrip: ResizeGrip | null;
 
+  /** Getter & Setter */
+  public captureSnap(): MarkerSnap {
+    const snap = super.captureSnap();
+
+    snap.rectSnap = {
+      width: this.width,
+      height: this.height
+    };
+
+    return snap;
+  }
+
+  public applySnap(snap: MarkerSnap) {
+    super.applySnap(snap);
+
+    if (snap.rectSnap) {
+      const { width, height } = snap.rectSnap;
+
+      if (width && height) {
+        this.width = width;
+        this.height = height;
+        this.adjustControlBox();
+      }
+    }
+  }
+
   public endManipulation() {
     super.endManipulation();
     this.isResizing = false;
@@ -48,74 +75,98 @@ export class RectangularMarker extends BaseMarker {
     }
   }
 
-  protected resizeByEvent(x: number, y: number, pos: PositionType) {
+  protected resizeByEvent(dx: number, dy: number, pos: PositionType) {
     this.activeGrip = this.controlGrips[pos];
-    this.resize(x, y);
+    this.resize(dx, dy);
   }
 
-  protected resize(x: number, y: number, onPosition?: (pos: PositionType) => void) {
+  protected resize(dx: number, dy: number, onPosition?: (pos: PositionType) => void) {
     let translateX = 0;
     let 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');
         }
         break;
+
       default:
         break;
     }
@@ -144,10 +195,7 @@ export class RectangularMarker extends BaseMarker {
     this.adjustControlBox();
   }
 
-  protected onTouch(ev: TouchEvent) {
-    super.onTouch(ev);
-  }
-
+  /** Init Comps */
   private addControlBox = () => {
     this.controlBox = SvgHelper.createGroup([['class', 'fc-whiteboard-rect-control-box']]);
     const translate = SvgHelper.createTransform();
@@ -204,6 +252,32 @@ export class RectangularMarker extends BaseMarker {
     return grip;
   };
 
+  /** Event Handlers */
+  protected onTouch(ev: TouchEvent) {
+    super.onTouch(ev);
+  }
+
+  private gripMouseDown = (ev: MouseEvent) => {
+    this.isResizing = true;
+    this.activeGrip = this.controlGrips.findGripByVisual(ev.target as SVGGraphicsElement) || null;
+    this.previousMouseX = ev.screenX;
+    this.previousMouseY = ev.screenY;
+    ev.stopPropagation();
+  };
+
+  private gripMouseUp = (ev: MouseEvent) => {
+    this.isResizing = false;
+    this.activeGrip = null;
+    ev.stopPropagation();
+  };
+
+  private gripMouseMove = (ev: MouseEvent) => {
+    if (this.isResizing) {
+      this.manipulate(ev);
+    }
+  };
+
+  /** UI Position */
   private positionGrips = () => {
     const gripSize = this.controlGrips.topLeft.GRIP_SIZE;
 
@@ -229,24 +303,4 @@ export class RectangularMarker extends BaseMarker {
     translate.setTranslate(x, y);
     grip.transform.baseVal.replaceItem(translate, 0);
   };
-
-  private gripMouseDown = (ev: MouseEvent) => {
-    this.isResizing = true;
-    this.activeGrip = this.controlGrips.findGripByVisual(ev.target as SVGGraphicsElement) || null;
-    this.previousMouseX = ev.screenX;
-    this.previousMouseY = ev.screenY;
-    ev.stopPropagation();
-  };
-
-  private gripMouseUp = (ev: MouseEvent) => {
-    this.isResizing = false;
-    this.activeGrip = null;
-    ev.stopPropagation();
-  };
-
-  private gripMouseMove = (ev: MouseEvent) => {
-    if (this.isResizing) {
-      this.manipulate(ev);
-    }
-  };
 }

src/markers/TextMarker/index.ts

@@ -1,8 +1,9 @@
 import { MarkerType } from '../types';
 import { RectangularMarker } from '../RectangularMarker';
 import { SvgHelper } from '../../renderer/SvgHelper';
-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';
 
 const OkIcon = require('../../assets/check.svg');
 const CancelIcon = require('../../assets/times.svg');
@@ -17,23 +18,38 @@ export class TextMarker extends RectangularMarker {
     return marker;
   };
 
-  /** 设置文本 */
+  /** UI Options */
+  protected readonly MIN_SIZE = 50;
+  private readonly DEFAULT_TEXT = 'Double-click to edit text';
+  private text: string = this.DEFAULT_TEXT;
+  private inDoubleTap = false;
+
+  /** UI Handlers */
+  private textElement: SVGTextElement;
+  private editor: HTMLDivElement;
+  private editorTextArea: HTMLTextAreaElement;
+
+  /** Getter & Setter */
   public setText(text: string) {
     this.text = text;
     this.renderText();
   }
 
-  protected readonly MIN_SIZE = 50;
+  public captureSnap(): MarkerSnap {
+    const baseSnap = super.captureSnap();
 
-  private readonly DEFAULT_TEXT = 'Double-click to edit text';
-  private text: string = this.DEFAULT_TEXT;
-  private textElement: SVGTextElement;
+    baseSnap.textSnap = { text: this.text };
 
-  private inDoubleTap = false;
+    return baseSnap;
+  }
 
-  private editor: HTMLDivElement;
+  public applySnap(snap: MarkerSnap) {
+    super.applySnap(snap);
 
-  private editorTextArea: HTMLTextAreaElement;
+    if (snap.textSnap && snap.textSnap.text !== this.text) {
+      this.setText(snap.textSnap.text);
+    }
+  }
 
   protected setup() {
     super.setup();
@@ -147,7 +163,12 @@ export class TextMarker extends RectangularMarker {
     }
 
     // 触发文本修改时间
-    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();

src/markers/types.ts

@@ -8,6 +8,13 @@ import { RectMarker } from './RectMarker';
 
 export type MarkerType = 'base' | 'arrow' | 'cover' | 'line' | 'rect' | 'text' | 'highlight';
 
+export interface LinearBound {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
 export function getMarkerByType(type: MarkerType): typeof BaseMarker {
   switch (type) {
     case 'arrow':

src/renderer/SvgHelper/index.ts

@@ -1,3 +1,4 @@
+/** 通用的 Svg 助手 */
 export class SvgHelper {
   public static createRect = (
     width: number | string,

src/renderer/Synthetizer/index.ts

@@ -1,14 +1,15 @@
 import { isHTMLImageElement } from '../../utils/validator';
 
-/** 图片导出 */
+/** 图片导出，将原图片与 Svgs 绘制到某个 Canvas 中 */
 export class Synthetizer {
   public rasterize(
-    target: HTMLImageElement | HTMLDivElement,
+    // target 是原图片
+    target: HTMLImageElement,
     markerImage: SVGSVGElement,
     done: (dataUrl: string) => void
   ) {
     if (!isHTMLImageElement(target)) {
-      throw new Error('Error: only support export HTMLImageElement');
+      throw new Error('Error: only support export to HTMLImageElement');
     }
 
     const canvas = document.createElement('canvas');

src/toolbar/Toolbar.ts

@@ -4,11 +4,12 @@ import { uuid } from '../utils/uuid';
 
 export class Toolbar {
   id: string = uuid();
+  zIndex: number = 999;
 
-  private toolbarItems: ToolbarItem[];
-  private toolbarUI: HTMLElement;
+  toolbarItems: ToolbarItem[];
+  toolbarUI: HTMLElement;
 
-  private clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
+  clickHandler: (ev: MouseEvent, toolbarItem: ToolbarItem) => void;
 
   constructor(
     toolbarItems: ToolbarItem[],
@@ -39,6 +40,6 @@ export class Toolbar {
 
   public show() {
     this.toolbarUI.style.visibility = 'visible';
-    this.toolbarUI.style.zIndex = '999';
+    this.toolbarUI.style.zIndex = `${this.zIndex}`;
   }
 }

src/toolbar/toolbar-items.ts

@@ -1,4 +1,4 @@
-import { WhitePage } from './../board/WhitePage/index';
+import { WhitePage } from '../whiteboard/WhitePage/index';
 import { RectMarker } from './../markers/RectMarker/index';
 import { CoverMarker } from './../markers/CoverMarker/index';
 import { TextMarker } from './../markers/TextMarker/index';

src/utils/layout.ts

@@ -0,0 +1,11 @@
+export type PositionType =
+  | 'left'
+  | 'right'
+  | 'topLeft'
+  | 'bottomLeft'
+  | 'topRight'
+  | 'bottomRight'
+  | 'centerLeft'
+  | 'centerRight'
+  | 'topCenter'
+  | 'bottomCenter';

src/board/types.ts → src/utils/types.ts

@@ -1,7 +1,7 @@
 // 是主动绘制模式，还是镜像模式
-export type WhiteboardMode = 'master' | 'mirror';
+export type Mode = 'master' | 'mirror' | 'replay';
 
-export type WhitePageSource = {
+export type Source = {
   // 需要展示的图片元素
   imgEle?: HTMLImageElement;
 

src/whiteboard/AbstractWhiteboard/index.ts

@@ -0,0 +1,189 @@
+import { Mode } from './../../utils/types';
+import { SyncEvent } from '../../event/SyncEvent';
+
+import { WhitePage } from '../WhitePage/index';
+import { EventHub } from '../../event/EventHub';
+import { uuid } from '../../utils/uuid';
+import { addClassName } from '../../utils/dom';
+
+import './index.less';
+import { WhiteboardSnap } from '../AbstractWhiteboard/snap';
+import * as Siema from 'siema';
+
+const prefix = 'fcw-board';
+
+export abstract class AbstractWhiteboard {
+  id: string = uuid();
+  sources: string[] = [];
+
+  /** 元素 */
+  // 如果传入的是图片地址，则需要挂载到该 Target 元素下
+  target: HTMLDivElement;
+  imgsContainer: HTMLDivElement;
+  pagesContainer: HTMLDivElement;
+
+  /** Options */
+  // 是否仅同步快照数据，用于弱网状态下
+  onlyEmitSnap: boolean = false;
+  snapInterval: number = 15 * 1000;
+
+  /** UI Options */
+  // 事件中心
+  eventHub?: EventHub;
+  // 编辑模式
+  mode: Mode = 'master';
+  // 是否为全屏模式
+  isFullscreen: boolean = false;
+
+  /** 句柄 */
+  pages: WhitePage[] = [];
+  get activePage() {
+    return this.pages[this.visiblePageIndex];
+  }
+  get pageMap(): Record<string, WhitePage> {
+    const map = {};
+    this.pages.forEach(p => (map[p.id] = p));
+
+    return map;
+  }
+  siema: any;
+
+  /** State | 内部状态 */
+  // 是否被初始化过，如果尚未被初始化，则等待来自于 Master 的同步消息
+  isInitialized: boolean = false;
+  isSyncing: boolean = false;
+  visiblePageIndex: number = 0;
+  emitInterval: any;
+
+  constructor(
+    target: HTMLDivElement,
+    { sources, eventHub, visiblePageIndex, onlyEmitSnap }: Partial<AbstractWhiteboard> = {}
+  ) {
+    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;
+
+    // set inner state
+    if (typeof visiblePageIndex !== 'undefined') {
+      this.visiblePageIndex = visiblePageIndex;
+    }
+
+    this.onlyEmitSnap = !!onlyEmitSnap;
+
+    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);
+    }
+  }
+
+  /** 展示当前的 WhitePage */
+  public show() {
+    if (this.activePage) {
+      this.activePage.show();
+    }
+  }
+
+  public hide() {
+    if (this.activePage) {
+      this.activePage.hide();
+    }
+  }
+
+  /** 触发事件 */
+  public emit(borderEvent: SyncEvent) {
+    if (this.mode !== 'master' || !this.eventHub) {
+      return;
+    }
+
+    // 在快照模式下，仅同步快照消息
+    if (this.onlyEmitSnap) {
+      if (borderEvent.event !== 'borderSnap') {
+        return;
+      }
+    }
+
+    borderEvent.timestamp = Math.floor(Date.now() / 1000);
+    this.eventHub.emit('sync', borderEvent);
+  }
+
+  /** 获取当前快照 */
+  public captureSnap(shadow: boolean = true): WhiteboardSnap {
+    if (shadow) {
+      return {
+        id: this.id,
+        sources: this.sources,
+        pageIds: this.pages.map(page => page.id),
+        visiblePageIndex: this.visiblePageIndex
+      };
+    }
+
+    return {
+      id: this.id,
+      sources: this.sources,
+      pageIds: this.pages.map(page => page.id),
+      visiblePageIndex: this.visiblePageIndex,
+      pages: this.pages.map(p => p.captureSnap())
+    };
+  }
+
+  /** 初始化操作 */
+  protected abstract init(): void;
+
+  /** 初始化 Siema */
+  protected 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
+    });
+  }
+}

src/whiteboard/AbstractWhiteboard/snap.ts

@@ -0,0 +1,42 @@
+import { MarkerType } from '../../markers/types';
+
+export class WhiteboardSnap {
+  id: string;
+  sources: string[];
+  pageIds: string[];
+  visiblePageIndex: number;
+
+  // 页面信息
+  pages?: WhitepageSnap[];
+}
+
+export class WhitepageSnap {
+  id: string;
+  markers: MarkerSnap[];
+}
+
+export 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;
+  };
+}

src/whiteboard/MirrorWhiteboard/index.ts

@@ -0,0 +1,114 @@
+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';
+
+const prefix = 'fcw-board';
+
+export class MirrorWhiteboard extends AbstractWhiteboard {
+  mode: Mode = 'mirror';
+
+  /** 初始化操作 */
+  protected init() {
+    // 为 target 添加子 imgs 容器
+    this.imgsContainer = createDivWithClassName(`${prefix}-imgs`, this.target);
+    // 为 target 添加子 pages 容器
+    this.pagesContainer = createDivWithClassName(`${prefix}-pages`, this.target);
+
+    if (!this.eventHub) {
+      throw new Error('Invalid eventHub');
+    }
+
+    this.eventHub.on('sync', (ev: SyncEvent) => {
+      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);
+        }
+      }
+    });
+  }
+
+  /** 响应页面切换的事件 */
+  private onPageChange(nextPageIndex: number) {
+    if (this.visiblePageIndex === nextPageIndex) {
+      return;
+    }
+
+    this.siema.goTo(nextPageIndex);
+    this.visiblePageIndex = nextPageIndex;
+
+    // 将所有的 Page 隐藏
+    this.pages.forEach((page, i) => {
+      if (nextPageIndex === i) {
+        page.show();
+      } else {
+        page.hide();
+      }
+    });
+
+    this.emit({
+      event: 'borderChangePage',
+      id: this.id,
+      target: 'whiteboard',
+      border: this.captureSnap()
+    });
+  }
+
+  /** 响应获取到的快照事件 */
+  private applySnap(snap: WhiteboardSnap) {
+    const { id, sources, pageIds, visiblePageIndex } = 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(visiblePageIndex);
+    }
+
+    // 如果已经初始化完毕，则进行状态同步
+    this.onPageChange(snap.visiblePageIndex);
+
+    // 同步 Pages
+    (snap.pages || []).forEach(pageSnap => {
+      const page = this.pageMap[pageSnap.id];
+
+      if (page) {
+        page.applySnap(pageSnap);
+      }
+    });
+  }
+}

src/board/WhitePage/index.ts → src/whiteboard/WhitePage/index.ts

@@ -1,14 +1,14 @@
-import { TextMarker } from './../../markers/TextMarker/index';
-import { MarkerType } from './../../markers/types';
-import { SyncEvent } from './../../event/Event';
-import { EventHub } from '../../event/EventHub';
-import { WhiteboardMode, WhitePageSource } from './../types';
-import { Drawboard } from './../Drawboard/index';
-import { uuid } from './../../utils/uuid';
+import { Source, Mode } from './../../utils/types';
+import { Drawboard } from './../../drawboard/Drawboard/index';
+import { TextMarker } from '../../markers/TextMarker/index';
+import { SyncEvent } from '../../event/SyncEvent';
+import { uuid } from '../../utils/uuid';
 import { getMarkerByType } from '../../markers/types';
+import { createDivWithClassName } from '../../utils/dom';
+import { WhitepageSnap } from '../AbstractWhiteboard/snap';
+import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
 
 import './index.less';
-import { createDivWithClassName } from '../../utils/dom';
 
 const prefix = 'fcw-page';
 
@@ -16,32 +16,32 @@ const prefix = 'fcw-page';
 export class WhitePage {
   id: string = uuid();
 
-  source: WhitePageSource;
+  source: Source;
   target: HTMLImageElement;
 
   /** UI Options */
   container: HTMLDivElement;
   // 父容器指针
   parentContainer?: HTMLDivElement;
-  mode: WhiteboardMode = 'master';
+  mode: Mode = 'master';
 
   /** Handlers */
   drawboard: Drawboard;
-  eventHub?: EventHub;
+  whiteboard?: AbstractWhiteboard;
 
   constructor(
-    source: WhitePageSource,
+    source: Source,
     {
       mode,
-      eventHub,
+      whiteboard,
       parentContainer
-    }: { mode?: WhiteboardMode; eventHub?: EventHub; parentContainer?: HTMLDivElement } = {}
+    }: { mode?: Mode; whiteboard?: AbstractWhiteboard; parentContainer?: HTMLDivElement } = {}
   ) {
     if (mode) {
       this.mode = mode;
     }
-    this.eventHub = eventHub;
     this.parentContainer = parentContainer;
+    this.whiteboard = whiteboard;
 
     this.initSource(source);
 
@@ -71,8 +71,35 @@ export class WhitePage {
     this.drawboard.close();
   }
 
+  /** 生成快照 */
+  public captureSnap(): WhitepageSnap {
+    const markerSnaps = this.drawboard.markers.map(m => m.captureSnap());
+
+    return {
+      id: this.id,
+      markers: markerSnaps
+    };
+  }
+
+  /** 应用快照 */
+  public applySnap(snap: WhitepageSnap) {
+    snap.markers.forEach(markerSnap => {
+      // 判断是否存在，存在则同步，否则创建
+      const marker = this.drawboard.markerMap[markerSnap.id];
+
+      if (marker) {
+        marker.applySnap(markerSnap);
+      } else {
+        const newMarker = this.drawboard.addMarker(getMarkerByType(markerSnap.type), {
+          id: markerSnap.id
+        });
+        newMarker.applySnap(markerSnap);
+      }
+    });
+  }
+
   /** 初始化源 */
-  private initSource(source: WhitePageSource) {
+  private initSource(source: Source) {
     // 判断 Source 的类型是否符合要求
     if (typeof source.imgSrc === 'string' && !this.parentContainer) {
       throw new Error('Invalid source, If you set image url, you must also set parentContainer');
@@ -100,13 +127,13 @@ export class WhitePage {
 
   /** 以 Master 模式启动 */
   protected initMaster() {
-    if (this.eventHub) {
+    if (this.whiteboard) {
       // 对于 WhitePage 中加载的 Drawboard，必须是传入自身可控的 Image 元素
       this.drawboard = new Drawboard(
         { imgEle: this.target },
         {
           page: this,
-          onChange: ev => this.eventHub!.emit('sync', ev)
+          onChange: ev => this.whiteboard!.emit(ev)
         }
       );
     } else {
@@ -116,13 +143,13 @@ export class WhitePage {
 
   /** 以 Mirror 模式启动 */
   protected initMirror() {
-    if (!this.eventHub) {
-      throw new Error('Invalid eventHub');
+    if (!this.whiteboard) {
+      throw new Error('Invalid whiteboard');
     }
 
     this.drawboard = new Drawboard({ imgEle: this.target }, { page: this });
 
-    this.eventHub.on('sync', (ev: SyncEvent) => {
+    this.whiteboard!.eventHub!.on('sync', (ev: SyncEvent) => {
       try {
         // 判断是否为 WhitePage 的同步
         if (ev.target === 'page' && ev.id === this.id) {
@@ -144,48 +171,44 @@ export class WhitePage {
 
   /** 处理 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 (!ev.marker) {
+      return;
+    }
+
+    const id = ev.id;
+
+    if (ev.event === 'addMarker' && ev.parentId === this.id) {
+      const marker = this.drawboard.markerMap[id!];
       if (!marker) {
-        this.drawboard.addMarker(getMarkerByType(data.type), { id: data.id });
+        this.drawboard.addMarker(getMarkerByType(ev.marker.type!), { id: ev.marker.id });
       }
     }
 
     // 其余的情况，不存在 id 则直接返回空
-    if (!ev.id) {
+    if (!id) {
       return;
     }
 
-    if (ev.event === 'remove') {
-      const data: { id: string } = ev.data as {
-        id: string;
-      };
-
-      const marker = this.drawboard.markerMap[data.id];
+    if (ev.event === 'removeMarker') {
+      const marker = this.drawboard.markerMap[id];
       if (marker) {
         this.drawboard.deleteMarker(marker);
       }
     }
 
-    if (ev.event === 'move' || ev.event === 'resize') {
-      const marker = this.drawboard.markerMap[ev.id];
+    if (ev.event === 'moveMarker' || ev.event === 'resizeMarker') {
+      const marker = this.drawboard.markerMap[id];
 
       if (marker) {
-        marker.reactToManipulation(ev.event, ev.data as any);
+        marker.reactToManipulation(ev.event, ev.marker);
       }
     }
 
     // 响应文本变化事件
-    if (ev.event === 'changeText') {
-      const marker = this.drawboard.markerMap[ev.id] as TextMarker;
+    if (ev.event === 'inputMarker') {
+      const marker = this.drawboard.markerMap[id] as TextMarker;
       if (marker) {
-        marker.setText(ev.data as string);
+        marker.setText(ev.marker.text!);
       }
     }
   }

src/whiteboard/Whiteboard/index.ts

@@ -0,0 +1,114 @@
+import { WhitePage } from '../WhitePage/index';
+import { createDivWithClassName } from '../../utils/dom';
+import { AbstractWhiteboard } from '../AbstractWhiteboard/index';
+import { Mode } from '../../utils/types';
+
+const LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
+const RightArrowIcon = require('../../assets/bx-right-arrow.svg');
+
+const prefix = 'fcw-board';
+
+export class Whiteboard extends AbstractWhiteboard {
+  mode: Mode = 'master';
+
+  /** 初始化操作 */
+  protected init() {
+    // 为 target 添加子 imgs 容器
+    this.imgsContainer = createDivWithClassName(`${prefix}-imgs`, this.target);
+    // 为 target 添加子 pages 容器
+    this.pagesContainer = createDivWithClassName(`${prefix}-pages`, this.target);
+
+    this.initMaster();
+
+    this.emitSnapshot();
+  }
+
+  /** 以主模式启动 */
+  private initMaster() {
+    // 初始化所有的 WhitePages
+    this.sources.forEach(source => {
+      const page = new WhitePage(
+        { imgSrc: source },
+        {
+          mode: this.mode,
+          whiteboard: this,
+          parentContainer: this.pagesContainer
+        }
+      );
+
+      // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
+      page.container.style.visibility = 'hidden';
+
+      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 onPageChange(nextPageIndex: number) {
+    if (this.visiblePageIndex === nextPageIndex) {
+      return;
+    }
+
+    this.siema.goTo(nextPageIndex);
+    this.visiblePageIndex = nextPageIndex;
+
+    // 将所有的 Page 隐藏
+    this.pages.forEach((page, i) => {
+      if (nextPageIndex === i) {
+        page.show();
+      } else {
+        page.hide();
+      }
+    });
+
+    this.emit({
+      event: 'borderChangePage',
+      id: this.id,
+      target: 'whiteboard',
+      border: this.captureSnap()
+    });
+  }
+
+  /** 触发快照事件 */
+  private emitSnapshot() {
+    const innerFunc = () => {
+      this.emit({
+        event: 'borderSnap',
+        id: this.id,
+        target: 'whiteboard',
+        border: this.captureSnap(false)
+      });
+    };
+
+    // 定期触发事件
+    this.emitInterval = setInterval(() => {
+      innerFunc();
+    }, this.snapInterval);
+
+    // 首次事件，延时 500ms 发出
+    setTimeout(innerFunc, 500);
+  }
+}