mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Doc: update
This commit is contained in:
wanglin2
parent
9c4e72eb29
commit
c39daf72b4
@ -39,7 +39,7 @@ const mindMap = new MindMap({
|
||||
| selectTranslateLimit | Number | 20 | The distance from the edge when the canvas begins to offset during multi-select node | |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | |
|
||||
| readonly（v0.1.7+） | Boolean | false | Whether it is read-only mode | |
|
||||
| enableFreeDrag（v0.2.4+） | Boolean | false | Enable node free drag | |
|
||||
| enableFreeDrag（v0.2.4+） | Boolean | false | Enable node free(Free drag means that nodes can be dragged to any position on the canvas. Please note that it is not a function of dragging nodes to become siblings of other nodes. The connection of free drag may have certain problems, so it is best not to use this feature) drag | |
|
||||
| watermarkConfig（v0.2.4+） | Object | | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration | |
|
||||
| textAutoWrapWidth（v0.3.4+） | Number | 500 | Each line of text in the node will wrap automatically when it reaches the width | |
|
||||
| customHandleMousewheel（v0.4.3+） | Function | null | User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object | |
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,6 +6,18 @@
|
||||
|
||||
This plugin is used to support inserting formulas into nodes.
|
||||
|
||||
> 注意：公式是通过[KaTeX](https://github.com/KaTeX/KaTeX)库实现的，`KaTeX`提供了一些配置，插件默认的一个配置是：
|
||||
|
||||
> Note: The formula is implemented through the [KaTeX](https://github.com/KaTeX/KaTeX) library, and 'KaTeX' provides some configurations. The default configuration for the plugin is:
|
||||
|
||||
```js
|
||||
{
|
||||
output: 'mathml'
|
||||
}
|
||||
```
|
||||
|
||||
> This formula may not render successfully on a few browsers. If you need to be compatible with these browsers, you can consider changing the configuration to 'HTML'. For detailed documentation, please refer to [Options](https://katex.org/docs/options). Using this configuration may require the introduction of a 'KaTeX' style file, which you can test on your own.
|
||||
|
||||
## Register
|
||||
|
||||
```js
|
||||
|
||||
@ -8,6 +8,19 @@
|
||||
<p>This plugin is only supported in rich text mode, so it needs to be used after registering the RichText plugin</p>
|
||||
</blockquote>
|
||||
<p>This plugin is used to support inserting formulas into nodes.</p>
|
||||
<blockquote>
|
||||
<p>注意：公式是通过<a href="https://github.com/KaTeX/KaTeX">KaTeX</a>库实现的，<code>KaTeX</code>提供了一些配置，插件默认的一个配置是：</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>Note: The formula is implemented through the <a href="https://github.com/KaTeX/KaTeX">KaTeX</a> library, and 'KaTeX' provides some configurations. The default configuration for the plugin is:</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">output</span>: <span class="hljs-string">'mathml'</span>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>This formula may not render successfully on a few browsers. If you need to be compatible with these browsers, you can consider changing the configuration to 'HTML'. For detailed documentation, please refer to <a href="https://katex.org/docs/options">Options</a>. Using this configuration may require the introduction of a 'KaTeX' style file, which you can test on your own.</p>
|
||||
</blockquote>
|
||||
<h2>Register</h2>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Formula <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/Formula.js'</span>
|
||||
|
||||
@ -65,11 +65,13 @@ The folder containing the packaged resources for the `web` folder.
|
||||
|
||||
[Explore how to export HTML and SVG as images](https://juejin.cn/post/7276712861514170409)
|
||||
|
||||
[How does the dom-to-image library convert HTML into images](https://juejin.cn/post/7287913415803764747)
|
||||
|
||||
## Special Note
|
||||
|
||||
This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.
|
||||
|
||||
This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.
|
||||
This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself. Generally speaking, within 500 nodes, it is more smooth, while over 1000 nodes have more noticeable lag.
|
||||
|
||||
If you have suggestions or find bugs, you can submit [issues](https://github.com/wanglin2/mind-map/issues) here.
|
||||
|
||||
|
||||
@ -51,9 +51,10 @@ full screen, support mini map</li>
|
||||
<p><a href="https://juejin.cn/post/7204854015463538744">How to simulate the background image style of css in canvas</a></p>
|
||||
<p><a href="https://juejin.cn/post/7233012756314701884">My first Electron application</a></p>
|
||||
<p><a href="https://juejin.cn/post/7276712861514170409">Explore how to export HTML and SVG as images</a></p>
|
||||
<p><a href="https://juejin.cn/post/7287913415803764747">How does the dom-to-image library convert HTML into images</a></p>
|
||||
<h2>Special Note</h2>
|
||||
<p>This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.</p>
|
||||
<p>This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.</p>
|
||||
<p>This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself. Generally speaking, within 500 nodes, it is more smooth, while over 1000 nodes have more noticeable lag.</p>
|
||||
<p>If you have suggestions or find bugs, you can submit <a href="https://github.com/wanglin2/mind-map/issues">issues</a> here.</p>
|
||||
<p>The built-in themes and icons in the project part come from:</p>
|
||||
<p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
|
||||
> v0.4.0+
|
||||
|
||||
> Note: This is a testing nature and imperfect function
|
||||
|
||||
This plugin provides the ability to edit rich text of nodes, and takes effect after registration.
|
||||
|
||||
By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.
|
||||
@ -20,6 +18,8 @@ The principle of this plugin is to use [Quill](https://github.com/quilljs/quill)
|
||||
|
||||
> The compatibility of dom to image more is relatively poor, and exported images are empty on many browsers, so you can replace them with html2canvas according to your own needs.
|
||||
|
||||
After version `0.6.16+`, third-party libraries such as 'dom-to-image-more' and 'html2canvas' will no longer be used for export, Compatibility and export are no longer issues.
|
||||
|
||||
## Register
|
||||
|
||||
```js
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<blockquote>
|
||||
<p>v0.4.0+</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>Note: This is a testing nature and imperfect function</p>
|
||||
</blockquote>
|
||||
<p>This plugin provides the ability to edit rich text of nodes, and takes effect after registration.</p>
|
||||
<p>By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.</p>
|
||||
<p>The principle of this plugin is to use <a href="https://github.com/quilljs/quill">Quill</a> editor implements rich text editing, and then uses the edited <code>DOM</code> node directly as the text data of the node, and embeds the <code>DOM</code> node through the <code>svg</code> <code>foreignObject</code> tag during rendering.</p>
|
||||
@ -21,6 +18,7 @@
|
||||
<blockquote>
|
||||
<p>The compatibility of dom to image more is relatively poor, and exported images are empty on many browsers, so you can replace them with html2canvas according to your own needs.</p>
|
||||
</blockquote>
|
||||
<p>After version <code>0.6.16+</code>, third-party libraries such as 'dom-to-image-more' and 'html2canvas' will no longer be used for export, Compatibility and export are no longer issues.</p>
|
||||
<h2>Register</h2>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/RichText.js'</span>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Select plugin
|
||||
|
||||
The `Select` plugin provides the function of right-clicking to select multiple nodes.
|
||||
The `Select` plugin provides the function of select multiple nodes.
|
||||
|
||||
## Register
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Select plugin</h1>
|
||||
<p>The <code>Select</code> plugin provides the function of right-clicking to select multiple nodes.</p>
|
||||
<p>The <code>Select</code> plugin provides the function of select multiple nodes.</p>
|
||||
<h2>Register</h2>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Select <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/Select.js'</span>
|
||||
|
||||
@ -39,7 +39,7 @@ const mindMap = new MindMap({
|
||||
| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} |
|
||||
| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 |
|
||||
| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽 |
|
||||
| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用） |
|
||||
| watermarkConfig（v0.2.4+） | Object | | 水印配置，详细配置请参考下方表格【水印配置】 |
|
||||
| textAutoWrapWidth（v0.3.4+） | Number | 500 | 节点内每行文本达到该宽度后自动换行 |
|
||||
| customHandleMousewheel（v0.4.3+） | Function | null | 自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象 |
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
<td>enableFreeDrag（v0.2.4+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>是否开启节点自由拖拽</td>
|
||||
<td>是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>watermarkConfig（v0.2.4+）</td>
|
||||
|
||||
@ -6,6 +6,16 @@
|
||||
|
||||
该插件用于支持给节点插入公式。
|
||||
|
||||
> 注意：公式是通过[KaTeX](https://github.com/KaTeX/KaTeX)库实现的，`KaTeX`提供了一些配置，插件默认的一个配置是：
|
||||
|
||||
```js
|
||||
{
|
||||
output: 'mathml'
|
||||
}
|
||||
```
|
||||
|
||||
> 这在少数浏览器上公式可能无法成功渲染，如果你需要兼容这部分浏览器，你可以考虑把该配置改为`html`，详细文档可以参考：[Options](https://katex.org/docs/options)。使用这个配置可能还需要再引入`KaTeX`的样式文件，你可以自行测试。
|
||||
|
||||
## 注册
|
||||
|
||||
```js
|
||||
|
||||
@ -8,6 +8,16 @@
|
||||
<p>该插件仅在富文本模式下支持，所以需要在注册了RichText插件的前提下使用</p>
|
||||
</blockquote>
|
||||
<p>该插件用于支持给节点插入公式。</p>
|
||||
<blockquote>
|
||||
<p>注意：公式是通过<a href="https://github.com/KaTeX/KaTeX">KaTeX</a>库实现的，<code>KaTeX</code>提供了一些配置，插件默认的一个配置是：</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">output</span>: <span class="hljs-string">'mathml'</span>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>这在少数浏览器上公式可能无法成功渲染，如果你需要兼容这部分浏览器，你可以考虑把该配置改为<code>html</code>，详细文档可以参考：<a href="https://katex.org/docs/options">Options</a>。使用这个配置可能还需要再引入<code>KaTeX</code>的样式文件，你可以自行测试。</p>
|
||||
</blockquote>
|
||||
<h2>注册</h2>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Formula <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/Formula.js'</span>
|
||||
|
||||
@ -56,11 +56,13 @@
|
||||
|
||||
[探索如何将html和svg导出为图片](https://juejin.cn/post/7276712861514170409)
|
||||
|
||||
[dom-to-image库是如何将html转换成图片的](https://juejin.cn/post/7287913415803764747)
|
||||
|
||||
## 特别说明
|
||||
|
||||
本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
|
||||
|
||||
本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。
|
||||
本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。一般来说，500个节点以内比较流畅，1000个节点以上卡顿比较明显。
|
||||
|
||||
如果有建议或发现了bug，可以在此提交[issues](https://github.com/wanglin2/mind-map/issues)。
|
||||
|
||||
|
||||
@ -42,9 +42,10 @@
|
||||
<p><a href="https://juejin.cn/post/7204854015463538744">如何在canvas中模拟css的背景图片样式</a></p>
|
||||
<p><a href="https://juejin.cn/post/7233012756314701884">我的第一个Electron应用</a></p>
|
||||
<p><a href="https://juejin.cn/post/7276712861514170409">探索如何将html和svg导出为图片</a></p>
|
||||
<p><a href="https://juejin.cn/post/7287913415803764747">dom-to-image库是如何将html转换成图片的</a></p>
|
||||
<h2>特别说明</h2>
|
||||
<p>本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。</p>
|
||||
<p>本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。</p>
|
||||
<p>本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。一般来说，500个节点以内比较流畅，1000个节点以上卡顿比较明显。</p>
|
||||
<p>如果有建议或发现了bug，可以在此提交<a href="https://github.com/wanglin2/mind-map/issues">issues</a>。</p>
|
||||
<p>项目内置的主题和图标部分来自于：</p>
|
||||
<p><a href="https://naotu.baidu.com/">百度脑图</a></p>
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
|
||||
> v0.4.0+
|
||||
|
||||
> 注意：这是一个测试性质和不完善的功能
|
||||
|
||||
该插件提供节点富文本编辑的能力，注册了即可生效。
|
||||
|
||||
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。
|
||||
@ -20,6 +18,8 @@
|
||||
|
||||
> dom-to-image-more兼容性比较差，在很多浏览器上导出图片都是空的，所以可以根据你自己的需求替换成html2canvas。
|
||||
|
||||
从`0.6.16+`版本后不再使用`dom-to-image-more`、`html2canvas`之类的第三方库实现导出，兼容性及导出都不再有问题。
|
||||
|
||||
## 注册
|
||||
|
||||
```js
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<blockquote>
|
||||
<p>v0.4.0+</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>注意：这是一个测试性质和不完善的功能</p>
|
||||
</blockquote>
|
||||
<p>该插件提供节点富文本编辑的能力，注册了即可生效。</p>
|
||||
<p>默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。</p>
|
||||
<p>该插件的原理是使用<a href="https://github.com/quilljs/quill">Quill</a>编辑器实现富文本编辑，然后把编辑后生成的<code>DOM</code>节点直接作为节点的文本数据，并且在渲染的时候通过<code>svg</code>的<code>foreignObject</code>标签嵌入<code>DOM</code>节点。</p>
|
||||
@ -21,6 +18,7 @@
|
||||
<blockquote>
|
||||
<p>dom-to-image-more兼容性比较差，在很多浏览器上导出图片都是空的，所以可以根据你自己的需求替换成html2canvas。</p>
|
||||
</blockquote>
|
||||
<p>从<code>0.6.16+</code>版本后不再使用<code>dom-to-image-more</code>、<code>html2canvas</code>之类的第三方库实现导出，兼容性及导出都不再有问题。</p>
|
||||
<h2>注册</h2>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/RichText.js'</span>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Select 插件
|
||||
|
||||
`Select`插件提供鼠标右键多选节点的功能。
|
||||
`Select`插件提供鼠标多选节点的功能。
|
||||
|
||||
## 注册
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Select 插件</h1>
|
||||
<p><code>Select</code>插件提供鼠标右键多选节点的功能。</p>
|
||||
<p><code>Select</code>插件提供鼠标多选节点的功能。</p>
|
||||
<h2>注册</h2>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Select <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/Select.js'</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user