|
@@ -394,6 +394,27 @@ export default {
|
|
|
return stl
|
|
|
}
|
|
|
}
|
|
|
+ //粗边自定义
|
|
|
+ class SvEdge2 extends SvEdge { }
|
|
|
+ // 节点Model
|
|
|
+ class SvEdgeModel2 extends SvEdgeModel {
|
|
|
+ getEdgeStyle() {
|
|
|
+ const stl = super.getEdgeStyle()
|
|
|
+ stl.stroke = 'orange'
|
|
|
+ stl.strokeWidth = 2
|
|
|
+ return stl
|
|
|
+ }
|
|
|
+ }
|
|
|
+ class GooseEdge2 extends PolylineEdge { }
|
|
|
+ // 边Model
|
|
|
+ class GooseEdgeModel2 extends PolylineEdgeModel {
|
|
|
+ getEdgeStyle() {
|
|
|
+ const stl = super.getEdgeStyle()
|
|
|
+ stl.stroke = '#255CE7'
|
|
|
+ stl.strokeWidth = 2
|
|
|
+ return stl
|
|
|
+ }
|
|
|
+ }
|
|
|
class MyGroup extends GroupNode.view {
|
|
|
}
|
|
|
class MyGroupModel extends GroupNode.model {
|
|
@@ -449,6 +470,16 @@ export default {
|
|
|
model: GooseEdgeModel,
|
|
|
})
|
|
|
lf.value.register({
|
|
|
+ type: "svEdge2",
|
|
|
+ view: SvEdge2,
|
|
|
+ model: SvEdgeModel2,
|
|
|
+ })
|
|
|
+ lf.value.register({
|
|
|
+ type: "baseEdge2",
|
|
|
+ view: GooseEdge2,
|
|
|
+ model: GooseEdgeModel2,
|
|
|
+ })
|
|
|
+ lf.value.register({
|
|
|
type: "my-group",
|
|
|
model: MyGroupModel,
|
|
|
view: MyGroup,
|
|
@@ -473,8 +504,8 @@ export default {
|
|
|
},//连接线w文字样式
|
|
|
outline: {
|
|
|
fill: "transparent",
|
|
|
- stroke: "#949494",
|
|
|
- strokeDasharray: "3,3",
|
|
|
+ stroke: "none",//"#949494",
|
|
|
+ //strokeDasharray: "3,3",
|
|
|
hover: {
|
|
|
stroke: "#949494",
|
|
|
},
|
|
@@ -492,7 +523,7 @@ export default {
|
|
|
},//锚点样式
|
|
|
baseEdge: {
|
|
|
stroke: "#255CE7",
|
|
|
- strokeWidth: 2,
|
|
|
+ strokeWidth: 1,
|
|
|
},//连接线颜色
|
|
|
svEdge: {
|
|
|
stroke: "orange",
|
|
@@ -520,6 +551,11 @@ export default {
|
|
|
lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
|
|
|
copyId.value = data.data.id
|
|
|
nodeId.value = data.data.id
|
|
|
+ if(delId.value!=""){
|
|
|
+ //恢复原线宽度
|
|
|
+ const edge = lf.value.getEdgeModelById(delId.value);
|
|
|
+ if(edge!=null) lf.value.changeEdgeType(delId.value, edge.type.replace("2",""))
|
|
|
+ }
|
|
|
delId.value = "" //清除选择的连线ID
|
|
|
setX.value = data.data.x
|
|
|
setY.value = data.data.y
|
|
@@ -570,8 +606,20 @@ export default {
|
|
|
})
|
|
|
// console.log(lf.value.graphModel,'sss');
|
|
|
lf.value.on('edge:click', function (data, e, position) {//解决点击连接线问题
|
|
|
+ //console.log(data.data.pointsList)
|
|
|
+ if(delId.value!=""){
|
|
|
+ //const edgeModel = lf.value.getEdgeModelById(delId.value);
|
|
|
+ //恢复原线宽度
|
|
|
+ //有bug,会导致连接线重新绘制,原手动调整的points会失效
|
|
|
+ //const edge = lf.value.getEdgeModelById(delId.value);
|
|
|
+ //if(edge!=null) lf.value.changeEdgeType(delId.value, edge.type.replace("2",""))
|
|
|
+ }
|
|
|
delId.value = data.data.id
|
|
|
+ //当前点击线设置为粗线
|
|
|
+ //lf.value.changeEdgeType(data.data.id, data.data.type.replace("2","")+"2") //有bug,会导致连接线重新绘制,原手动调整的points会失效
|
|
|
nodeId.value = "" //清除选择的节点Id
|
|
|
+ /*
|
|
|
+ //根据选择的边类型,更改当前选择边的类型
|
|
|
if (copyColor.value == '#255CE7') {
|
|
|
blue()
|
|
|
lf.value.changeEdgeType(data.data.id, "baseEdge")
|
|
@@ -582,6 +630,7 @@ export default {
|
|
|
lf.value.changeEdgeType(data.data.id, "svEdge")
|
|
|
lf.value.setProperties(data.data.id, { 'issv': 'SV' })
|
|
|
}
|
|
|
+ */
|
|
|
})
|
|
|
//当将节点托入画布后触发事件
|
|
|
lf.value.on('node:dnd-add', function (nodedata) {
|