mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 18:37:43 +08:00
Merge branch 'feature' into main
This commit is contained in:
wanglin2
commit
49bae6cc6c
@ -43,6 +43,15 @@ npm i simple-mind-map
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
另外再设置一下`css`样式：
|
||||
|
||||
```css
|
||||
#mindMapContainer * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
然后创建一个实例：
|
||||
|
||||
```js
|
||||
|
||||
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.9ee87c69.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.05d77cdf.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.7623bd23.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.0b1c8d8d.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.040c6f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d871bf6.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ae972b36.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.7fcfc285.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.b094b87c.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.34207f33.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.ade5a7e0.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.03c55a34.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.db6065c6.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1ffa155d.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.f061b30d.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.17d4f60a.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.52b68dc1.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.7cb4182f.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.9e66ac04.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.c67e6ecf.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.dd25b1b4.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.6c0d2c1e.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.0f2eb234.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.32d1bf7e.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.cc328c92.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.836132f8.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.90fa5d56.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.00dad103.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.c0fd17fb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.a4640577.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.bd5197f5.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.b0e230bf.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.c7c6517f.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.089ecd26.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.5fe1560d.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.e60ccf9b.js" rel="prefetch"><link href="dist/js/chunk-2d216004.0615d324.js" rel="prefetch"><link href="dist/js/chunk-2d217907.3772894a.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.5947204c.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.0bdd83ab.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.a4be9e7c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.4fa18681.js" rel="prefetch"><link href="dist/js/chunk-2d238428.61fffbf5.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.4cc313f0.js" rel="prefetch"><link href="dist/css/app.3b568ddc.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.04d5ef06.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.3b568ddc.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.04d5ef06.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.2313b4b8.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.2c02cf1a.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.6d16a18f.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.fcf43a73.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.4e43a508.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.2151bd9a.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a1773017.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.40c3a4c6.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.bd367278.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.1d4a5492.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.1ed97f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.cad55829.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.bc2402de.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.8e142e17.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.5e69748f.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.2b0a3aa0.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.41f869ae.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.d27d7537.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a826dbb3.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.53817128.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.a1a1527a.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.cfa871f6.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.5d901d78.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.10ad3333.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.a4748b26.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.d8e94894.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.2bb0ee69.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f8eea9ae.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5f8f761a.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.25303766.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.428d2cf2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.5a838a8b.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.967c0a96.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.390e6ae8.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.a6d5b04d.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.76d5e91c.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.a56e89cb.js" rel="prefetch"><link href="dist/js/chunk-2d216004.6bc315a8.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.ef0d247a.js" rel="prefetch"><link href="dist/js/chunk-2d217907.fcb88ac3.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.4ed5fff9.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.6c80e04d.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.20c08643.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.c6cec8ad.js" rel="prefetch"><link href="dist/js/chunk-2d238428.816b9c47.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.057b1a50.js" rel="prefetch"><link href="dist/css/app.8011b75a.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.b41929f4.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.8011b75a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.b41929f4.js"></script></body></html>
|
||||
@ -90,7 +90,7 @@ const defaultOpt = {
|
||||
// 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
|
||||
nodeTransitionMoveDuration: 300,
|
||||
// 初始根节点的位置
|
||||
initRootNodePosition: [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER, CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]
|
||||
initRootNodePosition: null
|
||||
}
|
||||
|
||||
// 思维导图
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.5.3",
|
||||
"version": "0.5.3-fix.1",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -11,6 +11,9 @@ let langList = [
|
||||
}
|
||||
]
|
||||
let StartList = ['introduction', 'start', 'translate', 'changelog']
|
||||
let CourseList = new Array(2).fill(0).map((_, index) => {
|
||||
return 'course' + (index + 1)
|
||||
})
|
||||
let APIList = [
|
||||
'constructor',
|
||||
'node',
|
||||
@ -59,6 +62,10 @@ export default {
|
||||
groupName: '开始',
|
||||
list: createList('zh', StartList)
|
||||
},
|
||||
{
|
||||
groupName: '教程',
|
||||
list: createList('zh', CourseList)
|
||||
},
|
||||
{
|
||||
groupName: 'API',
|
||||
list: createList('zh', APIList)
|
||||
@ -69,6 +76,10 @@ export default {
|
||||
groupName: 'Start',
|
||||
list: createList('en', StartList)
|
||||
},
|
||||
{
|
||||
groupName: 'Course',
|
||||
list: createList('zh', CourseList)
|
||||
},
|
||||
{
|
||||
groupName: 'API',
|
||||
list: createList('en', APIList)
|
||||
|
||||
@ -6,6 +6,10 @@ Fix: 1.Fixed the issue of setting the text style when multiple nodes were select
|
||||
|
||||
New: 1.Support setting the position of the initial central node.
|
||||
|
||||
### 0.5.3-fix.1
|
||||
|
||||
Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.
|
||||
|
||||
## 0.5.2
|
||||
|
||||
Fix: 1.Remove `uid` from exported `JSON` data; 2.Clear the node cache pool when re rendering.
|
||||
|
||||
@ -51,7 +51,7 @@ const mindMap = new MindMap({
|
||||
| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | Boolean | true | Only respond to shortcut key events when the mouse is inside the canvas | |
|
||||
| enableNodeTransitionMove（v0.5.1+） | Boolean | true | Whether to enable node animation transition | |
|
||||
| nodeTransitionMoveDuration（v0.5.1+） | Number | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds | |
|
||||
| initRootNodePosition（v0.5.3+） | Array | ['center', 'center'] | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height | |
|
||||
| initRootNodePosition（v0.5.3+） | Array | null | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height | |
|
||||
|
||||
### Watermark config
|
||||
|
||||
|
||||
@ -220,7 +220,7 @@
|
||||
<tr>
|
||||
<td>initRootNodePosition（v0.5.3+）</td>
|
||||
<td>Array</td>
|
||||
<td>['center', 'center']</td>
|
||||
<td>null</td>
|
||||
<td>The position of the initial root node can be passed as an array, default is <code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
@ -7,21 +7,21 @@
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox432" checked="true" /><label for="checkbox432">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox433" checked="true" /><label for="checkbox433">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
||||
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
||||
organizational structure diagrams, and directory organization diagrams</li>
|
||||
<li><input type="checkbox" id="checkbox434" checked="true" /><label for="checkbox434">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox435" checked="true" /><label for="checkbox435">Supports shortcuts</label></li>
|
||||
<li><input type="checkbox" id="checkbox436" checked="true" /><label for="checkbox436">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
||||
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Supports shortcuts</label></li>
|
||||
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
||||
summaries</li>
|
||||
<li><input type="checkbox" id="checkbox437" checked="true" /><label for="checkbox437">Supports forward and backward navigation</label></li>
|
||||
<li><input type="checkbox" id="checkbox438" checked="true" /><label for="checkbox438">Supports dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox439" checked="true" /><label for="checkbox439">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
||||
<li><input type="checkbox" id="checkbox440" checked="true" /><label for="checkbox440">Supports free dragging and dragging to adjust nodes</label></li>
|
||||
<li><input type="checkbox" id="checkbox441" checked="true" /><label for="checkbox441">Supports various node shapes</label></li>
|
||||
<li><input type="checkbox" id="checkbox442" checked="true" /><label for="checkbox442">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
|
||||
<li><input type="checkbox" id="checkbox443" checked="true" /><label for="checkbox443">Supports mini map、support watermark</label></li>
|
||||
<li><input type="checkbox" id="checkbox444" checked="true" /><label for="checkbox444">Supports associative lines</label></li>
|
||||
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supports forward and backward navigation</label></li>
|
||||
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Supports dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
||||
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Supports free dragging and dragging to adjust nodes</label></li>
|
||||
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Supports various node shapes</label></li>
|
||||
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
|
||||
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Supports mini map、support watermark</label></li>
|
||||
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Supports associative lines</label></li>
|
||||
</ul>
|
||||
<h2>Repository Catalog Introduction</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@ -31,16 +31,16 @@ frameworks such as Vue and React, or without a framework.</p>
|
||||
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
|
||||
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox445" checked="true" /><label for="checkbox445">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox446" checked="true" /><label for="checkbox446">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox447" checked="true" /><label for="checkbox447">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Import and export functionality; data is saved in the browser's local</label>
|
||||
storage by default, but it also supports creating, opening, and editing
|
||||
local files on the computer directly</li>
|
||||
<li><input type="checkbox" id="checkbox448" checked="true" /><label for="checkbox448">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox449" checked="true" /><label for="checkbox449">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
between edit and read-only modes, zooming in and out, and switching to
|
||||
full screen, support mini map</li>
|
||||
</ul>
|
||||
|
||||
@ -37,6 +37,15 @@ Firstly, provide a container element with a width and height not equal to 0:
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
Also, set the `CSS` style again:
|
||||
|
||||
```css
|
||||
#mindMapContainer * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
Then introduce the `simple-mind-map` library and create an instance:
|
||||
|
||||
```js
|
||||
@ -61,9 +70,10 @@ If you want to implement a complete mind map, you usually need to develop some U
|
||||
|
||||
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 `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
|
||||
|
||||
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 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, 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:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="simpleMindMap.css">
|
||||
<script scr="simpleMindMap.umd.min.js"></script>
|
||||
```
|
||||
|
||||
@ -71,6 +81,8 @@ A global variable `window.simpleMindMap` will be created.
|
||||
|
||||
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.
|
||||
|
||||
（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.
|
||||
|
||||
## Development
|
||||
|
||||
If you only use library, you don't need to read this section.
|
||||
|
||||
@ -30,6 +30,12 @@ compile this dependency:</p>
|
||||
<p>Firstly, provide a container element with a width and height not equal to 0:</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>Also, set the <code>CSS</code> style again:</p>
|
||||
<pre class="hljs"><code><span class="hljs-selector-id">#mindMapContainer</span> * {
|
||||
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
|
||||
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
|
||||
}
|
||||
</code></pre>
|
||||
<p>Then introduce the <code>simple-mind-map</code> library and create an instance:</p>
|
||||
<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>;
|
||||
|
||||
@ -47,11 +53,13 @@ compile this dependency:</p>
|
||||
<p>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 <code>simple-mind-map</code> library.</p>
|
||||
<p><code>simple-mind-map</code> supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.</p>
|
||||
<p>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 <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
|
||||
<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file and <code>simpleMindMap.css</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"simpleMindMap.css"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
|
||||
<p>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.</p>
|
||||
<p>（v0.5.4+）If you want to use the <code>ES</code> module directly on the browser side, you can find the <code>simpleMindMap.esm.js</code> and <code>simpleMindMap.esm.css</code> files in the <code>/simple-mind-map/dist/</code> directory.</p>
|
||||
<h2>Development</h2>
|
||||
<p>If you only use library, you don't need to read this section.</p>
|
||||
<h3>Local Development</h3>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
|
||||
export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"},{"path":"markdown","title":"Markdown解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"},{"path":"markdown","title":"Markdown parse"}]}]
|
||||
export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"course1","title":"基本使用"},{"path":"course2","title":"操作节点内容"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"markdown","title":"Markdown解析"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"markdown","title":"Markdown parse"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
|
||||
|
||||
@ -6,6 +6,10 @@
|
||||
|
||||
新增：1.支持设置初始中心节点的位置。
|
||||
|
||||
### 0.5.3-fix.1
|
||||
|
||||
修复：1.修复设置初始中心节点的位置不生效的问题。
|
||||
|
||||
## 0.5.2
|
||||
|
||||
修复：1.导出的`json`数据中去除`uid`；2.重新渲染时清空节点缓存池。
|
||||
|
||||
@ -51,7 +51,7 @@ const mindMap = new MindMap({
|
||||
| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | Boolean | true | 是否只有当鼠标在画布内才响应快捷键事件 | |
|
||||
| enableNodeTransitionMove（v0.5.1+） | Boolean | true | 是否开启节点动画过渡 | |
|
||||
| nodeTransitionMoveDuration（v0.5.1+） | Number | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms | |
|
||||
| initRootNodePosition（v0.5.3+） | Array | ['center', 'center'] | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置 | |
|
||||
| initRootNodePosition（v0.5.3+） | Array | null | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置 | |
|
||||
|
||||
### 水印配置
|
||||
|
||||
|
||||
@ -220,7 +220,7 @@
|
||||
<tr>
|
||||
<td>initRootNodePosition（v0.5.3+）</td>
|
||||
<td>Array</td>
|
||||
<td>['center', 'center']</td>
|
||||
<td>null</td>
|
||||
<td>初始根节点的位置，可传一个数组，默认为<code>['center', 'center']</code>，代表根节点处于画布中心位置，除了<code>center</code>，关键词还可以设置<code>left</code>、<code>top</code>、<code>right</code>、<code>bottom</code>，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如<code>['40%', '60%']</code>，代表水平位置在画布宽度的<code>40%</code>的位置，垂直位置在画布高度的<code>60%</code>的位置</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
60
web/src/pages/Doc/zh/course1/index.md
Normal file
60
web/src/pages/Doc/zh/course1/index.md
Normal file
@ -0,0 +1,60 @@
|
||||
# 基本使用
|
||||
|
||||
> 重要说明：本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过`npm`方式使用的话，需要自己手动注册相关插件。
|
||||
|
||||
`simple-mind-map`的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNptUktu2zAQvcqARWG7sCUV6EqVjX7QRRc+QacLVZzYLKQRQdJxAkObLHuKXiMXanOMDEXZCJIIECS+mff4+Dgn9dna7PpAqlSVb5yxATyFg90gm872LsAJHF0toedtf+BAGga4cn0HM2HNLl1bw3pb21RC5QVuadUJuupqiwoZ+SIxny9gvYETMkDTsw8QGyN9DUzHs9h8bACgtgTdN4eOOGQ7Ct9air9fbr/r+Wxifu051IbJzRbLxNJ1qMu0R3xQRQDVEyjBgW5ChFH9+3v/8Ofu/919tJvKwyQWG5u9abUjjs0/fiZ8iJ9h8RF5WCBXeYpQwpNFIMmgDiQrgEqbazB6jeq5YVSbKpeqtFX5E44sfbhtE/3TFDOqLE/ZThll5Lus8R6VeBCX8r55vsP5xEejw76E90XxdmwG2JPZ7UMJH4rC3oyYHOh1jXdnla52O8MlFJOGrbU2vDsDIiAxjMbVUiXbcQSy375nmbJRBaeC2L7cByoZqHQRWS6/mZNZMR3FE65+uf7oyYkIqulKXhmyxH2ZT2RN3gY1PAJQKfo9" />
|
||||
|
||||
注意，我们还给容器元素设置了样式：
|
||||
|
||||
```css
|
||||
#mindMapContainer * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
这是为了避免节点内的文字因为默认样式而出现偏移。
|
||||
|
||||
一个节点的基本数据结构如下所示：
|
||||
|
||||
```js
|
||||
{
|
||||
data: {
|
||||
// 节点文本
|
||||
text: '根节点',
|
||||
// 图片
|
||||
image: 'xxx.jpg',
|
||||
imageTitle: '图片名称',
|
||||
imageSize: {
|
||||
width: 1152,
|
||||
height: 1152
|
||||
},
|
||||
// 图标
|
||||
icon: ['priority_1'],
|
||||
// 标签
|
||||
tag: ['标签1', '标签2'],
|
||||
// 链接
|
||||
hyperlink: 'http://lxqnsys.com/',
|
||||
hyperlinkTitle: '理想青年实验室',
|
||||
// 备注内容
|
||||
note: '理想青年实验室\n一个有意思的角落',
|
||||
// 概要
|
||||
generalization: {
|
||||
text: '概要的内容'
|
||||
},
|
||||
// 节点是否展开
|
||||
expand: true,
|
||||
},
|
||||
children: []// 子节点
|
||||
}
|
||||
```
|
||||
|
||||
`icon`目前只能使用内置的图标，完整图标可以在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件中查看。
|
||||
|
||||
创建实例时还支持传递其他很多选项参数，完整选项列表可以在[实例化选项](https://wanglin2.github.io/mind-map/#/doc/zh/constructor/%E5%AE%9E%E4%BE%8B%E5%8C%96%E9%80%89%E9%A1%B9)查看。
|
||||
|
||||
这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下`Tab`键会给当前激活的节点添加一个子节点，按下`Enter`键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考[快捷键列表](https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js#L246)。
|
||||
|
||||
当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是`simple-mind-map`库并不包含UI界面，所以需要你自己开发，然后通过`simple-mind-map`提供的相关API来操作，本教程的其他章节会向你介绍如何使用。
|
||||
63
web/src/pages/Doc/zh/course1/index.vue
Normal file
63
web/src/pages/Doc/zh/course1/index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>基本使用</h1>
|
||||
<blockquote>
|
||||
<p>重要说明：本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过<code>npm</code>方式使用的话，需要自己手动注册相关插件。</p>
|
||||
</blockquote>
|
||||
<p><code>simple-mind-map</code>的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：</p>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNptUktu2zAQvcqARWG7sCUV6EqVjX7QRRc+QacLVZzYLKQRQdJxAkObLHuKXiMXanOMDEXZCJIIECS+mff4+Dgn9dna7PpAqlSVb5yxATyFg90gm872LsAJHF0toedtf+BAGga4cn0HM2HNLl1bw3pb21RC5QVuadUJuupqiwoZ+SIxny9gvYETMkDTsw8QGyN9DUzHs9h8bACgtgTdN4eOOGQ7Ct9air9fbr/r+Wxifu051IbJzRbLxNJ1qMu0R3xQRQDVEyjBgW5ChFH9+3v/8Ofu/919tJvKwyQWG5u9abUjjs0/fiZ8iJ9h8RF5WCBXeYpQwpNFIMmgDiQrgEqbazB6jeq5YVSbKpeqtFX5E44sfbhtE/3TFDOqLE/ZThll5Lus8R6VeBCX8r55vsP5xEejw76E90XxdmwG2JPZ7UMJH4rC3oyYHOh1jXdnla52O8MlFJOGrbU2vDsDIiAxjMbVUiXbcQSy375nmbJRBaeC2L7cByoZqHQRWS6/mZNZMR3FE65+uf7oyYkIqulKXhmyxH2ZT2RN3gY1PAJQKfo9" />
|
||||
<p>注意，我们还给容器元素设置了样式：</p>
|
||||
<pre class="hljs"><code><span class="hljs-selector-id">#mindMapContainer</span> * {
|
||||
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
|
||||
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
|
||||
}
|
||||
</code></pre>
|
||||
<p>这是为了避免节点内的文字因为默认样式而出现偏移。</p>
|
||||
<p>一个节点的基本数据结构如下所示：</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-comment">// 节点文本</span>
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'根节点'</span>,
|
||||
<span class="hljs-comment">// 图片</span>
|
||||
<span class="hljs-attr">image</span>: <span class="hljs-string">'xxx.jpg'</span>,
|
||||
<span class="hljs-attr">imageTitle</span>: <span class="hljs-string">'图片名称'</span>,
|
||||
<span class="hljs-attr">imageSize</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">1152</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">1152</span>
|
||||
},
|
||||
<span class="hljs-comment">// 图标</span>
|
||||
<span class="hljs-attr">icon</span>: [<span class="hljs-string">'priority_1'</span>],
|
||||
<span class="hljs-comment">// 标签</span>
|
||||
<span class="hljs-attr">tag</span>: [<span class="hljs-string">'标签1'</span>, <span class="hljs-string">'标签2'</span>],
|
||||
<span class="hljs-comment">// 链接</span>
|
||||
<span class="hljs-attr">hyperlink</span>: <span class="hljs-string">'http://lxqnsys.com/'</span>,
|
||||
<span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">'理想青年实验室'</span>,
|
||||
<span class="hljs-comment">// 备注内容</span>
|
||||
<span class="hljs-attr">note</span>: <span class="hljs-string">'理想青年实验室\n一个有意思的角落'</span>,
|
||||
<span class="hljs-comment">// 概要</span>
|
||||
<span class="hljs-attr">generalization</span>: {
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'概要的内容'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 节点是否展开</span>
|
||||
<span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
<span class="hljs-attr">children</span>: []<span class="hljs-comment">// 子节点</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p><code>icon</code>目前只能使用内置的图标，完整图标可以在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件中查看。</p>
|
||||
<p>创建实例时还支持传递其他很多选项参数，完整选项列表可以在<a href="https://wanglin2.github.io/mind-map/#/doc/zh/constructor/%E5%AE%9E%E4%BE%8B%E5%8C%96%E9%80%89%E9%A1%B9">实例化选项</a>查看。</p>
|
||||
<p>这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下<code>Tab</code>键会给当前激活的节点添加一个子节点，按下<code>Enter</code>键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js#L246">快捷键列表</a>。</p>
|
||||
<p>当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是<code>simple-mind-map</code>库并不包含UI界面，所以需要你自己开发，然后通过<code>simple-mind-map</code>提供的相关API来操作，本教程的其他章节会向你介绍如何使用。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
183
web/src/pages/Doc/zh/course2/index.md
Normal file
183
web/src/pages/Doc/zh/course2/index.md
Normal file
@ -0,0 +1,183 @@
|
||||
# 操作节点内容
|
||||
|
||||
目前支持在节点中插入`图片`、`图标`、`超链接`、`备注`、`标签`、`概要`、`关联线`，本节教程会介绍如何通过UI界面来完成这些内容的插入。
|
||||
|
||||
## 监听节点激活事件
|
||||
|
||||
首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过`node_active`事件来监听节点激活事件：
|
||||
|
||||
```js
|
||||
const activeNodes = shallowRef([])
|
||||
mindMap.on('node_active', (node, activeNodeList) => {
|
||||
activeNodes.value = activeNodeList
|
||||
})
|
||||
```
|
||||
|
||||
你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。
|
||||
|
||||
```js
|
||||
const hasRoot = computed(() => {
|
||||
return activeNodes.value.findIndex(node => {
|
||||
return node.isRoot
|
||||
}) !== -1
|
||||
})
|
||||
|
||||
|
||||
const hasGeneralization = computed(() => {
|
||||
return activeNodes.value.findIndex(node => {
|
||||
return node.isGeneralization
|
||||
}) !== -1
|
||||
})
|
||||
```
|
||||
|
||||
有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。
|
||||
|
||||
## 插入图片
|
||||
|
||||
选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的`setImage`方法设置图片：
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach((node) => {
|
||||
node.setImage({
|
||||
url: '图片url',
|
||||
title: '图片的标题或描述',
|
||||
width: 100,// 图片的宽高也不能少
|
||||
height: 100
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
图片回显也很简单，可以使用节点的`getData`方法获取节点的图片：
|
||||
|
||||
```js
|
||||
const img = activeNode.getData('image')
|
||||
const imgTitle = activeNode.getData('imageTitle')
|
||||
```
|
||||
|
||||
## 插入图标
|
||||
|
||||
整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，目前只能使用库里自带的一些图标，然后将选择的图标插入到节点中：
|
||||
|
||||
```js
|
||||
const iconList = ['priority_1', '...']// 选择的图标
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setIcon(iconList)
|
||||
})
|
||||
```
|
||||
|
||||
获取节点的图标数据：
|
||||
|
||||
```js
|
||||
const iconList = activeNode.getData('icon') || []
|
||||
```
|
||||
|
||||
## 插入超链接
|
||||
|
||||
对于超链接，你需要实现两个输入框，分别输入`url`和名称，然后插入到节点：
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setHyperlink('url', '名称')
|
||||
})
|
||||
```
|
||||
|
||||
获取节点超链接数据：
|
||||
|
||||
```js
|
||||
const url = activeNode.getData('hyperlink')
|
||||
const name = activeNode.getData('hyperlinkTitle')
|
||||
```
|
||||
|
||||
## 插入备注
|
||||
|
||||
备注会稍微复杂一点，因为支持两种方式。
|
||||
|
||||
### 使用内置逻辑
|
||||
|
||||
使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setNote('备注内容')
|
||||
})
|
||||
```
|
||||
|
||||
这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。
|
||||
|
||||
### 自定义显示备注
|
||||
|
||||
如果你想显示更丰富的备注内容，比如支持`markdown`，那么你可以在实例化`simple-mind-map`时插入`customNoteContentShow`选项。
|
||||
|
||||
设置备注内容还是使用`setNote`方法，只不过现在插入的是`markdown`字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染`markdown`：
|
||||
|
||||
```js
|
||||
const mindMap = new MindMap({
|
||||
// ...
|
||||
customNoteContentShow: {
|
||||
show: (content, left, top) => {
|
||||
// 在这里显示你的自定义弹窗
|
||||
// content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位
|
||||
},
|
||||
hide: () => {
|
||||
// 在这里隐藏你的自定义弹窗
|
||||
// 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
获取节点的备注内容可以通过`getData`方法：
|
||||
|
||||
```js
|
||||
const note = activeNode.getData('note')
|
||||
```
|
||||
|
||||
## 插入标签
|
||||
|
||||
标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：
|
||||
|
||||
```js
|
||||
activeNodes.value.forEach(node => {
|
||||
node.setTag(['标签1', '...'])
|
||||
})
|
||||
```
|
||||
|
||||
获取节点标签数据：
|
||||
|
||||
```js
|
||||
const tagArr = activeNode.getData('tag') || []
|
||||
```
|
||||
|
||||
## 插入概要
|
||||
|
||||
插入概要可以不需要实现UI，直接调用插入概要的命令即可：
|
||||
|
||||
```js
|
||||
mindMap.execCommand('ADD_GENERALIZATION', data)
|
||||
```
|
||||
|
||||
会给当前激活的节点插入一个概要节点，第二个参数`data`可以不传，默认为：
|
||||
|
||||
```js
|
||||
{
|
||||
text: '概要'
|
||||
}
|
||||
```
|
||||
|
||||
概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。
|
||||
|
||||
## 插入关联线
|
||||
|
||||
> 要支持关联线需要使用关联线插件
|
||||
|
||||
关联线也不需要UI，调用一个方法即可：
|
||||
|
||||
```js
|
||||
mindMap.associativeLine.createLineFromActiveNode()
|
||||
```
|
||||
|
||||
然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
|
||||
|
||||
## 完整实例
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV/9PHEUU/1cma8we5tiDRmKCBykFRBJAQ5poZRuy7M7dDezObHfn4AghsVRK0Vb6xWjTRq2mraYqaULTCA3wz7B3x3/hm539dsdhzvhDSQ5m3rzPe+/el88Ma8qI62rLVawMKkXf9IjLkY951R3WKXFc5nG0hjxcyiNGp1mVcmzlkV8xbJutzOISWkcljzlIBQtqgpgm1Jo2XHmkKz6IbdzrgLTXMVxd0SlCOrUxR0ImNIcQrdq2lBcKKDh8EGzfqR9/WX/1pvHoq+bXG42N/eDWD81fftepyajPkWFysoxnmIV9QKcR5eau9ug0tFLfuR9sPgseHzW2t2IYoT72Jh2jjAGV60FDw2hNuM2Y05YNu4q1EvPGDbOSy1EQpooIib0GOQqt5CKh+Kl69iBSK5y7/mChYNeuUX/V15jv95q0dwGTRULLmmGT1So1fc1kTuGaXSvUKhdGPl+6VLviDCxO4IHS2Adjn13xRgcWNJeW1XxqnhNuY3AgvxCkpf5k6/TXh/Vb39d3dprHL7O6K8TilUHU39eXF+mMEcHu4ekfD0/2fz75+07zxmHw8l4KqWBSrvAQI4XrIo9c/F5vTyh4bkkon4RNa0KjU/gzRWAxhOZU1yPMI3x1vl/No3R3Qb367xUQCe+Uf7Cdix2cE2vz9ebpg6P6t89aw50idKnb+p/j/eNVF3s22MmFFc8UXBRWfMHG3Zv1G3unP94P9l8Fuz+dvrgd7D5Vz0vq0636XtLcMsoZxrvu0nOiFCZyqjQe3NwMdvfPCwBK2vjrqDWAy0b5f/oHC7k5VdoOqy6XUPLzwni+0Xx+vTWMCaM1iog0NFzD5ihzHINaOXVkbGx+YnxmfHZkavKLkcuTn8yAu1Bd5xzXoLHV5taLYPfRyf62dBLlQ6h0qMfmXvP6d42D4zON01aSOBjD95lJDJEfoaSZHjZ4uPwIWHAkSVwudpXwae6sNcGHeCXm0ZhjMNCLxcyqgynXypiP21gsL61OwvePkKOMcgOcempPRAeWwY3BuC6QDUUIdCUjkmKRJCHWlfqTfcm4kqlDLki4RVfMCrEtD1OhPJfaaDPX0Uu7p5OD242D39qdtTrs4DTki7N6bymCeBnJYhyhhM8yBiNo4U+ZTzhhFJCqjUtcTIIJpYMyhaj1ng/l3YcQdGDj8b3g7p8yJnkHnhx8c/LmdbbdgPpUMWTzciTBYDiC+XDyQkLMTOOZsRX9Fekl7Q+fYkG+AODuhw3HcG1DD8MOoaJFlpFpQ5cP6UoUxBh2mK6Ex5ECsdLTpBNBpViA06xibIkzZi8YoIKWe0kJBNlQbUzLvIKGUV/iRefFhSrncNlcNG1iLgEivdFBK3vlFwtSNYKC547Q8B7JQoGiuoWKeySBJndNt2hBzqnjkKO7hQKvJkhJqd0iJ2AmYmBIg//hu2aijemxDZ0WOl4VC5k+gq3PV23ZUhej16KuaAX5RIz4TsO+o5m+ryvJVGiZlou7On3jvBvqIeQmY+Zh8AiNFB6EEyo+77S3ZmwqBRoLPrOrXAIREsM6iPqiHWduujnrPn5Bvd/X59Ziz539vhd7dgyvTMBvbNU1LAueibEgCV2LJqXLiPvjCKKgkz0YhCkPa6DkFVkB8SjXFn1G4X8AeWNGB1CBhD51BZ74kjO1Aiw1Dy4v4mBRrN4Fj61Aj4ARXYnor8OzX2LPllqgotjWlfV/AEgelAo=" />
|
||||
131
web/src/pages/Doc/zh/course2/index.vue
Normal file
131
web/src/pages/Doc/zh/course2/index.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>操作节点内容</h1>
|
||||
<p>目前支持在节点中插入<code>图片</code>、<code>图标</code>、<code>超链接</code>、<code>备注</code>、<code>标签</code>、<code>概要</code>、<code>关联线</code>，本节教程会介绍如何通过UI界面来完成这些内容的插入。</p>
|
||||
<h2>监听节点激活事件</h2>
|
||||
<p>首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过<code>node_active</code>事件来监听节点激活事件：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> activeNodes = shallowRef([])
|
||||
mindMap.on(<span class="hljs-string">'node_active'</span>, <span class="hljs-function">(<span class="hljs-params">node, activeNodeList</span>) =></span> {
|
||||
activeNodes.value = activeNodeList
|
||||
})
|
||||
</code></pre>
|
||||
<p>你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> hasRoot = computed(<span class="hljs-function">() =></span> {
|
||||
<span class="hljs-keyword">return</span> activeNodes.value.findIndex(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> node.isRoot
|
||||
}) !== -<span class="hljs-number">1</span>
|
||||
})
|
||||
|
||||
|
||||
<span class="hljs-keyword">const</span> hasGeneralization = computed(<span class="hljs-function">() =></span> {
|
||||
<span class="hljs-keyword">return</span> activeNodes.value.findIndex(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> node.isGeneralization
|
||||
}) !== -<span class="hljs-number">1</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。</p>
|
||||
<h2>插入图片</h2>
|
||||
<p>选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的<code>setImage</code>方法设置图片：</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function">(<span class="hljs-params">node</span>) =></span> {
|
||||
node.setImage({
|
||||
<span class="hljs-attr">url</span>: <span class="hljs-string">'图片url'</span>,
|
||||
<span class="hljs-attr">title</span>: <span class="hljs-string">'图片的标题或描述'</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,<span class="hljs-comment">// 图片的宽高也不能少</span>
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
<p>图片回显也很简单，可以使用节点的<code>getData</code>方法获取节点的图片：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> img = activeNode.getData(<span class="hljs-string">'image'</span>)
|
||||
<span class="hljs-keyword">const</span> imgTitle = activeNode.getData(<span class="hljs-string">'imageTitle'</span>)
|
||||
</code></pre>
|
||||
<h2>插入图标</h2>
|
||||
<p>整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，目前只能使用库里自带的一些图标，然后将选择的图标插入到节点中：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> iconList = [<span class="hljs-string">'priority_1'</span>, <span class="hljs-string">'...'</span>]<span class="hljs-comment">// 选择的图标</span>
|
||||
activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setIcon(iconList)
|
||||
})
|
||||
</code></pre>
|
||||
<p>获取节点的图标数据：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> iconList = activeNode.getData(<span class="hljs-string">'icon'</span>) || []
|
||||
</code></pre>
|
||||
<h2>插入超链接</h2>
|
||||
<p>对于超链接，你需要实现两个输入框，分别输入<code>url</code>和名称，然后插入到节点：</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setHyperlink(<span class="hljs-string">'url'</span>, <span class="hljs-string">'名称'</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<p>获取节点超链接数据：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> url = activeNode.getData(<span class="hljs-string">'hyperlink'</span>)
|
||||
<span class="hljs-keyword">const</span> name = activeNode.getData(<span class="hljs-string">'hyperlinkTitle'</span>)
|
||||
</code></pre>
|
||||
<h2>插入备注</h2>
|
||||
<p>备注会稍微复杂一点，因为支持两种方式。</p>
|
||||
<h3>使用内置逻辑</h3>
|
||||
<p>使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setNote(<span class="hljs-string">'备注内容'</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<p>这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。</p>
|
||||
<h3>自定义显示备注</h3>
|
||||
<p>如果你想显示更丰富的备注内容，比如支持<code>markdown</code>，那么你可以在实例化<code>simple-mind-map</code>时插入<code>customNoteContentShow</code>选项。</p>
|
||||
<p>设置备注内容还是使用<code>setNote</code>方法，只不过现在插入的是<code>markdown</code>字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染<code>markdown</code>：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-comment">// ...</span>
|
||||
<span class="hljs-attr">customNoteContentShow</span>: {
|
||||
<span class="hljs-attr">show</span>: <span class="hljs-function">(<span class="hljs-params">content, left, top</span>) =></span> {
|
||||
<span class="hljs-comment">// 在这里显示你的自定义弹窗</span>
|
||||
<span class="hljs-comment">// content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位</span>
|
||||
},
|
||||
<span class="hljs-attr">hide</span>: <span class="hljs-function">() =></span> {
|
||||
<span class="hljs-comment">// 在这里隐藏你的自定义弹窗</span>
|
||||
<span class="hljs-comment">// 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏</span>
|
||||
}
|
||||
},
|
||||
})
|
||||
</code></pre>
|
||||
<p>获取节点的备注内容可以通过<code>getData</code>方法：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> note = activeNode.getData(<span class="hljs-string">'note'</span>)
|
||||
</code></pre>
|
||||
<h2>插入标签</h2>
|
||||
<p>标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：</p>
|
||||
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =></span> {
|
||||
node.setTag([<span class="hljs-string">'标签1'</span>, <span class="hljs-string">'...'</span>])
|
||||
})
|
||||
</code></pre>
|
||||
<p>获取节点标签数据：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> tagArr = activeNode.getData(<span class="hljs-string">'tag'</span>) || []
|
||||
</code></pre>
|
||||
<h2>插入概要</h2>
|
||||
<p>插入概要可以不需要实现UI，直接调用插入概要的命令即可：</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'ADD_GENERALIZATION'</span>, data)
|
||||
</code></pre>
|
||||
<p>会给当前激活的节点插入一个概要节点，第二个参数<code>data</code>可以不传，默认为：</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'概要'</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。</p>
|
||||
<h2>插入关联线</h2>
|
||||
<blockquote>
|
||||
<p>要支持关联线需要使用关联线插件</p>
|
||||
</blockquote>
|
||||
<p>关联线也不需要UI，调用一个方法即可：</p>
|
||||
<pre class="hljs"><code>mindMap.associativeLine.createLineFromActiveNode()
|
||||
</code></pre>
|
||||
<p>然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。</p>
|
||||
<h2>完整实例</h2>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV/9PHEUU/1cma8we5tiDRmKCBykFRBJAQ5poZRuy7M7dDezObHfn4AghsVRK0Vb6xWjTRq2mraYqaULTCA3wz7B3x3/hm539dsdhzvhDSQ5m3rzPe+/el88Ma8qI62rLVawMKkXf9IjLkY951R3WKXFc5nG0hjxcyiNGp1mVcmzlkV8xbJutzOISWkcljzlIBQtqgpgm1Jo2XHmkKz6IbdzrgLTXMVxd0SlCOrUxR0ImNIcQrdq2lBcKKDh8EGzfqR9/WX/1pvHoq+bXG42N/eDWD81fftepyajPkWFysoxnmIV9QKcR5eau9ug0tFLfuR9sPgseHzW2t2IYoT72Jh2jjAGV60FDw2hNuM2Y05YNu4q1EvPGDbOSy1EQpooIib0GOQqt5CKh+Kl69iBSK5y7/mChYNeuUX/V15jv95q0dwGTRULLmmGT1So1fc1kTuGaXSvUKhdGPl+6VLviDCxO4IHS2Adjn13xRgcWNJeW1XxqnhNuY3AgvxCkpf5k6/TXh/Vb39d3dprHL7O6K8TilUHU39eXF+mMEcHu4ekfD0/2fz75+07zxmHw8l4KqWBSrvAQI4XrIo9c/F5vTyh4bkkon4RNa0KjU/gzRWAxhOZU1yPMI3x1vl/No3R3Qb367xUQCe+Uf7Cdix2cE2vz9ebpg6P6t89aw50idKnb+p/j/eNVF3s22MmFFc8UXBRWfMHG3Zv1G3unP94P9l8Fuz+dvrgd7D5Vz0vq0636XtLcMsoZxrvu0nOiFCZyqjQe3NwMdvfPCwBK2vjrqDWAy0b5f/oHC7k5VdoOqy6XUPLzwni+0Xx+vTWMCaM1iog0NFzD5ihzHINaOXVkbGx+YnxmfHZkavKLkcuTn8yAu1Bd5xzXoLHV5taLYPfRyf62dBLlQ6h0qMfmXvP6d42D4zON01aSOBjD95lJDJEfoaSZHjZ4uPwIWHAkSVwudpXwae6sNcGHeCXm0ZhjMNCLxcyqgynXypiP21gsL61OwvePkKOMcgOcempPRAeWwY3BuC6QDUUIdCUjkmKRJCHWlfqTfcm4kqlDLki4RVfMCrEtD1OhPJfaaDPX0Uu7p5OD242D39qdtTrs4DTki7N6bymCeBnJYhyhhM8yBiNo4U+ZTzhhFJCqjUtcTIIJpYMyhaj1ng/l3YcQdGDj8b3g7p8yJnkHnhx8c/LmdbbdgPpUMWTzciTBYDiC+XDyQkLMTOOZsRX9Fekl7Q+fYkG+AODuhw3HcG1DD8MOoaJFlpFpQ5cP6UoUxBh2mK6Ex5ECsdLTpBNBpViA06xibIkzZi8YoIKWe0kJBNlQbUzLvIKGUV/iRefFhSrncNlcNG1iLgEivdFBK3vlFwtSNYKC547Q8B7JQoGiuoWKeySBJndNt2hBzqnjkKO7hQKvJkhJqd0iJ2AmYmBIg//hu2aijemxDZ0WOl4VC5k+gq3PV23ZUhej16KuaAX5RIz4TsO+o5m+ryvJVGiZlou7On3jvBvqIeQmY+Zh8AiNFB6EEyo+77S3ZmwqBRoLPrOrXAIREsM6iPqiHWduujnrPn5Bvd/X59Ziz539vhd7dgyvTMBvbNU1LAueibEgCV2LJqXLiPvjCKKgkz0YhCkPa6DkFVkB8SjXFn1G4X8AeWNGB1CBhD51BZ74kjO1Aiw1Dy4v4mBRrN4Fj61Aj4ARXYnor8OzX2LPllqgotjWlfV/AEgelAo=" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -7,19 +7,19 @@
|
||||
</blockquote>
|
||||
<h2>特性</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox324" checked="true" /><label for="checkbox324">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox325" checked="true" /><label for="checkbox325">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox326" checked="true" /><label for="checkbox326">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox327" checked="true" /><label for="checkbox327">支持快捷键</label></li>
|
||||
<li><input type="checkbox" id="checkbox328" checked="true" /><label for="checkbox328">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox329" checked="true" /><label for="checkbox329">支持前进后退</label></li>
|
||||
<li><input type="checkbox" id="checkbox330" checked="true" /><label for="checkbox330">支持拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox331" checked="true" /><label for="checkbox331">支持右键和Ctrl+左键两种多选方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox332" checked="true" /><label for="checkbox332">支持节点自由拖拽、拖拽调整</label></li>
|
||||
<li><input type="checkbox" id="checkbox333" checked="true" /><label for="checkbox333">支持多种节点形状</label></li>
|
||||
<li><input type="checkbox" id="checkbox334" checked="true" /><label for="checkbox334">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox335" checked="true" /><label for="checkbox335">支持小地图、支持水印</label></li>
|
||||
<li><input type="checkbox" id="checkbox336" checked="true" /><label for="checkbox336">支持关联线</label></li>
|
||||
<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">支持快捷键</label></li>
|
||||
<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持前进后退</label></li>
|
||||
<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
|
||||
<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">支持多种节点形状</label></li>
|
||||
<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持小地图、支持水印</label></li>
|
||||
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">支持关联线</label></li>
|
||||
</ul>
|
||||
<h2>仓库目录介绍</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@ -27,11 +27,11 @@
|
||||
<p>2.<code>web</code></p>
|
||||
<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox337" checked="true" /><label for="checkbox337">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox338" checked="true" /><label for="checkbox338">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox339" checked="true" /><label for="checkbox339">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox340" checked="true" /><label for="checkbox340">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox341" checked="true" /><label for="checkbox341">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
</ul>
|
||||
<p>提供文档页面服务。</p>
|
||||
<p>3.<code>dist</code></p>
|
||||
|
||||
@ -32,6 +32,15 @@ npm i simple-mind-map
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
另外再设置一下`css`样式：
|
||||
|
||||
```css
|
||||
#mindMapContainer * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
然后引入`simple-mind-map`库，创建一个实例：
|
||||
|
||||
```js
|
||||
@ -56,9 +65,10 @@ const mindMap = new MindMap({
|
||||
|
||||
默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
|
||||
|
||||
如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
|
||||
如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件和`simpleMindMap.css`文件，复制到你的项目中，然后在页面中引入：
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="simpleMindMap.css">
|
||||
<script scr="simpleMindMap.umd.min.js"></script>
|
||||
```
|
||||
|
||||
@ -66,6 +76,8 @@ const mindMap = new MindMap({
|
||||
|
||||
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
|
||||
|
||||
（v0.5.4+）如果你想直接在浏览器端通过`ES`模块的方式来使用，你可以在`/simple-mind-map/dist/`目录中找到`simpleMindMap.esm.js`和`simpleMindMap.esm.css`文件。
|
||||
|
||||
## 开发
|
||||
|
||||
如果你只是使用库的话可以不用阅读此小节。
|
||||
|
||||
@ -24,6 +24,12 @@
|
||||
<p>首先提供一个宽高不为0的容器元素：</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>另外再设置一下<code>css</code>样式：</p>
|
||||
<pre class="hljs"><code><span class="hljs-selector-id">#mindMapContainer</span> * {
|
||||
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
|
||||
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
|
||||
}
|
||||
</code></pre>
|
||||
<p>然后引入<code>simple-mind-map</code>库，创建一个实例：</p>
|
||||
<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>;
|
||||
|
||||
@ -41,11 +47,13 @@
|
||||
<p>如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过<code>simple-mind-map</code>库提供的接口来实现更多功能。</p>
|
||||
<p><code>simple-mind-map</code>支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。</p>
|
||||
<p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
|
||||
<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件，复制到你的项目中，然后在页面中引入：</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件和<code>simpleMindMap.css</code>文件，复制到你的项目中，然后在页面中引入：</p>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"simpleMindMap.css"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">"simpleMindMap.umd.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
|
||||
<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
|
||||
<p>（v0.5.4+）如果你想直接在浏览器端通过<code>ES</code>模块的方式来使用，你可以在<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.esm.js</code>和<code>simpleMindMap.esm.css</code>文件。</p>
|
||||
<h2>开发</h2>
|
||||
<p>如果你只是使用库的话可以不用阅读此小节。</p>
|
||||
<h3>本地开发</h3>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user