# xmind-jsmind
**Repository Path**: worthworld/xmind-jsmind
## Basic Information
- **Project Name**: xmind-jsmind
- **Description**: xmind是在线思维导航的纯js类库
提供了基础的使用，你可以直接使用，也可以在此扩展
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 5
- **Created**: 2023-07-06
- **Last Updated**: 2023-07-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# xmind
版本更新：
重置了工程化结构，原本一个文件的xmind.js拆分成多个模块
#### 介绍
xmind是在线思维导航的纯js类库
提供了基础的使用，你可以直接使用，也可以在此扩展
#### 软件架构
1. 节点配置、新增、删除、拖拽
2. 可配置的无限画布、缩放
3. 支持节点内容自定义扩展
4. 支持右键菜单功能
5. 支持皮肤
#### 安装教程
1. 引入css
```html
```
2. 引入js
```html
```
#### 使用说明
```html
xmind
```
配置文件
```javascript
// 属性
$init = {
selector : "", // 必填，容器ID
nodes : [], // 必填，初始节点集
width : null, // 容器宽
height : null, // 容器高
canvasScale : 10, // 无限画布比例 例canvasScale=2 2倍于容器大小
scale : { // 鼠标缩放比例
max:1.9,
min:0.5,
},
pull : false,
onload : ()=>{}, // 节点更新后需要重新初始化的操作（自定义）
hawkEye : { // 鹰眼
open : false,
pid : null,
},
style:{ // 自定义样式
line:{
color : '#207CFC',
size : 2,
},
automaticLine:{ // 关联线样式
color : '#819FCE',
colorChecked : "#fb685c",
size : 2,
},
node:{
rule : {icon:"",cls:""}, // 规则节点的图标和样式
compute : {icon:"",cls:""}, // 计算节点的图标和样式
resource : {icon:"",cls:""}, // 资源节点的图标和样式
currency : {icon:"",cls:""}, // 常规节点的图标和样式
class : '', // 所有节点的样式
cls : [], // 多节点样式{id:"id",class:"className"}
space_x : 80, // 节点之间水平间距
space_y : 28, // 节点之间垂直间距
hasIcon : false // 节点是否有图标
},
contextMenu:{ // 右键菜单的自定义样式
class:''
},
},
nodeLimit:100, // 固定尺寸-全局
nodeStateCls:{ // 节点状态样式
ing :"ing",
success :"success",
fail :"fail"
},
}
// 单个节点属性
node = {
id : "", // 必填-节点ID
pid : "", // 必填-父节点ID
root : false, // 根节点必填-是否是根节点
label : "", // 必填-节点名称
flip : false, // 左节点必填-节点是根节点左边或右边
type : "tree", // 物理类型
nodeType : "rule", // 逻辑类型
html : "", // 自定义额外内容
data : "", // 自定义数据
status : -1, // 节点状态-1：无，0：运行中，1：成功，2：失败
childrenIds : item.childrenIds||[], // 节点的子节点ID列表
nodeLimit : -1, // 节点宽度
priority : 1, // 优先级
pull : { // 展开按钮
l:{
show:false, // 显示按钮
plus:false, // 按钮状态
has:false, // 有无子节点
},
r:{
show:false,
plus:false,
has:false,
}
},
offset : {x:null,y:null}, // 自由节点必填-距离root的偏移量，应对不同分辨率下自由节点的位置问题，自由节点的位置根据根节点的偏移量计算得出
}
```
方法
```javascript
//addNode 新增节点
/*
id : item.id, // 必填-节点ID
pid : item.pid||null, // 必填-父节点ID
root : item.root||false, // 是否是根节点
flip : item.flip||false, // 就否反转
label : item.label, // 必填-标题
type : item.type||"tree", // 物理类型
nodeType : item.nodeType||"rule", // 逻辑类型
html : item.html||"", // 自定义额外内容
data : item.data||"", // 自定义数据
nodeLimit : item.nodeLimit||100, // 节点宽度
divClass : item.divClass||[], // 自定义样式
divColor : item.divColor||"#000", // 自定义字体颜色
divBgColor : item.divBgColor||"#fff", // 自定义背景字体颜色
fn : item.fn||()=>{} // 回调函数
*/
xmind.addNode();
//delNode 删除节点
/*
id : "", // 需要删除的节点id+9
fn : ()=>{}, // 删除后的回调
*/
xmind.delNode();
/*
// 设置数据集
items:[] // 节点集
fn:()=>{} // 回调函数
recode:false // 是否标记至操作事件
*/
setNodes(arr) // 设置数据集
refresh() // 刷新
getNodes() // 获取节点集
getNode(id) // 获取单个节点
/*
更新单个节点
使用说明
updateNode({
id:"",
……
})
可更新属性
label : '' 标题
nodeType : '' 逻辑类型
priority : 0 优先级
status : 0 节点状态
html : '' 自定义额外内容
nodeLimit : 100 节点宽度
divClass : ['aaa','bbb'] 自定义样式
divColor : '#000' 自定义字体颜色
divBgColor : '#fff' 自定义背景字体颜色
*/
updateNode({id:""},true/false) // 更新单个节点 记录图谱更新默认：true
clearStatus() // 清除所有状态
localRoot() // 定位到根节点(原setCenter)
setZoom(data) // 绽放（放大enlarge，缩小narrow，纯数字0.4-1.9）
pullNode(id,type) // 展开/收起节点 id 必填 type非必填（left/right）
switchEdit(false/true) // 开启/关闭拖拽节点 参数true/false 默认值true
contactLine(id) // 创建关联线：需要配合右键菜单使用
contactLineChecked(obj) // 选中关联线 obj={startId:"",endId:""}
drawContactLine(obj,true/false) // 绘制关联线 obj={startId:"",endId:""} 第二个参数是用于记录图谱更新状态的，默认值是true记录
delContactLine(obj,true/false) // 删除关联线 obj={startId:"",endId:""} 记录图谱更新默认：false
cancelContactLine() // 取消关联
clearConTactLine() // 清空关联线
highlightNodes(arr) // 高亮部分节点arr=[{id:""}],传空位重置清零
// canvasCenter(num) // 设置居中显示num=300 偏移量
hawkEye(open,pid) // 鹰眼 open(开启关闭):true/false ; pid:容器id
setNodeCheckeds(items) // 设置多选节点，items:数组，清空可以传空数组[]
getNodeCheckeds() // 获取当前多选节点的ID
setUndoRedoOpt() // 撤消重做需要的事件回调
// fn 是回调函数 非必填
destroyed(fn) // 销毁
clear(fn) // 清空-保留画布
// 展开/收起节点-高级
/*
setPull({
type:'all'/1, // 必填-两种类型，all：全部；数字类型：层级
flip:'auto'/true/false, // 操作区域是否翻转，两种类型，字符串和布尔
pull:'auto'/true/false, // 收起和展开，两种类型，字符串和布尔
})
pullNode({
id :'', // 必填-节点ID
flip:'auto'/true/false, // 操作区域是否翻转，两种类型，字符串和布尔
pull:'auto'/true/false, // 收起和展开，两种类型，字符串和布尔
})
*/
setPull(res);
pullNode(res);
// 创建拖拽临时对象
/*
使用说明
createdDragNode({
id, // 必填
label, // 必填
e, // 必填-dom元素
nodeType, // 节点类型，默认为rule
data, // 额外信息，非必填
})
*/
createdDragNode(res);
// 设置右键选项
/*
使用说明
res:{
type:"canvas",// 类型（canvas、node）
items:[
{label:"",id:"",name:"canvas",line:"down",icon:"",fn:(res)=>{}},
{label:"",id:"",name:"canvas",line:"down",icon:"",children:[
{label:"",id:"",name:"canvas",icon:"",pid:"",line:"down"},
]}
],
}
id
pid
label 选项名称
name 所属面板
line 分割线 down和up
icon 图标
fn 回调函数
children 二级
*/
setContentMenu(res);
/*
// 事件监听
eventName // 事件名
scaleChange : null,// 缩放完成
undoRedoOpt : null,// 撤消重做需要的事件回调
nodeAdd : null,// 新增节点
nodeDel : null,// 删除节点
nodeUpdata : null,// 更新节点
nodeClick : null,// 单击节点
nodeDblclick : null,// 双击节点
nodeDrag : null,// 拖动节点
nodeDragAdd : null,// 拖动后新增节点
nodeCheckbox : null,// 节点多选
cntMenuNode : null,// 右键节点
cntMenuCanvas : null,// 右键
contactLineEvt : null,// 关联线连接
contactLineEvtCntMenu : null,// 关联线连接(右键使用)
pull : null,// 展开和收起
nodeMouseOver : null,// 鼠板经过节点
nodeMouseOut : null,// 鼠板离开节点
canvasDrag : null,// 画布拖动
fn // 回调事件，有返回值，类型按实际返回为准
*/
on(eventName,fn);
/*
// 事件注销
eventName // 事件名
*/
off(eventName);
```