diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 0e7e0f10..3802b389 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -484,6 +484,21 @@ class MindMap { pluginOpt: plugin.pluginOpt }) } + + // 销毁 + destroy() { + // 移除插件 + [...MindMap.pluginList].forEach((plugin) => { + this[plugin.instanceName] = null + }) + // 解绑事件 + this.event.unbind() + // 移除画布节点 + this.svg.remove() + // 去除给容器元素设置的背景样式 + Style.removeBackgroundStyle(this.el) + this.el = null + } } // 插件列表 diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index 1dcf70de..3ffa9a82 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/simple-mind-map/src/core/render/node/Style.js @@ -1,10 +1,20 @@ import { tagColorList } from '../../../constants/constant' const rootProp = ['paddingX', 'paddingY'] +const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize'] // 样式类 class Style { // 设置背景样式 static setBackgroundStyle(el, themeConfig) { + // 缓存容器元素原本的样式 + if (!Style.cacheStyle) { + Style.cacheStyle = {} + let style = window.getComputedStyle(el) + backgroundStyleProps.forEach((prop) => { + Style.cacheStyle[prop] = style[prop] + }) + } + // 设置新样式 let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig el.style.backgroundColor = backgroundColor if (backgroundImage) { @@ -17,6 +27,14 @@ class Style { } } + // 移除背景样式 + static removeBackgroundStyle(el) { + backgroundStyleProps.forEach((prop) => { + el.style[prop] = Style.cacheStyle[prop] + }) + Style.cacheStyle = null + } + // 构造函数 constructor(ctx) { this.ctx = ctx @@ -192,4 +210,6 @@ class Style { } } +Style.cacheStyle = null + export default Style diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js index 7d2626bc..28223265 100644 --- a/simple-mind-map/src/plugins/AssociativeLine.js +++ b/simple-mind-map/src/plugins/AssociativeLine.js @@ -91,12 +91,7 @@ class AssociativeLine { this.mindMap.on('node_dragging', this.onNodeDragging.bind(this)) this.mindMap.on('node_dragend', this.onNodeDragend.bind(this)) // 拖拽控制点 - window.addEventListener('mousemove', e => { - this.onControlPointMousemove(e) - }) - window.addEventListener('mouseup', e => { - this.onControlPointMouseup(e) - }) + this.mindMap.on('mouseup', this.onControlPointMouseup.bind(this)) // 缩放事件 this.mindMap.on('scale', this.onScale) } @@ -266,12 +261,13 @@ class AssociativeLine { // 鼠标移动事件 onMousemove(e) { - if (!this.isCreatingLine) return + this.onControlPointMousemove(e) this.updateCreatingLine(e) } // 更新创建过程中的连接线 updateCreatingLine(e) { + if (!this.isCreatingLine) return let { x, y } = this.getTransformedEventPos(e) let startPoint = getNodePoint(this.creatingStartNode) let offsetX = x > startPoint.x ? -10 : 10 diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 4dcfc5af..33987bf1 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -4,7 +4,7 @@ Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified. -New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. +New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. 5.Add a method for destroying mind maps. Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 5a4ffc3d..9b52847b 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -3,7 +3,7 @@

Changelog

0.6.0

Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.

-

New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited.

+

New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. 5.Add a method for destroying mind maps.

Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node.

0.5.11

New: Supports associative text editing.

diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index f3de24fb..90399ec9 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -145,6 +145,12 @@ List of all currently registered plugins. ## Instance methods +### destroy() + +> v0.6.0+ + +Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas. + ### getSvgData({ paddingX = 0, paddingY = 0 }) > v0.3.0+ diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 6c17d426..4b2b7bc6 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -448,6 +448,11 @@ mindMap.setTheme('Theme name')

List of all currently registered plugins.

Instance methods

+

destroy()

+
+

v0.6.0+

+
+

Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.

getSvgData({ paddingX = 0, paddingY = 0 })

v0.3.0+

diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index 766153a4..468e269f 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -4,7 +4,7 @@ 破坏性更新:调整了simple-mind-map源码的目录结构,主要影响:1.插件的引入路径需要修改。2.constant文件路径需要修改。 -新增:1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点,右键拖动画布。 4.支持控制节点是否允许编辑。 +新增:1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点,右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 修复:1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。 diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 692fe870..82eda2e3 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -3,7 +3,7 @@

Changelog

0.6.0

破坏性更新:调整了simple-mind-map源码的目录结构,主要影响:1.插件的引入路径需要修改。2.constant文件路径需要修改。

-

新增:1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点,右键拖动画布。 4.支持控制节点是否允许编辑。

+

新增:1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点,右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。

修复:1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。

0.5.11

新增:支持关联性文本编辑。

diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 44095928..9608d1b7 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -143,6 +143,12 @@ mindMap.setTheme('主题名称') ## 实例方法 +### destroy() + +> v0.6.0+ + +销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。 + ### getSvgData({ paddingX = 0, paddingY = 0 }) > v0.3.0+ diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index ced413ff..4fec78fb 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -448,6 +448,11 @@ mindMap.setTheme('主题名称')

当前注册的所有插件列表。

实例方法

+

destroy()

+
+

v0.6.0+

+
+

销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。

getSvgData({ paddingX = 0, paddingY = 0 })

v0.3.0+