mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-22 10:57:40 +08:00
客户端打包0.7.0
This commit is contained in:
commit
cd4b5173cc
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
|
||||
window.externalPublicPath = './dist/'
|
||||
// 接管应用
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?fe988b67c86f4c12a4bf" rel="stylesheet"><link href="dist/css/app.css?fe988b67c86f4c12a4bf" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?009f4c7305e0f9f13b31" rel="stylesheet"><link href="dist/css/app.css?009f4c7305e0f9f13b31" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
@ -66,4 +66,4 @@
|
||||
// 可以通过window.$bus.$on()来监听应用的一些事件
|
||||
// 实例化页面
|
||||
window.initApp()
|
||||
}</script><script src="dist/js/chunk-vendors.js?fe988b67c86f4c12a4bf"></script><script src="dist/js/app.js?fe988b67c86f4c12a4bf"></script></body></html>
|
||||
}</script><script src="dist/js/chunk-vendors.js?009f4c7305e0f9f13b31"></script><script src="dist/js/app.js?009f4c7305e0f9f13b31"></script></body></html>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ full screen, support mini map</li>
|
||||
<p>There are many other online mind mapping products similar to Zhixi, such as <a href="https://gitmind.cn/">GitMind</a>、<a href="http://www.mindline.cn/">MindLine</a>、<a href="https://www.mindmeister.com/zh">MinMeister</a>、<a href="https://mubu.com/">Mubu</a> 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.</p>
|
||||
<p>2.<a href="https://github.com/fex-team/kityminder-core">kityminder-core</a></p>
|
||||
<p><code>kityminder-core</code> 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.</p>
|
||||
<p>3.<a href="https://github.com/hizzgdev/jsmind">jsmind</a>、<a href="https://github.com/ssshooter/mind-elixir-core">Mind-elixir</a>、<a href="https://github.com/ondras/my-mind">my-mind</a>、<a href="https://github.com/awehook/blink-mind">blink-mind</a>、<a href="https://github.com/luvsic3/remind">remind</a>、<a href="https://github.com/hellowuxin/vue3-mindmap">vue3-mindmap</a>、<a href="https://github.com/zyascend/ZMindMap">ZMindMap</a>...</p>
|
||||
<p>3.<a href="https://github.com/hizzgdev/jsmind">jsmind</a>、<a href="https://github.com/ssshooter/mind-elixir-core">Mind-elixir</a>、<a href="https://github.com/ondras/my-mind">my-mind</a>、<a href="https://github.com/awehook/blink-mind">blink-mind</a>、<a href="https://github.com/luvsic3/remind">remind</a>、<a href="https://github.com/hellowuxin/vue3-mindmap">vue3-mindmap</a>、<a href="https://github.com/zyascend/ZMindMap">ZMindMap</a>、<a href="https://github.com/RockyRen/mindmaptree">mindmaptree</a>...</p>
|
||||
<p>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.</p>
|
||||
<p>In summary, in open-source mind maps, it is difficult to find a better choice than <code>simple-mind-map</code>. Of course, <code>simple-mind-map</code> is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, <code>simple-mind-map</code> has always been in a fast iteration process, and we welcome you to join and improve it together.</p>
|
||||
<h2>Browser Compatibility</h2>
|
||||
|
||||
@ -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)...
|
||||
|
||||
这些开源的思维导图也都不错,各有各的特点,但是它们也都有一定缺点,比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
<p>类似知犀的其他在线思维导图产品还有很多,比如<a href="https://gitmind.cn/">GitMind</a>、<a href="http://www.mindline.cn/">MindLine</a>、<a href="https://www.mindmeister.com/zh">MinMeister</a>、<a href="https://mubu.com/">幕布</a>等等,搜索引擎上搜索一下非常多,但是这些产品或者是要收费,或者是小公司开发的,稳定性和持续性无法保证,当然最关键的就是它们都不开源。</p>
|
||||
<p>2.<a href="https://github.com/fex-team/kityminder-core">kityminder-core</a></p>
|
||||
<p><code>kityminder-core</code>是百度开发的开源的脑图工具,功能很强大,性能也很好,但是它已经不维护了,所以代码比较陈旧,界面美观度也比较一般,另外bug只能自己修,功能只能自己开发,对前端开发能力要求比较高。</p>
|
||||
<p>3.<a href="https://github.com/hizzgdev/jsmind">jsmind</a>、<a href="https://github.com/ssshooter/mind-elixir-core">Mind-elixir</a>、<a href="https://github.com/ondras/my-mind">my-mind</a>、<a href="https://github.com/awehook/blink-mind">blink-mind</a>、<a href="https://github.com/luvsic3/remind">remind</a>、<a href="https://github.com/hellowuxin/vue3-mindmap">vue3-mindmap</a>、<a href="https://github.com/zyascend/ZMindMap">ZMindMap</a>...</p>
|
||||
<p>3.<a href="https://github.com/hizzgdev/jsmind">jsmind</a>、<a href="https://github.com/ssshooter/mind-elixir-core">Mind-elixir</a>、<a href="https://github.com/ondras/my-mind">my-mind</a>、<a href="https://github.com/awehook/blink-mind">blink-mind</a>、<a href="https://github.com/luvsic3/remind">remind</a>、<a href="https://github.com/hellowuxin/vue3-mindmap">vue3-mindmap</a>、<a href="https://github.com/zyascend/ZMindMap">ZMindMap</a>、<a href="https://github.com/RockyRen/mindmaptree">mindmaptree</a>...</p>
|
||||
<p>这些开源的思维导图也都不错,各有各的特点,但是它们也都有一定缺点,比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。</p>
|
||||
<p>综上,在开源的思维导图中,你很难找到一个比<code>simple-mind-map</code>更好的选择。当然,<code>simple-mind-map</code>也远远谈不上最好,它也有很多不足,如你在前面的【特别说明】所看到的那样,不过<code>simple-mind-map</code>一直处于快速迭代中,欢迎你加入进来一起完善它。</p>
|
||||
<h2>浏览器兼容性</h2>
|
||||
|
||||
@ -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)
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user