based-canvas visual editor(using Konva)
npm install orion-blueprint基于Canvas的轻量级可视化编辑器，底层框架采用Konva，支持拖放、缩放、连线、Undo/Redo、Save/Load等功能
``
npm install orion-blueprint
App.Vue
`
`
示例
`
let editor = blueprint.init({
container: 'editor',
width: this.size.width,
height: this.size.height
})
{
uid: string 模型唯一ID（没有则自动生成）
x: number X坐标
y: number Y坐标
title: string 模型标题
name: string 模型ID名
version: string 模型版本
ports: [ 端口列表
{
orientation: in | out 端口方向
external: boolean 是否暴露给外部
name: string 端口ID
title: string 端口标题
dataType: string 数据类型
version: string 数据类型版本
}
]
}
示例
let model = this.scene.stage.addModel({
name: 'ComponentA',
title: '组件A',
x: 200,
y: 200,
ports: [
{
orientation: 'in',
external: true,
name: 'LocationX',
datatype: 'float'
},
{
orientation: 'in',
external: true,
name: 'LocationY',
datatype: 'float'
},
{
orientation: 'out',
name: 'Distance',
datatype: 'float'
}
]
})
返回的Model对象，提供inport和outport函数来获取端口对象，使用方法如下：
let o = g1.outport('Distance')
let i = g1.inport('LocationX')
$3
添加一个连线，返回一个对象节点（Konva.Line对象）
option选项包含：
{
start: konva.Group 起始端口（必须是outport类型）
end: konva.Group 终止端口（必须是inport类型）
points: array[number] 连线的坐标点数组（共4个坐标点，连线为贝塞尔曲线，2个顶点 + 2个控制点），如果不提供则自动根据端口生成
}
示例
editor.addLink({
start: model1.outport('Distance'),
end: model2.inport('Distance')
})
$3
将编辑器内容保存为JSON对象
JSON格式示例：
{
models: [
{
name: "ComponentA",
ports: [
{orientation: "in", external: true, name: "LocationX", datatype: "float"},
{orientation: "in", external: true, name: "LocationY", datatype: "float"},
{orientation: "out", name: "Distance", datatype: "float"}
],
title: "组件A",
uid: "1jr8rp20d",
x: 162,
y: 310
}
],
links: [
{
end: {mid: "1jr8rp20f", port: "Distance"},
points: [338.7373046875, 384, 438.7373046875, 384, 450, 217, 550, 217],
start: {mid: "1jr8rp20d", port: "Distance"}
}
]
}
示例
let cache = editor.saveToJson()
$3
加载JSON数据（由Stage.saveToJson()函数生成）, 其中cache参数用于控制是否清除Undo缓存，默认为true 示例
editor.loadFromJson(cache)