mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Feat：节点数据data中以_开头的字段被认为是自定义字段
This commit is contained in:
wanglin2
parent
fe43be3451
commit
aee10c6810
@ -1,7 +1,6 @@
|
||||
import {
|
||||
tagColorList,
|
||||
nodeDataNoStylePropList
|
||||
} from '../../../constants/constant'
|
||||
import { tagColorList } from '../../../constants/constant'
|
||||
import { checkIsNodeStyleDataKey } from '../../../utils/index'
|
||||
|
||||
const rootProp = ['paddingX', 'paddingY']
|
||||
const backgroundStyleProps = [
|
||||
'backgroundColor',
|
||||
@ -225,7 +224,7 @@ class Style {
|
||||
hasCustomStyle() {
|
||||
let res = false
|
||||
Object.keys(this.ctx.nodeData.data).forEach(item => {
|
||||
if (!nodeDataNoStylePropList.includes(item)) {
|
||||
if (checkIsNodeStyleDataKey(item)) {
|
||||
res = true
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { nodeDataNoStylePropList } from '../constants/constant'
|
||||
import { checkIsNodeStyleDataKey } from '../utils/index'
|
||||
|
||||
// 格式刷插件
|
||||
class Painter {
|
||||
@ -55,7 +55,7 @@ class Painter {
|
||||
const style = {}
|
||||
const painterNodeData = this.painterNode.nodeData.data
|
||||
Object.keys(painterNodeData).forEach(key => {
|
||||
if (!nodeDataNoStylePropList.includes(key)) {
|
||||
if (checkIsNodeStyleDataKey(key)) {
|
||||
style[key] = painterNodeData[key]
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { nodeDataNoStylePropList } from '../constants/constant'
|
||||
|
||||
// 深度优先遍历树
|
||||
export const walk = (
|
||||
@ -656,4 +657,15 @@ export const getObjectChangedProps = (oldObject, newObject) => {
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 判断一个字段是否是节点数据中的样式字段
|
||||
export const checkIsNodeStyleDataKey = (key) => {
|
||||
// 用户自定义字段
|
||||
if (/^_/.test(key)) return false
|
||||
// 不在节点非样式字段列表里，那么就是样式字段
|
||||
if (!nodeDataNoStylePropList.includes(key)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
@ -25,7 +25,7 @@ const mindMap = new MindMap({
|
||||
| Field Name | Type | Default Value | Description | Required |
|
||||
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
|
||||
| el | Element | | Container element, must be a DOM element | Yes |
|
||||
| data | Object | {} | Mind map data, refer to: [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
|
||||
| data | Object | {} | Mind map data, Please refer to the introduction of 【Data structure】 below | |
|
||||
| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） | |
|
||||
| fishboneDeg（v0.5.4+） | Number | 45 | Set the diagonal angle of the fishbone structure diagram | |
|
||||
| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(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+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+) | |
|
||||
@ -88,6 +88,47 @@ const mindMap = new MindMap({
|
||||
| hoverRectPadding（v0.7.0+） | Number | 2 | The distance between the node mouse hover and the displayed rectangular border when activated and the node content | |
|
||||
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | |
|
||||
|
||||
### Data structure
|
||||
|
||||
The basic data structure is as follows:
|
||||
|
||||
```js
|
||||
{
|
||||
data: {
|
||||
text: '', // The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true
|
||||
richText: false, // Is the text of the node in rich text mode
|
||||
expand: true, // Whether the node is expanded
|
||||
uid: '',// The unique ID of the node, which may not be passed, will be generated internally
|
||||
icon: [], // The format of the icon can be found in the "插入和扩展节点图标" section of the tutorial
|
||||
image: '', // URL of the image
|
||||
imageTitle: '', // The title of the image can be blank
|
||||
imageSize: { // The size of the image
|
||||
width: 100, // The width of the image, mandatory
|
||||
height: 100, // The height of the image is mandatory
|
||||
custom: false // If set to true, the display size of the image is not controlled by the theme, and is based on imageSize.width and imageSize.height
|
||||
},
|
||||
hyperlink: '', // Hyperlink address
|
||||
hyperlinkTitle: '', // Title of hyperlink
|
||||
note: '', // Content of remarks
|
||||
tag: [], // Tag list
|
||||
generalization: {// The summary of the node, if there is no summary, the generalization can be set to null
|
||||
text: ''// Summary Text
|
||||
},
|
||||
associativeLineTargets: [''],// If there are associated lines, then it is the uid list of the target node
|
||||
associativeLineText: '',// Association Line Text
|
||||
// ...For other style fields, please refer to the topic
|
||||
},
|
||||
children [// Child nodes, with consistent structure and root nodes
|
||||
{
|
||||
data: {},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the `_` Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.
|
||||
|
||||
### Watermark config
|
||||
|
||||
| Field Name | Type | Default Value | Description |
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<td>data</td>
|
||||
<td>Object</td>
|
||||
<td>{}</td>
|
||||
<td>Mind map data, refer to: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a></td>
|
||||
<td>Mind map data, Please refer to the introduction of 【Data structure】 below</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -471,6 +471,42 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Data structure</h3>
|
||||
<p>The basic data structure is as follows:</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true</span>
|
||||
<span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Is the text of the node in rich text mode</span>
|
||||
<span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// Whether the node is expanded</span>
|
||||
<span class="hljs-attr">uid</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// The unique ID of the node, which may not be passed, will be generated internally</span>
|
||||
<span class="hljs-attr">icon</span>: [], <span class="hljs-comment">// The format of the icon can be found in the "插入和扩展节点图标" section of the tutorial</span>
|
||||
<span class="hljs-attr">image</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// URL of the image</span>
|
||||
<span class="hljs-attr">imageTitle</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// The title of the image can be blank</span>
|
||||
<span class="hljs-attr">imageSize</span>: { <span class="hljs-comment">// The size of the image</span>
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// The width of the image, mandatory</span>
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// The height of the image is mandatory</span>
|
||||
<span class="hljs-attr">custom</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// If set to true, the display size of the image is not controlled by the theme, and is based on imageSize.width and imageSize.height</span>
|
||||
},
|
||||
<span class="hljs-attr">hyperlink</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// Hyperlink address</span>
|
||||
<span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// Title of hyperlink</span>
|
||||
<span class="hljs-attr">note</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// Content of remarks</span>
|
||||
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// Tag list</span>
|
||||
<span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// The summary of the node, if there is no summary, the generalization can be set to null</span>
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span><span class="hljs-comment">// Summary Text</span>
|
||||
},
|
||||
<span class="hljs-attr">associativeLineTargets</span>: [<span class="hljs-string">''</span>],<span class="hljs-comment">// If there are associated lines, then it is the uid list of the target node</span>
|
||||
<span class="hljs-attr">associativeLineText</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// Association Line Text</span>
|
||||
<span class="hljs-comment">// ...For other style fields, please refer to the topic</span>
|
||||
},
|
||||
children [<span class="hljs-comment">// Child nodes, with consistent structure and root nodes</span>
|
||||
{
|
||||
<span class="hljs-attr">data</span>: {},
|
||||
<span class="hljs-attr">children</span>: []
|
||||
}
|
||||
]
|
||||
}
|
||||
</code></pre>
|
||||
<p>If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the <code>_</code> Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.</p>
|
||||
<h3>Watermark config</h3>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@ -25,7 +25,7 @@ const mindMap = new MindMap({
|
||||
| 字段名称 | 类型 | 默认值 | 描述 | 是否必填 |
|
||||
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
|
||||
| el | Element | | 容器元素，必须为DOM元素 | 是 |
|
||||
| data | Object | {} | 思维导图数据，可参考：[exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
|
||||
| data | Object | {} | 思维导图数据，可参考下方【数据结构】介绍 | |
|
||||
| layout | String | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图） | |
|
||||
| fishboneDeg（v0.5.4+） | Number | 45 | 设置鱼骨结构图的斜线角度 | |
|
||||
| theme | String | default | 主题，可选列表：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+黑金）、avocado（v.5.10-fix.2+牛油果）、autumn（v.5.10-fix.2+秋天）、orangeJuice（v.5.10-fix.2+橙汁） | |
|
||||
@ -88,6 +88,47 @@ const mindMap = new MindMap({
|
||||
| hoverRectPadding（v0.7.0+） | Number | 2 | 节点鼠标hover和激活时显示的矩形边框距节点内容的距离 | |
|
||||
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 | |
|
||||
|
||||
### 数据结构
|
||||
|
||||
基本的数据结构如下：
|
||||
|
||||
```js
|
||||
{
|
||||
data: {
|
||||
text: '', // 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true
|
||||
richText: false, // 节点的文本是否是富文本模式
|
||||
expand: true, // 节点是否展开
|
||||
uid: '',// 节点唯一的id，可不传，内部会生成
|
||||
icon: [], // 图标，格式可参考教程里的【插入和扩展节点图标】章节
|
||||
image: '', // 图片的url
|
||||
imageTitle: '', // 图片的标题，可为空
|
||||
imageSize: { // 图片的尺寸
|
||||
width: 100, // 图片的宽度，必传
|
||||
height: 100, // 图片的高度，必传
|
||||
custom: false // 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准
|
||||
},
|
||||
hyperlink: '', // 超链接地址
|
||||
hyperlinkTitle: '', // 超链接的标题
|
||||
note: '', // 备注的内容
|
||||
tag: [], // 标签列表
|
||||
generalization: {// 节点的概要，如果没有概要generalization设为null即可
|
||||
text: ''// 概要的文本
|
||||
},
|
||||
associativeLineTargets: [''],// 如果存在关联线，那么为目标节点的uid列表
|
||||
associativeLineText: '',// 关联线文本
|
||||
// ...其他样式字段，可以参考主题
|
||||
},
|
||||
children [// 子节点，结构和根节点一致
|
||||
{
|
||||
data: {},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
如果你要添加自定义的字段，可以添加到`data`、`children`同级，如果你要添加到`data`对象里，那么请使用`_`开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
|
||||
|
||||
### 水印配置
|
||||
|
||||
| 字段名称 | 类型 | 默认值 | 描述 |
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<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">exampleData.js</a></td>
|
||||
<td>思维导图数据，可参考下方【数据结构】介绍</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -471,6 +471,42 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>数据结构</h3>
|
||||
<p>基本的数据结构如下：</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true</span>
|
||||
<span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>
|
||||
<span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 节点是否展开</span>
|
||||
<span class="hljs-attr">uid</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// 节点唯一的id，可不传，内部会生成</span>
|
||||
<span class="hljs-attr">icon</span>: [], <span class="hljs-comment">// 图标，格式可参考教程里的【插入和扩展节点图标】章节</span>
|
||||
<span class="hljs-attr">image</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 图片的url</span>
|
||||
<span class="hljs-attr">imageTitle</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 图片的标题，可为空</span>
|
||||
<span class="hljs-attr">imageSize</span>: { <span class="hljs-comment">// 图片的尺寸</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>, <span class="hljs-comment">// 图片的高度，必传</span>
|
||||
<span class="hljs-attr">custom</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准</span>
|
||||
},
|
||||
<span class="hljs-attr">hyperlink</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 超链接地址</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">''</span>, <span class="hljs-comment">// 备注的内容</span>
|
||||
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
|
||||
<span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// 节点的概要，如果没有概要generalization设为null即可</span>
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span><span class="hljs-comment">// 概要的文本</span>
|
||||
},
|
||||
<span class="hljs-attr">associativeLineTargets</span>: [<span class="hljs-string">''</span>],<span class="hljs-comment">// 如果存在关联线，那么为目标节点的uid列表</span>
|
||||
<span class="hljs-attr">associativeLineText</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// 关联线文本</span>
|
||||
<span class="hljs-comment">// ...其他样式字段，可以参考主题</span>
|
||||
},
|
||||
children [<span class="hljs-comment">// 子节点，结构和根节点一致</span>
|
||||
{
|
||||
<span class="hljs-attr">data</span>: {},
|
||||
<span class="hljs-attr">children</span>: []
|
||||
}
|
||||
]
|
||||
}
|
||||
</code></pre>
|
||||
<p>如果你要添加自定义的字段，可以添加到<code>data</code>、<code>children</code>同级，如果你要添加到<code>data</code>对象里，那么请使用<code>_</code>开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。</p>
|
||||
<h3>水印配置</h3>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user