jsmind.menu.js
开源项目jsmind.js的右键扩展插件
jsmind.menu.js 文档
说明：该文档是遵循开源规范开发的第一版jsmind插件。
功能：包含了 1、完整的右键功能 2、可配置右键功能选项 3、可配置的右键样式重写
依赖 ： jsmind.js https://github.com/hizzgdev/j...
项目地址： https://github.com/allensunji...
- 作者： Allen.sun
- 日期： 2019-12-05
历史说明：由于临时接到一个组织架构任务，也是措手不及，原因是并没有接触过相关的技术。原页面的组织架构又根本没法看。遂准备重写一个插件来满足现在和未来的需求。又因为时间的原因不可能在一个星期的时间内去造个轮子，所以最后还是决定去改写目前已有的插件 也就是 ——— jsmind 插件。
jsmind插件并不能满足现有的需求，所以针对性的改写的大量的代码。同时也发现了原作者在文档中很多（半成品）API，经过改写之后形成了自己的插件，项目地址：（https://github.com/allensunji...）。项目完成之后发现源码中本身已经存在扩展API，向我这样为了满足当前需求而去直接改写源码，是存在很多风险的，诸如：插件一旦更新就无法使用，可扩展性变弱，性能方面有不必要的损失。最重要的是并不具备开源精神也没有遵循开发规范。所以，在开发任务完成之后，着手开始 规范性的对jsmind进行扩展。形成了第一版，规范的，纯净的，基于jsmind的 jsmind.menu.js插件。
正式的介绍
引入顺序：
jsmind.js
jsmind.menu.js
配置menu之前 需要先了解jsmind的配置 http://hizzgdev.github.io/jsm...
了解了jsmind功能和配置之后 引入jsmind.menu.js 顺序如： 【引入顺序】
正式开始介绍menu的配置：
初级版：
{
menuOpts:{ // 这里加入一个专门配置menu的对象
showMenu: true, //showMenu 为 true 则打开右键功能 ，反之关闭
}
};简单的配置之后简单版的功能已经形成，我们去看一下：
简单版，分别提供了三个基本功能： 编辑节点(edit node)，添加子节点(append child)，删除节点(delete node)。
想要更多的功能怎么办？
可以根据需要自行配置需要的功能：
menuOpts:{
showMenu: true,
injectionList: ['edit', 'addChild', 'addBrother', 'delete','showAll','hideAll', 'screenshot', 'showNode', 'hideNode'], //这是完整的功能列表
},我们再去看下 实例：
对应的功能分别是：
- edit node 编辑节点
- append child 新增子节点
- append brother 新增兄弟节点
- delete node 删除节点
- show all 展开全部节点
- hide all 隐藏全部节点
- load mind picture 下载导图 （需要依赖插件jsmind.screenshot.js）
- show target node 展开选中的节点
- hide target node 关闭选中的节点
为什么选项都是英文的呢？答案是与国际接轨...
如果想自定义一个选项，可以尽享如下配置
menuOpts:{
showMenu: true,
injectionList: [
{target:'edit',text: '编辑节点'},
{target:'addChild',text: '添加子节点'},
{target:'addBrother',text: '添加兄弟节点'},
],
}以下是效果哦~
是不是很满意？
我们的项目需要知道我点了那个选项！这个咋办！
这个我已经都考虑到了~
这样进行配置，你将会得到你想知道的一切！
menuOpts:{
showMenu: true,
injectionList: [
{target:'edit',text: '编辑节点',
callback: function (node) {
console.log(node)
}
},
{target:'addChild',text: '添加子节点',
callback: function (node) {
console.log(node)
}
},
{target:'addBrother',text: '添加兄弟节点',
callback: function (node) {
console.log(node)
}
}
],
},您可以亲自去试一下~，简单配置一个callback即可
这个右键我们产品觉得太丑了！我改如何重写？
这个.....这个.....试试添加一个style属性你会得到惊喜
menuOpts:{
showMenu: true,
tipContent: '这是一个新增的提示',
style: {
menu:{
// 控制menu容器的样式
background: 'red' //添加一个红色的北京
},
menuItem:{
// 控制条目的样式
'font-weight': 700 //文字加粗效果
},
}
},效果这样的！
还是很丑？？ 哈哈那你就自己添加样式属性吧！ 注意事项：样式属性需要时JSON格式的
还有其他人性化的设置吗？
这是什么？
再不选中节点的情况下，单机右键,选中 编辑节点 就会有这样的提示~，原因是 插件没有捕获到节点而无法进行下一步操作，所以说，在没选中节点的情况下，部分功能是无法使用的。
圆规正传，我们是不是可以自定义提示语呢？
可以的
menuOpts:{
showMenu: true,
style: {
menu:{
background: 'red'
},
menuItem:{
'font-weight': 800
},
},
tipContent: '我要自定义一个提示！！！',
},就可以啦！
-------------------------------------------END?----------------------------------------------------
no!!!!!
我们有更多的事情去做！