# xmind-build
**Repository Path**: xu-bin0118/xmind-build
## Basic Information
- **Project Name**: xmind-build
- **Description**: 自定义可自由操作的思维导图
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-17
- **Last Updated**: 2022-10-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# xmind
#### 介绍
xmind是在线思维导航的纯js类库
提供了基础的使用，你可以直接使用，也可以在此扩展
#### 软件架构
1. 节点配置、新增、删除、拖拽
2. 可配置的无限画布、缩放
3. 支持节点内容自定义扩展
4. 支持右键菜单功能
5. 支持皮肤
#### 安装教程
1. 引入css
```html
```
2. 引入js
```html
```
#### 使用说明
```html
xmind
```
配置文件
```javascript
data = [
{
id:"", // 必填-节点ID
pid:"", // 必填-父节点ID
root:false, // 根节点必填-是否是根节点
label:"", // 必填-节点名称
left:false, // 左节点必填-节点是根节点左边或右边
type:"text", // 暂未开发，请使用HTML自定义内容
html:"", // 节点的扩展内容
clsType:"", // 多节点多样式
nodeDivClass,// 节点自定义样式
}
]
$init = {
selector:"", // 必填，容器ID
data:[], // 必填，初始节点集
width:800, // 容器宽
height:800, // 容器高
canvasScale:10, // 无限画布比例 例canvasScale=10 10倍于容器大小
scale:{ // 鼠标缩放比例
max:1.6,
min:0.4
},
editable:true, // 节点是否可编辑
style:{ // 自定义样式
line:{ // 普通线
colors:['#000'],// 线的颜色
size:2,// 线的粗细
},
contactLine:{
colors:['rgb(248, 138, 53)'], // 关连线的颜色
size:2,// 关连线的粗细
},
node:{
class:'', // 所有节点的样式
cls:[{ // 多节点样式
id:"nodeId", // 有id,type就不会生效
type:"clsType", // data里的项设置clsType
name:"classname", // class名
}],
space_x:110, // 节点之间水平间距
space_y:28, // 节点之间垂直间距
pull:{}
},
contextMenu:{
class:'',// 右键菜单自定义样式
},
noSelectionArea:{ // 禁选区域样式
bgColor:"rgba(255,255,255,.1)",
borderWidth:100 , // 左右额外区域
},
},
contextMenu:{ // 自定义右键
addItem:[ // 新增项
{
label:"新增项",
key:"newItem",
fn:(res)=>{console.log("newItem",res)},// 回调函数
}
],
}
}
```
方法
```javascript
//addNode 新增节点
xmind.addNode({
id : "",// 非必填
pid : "",// 必填
label : "",// 必填
left : false, // 必填
html : ``,
fn : ()=>{}
});
//delNode 删除节点
xmind.delNode({
id : "", // 必填
fn : ()=>{}
});
setNodes(arr) // 重置节点集
refresh() // 刷新
getNodesTree() // 获取树节点集
getNodesFree() // 获取自由节点集
getNode({id:""}) // 获取单个节点
setCenter() // 设置中心点
setZoom(data) // 绽放（放大enlarge，缩小narrow，纯数字0.4-1.9）
setPull(false/true) // 节点展开或收起
setNodeState(item) // 更新节点状态
switchDraw(false/true) // 开启/关闭拖拽节点 参数true/false 默认值true
contactLine(id) // 创建关联线：需要配合右键菜单使用
contactLineChecked(obj) // 选中关联线 obj={startId:"",endId:""}
drawContactLine(obj) // 绘制关联线 obj={startId:"",endId:"",isCreated:false}
delContactLine(obj) // 删除关联线 obj={startId:"",endId:""}
cancelContactLine() // 取消关联
highlightNodes(arr) // 高亮部分节点arr=[{id:""}],传空位重置清零
canvasCenter(num) // 设置居中显示num=300 偏移量
/*
this.$xmind.setNodeState({
id :el.id,
state :-1
})
0 失败 1 执行中 2成功
*/
// fn 是回调函数 非必填
destroyed(fn) // 销毁
clear(fn) // 清空-保留画布
// 创建拖拽临时对象
/*
createdDraw({
id, //必填
label, //必填
e, //必填-dom元素
html,
})
*/
createdDraw(res);
// 设置右键功能
// 设置右键选项
/*
res:{
type:"canvas",// 类型（canvas、node、contactLine）
items:[
{label:"",id:"",name:"canvas"}
],
}
*/
setContentMenu(res);
/*
// 事件监听
eventName // 事件名
scaleChange // 缩放完成
temporaryLineUp // 临时画线完成
undoRedoOpt // 操作完成
nodeAdd // 新增节点
nodeDel // 删除节点
nodeClick // 单击节点
nodeDblclick // 双击节点
nodeDrag // 拖动节点
nodeCntMenu // 右键节点
cntMenu // 右键
contactLineEvt // 关联线连接成功
nodesReset // 节点重置
fn // 回调事件，有返回值，类型按实际返回为准
*/
on(eventName,fn);
```
顶部导航
```javascript
// 使用撤销回复功能，data向撤销栈内添加数据；ischear为true时清空撤销栈
$store.dispatch('db/register',{data:data,ischear:false})
this.$store.state.db.stackRevoke //获取当前撤销栈数据
this.$store.state.db.stackRecovery //获取当前恢复栈数据
this.$store.state.db.zoomnum //获取当前缩放比例
this.$store.dispatch('db/uptopData',{
revoke:revoke, //当前撤销栈数据
recovery:recovery, //当前恢复栈数据
zoom:zoom //当前缩放比例
});
// echarts中option配置
option = {
// 标题
title : {
text : res.title,
show : res.title === '' ? false : true,
//title样式
// textStyle : {
// color :'',
// fontSize :Number,
// lineHeight :Number
// }
// 位置定位信息 number、string
// left/right/top/bottom : ''
},
// 图例
legend : {
show:false
},
tooltip : {
show:true,
trigger : 'axis', //axis根据坐标轴触发
axisPointer : {
type: "shadow" //shadow 阴影指示器 cross十字准星指示器
}
},
color : [], //调色盘颜色列表
xAxis : {
type : 'category', //category类目轴，适用于离散的类目数据 value数值轴，适用于连续数据
name : '', //坐标轴名称
data : []
},
yAxis : {},
series : []
}
```
#### 参与贡献
1. 十二 2021-4-19
2. 十二 2021-6-22 更新文档