mind-map/dist/js/chunk-2d20f68f.js

(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, So you can first install "),e("code",[s._v("npm i simple-mind-map")]),s._v(" through npm,, Then you can find the "),e("code",[s._v("simpleMindMap.umd.min.js")]),s._v(" file and "),e("code",[s._v("simpleMindMap.esm.min.css")]),s._v(" file in the "),e("code",[s._v("node_modules/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.esm.min.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(", Then it can be instantiated normally, for more detail info you can log "),e("code",[s._v("window.simpleMindMap")]),s._v(".")]),e("p",[s._v("If it is inconvenient to install using 'npm', you can also obtain these two files through some online 'CDN' services, such as:")]),e("pre",{staticClass:"hljs"},[e("code",[s._v("https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css\nhttps://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js\n")])]),e("p",[s._v("You can replace the version number in it.")]),e("p",[s._v("The disadvantage of this method is that it will contain all the content, including the plugins you have not registered(You can find it here "),e("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/full.js#L36"}},[s._v("full.js")]),s._v(" View plugins packaged into files by default), so the overall volume will be relatively large. If you only want to package the specified plugin, you can modify the file and repackage it. If necessary, you can also contact the developer.")]),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.")])])}],i={},l=i,o=t("2877"),p=Object(o["a"])(l,n,a,!1,null,null,null);e["default"]=p.exports}}]);