bi-vue-mindmap

🖼️ Screen Shoot

🔨 Minimal Sample

<template>
  <BiVueMindmap ref="bi-vue-mindmap" :flatNodes="mindmapNodes" />
</template>
<script>
import BiVueMindmap, { BtnWrapper } from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
          extra: {
            a: 1,
            b: "x",
          },
        },
        {
          id: "yyy",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 2,
            b: "y",
          },
        },
      ],
    };
  },
};
</script>

<template>
  <BiVueMindmap ref="bi-vue-mindmap" :flatNodes="mindmapNodes">
    <template v-slot:operation>
      <BtnWrapper>
        <img
          class="btn-img"
          :style="{ width: '20px', height: '20px' }"
          :src="LOGO_ICON"
        />
      </BtnWrapper>
    </template>
  </BiVueMindmap>
</template>
<script>
import BiVueMindmap, { BtnWrapper } from "bi-vue-mindmap";
import LOGO_ICON from "../assets/logo.png";

export default {
  components: {
    BiVueMindmap,
    BtnWrapper,
  },
  data() {
    return {
      LOGO_ICON,
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
          extra: {
            a: 1,
            b: "x",
          },
          resources: [
            {
              type: "PIC",
              url: require("../assets/examples/landscape.png"),
            },
            {
              type: "VIDEO",
              url: require("../assets/examples/cat.mp4"),
            },
            {
              type: "FILE",
              url: require("../assets/examples/cat.mp4"),
            },
          ],
        },
        {
          id: "yyy",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 2,
            b: "y",
          },
          resources: [
            {
              type: "PIC",
              url: require("../assets/examples/landscape.png"),
            },
          ],
        },
        {
          id: "zzz",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 3,
            b: "z",
          },
          resources: [
            {
              type: "VIDEO",
              url: require("../assets/examples/cat.mp4"),
            },
          ],
        },
      ],
    };
  },
};
</script>

🔠 Properties

