ohos_mind_elixir
简介
ohos_mind_elixir 是一个开源的思维导图框架，针对思维导图的优势，拥有以下特性：
- 节点关联
- 节点拖拽功能
- 支持节点右键菜单
- 支持实用快捷键操作
- 撤销与重做
- 支持自定义修改节点样式和连接线样式
- 支持功能动态化配置
下载安装
ohpm install @ohos/mind-elixir
OpenHarmony ohpm环境配置等更多内容，请参考如何安装OpenHarmony ohpm。
使用说明
MindElixir引用及使用
import { MindElixir, MindElixirData, MindElixirCore, NodeOption, LayoutDirection } from '@ohos/mind-elixir';
import mindElixirData from '../model/MindElixirData';
@Entry
@Component
struct Index {
// 基础配置
private mindOption: NodeOption = {
locale: 'zh', // 语言设置
draggable: true, // 可拖拽修改节点开关
editable: true, // 双击修改节点信息开关
toolBar: true, // 工具栏开关
allowUndo: true, // 记录操作历史开关
contextMenu: true, // 上下文菜单开关
layout: LayoutDirection.RIGHT, // 思维导图朝向
collapsible: true, // 节点可展开开关
siblingAlignment: true, // 兄弟节点对齐开关
nodeShape: 'line', // 思维导图样式 line直线、curve曲线
mindInViewport: true, // 思维导图显示在可视区域内
nodeSpacing: {
horizontal: 30, // 节点水平间隔
vertical: 50 // 节点垂直间隔
},
nodeStyle: { // 节点统一样式设置
fontSize: 20, // 节点字体大小
fontFamily: 'HarmonyOS Sans', // 节点字体样式
color: '#333', // 节点字体颜色
background: '#fff', // 节点背景颜色
fontWeight: 'normal', // 节点字体是否加粗
border: { // 节点边框样式设置
width: 1, // 节点边框宽度
radius: 0, // 节点边框圆角大小
color: '#000', // 节点边框颜色
},
maxWidth: 200, // 设置节点最大宽度
padding: 5 // 设置节点边距
},
lineStyle: { // 连接线样式设置
width: 2, // 连接线宽度
color: '#e64553' // 连接线颜色
}
};
@State model: MindElixirCore = new MindElixirCore(this.mindOption);
private initializedData: MindElixirData = mindElixirData;
// 页面展示
build() {
RelativeContainer() {
MindElixir({ model: this.model, data: this.initializedData })
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
}
}
核心功能示例
// 添加子节点
this.model.add('parent-node-id', '新节点名称');
// 添加父节点
this.model.addParent('current-node-id', '新父节点名称');
// 添加兄弟节点
this.model.addSibling('sibling-node-id', true); // true表示在前面添加，false表示在后面添加
// 删除节点
this.model.remove('node-id-to-delete');
// 移动节点位置
this.model.move('node-id', MoveDirection.UP); // 向上移动
// 更新节点属性
const updatedNode = {
id: 'node-id',
topic: '更新后的节点名称',
style: {
color: '#ff0000',
background: '#f0f0f0'
}
};
this.model.updateNode(updatedNode);
// 设置思维导图布局方向
this.model.setMindDirection(LayoutDirection.LEFT); // 设置为左侧布局
// 缩放控制
this.model.zoomIn(); // 放大
this.model.zoomOut(); // 缩小
this.model.setScaleVal(1.0); // 设置缩放比例
// 撤销重做
this.model.undo(); // 撤销
this.model.redo(); // 重做
// 节点选择
this.model.selectNode('node-id'); // 选择节点
this.model.getSelectedNode(); // 获取选中节点
// 展开折叠节点
this.model.expandedNode('node-id'); // 展开节点及其子节点
this.model.foldNode('node-id'); // 折叠节点及其子节点
// 重置位置
this.model.resetPosition(); // 重置思维导图到中心位置
接口说明
MindElixirCore 接口
| 接口名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| refresh | mindElixirData?: MindElixirData | void | 刷新思维导图数据 |
| getData | 无 | MindElixirData | null | 获取节点数据 |
| add | id: string, topic?: string | boolean | 添加子节点 |
| addParent | id: string, topic?: string | boolean | 添加父节点 |
| addSibling | id: string, isBefore?: boolean | boolean | 添加兄弟节点 |
| remove | id: string | boolean | 删除节点 |
| move | id: string, direction: MoveDirection | boolean | 同级节点上下移动 |
| updateNode | updatedNode: NodeObj | boolean | 更新节点 |
| setMindDirection | direction: LayoutDirection | LayoutDirection | 设置思维导图布局方向 |
| getMindDirection | 无 | LayoutDirection | 获取思维导图布局方向 |
| setScaleVal | value: number | void | 设置缩放比例 |
| getScaleVal | 无 | number | 获取缩放比例 |
| zoomIn | 无 | void | 放大思维导图 |
| zoomOut | 无 | void | 缩小思维导图 |
| undo | 无 | boolean | 撤销到上一个状态 |
| redo | 无 | boolean | 重做被撤销的操作 |
| getSelectedNodeId | 无 | string | 获取选中节点ID |
| getSelectedNode | 无 | NodeObj | null | 获取选中节点数据 |
| selectNode | id: string | boolean | 设置选中节点 |
| expandedNode | id: string | void | 展开节点及其子节点 |
| foldNode | id: string | void | 折叠节点及其子节点 |
| resetPosition | 无 | void | 重置思维导图位置 |
| startLink | nodeId: string, isLink: boolean, bidirectional?: boolean | void | 开始创建节点链接 |
| renderLink | endNodeId: string | void | 渲染节点间的链接 |
| updateLinkLabel | arrowId: string, newLabel: string | void | 更改链接标签 |
| destroy | 无 | void | 销毁实例，清理资源 |
枚举类型
enum LayoutDirection {
LEFT = 0, // 左侧布局
RIGHT = 1 // 右侧布局
TOP = 2, // 上方布局
BOTTOM = 3, // 下方布局
}
enum MoveDirection {
UP, // 向上移动
DOWN // 向下移动
}
enum DragOrientation {
TOP, // 拖拽到目标节点上方
MIDDLE, // 拖拽到目标节点中间（作为子节点）
BOTTOM // 拖拽到目标节点下方
}
NodeOption配置选项
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| locale | string | 'zh' | 语言设置 |
| draggable | boolean | false | 节点拖拽开关 |
| editable | boolean | false | 节点编辑开关 |
| toolBar | boolean | false | 工具栏开关 |
| allowUndo | boolean | false | 撤销重做开关 |
| contextMenu | boolean | false | 上下文菜单开关 |
| layout | LayoutDirection | LayoutDirection.RIGHT | 思维导图布局方向 |
| siblingAlignment | boolean | false | 兄弟节点对齐开关 |
| nodeShape | string | 'line' | 节点形状（line/curve） |
| mindInViewport | boolean | false | 思维导图显示在可视区域内 |
| collapsible | boolean | false | 思维导图节点是否可展开 |
| nodeSpacing | Object | { horizontal: 50, vertical: 30 } | 节点间距配置 |
| nodeStyle | Object | 详见下文 | 节点样式配置 |
| lineStyle | Object | { width: 2, color: '#e64553' } | 连接线样式配置 |
NodeStyle节点样式配置
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fontSize | number | 20 | 字体大小 |
| fontFamily | string | 'HarmonyOS Sans' | 字体 |
| color | string | '#333' | 字体颜色 |
| background | string | '#fff' | 背景颜色 |
| fontWeight | string | 'normal' | 字体粗细 |
| border | BorderOptions | { width: 2 } | 边框样式 |
| maxWidth | number | 200 | 最大宽度 |
| padding | number | 10 | 内边距 |
NodeObj 节点对象结构
interface NodeObj {
id: string; // 节点ID
topic: string; // 节点主题
children?: NodeObj[]; // 子节点数组
expanded?: boolean; // 是否展开
style?: NodeStyle; // 节点样式
tags?: string[]; // 标签
direction?: LayoutDirection; // 节点方向
// 布局计算相关属性计算得来...
x?: number; // X坐标
y?: number; // Y坐标
level?: number; // 层级
width?: number; // 宽度
height?: number; // 高度
subtreeWidth?: number; // 子树宽度
subtreeHeight?: number; // 子树高度
richText?: RichTextSpan[]; // 富文本
}
Arrow 箭头/链接结构
interface Arrow {
id: string; // 箭头ID
from: string; // 起始节点ID
to: string; // 目标节点ID
label?: string; // 链接标签
bidirectional?: boolean; // 是否双向链接
}
快捷键
| 快捷键 | 功能 |
|---|---|
| Ctrl + Z | 撤销 |
| Ctrl + Y | 重做 |
| Alt + Enter | 插入兄弟节点 |
| Shift + Enter | 向前插入兄弟节点 |
| Tab | 插入子节点 |
| Ctrl + Enter | 插入父节点 |
| Delete / Backspace | 删除节点 |
| Ctrl + C | 复制 |
| Ctrl + V | 粘贴 |
| Ctrl + X | 剪切 |
| Ctrl + "+" | 放大思维导图 |
| Ctrl + "-" | 缩小思维导图 |
| Ctrl + 0 | 重置思维导图 |
约束与限制
在下述版本验证通过： DevEco Studio 5.1.0 Release(5.1.0.849), SDK: API17(5.0.5)。
目录结构
|---- MindElixir
| |---- entry # 示例代码文件夹
| |---- library # MindElixir 库文件夹
| |---- src
| |---- main
| |---- ets
| |---- controller # 控制器层
| |---- MindElixirCore.ets # 核心接口类
| |---- MindLineRender.ets # 线条渲染器
| |---- NodeHelper.ets # 节点助手
| |---- model # 数据模型
| |---- NodeObj.ets # 节点对象定义
| |---- utils # 工具类
| |---- CanvasPositionUtils.ets # 画布位置工具
| |---- ZoomUtils.ets # 缩放工具
| |---- ShortcutManager.ets # 快捷键管理
| |---- UtilsManager.ets # 工具管理器
| |---- view # 视图层
| |---- components # 组件
| |---- README_zh.md # 中文文档
| |---- README.md # 英文文档
贡献代码
使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR 。
开源协议
本项目基于 Apache License 2.0 ，请自由地享受和参与开源。