开源项目jsmind.js的右键扩展插件
-
依赖 ： jsmind.js https://github.com/hizzgdev/jsmind
- 作者： Allen.sun
- 日期： 2019-12-05
- #####[v1.0.1版本更新介绍](#jsmind.menu.js v1.0.1版 文档) 2019-12-9
###正式的介绍
引入顺序： jsmind.js jsmind.menu.js
配置menu之前 需要先了解jsmind的配置 http://hizzgdev.github.io/jsmind/developer.html
了解了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!!!!!
我们有更多的事情去做！
- switchMidStage /* Boolean */ 中台开关
- newNodeText /* String */ 新增节点的默认显示名称
说明： switchMidStage为true时，全部的右键功能都会被相应回调函数的参数next控制，执行next则程序会继续往下执行，否则操作会被终止。 不同回调函数中的next对参数的要求略有不同。
解决的问题：针对操作之前的动作进行一次拦截，并主动权交给调用方，比如新增一个节点，需要赋值一个有意义的ID，而不是一个随机产生的ID。包括很多异步操作。
menuOpts:{
showMenu: true,
switchMidStage: true, //开启中台
newNodeText:'新的节点',
injectionList: [
{target:'edit',text: '编辑节点',
callback: function (node,next) {
fn()
console.log(node)
}
},
{target:'addChild',text: '添加子节点',
callback: function (node,next) {
//next 需要接收一个ID
console.log(node);
var r = confirm('bulabulabula')
r && fn(Math.random(0, 1000));
}
},
{target:'addBrother',text: '添加兄弟节点',
callback: function (node,next) {
//next 需要接收一个ID
var r = confirm('bulabulabula')
r && fn(Math.random(0, 1000));
}
},
{target:'delete',text: '删除节点',
callback: function (node,next) {
console.log(node)
fn();
}
},
{target:'showAll',text: '展开全部节点',
callback: function (node,next) {
console.log(node)
fn();
}
},
{target:'hideAll',text: '收起全部节点',
callback: function (node,next) {
console.log(node)
fn();
}
},
{target:'screenshot',text: '下载导图',
callback: function (node,next) {
console.log(node)
fn();
}
},
{target:'showNode',text: '展开节点',
callback: function (node ,next) {
console.log(node)
fn();
}
},
{target:'hideNode',text: '关闭节点',
callback: function (node,next) {
console.log(node)
fn();
}
},
],
tipContent: '我要自定义一个提示！！！！',
style: {
menu:{
background: 'red'
},
menuItem:{
'font-weight': 800,
},
}
},全局函数：preventMindEventDefault（） 参数：无； 作用：解除jsmind 页面事件的影响； 使用方法：
var mind = {//json};
var option = {// option};
jsMind.preventMindEventDefault(); // new 对象之前调用，即可生效
var jm = new jsMind(options);
jm.show(mind); 1、该方法会使，双击节点编辑失效；
2、该方法会使，快捷键失效；
3、注意该方法只有再调用的jsmind.menu.js 脚本之后才会存在。
- 针对编辑进行的专项操作优化；
- 增加了editCaller，编辑观察者；
解决问题的场景：
在jsmind.menu.js v1.0.1/2 两个版本中，编辑并不能做到自由控制。
场景1： 页面中的节点的增删改查不需要，率先跟后台交互，只需要最后一次提交即可。
解决场景：这是最简单的场景，只需要打开showMenu:true 即可 最后再统一提交树形数据；
场景2： 增删改查 每一次都需要跟后台做互动，所以需要做大量手脚和控制去完成这样的需求，switchMidStage 中台概念及被引入，解释为了解决类似的问题，中台通过next函数即可实现控制；前两个版本 增删查 都实现了中台操作，只有改比较特殊，由于时间的关系并未解决。本次专门对“改”做了一次迭代。
使用方法：
var option = {
menuOpts:{
showMenu: true,
switchMidStage: true,
editCaller: function (info, next) { //编辑观察者
// info 包含节点的id 和 节点编辑之后的名称
// next 即可执行后台的下一步操作； 调用了next 会执行节点的更新操作，否则处于中断状态
},
},
}- 用户表，储存用户信息
|字段|类型|必填|默认|注释| |:---- |:------- |:--- |-- -|------ | |editCaller |Function |否 |无 | 本属性可以传也可以不传，如果传入的类型是Funtion则可以正常的进行编辑的中台操作，如果类型传错了或者没有定义该字段，插件系统会自动的跳过中台，直接更新节点。 |
- 备注：无
1、中台操作需要配合 v1.0.2版本中的 preventMindEventDefault 方法去使用，如果不调用该方法会导致页面的事件调用错乱；
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent