diff --git a/package.json b/package.json index 4811521..4bc2ded 100644 --- a/package.json +++ b/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", diff --git a/src/core/designer.js b/src/core/designer.js index 8c2cc9e..52e60ed 100644 --- a/src/core/designer.js +++ b/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 + } + }) } /** diff --git a/src/draw/draw.js b/src/draw/draw.js index 83d8cb8..c2a3415 100644 --- a/src/draw/draw.js +++ b/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 diff --git a/src/features/record/arrayStack.js b/src/features/record/arrayStack.js new file mode 100644 index 0000000..0e1539f --- /dev/null +++ b/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 diff --git a/src/features/record/index.js b/src/features/record/index.js new file mode 100644 index 0000000..8e8733a --- /dev/null +++ b/src/features/record/index.js @@ -0,0 +1,3 @@ +import Record from './record' + +export default Record diff --git a/src/features/record/record.js b/src/features/record/record.js new file mode 100644 index 0000000..a2cc6d7 --- /dev/null +++ b/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 diff --git a/src/main.js b/src/main.js index 49398ea..711f774 100644 --- a/src/main.js +++ b/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