精美好用的思维导图插件,无缝对接各种前端框架,快来围观吧 ant-mind是一款基于html5的svg进行设计与开发的一个包含文档模式与思维导图模式的一个纯js类库,支持在当前主流的前端框架中接入。

思维导图(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, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 #ant-mind {
 width: 100%;
 height: 100%;
 }
 
 
 
 
 
	
 
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 
};
export default MindView;

3.3 Vue2嵌入


 
 .m-mind {
 width: 100%;
 height: 100%;
 }
 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);
 },
 }
 }

数据格式(dataItem)

1、基础类型

type为p、i、t时,通用的节点字段

参数说明类型默认值
id节点id - 必填string必填项
name节点名称string必填项
type节点类型p - 根节点、i - 二级根节点、t - 标准节点必填项
childCount一级子节点数量number-
children子节点列表dataItem[]-
excludes需过滤的不可操作项NodeOprKey[][]
parentId父节点idstring-

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是否是新增节点booleantrue

4、标准节点(type === t)

特殊性:

  • move时,不可移动到p节点下,支持移动到i、t类型的节点下移动
参数说明类型默认值
status节点状态string-
milestone是否里程碑booleanfalse
user人员object<{id, name}>-
time日期YYYY/MM/DD HH:mm-
timeStatus日期状态,当值为0时,当前日期临近截止日期时,日期显示橙色,超过截止日期时,日期显示红色;为当值为1时,日期颜色不随当前日期变化,显示灰色;number0
isNew是否是新增节点booleantrue

配置相关

1、基础配置 - config

参数说明类型默认值
mode视图类型,mind - 思维导图,outline - 大纲视图stringmind
locale显示语言 - zh-CN、en-US、zh-TWstringzh-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节点最大宽度number500
line连线配置LineType-
+color线条颜色string#4983FF
+width线条宽度[number, number][2, 1]
+radius线条转角弧度number4
p根节点主题PNode-
+maxLength最大长度number100
i二级根节点主题INode-
+maxLength最大长度number30
t子节点主题TNode-
+maxLength最大长度number100
+defaultTime默认结束时间HH:mm18: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缩放的最小值number25
+max缩放的最大值number200
+size画布缩放值number100
+step每次缩放的跨度number10
+map画布缩放的可选项number[][25, 50, 75, 100, 125, 150, 175, 200]

5、操作栏配置 - Operation

参数说明类型默认值
header顶部操作栏HeaderType-
+show是否显示booleantrue
+excludes不显示的操作项HeaderAction[][]
node节点操作栏NodeType-
+show是否显示booleantrue
batch批量操作栏BatchType-
+show是否显示booleantrue
+excludes不显示的操作项BatchAction[]
footer底部操作栏FooterType-
+show是否显示booleantrue
+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最大子节点数,超过该数则不支持默认展开numberInfinity
foldKeys折叠的节点id[][]
limit每类节点的最小数量,小于或等于该数量不可删除LimitType-
level数据层级,超过该层级后不可添加子节点numberInfinity
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();
作者:adamlee520原文地址:https://blog.csdn.net/adamlee520/article/details/126835415

%s 个评论

要回复文章请先登录注册