diff --git a/index.html b/index.html index 683b4ee7..fe8aa9fa 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ 思绪思维导图
+ } diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index 8ec946ce..5f53134e 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -18,7 +18,8 @@ import { addDataToAppointNodes, createUidForAppointNodes, formatDataToArray, - getNodeIndex + getNodeIndex, + createUid } from '../../utils' import { shapeList } from './node/Shape' import { lineStyleProps } from '../../themes/default' @@ -494,15 +495,17 @@ class Render { const index = parent.nodeData.children.findIndex(item => { return item.data.uid === node.uid }) - parent.nodeData.children.splice(index + 1, 0, { + const newNodeData = { inserting: handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式, data: { text: text, ...params, + uid: createUid(), ...(appointData || {}) }, - children: [...appointChildren] - }) + children: [...createUidForAppointNodes(appointChildren)] + } + parent.nodeData.children.splice(index + 1, 0, newNodeData) }) Object.keys(needDestroyNodeList).forEach(key => { needDestroyNodeList[key].destroy() @@ -546,10 +549,11 @@ class Render { const index = parent.nodeData.children.findIndex(item => { return item.data.uid === node.uid }) + const newNodeList = createUidForAppointNodes(simpleDeepClone(nodeList)) parent.nodeData.children.splice( index + 1, 0, - ...createUidForAppointNodes(simpleDeepClone(nodeList)) + ...newNodeList ) }) Object.keys(needDestroyNodeList).forEach(key => { @@ -598,15 +602,17 @@ class Render { const text = node.isRoot ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText - node.nodeData.children.push({ + const newNode = { inserting: handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式 data: { text: text, + uid: createUid(), ...params, ...(appointData || {}) }, - children: [...appointChildren] - }) + children: [...createUidForAppointNodes(appointChildren)] + } + node.nodeData.children.push(newNode) // 插入子节点时自动展开子节点 node.nodeData.data.expand = true if (node.isRoot) { @@ -644,6 +650,7 @@ class Render { if (!node.nodeData.children) { node.nodeData.children = [] } + childList = createUidForAppointNodes(childList) node.nodeData.children.push(...childList) // 插入子节点时自动展开子节点 node.nodeData.data.expand = true diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index c0918ad0..a882ffcd 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -170,8 +170,10 @@ export const copyNodeTree = ( keepId = false ) => { tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data) - // 去除节点uid，因为节点uid不能重复 - if (tree.data.uid && !keepId) delete tree.data.uid + // 重新创建节点uid，因为节点uid不能重复 + if (!keepId) { + tree.data.uid = createUid() + } if (removeActiveState) { tree.data.isActive = false } @@ -464,7 +466,7 @@ export const removeHTMLEntities = str => { // 获取一个数据的类型 export const getType = data => { - return Object.prototype.toString.call(data).slice(7, -1) + return Object.prototype.toString.call(data).slice(8, -1) } // 判断一个数据是否是null和undefined和空字符串 @@ -823,3 +825,49 @@ export const htmlEscape = str => { }) return str } + +// 判断两个对象是否相同，只处理对象或数组 +export const isSameObject = (a, b) => { + const type = getType(a) + // a、b类型不一致，那么肯定不相同 + if (type !== getType(b)) return false + // 如果都是对象 + if (type === 'Object') { + const keysa = Object.keys(a) + const keysb = Object.keys(b) + // 对象字段数量不一样，肯定不相同 + if (keysa.length !== keysb.length) return false + // 字段数量一样，那么需要遍历字段进行判断 + for (let i = 0; i < keysa.length; i++) { + const key = keysa[i] + // b没有a的一个字段，那么肯定不相同 + if (!keysb.includes(key)) return false + // 字段名称一样，那么需要递归判断它们的值 + const isSame = isSameObject(a[key], b[key]) + if (!isSame) { + return false + } + } + return true + } else if (type === 'Array') { + // 如果都是数组 + // 数组长度不一样，肯定不相同 + if (a.length !== b.length) return false + // 长度一样，那么需要遍历进行判断 + for (let i = 0; i < a.length; i++) { + const itema = a[i] + const itemb = b[i] + const typea = getType(itema) + const typeb = getType(itemb) + if (typea !== typeb) return false + const isSame = isSameObject(itema, itemb) + if (!isSame) { + return false + } + } + return true + } else { + // 其他类型，直接全等判断 + return a === b + } +} diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md index 4a35e93f..5c75972a 100644 --- a/web/src/pages/Doc/en/introduction/index.md +++ b/web/src/pages/Doc/en/introduction/index.md @@ -92,7 +92,7 @@ There are many other online mind mapping products similar to Zhixi, such as [Git `kityminder-core` is an open source brain mapping tool developed by Baidu. It has powerful functions and good performance, but it is no longer maintained. Therefore, the code is relatively old, and the interface beauty is relatively ordinary. In addition, bugs can only be fixed by yourself, and the functions can only be developed by yourself. It has high requirements for front-end development capabilities. -3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)... +3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)、[mindmaptree](https://github.com/RockyRen/mindmaptree)... These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on. diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue index 26077b8b..9389a4a4 100644 --- a/web/src/pages/Doc/en/introduction/index.vue +++ b/web/src/pages/Doc/en/introduction/index.vue @@ -64,7 +64,7 @@ full screen, support mini map

There are many other online mind mapping products similar to Zhixi, such as GitMind、MindLine、MinMeister、Mubu and so on, There are many searches on search engines, but these products either require fees or are developed by small companies, and their stability and sustainability cannot be guaranteed. Of course, the most crucial thing is that they are not open-source.

2.kityminder-core

kityminder-core is an open source brain mapping tool developed by Baidu. It has powerful functions and good performance, but it is no longer maintained. Therefore, the code is relatively old, and the interface beauty is relatively ordinary. In addition, bugs can only be fixed by yourself, and the functions can only be developed by yourself. It has high requirements for front-end development capabilities.

-

3.jsmind、Mind-elixir、my-mind、blink-mind、remind、vue3-mindmap、ZMindMap...

+

3.jsmind、Mind-elixir、my-mind、blink-mind、remind、vue3-mindmap、ZMindMap、mindmaptree...

These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on.

In summary, in open-source mind maps, it is difficult to find a better choice than simple-mind-map. Of course, simple-mind-map is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, simple-mind-map has always been in a fast iteration process, and we welcome you to join and improve it together.

Browser Compatibility

diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md index 8b5e146f..cb153722 100644 --- a/web/src/pages/Doc/zh/introduction/index.md +++ b/web/src/pages/Doc/zh/introduction/index.md @@ -83,7 +83,7 @@ `kityminder-core`是百度开发的开源的脑图工具，功能很强大，性能也很好，但是它已经不维护了，所以代码比较陈旧，界面美观度也比较一般，另外bug只能自己修，功能只能自己开发，对前端开发能力要求比较高。 -3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)... +3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)、[mindmaptree](https://github.com/RockyRen/mindmaptree)... 这些开源的思维导图也都不错，各有各的特点，但是它们也都有一定缺点，比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。 diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue index 86577a47..f256a8c4 100644 --- a/web/src/pages/Doc/zh/introduction/index.vue +++ b/web/src/pages/Doc/zh/introduction/index.vue @@ -55,7 +55,7 @@

类似知犀的其他在线思维导图产品还有很多，比如GitMind、MindLine、MinMeister、幕布等等，搜索引擎上搜索一下非常多，但是这些产品或者是要收费，或者是小公司开发的，稳定性和持续性无法保证，当然最关键的就是它们都不开源。

2.kityminder-core

kityminder-core是百度开发的开源的脑图工具，功能很强大，性能也很好，但是它已经不维护了，所以代码比较陈旧，界面美观度也比较一般，另外bug只能自己修，功能只能自己开发，对前端开发能力要求比较高。

-

3.jsmind、Mind-elixir、my-mind、blink-mind、remind、vue3-mindmap、ZMindMap...

+

3.jsmind、Mind-elixir、my-mind、blink-mind、remind、vue3-mindmap、ZMindMap、mindmaptree...

这些开源的思维导图也都不错，各有各的特点，但是它们也都有一定缺点，比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。

综上，在开源的思维导图中，你很难找到一个比simple-mind-map更好的选择。当然，simple-mind-map也远远谈不上最好，它也有很多不足，如你在前面的【特别说明】所看到的那样，不过simple-mind-map一直处于快速迭代中，欢迎你加入进来一起完善它。

浏览器兼容性

diff --git a/web/src/pages/Edit/components/FormulaSidebar.vue b/web/src/pages/Edit/components/FormulaSidebar.vue index 114025ef..bf95acac 100644 --- a/web/src/pages/Edit/components/FormulaSidebar.vue +++ b/web/src/pages/Edit/components/FormulaSidebar.vue @@ -89,7 +89,7 @@ export default { handleNodeActive(...args) { this.activeNodes = [...args[1]] - if (this.activeNodes.length <= 0) { + if (this.activeNodes.length <= 0 && this.activeSidebar === 'formulaSidebar') { this.setActiveSidebar(null) } },