884 lines
30 KiB
Vue
884 lines
30 KiB
Vue
<template>
|
||
<div>
|
||
<h1>构造函数</h1>
|
||
<h2>基本使用</h2>
|
||
<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>
|
||
<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">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'mindMapContainer'</span>),
|
||
<span class="hljs-attr">data</span>: {
|
||
<span class="hljs-string">"data"</span>: {
|
||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"根节点"</span>
|
||
},
|
||
<span class="hljs-string">"children"</span>: []
|
||
}
|
||
});
|
||
</code></pre>
|
||
<h2>实例化选项</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>字段名称</th>
|
||
<th>类型</th>
|
||
<th>默认值</th>
|
||
<th>描述</th>
|
||
<th>是否必填</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>el</td>
|
||
<td>Element</td>
|
||
<td></td>
|
||
<td>容器元素，必须为DOM元素</td>
|
||
<td>是</td>
|
||
</tr>
|
||
<tr>
|
||
<td>data</td>
|
||
<td>Object</td>
|
||
<td>{}</td>
|
||
<td>思维导图数据，可参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js</a></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>layout</td>
|
||
<td>String</td>
|
||
<td>logicalStructure</td>
|
||
<td>布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>fishboneDeg（v0.5.4+）</td>
|
||
<td>Number</td>
|
||
<td>45</td>
|
||
<td>设置鱼骨结构图的斜线角度</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>theme</td>
|
||
<td>String</td>
|
||
<td>default</td>
|
||
<td>主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金）</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>themeConfig</td>
|
||
<td>Object</td>
|
||
<td>{}</td>
|
||
<td>主题配置，会和所选择的主题进行合并，可用字段可参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js</a></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>scaleRatio</td>
|
||
<td>Number</td>
|
||
<td>0.1</td>
|
||
<td>放大缩小的增量比例</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>maxTag</td>
|
||
<td>Number</td>
|
||
<td>5</td>
|
||
<td>节点里最多显示的标签数量，多余的会被丢弃</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>exportPadding</td>
|
||
<td>Number</td>
|
||
<td>20</td>
|
||
<td>导出图片时的内边距</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>imgTextMargin</td>
|
||
<td>Number</td>
|
||
<td>5</td>
|
||
<td>节点里图片和文字的间距</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>textContentMargin</td>
|
||
<td>Number</td>
|
||
<td>2</td>
|
||
<td>节点里各种文字信息的间距，如图标和文字的间距</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>selectTranslateStep</td>
|
||
<td>Number</td>
|
||
<td>3</td>
|
||
<td>多选节点时鼠标移动到边缘时的画布移动偏移量</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>selectTranslateLimit</td>
|
||
<td>Number</td>
|
||
<td>20</td>
|
||
<td>多选节点时鼠标移动距边缘多少距离时开始偏移</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>customNoteContentShow（v0.1.6+）</td>
|
||
<td>Object</td>
|
||
<td>null</td>
|
||
<td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>readonly（v0.1.7+）</td>
|
||
<td>Boolean</td>
|
||
<td>false</td>
|
||
<td>是否是只读模式</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>enableFreeDrag（v0.2.4+）</td>
|
||
<td>Boolean</td>
|
||
<td>false</td>
|
||
<td>是否开启节点自由拖拽</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>watermarkConfig（v0.2.4+）</td>
|
||
<td>Object</td>
|
||
<td></td>
|
||
<td>水印配置，详细配置请参考下方表格【水印配置】</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>textAutoWrapWidth（v0.3.4+）</td>
|
||
<td>Number</td>
|
||
<td>500</td>
|
||
<td>节点内每行文本达到该宽度后自动换行</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>customHandleMousewheel（v0.4.3+）</td>
|
||
<td>Function</td>
|
||
<td>null</td>
|
||
<td>自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>mousewheelAction（v0.4.3+）</td>
|
||
<td>String</td>
|
||
<td>zoom</td>
|
||
<td>鼠标滚轮的行为，<code>zoom</code>（放大缩小）、<code>move</code>（上下移动）。如果<code>customHandleMousewheel</code>传了自定义函数，这个属性不生效</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>mousewheelMoveStep（v0.4.3+）</td>
|
||
<td>Number</td>
|
||
<td>100</td>
|
||
<td>当<code>mousewheelAction</code>设为<code>move</code>时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位<code>px</code></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
|
||
<td>String</td>
|
||
<td>二级节点</td>
|
||
<td>默认插入的二级节点的文字</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
|
||
<td>String</td>
|
||
<td>分支主题</td>
|
||
<td>默认插入的二级以下节点的文字</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>expandBtnStyle（v0.5.0+）</td>
|
||
<td>Object</td>
|
||
<td>{ color: '#808080', fill: '#fff' }</td>
|
||
<td>展开收起按钮的颜色</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>expandBtnIcon（v0.5.0+）</td>
|
||
<td>Object</td>
|
||
<td>{ open: '', close: '' }</td>
|
||
<td>自定义展开收起按钮的图标，可以传图标的svg字符串</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
|
||
<td>Boolean</td>
|
||
<td>true</td>
|
||
<td>是否只有当鼠标在画布内才响应快捷键事件</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>enableNodeTransitionMove（v0.5.1+）</td>
|
||
<td>Boolean</td>
|
||
<td>true</td>
|
||
<td>是否开启节点动画过渡</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>nodeTransitionMoveDuration（v0.5.1+）</td>
|
||
<td>Number</td>
|
||
<td>300</td>
|
||
<td>如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>initRootNodePosition（v0.5.3+）</td>
|
||
<td>Array</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>
|
||
<tr>
|
||
<td>exportPaddingX（v0.5.5+）</td>
|
||
<td>Number</td>
|
||
<td>10</td>
|
||
<td>导出png、svg、pdf时的图形水平内边距</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>exportPaddingY（v0.5.5+）</td>
|
||
<td>Number</td>
|
||
<td>10</td>
|
||
<td>导出png、svg、pdf时的图形垂直内边距</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>nodeTextEditZIndex（v0.5.5+）</td>
|
||
<td>Number</td>
|
||
<td>3000</td>
|
||
<td>节点文本编辑框元素的z-index</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
|
||
<td>Number</td>
|
||
<td>3000</td>
|
||
<td>节点备注浮层元素的z-index</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
|
||
<td>Boolean</td>
|
||
<td>true</td>
|
||
<td>是否在点击了画布外的区域时结束节点文本的编辑状态</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>maxHistoryCount（v0.5.6+）</td>
|
||
<td>Number</td>
|
||
<td>1000</td>
|
||
<td>最大历史记录数</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>alwaysShowExpandBtn（v0.5.8+）</td>
|
||
<td>Boolean</td>
|
||
<td>false</td>
|
||
<td>是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>iconList（v0.5.8+）</td>
|
||
<td>Array</td>
|
||
<td>[]</td>
|
||
<td>扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3>水印配置</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>字段名称</th>
|
||
<th>类型</th>
|
||
<th>默认值</th>
|
||
<th>描述</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>text</td>
|
||
<td>String</td>
|
||
<td>''</td>
|
||
<td>水印文字，如果为空字符串则不显示水印</td>
|
||
</tr>
|
||
<tr>
|
||
<td>lineSpacing</td>
|
||
<td>Number</td>
|
||
<td>100</td>
|
||
<td>水印每行之间的间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>textSpacing</td>
|
||
<td>Number</td>
|
||
<td>100</td>
|
||
<td>同一行水印之间的间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>angle</td>
|
||
<td>Number</td>
|
||
<td>30</td>
|
||
<td>水印的倾斜角度，范围：[0, 90]</td>
|
||
</tr>
|
||
<tr>
|
||
<td>textStyle</td>
|
||
<td>Object</td>
|
||
<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
|
||
<td>水印文字样式</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3>图标配置</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>字段名称</th>
|
||
<th>类型</th>
|
||
<th>默认值</th>
|
||
<th>描述</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>name</td>
|
||
<td>String</td>
|
||
<td></td>
|
||
<td>图标分组的名称</td>
|
||
</tr>
|
||
<tr>
|
||
<td>type</td>
|
||
<td>String</td>
|
||
<td></td>
|
||
<td>图标分组的值</td>
|
||
</tr>
|
||
<tr>
|
||
<td>list</td>
|
||
<td>Array</td>
|
||
<td></td>
|
||
<td>分组下的图标列表，数组的每一项为一个对象，<code>{ name: '', icon: '' }</code>，<code>name</code>代表图标的名称，<code>icon</code>代表图标，可以是<code>svg</code>图标，比如<code><svg ...><path></path></svg></code>，也可以是图片<code>url</code>，或者是<code>base64</code>图标，比如<code>data:image/png;base64,...</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2>静态方法</h2>
|
||
<h3>defineTheme(name, config)</h3>
|
||
<blockquote>
|
||
<p>v0.2.23+</p>
|
||
</blockquote>
|
||
<p>定义新主题。</p>
|
||
<p><code>name</code>：新主题名称</p>
|
||
<p><code>config</code>：主题数据</p>
|
||
<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>
|
||
<span class="hljs-comment">// 注册新主题</span>
|
||
MindMap.defineTheme(<span class="hljs-string">'主题名称'</span>, {})
|
||
|
||
<span class="hljs-comment">// 1.实例化时使用新注册的主题</span>
|
||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||
<span class="hljs-attr">theme</span>: <span class="hljs-string">'主题名称'</span>
|
||
})
|
||
|
||
<span class="hljs-comment">// 2.动态切换新主题</span>
|
||
mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||
</code></pre>
|
||
<p>主题的所有配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>。<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
|
||
<h3>usePlugin(plugin, opt = {})</h3>
|
||
<blockquote>
|
||
<p>v0.3.0+</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><code>opt</code>：v0.4.0+，插件参数。如果某个插件支持自定义选项的话可以通过这个参数传入。</li>
|
||
</ul>
|
||
<p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。</p>
|
||
<p>注意：插件需要在实例化<code>MindMap</code>前注册。</p>
|
||
<h3>hasPlugin(plugin)</h3>
|
||
<blockquote>
|
||
<p>v0.4.0+</p>
|
||
</blockquote>
|
||
<p>获取是否注册了某个插件，返回的是插件在注册插件列表里的索引，为<code>-1</code>则代表插件没有注册。</p>
|
||
<h2>静态属性</h2>
|
||
<h3>pluginList</h3>
|
||
<blockquote>
|
||
<p>v0.3.0+</p>
|
||
</blockquote>
|
||
<p>当前注册的所有插件列表。</p>
|
||
<h2>实例方法</h2>
|
||
<h3>getSvgData()</h3>
|
||
<blockquote>
|
||
<p>v0.3.0+</p>
|
||
</blockquote>
|
||
<p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
|
||
<pre class="hljs"><code>{
|
||
svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
|
||
svgHTML, <span class="hljs-comment">// String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内</span>
|
||
<span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object，思维导图图形未缩放时的位置尺寸等信息</span>
|
||
origWidth, <span class="hljs-comment">// Number，画布宽度</span>
|
||
origHeight, <span class="hljs-comment">// Number，画布高度</span>
|
||
scaleX, <span class="hljs-comment">// Number，思维导图图形的水平缩放值</span>
|
||
scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
|
||
}
|
||
</code></pre>
|
||
<h3>render(callback)</h3>
|
||
<ul>
|
||
<li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
|
||
</ul>
|
||
<p>触发整体渲染，会进行节点复用，性能较<code>reRender</code>会更好一点，如果只是节点位置变化了可以调用该方法进行渲染</p>
|
||
<h3>reRender(callback)</h3>
|
||
<ul>
|
||
<li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
|
||
</ul>
|
||
<p>整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用</p>
|
||
<h3>resize()</h3>
|
||
<p>容器尺寸变化后，需要调用该方法进行适应</p>
|
||
<h3>setMode(mode)</h3>
|
||
<blockquote>
|
||
<p>v0.1.7+</p>
|
||
</blockquote>
|
||
<p>切换模式为只读或编辑。</p>
|
||
<p><code>mode</code>：readonly、edit</p>
|
||
<h3>on(event, fn)</h3>
|
||
<p>监听事件，事件列表：</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>事件名称</th>
|
||
<th>描述</th>
|
||
<th>回调参数</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>data_change</td>
|
||
<td>渲染树数据变化，可以监听该方法获取最新数据</td>
|
||
<td>data（当前渲染树数据）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>view_data_change（v0.1.1+）</td>
|
||
<td>视图变化数据，比如拖动或缩放时会触发</td>
|
||
<td>data（当前视图状态数据）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>back_forward</td>
|
||
<td>前进或回退</td>
|
||
<td>activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>draw_click</td>
|
||
<td><em>画布的单击事件</em></td>
|
||
<td>e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>svg_mousedown</td>
|
||
<td>svg画布的鼠标按下事件</td>
|
||
<td>e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>mousedown</td>
|
||
<td>el元素的鼠标按下事件</td>
|
||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>mousemove</td>
|
||
<td>el元素的鼠标移动事件</td>
|
||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>drag</td>
|
||
<td>如果是按住左键拖动的话会触发拖动事件</td>
|
||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>mouseup</td>
|
||
<td>el元素的鼠标松开事件</td>
|
||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>mousewheel</td>
|
||
<td>鼠标滚动事件</td>
|
||
<td>e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>contextmenu</td>
|
||
<td>svg画布的鼠标右键菜单事件</td>
|
||
<td>e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_click</td>
|
||
<td>节点的单击事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_mousedown</td>
|
||
<td>节点的鼠标按下事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_mouseup</td>
|
||
<td>节点的鼠标松开事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_dblclick</td>
|
||
<td>节点的双击事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_contextmenu</td>
|
||
<td>节点的右键菜单事件</td>
|
||
<td>e（事件对象）、this（节点实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_mouseenter（v0.4.1+）</td>
|
||
<td>节点的鼠标移入事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_mouseleave（v0.4.1+）</td>
|
||
<td>节点的鼠标移出事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>before_node_active</td>
|
||
<td>节点激活前事件</td>
|
||
<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_active</td>
|
||
<td>节点激活事件</td>
|
||
<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>expand_btn_click</td>
|
||
<td>节点展开或收缩事件</td>
|
||
<td>this（节点实例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>before_show_text_edit</td>
|
||
<td>节点文本编辑框即将打开事件</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>hide_text_edit</td>
|
||
<td>节点文本编辑框关闭事件</td>
|
||
<td>textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>scale</td>
|
||
<td>放大缩小事件</td>
|
||
<td>scale（缩放比例）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_img_dblclick（v0.2.15+）</td>
|
||
<td>节点内图片的双击事件</td>
|
||
<td>this（节点实例）、e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_tree_render_end（v0.2.16+）</td>
|
||
<td>节点树渲染完毕事件</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>rich_text_selection_change（v0.4.0+）</td>
|
||
<td>当注册了<code>RichText</code>插件时可用。当节点编辑时，文本选区发生改变时触发</td>
|
||
<td>hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>transforming-dom-to-images（v0.4.0+）</td>
|
||
<td>当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点</td>
|
||
<td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_dragging（v0.4.5+）</td>
|
||
<td>当某个节点被拖拽时触发</td>
|
||
<td>node（当前被拖拽的节点）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>node_dragend（v0.4.5+）</td>
|
||
<td>节点被拖拽结束时触发</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>associative_line_click（v0.4.5+）</td>
|
||
<td>点击某条关联线时触发</td>
|
||
<td>path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>svg_mouseenter（v0.5.1+）</td>
|
||
<td>鼠标移入svg画布时触发</td>
|
||
<td>e（事件对象）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>svg_mouseleave（v0.5.1+）</td>
|
||
<td>鼠标移出svg画布时触发</td>
|
||
<td>e（事件对象）</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3>emit(event, ...args)</h3>
|
||
<p>触发事件，可以是上面表格里的事件，也可以是自定义事件</p>
|
||
<h3>off(event, fn)</h3>
|
||
<p>解绑事件</p>
|
||
<h3>setTheme(theme)</h3>
|
||
<p>切换主题，可选主题见上面的选项表格</p>
|
||
<h3>getTheme()</h3>
|
||
<p>获取当前主题</p>
|
||
<h3>setThemeConfig(config)</h3>
|
||
<p>设置主题配置，<code>config</code>同上面选项表格里的选项<code>themeConfig</code></p>
|
||
<h3>getCustomThemeConfig()</h3>
|
||
<p>获取自定义主题配置</p>
|
||
<h3>getThemeConfig(prop)</h3>
|
||
<p>获取某个主题配置属性值</p>
|
||
<h3>getConfig(<em>prop</em>)</h3>
|
||
<blockquote>
|
||
<p>0.2.24+</p>
|
||
</blockquote>
|
||
<p><code>prop</code>：获取指定配置的值，不传则返回整个配置</p>
|
||
<p>获取配置，即<code>new MindMap(opt)</code>的<code>opt</code></p>
|
||
<h3>updateConfig(<em>opt</em> = {})</h3>
|
||
<blockquote>
|
||
<p>0.2.24+</p>
|
||
</blockquote>
|
||
<p><code>opt</code>：要更新的配置</p>
|
||
<p>更新配置，即更新<code>new MindMap(opt)</code>的<code>opt</code>，可以只更新部分数据，比如：</p>
|
||
<pre class="hljs"><code>mindMap.updateConfig({
|
||
<span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
|
||
})
|
||
</code></pre>
|
||
<p>该方法只做更新配置的事情，没有其他副作用，比如触发画布重新渲染之类的</p>
|
||
<h3>getLayout()</h3>
|
||
<p>获取当前的布局结构</p>
|
||
<h3>setLayout(layout)</h3>
|
||
<p>设置布局结构，可选值见上面选项表格的<code>layout</code>字段</p>
|
||
<h3>execCommand(name, ...args)</h3>
|
||
<p>执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>命令名称</th>
|
||
<th>描述</th>
|
||
<th>参数</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>SELECT_ALL</td>
|
||
<td>全选</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>BACK</td>
|
||
<td>回退指定的步数</td>
|
||
<td>step（要回退的步数，默认为1）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>FORWARD</td>
|
||
<td>前进指定的步数</td>
|
||
<td>step（要前进的步数，默认为1）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>INSERT_NODE</td>
|
||
<td>插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效</td>
|
||
<td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js</a>）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>INSERT_CHILD_NODE</td>
|
||
<td>插入子节点，操作节点为当前激活的节点或指定节点</td>
|
||
<td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js</a>）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UP_NODE</td>
|
||
<td>上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>DOWN_NODE</td>
|
||
<td>操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>REMOVE_NODE</td>
|
||
<td>删除节点，操作节点为当前激活的节点或指定节点</td>
|
||
<td>appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PASTE_NODE</td>
|
||
<td>粘贴节点到节点，操作节点为当前激活的节点</td>
|
||
<td>data（要粘贴的节点数据，一般通过<code>renderer.copyNode()</code>方法和<code>renderer.cutNode()</code>方法获取）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>CUT_NODE</td>
|
||
<td>剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效</td>
|
||
<td>callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_STYLE</td>
|
||
<td>修改节点样式</td>
|
||
<td>node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_ACTIVE</td>
|
||
<td>设置节点是否激活</td>
|
||
<td>node（要设置的节点）、active（布尔值，是否激活）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>CLEAR_ACTIVE_NODE</td>
|
||
<td>清除当前已激活节点的激活状态，操作节点为当前激活的节点</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_EXPAND</td>
|
||
<td>设置节点是否展开</td>
|
||
<td>node（要设置的节点）、expand（布尔值，是否展开）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>EXPAND_ALL</td>
|
||
<td>展开所有节点</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNEXPAND_ALL</td>
|
||
<td>收起所有节点</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNEXPAND_TO_LEVEL（v0.2.8+）</td>
|
||
<td>展开到指定层级</td>
|
||
<td>level（要展开到的层级，1、2、3...）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_DATA</td>
|
||
<td>更新节点数据，即更新节点数据对象里<code>data</code>对象的数据</td>
|
||
<td>node（要设置的节点）、data（对象，要更新的数据，如<code>{expand: true}</code>）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_TEXT</td>
|
||
<td>设置节点文本</td>
|
||
<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_IMAGE</td>
|
||
<td>设置节点图片</td>
|
||
<td>node（要设置的节点）、imgData（对象，图片信息，结构为：<code>{url, title, width, height}</code>，图片的宽高必须要传）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_ICON</td>
|
||
<td>设置节点图标</td>
|
||
<td>node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js</a>文件里的<code>nodeIconList</code>列表里获取到，图标名称为<code>type_name</code>，如<code>['priority_1']</code>）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_HYPERLINK</td>
|
||
<td>设置节点超链接</td>
|
||
<td>node（要设置的节点）、link（超链接地址）、title（超链接名称，可选）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_NOTE</td>
|
||
<td>设置节点备注</td>
|
||
<td>node（要设置的节点）、note（备注文字）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_TAG</td>
|
||
<td>设置节点标签</td>
|
||
<td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js</a>里获取到）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>INSERT_AFTER（v0.1.5+）</td>
|
||
<td>将节点移动到另一个节点的后面</td>
|
||
<td>node（要移动的节点）、 exist（目标节点）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>INSERT_BEFORE（v0.1.5+）</td>
|
||
<td>将节点移动到另一个节点的前面</td>
|
||
<td>node（要移动的节点）、 exist（目标节点）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>MOVE_NODE_TO（v0.1.5+）</td>
|
||
<td>移动一个节点作为另一个节点的子节点</td>
|
||
<td>node（要移动的节点）、 toNode（目标节点）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>ADD_GENERALIZATION（v0.2.0+）</td>
|
||
<td>添加节点概要</td>
|
||
<td>data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>REMOVE_GENERALIZATION（v0.2.0+）</td>
|
||
<td>删除节点概要</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_CUSTOM_POSITION（v0.2.0+）</td>
|
||
<td>设置节点自定义位置</td>
|
||
<td>node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>RESET_LAYOUT（v0.2.0+）</td>
|
||
<td>一键整理布局</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>SET_NODE_SHAPE（v0.2.4+）</td>
|
||
<td>设置节点形状</td>
|
||
<td>node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js）</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3>setData(data)</h3>
|
||
<p>动态设置思维导图数据，纯节点数据</p>
|
||
<p><code>data</code>：思维导图结构数据</p>
|
||
<h3>setFullData(<em>data</em>)</h3>
|
||
<blockquote>
|
||
<p>v0.2.7+</p>
|
||
</blockquote>
|
||
<p>动态设置思维导图数据，包括节点数据、布局、主题、视图</p>
|
||
<p><code>data</code>：完整数据，结构可参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
|
||
<h3>getData(withConfig)</h3>
|
||
<blockquote>
|
||
<p>v0.2.9+</p>
|
||
</blockquote>
|
||
<p>获取思维导图数据</p>
|
||
<p><code>withConfig</code>：<code>Boolean</code>，默认为<code>false</code>，即获取的数据只包括节点树，如果传<code>true</code>则会包含主题、布局、视图等数据</p>
|
||
<h3>export(type, isDownload, fileName)</h3>
|
||
<blockquote>
|
||
<p>需要先注册<code>Export</code>插件</p>
|
||
</blockquote>
|
||
<p>导出</p>
|
||
<p><code>type</code>：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）</p>
|
||
<p><code>isDownload</code>：是否需要直接触发下载，布尔值，默认为<code>false</code></p>
|
||
<p><code>fileName</code>：（v0.1.6+）导出文件的名称，默认为<code>思维导图</code></p>
|
||
<p>如果是导出为<code>png</code>，那么可以传递第四个参数：</p>
|
||
<p><code>transparent</code>：v0.5.7+, <code>Boolean</code>，默认为<code>false</code>，指定导出图片的背景是否是透明的</p>
|
||
<p>如果是导出为<code>svg</code>，那么可以传递第四个参数：</p>
|
||
<p><code>plusCssText</code>：附加的<code>css</code>样式，如果<code>svg</code>中存在<code>dom</code>节点，想要设置一些针对节点的样式可以通过这个参数传入</p>
|
||
<p>如果是导出为<code>json</code>或<code>smm</code>，那么可以传递第四个参数：</p>
|
||
<p><code>withConfig</code>：<code>Boolean</code>，默认为<code>true</code>，指定导出的数据中是否包含配置数据，否则只导出纯节点树数据</p>
|
||
<h3>toPos(x, y)</h3>
|
||
<blockquote>
|
||
<p>v0.1.5+</p>
|
||
</blockquote>
|
||
<p>将浏览器可视窗口的坐标转换成相对于画布的坐标</p>
|
||
<h3>addPlugin(plugin, opt)</h3>
|
||
<blockquote>
|
||
<p>v0.4.0+</p>
|
||
</blockquote>
|
||
<p>注册插件，使用<code>MindMap.usePlugin</code>注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的<code>addPlugin</code>方法。</p>
|
||
<h3>removePlugin(plugin)</h3>
|
||
<blockquote>
|
||
<p>v0.4.0+</p>
|
||
</blockquote>
|
||
<p>移除注册的插件，无论是通过<code>usePlugin</code>还是<code>addPlugin</code>方法注册的插件都可以移除。</p>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style> |