编辑模型关系图时增加选区模式

src/pages/components/draw/DrawDesigns.vue

@@ -391,27 +391,12 @@ export default {
                 getEdgeStyle() {
                     const stl = super.getEdgeStyle()
                     stl.stroke = '#255CE7'
-                    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
+                    /*
+                    console.log("this.isSelected:",this.isSelected)
+                    if (this.isSelected) {
+                        stl.strokeWidth = 3;
+                    }
+                    */
                     return stl
                 }
             }
@@ -470,16 +455,6 @@ 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,
@@ -673,6 +648,82 @@ export default {
                 lf.value.deleteNode(data.groupNodeId)
             }
         }
+        //切换选区模式
+        function selectMode(state){
+            if(state){
+                //开启
+                lf.value.extension.selectionSelect.openSelectionSelect();
+            }else{
+                //关闭
+                lf.value.extension.selectionSelect.closeSelectionSelect();
+                lf.value.clearSelectElements();//清除已框选的节点及边
+            }
+        }
+        //设置选择节点的对齐方式
+        //还有BUG...
+        function onAlignChange(v){
+            const elements = lf.value.getSelectElements(false);            
+            if(elements.nodes.length<2){
+                ElMessage({
+                    type: "info",
+                    message: "至少需要选中2个节点"
+                })
+                return
+            }
+            console.log(elements.nodes)
+            let calMax=function(){
+                let resultMax={"left":0,"right":0,"top":0,"bottom":0}
+                elements.nodes.forEach(ele => {
+                    const size=ele.properties.nodeSize
+                    if(resultMax.left==0 || ele.x<resultMax.left){
+                        //获取最小的left
+                        resultMax.left = ele.x
+                    }
+                    if(resultMax.right==0 || (ele.x+size.width)>resultMax.right){
+                        //获取最大的right
+                        resultMax.right = ele.x+size.width
+                    }
+                    if(resultMax.top==0 || ele.y<resultMax.top){
+                        //获取最小的topt
+                        resultMax.top = ele.y
+                    }
+                    if(resultMax.top==0 || (ele.y+size.height)>resultMax.top){
+                        //获取最大的topt
+                        resultMax.bottom = ele.y+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)
+                    })
+                    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)
+                    })
+                    break;
+                case "align_center":
+                    break;
+                case "align_top":
+                    break;
+                case "align_bottom":
+                    break;
+                case "size_samewidth":
+                    break;
+                case "size_sameheight":
+                    break;
+                default:
+                    break;
+            }
+        }
         onBeforeUnmount(() => {
             // lf.value.remove()
             // coolObj.value = {}
@@ -688,6 +739,8 @@ export default {
             delLine,
             saveLine,
             cleanMap,
+            selectMode,
+            onAlignChange,
             nodeId,
             copyColor,
             copyId,

src/pages/system/components/InsideModule.vue

@@ -16,12 +16,17 @@
                                 <span class="goose" :style="{ opacity: lineMenuColor == 'orange' ? 0.4 : 1 }"
                                     @click="gooseClick">GOOSE</span>
                             </div>
-                            <div style="display: flex;width: calc(15%);">
+                            <div style="display: flex;width: calc(20%);">
                                 <span style="font-size: 14px;color: #7484AB;margin-left: 20px;">操作:</span>
-                                <div class="cutPoint">
-                                    <!-- <img style="width: 22px;height: 22px;display: block;"
+                                <div v-if="!selectModeState" class="cutPoint"  style="border: 1px dashed #ccc;" @click="selectMode">                                    
+                                    <img style="width: 22px;height: 22px;display: block;opacity: 0.3;"
                                         src="../../../assets/icon/iorn_pen.png" alt="">
-                                    <span style="display: block;">控点</span> -->
+                                    <span style="display: block;color: #ccc;">选区模式</span>
+                                </div>
+                                <div v-if="selectModeState" class="cutPoint" style="border: 1px dashed #255CE7;"  @click="selectMode">                                    
+                                    <img style="width: 22px;height: 22px;display: block;"
+                                        src="../../../assets/icon/iorn_pen.png" alt="">
+                                    <span style="display: block;">选区模式</span>
                                 </div>
                                 <div class="deletePoint" @click="delClick">
                                     <img style="width: 22px;height: 22px;display: block;"
@@ -29,6 +34,18 @@
                                     <span style="display: block;">删除</span>
                                 </div>
                             </div>
+                            <!--
+                            <div style="display: flex;width: 15%;">
+                                <div>
+                                    <span style="font-size: 14px;color: #7484AB;">对齐:</span>
+                                </div>
+                                <div>
+                                    <el-select class="coord" v-model="alignListValue" @change="onAlignChange">
+                                        <el-option v-for="item in alignList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                                    </el-select>
+                                </div>
+                            </div>
+                            -->
                             <div style="display: flex;width: 20%;">
                                 <div>
                                     <span style="font-size: 14px;color: #7484AB;">位置:</span>
@@ -69,7 +86,7 @@
                     <div class="tableBox">
                         <!-- 建议使用这个 -->
                         <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :needObj="needObj" :fatX="fatX"
-                            :fatY="fatY" :nowLook="nowLook" :cleanAll="cleanAll" :needId="needId" :needName="needName"
+                            :fatY="fatY" :nowLook="nowLook" :cleanAll="cleanAll" :selectMode="selectMode" :onAlignChange="onAlignChange" :needId="needId" :needName="needName"
                             :searchModule="searchModule" :coolObj="coolObj" :svOrGoose="svOrGoose" @backxy="backxy"
                             @drawCor="drawCor"></DrawDesigns>
                     </div>
@@ -130,6 +147,17 @@ export default {
         let flashLevel = ref("")//抬头显示的电压等级
         let linkStyle = ref("")//抬头显示的接线方式
         let copyType = ref(false)//copyload.vue打开或关闭
+        let selectModeState = ref(false)
+        let alignList = ref([
+            {id:"align_left",name:"左对齐"},
+            {id:"align_right",name:"右对齐"},
+            {id:"align_center",name:"水平居中"},
+            {id:"align_top",name:"顶部对齐"},
+            {id:"align_bottom",name:"底部对齐"},
+            {id:"size_samewidth",name:"相同宽度"},
+            {id:"size_sameheight",name:"相同高度"},
+        ])
+        let alignListValue = ref("")
         watch(() => props.tfType, (newVal) => {
             nowLook.value = newVal
         })
@@ -207,6 +235,18 @@ export default {
             flashLevel.value = row[0].voltage_level_name
             linkStyle.value = row[0].line_link_style_name
         }
+        //切换选区模式
+        function selectMode(){
+            selectModeState.value=!selectModeState.value
+            designsRef.value.selectMode(selectModeState.value)
+        }
+        //应用对齐选项
+        function onAlignChange(){
+            if(alignListValue.value==""){
+                return
+            }
+            designsRef.value.onAlignChange(alignListValue.value)
+        }
         onMounted(() => {
             searchModule()
         })
@@ -220,6 +260,7 @@ export default {
             delClick,
             saveMap,
             cleanAll,
+            onAlignChange,
             fatX,
             fatY,
             backxy,
@@ -239,6 +280,10 @@ export default {
             linkStyle,
             copyType,//copyload.vue打开或关闭
             copyMap,//打开copyload模态框
+            selectMode,
+            selectModeState,
+            alignList,
+            alignListValue,
         }
     },
     components: {
@@ -323,8 +368,12 @@ export default {
     align-items: center;
     font-size: 14px;
     text-align: center;
+    margin-left: 10px;
     margin-right: 10px;
     cursor: pointer;
+    line-height: 20px;
+    height: 30px;
+    margin-top: 20px;
 }
 
 .deletePoint {