zqy233的前端学习笔记进阶
点击事件
节点点击
js
this.lf.on('node:click', ({ data }) => {
this.currentNode = data
})
this.lf.on('node:click', ({ data }) => {
this.currentNode = data
})
点击画布空白处
js
this.lf.on('blank:click', ({ data }) => {
this.currentNode = null
})
this.lf.on('blank:click', ({ data }) => {
this.currentNode = null
})
设置节点样式
js
this.lf.setProperties(this.currentNode.id, {
style: style
})
this.lf.setProperties(this.currentNode.id, {
style: style
})
获取选中的节点
js
this.lf.on('selection:selected,node:click,blank:click,edge:click', () => {
this.$nextTick(() => {
const { nodes, edges } = this.lf.getSelectElements()
this.$set(this, 'activeNodes', nodes)
this.activeNodes = nodes
this.activeEdges = edges
this.$_getProperty()
})
})
this.lf.on('selection:selected,node:click,blank:click,edge:click', () => {
this.$nextTick(() => {
const { nodes, edges } = this.lf.getSelectElements()
this.$set(this, 'activeNodes', nodes)
this.activeNodes = nodes
this.activeEdges = edges
this.$_getProperty()
})
})
getOutlineStyle
节点选中下的样式
导出流程图图片
注意，目前只能导出base64的图片，所以线上图片需要转换成base64，再进行导出
js
const downloadPng = () => {
lf.getSnapshot()
}
const downloadPng = () => {
lf.getSnapshot()
}
vite自带打包配置，可以把本地图片转换base64
js
build: {
assetsInlineLimit: 8096 // 将8KB及以下大小的文件转换为Base64编码
}
build: {
assetsInlineLimit: 8096 // 将8KB及以下大小的文件转换为Base64编码
}
获取流程图json数据
js
const getJson = () => {
console.log(lf.getGraphData());
};
const getJson = () => {
console.log(lf.getGraphData());
};
更改边的类型
js
const {graphModel} = lf
// 设置默认边类型
lf.setDefaultEdgeType(value)
if(activeEdges && activeEdges.length > 0) {
activeEdges.forEach(edge => {
// 根据id更改边的类型
graphModel.changeEdgeType(edge.id, value)
})
}
const {graphModel} = lf
// 设置默认边类型
lf.setDefaultEdgeType(value)
if(activeEdges && activeEdges.length > 0) {
activeEdges.forEach(edge => {
// 根据id更改边的类型
graphModel.changeEdgeType(edge.id, value)
})
}
lf.changeEdgeType 和 lf.graphModel.changeEdgeType 的区别
查看官方文档，lf下也有changeEdgeType方法，而示例中使用的是lf.graphModel.changeEdgeType
下方来自gpt的解释，有待确认正确性
在LogicFlow库中，lf.changeEdgeType 和 lf.graphModel.changeEdgeType 实际上是相同的函数，都是指向同一个对象的引用。这意味着无论您选择哪个名称来调用该函数，它都将执行相同的操作并返回相同的结果。
获取properties
在自定义model的时候，如果直接通过this.properties在model中获取properties属性，会显示为Proxy对象。这是因为LogicFlow内部为了让properties发生变化后能实时更新流程图，所以把properties转换为响应式对象。如果要打印原生对象内容，可以使用model的getProperties方法获取
js
class UserTaskModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
const properties = this.getProperties();
if (properties.statu === 'pass') {
style.stroke = "green";
} else if (properties.statu === 'reject') {
style.stroke = "red";
} else {
style.stroke = "rgb(24, 125, 255)";
}
return style;
}
}
class UserTaskModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
const properties = this.getProperties();
if (properties.statu === 'pass') {
style.stroke = "green";
} else if (properties.statu === 'reject') {
style.stroke = "red";
} else {
style.stroke = "rgb(24, 125, 255)";
}
return style;
}
}
PS: proxy对象虽然打印出来无法看到属性，但是在控制台上继续展开也可以看到属性。同时，这些属性可以仍然可以正常的通过属性操作符得到。上面的代码和下面的结果一致：
js
class UserTaskModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
if (this.properties.statu === 'pass') {
style.stroke = "green";
} else if (this.properties.statu === 'reject') {
style.stroke = "red";
} else {
style.stroke = "rgb(24, 125, 255)";
}
return style;
}
}
class UserTaskModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
if (this.properties.statu === 'pass') {
style.stroke = "green";
} else if (this.properties.statu === 'reject') {
style.stroke = "red";
} else {
style.stroke = "rgb(24, 125, 255)";
}
return style;
}
}