1.0.6 • Published 4 years ago
model-designer
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.
onChangeEdges (data) => void; 线改变触发(system.link.reconnect)
onCreateEdge (data) => void; 线创造触发(system.link.connect)
onDeleteEdge (data) => void; 线删除触发(system.links.delete)
onOtherEvent (data) => void; butterfly-dag中api 中除上述3种
onLoaded (VueCom) => void; 画布加载完毕后返回ButterflyVue实例（VueCom。canvas就是原生的canvas）
[
{
title: '基础组件', // 标题
background: '#F66902', // 标题背景
color: '#fff', // 标题字体颜色
fontSize: '16px', // 标题字体大小
textAlign: 'center', // 标题字体位置
padding: '8px', // 标题边距
child: [
{
title: "NODE", // 控件标题
iconImg: "image/png", // 控件图片
type: 'node', // 控件类型
height: 36, // 控件阴影高度
width: 210, // 控件阴影宽度
background: '#F66902', // 控件阴影背景
color: '#fff', // 控件阴影字体颜色
fontSize: '16px', // 控件阴影字体大小
borderRadius: '5px', // 控件阴影圆角
},
{
iconImg: "image/png",
title: "GROUP",
type: 'group',
height: 36,
width: 210,
background: '#4c5f82',
color: '#16c7da',
fontSize: '20px',
borderRadius: '5px',
},
],
},
{// 多组
...
}
]
数据源格式
const data = {
// 节点
nodes: [{
id: 'abc', // 节点id
top: 50, // 节点离上面距离
left: 50, // 节点离左侧距离
height: 36, // 节点div高
width: 140, // 节点div宽
text: 'A + B + C', // 节点名称
endPointLabel: [{
label: 'left_abe', // 列节点名称
left_endpoint: 'left_abe0', // 列节点左侧锚点
right_endpoint: 'right_abe0', // 列节点右侧锚点
},
{
label: 'right_abe',
left_endpoint: 'left_abe1',
right_endpoint: 'right_abe1',
}],
},{
id: 'gamepad',
top: 200,
left: 250,
height: 100,
width: 200,
endPointLabel: [{
label: 'left_x_axis',
left_endpoint: 'left_gamepad0',
right_endpoint: 'right_gamepad0',
}, {
label: 'left_y_axis',
left_endpoint: 'left_gamepad1',
right_endpoint: 'right_gamepad1',
}, {
label: 'button_pressed',
left_endpoint: 'left_gamepad2',
right_endpoint: 'right_gamepad2',
}],
text: 'Gamepad',
}, {
id: 'testGroup1',
top: 50,
left: 50,
height: 36,
width: 150,
text: 'Flat Slots1',
group: 'testGroup', //节点组id
Class: Node,
endPointLabel: [{
label: 'testGroup1_axis',
left_endpoint: 'left_testGroup1',
right_endpoint: 'right_testGroup1',
}]
}, {
id: 'testGroup2',
top: 128,
left: 420,
height: 36,
width: 150,
text: 'Flat Slots2',
group: 'testGroup', //节点组id
endPointLabel: [{
label: 'testGroup2_axis',
left_endpoint: 'left_testGroup2',
right_endpoint: 'right_testGroup2',
}]
}, {
id: 'customShapes',
top: 111,
left: 568,
height: 60,
width: 200,
text: 'Custom Shapes',
endPointLabel: [{
label: 'customShapes_x_axis',
left_endpoint: 'left_customShapes0',
right_endpoint: 'right_customShapes0',
}]
}],
// 节点组
groups: [{
id: 'testGroup',
options: {
text: 'Group'
},
top: 360,
left: 100,
height: 240,
width: 600,
Class: BaseGroup
}],
// 线
edges: [{
source: 'right_abe0',
target: 'left_gamepad0',
sourceNode: 'abc',
targetNode: 'gamepad',
type: 'endpoint',
},
{
source: 'right_gamepad0',
target: 'left_customShapes0',
sourceNode: 'gamepad',
targetNode: 'customShapes',
type: 'endpoint',
},
{
source: 'right_testGroup1',
target: 'left_testGroup2',
sourceNode: 'testGroup1',
targetNode: 'testGroup2',
type: 'endpoint',
},
{
source: 'right_gamepad2', // 起始点
target: 'left_testGroup2', // 结束点
sourceNode: 'gamepad', // 起始node的id
targetNode: 'testGroup2', // 结束node的id
type: 'endpoint',
}]
};