精美好用的思维导图插件，无缝对接各种前端框架，快来围观吧
2024-06-01 20:27:14
思维导图(ant-mind)
ant-mind是一款基于html5的svg进行设计与开发的一个包含文档模式与思维导图模式的一个纯js类库，支持在当前主流的前端框架中接入。
效果图：
如何使用
1、下载插件
官网地址：https://www.aim.link/h5/KA.html
2、导入项目
将下载到的sdk拷贝至项目工程目录，如拷贝至：
externalSdk/ant-mind/index.js
externalSdk/ant-mind/index.css
3、开发实践
3.1 原生js嵌入
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">html, body {width: 100%;height: 100%;margin: 0;padding: 0;}#ant-mind {width: 100%;height: 100%;}</style><link rel="stylesheet" type="text/css" href="/externalSdk/ant-mind/index.css"/><script type="text/javascript" src="/externalSdk/ant-mind/index.js" defer></script></head><body><div id="ant-mind"></div></body>
</html>
const config = { mode: 'mind' };
const mIns = new AntMind('#ant-mind', config);const mProps = {onAtSearch: (val) => {const userList = [{ id: '1', name: '张三', photo: '' },{ id: '2', name: '李四', photo: '' }];return Promise.resolve(userList);}
};
mIns.render([{id: '1',name: '主要主题',type: 'p', // 根节点
}], mProps);3.2 React嵌入
import './externalSdk/ant-mind/index.css';
import React from 'react';
import AntMind from './externalSdk/ant-mind';const MindView = () => {const mindRef = React.useRef(null);React.useLayoutEffect(() => {mindRef.current = new AntMind('#ant-mind', { mode: 'mind' });}, []);React.useEffect(() => {const mIns = mindRef.current;const mProps = {onAtSearch: (val) => getUserList(val),};mIns.render([{id: '1',name: '主要主题',type: 'p', // 根节点}], mProps);return () => {mIns?.destroy();};}, []);const getUserList = (searchValue) => {const userList = [{ id: '1', name: '张三', photo: '' },{ id: '2', name: '李四', photo: '' }];return Promise.resolve(userList);};return <div id="ant-mind"></div>
};export default MindView;
3.3 Vue2嵌入
<template><div id="ant-mind" class="m-mind"></div>
</template>
<style scoped>.m-mind {width: 100%;height: 100%;}
</style>
<script>import AntMind from '@/externalSdk/ant-mind';import '@/externalSdk/ant-mind/index.css';export default {data() {return {config: {mode: 'mind'}}},mounted() {this.init()},beforeDestroy() {this.mIns?.destroy();},methods: {init() {this.mIns = new AntMind('#ant-mind', this.config);this.getData().then(data => {this.mIns.render(data, {onAtSearch: (val) => this.getUserList(val)});});},getData() {return Promise.resolve([{id: 'task.1',editable: true,wbs: '2',milestone:"1",name: '任务01',fzr: 'x先生',type: 't',status: 2,beginTime: "2021-06-02",children: []},]);},getUserList(searchValue) {const userList = [{ id: '1', name: '张三', photo: '' },{ id: '2', name: '李四', photo: '' }];return Promise.resolve(userList);},}}
</script>数据格式（dataItem）
1、基础类型
type为p、i、t时，通用的节点字段
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 节点id - 必填 | string | 必填项 |
| name | 节点名称 | string | 必填项 |
| type | 节点类型 | p - 根节点、i - 二级根节点、t - 标准节点 | 必填项 |
| childCount | 一级子节点数量 | number | - |
| children | 子节点列表 | dataItem[] | - |
| excludes | 需过滤的不可操作项 | NodeOprKey[] | [] |
| parentId | 父节点id | string | - |
NodeOprKey：‘child’ | ‘sibling’ | ‘detail’ | ‘delete’ | ‘enter’ | ‘user’ | ‘move’ | ‘copy’ | ‘edit’;
2、根节点（type === p）
特殊性：
- 不可收起
- 固定不可操作项: [‘sibling’, ‘delete’, ‘enter’, ‘user’, ‘move’]
- 编辑时，不可@人员，不可快捷输入日期
3、二级根节点（type === i）
特殊性：
- 固定不可操作项: [ ‘user’]
- move时，只能移动到p类型节点下
- 编辑时，不可@人员，不可快捷输入日期
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isNew | 是否是新增节点 | boolean | true |
4、标准节点（type === t）
特殊性：
- move时，不可移动到p节点下，支持移动到i、t类型的节点下移动
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| status | 节点状态 | string | - |
| milestone | 是否里程碑 | boolean | false |
| user | 人员 | object<{id, name}> | - |
| time | 日期 | YYYY/MM/DD HH:mm | - |
| timeStatus | 日期状态，当值为0时，当前日期临近截止日期时，日期显示橙色，超过截止日期时，日期显示红色；为当值为1时，日期颜色不随当前日期变化，显示灰色； | number | 0 |
| isNew | 是否是新增节点 | boolean | true |
配置相关
1、基础配置 - config
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 视图类型，mind - 思维导图，outline - 大纲视图 | string | mind |
| locale | 显示语言 - zh-CN、en-US、zh-TW | string | zh-CN |
| locales | 自定义语言包 | LocalesType | 详细配置 |
| eventDom | 键盘事件触发容器，容器内的键盘事件可监听 | HTMLElement|string | - |
| fullDom | 全屏容器，全屏时的元素 | HTMLElement|string | - |
| platform | 第三方平台，用于在企业微信下显示人名 | wx|dingtalk | - |
| status | 节点状态 | StatusAttributes[] | 详细配置 |
| pngSize | 导出图片的最大尺寸，建议设置为20M以内 | number | - |
| theme | 主题属性 | ThemeAttributes | 详细配置 |
| wrapper | 画布属性 | WrapperAttributes | 详细配置 |
| operation | 操作栏 | OperationAttributes | 详细配置 |
2、状态属性配置 - Status
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 状态的唯一值，必填项 | string | - |
| name | 状态名称 | string | - |
| color | 状态颜色，用于显示节点的图标颜色，必填项 | string | - |
3、主题属性配置 - Theme
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| backgroundColor | 背景色 | string | #F7F7F7 |
| color | 主题颜色，思维导图模式下，节点与子节点间收起展开的节点颜色 | string | #4983FF |
| maxWidth | 节点最大宽度 | number | 500 |
| line | 连线配置 | LineType | - |
| +color | 线条颜色 | string | #4983FF |
| +width | 线条宽度 | [number, number] | [2, 1] |
| +radius | 线条转角弧度 | number | 4 |
| p | 根节点主题 | PNode | - |
| +maxLength | 最大长度 | number | 100 |
| i | 二级根节点主题 | INode | - |
| +maxLength | 最大长度 | number | 30 |
| t | 子节点主题 | TNode | - |
| +maxLength | 最大长度 | number | 100 |
| +defaultTime | 默认结束时间 | HH:mm | 18:00 |
| nodes | 节点样式 | NodeStyle[] | 详细配置 |
- 节点样式
// 一个长度为3的数组，[p, i, t]分别代表3种不同节点的绘制样式
[// 根节点{// 节点间距space: {x: 60,y: 16},// 节点样式style: {wrap: true,color: '#333333',placeholderColor: '#CCCCCC',fontSize: 18,fontFamily: 'PingFang SC, Microsoft YaHei',fontWeight: 500,borderRadius: 6,borderWidth: 2,borderColor: '#CCCCCC',borderFocusColor: '#4983FF',borderHoverColor: '#92B5FF',backgroundColor: '#FFFFFF',}},// 二级根节点{space: {x: 40,y: 16},style: {wrap: true,color: '#333333',placeholderColor: '#CCCCCC',fontSize: 14,fontFamily: 'PingFang SC, Microsoft YaHei',fontWeight: 400,borderRadius: 4,borderWidth: 1,borderColor: '#CCCCCC',borderFocusColor: '#2867EC',borderHoverColor: '#92B5FF',backgroundColor: '#FFFFFF',}},// 子节点样式{// 节点文本偏移量，x,y为无icon情况的偏移量transform: {x: 8,y: 8,icon: {size: 20,margin: 4}},space: {x: 40,y: 8},style: {wrap: true,color: '#333333',placeholderColor: '#CCCCCC',fontSize: 14,fontFamily: 'PingFang SC, Microsoft YaHei',fontWeight: 400,borderRadius: 2,borderWidth: 1,borderColor: 'transparent',borderFocusColor: '#2867EC',borderHoverColor: '#92B5FF',backgroundColor: 'transparent',}}
]
4、画布属性配置 - Wrapper
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scale | 画布缩放配置 | ScaleType | - |
| +min | 缩放的最小值 | number | 25 |
| +max | 缩放的最大值 | number | 200 |
| +size | 画布缩放值 | number | 100 |
| +step | 每次缩放的跨度 | number | 10 |
| +map | 画布缩放的可选项 | number[] | [25, 50, 75, 100, 125, 150, 175, 200] |
5、操作栏配置 - Operation
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| header | 顶部操作栏 | HeaderType | - |
| +show | 是否显示 | boolean | true |
| +excludes | 不显示的操作项 | HeaderAction[] | [] |
| node | 节点操作栏 | NodeType | - |
| +show | 是否显示 | boolean | true |
| batch | 批量操作栏 | BatchType | - |
| +show | 是否显示 | boolean | true |
| +excludes | 不显示的操作项 | BatchAction | [] |
| footer | 底部操作栏 | FooterType | - |
| +show | 是否显示 | boolean | true |
| +excludes | 不显示的操作项 | FooterAction | [] |
HeaderAction
mind - 脑图|outline - 大纲 |search - 搜索 |export - 导出 |shortcut - 快捷键
BatchAction
delete - 删除 | user - 人员
FooterAction
expand - 展开 | thumbnail - 缩略图 | center - 中心定位 | fullscreen - 全屏 | scale - 缩放
6、自定义语言 - Locales
{'shortcut': '快捷键','opr': '操作','opr.mind': '脑图模式','opr.outline': '文档模式','opr.undo': '撤回','opr.redo': '重做','opr.search': '查找','opr.export': '导出','opr.shortcut': '快捷键','opr.expand': '一键展开','opr.thumbnail': '导航器','opr.center': '定位到中心主题','opr.fullscreen': '全屏','opr.scale': '缩放比例','opr.reduce': '缩小','opr.enlarge': '放大','opr.user': '添加负责人','node': '节点','node.sibling': '插入同级节点','node.child': '插入子节点','node.delete': '删除节点','node.navigation': '任务导航','node.expand': '节点展开','node.fold': '节点折叠','node.edit': '编辑','node.cut': '剪切','node.copy': '复制','node.paste': '粘贴','canvas': '画布','canvas.reduce': '画布缩小','canvas.enlarge': '画布放大','expand.label': '展开至${num}级节点','search.placeholder': '搜索关键词','search.empty': '无搜索结果','empty.title': '无标题','p.placeholder': '项目名称','i.placeholder': '清单名称','t.placeholder': '任务名称@负责人#计划截止时间','t.detail': '任务详情','t.delete': '删除任务','i.detail': '清单详情','i.delete': '删除清单','p.detail': '项目详情','p.delete': '删除项目','p.create': '新建清单','i.create': '新建任务','t.create': '新建子任务','i.default': '默认清单','t.default': '默认任务',
}
7、参数配置 - props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| maxChildCount | 最大子节点数，超过该数则不支持默认展开 | number | Infinity |
| foldKeys | 折叠的节点 | id[] | [] |
| limit | 每类节点的最小数量，小于或等于该数量不可删除 | LimitType | - |
| level | 数据层级，超过该层级后不可添加子节点 | number | Infinity |
| onAtSearch | 输入@时的，回调函数，用于搜索人员 | val => Promise<{id, name}[]> | - |
| onCopyData | 复制粘贴时触发, dataArr为复制后的节点列表，dataMap为复制后节点的<key, value>对象。 | ({ ids, pid }) => Promise<{dataArr, dataMap?}> | - |
| onDelete | 在删除节点时触发 | (dataItem[]) => Promise.resolve(reject) | - |
| onDetail | 在查看详情时触发 | (dataItem) => void | - |
| onEnter | 在切换根节点时触发 | (id) => void | - |
| onError | 复制移动过程中，在当前节点不能插入子节点时触发 | (type: ‘move’ | ‘copy’) => void | - |
| onExport | 在导出图片时触发，fn接收opts参数({ name, bgColor, maxSize })，并返回一个Promise，用以标记导出成功或失败的状态 | (fn) => void; | - |
| onItemChange | 在节点发生变化时触发 | (params, data) => Promise | - |
| onLoadData | 当节点的子节点数(childCount)大于0，但不存在children时，点击展开时触发 | (data) => Promise<{ dataArr, dataMap}> | - |
| onModeChange | 在切换视图模式时触发，可用于控制视图显示权限 | (mode: ‘mind’ |‘outline’) => Promise | - |
| onMoveData | 在移动节点时触发 | ({ ids, pid }) => Promise.resolve(reject) | - |
| onMultipleUser | 在批量操作中，需要修改节点的@人员时，可通过此方法来调用外部组件修改 | (ids) => void | - |
7.1 最小数量控制 - LimitType
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| i | 描述根节点下子节点的最小数量 | number | - |
| t | 描述除根节点外其他节点下子节点的最小数量 | number | - |
api相关
// 组件实例化
const config = { mode: 'mind' };
const mIns = new AntMind('#app', config);
initProps（参数初始化）
const props = {limit: { 'i': 1 },// 该参数设置，需要render后才能生效foldKeys: [],// 其他参数
};
mIns.initProps(props);
setConfig （配置设置）
// 浅更新
mIns.setConfig({ mode: 'outline' });
// 更新配置后，如果需要更新视图，则需要调用renderView方法
mIns.renderView();
render（渲染视图）
const props = {limit: { 'i': 1 },foldKeys: [],// 其他回调方法
};
const data = [];mIns.render(data, props);
handleUpdate（更新节点）
// id => 更新节点的id
// type => 更新方式：delete、move、update
// data => 最新的节点数据，在type === 'delete'时，可不传
mindIns.handleUpdate(id, type, data);
updateMatrix（位置更新）
// 在思维导图模式下，用于更新视图的偏移位置
mIns.updateMatrix({a: 1, // x轴缩放b: 0, // 倾斜角度c: 0, // 旋转角度d: 1, // y轴缩放e: 0, // x轴偏移量f: 0 // y轴偏移量
});
destroy（事件注销）
// 在组件卸载时调用，用于注销组件涉及的浏览器事件
mIns.destroy();
精美好用的思维导图插件，无缝对接各种前端框架，快来围观吧相关推荐
- 谷歌浏览器插件推荐：思维导图插件
谷歌浏览器上有很多有用的插件,诸如清理广告的Adblock Plus,美化你开始页面的momentum,对付英语文本的google翻译,方便网页浏览代码的sourcegraph,以及下载神器油猴等等, ...
- 这几款免费的思维导图软件你或许没用过，快来试试吧
如今,思维导图的运用越来越普遍了,它的制作已不仅限于个人学习的使用,还融入到了办公生活和岗位技能要求中,许多公司在工作中会要求员工上交对于某个产品等制作.推广的方案,这个方案需要加以思维导图作为辅助资 ...
- 大学高数常微分方程思维导图_高等数学各章节知识点框架 常微分方程.pdf
[微信公众号:给力考研资料]免费分享 常微分⽅程 1.概念,2.⼀阶微分⽅程求解 3.⾼阶微分⽅程求解 4.应⽤题 1.概念(7个概念,了解即可) 微分⽅程-含有未知函数的导数或者微分的⽅程 常微分⽅ ...
- jAVA EE NZ2001 java EE学习总结 第七周（包含思维导图） 主要内容I/O框架、网络编程、反射
第七周 Day31.Day32 I/O框架 流的概念 内存与存储设备之间传输数据的通道 流的分类 按方向[重点] 输入流 将存储设备中的内容读入到内存中 输出流 将,<内存>中的内容写入到 ...
- visio思维导图模板_如何下载思维导图模板？在线教你找精美漂亮的思维导图
成为职场的一员后,我越来越意识到,学会.掌握绘制思维导图是很重要的一件事情.很多学习.工作上的任务.难题,以思维导图的方式汇总.整理出来以后,会变得简单许多.因此,在学习.工作之余,我常常自主学习脑图 ...
- 教你绘制一张精美的思维导图
思维导图是一个简单.有效的工具,可以帮助我们进行发散性思考.结构化思考,通过文字.图画.线条.颜色,图 文并茂地展示思考内容,帮助分析.记忆等. 如何绘制思维导图?已经有很多介绍这方面内容的书籍了,但 ...
- 如何利用迅捷画图绘制精美思维导图，流程图
思维导图,流程图的用处是比较广泛的,大到企业,小到家庭很多人只知道有这样的软件但是却从来没有上手操作过,所以今天分享一个可以绘制思维导图以及流程图的在线网站迅捷画图. 工具/原料: 电脑 迅捷画图 绘 ...
- 绘制精美思维导图、流程图软件分享
思维导图.流程图在我们的日常办公中运用的都很广泛很多新手小白在绘制的时候都说很难,是这样吗?是你的渠道没选对还是什么原因导致的呢?下面小编将分享一个绘制这两种图形的软件以及绘制的方法介绍,希望能够帮助 ...
- 用matlab画脑图,思维导图怎么画，画出一副好看的流程图方法是什么
作为职场上的一员,平时免不了画各种思维导图,刚开始的时候,总是感觉很难绘制,每次打开工具就在哪里傻傻的坐着,不知道该从哪里开始绘制,之后我发现了一款绘制思维导图的工具,本质上提高了我们的效率,帮助我们 ...
最新文章
- coreldraw 双层边框
- Android 曝光采集：以商品 view 曝光量的统计为例
- Django项目知识点（二）
- Java IO流学习总结六：ByteArrayInputStream、ByteArrayOutputStream
- SAP CRM 中间件对物料batch ID的处理
- 如何使用 vCenter 警报自动监控 VSAN 组件阈值？
- php 修改图像大小,php 修改图片大小
- 【贪心 和 DP + 卖股票】LeetCode 121. Best Time to Buy and Sell Stock
- perl操作postsql
- Unity资源加载闪退问题深度分析
- 冒险岛079单机搭建流程
- redigo批量lpush/rpush、批量zrem
- 医学案例统计分析与SAS应用--自学笔记
- 2021秋软工实践第一次个人编程作业
- Windows命令行WINRAR压缩和解压缩
- 大学毕业4年-回顾和总结(9)-股权投资1年，给自己一个答卷(好狗狗、皇包车、职业梦、比呀比、易途8)(创业有风险，投资需谨慎)...
- 基于微信小程序的个人健康打卡系统设计与实现-计算机毕业设计源码+LW文档
- Matlab-LSB信息隐藏实验
- AppleCare 扫盲帖，三年苹果狗告诉你 AppleCare 到底值不值得买？
- MySQL异常 check the manual that corresponds