+ ccccs
+ 
黄泳
+
+
+ ccccs
+
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 78995e6d..fc92472d 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
- "version": "0.10.3",
+ "version": "0.10.4",
"description": "一个简单的web在线思维导图",
"authors": [
{
diff --git a/web/src/assets/avatar/ccccs.jpg b/web/src/assets/avatar/ccccs.jpg
new file mode 100644
index 00000000..e0f13c22
Binary files /dev/null and b/web/src/assets/avatar/ccccs.jpg differ
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index a972753a..fdd7499e 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,15 @@
# Changelog
+## 0.10.4
+
+> 2024.7.25
+
+This update mainly adds a performance mode. When enabled, only nodes within the visible area of the canvas will be rendered, and nodes outside the area will be deleted from the canvas, improving usability in the case of large data volumes (1000+nodes). The first rendering time for 2000 nodes has been reduced from 5s+to 0.5s. However, this also brings some problems, such as a slight lag when dragging the animation canvas, as nodes will be rendered in real time, and exporting images will be slower because all nodes need to be rendered first, as well as other temporarily undiscovered issues.
+
+Fix:
+
+> 1.Delete useless code and fix the issue where the mouse hover node reports an error and does not display the expand and collapse buttons;
+
## 0.10.3
> 2024.7.19
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index 875a18ab..16365a2f 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,15 @@
++2024.7.25
+
This update mainly adds a performance mode. When enabled, only nodes within the visible area of the canvas will be rendered, and nodes outside the area will be deleted from the canvas, improving usability in the case of large data volumes (1000+nodes). The first rendering time for 2000 nodes has been reduced from 5s+to 0.5s. However, this also brings some problems, such as a slight lag when dragging the animation canvas, as nodes will be rendered in real time, and exporting images will be slower because all nodes need to be rendered first, as well as other temporarily undiscovered issues.
+Fix:
++1.Delete useless code and fix the issue where the mouse hover node reports an error and does not display the expand and collapse buttons;
+
2024.7.19
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index f237f3a7..dd5a721e 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -99,6 +99,8 @@ const mindMap = new MindMap({ | createNodePostfixContent（v0.9.12+） | Function、null | null | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent | | | disabledClipboard（v0.10.2+） | Boolean | false | Is prohibit pasting data from the user's clipboard and writing copied node data to the user's clipboard. At this time, only node data from the canvas can be copied and pasted | | | customHyperlinkJump（v0.10.2+） | null、Function | false | Customize the jump of hyperlinks. If not passed, the hyperlink will be opened as a new window by default, and a function can be passed, The function takes two parameters: link（The URL of the hyperlink）、node（Node instance to which it belongs）, As long as a function is passed, it will block the default jump | | +| openPerformance（v0.10.4+） | Boolean | false | Whether to enable performance mode or not, by default, all nodes will be rendered directly, regardless of whether they are in the visible area of the canvas. This will cause a lag when there are a large number of nodes (1000+). If your data volume is large, you can enable performance mode through this configuration, that is, only rendering nodes within the visible area of the canvas, and not rendering nodes beyond it. This will greatly improve rendering speed, but of course, it will also bring some other problems, such as: 1. When dragging or scaling the canvas, real-time calculation and rendering of nodes without nodes will be performed, which will bring some lag; When exporting images, SVG, and PDF, all nodes need to be rendered first, so it may be slower; 3. Other currently undiscovered issues | | +| performanceConfig（v0.10.4+） | Object | { time: 250, padding: 100, removeNodeWhenOutCanvas: true } | Performance optimization mode configuration. time（How often do nodes refresh after a view change. Unit:ms）、padding（Still rendering nodes beyond the specified range around the canvas）、removeNodeWhenOutCanvas（Is the node deleted from the canvas after being moved out of the visible area of the canvas） | | ### 1.1Data structure @@ -618,6 +620,8 @@ Listen to an event. Event list: | node_layout_end（v0.10.1+） | Event where the content layout of a single node is completed | this(Current node instance) | | node_attachmentClick（v0.9.10+） | Click event for node attachment icon | this(Current node instance)、e（Event Object）、node（Icon node） | | node_attachmentContextmenu（v0.9.10+） | Right click event on node attachment icon | this(Current node instance)、e（Event Object）、node（Icon node） | +| before_update_config（v0.10.4+） | Triggered before updating the configuration, that is, when the 'mindMap.updateConfig' method is called to update the configuration | opt（The configuration object before updating refers to an object, not a copy, so when the after_uupdate_comfig event is triggered, the object will also change synchronously. Therefore, it is necessary to cache a certain configuration field that you need） | +| after_update_config（v0.10.4+） | Triggered after updating configuration | opt（Updated configuration object） | ### emit(event, ...args) diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 032f0073..96c91b00 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -540,6 +540,20 @@Customize the jump of hyperlinks. If not passed, the hyperlink will be opened as a new window by default, and a function can be passed, The function takes two parameters: link（The URL of the hyperlink）、node（Node instance to which it belongs）, As long as a function is passed, it will block the default jump + + +openPerformance（v0.10.4+） +Boolean +false +Whether to enable performance mode or not, by default, all nodes will be rendered directly, regardless of whether they are in the visible area of the canvas. This will cause a lag when there are a large number of nodes (1000+). If your data volume is large, you can enable performance mode through this configuration, that is, only rendering nodes within the visible area of the canvas, and not rendering nodes beyond it. This will greatly improve rendering speed, but of course, it will also bring some other problems, such as: 1. When dragging or scaling the canvas, real-time calculation and rendering of nodes without nodes will be performed, which will bring some lag; When exporting images, SVG, and PDF, all nodes need to be rendered first, so it may be slower; 3. Other currently undiscovered issues ++ + performanceConfig（v0.10.4+） +Object +{ time: 250, padding: 100, removeNodeWhenOutCanvas: true } +Performance optimization mode configuration. time（How often do nodes refresh after a view change. Unit:ms）、padding（Still rendering nodes beyond the specified range around the canvas）、removeNodeWhenOutCanvas（Is the node deleted from the canvas after being moved out of the visible area of the canvas） ++ 1.1Data structure
@@ -1698,6 +1712,16 @@ poor performance and should be used sparingly.Right click event on node attachment icon this(Current node instance)、e（Event Object）、node（Icon node） ++ +before_update_config（v0.10.4+） +Triggered before updating the configuration, that is, when the 'mindMap.updateConfig' method is called to update the configuration +opt（The configuration object before updating refers to an object, not a copy, so when the after_uupdate_comfig event is triggered, the object will also change synchronously. Therefore, it is necessary to cache a certain configuration field that you need） ++ after_update_config（v0.10.4+） +Triggered after updating configuration +opt（Updated configuration object） +emit(event, ...args)
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md index b21d56f7..bc07839c 100644 --- a/web/src/pages/Doc/en/introduction/index.md +++ b/web/src/pages/Doc/en/introduction/index.md @@ -454,4 +454,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
黄泳
+ ccccs
+
黄泳
+
+ ccccs
+Whether the node is currently being dragged
++v0.10.4+
+
padding: Number, The size of the area extending around the canvasDetermine whether the node is within the visible area of the canvas.
0.9.11+
diff --git a/web/src/pages/Doc/en/start/index.md b/web/src/pages/Doc/en/start/index.md index 694abc61..720b6ca4 100644 --- a/web/src/pages/Doc/en/start/index.md +++ b/web/src/pages/Doc/en/start/index.md @@ -78,16 +78,25 @@ import('simple-mind-map/src/plugins/Export.js').then(res => { }) ``` -If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file and `simpleMindMap.css` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page: +If you need a file in the format of `umd` module, such as `CDN` in the browser, So you can first install `npm i simple-mind-map` through npm,, Then you can find the `simpleMindMap.umd.min.js` file and `simpleMindMap.esm.min.css` file in the `node_modules/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page: ```html - + ``` -A global variable `window.simpleMindMap` will be created. you can get `MindMap` constructor by `window.simpleMindMap.default`, for more detail info you can log `window.simpleMindMap`. +A global variable `window.simpleMindMap` will be created. you can get `MindMap` constructor by `window.simpleMindMap.default`, Then it can be instantiated normally, for more detail info you can log `window.simpleMindMap`. -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. +If it is inconvenient to install using 'npm', you can also obtain these two files through some online 'CDN' services, such as: + +``` +https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css +https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js +``` + +You can replace the version number in it. + +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 [full.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/full.js#L36) 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. （v0.5.4+）If you want to use the `ES` module directly on the browser side, you can find the `simpleMindMap.esm.js` and `simpleMindMap.esm.css` files in the `/simple-mind-map/dist/` directory. diff --git a/web/src/pages/Doc/en/start/index.vue b/web/src/pages/Doc/en/start/index.vue index 85fadc3a..f2e20f14 100644 --- a/web/src/pages/Doc/en/start/index.vue +++ b/web/src/pages/Doc/en/start/index.vue @@ -1,6 +1,157 @@- +diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index 223c2d9e..2db6a255 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -1,5 +1,15 @@ # Changelog +## 0.10.4 + +> 2024.7.25 + +本次更新主要是增加了一个性能模式，开启后只会渲染画布可视区域内的节点，超出区域的节点会从画布删除，提升大数据量（1000+节点）情况下的可用性，2000节点首次渲染时间由5s+减少到0.5s，当然由此也会带来一些问题，比如拖动画布时会有一点卡顿，因为会实时渲染节点，导出图片等会变慢，因为需要先渲染所有节点，以及其他一些暂时未发现的问题。 + +修复： + +> 1.删除无用代码，修复鼠标悬浮节点上报错不显示展开收起按钮的问题； + ## 0.10.3 > 2024.7.19 diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 24d3e825..61ec79bf 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -1,6 +1,15 @@Start
+Installation
+++Things to note before version 0.2.0:
++npm i simple-mind-map ++
0.2.0Notes for previous versions:++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:
++module.exports = { + transpileDependencies: ["simple-mind-map"], +}; +Other projects should modify the packaging configuration as needed.
+Usage
+++The
+webdirectory of this repository provides a complete project based onVue2. If you encounter any doubts about using it, you can refer to the implementation of this project.++To learn about its use in other frameworks, you can refer to the following unofficial implementations:
+1.https://github.com/huangyuanyin/hyy-vue3-mindMap: A mind map based on Vue3.2+ElementPlus.
+Firstly, provide a container element with a width and height not equal to 0:
++<div id="mindMapContainer"></div> +Also, set the
+CSSstyle again:+#mindMapContainer * { + margin: 0; + padding: 0; +} +Then introduce the
+simple-mind-maplibrary and create an instance:+import MindMap from "simple-mind-map"; + +const mindMap = new MindMap({ + el: document.getElementById('mindMapContainer'), + data: { + "data": { + "text": "Root Node" + }, + "children": [] + } +}); +This will result in a mind map.
+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
+simple-mind-maplibrary.+
simple-mind-mapsupports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.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
+babelcompilationsimple mind-mapin your project to prevent some newerjssyntax some browsers not supporting it.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:
++import('simple-mind-map/src/plugins/Export.js').then(res => { + mindMap.addPlugin(res.default) +}) +If you need a file in the format of
+umdmodule, such asCDNin the browser, So you can first installnpm i simple-mind-mapthrough npm,, Then you can find thesimpleMindMap.umd.min.jsfile andsimpleMindMap.esm.min.cssfile in thenode_modules/simple-mind-map/dist/directory, copy it to your project, and then import it into the page:+<link rel="stylesheet" href="simpleMindMap.esm.min.css"> +<script scr="simpleMindMap.umd.min.js"></script> +A global variable
+window.simpleMindMapwill be created. you can getMindMapconstructor bywindow.simpleMindMap.default, Then it can be instantiated normally, for more detail info you can logwindow.simpleMindMap.If it is inconvenient to install using 'npm', you can also obtain these two files through some online 'CDN' services, such as:
++https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css +https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js +You can replace the version number in it.
+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 full.js 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.
+（v0.5.4+）If you want to use the
+ESmodule directly on the browser side, you can find thesimpleMindMap.esm.jsandsimpleMindMap.esm.cssfiles in the/simple-mind-map/dist/directory.Online CDN services can also be used, such as:
++https://unpkg.com/browse/simple-mind-map@0.9.2/dist/ +You can find all the packaged files for a certain version.
+Development
+If you only use library, you don't need to read this section.
+Local Development
++git clone https://github.com/wanglin2/mind-map.git +cd mind-map +cd simple-mind-map +npm i +npm link +cd .. +cd web +npm i +npm link simple-mind-map +npm run serve +++If there is an installation dependency error, you can try adjusting the node version. The author is using version 14. x.
+Packaging the Library
+Since version
+0.2.0, we have added support for packaging the core library +simple-mind-map. This uses the same packaging tool as the sample project web.+cd web +npm run buildLibrary +The packaging entry is
+simple-mind-map/full.js, 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.The
+package.jsonfile in thesimple-mind-maplibrary provides two export +fields:+{ + "module": "index.js", + "main": "./dist/simpleMindMap.umd.min.js" +} +Environments that support the
+modulefield will useindex.jsas the entry +point, otherwise the packedsimpleMindMap.umd.min.jswill be used as the entry +point.Generate TypeScript type files
++cd simple-mind-map +npm run types +You can obtain the type files in the 'simple-mind-map/types/' directory.
+Compile the doc
++cd web +npm run buildDoc +Packaging the Demo
++cd web +npm run build +The
+index.htmlfile will be automatically moved to the root directory.Problems
+Error when using in Vite, indicating xml-js dependency error
+Solution: use the following import method:
++import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min"; +The
+simple-mind-mappackage provides the unpacked entry fieldmodule, and +thexml-jspackage dependency needs to import the package in thenode+environment. Therefore, it cannot be obtained inViteand 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.If you need to do further development, that is, you must use the unpacked code, +and if you do not need to parse the
+xmindfile, you can remove thexmind+module. If you need it, you can try using other libraries to parsexmlto +json.Error
+Getting bbox of element "text" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')The reason is that the installed version of
+@svgdotjs/svg.jsis too high. You can manually reduce it to the version of3.0.16.TypeError: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46
+The following configurations can be added to the packaging configuration file:
++resolve: { alias: { stream: "stream-browserify" } } +Different packaging tools may have different specific configurations, with the principle of excluding 'stream' dependencies.
+When clicking the [New], [Open], or [Save As] buttons, it will prompt that the browser does not support it or is not using the HTTPS protocol.
+The browser uses API window.showOpenFilePicker to operate local files on the computer. If it is not supported, either the browser does not support this API or the page is not using the HTTPS protocol, You can press F12, or open the browser console through the right-click menu on the page and enter 'window.showOpenFilePicker' in the 'Console' tab. If it returns 'undefined', it means it is not supported. If it does not return this message and the page still prompts that the browser does not support it or is not using the HTTPS protocol, you can submit an issue or contact the author.
+5.Import simple-mind-map error message, the error message is as follows:
++
This is because your build environment does not support this JavaScript syntax, which comes from the '@svgdotjs/svg.js' library. The solution is as follows:
+1.Manually reduce the version of the '@svgdotjs/svg.js' library. You can manually install the lower version in your project, such as:
+npm i @svgdotjs/svg.js@3.0.162.If you don't reduce the version, you can modify the relevant configuration of your build tool, modify the configuration of 'babel', and have it compile the 'simple-mind-map' library in 'node.modules' or the '@svgdotjs/svg.js' library. If you are using 'vue-cli' or 'vite', they also provide the relevant configuration directly. In addition, it is necessary to install the 'babel' plugin that compiles this syntax and configure it in the 'babel' configuration file:
++
@babel/plugin-proposal-nullish-coalescing-operator、@babel/plugin-proposal-optional-chaining。+Changelog
+0.10.4
+++2024.7.25
+本次更新主要是增加了一个性能模式，开启后只会渲染画布可视区域内的节点，超出区域的节点会从画布删除，提升大数据量（1000+节点）情况下的可用性，2000节点首次渲染时间由5s+减少到0.5s，当然由此也会带来一些问题，比如拖动画布时会有一点卡顿，因为会实时渲染节点，导出图片等会变慢，因为需要先渲染所有节点，以及其他一些暂时未发现的问题。
+修复：
++1.删除无用代码，修复鼠标悬浮节点上报错不显示展开收起按钮的问题；
+0.10.3
2024.7.19
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 418f3e97..08faedf8 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -99,6 +99,8 @@ const mindMap = new MindMap({ | createNodePostfixContent（v0.9.12+） | Function、null | null | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。用法同createNodePrefixContent | | disabledClipboard（v0.10.2+） | Boolean | false | 是否禁止粘贴用户剪贴板中的数据，禁止将复制的节点数据写入用户的剪贴板中，此时只能复制和粘贴画布内的节点数据 | | customHyperlinkJump（v0.10.2+） | null、Function | false | 自定义超链接的跳转。如果不传，默认会以新窗口的方式打开超链接，可以传递一个函数，函数接收两个参数：link（超链接的url）、node（所属节点实例），只要传递了函数，就会阻止默认的跳转 | +| openPerformance（v0.10.4+） | Boolean | false | 是否开启性能模式，默认情况下所有节点都会直接渲染，无论是否处于画布可视区域，这样当节点数量比较多时（1000+）会比较卡，如果你的数据量比较大，那么可以通过该配置开启性能模式，即只渲染画布可视区域内的节点，超出的节点不渲染，这样会大幅提高渲染速度，当然同时也会带来一些其他问题，比如：1.当拖动或是缩放画布时会实时计算并渲染未节点的节点，所以会带来一定卡顿；2.导出图片、svg、pdf时需要先渲染全部节点，所以会比较慢；3.其他目前未发现的问题 | +| performanceConfig（v0.10.4+） | Object | { time: 250, padding: 100, removeNodeWhenOutCanvas: true } | 性能优化模式配置。time（当视图改变后多久刷新一次节点，单位：ms）、padding（超出画布四周指定范围内依旧渲染节点）、removeNodeWhenOutCanvas（节点移出画布可视区域后是否从画布删除） | #### 1.1数据结构 @@ -617,6 +619,8 @@ mindMap.setTheme('主题名称') | node_layout_end（v0.10.1+） | 单个节点内容布局完成的事件 | this(当前节点实例) | | node_attachmentClick（v0.9.10+） | 节点附件图标的点击事件 | this(当前节点实例)、e（事件对象）、node（图标节点） | | node_attachmentContextmenu（v0.9.10+） | 节点附件图标的右键点击事件 | this(当前节点实例)、e（事件对象）、node（图标节点） | +| before_update_config（v0.10.4+） | 更新配置前触发，即当调用了`mindMap.updateConfig`方法更新配置时触发 | opt（未更新前的配置对象，引用对象，而非拷贝，所以当after_update_config事件触发后，该对象也会同步变化，所以需要缓存你需要的某个配置字段） | +| after_update_config（v0.10.4+） | 更新配置后触发 | opt（更新后的配置对象） | ### emit(event, ...args) diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index 4d7de7f5..af913dbe 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -466,6 +466,18 @@false 自定义超链接的跳转。如果不传，默认会以新窗口的方式打开超链接，可以传递一个函数，函数接收两个参数：link（超链接的url）、node（所属节点实例），只要传递了函数，就会阻止默认的跳转 ++ +openPerformance（v0.10.4+） +Boolean +false +是否开启性能模式，默认情况下所有节点都会直接渲染，无论是否处于画布可视区域，这样当节点数量比较多时（1000+）会比较卡，如果你的数据量比较大，那么可以通过该配置开启性能模式，即只渲染画布可视区域内的节点，超出的节点不渲染，这样会大幅提高渲染速度，当然同时也会带来一些其他问题，比如：1.当拖动或是缩放画布时会实时计算并渲染未节点的节点，所以会带来一定卡顿；2.导出图片、svg、pdf时需要先渲染全部节点，所以会比较慢；3.其他目前未发现的问题 ++ performanceConfig（v0.10.4+） +Object +{ time: 250, padding: 100, removeNodeWhenOutCanvas: true } +性能优化模式配置。time（当视图改变后多久刷新一次节点，单位：ms）、padding（超出画布四周指定范围内依旧渲染节点）、removeNodeWhenOutCanvas（节点移出画布可视区域后是否从画布删除） +1.1数据结构
@@ -1609,6 +1621,16 @@ mindMap.setTheme('主题名称')节点附件图标的右键点击事件 this(当前节点实例)、e（事件对象）、node（图标节点） ++ +before_update_config（v0.10.4+） +更新配置前触发，即当调用了 +mindMap.updateConfig方法更新配置时触发opt（未更新前的配置对象，引用对象，而非拷贝，所以当after_update_config事件触发后，该对象也会同步变化，所以需要缓存你需要的某个配置字段） ++ after_update_config（v0.10.4+） +更新配置后触发 +opt（更新后的配置对象） +emit(event, ...args)
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md index d146ce8d..a943a6f8 100644 --- a/web/src/pages/Doc/zh/introduction/index.md +++ b/web/src/pages/Doc/zh/introduction/index.md @@ -450,4 +450,8 @@黄泳
+diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue index f68bb269..9dbe7bf1 100644 --- a/web/src/pages/Doc/zh/introduction/index.vue +++ b/web/src/pages/Doc/zh/introduction/index.vue @@ -404,6 +404,10 @@ccccs
+黄泳
++diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md index 223310f9..92ef8ee8 100644 --- a/web/src/pages/Doc/zh/node/index.md +++ b/web/src/pages/Doc/zh/node/index.md @@ -56,6 +56,14 @@ ## 方法 +### checkIsInClient(padding = 0) + +> v0.10.4+ + +- `padding`: Number, 向画布四周延伸的区域大小 + +判断节点是否处于画布可视区域。 + ### deactivate() > 0.9.11+ diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue index 9bb87bc5..2f5bc08e 100644 --- a/web/src/pages/Doc/zh/node/index.vue +++ b/web/src/pages/Doc/zh/node/index.vue @@ -31,6 +31,14 @@ccccs
+
节点是否正在拖拽中
++v0.10.4+
+
padding: Number, 向画布四周延伸的区域大小判断节点是否处于画布可视区域。
0.9.11+
diff --git a/web/src/pages/Doc/zh/start/index.md b/web/src/pages/Doc/zh/start/index.md index c89f9a85..ddb9cafd 100644 --- a/web/src/pages/Doc/zh/start/index.md +++ b/web/src/pages/Doc/zh/start/index.md @@ -73,16 +73,25 @@ import('simple-mind-map/src/plugins/Export.js').then(res => { }) ``` -如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件和`simpleMindMap.css`文件，复制到你的项目中，然后在页面中引入： +如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以先通过npm安装`npm i simple-mind-map`，然后在`node_modules/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件和`simpleMindMap.esm.min.css`文件，复制到你的项目中，然后在页面中引入： ```html - + ``` -会创建一个全局变量`window.simpleMindMap`，可以通过`window.simpleMindMap.default`获取到`MindMap`构造函数，详细信息可以把`window.simpleMindMap`打印出来看一下。 +库会创建一个全局变量`window.simpleMindMap`，可以通过`window.simpleMindMap.default`获取到`MindMap`构造函数，然后正常实例化即可，详细信息可以把`window.simpleMindMap`打印出来看一下。 -这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。 +如果不方便使用`npm`来安装，也可以通过一些在线`CDN`服务来获取到这两个文件，比如： + +``` +https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css +https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js +``` + +你可以替换其中的版本号。 + +这种方式的缺点是会包含所有的内容，包括你没有注册的插件（可以在这里[full.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/full.js#L36)查看默认打包进文件的插件），所以整体体积会比较大，如果只想要打包指定的插件，你可以修改该文件，然后重新打包，如有需要也可以联系开发者。 （v0.5.4+）如果你想直接在浏览器端通过`ES`模块的方式来使用，你可以在`/simple-mind-map/dist/`目录中找到`simpleMindMap.esm.js`和`simpleMindMap.esm.css`文件。 diff --git a/web/src/pages/Doc/zh/start/index.vue b/web/src/pages/Doc/zh/start/index.vue index 20022828..8e060bda 100644 --- a/web/src/pages/Doc/zh/start/index.vue +++ b/web/src/pages/Doc/zh/start/index.vue @@ -52,12 +52,17 @@ mindMap.addPlugin(res.default) }) -如果你需要
-umd模块格式的文件，比如以CDN的方式在浏览器上使用，那么你可以从/simple-mind-map/dist/目录中找到simpleMindMap.umd.min.js文件和simpleMindMap.css文件，复制到你的项目中，然后在页面中引入：<link rel="stylesheet" href="simpleMindMap.css"> +如果你需要
+umd模块格式的文件，比如以CDN的方式在浏览器上使用，那么你可以先通过npm安装npm i simple-mind-map，然后在node_modules/simple-mind-map/dist/目录中找到simpleMindMap.umd.min.js文件和simpleMindMap.esm.min.css文件，复制到你的项目中，然后在页面中引入：-<link rel="stylesheet" href="simpleMindMap.esm.min.css"> <script scr="simpleMindMap.umd.min.js"></script>会创建一个全局变量
-window.simpleMindMap，可以通过window.simpleMindMap.default获取到MindMap构造函数，详细信息可以把window.simpleMindMap打印出来看一下。这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
+库会创建一个全局变量
+window.simpleMindMap，可以通过window.simpleMindMap.default获取到MindMap构造函数，然后正常实例化即可，详细信息可以把window.simpleMindMap打印出来看一下。如果不方便使用
+npm来安装，也可以通过一些在线CDN服务来获取到这两个文件，比如：+https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css +https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js +你可以替换其中的版本号。
+这种方式的缺点是会包含所有的内容，包括你没有注册的插件（可以在这里full.js查看默认打包进文件的插件），所以整体体积会比较大，如果只想要打包指定的插件，你可以修改该文件，然后重新打包，如有需要也可以联系开发者。
（v0.5.4+）如果你想直接在浏览器端通过
ES模块的方式来使用，你可以在/simple-mind-map/dist/目录中找到simpleMindMap.esm.js和simpleMindMap.esm.css文件。也可以使用在线cdn服务，比如：
https://unpkg.com/browse/simple-mind-map@0.9.2/dist/