nova_mind_map v1.3.8

思维导图Vue2组件

一个由MindNode启发的思维导图Vue组件，基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠、更多功能通过传入参数和方法实现...

近期更新

增加根据节点ID选中节点的方法

安装

npm i nova_mind_map@latest 

PROPS

EVENTS

样例

<template>
  <n-mind-map v-model="data"></n-mind-map>
</template>

<script>
import nMindMap from '@/nova_mind_map'

export default {
  components: { nMindMap },
  data: () => ({
    data: [
            {
              "name":"中心节点",
              "maxChild": 5,
              "children":[
                {
                  "name":"组件功能",
                  "deletable":false,
                  "draggable":false,
                  "editable":false,
                  "left":false,
                  "_children":[
                    {
                      "name":"信息录入方式",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "_children":[
                        {
                          "name":"传统录入方式"
                        },
                        {
                          "name":"生成子节点录入",
                          "deletable":false,
                          "draggable":false,
                          "type": "text",
                          "maxChild": 1
                        },
                        {
                          "name":"弹窗信息录入",
                          "deletable":false,
                          "draggable":false,
                          "type": "type",
                          "maxChild": 1
                        },
                        {
                          "name":"抽屉信息录入",
                          "deletable":false,
                          "draggable":false,
                          "type": "parentExtend"
                        }
                      ]
                    },
                    {
                      "name":"可编辑节点突出展示",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "_children":[
                        {
                          "name":"可编辑字段"
                        }
                      ]
                    },
                    {
                      "name":"浮窗信息预览",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "showHover": true
                    },
                    {
                      "name":"限制子节点数量",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "maxChild": 3,
                      "_children":[
                        {
                          "name":"不限制子节点数量",
                          "deletable":false,
                          "draggable":false
                        },
                        {
                          "name":"限制不能新建子节点(限制TAB)",
                          "deletable":false,
                          "draggable":false,
                          "editable":false,
                          "maxChild": 0
                        },
                        {
                          "name":"限制三个子节点",
                          "deletable":false,
                          "draggable":false,
                          "editable":false,
                          "maxChild": 3,
                          "children":[
                            {
                              "name":"点击Enter生成兄弟节点",
                              "deletable":false,
                              "draggable":false,
                              "editable":false
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "name":"节点收缩和子节点数量实时计算",
                      "deletable":false,
                      "draggable":false,
                      "editable":false
                    },
                    {
                      "name":"快捷键",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "_children":[
                        {
                          "name":"Tab和Enter建新建子节点和兄弟节点",
                          "deletable":false,
                          "draggable":false,
                          "editable":false
                        },
                        {
                          "name":"节点编辑后点击回车完成编辑",
                          "deletable":false,
                          "draggable":false,
                          "editable":false
                        },
                        {
                          "name":"Backspace/Delete 键删除节点",
                          "deletable":false,
                          "draggable":false,
                          "editable":false,
                          "children":[
                            {
                              "name":"可删除"
                            },
                            {
                              "name":"可删除"
                            }
                          ]
                        },
                        {
                          "name":"Ctrl + Z/Ctrl + Y 撤销和恢复",
                          "deletable":false,
                          "draggable":false,
                          "editable":false
                        },
                        {
                          "name":"Shift + Z 折叠/展开节点",
                          "deletable":false,
                          "draggable":false,
                          "editable":false,
                          "children":[
                            {
                              "name":"折叠"
                            },
                            {
                              "name":"折叠"
                            }
                          ]
                        },
                        {
                          "name":"鼠标左键移动画布",
                          "deletable":false,
                          "draggable":false,
                          "editable":false
                        },
                        {
                          "name":"Ctrl + 滑轮缩放/放大画布",
                          "deletable":false,
                          "draggable":false,
                          "editable":false
                        }
                      ]
                    },
                    {
                      "name":"节点属性限制",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "_children":[
                        {
                          "name":"不可编辑",
                          "editable":false
                        },
                        {
                          "name":"不可删除",
                          "deletable":false
                        },
                        {
                          "name":"不可拖动",
                          "draggable":false
                        }
                      ]
                    },
                    {
                      "name":"主题切换",
                      "deletable":false,
                      "draggable":false,
                      "editable":false
                    }
                  ]
                },
                {
                  "name":"基础信息",
                  "deletable":false,
                  "draggable":false,
                  "editable":false,
                  "maxChild": 3,
                  "_children":[
                    {
                      "name":"名称",
                      "deletable":false,
                      "draggable":false,
                      "type": "text",
                      "maxChild": 1
                    },
                    {
                      "name":"类型",
                      "deletable":false,
                      "draggable":false,
                      "type": "type",
                      "maxChild": 1
                    },
                    {
                      "name":"继承父类",
                      "deletable":false,
                      "draggable":false,
                      "type": "parentExtend"
                    }
                  ]
                },
                {
                  "name":"属性",
                  "deletable":false,
                  "draggable":false,
                  "editable":false,
                  "maxChild": 2,
                  "containerStyle": "border-style: dashed;border-color: #f56c6c;background-color: #e6a23c52;",
                  "_children":[
                    {
                      "name":"继承",
                      "deletable":false,
                      "draggable":false,
                      "editable":false
                    },
                    {
                      "name":"自定义",
                      "deletable":false,
                      "draggable":false,
                      "editable":false
                    }
                  ]
                },
                {
                  "name":"关系",
                  "icon": "text",
                  "draggable":false,
                  "children":[
                    {
                      "name":"项目经理",
                      "showHover": true,
                      "draggable":false,
                      "line": "dash",
                      "type": "default",
                      "icon": "text"
                    },
                    {
                      "name":"销售",
                      "deletable":false,
                      "draggable":false,
                      "line": "dash",
                      "type": "relation",
                      "icon": "radio",
                      "fontStyle": "color: red;font-weight: 600;"
                    },
                    {
                      "name":"合作客户",
                      "deletable":false,
                      "draggable":false,
                      "line": "dash",
                      "type": "relation",
                      "icon": "checkbox"
                    },
                    {
                      "name":"监测设备列表",
                      "deletable":false,
                      "draggable":false,
                      "editable":false,
                      "type": "relation"
                    }
                  ],
                  "left":false,
                  "type": "relation"
                }
              ]
            }
          ]
  })
}
</script>

键盘事件

⇥ tab、⏎ enter、⌫ backspace、⌘ cmd/ctrl+z、⌘ cmd/ctrl+y

交互逻辑

鼠标：左键拖动移动、右键菜单、ctrl+滚轮缩放、左键选中

触控板：单击拖动移动、双指菜单、双指捏合缩放、单指选中

待解决

• 导出多种格式
• 设置节点的宽高
• 多个根节点
• ...