diff --git a/index.html b/index.html index fb941603..0c4e2eb5 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 1505df69..5e0bed02 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -61,7 +61,14 @@ const defaultOpt = { } }, // 达到该宽度文本自动换行 - textAutoWrapWidth: 500 + textAutoWrapWidth: 500, + // 自定义鼠标滚轮事件处理 + // 可以传一个函数，回调参数为事件对象 + customHandleMousewheel: null, + // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效 + mousewheelAction: 'zoom',// zoom（放大缩小）、move（上下移动） + // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px + mousewheelMoveStep: 100 } // 思维导图 diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index a7a6bd20..d6a21847 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.4.2", + "version": "0.4.3", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/Command.js b/simple-mind-map/src/Command.js index f7d85b15..25ad3f33 100644 --- a/simple-mind-map/src/Command.js +++ b/simple-mind-map/src/Command.js @@ -98,7 +98,9 @@ class Command { this.activeHistoryIndex, this.history.length ) - return simpleDeepClone(this.history[this.activeHistoryIndex]) + let data = simpleDeepClone(this.history[this.activeHistoryIndex]) + this.mindMap.emit('data_change', data) + return data } } @@ -111,7 +113,9 @@ class Command { if (this.activeHistoryIndex + step <= len - 1) { this.activeHistoryIndex += step this.mindMap.emit('back_forward', this.activeHistoryIndex) - return simpleDeepClone(this.history[this.activeHistoryIndex]) + let data = simpleDeepClone(this.history[this.activeHistoryIndex]) + this.mindMap.emit('data_change', data) + return data } } diff --git a/simple-mind-map/src/View.js b/simple-mind-map/src/View.js index 244293a4..d2110c79 100644 --- a/simple-mind-map/src/View.js +++ b/simple-mind-map/src/View.js @@ -55,12 +55,25 @@ class View { }) // 放大缩小视图 this.mindMap.event.on('mousewheel', (e, dir) => { - // // 放大 - if (dir === 'down') { - this.enlarge() + if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') { + return this.mindMap.opt.customHandleMousewheel(e) + } + if (this.mindMap.opt.mousewheelAction === 'zoom') { + // 放大 + if (dir === 'down') { + this.enlarge() + } else { + // 缩小 + this.narrow() + } } else { - // 缩小 - this.narrow() + // 上移 + if (dir === 'down') { + this.translateY(-this.mindMap.opt.mousewheelMoveStep) + } else { + // 下移 + this.translateY(this.mindMap.opt.mousewheelMoveStep) + } } }) } diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index fe0f116f..5c3427f2 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -35,7 +35,10 @@ export default { watermarkAngle: 'Angle', watermarkTextOpacity: 'Text opacity', watermarkTextFontSize: 'Font size', - isEnableNodeRichText: 'Enable node rich text editing' + isEnableNodeRichText: 'Enable node rich text editing', + mousewheelAction: 'Mouse wheel behavior', + zoomView: 'Zoom view', + moveViewUpDown: 'Move view up and down' }, color: { moreColor: 'More color' diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 9596aefb..cbd64437 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -35,7 +35,10 @@ export default { watermarkAngle: '旋转角度', watermarkTextOpacity: '文字透明度', watermarkTextFontSize: '文字字号', - isEnableNodeRichText: '是否开启节点富文本编辑' + isEnableNodeRichText: '是否开启节点富文本编辑', + mousewheelAction: '鼠标滚轮行为', + zoomView: '缩放视图', + moveViewUpDown: '上下移动视图' }, color: { moreColor: '更多颜色' diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index ce47c0c0..7e476b91 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,11 @@ # Changelog +## 0.4.3 + +Fix: No trigger after forward and backward `data_ Change` event. + +New: Support user-defined mouse wheel events; The mouse wheel is adjusted to support zooming and moving the view up and down. + ## 0.4.2 New: The `setText` method of the Node class adds a second parameter to support setting rich text content. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 23f48957..0f9ee935 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,9 @@