From aee10c68101169550a2d5a9995a169d27f044afb Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Fri, 8 Sep 2023 17:54:15 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E8=8A=82=E7=82=B9=E6=95=B0?=
=?UTF-8?q?=E6=8D=AEdata=E4=B8=AD=E4=BB=A5=5F=E5=BC=80=E5=A4=B4=E7=9A=84?=
=?UTF-8?q?=E5=AD=97=E6=AE=B5=E8=A2=AB=E8=AE=A4=E4=B8=BA=E6=98=AF=E8=87=AA?=
=?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
simple-mind-map/src/core/render/node/Style.js | 9 ++--
simple-mind-map/src/plugins/Painter.js | 4 +-
simple-mind-map/src/utils/index.js | 12 ++++++
web/src/pages/Doc/en/constructor/index.md | 43 ++++++++++++++++++-
web/src/pages/Doc/en/constructor/index.vue | 38 +++++++++++++++-
web/src/pages/Doc/zh/constructor/index.md | 43 ++++++++++++++++++-
web/src/pages/Doc/zh/constructor/index.vue | 38 +++++++++++++++-
7 files changed, 176 insertions(+), 11 deletions(-)
diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js
index 98341bee..dacc31c3 100644
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -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
}
})
diff --git a/simple-mind-map/src/plugins/Painter.js b/simple-mind-map/src/plugins/Painter.js
index ff395165..5dd0be52 100644
--- a/simple-mind-map/src/plugins/Painter.js
+++ b/simple-mind-map/src/plugins/Painter.js
@@ -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]
}
})
diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js
index 405e2c56..d9de6f48 100644
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -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
}
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index a82b6e66..1566600e 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -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 |
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 0e7f439f..22890976 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -39,7 +39,7 @@
| data |
Object |
{} |
-Mind map data, refer to: exampleData.js |
+Mind map data, Please refer to the introduction of 【Data structure】 below |
|
@@ -471,6 +471,42 @@
+Data structure
+The basic data structure is as follows:
+{
+ data: {
+ text: '',
+ richText: false,
+ expand: true,
+ uid: '',
+ icon: [],
+ image: '',
+ imageTitle: '',
+ imageSize: {
+ width: 100,
+ height: 100,
+ custom: false
+ },
+ hyperlink: '',
+ hyperlinkTitle: '',
+ note: '',
+ tag: [],
+ generalization: {
+ text: ''
+ },
+ associativeLineTargets: [''],
+ associativeLineText: '',
+
+ },
+ children [
+ {
+ 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
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index 25bf7083..15e82745 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -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`对象里，那么请使用`_`开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
+
### 水印配置
| 字段名称 | 类型 | 默认值 | 描述 |
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 6e34e391..d64c1c0f 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -39,7 +39,7 @@
| data |
Object |
{} |
-思维导图数据，可参考：exampleData.js |
+思维导图数据，可参考下方【数据结构】介绍 |
|
@@ -471,6 +471,42 @@
+数据结构
+基本的数据结构如下：
+{
+ data: {
+ text: '',
+ richText: false,
+ expand: true,
+ uid: '',
+ icon: [],
+ image: '',
+ imageTitle: '',
+ imageSize: {
+ width: 100,
+ height: 100,
+ custom: false
+ },
+ hyperlink: '',
+ hyperlinkTitle: '',
+ note: '',
+ tag: [],
+ generalization: {
+ text: ''
+ },
+ associativeLineTargets: [''],
+ associativeLineText: '',
+
+ },
+ children [
+ {
+ data: {},
+ children: []
+ }
+ ]
+}
+
+如果你要添加自定义的字段，可以添加到data、children同级，如果你要添加到data对象里，那么请使用_开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
水印配置