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,可以无缝调用流畅操作图形节点
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({