xmind拖拽_GitHub-xdsnetjsxMind：基于jsmind改写的
jsxmind插件
jsxMind
基于jsmind 改写的jsxmind插件
组织架构插件帮助类说明⽂档 --- mindHelper
本插件⼆次封装了jsmind，实现了jsmind的全部功能，集中并简化了配置操作，并使参数结构化。暴露了丰富的api接⼝。
依赖
1、\js\mapping__plugin\jsmind.js
2、js\mapping__plugin\jsmind.screenshot.js
3、js\mapping__plugin\jsmind.draggable.js
4、\js\mapping__plugin\mindHelper.js
技术⽀持： Allen.sun
本插件需要重点关注node__add 类型的时间操作。需要多次的前中后台的操作。
说明：本帮助类，可以在不阅读jsmind插件的情况下，轻松的使⽤和配置⾃⼰的mind图。
2019/12/3
介绍
1、树形结构渲染
2、可基本配置的图形要素
3、观察者模式的⾃由设置监听和派发事件
4、插件可配置⽀持快捷键
5、可配置右键菜单
6、可进⾏升级操作的profileOpts的扩展选项
7、可切的渲染引擎
8、简化配置操作，简单的配置可实现基本功能
9、实现函数的通信通道，任意适应不同的⼯作和接⼝环境，调⽤者决定插件的下⼀步⾛向。
10、插件加⼊基本的⽹络通讯能⼒，可脱离JQ等封装了ajax的插件。
11、节点加⼊LOADING配置，编辑节点时可⾃动渲染
12、⾃由引⼊拖拽系统，并可以设置监听
13、丰富的外抛API，可以⽆缝调⽤流畅操作图形节点
javascript说明14、富的接⼝返回值，可满⾜⼤多数场景的应⽤
15、实现导出截图
16、实现拖拽
插件的数据格式
var mind = {
"format": "node_tree", //声明数据结构
"data": {
"id": "alibaba", // id
"topic": " 阿⾥巴巴", // 节点的名称
direction: 'right', //对其⽅式 left or right default: right "children": [
{
"id": "bm1", "topic": "部门1", "direction": "right", "children": [ { "id": "bm1_1", "topic": "部门1-1" },
{ "id": "bm1_2", "topic": "部门1-2" },
{ "id": "bm1_3", "topic": "部门1-3" },
{ "id": "bm1_4", "topic": "部门1-4" }
]
}
]
}
}
基本的图形
var hm = new MindHelper({
globalOpts: {
container: 'jsmind_container', // 必选的容器对象
theme: 'primary', // 可选，配置主题
mode: 'full', // full or side
}
data: mind
});
编辑⼀个节点并对globalOpts做完整说明
var hm = new MindHelper({
globalOpts: {
container: 'jsmind_container', // 容器元素
editable: false, // 打开编辑，双击节点开始编辑
theme: 'primary', // 主题元素
mode: 'full', // 模式
support_html: true, // 是否⽀持html 节点中可插⼊html标签
direction: 1, // 对新增节点进⾏⽅向约束，1 左边 -1 右边
},
data: mind // 图形数据
});
完成的视图 布局和快捷键设置
var mind = new MindHelper({
globalOpts: {},
view: {
hmargin: 20, // 容器外框的最⼩⽔平距离
vmargin: 20, // 距容器外框的最⼩垂直距离
line_width: 2, // 图线条的粗细
line_color: '#555', // 图线条的颜⾊
engine: 'svg' //默认canvas 当⾯积巨⼤的时候会带来性能的显著提升
},
layout: {
hspace: 100, // 节点之间的⽔平间距
vspace: 30, // 节点之间的垂直间距
pspace: 13 // 节点与连接线之间的⽔平间距(⽤于容纳节点收缩/展开控制器) },
shortcut: {
enable: true, // 是否启⽤快捷键
mapping: { // 快捷键映射
addchild: l + 65, // 添加⼦节点映射
addbrother: l + 66, // 添加兄弟节点映射
editnode: l + 69, // 编辑节点映射
delnode: l + 68, // 删除节点映射
toggle: l + 84, // 打开关闭节点
left: 37, // // 向左切换节点
up: 38, // // 向上切换节点
right: 39, // // 向右切换节点
down: 40, // // 向下切换节点
}
},
menu: {
injectionList: ['edit', 'addChild', 'addBrother', 'delete'], // 右键配置，⽬前⽀持： edit, addChild addBrother, delete 功能。后续会逐渐增加
alert: "", // 可配置传⼊ 提⽰函数，默认系统alert
},
profileOpts: {
showMenu: true, // 是否开启右键
},
data: mind
});
右键功能：
注意：使⽤右键功能之前需要先选中要操作的元素，之后单机右键选中功能才可以实现操作 否则：
给与提⽰:
节点视图配置：
注册事件与监听事件
this.mind = new MindHelper({
globalOpts: {},
view: {},
layout: {},
shortcut: {},
menu: {},
profileOpts: {useDefaultId： false },
tirrgerList: [ // 注册事件，⽬前⽀持四种事件 分别是
{ name: 'selected_trigger', type: 'node__pos' }, // 选中
{ name: 'del_trigger', type: 'node__del' }, // 删除
{ name: 'drag_trigger', type: 'node__drag' }, // 拖动
{ name: 'add_trigger', type: 'node__add' }, // 添加(⼦节点， 兄弟节点)
],
register_on: function () { // 注册监听事件函数
<('selected_trigger', fn); // 监听选中
<('del_trigger', fn); // 监听删除
<('drag_trigger', fn); // 监听拖动
<('add_trigger', fn); // 监听添加
},
data: mind
});
监听选中函数详解：
// 选中监听
<('selected_trigger', function (node) {
// 当插件中的节点被选中时这⽴即调⽤，⽆论是⼿动点击触发还是调⽤API触发都可以被监听到，返回节点实体类// node.id // 节点的id
// node.children 节点的⼦元素集合，没有为[]
// node.direction 节点的对其⽅式，没有为undefined
// node.index 节点的数据位置
// node.isroot 节点是否是根节点
// node.parent 节点的⽗节点
// pic 节点的名称
});
// 删除监听
<('del_trigger', function (node) {
// 当插件中的节点被删除，⽆论是⼿动点击触发还是调⽤API触发都可以被监听到，返回节点实体类
// node.id // 节点的id
// node.children 节点的⼦元素集合，没有为[]
// node.direction 节点的对其⽅式，没有为undefined
// node.index 节点的数据位置
// node.isroot 节点是否是根节点
// node.parent 节点的⽗节点
// pic 节点的名称
});
/
/ 拖动成功的监听
<('drag_trigger', function (arr) {
// 页⾯拖动 结束时发⽣的动作，返回⼀个数组 arr
// arr[0] 当前被拖动元素的ID
// arr[2] 当前被拖动元素⽬标⽗元素的ID
});
// 添加和编辑的监听
<('add_trigger', function (scope， formatRetEvent) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。