flow-mindmap 0.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/README.md +288 -0
- package/dist/components/DataPanel.vue.d.ts +10 -0
- package/dist/components/Drawer.vue.d.ts +33 -0
- package/dist/components/Icon.vue.d.ts +7 -0
- package/dist/components/MarkdownPanel.vue.d.ts +12 -0
- package/dist/components/MindMap.vue.d.ts +60 -0
- package/dist/components/NodeContextMenu.vue.d.ts +46 -0
- package/dist/components/NotePanel.vue.d.ts +20 -0
- package/dist/components/Outline.vue.d.ts +45 -0
- package/dist/components/SettingsPanel.vue.d.ts +30 -0
- package/dist/composables/useHistory.d.ts +19 -0
- package/dist/composables/useKeyboard.d.ts +32 -0
- package/dist/composables/usePanZoom.d.ts +35 -0
- package/dist/core/layout.d.ts +98 -0
- package/dist/core/palettes.d.ts +43 -0
- package/dist/entry.d.ts +11 -0
- package/dist/flow-mindmap.js +1849 -0
- package/dist/flow-mindmap.umd.cjs +1 -0
- package/dist/style.css +1 -0
- package/dist/tree.d.ts +68 -0
- package/dist/types.d.ts +215 -0
- package/package.json +70 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
52
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
53
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
54
|
+
means any form of electronic, verbal, or written communication sent
|
|
55
|
+
to the Licensor or its representatives, including but not limited to
|
|
56
|
+
communication on electronic mailing lists, source code control systems,
|
|
57
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
58
|
+
Licensor for the purpose of tracking or otherwise improving the Work,
|
|
59
|
+
but excludes communication that is conspicuously marked or otherwise
|
|
60
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
61
|
+
|
|
62
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
63
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
64
|
+
subsequently incorporated within the Work.
|
|
65
|
+
|
|
66
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
67
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
68
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
69
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
70
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
71
|
+
Work and such Derivative Works in Source or Object form.
|
|
72
|
+
|
|
73
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
74
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
75
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
76
|
+
(except as stated in this section) patent license to make, have made,
|
|
77
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
78
|
+
where such license applies only to those patent claims licensable
|
|
79
|
+
by such Contributor that are necessarily infringed by their
|
|
80
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
81
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
82
|
+
institute patent litigation against any entity (including a
|
|
83
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
84
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
85
|
+
or contributory patent infringement, then any patent licenses granted
|
|
86
|
+
to You under this License for that Work shall terminate as of the date
|
|
87
|
+
such litigation is filed.
|
|
88
|
+
|
|
89
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
90
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
91
|
+
modifications, and in Source or Object form, provided that You
|
|
92
|
+
meet the following conditions:
|
|
93
|
+
|
|
94
|
+
(a) You must give any other recipients of the Work or
|
|
95
|
+
Derivative Works a copy of this License; and
|
|
96
|
+
|
|
97
|
+
(b) You must cause any modified files to carry prominent notices
|
|
98
|
+
stating that You changed the files; and
|
|
99
|
+
|
|
100
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
101
|
+
that You distribute, all copyright, patent, trademark, and
|
|
102
|
+
attribution notices from the Source form of the Work,
|
|
103
|
+
excluding those notices that do not pertain to any part of
|
|
104
|
+
the Derivative Works; and
|
|
105
|
+
|
|
106
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
107
|
+
distribution, then any Derivative Works that You distribute must
|
|
108
|
+
include a readable copy of the attribution notices contained
|
|
109
|
+
within such NOTICE file, excluding those notices that do not
|
|
110
|
+
pertain to any part of the Derivative Works, in at least one
|
|
111
|
+
of the following places: within a NOTICE text file distributed
|
|
112
|
+
as part of the Derivative Works; within the Source form or
|
|
113
|
+
documentation, if provided along with the Derivative Works; or,
|
|
114
|
+
within a display generated by the Derivative Works, if and
|
|
115
|
+
wherever such third-party notices normally appear. The contents
|
|
116
|
+
of the NOTICE file are for informational purposes only and
|
|
117
|
+
do not modify the License. You may add Your own attribution
|
|
118
|
+
notices within Derivative Works that You distribute, alongside
|
|
119
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
120
|
+
that such additional attribution notices cannot be construed
|
|
121
|
+
as modifying the License.
|
|
122
|
+
|
|
123
|
+
You may add Your own copyright statement to Your modifications and
|
|
124
|
+
may provide additional or different license terms and conditions
|
|
125
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
126
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
127
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
128
|
+
the conditions stated in this License.
|
|
129
|
+
|
|
130
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
131
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
132
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
133
|
+
this License, without any additional terms or conditions.
|
|
134
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
135
|
+
the terms of any separate license agreement you may have executed
|
|
136
|
+
with Licensor regarding such Contributions.
|
|
137
|
+
|
|
138
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
139
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
140
|
+
except as required for describing the origin of the Work and
|
|
141
|
+
reproducing the content of the NOTICE file.
|
|
142
|
+
|
|
143
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
144
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
145
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
146
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
147
|
+
implied, including, without limitation, any warranties or conditions
|
|
148
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
149
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
150
|
+
appropriateness of using or redistributing the Work and assume any
|
|
151
|
+
risks associated with Your exercise of permissions under this License.
|
|
152
|
+
|
|
153
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
154
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
155
|
+
unless required by applicable law (such as deliberate and grossly
|
|
156
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
157
|
+
liable to You for damages, including any direct, indirect, special,
|
|
158
|
+
incidental, or consequential damages of any character arising as a
|
|
159
|
+
result of this License or out of the use or inability to use the
|
|
160
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
161
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
162
|
+
other commercial damages or losses), even if such Contributor
|
|
163
|
+
has been advised of the possibility of such damages.
|
|
164
|
+
|
|
165
|
+
9. Accepting Warranty or Support. While redistributing the Work or
|
|
166
|
+
Derivative Works thereof, You may choose to offer, and charge a
|
|
167
|
+
fee for, acceptance of support, warranty, indemnity, or other
|
|
168
|
+
liability obligations and/or rights consistent with this License.
|
|
169
|
+
However, in accepting such obligations, You may act only on Your
|
|
170
|
+
own behalf and on Your sole responsibility, not on behalf of any
|
|
171
|
+
other Contributor, and only if You agree to indemnify, defend,
|
|
172
|
+
and hold each Contributor harmless for any liability incurred by,
|
|
173
|
+
or claims asserted against, such Contributor by reason of your
|
|
174
|
+
accepting any such warranty or support.
|
|
175
|
+
|
|
176
|
+
END OF TERMS AND CONDITIONS
|
|
177
|
+
|
|
178
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
179
|
+
|
|
180
|
+
To apply the Apache License to your work, attach the following
|
|
181
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
182
|
+
replaced with your own identifying information. (Don't include
|
|
183
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
184
|
+
comment syntax for the file format. We also recommend that a
|
|
185
|
+
file or class name and description of purpose be included on the
|
|
186
|
+
same "printed" page as the copyright notice for easier
|
|
187
|
+
identification within third-party archives.
|
|
188
|
+
|
|
189
|
+
Copyright 2026 xuze
|
|
190
|
+
|
|
191
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
192
|
+
you may not use this file except in compliance with the License.
|
|
193
|
+
You may obtain a copy of the License at
|
|
194
|
+
|
|
195
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
196
|
+
|
|
197
|
+
Unless required by applicable law or agreed to in writing, software
|
|
198
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
199
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
200
|
+
See the License for the specific language governing permissions and
|
|
201
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
# flow-mindmap
|
|
2
|
+
|
|
3
|
+
A modern, minimalist mind mapping tool — xmind-style, embeddable as a Vue 3 component.
|
|
4
|
+
|
|
5
|
+
- 纯 SVG 渲染,矢量缩放无损
|
|
6
|
+
- 拖拽、缩放、平移画布
|
|
7
|
+
- 键盘快捷键: `Tab` 添加子节点 / `Enter` 添加同级 / `F2` 编辑 / `Delete` 删除节点
|
|
8
|
+
- 一键折叠/展开子树
|
|
9
|
+
- 多种布局模式: mindmap(默认) / tree(右向树) / org(向下组织结构)
|
|
10
|
+
- 可调画板: 渐变锥形连线、彩虹分支、节点背景/边框/字体样式、嵌入图片、超链接、节点笔记
|
|
11
|
+
- 撤销/重做、JSON 导入导出
|
|
12
|
+
- 扁平化 SVG 线框图标,无任何 Emoji
|
|
13
|
+
- Apache-2.0 开源协议,可在 npm 安装作为组件使用
|
|
14
|
+
|
|
15
|
+
## 安装
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add flow-mindmap
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 快速开始
|
|
22
|
+
|
|
23
|
+
### 全局注册(Vue 插件)
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import { createApp } from 'vue'
|
|
27
|
+
import App from './App.vue'
|
|
28
|
+
import FlowMindmap from 'flow-mindmap'
|
|
29
|
+
import 'flow-mindmap/style.css'
|
|
30
|
+
|
|
31
|
+
const app = createApp(App)
|
|
32
|
+
app.use(FlowMindmap) // 注册为 <FlowMindMap />
|
|
33
|
+
app.mount('#app')
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```vue
|
|
37
|
+
<template>
|
|
38
|
+
<FlowMindMap :data="data" style="width: 100vw; height: 100vh" />
|
|
39
|
+
</template>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 局部导入
|
|
43
|
+
|
|
44
|
+
```vue
|
|
45
|
+
<script setup lang="ts">
|
|
46
|
+
import { MindMap } from 'flow-mindmap'
|
|
47
|
+
import 'flow-mindmap/style.css'
|
|
48
|
+
import type { MindMapNode } from 'flow-mindmap'
|
|
49
|
+
|
|
50
|
+
const data: MindMapNode = {
|
|
51
|
+
id: 'root',
|
|
52
|
+
text: '中心主题',
|
|
53
|
+
children: [
|
|
54
|
+
{ id: 'a', text: '分支 A', children: [] },
|
|
55
|
+
{ id: 'b', text: '分支 B', children: [] },
|
|
56
|
+
],
|
|
57
|
+
}
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<template>
|
|
61
|
+
<MindMap :data="data" style="width: 100vw; height: 100vh" />
|
|
62
|
+
</template>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Props
|
|
66
|
+
|
|
67
|
+
| Prop | Type | Default | 说明 |
|
|
68
|
+
| ---- | ---- | ------- | ---- |
|
|
69
|
+
| `data` | [`MindMapNode`](#数据类型) | — | **必填**。思维导图根节点。 |
|
|
70
|
+
| `readonly` | `boolean` | `false` | 只读模式:禁用增删改、拖拽、编辑输入框。 |
|
|
71
|
+
| `previewMode` | `boolean` | `false` | 预览模式:隐藏画布自带工具栏,只保留节点和折叠/调整手柄。适合做截图、嵌入展示。 |
|
|
72
|
+
| `theme` | [`MindMapTheme`](#数据类型) | — | 主题色/字号/连线粗细等外观配置,见下表。 |
|
|
73
|
+
|
|
74
|
+
### `MindMapTheme` 字段
|
|
75
|
+
|
|
76
|
+
| 字段 | 类型 | 默认 | 说明 |
|
|
77
|
+
| ---- | ---- | ---- | ---- |
|
|
78
|
+
| `rootBg` | `string` | — | 根节点背景色 |
|
|
79
|
+
| `rootText` | `string` | — | 根节点文字色 |
|
|
80
|
+
| `branchBg` | `string` | — | 普通节点背景色 |
|
|
81
|
+
| `branchText` | `string` | — | 普通节点文字色 |
|
|
82
|
+
| `lineColor` | `string` | — | 连线颜色 |
|
|
83
|
+
| `bgColor` | `string` | — | 画布背景色 |
|
|
84
|
+
| `fontSize` | `number` | — | 基础字号(px) |
|
|
85
|
+
| `lineWidthStart` | `number` | `2.2` | 父端连线粗细(px) |
|
|
86
|
+
| `lineWidthEnd` | `number` | `0.8` | 子端连线粗细(px) |
|
|
87
|
+
| `rainbowBranch` | `boolean` | `false` | 顶层分支按色板循环配色 |
|
|
88
|
+
|
|
89
|
+
## Emits
|
|
90
|
+
|
|
91
|
+
| 事件 | 载荷 | 说明 |
|
|
92
|
+
| ---- | ---- | ---- |
|
|
93
|
+
| `change` | `MindMapNode` | 数据变更(增删改、导入、拖动)后触发,载荷是**新的整棵根节点**。 |
|
|
94
|
+
| `select` | `MindMapNode \| null` | 用户点击节点时触发;`null` 表示点空白处取消选中。 |
|
|
95
|
+
| `edit-note` | `nodeId: string` | 用户点击节点笔记图标 / 右键"添加/编辑笔记"时触发,由父组件决定如何展示笔记编辑界面。 |
|
|
96
|
+
|
|
97
|
+
## Expose 方法(通过 `ref` 访问)
|
|
98
|
+
|
|
99
|
+
```vue
|
|
100
|
+
<MindMap ref="mm" :data="data" />
|
|
101
|
+
<script setup>
|
|
102
|
+
const mm = ref()
|
|
103
|
+
mm.value.addChild('a') // 给 id=a 的节点加一个子节点
|
|
104
|
+
</script>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 节点增删改
|
|
108
|
+
|
|
109
|
+
| 方法 | 说明 |
|
|
110
|
+
| ---- | ---- |
|
|
111
|
+
| `addChild(parentId)` | 给指定节点添加子节点 |
|
|
112
|
+
| `addSibling(nodeId)` | 给指定节点添加同级 |
|
|
113
|
+
| `removeNode(nodeId)` | 删除节点及其子树 |
|
|
114
|
+
| `duplicateNode(nodeId)` | 复制一个节点(包含子树)并插入到同级 |
|
|
115
|
+
| `setNodeText(nodeId, text)` | 修改节点文字 |
|
|
116
|
+
| `moveNode(srcId, targetId, position)` | 移动节点;`position` = `'before'` / `'after'`(同级)或 `'child'`(成为 target 最后一个子节点)。返回 `true` 表示成功。 |
|
|
117
|
+
|
|
118
|
+
### 节点内容扩展
|
|
119
|
+
|
|
120
|
+
| 方法 | 说明 |
|
|
121
|
+
| ---- | ---- |
|
|
122
|
+
| `applyNodeStyle(nodeId, style)` | 覆盖指定节点的样式(`{ bg, textColor, borderColor, fontWeight }`)。传空对象 `{}` 清除。 |
|
|
123
|
+
| `getNodeStyle(nodeId)` | 读取指定节点的样式覆盖,无则返回 `{}`。 |
|
|
124
|
+
| `applyNodeLink(nodeId, url)` | 设置节点的超链接,空字符串清除。 |
|
|
125
|
+
| `removeNodeLink(nodeId)` | 删除节点的链接。 |
|
|
126
|
+
| `applyNodeNote(nodeId, text)` | 设置节点的笔记,空字符串清除。 |
|
|
127
|
+
| `removeNodeNote(nodeId)` | 删除节点的笔记。 |
|
|
128
|
+
|
|
129
|
+
### 视图
|
|
130
|
+
|
|
131
|
+
| 方法 | 说明 |
|
|
132
|
+
| ---- | ---- |
|
|
133
|
+
| `getData()` | 返回当前根节点(`MindMapNode`)。 |
|
|
134
|
+
| `setData(d)` | 用新的根节点替换数据。 |
|
|
135
|
+
| `resetView()` | 重置缩放/平移,让整棵树重新居中。 |
|
|
136
|
+
| `setBalanced(v)` / `isBalanced()` / `balance()` | 强制布局平衡模式(暂停/恢复/立即执行)。`autoBalanceOnChange` 设置项决定默认是否平衡。 |
|
|
137
|
+
|
|
138
|
+
### 撤销/重做
|
|
139
|
+
|
|
140
|
+
| 方法 | 说明 |
|
|
141
|
+
| ---- | ---- |
|
|
142
|
+
| `undo()` / `redo()` | 撤销 / 重做最近一次数据变更。 |
|
|
143
|
+
| `canUndo()` / `canRedo()` | 是否可撤销 / 重做。 |
|
|
144
|
+
|
|
145
|
+
### 导入/导出
|
|
146
|
+
|
|
147
|
+
| 方法 | 说明 |
|
|
148
|
+
| ---- | ---- |
|
|
149
|
+
| `exportData()` | 返回当前数据的 JSON 字符串。 |
|
|
150
|
+
| `importData(json)` | 从 JSON 字符串恢复数据,成功返回 `true`。 |
|
|
151
|
+
|
|
152
|
+
### 设置项
|
|
153
|
+
|
|
154
|
+
通过 [`MindMapSettings`](#数据类型) 控制画板、布局、连线、分支色板等行为。
|
|
155
|
+
|
|
156
|
+
| 方法 | 说明 |
|
|
157
|
+
| ---- | ---- |
|
|
158
|
+
| `applySettings(s)` | 部分更新设置,只覆盖传入的字段。 |
|
|
159
|
+
| `getSettings()` | 读取当前生效的设置。 |
|
|
160
|
+
|
|
161
|
+
### 调色板
|
|
162
|
+
|
|
163
|
+
| 方法 | 说明 |
|
|
164
|
+
| ---- | ---- |
|
|
165
|
+
| `setBranchPalette(id)` | 切换到指定色板;`id` 可以是内置(`'default'` / `'classic'` / `'vivid'` / `'dev'` / `'mint'`)或在 `settings.customPalettes` 注册过的自定义 id。未知 id 静默 no-op。 |
|
|
166
|
+
| `getBranchPalette()` | 读取当前色板 id。 |
|
|
167
|
+
| `getBranchPalettes()` | 读取所有色板(内置 + 自定义),用于渲染选择器。 |
|
|
168
|
+
|
|
169
|
+
### 连线宽度(高级)
|
|
170
|
+
|
|
171
|
+
| 方法 | 说明 |
|
|
172
|
+
| ---- | ---- |
|
|
173
|
+
| `lineWidthForDepth(depth)` | 深度 `depth` 节点出发的连线**父端**宽度(px)。 |
|
|
174
|
+
| `endWidthForDepth(depth)` | 深度 `depth` 节点出发的连线**子端**宽度(px)。 |
|
|
175
|
+
|
|
176
|
+
## 数据类型
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
import type {
|
|
180
|
+
MindMapNode,
|
|
181
|
+
MindMapImage,
|
|
182
|
+
MindMapOptions,
|
|
183
|
+
MindMapTheme,
|
|
184
|
+
MindMapSettings,
|
|
185
|
+
MindMapExpose,
|
|
186
|
+
NodeStyle,
|
|
187
|
+
LineStyle,
|
|
188
|
+
LayoutMode,
|
|
189
|
+
BranchPalette,
|
|
190
|
+
BranchPaletteId,
|
|
191
|
+
} from 'flow-mindmap'
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### `MindMapNode`
|
|
195
|
+
|
|
196
|
+
```ts
|
|
197
|
+
interface MindMapNode {
|
|
198
|
+
id: string
|
|
199
|
+
text: string
|
|
200
|
+
children: MindMapNode[]
|
|
201
|
+
collapsed?: boolean // 初始折叠状态
|
|
202
|
+
image?: MindMapImage // 节点上方嵌入的图片
|
|
203
|
+
link?: { url: string }// 节点超链接(图标点击跳转)
|
|
204
|
+
note?: { text: string }// 节点笔记(图标悬浮预览、点击展开编辑)
|
|
205
|
+
_x?: number // 内部:拖拽后的位置覆盖(库内部使用,勿读勿写)
|
|
206
|
+
_y?: number
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### `MindMapImage`
|
|
211
|
+
|
|
212
|
+
```ts
|
|
213
|
+
interface MindMapImage {
|
|
214
|
+
src: string // 远程 URL 或 data URL
|
|
215
|
+
naturalW: number // 源图原始宽(用于锁定长宽比)
|
|
216
|
+
naturalH: number // 源图原始高
|
|
217
|
+
width: number // 当前渲染宽(用户可拖拽调整,24~400 px)
|
|
218
|
+
height: number // 当前渲染高
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
### `NodeStyle`
|
|
223
|
+
|
|
224
|
+
```ts
|
|
225
|
+
interface NodeStyle {
|
|
226
|
+
bg?: string // 背景色
|
|
227
|
+
textColor?: string // 文字色
|
|
228
|
+
borderColor?: string // 边框色
|
|
229
|
+
fontWeight?: 400 | 600 // 字重
|
|
230
|
+
}
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### `MindMapSettings`
|
|
234
|
+
|
|
235
|
+
```ts
|
|
236
|
+
interface MindMapSettings {
|
|
237
|
+
autoBalanceOnChange: boolean // 增删/拖拽后自动回到平衡布局
|
|
238
|
+
lineWidthStart: number // 父端连线粗细
|
|
239
|
+
lineWidthEnd: number // 子端连线粗细
|
|
240
|
+
rainbowBranch: boolean // 顶层分支按色板循环配色
|
|
241
|
+
branchPaletteId: string // 当前色板 id
|
|
242
|
+
customPalettes: BranchPalette[]// 用户自定义色板
|
|
243
|
+
lineStyle: 'curve' | 'straight'// 连线形状:曲线(xmind 默认) / 直线
|
|
244
|
+
layoutMode: 'mindmap' | 'tree' | 'org' // 布局模式
|
|
245
|
+
taperedEdge: boolean // 锥形连线(每条独立锥化)
|
|
246
|
+
showOrderBadge: boolean // 节点上显示兄弟序号角标(调试用)
|
|
247
|
+
}
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### `BranchPalette`
|
|
251
|
+
|
|
252
|
+
```ts
|
|
253
|
+
interface BranchPalette {
|
|
254
|
+
id: string // 唯一 id
|
|
255
|
+
name: string // 在选择器里显示的名字
|
|
256
|
+
colors: string[]// 十六进制色值,按顺序循环
|
|
257
|
+
}
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
## 工具函数
|
|
261
|
+
|
|
262
|
+
```ts
|
|
263
|
+
import {
|
|
264
|
+
uid, // 生成不重复 id
|
|
265
|
+
clone, // 深克隆节点
|
|
266
|
+
findNode, // (root, id) => 节点
|
|
267
|
+
findParent, // (root, id) => 父节点
|
|
268
|
+
removeNode, // (root, id) => 移除子树
|
|
269
|
+
addChild, // (parent, text) => 新子节点
|
|
270
|
+
addSibling, // (node, text) => 新同级节点
|
|
271
|
+
} from 'flow-mindmap'
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
## 全局组件
|
|
275
|
+
|
|
276
|
+
`app.use(FlowMindmap)` 会把组件注册为 `<FlowMindMap />`(驼峰式),所有 prop / event 与 `<MindMap>` 一致。
|
|
277
|
+
|
|
278
|
+
## 本地开发
|
|
279
|
+
|
|
280
|
+
```bash
|
|
281
|
+
pnpm install
|
|
282
|
+
pnpm dev # http://localhost:7851 — 应用 demo
|
|
283
|
+
pnpm build # 打包为 npm 库
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
## 协议
|
|
287
|
+
|
|
288
|
+
[Apache-2.0](./LICENSE) © xuze
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { MindMapNode } from '../types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
data: MindMapNode;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
6
|
+
import: (data: MindMapNode) => any;
|
|
7
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
8
|
+
onImport?: ((data: MindMapNode) => any) | undefined;
|
|
9
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** 'left' slides in from the left edge, 'right' from the right. */
|
|
3
|
+
side?: 'left' | 'right';
|
|
4
|
+
/** Pixels wide. */
|
|
5
|
+
width?: number;
|
|
6
|
+
/** Show or hide the panel. Animation handles the transition. */
|
|
7
|
+
open?: boolean;
|
|
8
|
+
/** Optional title shown in the header. */
|
|
9
|
+
title?: string;
|
|
10
|
+
};
|
|
11
|
+
declare var __VLS_5: {}, __VLS_7: {};
|
|
12
|
+
type __VLS_Slots = {} & {
|
|
13
|
+
header?: (props: typeof __VLS_5) => any;
|
|
14
|
+
} & {
|
|
15
|
+
default?: (props: typeof __VLS_7) => any;
|
|
16
|
+
};
|
|
17
|
+
declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
18
|
+
"update:open": (value: boolean) => any;
|
|
19
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
20
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
21
|
+
}>, {
|
|
22
|
+
title: string;
|
|
23
|
+
width: number;
|
|
24
|
+
side: "left" | "right";
|
|
25
|
+
open: boolean;
|
|
26
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
name: string;
|
|
3
|
+
size?: number | string;
|
|
4
|
+
stroke?: number | string;
|
|
5
|
+
};
|
|
6
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { MindMapNode } from '../types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
/** Current data tree. Used to populate the editor on first mount
|
|
4
|
+
* (as markdown) and as the source of the "export .md" action. */
|
|
5
|
+
data: MindMapNode;
|
|
6
|
+
};
|
|
7
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
8
|
+
import: (data: MindMapNode) => any;
|
|
9
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
10
|
+
onImport?: ((data: MindMapNode) => any) | undefined;
|
|
11
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { MindMapNode, MindMapTheme, MindMapSettings, NodeStyle } from '../types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
data: MindMapNode;
|
|
4
|
+
readonly?: boolean;
|
|
5
|
+
theme?: MindMapTheme;
|
|
6
|
+
/**
|
|
7
|
+
* When true, hides the MindMap's own toolbar and any UI that
|
|
8
|
+
* isn't strictly the canvas (resize handles, collapse
|
|
9
|
+
* buttons still appear on hover so the user can still
|
|
10
|
+
* interact). The app-level top toolbar / drawers are
|
|
11
|
+
* controlled by the parent (App.vue) — this only toggles
|
|
12
|
+
* the canvas's own chrome.
|
|
13
|
+
*/
|
|
14
|
+
previewMode?: boolean;
|
|
15
|
+
};
|
|
16
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {
|
|
17
|
+
addChild: (parentId: string) => void;
|
|
18
|
+
addSibling: (nodeId: string) => void;
|
|
19
|
+
removeNode: (nodeId: string) => void;
|
|
20
|
+
duplicateNode: (nodeId: string) => void;
|
|
21
|
+
setNodeText: (nodeId: string, text: string) => void;
|
|
22
|
+
moveNode: (srcId: string, targetId: string, position: "before" | "after" | "child") => boolean;
|
|
23
|
+
getData: () => MindMapNode;
|
|
24
|
+
setData: (data: MindMapNode) => void;
|
|
25
|
+
resetView: () => void;
|
|
26
|
+
exportData: () => string;
|
|
27
|
+
importData: (json: string) => boolean;
|
|
28
|
+
setBalanced: (value: boolean) => void;
|
|
29
|
+
isBalanced: () => boolean;
|
|
30
|
+
balance: () => void;
|
|
31
|
+
applyNodeStyle: (nodeId: string, style: NodeStyle) => void;
|
|
32
|
+
getNodeStyle: (nodeId: string) => NodeStyle;
|
|
33
|
+
applyNodeLink: (nodeId: string, url: string) => void;
|
|
34
|
+
removeNodeLink: (nodeId: string) => void;
|
|
35
|
+
applyNodeNote: (nodeId: string, text: string) => void;
|
|
36
|
+
removeNodeNote: (nodeId: string) => void;
|
|
37
|
+
undo: () => void;
|
|
38
|
+
redo: () => void;
|
|
39
|
+
canUndo: () => boolean;
|
|
40
|
+
canRedo: () => boolean;
|
|
41
|
+
applySettings: (s: Partial<MindMapSettings>) => void;
|
|
42
|
+
getSettings: () => MindMapSettings;
|
|
43
|
+
setBranchPalette: (id: import("../types").BranchPaletteId) => void;
|
|
44
|
+
getBranchPalette: () => import("../types").BranchPaletteId;
|
|
45
|
+
getBranchPalettes: () => import("../types").BranchPalette[];
|
|
46
|
+
lineWidthForDepth: (depth: number) => number;
|
|
47
|
+
endWidthForDepth: (depth: number) => number;
|
|
48
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
49
|
+
select: (node: MindMapNode | null) => any;
|
|
50
|
+
change: (data: MindMapNode) => any;
|
|
51
|
+
"edit-note": (nodeId: string) => any;
|
|
52
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
53
|
+
onSelect?: ((node: MindMapNode | null) => any) | undefined;
|
|
54
|
+
onChange?: ((data: MindMapNode) => any) | undefined;
|
|
55
|
+
"onEdit-note"?: ((nodeId: string) => any) | undefined;
|
|
56
|
+
}>, {
|
|
57
|
+
readonly: boolean;
|
|
58
|
+
previewMode: boolean;
|
|
59
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
60
|
+
export default _default;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** Cursor X in viewport coords (clientX). */
|
|
3
|
+
x: number;
|
|
4
|
+
/** Cursor Y in viewport coords (clientY). */
|
|
5
|
+
y: number;
|
|
6
|
+
/** Container the menu should not escape — used to clamp the
|
|
7
|
+
* position so the menu stays on-screen. */
|
|
8
|
+
container: HTMLElement | null;
|
|
9
|
+
/** Whether the node already has an image. When true, the
|
|
10
|
+
* "添加图片" action is renamed "替换图片" and a "移除图片"
|
|
11
|
+
* action is appended. */
|
|
12
|
+
hasImage?: boolean;
|
|
13
|
+
/** Whether the node already has a link. Drives the label /
|
|
14
|
+
* presence of the "添加链接" / "编辑链接" / "移除链接"
|
|
15
|
+
* actions. */
|
|
16
|
+
hasLink?: boolean;
|
|
17
|
+
/** Whether the node already has a note. Same role as
|
|
18
|
+
* hasLink for the note action. */
|
|
19
|
+
hasNote?: boolean;
|
|
20
|
+
/** True if the component is in readonly mode — all actions
|
|
21
|
+
* render but are disabled. */
|
|
22
|
+
readonly?: boolean;
|
|
23
|
+
};
|
|
24
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
25
|
+
close: () => any;
|
|
26
|
+
pickImage: () => any;
|
|
27
|
+
setLink: () => any;
|
|
28
|
+
removeLink: () => any;
|
|
29
|
+
editNote: () => any;
|
|
30
|
+
removeNote: () => any;
|
|
31
|
+
removeImage: () => any;
|
|
32
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
33
|
+
onClose?: (() => any) | undefined;
|
|
34
|
+
onPickImage?: (() => any) | undefined;
|
|
35
|
+
onSetLink?: (() => any) | undefined;
|
|
36
|
+
onRemoveLink?: (() => any) | undefined;
|
|
37
|
+
onEditNote?: (() => any) | undefined;
|
|
38
|
+
onRemoveNote?: (() => any) | undefined;
|
|
39
|
+
onRemoveImage?: (() => any) | undefined;
|
|
40
|
+
}>, {
|
|
41
|
+
hasImage: boolean;
|
|
42
|
+
hasLink: boolean;
|
|
43
|
+
hasNote: boolean;
|
|
44
|
+
readonly: boolean;
|
|
45
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
46
|
+
export default _default;
|