| Prop Name | Type | Default Value | Description | |--------------------|---------------|------------------|--------------------------------------------------------------------------------| | flatNodes | Array.<Node> | 仅包含单个根节点 | 节点数据(组件不会更改本数组内的数据) | | isReadonly | Boolean | false | 是否全局只读(true 会使整个导图没有任何编辑功能) | | defaultLayout | String | "horizontal" | 默认展示的布局方式(横向/竖向)，取值范围["horizontal", "vertical"] | | defaultLineStyle | String | "curve" | 默认的节点间连线样式，取值范围["curve", "straight"] | | defaultLineColor | String | "#338AFF" | 默认的节点间连线的颜色(以 # 开头的十六进制颜色) | | allowDrop | Boolean | false | 是否允许往节点拖放图片/视频/文件/Html 内容 | | isBottomBarVisible | Boolean | true | 是否隐藏底部工具栏 | | isNodeHide | String | "vif" | 不在视窗范围内的节点是否渲染，取值范围["none", "vshow", "vif"] | | operationPosition | String | "left-top" | 操作按钮组的位置，取值["left-top", "right-top", "left-bottom", "right-bottom"] |

Node Fields

| Field Name | Type | Default Value | required | Description | |------------------|----------------|---------------|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------| | id | string | 随机的 uuid | 非必填 | 标识节点的全局唯一值 | | parentId | string | null | null | 除根节点外必填 | 父节点的id(本身为根节点则本值设为null) | | title | string | "" | 非必填 | 节点标题(自定义节点不需本值) | | isReadonly | boolean | false | 非必填 | 节点是否为只读(当节点只读时，不能编辑节点标题，没有任何操作按钮) | | orderNo | number | 1 | 非必填 | 在同一父节点下的排列顺序(从1开始，如果值相同，则按 flat-nodes 数组内的默认顺序) | | extra | object | {} | 非必填 | 额外需要保存到节点对象的数据对象(可包含用户的自定义数据) | | isCustomized | boolean | false | 非必填 | 是否自定义节点内容(详见 Customization 一节) | | resources | array | [] | 非必填 | 图片、视频、文件等附件资源 | | isFolded | boolean | false | 非必填 | 节点属下的子节点是否折叠 | | redefineSubCount | number | 0 | 非必填 | 重新定义某节点属下所有层级子节点的数量(而不是由本组件自动计算)，当 isFolded 同时为 true 时，即使是末端子节点亦可显示后代数量，多用于节点数据懒加载 |

Resource Fields

| Field Name | Type | Default Value | required | Description | |-------------|--------|---------------|--------------|----------------------------------------------------| | type | string | - | 必填 | 资源类型，取值范围['PIC', 'VIDEO', 'FILE', 'HTML'] | | url | string | - | 非HTML时必填 | 资源的预览或下载地址 | | title | string | - | 非HTML时必填 | 标题/文件名 | | size | number | - | 非HTML时必填 | 大小(单位字节) | | htmlContent | string | - | HTML时必填 | html内容 |

目前本组件仅支持一个根节点

🛠️ Methods

| Method Name | Params | Description | |----------------------|:----------------------------------:|-------------------------------------------------------------------------------------------| | refreshNodesAndLinks | - | 刷新节点及连线(flat-nodes 数组内的元素数量或位置有改变时，会自动调用本方法，无需手动调用) | | getNodeOrderNoById | id:string | 通过节点id获取在同一父节点下该节点的排列顺序号 | | foldOrUnfold | nodeIds:string[], isFolded:boolean | 批量折叠节点 | | focusToNode | nodeId:string | 屏幕视角中心聚焦到某个节点 | | insertResource | nodeId:string, resource:Object | 向指定节点追加一个资源 | | plusScaleValue | - | 放大一个单位导图缩放比例 | | minusScaleValue | - | 缩小一个单位导图缩放比例 | | setScaleValue | scaleValue:number | 设置缩放比例(例如设置为0.5，则表示导图缩小为正常尺寸的一半) | | setFullScreen | isFullScreen:boolean | 设置导图是否全屏 | | focusCenter | - | 焦点定位到中心 |

Method Examples

this.$refs["bi-vue-mindmap"].refreshNodesAndLinks();

this.$refs["bi-vue-mindmap"].getNodeOrderNoById("yyy");

this.$refs["bi-vue-mindmap"].insertResource("idxxxxx", {
  type: "VIDEO",
  url: "https://xxx.com/xxx.mp4",
  title: "cat.mp4",
  size: 5000,
});

🎺 Events

Operation Events

| Event Name | Parameters | Meaning | |--------------------|----------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------| | title-changed | 节点对象, 原标题 | 某节点的标题被改变 | | child-added | 新节点对象, 父节点对象, 新节点的排序号 | 新的子节点被添加(id 为随机 uuid，可手动调用新节点对象的 setId() 更改为自定义的id) | | sibling-added | 新节点对象, 兄弟节点对象, 新节点的排序号 | 新的兄弟节点被添加(id 为随机 uuid，可手动调用新节点对象的 setId() 更改为自定义的id) | | nodes-deleted | 被删除的节点对象二维数组, 形如: [[节点a, 子节点a1, 子节点a2...],[节点b, 子节点b1, 子节点b2...]...] | 1个或多个节点被删除 | | change-parent | 节点对象集合, 新父节点id, 旧父节点id集合 | 节点移动到新的父节点下 | | node-folded | 被折叠的节点对象 | 节点的下级子节点被隐藏 | | node-unfolded | 被展开的节点对象 | 节点的下级子节点被展示 | | img-inserted | 节点对象, 含图片的资源对象, 浏览器文件对象(可用于上传后端), 资源的排序index | 节点内被插入图片 | | video-inserted | 节点对象, 含视频的资源对象, 浏览器文件对象(可用于上传后端), 资源的排序index | 节点内被插入视频 | | file-inserted | 节点对象, 含文件的资源对象, 浏览器文件对象(可用于上传后端), 资源的排序index | 节点内被插入文件 | | frame-size-reseted | 节点对象, 资源对象, 现尺寸{w, h}, 原尺寸{w, h} | 节点内图片或视频的显示尺寸被调整 | | resource-deleted | 节点对象, 被删除的资源对象 | 节点内资源被删除 | | resource-forward | 节点对象, 被前移的资源对象 | 多资源节点内资源被前移 | | resource-backward | 节点对象, 被后移的资源对象 | 多资源节点内资源被后移 | | font-bold | 节点对象, 是否字体加粗 | 节点文字字体加粗/取消加粗 | | font-italic | 节点对象, 是否设置斜体 | 节点文字设置斜体/取消设置斜体 | | font-underline | 节点对象, 是否设置下划线 | 节点文字设置下划线/取消设置下划线 | | font-eraser | 节点对象 | 清除节点文字的样式 | | font-bg-color | 节点对象, 新设置的文字背景色 | 设置节点的文字背景色 |

Normal Events

| Event Name | Parameters | Meaning | |---------------------------|------------|----------------| | before-full-screen | - | 在全屏之前 | | before-cancel-full-screen | - | 在取消全屏之前 |

Infomation Events

| Event Name | Parameters | Meaning | |------------------|-------------------------------------------|------------------| | map-style-change | params: {width, height, scale, top, left} | 导图样式变化事件 |

Ctrl+Z Events

| Event Name | Parameters | Meaning | |----------------------------|--------------------------------------------------------|-----------------------------| | recover-title-changed | 节点对象 | title-changed 事件恢复 | | recover-child-added | 节点对象, 父节点对象, 新节点的排序号 | child-added 事件恢复 | | recover-nodes-deleted | 被恢复的节点对象二维数组 | node-deleted 事件恢复 | | recover-change-parent | 节点对象集合, 恢复后的父节点id集合, 恢复前的父节点id | change-parent 事件恢复 | | recover-node-folded | 折叠后被恢复的对象 | node-folded 事件恢复 | | recover-node-unfolded | 展开后被恢复的对象 | node-unfolded 事件恢复 | | recover-img-inserted | 节点对象, 含图片的资源对象 | img-inserted 事件恢复 | | recover-video-inserted | 节点对象, 含视频的资源对象 | video-inserted 事件恢复 | | recover-file-inserted | 节点对象, 含文件的资源对象 | file-inserted 事件恢复 | | recover-frame-size-reseted | 节点对象, 资源对象, 恢复后尺寸{w, h}, 恢复前尺寸{w, h} | frame-size-reseted 事件恢复 | | recover-resource-deleted | 节点对象, 被恢复的资源对象 | resource-deleted 事件恢复 | | recover-resource-forward | 节点对象, 前移后被恢复的资源对象 | resource-forward 事件恢复 | | recover-resource-backward | 节点对象, 后移后被恢复的资源对象 | resource-backward 事件恢复 | | recover-font-bold | 节点对象, 还原后字体是否加粗 | font-bold 事件恢复 | | recover-font-italic | 节点对象, 还原后字体是否倾斜 | font-italic 事件恢复 | | recover-font-underline | 节点对象, 还原后字体是否有下划线 | font-underline 事件恢复 | | recover-font-bg-color | 节点对象, 还原后字体的背景色 | font-bg-color 事件恢复 | | recover-font-eraser | 节点对象, 还原后的字体样式 | font-eraser 事件恢复 |

Drag Drop Events

| Event Name | Parameters | Meaning | |----------------|------------------------|-------------------------| | node-dragenter | 节点对象, 原生事件对象 | 对应原生 dragenter 事件 | | node-dragleave | 节点对象, 原生事件对象 | 对应原生 dragleave 事件 | | node-dragover | 节点对象, 原生事件对象 | 对应原生 dragover 事件 | | node-drop | 节点对象, 原生事件对象 | 对应原生 drop 事件 |

详情可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API

🎣 Hooks Before Events

| Function Name | Parameters | Meaning | |-----------------------|---------------------------------------------------------------|--------------------------------------------------------------------------------------------------------| | before-child-added | 节点对象, 父节点对象, 新节点的排序号 | child-added 事件的前置钩子; 可修改节点对象的字段，从而控制新增子节点 | | before-sibling-added | 节点对象, 兄弟节点对象, 新节点的排序号 | sibling-added 事件的前置钩子; 可修改节点对象的字段，从而控制新增兄弟节点 | | before-change-parent | 节点对象集合, 新父节点id, 旧父节点id集合 | change-parent 事件的前置钩子 | | before-img-inserted | 浏览器文件对象(可用于上传后端), 图片资源的index, 图片资源对象 | img-inserted 事件的前置钩子; 可修改图片资源对象的 id 和 url 属性, url 属性是图片的预览地址 | | before-video-inserted | 浏览器文件对象(可用于上传后端), 视频资源的index, 视频资源对象 | video-inserted 事件的前置钩子; 可修改视频资源对象的 id 和 url 属性, url 属性是视频的预览地址 | | before-file-inserted | 浏览器文件对象(可用于上传后端), 文件资源的index, 文件资源对象 | file-inserted 事件的前置钩子; 可修改图片资源对象的 id, url, title, size 属性, url 属性是文件的下载地址 |

1. 钩子函数作为 Props 传递给组件
2. 以上前置钩子函数，函数内 return false 会使对应的后续事件取消发生

⚙️ Customization

节点 Node 对象中 isCustomized 字段设置为 true 后，节点则作为自定义节点渲染。以插槽的形式定义节点的渲染样式

Customized Node Additional Fields

| Field Name | Type | Default Value | Description | |--------------|----------|---------------|----------------------------------------------------------------------------------------------| | width | number | 100 | 节点的宽度 | | height | number | 32 | 节点的高度 | | calcCellSize | function | - | 计算节点高度和宽度的方法(当宽高有变时，可手动调用组件的 refreshNodesAndLinks() 方法刷新导图) |

Customization Sample

<template>
  <BiVueMindmap
    :flatNodes="mindmapNodes"
    v-slot="{ id, parentId, orderNo, width, height, extra }"
  >
    <div class="my-node-template">
      <p class="title">{{ extra.myTitle }}</p>
      <button
        tabindex="-1"
        @click.stop="
          onBtnClick({ id, parentId, orderNo, width, height, extra })
        "
      >
        确认
      </button>
    </div>
  </BiVueMindmap>
</template>
<script>
import BiVueMindmap from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
        },
        {
          id: "yyy",
          parentId: "xxx",
          isCustomized: true,
          width: 100,
          height: 32,
          extra: {
            myTitle: "Customized Node",
          },
          calcCellSize: function (node) {
            this.width = 200;
            this.height = 64;
            // ----- or -----
            // node.width = 200;
            // node.height = 64;
          },
        },
      ],
    };
  },
  methods: {
    onBtnClick({ id, parentId, orderNo, width, height }) {},
  },
};
</script>

🎹 快捷键

| Keys | Description | |--------|------------------------| | Ctrl+Z | 恢复上一步操作 | | Ctrl+0 | 将缩放比例恢复到100% | | Detele | 删除当前激活的节点对象 |