Home

Awesome

jsmind.menu.js

开源项目jsmind.js的右键扩展插件

jsmind.menu.js 文档

###正式的介绍

引入顺序： 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'],  //这是完整的功能列表
    },

我们再去看下 实例：

对应的功能分别是：

为什么选项都是英文的呢？答案是与国际接轨...

如果想自定义一个选项，可以尽享如下配置

  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!!!!!

我们有更多的事情去做！

jsmind.menu.js v1.0.1版 文档

在 v1.0.1版本中新增了：

说明： 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,
          },
      }
    },

jsmind.menu.js v1.0.2版 文档

在 v1.0.2版本中新增了：

全局函数：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 脚本之后才会存在。

jsmind.menu.js v1.0.3版 文档

在 v1.0.3版本中新增了：

解决问题的场景： 在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 方法去使用，如果不调用该方法会导致页面的事件调用错乱；