amos-minder
v1.0.7
Published
amos minder
Downloads
10
Readme
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 = {
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,
viewAnimationDuration: 100,
zoomAnimationDuration: 300
}
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
renderCurrentNode()
刷新当前 nodeimportJson(data, flag)
导入JSON, flag 是否第一次asyncImportJson(data): Promise
导入JSON, 返回 PromiseexportJson(): Promise
exportData(): Promise
importData(protocolType, data, option): Promise
selectRoot()
getRootChildren()
appendNode(type, text)
insertChild(text)
- ... more
注意事项
使用 fmea 模板时
使用 fmea 模板时,需要给 root 节点设置 nodeDirection='right'
, 如 this.runtime.minder.getRoot().setData('nodeDirection', 'right');
fmea 模板中,所有设置 nodeDirection='right'
的节点,将自动作为 main
节点使用
扩展节点时
扩展节点不能采用 es module 进行加载模块,并且相应 js 文件中不能存在 es module 或者其它 module,需要采用单文件引入方式加载。