feat(*): record

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpd-core",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.4",
   "author": "Ctank",
   "main": "index.js",
   "repository": "https://github.com/ctank/bpd-core.git",

src/core/designer.js

@@ -181,6 +181,11 @@ class Designer {
       this.elements[element.data.id] = element
     }
     this.build()
+    // 添加记录
+    eventBus.trigger('record.add', {
+      action: 'create',
+      content: addShapes
+    })
   }
 
   /**
@@ -273,6 +278,17 @@ class Designer {
       }
     }
     this.build()
+
+    debugger
+
+    // 添加记录
+    eventBus.trigger('record.add', {
+      action: 'update',
+      content: {
+        shapes: oriElements,
+        updates: updateElements
+      }
+    })
   }
 
   /**

src/draw/draw.js

@@ -361,6 +361,12 @@ class Draw extends Operation {
 
     eventBus.trigger('shape.select.remove')
 
+    // 添加记录
+    eventBus.trigger('record.add', {
+      action: 'remove',
+      content: newShapes
+    })
+
     this.removed(oldShape)
 
     return true

src/features/record/arrayStack.js

@@ -0,0 +1,40 @@
+class ArrayStack {
+  constructor() {
+    // 状态
+    this.status = true
+    // 堆栈
+    this.stack = []
+  }
+  // 压栈操作
+  push(element) {
+    this.stack.push(element)
+  }
+  // 退栈操作
+  pop() {
+    return this.stack.pop()
+  }
+  // 获取栈顶元素
+  top() {
+    return this.stack[this.stack.length - 1]
+  }
+  // 获取栈长
+  size() {
+    return this.stack.length
+  }
+  // 清空栈
+  clear() {
+    this.stack = []
+    return true
+  }
+
+  toString() {
+    return this.stack.toString()
+  }
+
+  // 修改状态
+  setStatus(status) {
+    this.status = status
+  }
+}
+
+export default ArrayStack

src/features/record/index.js

@@ -0,0 +1,3 @@
+import Record from './record'
+
+export default Record

src/features/record/record.js

@@ -0,0 +1,92 @@
+import eventBus from '../../core/eventBus'
+import ArrayStack from './arrayStack'
+
+class Record {
+  constructor() {
+    // 处理数量
+    this.batSize = 0
+    // 记录集
+    this.records = []
+    // 撤销堆栈
+    this.undoStack = new ArrayStack()
+    // 重做堆栈
+    this.redoStack = new ArrayStack()
+    //
+    this.init()
+  }
+
+  init() {
+    // 绑定Ctrl+Z
+    eventBus.trigger('key.bind', {
+      key: 'Ctrl+Z',
+      fun: this.undo.bind(this)
+    })
+    // 绑定Ctrl+Y
+    eventBus.trigger('key.bind', {
+      key: 'Ctrl+Y',
+      fun: this.redo.bind(this)
+    })
+    // 开始处理
+    eventBus.on('record.start', this.start.bind(this))
+    // 结束处理
+    eventBus.on('record.end', this.end.bind(this))
+    // 添加
+    eventBus.on('record.push', this.push.bind(this))
+    // 执行
+    eventBus.on('record.execute', this.execute.bind(this))
+  }
+
+  /**
+   * 开始处理,修改数量
+   */
+  start() {
+    this.batSize++
+  }
+
+  /**
+   * 结束处理,执行堆栈操作
+   */
+  end() {
+    this.batSize--
+    this.execute()
+  }
+
+  /**
+   * 添加记录
+   * @param {*} data
+   */
+  push(data) {
+    this.records.push(data)
+    // 如果不是多任务则立即执行
+    this.execute()
+  }
+
+  /**
+   * 执行
+   */
+  execute() {
+    if (this.batSize === 0 && this.records.length !== 0) {
+      if (this.undoStack.status) {
+        // 将事件压入撤销堆栈
+        this.undoStack.push(this.records)
+      }
+      this.records = []
+    }
+  }
+
+  /**
+   * 撤销
+   */
+  undo() {
+    console.log('Ctrl+Z')
+  }
+
+  /**
+   * 重做
+   */
+  redo() {
+    console.log('Ctrl+Y')
+  }
+}
+
+export default Record

src/main.js

@@ -14,6 +14,7 @@ import { loadFont, setExportData } from './utils/utils'
 import BpmnXML from './features/xml'
 import Background from './features/background'
 import Direction from './features/direction'
+import Record from './features/record'
 import ShapeAnchor from './features/anchor'
 import ShapeSelect from './features/select'
 import ShapeDrag from './features/drag'
@@ -116,66 +117,54 @@ const createContainer = options => {
   return designerBox
 }
 
+/**
+ * 初始化功能
+ * @param {*} $container
+ * @param {*} options
+ */
+const initFeatures = ($container, options) => {
+  // 快捷键
+  new HotKey()
+  // 国际化
+  new I18n(options.local)
+  // xml
+  new BpmnXML(options.extensions)
+  // 背景
+  new Background($container, options, options.config.background)
+  // 手
+  new Hand($container, options.pageStyle)
+  // 非只读状态时
+  if (!options.readonly) {
+    // 锚点
+    new ShapeAnchor($container, options.config.anchor)
+    // 对齐
+    new Snapline($container, options.config.snapline)
+    // 流向
+    new Direction($container, options.config.direction)
+    // 选择
+    new ShapeSelect($container, options.config.select)
+    // 记录
+    new Record()
+    // 提示
+    new Tooltip($container, options.config.tooltip)
+    // 拖动
+    new ShapeDrag(options, $container)
+    // 组面板
+    new GroupPanel($container, options)
+  }
+}
+
 class BPDCore {
   constructor(options = {}) {
-    this.version = '1.1.0-beta.2'
+    this.version = '1.1.0-beta.4'
     // 配置
     this.options = Object.assign({}, DEFAULT_OPTIONS, options)
     // 容器
     this.$container = createContainer(this.options)
-    // 功能
-    this.features = {
-      // 快捷键
-      HotKey: new HotKey(),
-      // 国际化
-      I18n: new I18n(this.options.local),
-      // xml
-      BpmnXML: new BpmnXML(this.options.extensions),
-      // 背景
-      Background: new Background(
-        this.$container,
-        this.options,
-        this.options.config.background
-      ),
-      // 手
-      Hand: new Hand(this.$container, this.options.pageStyle)
-    }
-
-    if (!this.options.readonly) {
-      // 锚点
-      this.features.Anchor = new ShapeAnchor(
-        this.$container,
-        this.options.config.anchor
-      )
-      // 对齐
-      this.features.Snapline = new Snapline(
-        this.$container,
-        this.options.config.snapline
-      )
-      // 流向
-      this.features.Direction = new Direction(
-        this.$container,
-        this.options.config.direction
-      )
-      // 选择
-      this.features.Select = new ShapeSelect(
-        this.$container,
-        this.options.config.select
-      )
-      // 提示
-      this.features.Tooltip = new Tooltip(
-        this.$container,
-        this.options.config.tooltip
-      )
-      // 拖动
-      this.features.Drag = new ShapeDrag(this.options, this.$container)
-      // 组面板
-      this.features.GroupPanel = new GroupPanel(this.$container, this.options)
-    }
-
+    // 初始化功能
+    initFeatures(this.$container, this.options)
     // 绘图
     this.draw = draw(this.options, this.$container)
-
     // 检查字体载入
     loadFont('bpmn', () => {
       IS_FONTLOAD = true