amos-minder

脑图组件

Components list

• [x] MindViewer: mind viewer
• [x] Hotbox: hotbox base from hotbox

BaseMinder API

import { BaseMinder, MindViewer, NavigatorView, HotBox, kityminder, kity } from 'amos-minder';

// filetools
import { exportBlob, exportBase64Image, base64DataToBlob, downloadContent, importFile } from 'amos-minder';

BaseMinder props 说明

| params | type | default | descr | | ------ | ------ | ------ | ------ | | className | String | - | 自定义样式名 | | style | Object | - | 自定义内联样式 | | configer | Object | - | minder 设计器配置项 | | rootNodeText | String | '中心主题' | 根节点默认名称 | | onCreated | func: (runtime) => {} | - | minder创建成功之后的回调，参数为具体的 runtime 对象 |

runtime 运行时工具库支持：

• runtime.hotbox hotbox 运行时，如果需要获取 hotbox ui 实例，需要使用 runtime.getHotbox()
• runtime.fsm 有限状态机
• runtime.events 事件处理器
• runtime.command 指令器
• runtime.minder minder 实例

BaseMinder 内置子组件注入属性

| params | type | default | descr | | ------ | ------ | ------ | ------ | | command | Object | - | 内置 command 实例 | | configer | Object | - | minder 设计器配置项 | | minder | Object | - | minder 实例 |

configer 数据格式

const configer = {
  // 鹰眼所在的 div id值，当一个页面同时存在多个 minder 鹰眼时，应确保该值唯一性
  minimapContainerId: 'minder-minimap',
  minimapCls: 'minder-minimap',

  // minder 配置项

  // 默认主题
  defaultTheme: 'fresh-blue-compat',
  template: 'default',
  zoomList: [10, 20, 30, 50, 80, 100, 120, 150, 200],

  // keyreceiver minder 内部键盘事件处理
  enableKeyReceiver: false,

  // 是否只读
  readonly: false,

  // animation 控制
  enableAnimation: true,
  layoutAnimationDuration: 300,
  // 单位 ms
  viewAnimationDuration: 100,
  zoomAnimationDuration: 300,

  // minder container 背景颜色，仅初始起效
  // 如果改变了 theme，需要自行设置颜色，如: this.runtime.command.setupContainerBackground('#fefefe')
  background: '#fefefe'
}

node 节点支持的数据格式

data: {
  id: 'id 字段',
  created: '创建时间 Date.noew()',
  // 有子节点时，父节点展开状态
  expandState: 'expand',

  text: 'String 节点显示名称',
  //  text 文字样式配置
  'font-family': '宋体,SimSun',
  'font-style': 'italic',
  'font-weight': 'bold',
  color: '#c0504d',
  // 背景颜色
  background: '#92d050',
  // 特殊节点信息
  priority: 1, // 展示优先级
  progress: 9, // 展示进度
  note: 'my node', // 展示备注信息
  letter: 'tag 标签', // 自定义 tag
  letterColor: 'tag 标签文字颜色',
  letterBgColor: 'tag 标签 背景色',
  letterBorderColor: 'tag 标签 边框颜色',

  // stats 统计信息 （since v1.0.6）
  stats: 'stats 信息',
  statsColor: 'stats 文字颜色',
  statsBgColor: 'stats 背景色',
  statsBorderColor: 'stats 边框颜色',

  // 图片信息
  image: '图片路径',
  imageTitle: '图片提示',
  imageSize: { width: 48, height: 48 }, // 图片大小

  // 超链接
  hyperlink: '超链接地址',
  hyperlinkTitle: '超链接显示名称',

  // 自定义资源 tag
  resource: ['tag1', 'tag2', 'tag3'],


  // layout 参数，该值由画布提供，不自行添加 , xx 由所选的 模板 决定
  layout_xx_offset: {x: 'number', y: 'number'},
  layout_bottom_offset: {x: 'number', y: 'number'},
  layout_right_offset: {x: 'number', y: 'number'},
  layout_mind_offset: {x: 'number', y: 'number'},
  layout_filetree_offset: {x: 'number', y: 'number'},
  layout_tianpan_offset: {x: 'number', y: 'number'},
  layout_fmea_offset: {x: 'number', y: 'number'}, // 自定义 fmea layout 自定义数据，主要是用于自定义改变节点的偏移

}

command 支持的指令

• isNode(): boolean
• getSelectedNode(): MinderNode
• getSelectedNodes(): MinderNode[]
• renderCurrentNode() 刷新当前 node
• importJson(data, flag) 导入JSON， flag 是否第一次
• asyncImportJson(data): Promise 导入JSON， 返回 Promise
• exportJson(): Promise
• exportData(): Promise
• importData(protocolType, data, option): Promise
• selectRoot()
• getRootChildren()
• appendNode(type, text)
• insertChild(text)
• setupPriority(value) 编辑优先级
• setupProgress(value) 编辑完成情况
• setupResult(value) 设置用例执行结果的情况
• setupExecutor(name) 更新节点的执行人
• ... more

NavigatorView props

| params | type | default | descr | | ------ | ------ | ------ | ------ | | className | String | - | 自定义样式名 | | style | Object | - | 自定义内联样式 | | minimapStyle | Object | - | 鹰眼自定义内联样式 | | minimapVisible | bool | - | 初始是否显示minimap，不可控 | | theme | String | - | 鹰眼主题，可选值为 'dart', 'red', 'light' |

注意事项

使用 fmea 模板时

使用 fmea 模板时，需要给 root 节点设置 nodeDirection='right', 如 this.runtime.minder.getRoot().setData('nodeDirection', 'right');

fmea 模板中，所有设置 nodeDirection='right' 的节点，将自动作为 main 节点使用

扩展节点时

扩展节点不能采用 es module 进行加载模块，并且相应 js 文件中不能存在 es module 或者其它 module，需要采用单文件引入方式加载。

拖拽节点

1. 拖放至合并状态的节点时，不能进行更改父节点
2. data 中设置了 disableMoveToParent=true 的节点，将不能拖放更改父节点
3. 可以通过设置 minder 内置全局变量 disableMoveToParent=true 禁用所有节点的拖放更改父节点

onCreated = (runtime) => {
  this.runtime = runtime;
  // 设置全局变量，禁用拖拽改变父节点
  this.runtime.minder.setupGlobals('disableMoveToParent', true);
}

附录

使用 unpkg

组件使用

import * as AmosMinder from 'https://unpkg.com/amos-minder@latest/dist/index.js';

文档站点：

latest

doc site