|
@@ -305,7 +305,7 @@ export default {
|
|
|
}
|
|
|
function listMap() {
|
|
|
fun.value = props.searchModule
|
|
|
- funOne.value = props.cleanAll
|
|
|
+ //funOne.value = props.cleanAll //触发关闭按钮事件
|
|
|
coolId.value = props.needId
|
|
|
coolName.value = props.needName//模型名称
|
|
|
copyObj.value = props.coolObj//需要的模型信息对象
|
|
@@ -359,22 +359,26 @@ export default {
|
|
|
lf.value = new LogicFlow({
|
|
|
// 通过选项指定了渲染的容器和需要显示网格
|
|
|
container: container.value,//需要显示画布的容器ref
|
|
|
- // grid: {
|
|
|
- // size: 10,
|
|
|
- // visible: false,
|
|
|
- // type: "mesh",
|
|
|
- // config: {
|
|
|
- // color: "#ababab",
|
|
|
- // thickness: 1,
|
|
|
- // },
|
|
|
- // },//网格,
|
|
|
- grid: true,
|
|
|
+ isSilentMode:false, //仅浏览不可编辑模式,默认不开启
|
|
|
+ grid: {
|
|
|
+ size: 1,//同时影响位置精确度。当前设置为1像素级
|
|
|
+ visible: false,
|
|
|
+ type: "mesh",
|
|
|
+ config: {
|
|
|
+ color: "#ededed",
|
|
|
+ thickness: 1,
|
|
|
+ },
|
|
|
+ },//网格,
|
|
|
+ //grid: true,
|
|
|
plugins: [DndPanel, SelectionSelect, Group, GroupNode, Menu, MiniMap, Snapshot, RectResize, NodeResize],//全局加载的组件
|
|
|
keyboard: {
|
|
|
enabled: true
|
|
|
},
|
|
|
snapline: true,//辅助线
|
|
|
- edgeTextDraggable: true,//连接线文本可以拖拽
|
|
|
+ //edgeTextDraggable: true,//连接线文本可以拖拽
|
|
|
+ nodeTextEdit:false,
|
|
|
+ edgeTextEdit:false,
|
|
|
+ multipleSelectKey:"ctrl",//多选按键:meta(cmd)、shift、alt
|
|
|
})
|
|
|
class SvEdge extends PolylineEdge { }
|
|
|
// 节点Model
|
|
@@ -579,33 +583,15 @@ export default {
|
|
|
setY.value = data.data.y
|
|
|
emit("backxy", setX.value, setY.value)
|
|
|
})
|
|
|
- // 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",""))
|
|
|
+ lf.value.getEdgeModelById(delId.value).setStyle("strokeWidth",1)
|
|
|
}
|
|
|
delId.value = data.data.id
|
|
|
//当前点击线设置为粗线
|
|
|
- //lf.value.changeEdgeType(data.data.id, data.data.type.replace("2","")+"2") //有bug,会导致连接线重新绘制,原手动调整的points会失效
|
|
|
+ lf.value.getEdgeModelById(data.data.id).setStyle("strokeWidth",3)
|
|
|
nodeId.value = "" //清除选择的节点Id
|
|
|
- /*
|
|
|
- //根据选择的边类型,更改当前选择边的类型
|
|
|
- if (copyColor.value == '#255CE7') {
|
|
|
- blue()
|
|
|
- lf.value.changeEdgeType(data.data.id, "baseEdge")
|
|
|
- lf.value.setProperties(data.data.id, { 'issv': 'GOOSE' })
|
|
|
- }
|
|
|
- if (copyColor.value == 'orange') {
|
|
|
- orange()
|
|
|
- lf.value.changeEdgeType(data.data.id, "svEdge")
|
|
|
- lf.value.setProperties(data.data.id, { 'issv': 'SV' })
|
|
|
- }
|
|
|
- */
|
|
|
})
|
|
|
//当将节点托入画布后触发事件
|
|
|
lf.value.on('node:dnd-add', function (nodedata) {
|
|
@@ -624,6 +610,13 @@ export default {
|
|
|
lf.value.on("node:resize", function (data) {
|
|
|
//if(data.oldNodeSize.type!="my-group") return;
|
|
|
})
|
|
|
+ //画布点击事件
|
|
|
+ lf.value.on("blank:click", function (data) {
|
|
|
+ if(delId.value!=""){
|
|
|
+ //恢复原线宽度
|
|
|
+ lf.value.getEdgeModelById(delId.value).setStyle("strokeWidth",1)
|
|
|
+ }
|
|
|
+ })
|
|
|
lf.value.render();
|
|
|
listMap()
|
|
|
})
|
|
@@ -670,11 +663,11 @@ export default {
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
- console.log(elements.nodes)
|
|
|
let calMax=function(){
|
|
|
- let resultMax={"left":0,"right":0,"top":0,"bottom":0}
|
|
|
+ let resultMax={"left":0,"right":0,"top":0,"bottom":0,"width":0,"height":0}
|
|
|
elements.nodes.forEach(ele => {
|
|
|
- const size=ele.properties.nodeSize
|
|
|
+ let size=ele.properties.nodeSize
|
|
|
+ if(size==null) size={"width":100,"height":80} //默认高宽
|
|
|
if(resultMax.left==0 || ele.x<resultMax.left){
|
|
|
//获取最小的left
|
|
|
resultMax.left = ele.x
|
|
@@ -691,34 +684,55 @@ export default {
|
|
|
//获取最大的topt
|
|
|
resultMax.bottom = ele.y+size.height
|
|
|
}
|
|
|
- });
|
|
|
+ if(resultMax.width==0 || size.width>resultMax.width){
|
|
|
+ resultMax.width = size.width
|
|
|
+ }
|
|
|
+ if(resultMax.height==0 || size.height>resultMax.height){
|
|
|
+ resultMax.height = size.height
|
|
|
+ }
|
|
|
+ });
|
|
|
return resultMax
|
|
|
}
|
|
|
const xyz=calMax()
|
|
|
- console.log(xyz)
|
|
|
switch(v){
|
|
|
case "align_left":
|
|
|
//位置调整
|
|
|
elements.nodes.forEach(ele => {
|
|
|
const size=ele.properties.nodeSize
|
|
|
- lf.value.getNodeModelById(ele.id).moveTo(xyz.left,ele.y)
|
|
|
+ //lf.value.getNodeModelById(ele.id).moveTo(xyz.left,ele.y)
|
|
|
+ lf.value.graphModel.moveNode2Coordinate(ele.id,xyz.left,ele.y,false)
|
|
|
})
|
|
|
break;
|
|
|
case "align_right":
|
|
|
elements.nodes.forEach(ele => {
|
|
|
const size=ele.properties.nodeSize
|
|
|
- lf.value.getNodeModelById(ele.id).moveTo(xyz.right-size.width,ele.y)
|
|
|
+ //lf.value.getNodeModelById(ele.id).moveTo(xyz.right-size.width,ele.y)
|
|
|
+ lf.value.graphModel.moveNode2Coordinate(ele.id,xyz.right-size.width,ele.y,false)
|
|
|
})
|
|
|
break;
|
|
|
case "align_center":
|
|
|
break;
|
|
|
case "align_top":
|
|
|
+ elements.nodes.forEach(ele => {
|
|
|
+ //const size=ele.properties.nodeSize
|
|
|
+ lf.value.graphModel.moveNode2Coordinate(ele.id,ele.x,xyz.top,false)
|
|
|
+ })
|
|
|
break;
|
|
|
case "align_bottom":
|
|
|
+ elements.nodes.forEach(ele => {
|
|
|
+ const size=ele.properties.nodeSize
|
|
|
+ lf.value.graphModel.moveNode2Coordinate(ele.id,ele.x,xyz.bottom-size.height,false)
|
|
|
+ })
|
|
|
break;
|
|
|
case "size_samewidth":
|
|
|
+ elements.nodes.forEach(ele => {
|
|
|
+ lf.value.getNodeModelById(ele.id).width=xyz.width;
|
|
|
+ })
|
|
|
break;
|
|
|
case "size_sameheight":
|
|
|
+ elements.nodes.forEach(ele => {
|
|
|
+ lf.value.getNodeModelById(ele.id).height=xyz.height;
|
|
|
+ })
|
|
|
break;
|
|
|
default:
|
|
|
break;
|