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:
街角小林
parent
74b1a082fe
commit
7a8b83b9b4
@ -27,7 +27,7 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。
|
||||
|
||||
> 客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。
|
||||
|
||||
> 如果访问 github 比较慢，可以使用：http://lxqnsys.com/simple-mind-map/#/index
|
||||
> 如果访问 github 比较慢，可以使用【更新可能会滞后】：http://lxqnsys.com/simple-mind-map/#/index
|
||||
|
||||
# 特性
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.9.3",
|
||||
"version": "0.9.4",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -1,5 +1,35 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.4
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue of inconsistent text wrapping caused by inconsistent text area width during node display and editing in some cases.
|
||||
>
|
||||
> 2.Fixed the issue where gradients were not applied to the edit box during rich text editing for nodes with gradient backgrounds.
|
||||
>
|
||||
> 3.Fix the issue of text style loss after switching themes for nodes defined in bold by the theme.
|
||||
>
|
||||
> 4.Fix the issue on Mac where the useLeftKeySelectionRightKeyDrag option is set to true and cannot hold down the Ctrl key to select multiple nodes.
|
||||
>
|
||||
> 5.Fix the issue where text styles are lost after clearing styles during node rich text editing, and switching themes does not restore them.
|
||||
>
|
||||
> 6.Fix data issue when deleting nodes with child nodes_ Change_ The issue of error reporting in detail events.
|
||||
|
||||
New:
|
||||
|
||||
> 1.Add the lineRadius property to the theme configuration to set the size of the rounded corners when connecting straight lines.
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.Remove the display of formulas from the outline.
|
||||
>
|
||||
> 2.Some configurations in the basic style that only support partial structures are displayed and hidden based on the current structure.
|
||||
>
|
||||
> 3.Add configuration for connecting rounded corners.
|
||||
>
|
||||
> 4.Automatically hide the sidebar when importing files.
|
||||
|
||||
## 0.9.3
|
||||
|
||||
Fix
|
||||
|
||||
@ -1,6 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.4</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue of inconsistent text wrapping caused by inconsistent text area width during node display and editing in some cases.</p>
|
||||
<p>2.Fixed the issue where gradients were not applied to the edit box during rich text editing for nodes with gradient backgrounds.</p>
|
||||
<p>3.Fix the issue of text style loss after switching themes for nodes defined in bold by the theme.</p>
|
||||
<p>4.Fix the issue on Mac where the useLeftKeySelectionRightKeyDrag option is set to true and cannot hold down the Ctrl key to select multiple nodes.</p>
|
||||
<p>5.Fix the issue where text styles are lost after clearing styles during node rich text editing, and switching themes does not restore them.</p>
|
||||
<p>6.Fix data issue when deleting nodes with child nodes_ Change_ The issue of error reporting in detail events.</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Add the lineRadius property to the theme configuration to set the size of the rounded corners when connecting straight lines.</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.Remove the display of formulas from the outline.</p>
|
||||
<p>2.Some configurations in the basic style that only support partial structures are displayed and hidden based on the current structure.</p>
|
||||
<p>3.Add configuration for connecting rounded corners.</p>
|
||||
<p>4.Automatically hide the sidebar when importing files.</p>
|
||||
</blockquote>
|
||||
<h2>0.9.3</h2>
|
||||
<p>Fix</p>
|
||||
<blockquote>
|
||||
|
||||
@ -421,6 +421,7 @@ Listen to an event. Event list:
|
||||
| body_mousedown（v0.9.2+） | Mousedown event of document.body | e（event object） |
|
||||
| body_click | Click event of document.body | e（event object） |
|
||||
| data_change_detail（v0.9.3+） | The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update | arr（Detail data） |
|
||||
| layout_change（v0.9.4+） | Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called | layout（New layout） |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@ -1114,6 +1114,11 @@ poor performance and should be used sparingly.</p>
|
||||
<td>The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update</td>
|
||||
<td>arr（Detail data）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout_change（v0.9.4+）</td>
|
||||
<td>Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called</td>
|
||||
<td>layout（New layout）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
|
||||
@ -86,7 +86,7 @@ Select All. When the node is being edited, you can select all the text in the no
|
||||
|
||||
Focus.
|
||||
|
||||
### formatText(config = {})
|
||||
### formatText(config = {}, clear = false, pure = false)
|
||||
|
||||
- `config`：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:
|
||||
|
||||
@ -102,7 +102,11 @@ Focus.
|
||||
}
|
||||
```
|
||||
|
||||
Formats the currently selected text.
|
||||
- `clear`：Is clear style
|
||||
|
||||
- `pure`：v0.9.4+, If set to true, only the text style will be formatted and will not be synchronized to the node's data
|
||||
|
||||
Formats the currently selected text. The style settings will be synchronized to the data of the node.
|
||||
|
||||
### formatRangeText(range, config = {})
|
||||
|
||||
|
||||
@ -71,7 +71,7 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<p>v0.4.7+</p>
|
||||
</blockquote>
|
||||
<p>Focus.</p>
|
||||
<h3>formatText(config = {})</h3>
|
||||
<h3>formatText(config = {}, clear = false, pure = false)</h3>
|
||||
<ul>
|
||||
<li><code>config</code>：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:</li>
|
||||
</ul>
|
||||
@ -85,7 +85,15 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#333'</span> <span class="hljs-comment">// color</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>Formats the currently selected text.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>clear</code>：Is clear style</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>pure</code>：v0.9.4+, If set to true, only the text style will be formatted and will not be synchronized to the node's data</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Formats the currently selected text. The style settings will be synchronized to the data of the node.</p>
|
||||
<h3>formatRangeText(range, config = {})</h3>
|
||||
<ul>
|
||||
<li><code>range</code>：The range object of <code>Quill</code>, has the following format:</li>
|
||||
|
||||
@ -1,5 +1,35 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.4
|
||||
|
||||
修复：
|
||||
|
||||
> 1.修复一些情况下，节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题。
|
||||
>
|
||||
> 2.修复存在渐变色背景的节点富文本编辑时编辑框没有应用渐变的问题。
|
||||
>
|
||||
> 3.修复被主题定义了加粗的节点切换主题后文本样式丢失的问题。
|
||||
>
|
||||
> 4.修复mac上useLeftKeySelectionRightKeyDrag选项设为true时无法按住ctrl键多选节点的问题。
|
||||
>
|
||||
> 5.修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题。
|
||||
>
|
||||
> 6.修复删除含有子节点的节点时，data_change_detail事件报错的问题。
|
||||
|
||||
新增：
|
||||
|
||||
> 1.主题配置增加lineRadius属性设置直线连接时的圆角大小。
|
||||
|
||||
Demo：
|
||||
|
||||
> 1.大纲里去掉公式的显示。
|
||||
>
|
||||
> 2.基础样式中一些仅支持部分结构的配置根据当前结构进行显示和隐藏。
|
||||
>
|
||||
> 3.新增连线圆角的配置。
|
||||
>
|
||||
> 4.导入文件时自动隐藏侧边栏。
|
||||
|
||||
## 0.9.3
|
||||
|
||||
修复：
|
||||
|
||||
@ -1,6 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.4</h2>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
<p>1.修复一些情况下，节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题。</p>
|
||||
<p>2.修复存在渐变色背景的节点富文本编辑时编辑框没有应用渐变的问题。</p>
|
||||
<p>3.修复被主题定义了加粗的节点切换主题后文本样式丢失的问题。</p>
|
||||
<p>4.修复mac上useLeftKeySelectionRightKeyDrag选项设为true时无法按住ctrl键多选节点的问题。</p>
|
||||
<p>5.修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题。</p>
|
||||
<p>6.修复删除含有子节点的节点时，data_change_detail事件报错的问题。</p>
|
||||
</blockquote>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
<p>1.主题配置增加lineRadius属性设置直线连接时的圆角大小。</p>
|
||||
</blockquote>
|
||||
<p>Demo：</p>
|
||||
<blockquote>
|
||||
<p>1.大纲里去掉公式的显示。</p>
|
||||
<p>2.基础样式中一些仅支持部分结构的配置根据当前结构进行显示和隐藏。</p>
|
||||
<p>3.新增连线圆角的配置。</p>
|
||||
<p>4.导入文件时自动隐藏侧边栏。</p>
|
||||
</blockquote>
|
||||
<h2>0.9.3</h2>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
|
||||
@ -418,6 +418,7 @@ mindMap.setTheme('主题名称')
|
||||
| body_mousedown（v0.9.2+） | document.body的鼠标按下事件 | e（事件对象） |
|
||||
| body_click | document.body的点击事件 | e（事件对象） |
|
||||
| data_change_detail（v0.9.3+） | 渲染树数据变化的明细，会返回一个数组，每一项代表一个更新点，每一项都是一个对象，存在一个`type`属性，代表明细的类型，包含`create`（创建节点）、`update`（更新节点）、`delete`（删除节点），存在一个`data`属性，代表当前更新的节点数据，如果是`update`类型，还会存在一个`oldData`属性，保存了更新前该节点的数据 | arr（明细数据） |
|
||||
| layout_change（v0.9.4+） | 修改结构时触发，即调用了mindMap.setLayout()方法时触发 | layout（新的结构） |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@ -1022,6 +1022,11 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<td>渲染树数据变化的明细，会返回一个数组，每一项代表一个更新点，每一项都是一个对象，存在一个<code>type</code>属性，代表明细的类型，包含<code>create</code>（创建节点）、<code>update</code>（更新节点）、<code>delete</code>（删除节点），存在一个<code>data</code>属性，代表当前更新的节点数据，如果是<code>update</code>类型，还会存在一个<code>oldData</code>属性，保存了更新前该节点的数据</td>
|
||||
<td>arr（明细数据）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout_change（v0.9.4+）</td>
|
||||
<td>修改结构时触发，即调用了mindMap.setLayout()方法时触发</td>
|
||||
<td>layout（新的结构）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
|
||||
@ -1,5 +1,165 @@
|
||||
# 主题
|
||||
|
||||
## 主题配置属性一览
|
||||
|
||||
此处的配置可能未及时更新，完整的主题配置可以参考：[default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。
|
||||
|
||||
如果某个属性的值你不知道如何传，可以去在线demo中设置一下，然后导出json或smm文件查看对应的值。也可以参考demo项目中的配置[zh.js](https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js)。
|
||||
|
||||
```js
|
||||
{
|
||||
// 节点内边距
|
||||
paddingX: 15,
|
||||
paddingY: 5,
|
||||
// 图片显示的最大宽度
|
||||
imgMaxWidth: 100,
|
||||
// 图片显示的最大高度
|
||||
imgMaxHeight: 100,
|
||||
// icon的大小
|
||||
iconSize: 20,
|
||||
// 连线的粗细
|
||||
lineWidth: 1,
|
||||
// 连线的颜色
|
||||
lineColor: '#549688',
|
||||
// 连线样式
|
||||
lineDasharray: 'none',
|
||||
// 连线风格，支持三种
|
||||
// 1.曲线（curve）。仅logicalStructure、mindMap、verticalTimeline三种结构支持。
|
||||
// 2.直线（straight）。
|
||||
// 3.直连（direct）。仅logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构支持。
|
||||
lineStyle: 'straight',
|
||||
// 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅logicalStructure、mindMap两种结构支持。
|
||||
rootLineKeepSameInCurve: true,
|
||||
// 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
|
||||
lineRadius: 5,
|
||||
// 连线尾部是否显示标记，目前只支持箭头
|
||||
showLineMarker: false,
|
||||
// 概要连线的粗细
|
||||
generalizationLineWidth: 1,
|
||||
// 概要连线的颜色
|
||||
generalizationLineColor: '#549688',
|
||||
// 概要曲线距节点的距离
|
||||
generalizationLineMargin: 0,
|
||||
// 概要节点距节点的距离
|
||||
generalizationNodeMargin: 20,
|
||||
// 关联线默认状态的粗细
|
||||
associativeLineWidth: 2,
|
||||
// 关联线默认状态的颜色
|
||||
associativeLineColor: 'rgb(51, 51, 51)',
|
||||
// 关联线激活状态的粗细
|
||||
associativeLineActiveWidth: 8,
|
||||
// 关联线激活状态的颜色
|
||||
associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
|
||||
// 关联线文字颜色
|
||||
associativeLineTextColor: 'rgb(51, 51, 51)',
|
||||
// 关联线文字大小
|
||||
associativeLineTextFontSize: 14,
|
||||
// 关联线文字行高
|
||||
associativeLineTextLineHeight: 1.2,
|
||||
// 关联线文字字体
|
||||
associativeLineTextFontFamily: '微软雅黑, Microsoft YaHei',
|
||||
// 背景颜色
|
||||
backgroundColor: '#fafafa',
|
||||
// 背景图片
|
||||
backgroundImage: 'none',
|
||||
// 背景重复
|
||||
backgroundRepeat: 'no-repeat',
|
||||
// 设置背景图像的起始位置
|
||||
backgroundPosition: 'center center',
|
||||
// 设置背景图片大小
|
||||
backgroundSize: 'cover',
|
||||
// 节点使用只有底边横线的样式，仅logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构支持。
|
||||
nodeUseLineStyle: false,
|
||||
// 根节点样式
|
||||
root: {
|
||||
// 形状
|
||||
shape: 'rectangle',
|
||||
// 背景颜色
|
||||
fillColor: '#549688',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
// 是否使用渐变背景，如果设为true，则会忽略fillColor配置
|
||||
gradientStyle: false,
|
||||
// 如果gradientStyle为true，那么可以通过这两个字段来定义渐变的起止颜色
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
},
|
||||
// 二级节点样式
|
||||
second: {
|
||||
shape: 'rectangle',
|
||||
// 外边距
|
||||
marginX: 100,
|
||||
marginY: 40,
|
||||
fillColor: '#fff',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#565656',
|
||||
fontSize: 16,
|
||||
fontWeight: 'noraml',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: '#549688',
|
||||
borderWidth: 1,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
},
|
||||
// 三级及以下节点样式
|
||||
node: {
|
||||
shape: 'rectangle',
|
||||
marginX: 50,
|
||||
marginY: 0,
|
||||
fillColor: 'transparent',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#6a6d6c',
|
||||
fontSize: 14,
|
||||
fontWeight: 'noraml',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
borderRadius: 5,
|
||||
borderDasharray: 'none',
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
},
|
||||
// 概要节点样式
|
||||
generalization: {
|
||||
shape: 'rectangle',
|
||||
marginX: 100,
|
||||
marginY: 40,
|
||||
fillColor: '#fff',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#565656',
|
||||
fontSize: 16,
|
||||
fontWeight: 'noraml',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: '#549688',
|
||||
borderWidth: 1,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 使用和切换主题
|
||||
|
||||
`simple-mind-map`内置了很多主题，可以通过如下方式获取到所有的内置主题列表：
|
||||
@ -31,6 +191,31 @@ mindMap.setTheme('classic')
|
||||
const theme = mindMap.getTheme()
|
||||
```
|
||||
|
||||
## 修改主题的部分配置
|
||||
|
||||
要修改主题的部分配置，可以在实例化时通过`themeConfig`选项设置：
|
||||
|
||||
```js
|
||||
new MindMap({
|
||||
themeConfig: {
|
||||
paddingX: 20,
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
具体的主题属性可以参考前面小节，最终渲染时，`themeConfig`配置会和当前主题配置进行合并。
|
||||
|
||||
如果实例化后想动态设置，可以使用`setThemeConfig`方法：
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
paddingX: 20,
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
注意，你传入的这个对象会替换掉配置中的`themeConfig`原有的值。
|
||||
|
||||
## 定义新主题
|
||||
|
||||
除了可以使用内置的主题外，你也可以自定义新主题：
|
||||
|
||||
@ -1,6 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>主题</h1>
|
||||
<h2>主题配置属性一览</h2>
|
||||
<p>此处的配置可能未及时更新，完整的主题配置可以参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a>。</p>
|
||||
<p>如果某个属性的值你不知道如何传，可以去在线demo中设置一下，然后导出json或smm文件查看对应的值。也可以参考demo项目中的配置<a href="https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js">zh.js</a>。</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-comment">// 节点内边距</span>
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">15</span>,
|
||||
<span class="hljs-attr">paddingY</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-comment">// 图片显示的最大宽度</span>
|
||||
<span class="hljs-attr">imgMaxWidth</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-comment">// 图片显示的最大高度</span>
|
||||
<span class="hljs-attr">imgMaxHeight</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-comment">// icon的大小</span>
|
||||
<span class="hljs-attr">iconSize</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// 连线的粗细</span>
|
||||
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-comment">// 连线的颜色</span>
|
||||
<span class="hljs-attr">lineColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-comment">// 连线样式</span>
|
||||
<span class="hljs-attr">lineDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-comment">// 连线风格，支持三种</span>
|
||||
<span class="hljs-comment">// 1.曲线（curve）。仅logicalStructure、mindMap、verticalTimeline三种结构支持。</span>
|
||||
<span class="hljs-comment">// 2.直线（straight）。</span>
|
||||
<span class="hljs-comment">// 3.直连（direct）。仅logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构支持。</span>
|
||||
<span class="hljs-attr">lineStyle</span>: <span class="hljs-string">'straight'</span>,
|
||||
<span class="hljs-comment">// 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅logicalStructure、mindMap两种结构支持。</span>
|
||||
<span class="hljs-attr">rootLineKeepSameInCurve</span>: <span class="hljs-literal">true</span>,
|
||||
<span class="hljs-comment">// 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构</span>
|
||||
<span class="hljs-attr">lineRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-comment">// 连线尾部是否显示标记，目前只支持箭头</span>
|
||||
<span class="hljs-attr">showLineMarker</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-comment">// 概要连线的粗细</span>
|
||||
<span class="hljs-attr">generalizationLineWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-comment">// 概要连线的颜色</span>
|
||||
<span class="hljs-attr">generalizationLineColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-comment">// 概要曲线距节点的距离</span>
|
||||
<span class="hljs-attr">generalizationLineMargin</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-comment">// 概要节点距节点的距离</span>
|
||||
<span class="hljs-attr">generalizationNodeMargin</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// 关联线默认状态的粗细</span>
|
||||
<span class="hljs-attr">associativeLineWidth</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-comment">// 关联线默认状态的颜色</span>
|
||||
<span class="hljs-attr">associativeLineColor</span>: <span class="hljs-string">'rgb(51, 51, 51)'</span>,
|
||||
<span class="hljs-comment">// 关联线激活状态的粗细</span>
|
||||
<span class="hljs-attr">associativeLineActiveWidth</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-comment">// 关联线激活状态的颜色</span>
|
||||
<span class="hljs-attr">associativeLineActiveColor</span>: <span class="hljs-string">'rgba(2, 167, 240, 1)'</span>,
|
||||
<span class="hljs-comment">// 关联线文字颜色</span>
|
||||
<span class="hljs-attr">associativeLineTextColor</span>: <span class="hljs-string">'rgb(51, 51, 51)'</span>,
|
||||
<span class="hljs-comment">// 关联线文字大小</span>
|
||||
<span class="hljs-attr">associativeLineTextFontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-comment">// 关联线文字行高</span>
|
||||
<span class="hljs-attr">associativeLineTextLineHeight</span>: <span class="hljs-number">1.2</span>,
|
||||
<span class="hljs-comment">// 关联线文字字体</span>
|
||||
<span class="hljs-attr">associativeLineTextFontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-comment">// 背景颜色</span>
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#fafafa'</span>,
|
||||
<span class="hljs-comment">// 背景图片</span>
|
||||
<span class="hljs-attr">backgroundImage</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-comment">// 背景重复</span>
|
||||
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">'no-repeat'</span>,
|
||||
<span class="hljs-comment">// 设置背景图像的起始位置</span>
|
||||
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">'center center'</span>,
|
||||
<span class="hljs-comment">// 设置背景图片大小</span>
|
||||
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">'cover'</span>,
|
||||
<span class="hljs-comment">// 节点使用只有底边横线的样式，仅logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构支持。</span>
|
||||
<span class="hljs-attr">nodeUseLineStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-comment">// 根节点样式</span>
|
||||
<span class="hljs-attr">root</span>: {
|
||||
<span class="hljs-comment">// 形状</span>
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-comment">// 背景颜色</span>
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#fff'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'transparent'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-comment">// 是否使用渐变背景，如果设为true，则会忽略fillColor配置</span>
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-comment">// 如果gradientStyle为true，那么可以通过这两个字段来定义渐变的起止颜色</span>
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 二级节点样式</span>
|
||||
<span class="hljs-attr">second</span>: {
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-comment">// 外边距</span>
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'#fff'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#565656'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'noraml'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 三级及以下节点样式</span>
|
||||
<span class="hljs-attr">node</span>: {
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'transparent'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#6a6d6c'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'noraml'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'transparent'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 概要节点样式</span>
|
||||
<span class="hljs-attr">generalization</span>: {
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'#fff'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#565656'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'noraml'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<h2>使用和切换主题</h2>
|
||||
<p><code>simple-mind-map</code>内置了很多主题，可以通过如下方式获取到所有的内置主题列表：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> { themeList } <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/constants/constant'</span>
|
||||
@ -20,6 +175,23 @@
|
||||
<p>如果要获取当前使用的主题名称可以使用：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> theme = mindMap.getTheme()
|
||||
</code></pre>
|
||||
<h2>修改主题的部分配置</h2>
|
||||
<p>要修改主题的部分配置，可以在实例化时通过<code>themeConfig</code>选项设置：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">themeConfig</span>: {
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// ...</span>
|
||||
}
|
||||
})
|
||||
</code></pre>
|
||||
<p>具体的主题属性可以参考前面小节，最终渲染时，<code>themeConfig</code>配置会和当前主题配置进行合并。</p>
|
||||
<p>如果实例化后想动态设置，可以使用<code>setThemeConfig</code>方法：</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// ...</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>注意，你传入的这个对象会替换掉配置中的<code>themeConfig</code>原有的值。</p>
|
||||
<h2>定义新主题</h2>
|
||||
<p>除了可以使用内置的主题外，你也可以自定义新主题：</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>
|
||||
|
||||
@ -86,7 +86,7 @@ MindMap.usePlugin(RichText, opt?)
|
||||
|
||||
聚焦。
|
||||
|
||||
### formatText(config = {})
|
||||
### formatText(config = {}, clear = false, pure = false)
|
||||
|
||||
- `config`：对象，键为样式属性，值为样式值，完整的配置如下：
|
||||
|
||||
@ -102,7 +102,11 @@ MindMap.usePlugin(RichText, opt?)
|
||||
}
|
||||
```
|
||||
|
||||
格式化当前选中的文本。
|
||||
- `clear`：是否是清除样式
|
||||
|
||||
- `pure`：v0.9.4+，如果设为true，那么仅会格式化文本样式，不会同步到节点的数据中
|
||||
|
||||
格式化当前选中的文本。会将样式设置同步到节点的数据中。
|
||||
|
||||
### formatRangeText(range, config = {})
|
||||
|
||||
|
||||
@ -71,7 +71,7 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<p>v0.4.7+</p>
|
||||
</blockquote>
|
||||
<p>聚焦。</p>
|
||||
<h3>formatText(config = {})</h3>
|
||||
<h3>formatText(config = {}, clear = false, pure = false)</h3>
|
||||
<ul>
|
||||
<li><code>config</code>：对象，键为样式属性，值为样式值，完整的配置如下：</li>
|
||||
</ul>
|
||||
@ -85,7 +85,15 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#333'</span> <span class="hljs-comment">// 颜色</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>格式化当前选中的文本。</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>clear</code>：是否是清除样式</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>pure</code>：v0.9.4+，如果设为true，那么仅会格式化文本样式，不会同步到节点的数据中</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>格式化当前选中的文本。会将样式设置同步到节点的数据中。</p>
|
||||
<h3>formatRangeText(range, config = {})</h3>
|
||||
<ul>
|
||||
<li><code>range</code>：<code>Quill</code>的范围对象，格式如下：</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user