From 8b99a6c191fb103ad549441b85d690a9fa3d1bc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Wed, 27 Dec 2023 09:57:25 +0800 Subject: [PATCH] Doc: update --- README.md | 4 +++- dist/js/chunk-2d0e2326.js | 2 +- dist/js/chunk-2d20f68f.js | 2 +- index.html | 4 ++-- web/src/pages/Doc/en/start/index.md | 27 +++++++++++++++++++++++++++ web/src/pages/Doc/en/start/index.vue | 17 +++++++++++++++++ web/src/pages/Doc/zh/start/index.md | 27 +++++++++++++++++++++++++++ web/src/pages/Doc/zh/start/index.vue | 17 +++++++++++++++++ 8 files changed, 95 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c1e232a0..ecc47c1a 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,8 @@ Github:[releases](https://github.com/wanglin2/mind-map/releases)。 > 客户端版本会落后于在线版本,尝试最新功能请优先使用在线版。 +> 如果访问github比较慢,可以使用:http://lxqnsys.com/simple-mind-map/#/index + # 特性 - [x] 插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小打包体积 @@ -86,7 +88,7 @@ const mindMap = new MindMap({ # License -[MIT](./LICENSE) +请尽情享受开源:[MIT](./LICENSE) # 微信交流群 diff --git a/dist/js/chunk-2d0e2326.js b/dist/js/chunk-2d0e2326.js index 516b77d7..dad15cfa 100644 --- a/dist/js/chunk-2d0e2326.js +++ b/dist/js/chunk-2d0e2326.js @@ -1 +1 @@ -(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e2326"],{"7e57":function(s,a,t){"use strict";t.r(a);var _=function(){var s=this;s._self._c;return s._m(0)},n=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("开始")]),a("h2",[s._v("安装")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("npm i simple-mind-map\n")])]),a("p",[a("code",[s._v("0.2.0")]),s._v("版本之前的注意事项:")]),a("blockquote",[a("p",[s._v("注意:本项目为源码直接发布,并未进行打包,如果出现编译失败的情况,Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("transpileDependencies")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map'")]),s._v("]\n}\n")])]),a("p",[s._v("其他项目请自行修改打包配置。")])]),a("h2",[s._v("使用")]),a("blockquote",[a("p",[s._v("本仓库的"),a("code",[s._v("web")]),s._v("目录提供了一个基于"),a("code",[s._v("Vue2")]),s._v("的完整项目,如果你遇到了一些使用上的疑惑,可以参考该项目的实现。")])]),a("blockquote",[a("p",[s._v("想要了解在其他框架中的使用,你可以参考以下这些非官方的实现:")]),a("p",[s._v("1."),a("a",{attrs:{href:"https://github.com/huangyuanyin/hyy-vue3-mindMap"}},[s._v("https://github.com/huangyuanyin/hyy-vue3-mindMap")]),s._v(":一个基于 Vue3.2 +ElementPlus的思维导图。")])]),a("p",[s._v("首先提供一个宽高不为0的容器元素:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mindMapContainer"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v(""),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("另外再设置一下"),a("code",[s._v("css")]),s._v("样式:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-selector-id"},[s._v("#mindMapContainer")]),s._v(" * {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n}\n")])]),a("p",[s._v("然后引入"),a("code",[s._v("simple-mind-map")]),s._v("库,创建一个实例:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map"')]),s._v(";\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mindMap = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".getElementById("),a("span",{staticClass:"hljs-string"},[s._v("'mindMapContainer'")]),s._v("),\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": {\n "),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(": {\n "),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"根节点"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-string"},[s._v('"children"')]),s._v(": []\n }\n});\n")])]),a("p",[s._v("这样即可得一个思维导图。")]),a("p",[s._v("如果你想要实现一个完整思维导图,那么通常你需要开发一些ui界面,通过"),a("code",[s._v("simple-mind-map")]),s._v("库提供的接口来实现更多功能。")]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("支持丰富的配置、事件、命令,以及一些额外的插件扩展,阅读后续的文档来了解更多吧。")]),a("p",[s._v("默认引入的是未打包的"),a("code",[s._v("ES")]),s._v("模块,且只包含核心功能,不包含未注册的插件内容,能有效减小体积,不过你需要在你的项目中配置"),a("code",[s._v("babel")]),s._v("编译"),a("code",[s._v("simple-mind-map")]),s._v(",防止一些较新的"),a("code",[s._v("js")]),s._v("语法部分浏览器不支持。")]),a("p",[s._v("如果你需要"),a("code",[s._v("umd")]),s._v("模块格式的文件,比如以"),a("code",[s._v("CDN")]),s._v("的方式在浏览器上使用,那么你可以从"),a("code",[s._v("/simple-mind-map/dist/")]),s._v("目录中找到"),a("code",[s._v("simpleMindMap.umd.min.js")]),s._v("文件和"),a("code",[s._v("simpleMindMap.css")]),s._v("文件,复制到你的项目中,然后在页面中引入:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scr")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.umd.min.js"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v(""),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("会创建一个全局变量"),a("code",[s._v("window.simpleMindMap")]),s._v(",可以通过"),a("code",[s._v("window.simpleMindMap.default")]),s._v("获取到"),a("code",[s._v("MindMap")]),s._v("构造函数,详细信息可以把"),a("code",[s._v("window.simpleMindMap")]),s._v("打印出来看一下。")]),a("p",[s._v("这种方式的缺点是会包含所有的内容,包括你没有注册的插件,所以整体体积会比较大。")]),a("p",[s._v("(v0.5.4+)如果你想直接在浏览器端通过"),a("code",[s._v("ES")]),s._v("模块的方式来使用,你可以在"),a("code",[s._v("/simple-mind-map/dist/")]),s._v("目录中找到"),a("code",[s._v("simpleMindMap.esm.js")]),s._v("和"),a("code",[s._v("simpleMindMap.esm.css")]),s._v("文件。")]),a("h2",[s._v("开发")]),a("p",[s._v("如果你只是使用库的话可以不用阅读此小节。")]),a("h3",[s._v("本地开发")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("git "),a("span",{staticClass:"hljs-built_in"},[s._v("clone")]),s._v(" https://github.com/wanglin2/mind-map.git\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" mind-map\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm i\nnpm link\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" ..\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm i\nnpm link simple-mind-map\nnpm run serve\n")])]),a("h3",[s._v("打包库")]),a("p",[s._v("自"),a("code",[s._v("0.2.0")]),s._v("版本开始增加了对核心库"),a("code",[s._v("simple-mind-map")]),s._v("的打包,复用了示例项目"),a("code",[s._v("web")]),s._v("的打包工具。")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run buildLibrary\n")])]),a("p",[s._v("打包入口为"),a("code",[s._v("simple-mind-map/full.js")]),s._v(",默认会引入所有插件,如果你不需要所有插件的话,那么可以修改该文件,只引入你需要的插件,这样可以减少打包后的文件体积。")]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("库的"),a("code",[s._v("package.json")]),s._v("文件提供了两个导出字段:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"module"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"index.js"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"main"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"./dist/simpleMindMap.umd.min.js"')]),s._v(",\n}\n")])]),a("p",[s._v("支持"),a("code",[s._v("module")]),s._v("字段的环境会以"),a("code",[s._v("index.js")]),s._v("为入口,否则会以打包后的"),a("code",[s._v("simpleMindMap.umd.min.js")]),s._v("为入口。")]),a("h3",[s._v("编译文档")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web \nnpm run buildDoc\n")])]),a("h3",[s._v("打包demo")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run build\n")])]),a("p",[s._v("会自动把"),a("code",[s._v("index.html")]),s._v("移动到根目录。")]),a("h2",[s._v("问题")]),a("h3",[s._v("1.在Vite中使用报错,提示xml-js依赖出错")]),a("p",[s._v("解决方法:使用如下引入方式:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map/dist/simpleMindMap.umd.min"')]),s._v("\n")])]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("包提供未打包的入口字段"),a("code",[s._v("module")]),s._v(",依赖的"),a("code",[s._v("xml-js")]),s._v("包需要引入"),a("code",[s._v("node")]),s._v("环境下的包,所以在"),a("code",[s._v("Vite")]),s._v("中获取不到会报错,所以指定引入打包后的入口,相关包都已打包进产物,所以不会报错。")]),a("p",[s._v("如果需要二次开发,也就是必须要使用未打包代码的话,如果你不需要解析"),a("code",[s._v("xmind")]),s._v("文件的话,可以去除"),a("code",[s._v("xmind")]),s._v("模块,如果需要的话那么可以尝试换成其他的解析"),a("code",[s._v("xml")]),s._v("为"),a("code",[s._v("json")]),s._v("的库。")]),a("h3",[s._v("2.报错"),a("code",[s._v("Getting bbox of element \"text\" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')")])]),a("p",[s._v("原因为安装的"),a("code",[s._v("@svgdotjs/svg.js")]),s._v("版本太高,手动降到"),a("code",[s._v("3.0.16")]),s._v("版本即可。")]),a("h3",[s._v("3.TypeError: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46")]),a("p",[s._v("可以在打包配置文件中增加如下配置:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("resolve: { "),a("span",{staticClass:"hljs-attr"},[s._v("alias")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("stream")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"stream-browserify"')]),s._v(" } }\n")])]),a("p",[s._v("不同的打包工具可能具体配置不一样,原理就是排除"),a("code",[s._v("stream")]),s._v("依赖。")])])}],v={},i=v,l=t("2877"),e=Object(l["a"])(i,_,n,!1,null,null,null);a["default"]=e.exports}}]); \ No newline at end of file +(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e2326"],{"7e57":function(s,a,t){"use strict";t.r(a);var n=function(){var s=this;s._self._c;return s._m(0)},_=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("开始")]),a("h2",[s._v("安装")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("npm i simple-mind-map\n")])]),a("p",[a("code",[s._v("0.2.0")]),s._v("版本之前的注意事项:")]),a("blockquote",[a("p",[s._v("注意:本项目为源码直接发布,并未进行打包,如果出现编译失败的情况,Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("transpileDependencies")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map'")]),s._v("]\n}\n")])]),a("p",[s._v("其他项目请自行修改打包配置。")])]),a("h2",[s._v("使用")]),a("blockquote",[a("p",[s._v("本仓库的"),a("code",[s._v("web")]),s._v("目录提供了一个基于"),a("code",[s._v("Vue2")]),s._v("的完整项目,如果你遇到了一些使用上的疑惑,可以参考该项目的实现。")])]),a("blockquote",[a("p",[s._v("想要了解在其他框架中的使用,你可以参考以下这些非官方的实现:")]),a("p",[s._v("1."),a("a",{attrs:{href:"https://github.com/huangyuanyin/hyy-vue3-mindMap"}},[s._v("https://github.com/huangyuanyin/hyy-vue3-mindMap")]),s._v(":一个基于 Vue3.2 +ElementPlus的思维导图。")])]),a("p",[s._v("首先提供一个宽高不为0的容器元素:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mindMapContainer"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v(""),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("另外再设置一下"),a("code",[s._v("css")]),s._v("样式:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-selector-id"},[s._v("#mindMapContainer")]),s._v(" * {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n}\n")])]),a("p",[s._v("然后引入"),a("code",[s._v("simple-mind-map")]),s._v("库,创建一个实例:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map"')]),s._v(";\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mindMap = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".getElementById("),a("span",{staticClass:"hljs-string"},[s._v("'mindMapContainer'")]),s._v("),\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": {\n "),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(": {\n "),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"根节点"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-string"},[s._v('"children"')]),s._v(": []\n }\n});\n")])]),a("p",[s._v("这样即可得一个思维导图。")]),a("p",[s._v("如果你想要实现一个完整思维导图,那么通常你需要开发一些ui界面,通过"),a("code",[s._v("simple-mind-map")]),s._v("库提供的接口来实现更多功能。")]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("支持丰富的配置、事件、命令,以及一些额外的插件扩展,阅读后续的文档来了解更多吧。")]),a("p",[s._v("默认引入的是未打包的"),a("code",[s._v("ES")]),s._v("模块,且只包含核心功能,不包含未注册的插件内容,能有效减小体积,不过你需要在你的项目中配置"),a("code",[s._v("babel")]),s._v("编译"),a("code",[s._v("simple-mind-map")]),s._v(",防止一些较新的"),a("code",[s._v("js")]),s._v("语法部分浏览器不支持。")]),a("p",[s._v("如果你不想一开始就加载所有插件,想在实例化了之后再异步加载和注册插件,可以这么做:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/plugins/Export.js'")]),s._v(").then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("res")]),s._v(" =>")]),s._v(" {\n mindMap.addPlugin(res.default)\n})\n")])]),a("p",[s._v("如果你需要"),a("code",[s._v("umd")]),s._v("模块格式的文件,比如以"),a("code",[s._v("CDN")]),s._v("的方式在浏览器上使用,那么你可以从"),a("code",[s._v("/simple-mind-map/dist/")]),s._v("目录中找到"),a("code",[s._v("simpleMindMap.umd.min.js")]),s._v("文件和"),a("code",[s._v("simpleMindMap.css")]),s._v("文件,复制到你的项目中,然后在页面中引入:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scr")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.umd.min.js"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v(""),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("会创建一个全局变量"),a("code",[s._v("window.simpleMindMap")]),s._v(",可以通过"),a("code",[s._v("window.simpleMindMap.default")]),s._v("获取到"),a("code",[s._v("MindMap")]),s._v("构造函数,详细信息可以把"),a("code",[s._v("window.simpleMindMap")]),s._v("打印出来看一下。")]),a("p",[s._v("这种方式的缺点是会包含所有的内容,包括你没有注册的插件,所以整体体积会比较大。")]),a("p",[s._v("(v0.5.4+)如果你想直接在浏览器端通过"),a("code",[s._v("ES")]),s._v("模块的方式来使用,你可以在"),a("code",[s._v("/simple-mind-map/dist/")]),s._v("目录中找到"),a("code",[s._v("simpleMindMap.esm.js")]),s._v("和"),a("code",[s._v("simpleMindMap.esm.css")]),s._v("文件。")]),a("p",[s._v("也可以使用在线cdn服务,比如:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("https://unpkg.com/browse/simple-mind-map@0.9.2/dist/\n")])]),a("p",[s._v("可以找到某个版本的所有打包后的文件。")]),a("h2",[s._v("开发")]),a("p",[s._v("如果你只是使用库的话可以不用阅读此小节。")]),a("h3",[s._v("本地开发")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("git "),a("span",{staticClass:"hljs-built_in"},[s._v("clone")]),s._v(" https://github.com/wanglin2/mind-map.git\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" mind-map\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm i\nnpm link\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" ..\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm i\nnpm link simple-mind-map\nnpm run serve\n")])]),a("blockquote",[a("p",[s._v("如果安装依赖出错,可以尝试调整node版本,作者使用的是14.x版本。")])]),a("h3",[s._v("打包库")]),a("p",[s._v("自"),a("code",[s._v("0.2.0")]),s._v("版本开始增加了对核心库"),a("code",[s._v("simple-mind-map")]),s._v("的打包,复用了示例项目"),a("code",[s._v("web")]),s._v("的打包工具。")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run buildLibrary\n")])]),a("p",[s._v("打包入口为"),a("code",[s._v("simple-mind-map/full.js")]),s._v(",默认会引入所有插件,如果你不需要所有插件的话,那么可以修改该文件,只引入你需要的插件,这样可以减少打包后的文件体积。")]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("库的"),a("code",[s._v("package.json")]),s._v("文件提供了两个导出字段:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"module"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"index.js"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"main"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"./dist/simpleMindMap.umd.min.js"')]),s._v(",\n}\n")])]),a("p",[s._v("支持"),a("code",[s._v("module")]),s._v("字段的环境会以"),a("code",[s._v("index.js")]),s._v("为入口,否则会以打包后的"),a("code",[s._v("simpleMindMap.umd.min.js")]),s._v("为入口。")]),a("h4",[s._v("生成TypeScript类型文件")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm run types\n")])]),a("p",[s._v("即可得到"),a("code",[s._v("simple-mind-map/types/")]),s._v("目录下的类型文件。")]),a("h3",[s._v("编译文档")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web \nnpm run buildDoc\n")])]),a("h3",[s._v("打包demo")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run build\n")])]),a("p",[s._v("会自动把"),a("code",[s._v("index.html")]),s._v("移动到根目录。")]),a("h2",[s._v("问题")]),a("h3",[s._v("1.在Vite中使用报错,提示xml-js依赖出错")]),a("p",[s._v("解决方法:使用如下引入方式:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map/dist/simpleMindMap.umd.min"')]),s._v("\n")])]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("包提供未打包的入口字段"),a("code",[s._v("module")]),s._v(",依赖的"),a("code",[s._v("xml-js")]),s._v("包需要引入"),a("code",[s._v("node")]),s._v("环境下的包,所以在"),a("code",[s._v("Vite")]),s._v("中获取不到会报错,所以指定引入打包后的入口,相关包都已打包进产物,所以不会报错。")]),a("p",[s._v("如果需要二次开发,也就是必须要使用未打包代码的话,如果你不需要解析"),a("code",[s._v("xmind")]),s._v("文件的话,可以去除"),a("code",[s._v("xmind")]),s._v("模块,如果需要的话那么可以尝试换成其他的解析"),a("code",[s._v("xml")]),s._v("为"),a("code",[s._v("json")]),s._v("的库。")]),a("h3",[s._v("2.报错"),a("code",[s._v("Getting bbox of element \"text\" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')")])]),a("p",[s._v("原因为安装的"),a("code",[s._v("@svgdotjs/svg.js")]),s._v("版本太高,手动降到"),a("code",[s._v("3.0.16")]),s._v("版本即可。")]),a("h3",[s._v("3.TypeError: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46")]),a("p",[s._v("可以在打包配置文件中增加如下配置:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("resolve: { "),a("span",{staticClass:"hljs-attr"},[s._v("alias")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("stream")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"stream-browserify"')]),s._v(" } }\n")])]),a("p",[s._v("不同的打包工具可能具体配置不一样,原理就是排除"),a("code",[s._v("stream")]),s._v("依赖。")])])}],v={},i=v,l=t("2877"),e=Object(l["a"])(i,n,_,!1,null,null,null);a["default"]=e.exports}}]); \ No newline at end of file diff --git a/dist/js/chunk-2d20f68f.js b/dist/js/chunk-2d20f68f.js index 6403220f..aabf0268 100644 --- a/dist/js/chunk-2d20f68f.js +++ b/dist/js/chunk-2d20f68f.js @@ -1 +1 @@ -(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d20f68f"],{b407:function(e,s,t){"use strict";t.r(s);var a=function(){var e=this;e._self._c;return e._m(0)},n=[function(){var e=this,s=e._self._c;return s("div",[s("h1",[e._v("Start")]),s("h2",[e._v("Installation")]),s("blockquote",[s("p",[e._v("Things to note before version 0.2.0:")])]),s("pre",{staticClass:"hljs"},[s("code",[e._v("npm i simple-mind-map\n")])]),s("p",[s("code",[e._v("0.2.0")]),e._v(" Notes for previous versions:")]),s("blockquote",[s("p",[e._v("Note: This project is directly published in source code form and has not been packaged. If compilation fails, a Vue CLI-created project can add the following configuration to the vue.config.js file to allow babel-loader to compile this dependency:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-built_in"},[e._v("module")]),e._v(".exports = {\n "),s("span",{staticClass:"hljs-attr"},[e._v("transpileDependencies")]),e._v(": ["),s("span",{staticClass:"hljs-string"},[e._v('"simple-mind-map"')]),e._v("],\n};\n")])]),s("p",[e._v("Other projects should modify the packaging configuration as needed.")])]),s("h2",[e._v("Usage")]),s("blockquote",[s("p",[e._v("The "),s("code",[e._v("web")]),e._v(" directory of this repository provides a complete project based on "),s("code",[e._v("Vue2")]),e._v(". If you encounter any doubts about using it, you can refer to the implementation of this project.")])]),s("blockquote",[s("p",[e._v("To learn about its use in other frameworks, you can refer to the following unofficial implementations:")]),s("p",[e._v("1."),s("a",{attrs:{href:"https://github.com/huangyuanyin/hyy-vue3-mindMap"}},[e._v("https://github.com/huangyuanyin/hyy-vue3-mindMap")]),e._v(": A mind map based on Vue3.2+ElementPlus.")])]),s("p",[e._v("Firstly, provide a container element with a width and height not equal to 0:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-tag"},[e._v("<"),s("span",{staticClass:"hljs-name"},[e._v("div")]),e._v(" "),s("span",{staticClass:"hljs-attr"},[e._v("id")]),e._v("="),s("span",{staticClass:"hljs-string"},[e._v('"mindMapContainer"')]),e._v(">")]),s("span",{staticClass:"hljs-tag"},[e._v(""),s("span",{staticClass:"hljs-name"},[e._v("div")]),e._v(">")]),e._v("\n")])]),s("p",[e._v("Also, set the "),s("code",[e._v("CSS")]),e._v(" style again:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-selector-id"},[e._v("#mindMapContainer")]),e._v(" * {\n "),s("span",{staticClass:"hljs-attribute"},[e._v("margin")]),e._v(": "),s("span",{staticClass:"hljs-number"},[e._v("0")]),e._v(";\n "),s("span",{staticClass:"hljs-attribute"},[e._v("padding")]),e._v(": "),s("span",{staticClass:"hljs-number"},[e._v("0")]),e._v(";\n}\n")])]),s("p",[e._v("Then introduce the "),s("code",[e._v("simple-mind-map")]),e._v(" library and create an instance:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[e._v("import")]),e._v(" MindMap "),s("span",{staticClass:"hljs-keyword"},[e._v("from")]),e._v(" "),s("span",{staticClass:"hljs-string"},[e._v('"simple-mind-map"')]),e._v(";\n\n"),s("span",{staticClass:"hljs-keyword"},[e._v("const")]),e._v(" mindMap = "),s("span",{staticClass:"hljs-keyword"},[e._v("new")]),e._v(" MindMap({\n "),s("span",{staticClass:"hljs-attr"},[e._v("el")]),e._v(": "),s("span",{staticClass:"hljs-built_in"},[e._v("document")]),e._v(".getElementById("),s("span",{staticClass:"hljs-string"},[e._v("'mindMapContainer'")]),e._v("),\n "),s("span",{staticClass:"hljs-attr"},[e._v("data")]),e._v(": {\n "),s("span",{staticClass:"hljs-string"},[e._v('"data"')]),e._v(": {\n "),s("span",{staticClass:"hljs-string"},[e._v('"text"')]),e._v(": "),s("span",{staticClass:"hljs-string"},[e._v('"Root Node"')]),e._v("\n },\n "),s("span",{staticClass:"hljs-string"},[e._v('"children"')]),e._v(": []\n }\n});\n")])]),s("p",[e._v("This will result in a mind map.")]),s("p",[e._v("If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the "),s("code",[e._v("simple-mind-map")]),e._v(" library.")]),s("p",[s("code",[e._v("simple-mind-map")]),e._v(" supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.")]),s("p",[e._v("The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the "),s("code",[e._v("babel")]),e._v(" compilation "),s("code",[e._v("simple mind-map")]),e._v(" in your project to prevent some newer "),s("code",[e._v("js")]),e._v(" syntax some browsers not supporting it.")]),s("p",[e._v("If you need a file in the format of "),s("code",[e._v("umd")]),e._v(" module, such as "),s("code",[e._v("CDN")]),e._v(" in the browser, Then you can find the "),s("code",[e._v("simpleMindMap.umd.min.js")]),e._v(" file and "),s("code",[e._v("simpleMindMap.css")]),e._v(" file in the "),s("code",[e._v("/simple-mind-map/dist/")]),e._v(" directory, copy it to your project, and then import it into the page:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-tag"},[e._v("<"),s("span",{staticClass:"hljs-name"},[e._v("link")]),e._v(" "),s("span",{staticClass:"hljs-attr"},[e._v("rel")]),e._v("="),s("span",{staticClass:"hljs-string"},[e._v('"stylesheet"')]),e._v(" "),s("span",{staticClass:"hljs-attr"},[e._v("href")]),e._v("="),s("span",{staticClass:"hljs-string"},[e._v('"simpleMindMap.css"')]),e._v(">")]),e._v("\n"),s("span",{staticClass:"hljs-tag"},[e._v("<"),s("span",{staticClass:"hljs-name"},[e._v("script")]),e._v(" "),s("span",{staticClass:"hljs-attr"},[e._v("scr")]),e._v("="),s("span",{staticClass:"hljs-string"},[e._v('"simpleMindMap.umd.min.js"')]),e._v(">")]),s("span",{staticClass:"hljs-tag"},[e._v(""),s("span",{staticClass:"hljs-name"},[e._v("script")]),e._v(">")]),e._v("\n")])]),s("p",[e._v("A global variable "),s("code",[e._v("window.simpleMindMap")]),e._v(" will be created. you can get "),s("code",[e._v("MindMap")]),e._v(" constructor by "),s("code",[e._v("window.simpleMindMap.default")]),e._v(", for more detail info you can log "),s("code",[e._v("window.simpleMindMap")]),e._v(".")]),s("p",[e._v("The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.")]),s("p",[e._v("(v0.5.4+)If you want to use the "),s("code",[e._v("ES")]),e._v(" module directly on the browser side, you can find the "),s("code",[e._v("simpleMindMap.esm.js")]),e._v(" and "),s("code",[e._v("simpleMindMap.esm.css")]),e._v(" files in the "),s("code",[e._v("/simple-mind-map/dist/")]),e._v(" directory.")]),s("h2",[e._v("Development")]),s("p",[e._v("If you only use library, you don't need to read this section.")]),s("h3",[e._v("Local Development")]),s("pre",{staticClass:"hljs"},[s("code",[e._v("git "),s("span",{staticClass:"hljs-built_in"},[e._v("clone")]),e._v(" https://github.com/wanglin2/mind-map.git\n"),s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" mind-map\n"),s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" simple-mind-map\nnpm i\nnpm link\n"),s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" ..\n"),s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" web\nnpm i\nnpm link simple-mind-map\nnpm run serve\n")])]),s("h3",[e._v("Packaging the Library")]),s("p",[e._v("Since version "),s("code",[e._v("0.2.0")]),e._v(", we have added support for packaging the core library simple-mind-map. This uses the same packaging tool as the sample project web.")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" web\nnpm run buildLibrary\n")])]),s("p",[e._v("The packaging entry is "),s("code",[e._v("simple-mind-map/full.js")]),e._v(", which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.")]),s("p",[e._v("The "),s("code",[e._v("package.json")]),e._v(" file in the "),s("code",[e._v("simple-mind-map")]),e._v(" library provides two export fields:")]),s("pre",{staticClass:"hljs"},[s("code",[e._v("{\n "),s("span",{staticClass:"hljs-attr"},[e._v('"module"')]),e._v(": "),s("span",{staticClass:"hljs-string"},[e._v('"index.js"')]),e._v(",\n "),s("span",{staticClass:"hljs-attr"},[e._v('"main"')]),e._v(": "),s("span",{staticClass:"hljs-string"},[e._v('"./dist/simpleMindMap.umd.min.js"')]),e._v("\n}\n")])]),s("p",[e._v("Environments that support the "),s("code",[e._v("module")]),e._v(" field will use "),s("code",[e._v("index.js")]),e._v(" as the entry point, otherwise the packed "),s("code",[e._v("simpleMindMap.umd.min.js")]),e._v(" will be used as the entry point.")]),s("h3",[e._v("Compile the doc")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" web \nnpm run buildDoc\n")])]),s("h3",[e._v("Packaging the Demo")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-built_in"},[e._v("cd")]),e._v(" web\nnpm run build\n")])]),s("p",[e._v("The "),s("code",[e._v("index.html")]),e._v(" file will be automatically moved to the root directory.")]),s("h2",[e._v("Problems")]),s("h3",[e._v("Error when using in Vite, indicating xml-js dependency error")]),s("p",[e._v("Solution: use the following import method:")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[e._v("import")]),e._v(" MindMap "),s("span",{staticClass:"hljs-keyword"},[e._v("from")]),e._v(" "),s("span",{staticClass:"hljs-string"},[e._v('"simple-mind-map/dist/simpleMindMap.umd.min"')]),e._v(";\n")])]),s("p",[e._v("The "),s("code",[e._v("simple-mind-map")]),e._v(" package provides the unpacked entry field "),s("code",[e._v("module")]),e._v(", and the "),s("code",[e._v("xml-js")]),e._v(" package dependency needs to import the package in the "),s("code",[e._v("node")]),e._v(" environment. Therefore, it cannot be obtained in "),s("code",[e._v("Vite")]),e._v(" and an error will be reported. Therefore, specify the import of the packed entry, and all relevant packages are packed into the product, so there will be no error.")]),s("p",[e._v("If you need to do further development, that is, you must use the unpacked code, and if you do not need to parse the "),s("code",[e._v("xmind")]),e._v(" file, you can remove the "),s("code",[e._v("xmind")]),e._v(" module. If you need it, you can try using other libraries to parse "),s("code",[e._v("xml")]),e._v(" to "),s("code",[e._v("json")]),e._v(".")]),s("h3",[e._v("Error "),s("code",[e._v("Getting bbox of element \"text\" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')")])]),s("p",[e._v("The reason is that the installed version of "),s("code",[e._v("@svgdotjs/svg.js")]),e._v(" is too high. You can manually reduce it to the version of "),s("code",[e._v("3.0.16")]),e._v(".")]),s("h3",[e._v("TypeError: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46")]),s("p",[e._v("The following configurations can be added to the packaging configuration file:")]),s("pre",{staticClass:"hljs"},[s("code",[e._v("resolve: { "),s("span",{staticClass:"hljs-attr"},[e._v("alias")]),e._v(": { "),s("span",{staticClass:"hljs-attr"},[e._v("stream")]),e._v(": "),s("span",{staticClass:"hljs-string"},[e._v('"stream-browserify"')]),e._v(" } }\n")])]),s("p",[e._v("Different packaging tools may have different specific configurations, with the principle of excluding 'stream' dependencies.")])])}],i={},o=i,l=t("2877"),p=Object(l["a"])(o,a,n,!1,null,null,null);s["default"]=p.exports}}]); \ No newline at end of file +(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d20f68f"],{b407:function(s,e,t){"use strict";t.r(e);var n=function(){var s=this;s._self._c;return s._m(0)},a=[function(){var s=this,e=s._self._c;return e("div",[e("h1",[s._v("Start")]),e("h2",[s._v("Installation")]),e("blockquote",[e("p",[s._v("Things to note before version 0.2.0:")])]),e("pre",{staticClass:"hljs"},[e("code",[s._v("npm i simple-mind-map\n")])]),e("p",[e("code",[s._v("0.2.0")]),s._v(" Notes for previous versions:")]),e("blockquote",[e("p",[s._v("Note: This project is directly published in source code form and has not been packaged. If compilation fails, a Vue CLI-created project can add the following configuration to the vue.config.js file to allow babel-loader to compile this dependency:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n "),e("span",{staticClass:"hljs-attr"},[s._v("transpileDependencies")]),s._v(": ["),e("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map"')]),s._v("],\n};\n")])]),e("p",[s._v("Other projects should modify the packaging configuration as needed.")])]),e("h2",[s._v("Usage")]),e("blockquote",[e("p",[s._v("The "),e("code",[s._v("web")]),s._v(" directory of this repository provides a complete project based on "),e("code",[s._v("Vue2")]),s._v(". If you encounter any doubts about using it, you can refer to the implementation of this project.")])]),e("blockquote",[e("p",[s._v("To learn about its use in other frameworks, you can refer to the following unofficial implementations:")]),e("p",[s._v("1."),e("a",{attrs:{href:"https://github.com/huangyuanyin/hyy-vue3-mindMap"}},[s._v("https://github.com/huangyuanyin/hyy-vue3-mindMap")]),s._v(": A mind map based on Vue3.2+ElementPlus.")])]),e("p",[s._v("Firstly, provide a container element with a width and height not equal to 0:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-tag"},[s._v("<"),e("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),e("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),e("span",{staticClass:"hljs-string"},[s._v('"mindMapContainer"')]),s._v(">")]),e("span",{staticClass:"hljs-tag"},[s._v(""),e("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])]),e("p",[s._v("Also, set the "),e("code",[s._v("CSS")]),s._v(" style again:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-selector-id"},[s._v("#mindMapContainer")]),s._v(" * {\n "),e("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),e("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),e("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),e("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n}\n")])]),e("p",[s._v("Then introduce the "),e("code",[s._v("simple-mind-map")]),s._v(" library and create an instance:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),e("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),e("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map"')]),s._v(";\n\n"),e("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mindMap = "),e("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n "),e("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),e("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".getElementById("),e("span",{staticClass:"hljs-string"},[s._v("'mindMapContainer'")]),s._v("),\n "),e("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": {\n "),e("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(": {\n "),e("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(": "),e("span",{staticClass:"hljs-string"},[s._v('"Root Node"')]),s._v("\n },\n "),e("span",{staticClass:"hljs-string"},[s._v('"children"')]),s._v(": []\n }\n});\n")])]),e("p",[s._v("This will result in a mind map.")]),e("p",[s._v("If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the "),e("code",[s._v("simple-mind-map")]),s._v(" library.")]),e("p",[e("code",[s._v("simple-mind-map")]),s._v(" supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.")]),e("p",[s._v("The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the "),e("code",[s._v("babel")]),s._v(" compilation "),e("code",[s._v("simple mind-map")]),s._v(" in your project to prevent some newer "),e("code",[s._v("js")]),s._v(" syntax some browsers not supporting it.")]),e("p",[s._v("If you don't want to load all plugins from the beginning and want to load and register plugins asynchronously after instantiation, you can do this:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v("("),e("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/plugins/Export.js'")]),s._v(").then("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[s._v("res")]),s._v(" =>")]),s._v(" {\n mindMap.addPlugin(res.default)\n})\n")])]),e("p",[s._v("If you need a file in the format of "),e("code",[s._v("umd")]),s._v(" module, such as "),e("code",[s._v("CDN")]),s._v(" in the browser, Then you can find the "),e("code",[s._v("simpleMindMap.umd.min.js")]),s._v(" file and "),e("code",[s._v("simpleMindMap.css")]),s._v(" file in the "),e("code",[s._v("/simple-mind-map/dist/")]),s._v(" directory, copy it to your project, and then import it into the page:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-tag"},[s._v("<"),e("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),e("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),e("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),e("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),e("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.css"')]),s._v(">")]),s._v("\n"),e("span",{staticClass:"hljs-tag"},[s._v("<"),e("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),e("span",{staticClass:"hljs-attr"},[s._v("scr")]),s._v("="),e("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.umd.min.js"')]),s._v(">")]),e("span",{staticClass:"hljs-tag"},[s._v(""),e("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),e("p",[s._v("A global variable "),e("code",[s._v("window.simpleMindMap")]),s._v(" will be created. you can get "),e("code",[s._v("MindMap")]),s._v(" constructor by "),e("code",[s._v("window.simpleMindMap.default")]),s._v(", for more detail info you can log "),e("code",[s._v("window.simpleMindMap")]),s._v(".")]),e("p",[s._v("The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.")]),e("p",[s._v("(v0.5.4+)If you want to use the "),e("code",[s._v("ES")]),s._v(" module directly on the browser side, you can find the "),e("code",[s._v("simpleMindMap.esm.js")]),s._v(" and "),e("code",[s._v("simpleMindMap.esm.css")]),s._v(" files in the "),e("code",[s._v("/simple-mind-map/dist/")]),s._v(" directory.")]),e("p",[s._v("Online CDN services can also be used, such as:")]),e("pre",{staticClass:"hljs"},[e("code",[s._v("https://unpkg.com/browse/simple-mind-map@0.9.2/dist/\n")])]),e("p",[s._v("You can find all the packaged files for a certain version.")]),e("h2",[s._v("Development")]),e("p",[s._v("If you only use library, you don't need to read this section.")]),e("h3",[s._v("Local Development")]),e("pre",{staticClass:"hljs"},[e("code",[s._v("git "),e("span",{staticClass:"hljs-built_in"},[s._v("clone")]),s._v(" https://github.com/wanglin2/mind-map.git\n"),e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" mind-map\n"),e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm i\nnpm link\n"),e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" ..\n"),e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm i\nnpm link simple-mind-map\nnpm run serve\n")])]),e("blockquote",[e("p",[s._v("If there is an installation dependency error, you can try adjusting the node version. The author is using version 14. x.")])]),e("h3",[s._v("Packaging the Library")]),e("p",[s._v("Since version "),e("code",[s._v("0.2.0")]),s._v(", we have added support for packaging the core library simple-mind-map. This uses the same packaging tool as the sample project web.")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run buildLibrary\n")])]),e("p",[s._v("The packaging entry is "),e("code",[s._v("simple-mind-map/full.js")]),s._v(", which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.")]),e("p",[s._v("The "),e("code",[s._v("package.json")]),s._v(" file in the "),e("code",[s._v("simple-mind-map")]),s._v(" library provides two export fields:")]),e("pre",{staticClass:"hljs"},[e("code",[s._v("{\n "),e("span",{staticClass:"hljs-attr"},[s._v('"module"')]),s._v(": "),e("span",{staticClass:"hljs-string"},[s._v('"index.js"')]),s._v(",\n "),e("span",{staticClass:"hljs-attr"},[s._v('"main"')]),s._v(": "),e("span",{staticClass:"hljs-string"},[s._v('"./dist/simpleMindMap.umd.min.js"')]),s._v("\n}\n")])]),e("p",[s._v("Environments that support the "),e("code",[s._v("module")]),s._v(" field will use "),e("code",[s._v("index.js")]),s._v(" as the entry point, otherwise the packed "),e("code",[s._v("simpleMindMap.umd.min.js")]),s._v(" will be used as the entry point.")]),e("h4",[s._v("Generate TypeScript type files")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm run types\n")])]),e("p",[s._v("You can obtain the type files in the 'simple-mind-map/types/' directory.")]),e("h3",[s._v("Compile the doc")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web \nnpm run buildDoc\n")])]),e("h3",[s._v("Packaging the Demo")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run build\n")])]),e("p",[s._v("The "),e("code",[s._v("index.html")]),s._v(" file will be automatically moved to the root directory.")]),e("h2",[s._v("Problems")]),e("h3",[s._v("Error when using in Vite, indicating xml-js dependency error")]),e("p",[s._v("Solution: use the following import method:")]),e("pre",{staticClass:"hljs"},[e("code",[e("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),e("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),e("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map/dist/simpleMindMap.umd.min"')]),s._v(";\n")])]),e("p",[s._v("The "),e("code",[s._v("simple-mind-map")]),s._v(" package provides the unpacked entry field "),e("code",[s._v("module")]),s._v(", and the "),e("code",[s._v("xml-js")]),s._v(" package dependency needs to import the package in the "),e("code",[s._v("node")]),s._v(" environment. Therefore, it cannot be obtained in "),e("code",[s._v("Vite")]),s._v(" and an error will be reported. Therefore, specify the import of the packed entry, and all relevant packages are packed into the product, so there will be no error.")]),e("p",[s._v("If you need to do further development, that is, you must use the unpacked code, and if you do not need to parse the "),e("code",[s._v("xmind")]),s._v(" file, you can remove the "),e("code",[s._v("xmind")]),s._v(" module. If you need it, you can try using other libraries to parse "),e("code",[s._v("xml")]),s._v(" to "),e("code",[s._v("json")]),s._v(".")]),e("h3",[s._v("Error "),e("code",[s._v("Getting bbox of element \"text\" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')")])]),e("p",[s._v("The reason is that the installed version of "),e("code",[s._v("@svgdotjs/svg.js")]),s._v(" is too high. You can manually reduce it to the version of "),e("code",[s._v("3.0.16")]),s._v(".")]),e("h3",[s._v("TypeError: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46")]),e("p",[s._v("The following configurations can be added to the packaging configuration file:")]),e("pre",{staticClass:"hljs"},[e("code",[s._v("resolve: { "),e("span",{staticClass:"hljs-attr"},[s._v("alias")]),s._v(": { "),e("span",{staticClass:"hljs-attr"},[s._v("stream")]),s._v(": "),e("span",{staticClass:"hljs-string"},[s._v('"stream-browserify"')]),s._v(" } }\n")])]),e("p",[s._v("Different packaging tools may have different specific configurations, with the principle of excluding 'stream' dependencies.")])])}],i={},o=i,l=t("2877"),p=Object(l["a"])(o,n,a,!1,null,null,null);e["default"]=p.exports}}]); \ No newline at end of file diff --git a/index.html b/index.html index 027290c9..1693a427 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@