jsmind.menu.js

jsmind.menu.js

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

jsmind.menu.js 文档

• 说明：该文档是遵循开源规范开发的初版jsmind插件。

• 功能：包含了 一、完整的右键功能 二、可配置右键功能选项 三、可配置的右键样式重写

• 依赖 ： 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!!!!!

咱们有更多的事情去作！