xmind

# xmind-jsmind **Repository Path**: mier_bysj/xmind-jsmind ## Basic Information - **Project Name**: xmind-jsmind - **Description**: xmind是在线思维导航的纯js类库提供了基础的使用，你可以直接使用，也可以在此扩展 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 5 - **Created**: 2021-05-06 - **Last Updated**: 2021-05-06 ## 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:"", // 多节点多样式 } ] $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 新增节点 xmid.addNode({ id : "",// 非必填 pid : "",// 必填 label : "",// 必填 left : false, // 必填 html : ``, fn : ()=>{} }); //delNode 删除节点 xmid.delNode({ id : "", // 必填 fn : ()=>{} }); setNodes(arr) // 重置节点集 refresh() // 刷新 getNodesTree() // 获取树节点集 getNodesFree() // 获取自由节点集 getNode({id:""}) // 获取单个节点 ``` #### 参与贡献 1. 十二 2021-4-19