Vue 中使用百度脑图 kityminder-core 二次开发(二)

白瓷梅子汤
3,209 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

KityMinder 是一款强大的脑图可视化/编辑工具，由百度 FEX 团队开发并维护。

其中 KityMinder-Core 是它的核心实现部分：

  • 包括脑图数据的可视化展示（Json 格式）
  • 包括简单的编辑功能（节点创建、编辑、删除）。需要丰富编辑功能的请移步 KityMinder 编辑器。
  • 不包含第三方格式（FreeMind、XMind、MindManager、纯文本、Markdown 等）的支持，可以加载 kityminder-protocol 来扩展第三方格式支持。
  • 不包含文件存储的支持，需要自行实现存储。

以上内容来自于 github.com/fex-team/ki…

接上一期，我们接着讲更多的操作方法。

  • 向上调整选中节点的位置

  • 向下调整选中节点的位置

  • 设置节点的进度信息

通过 this.minder.getSelectedNodes() 获取选中节点。

图片.png

向上调整选中节点的位置

文档：github.com/fex-team/ki…

moveUp() {
  const selectedList = this.minder.getSelectedNodes();
  if (selectedList.length !== 1) {
    this.$message.error("请选择节点");
    return null;
  }
  this.minder.execCommand("ArrangeUp");
}

向下调整选中节点的位置

文档：github.com/fex-team/ki…

moveDown() {
  const selectedList = this.minder.getSelectedNodes();
  if (selectedList.length !== 1) {
    this.$message.error("请选择节点");
    return null;
  }
  this.minder.execCommand("ArrangeDown");
},

设置节点的进度信息

文档：github.com/fex-team/ki…

setNodeProgress() {
  const selectedList = this.minder.getSelectedNodes();
  if (selectedList.length !== 1) {
    this.$message.error("请选择节点");
    return null;
  }
  this.minder.execCommand("Progress", Math.ceil(Math.random() * 10));
},

图片.png

图片.png

更多命令可以查看：github.com/fex-team/ki… 或者查看下表。

命令说明
AppendChildNode添加子节点到选中的节点中
AppendSiblingNode添加选中的节点的兄弟节点
Arrange调整选中节点的位置
ArrangeDown向下调整选中节点的位置
ArrangeUp向上调整选中节点的位置
Background设置选中节点的背景颜色
Bold加粗选中的节点
Camera设置当前视野的中心位置到某个节点上
ClearStyle移除选中节点的样式，包括字体、字号、粗体、斜体、背景色、字体色
Copy复制当前选中的节点
CopyStyle拷贝选中节点的当前样式，包括字体、字号、粗体、斜体、背景色、字体色
Cut剪切当前选中的节点
EditNode编辑选中的节点
Expand展开当前选中的节点，保证其可见
ExpandToLevel展开脑图到指定的层级
FontFamily设置选中节点的字体
FontSize设置选中节点的字体大小
ForeColor设置选中节点的字体颜色
Hand切换抓手状态，抓手状态下，鼠标拖动将拖动视野，而不是创建选区
HyperLink为选中的节点添加超链接
Image为选中的节点添加图片
Italic加斜选中的节点
Layout设置选中节点的布局 允许使用的布局可以使用 kityminder.Minder.getLayoutList() 查询
Move指定方向移动当前视野
Note设置节点的备注信息
Paste粘贴已复制的节点到每一个当前选中的节点上
PasteStyle粘贴已拷贝的样式到选中的节点上，包括字体、字号、粗体、斜体、背景色、字体色
Priority设置节点的优先级信息
Progress设置节点的进度信息（添加一个进度小图标）
RemoveNode移除选中的节点
ResetLayout重设选中节点的布局，如果当前没有选中的节点，重设整个脑图的布局
Resource设置节点的资源标签
Template设置当前脑图的模板
Theme设置当前脑图的主题
Zoom缩放当前的视野到一定的比例（百分比）
ZoomIn放大当前的视野到下一个比例等级（百分比）
ZoomOut缩小当前的视野到上一个比例等级（百分比）

完美，下一期我们接着讲更多的操作方法。

avatar
文章
阅读
粉丝