魔墙：添加多选的键盘移动

src/components/ControlPanelDialog.vue

@@ -3,6 +3,7 @@
     persistent
     v-model="show_dialog"
     @before-hide="resetData"
+
     @keydown="
       (evt) => {
         if (!loading && evt.keyCode == 27) {
@@ -12,13 +13,24 @@
           sub_x();
         }
         if(evt.keyCode==38){//上
-          add_y();
+          sub_y();
         }
         if(evt.keyCode==39){//右
           add_x();
         }
         if(evt.keyCode==40){//下
-          sub_y();
+          add_y();
+
+        }
+        if(evt.keyCode==17){//ctrl
+          multiple=true;
+        }
+      }
+    "
+     @keyup="
+      (evt) => {
+        if(evt.keyCode==17){//ctrl
+          multiple=false;
         }
       }
 
@@ -304,6 +316,9 @@
                           </q-list>
                         </q-popup-proxy>
                         {{ item.uuid }}
+                        <q-separator ></q-separator>
+                        x:{{ item.centerx }}
+                        y:{{ item.centery }}
                       </div>
                     </vue3-resize-drag>
                   </div>
@@ -541,7 +556,7 @@ export default defineComponent({
       height: 0,
       angle: 0,
     });
-
+    let multiple=ref(false);
     const aw = 128;
     const ah = 72;
     const bw = 160;
@@ -637,6 +652,7 @@ export default defineComponent({
       }
     };
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
+    let multiple_select:Ref<number[]>=ref([]);
     const set_x = () => {
       const wall_dom = wall.value;
       const item = test_monitor_wall.value[current_index.value];
@@ -890,6 +906,8 @@ export default defineComponent({
       }
     });
     return {
+      multiple_select,
+      multiple,
       exceedrange,
       max_angle,
       four_point,
@@ -929,6 +947,7 @@ export default defineComponent({
               let sizeh = wall_dom.offsetHeight / element.background_h;
               let sizew = wall_dom.offsetWidth / element.background_w;
               item.currentx = element.lt.x * wall_dom.offsetWidth;
+              item.currenty = element.lt.y * wall_dom.offsetHeight;
               percenter.value = parseFloat(element.percenter.toString());
               item.InitialH = element.initial_h * sizeh;
               item.InitialW = element.initial_w * sizew;
@@ -957,6 +976,8 @@ export default defineComponent({
         test_monitor_wall.value = [];
         current_index.value = -1;
         percenter.value = 1;
+        multiple_select.value=[]
+        multiple.value=false;
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
         });
@@ -1017,12 +1038,25 @@ export default defineComponent({
       activeMouseDown(item: test_monitor, index: number) {
         item.active = true;
         Unchecked.value = false;
-        if (item.active) {
-          test_monitor_wall.value.forEach((element) => {
-            element.active = false;
-          });
+        if(multiple.value){
+          if( multiple_select.value.indexOf(item.id)!=-1){
+            test_monitor_wall.value[item.id].active=false;
+            multiple_select.value[multiple_select.value.indexOf(item.id)]=-1;
+          }else{
+            multiple_select.value.push(item.id);
+            test_monitor_wall.value[item.id].active=true;
+            current_index.value = index;
+          }
+        }else{
+          multiple_select.value=[]
+          if (item.active) {
+            test_monitor_wall.value.forEach((element) => {
+              element.active = false;
+            });
+            multiple_select.value.push(item.id);
+          }
+          item.active = true;
         }
-        item.active = true;
         current_index.value = index;
       },
       onDragStart(e: DragEvent, item: test_monitor) {
@@ -1190,6 +1224,8 @@ export default defineComponent({
             element.active = false;
           });
         }
+        multiple_select.value=[]
+        multiple.value=false;
       },
       changeAngle() {
         const wall_dom = wall.value;
@@ -1197,26 +1233,64 @@ export default defineComponent({
         exceedrange(item);
       },
       sub_x(){
-        console.log(111)
         let item = test_monitor_wall.value[current_index.value]
-        item.currentx--;
-        item.centerx--;
+        if(multiple_select.value.length>1){
+          multiple_select.value.forEach((element)=>{
+            if(element!=-1){
+              test_monitor_wall.value[element].currentx--;
+              test_monitor_wall.value[element].centerx--;
+            }
+          })
+        }else{
+           item.currentx--;
+          item.centerx--;
+        }
+
       },
       sub_y(){
         let item = test_monitor_wall.value[current_index.value]
+        if(multiple_select.value.length>1){
+          multiple_select.value.forEach((element)=>{
+            if(element!=-1){
+              test_monitor_wall.value[element].currenty--;
+              test_monitor_wall.value[element].centery--;
+            }
+          })
+        }else{
         item.currenty--;
         item.centery--;
+        }
       },
       add_x(){
         let item = test_monitor_wall.value[current_index.value]
+        if(multiple_select.value.length>1){
+          multiple_select.value.forEach((element)=>{
+            if(element!=-1){
+              test_monitor_wall.value[element].currentx++;
+              test_monitor_wall.value[element].centerx++;
+            }
+          })
+        }else{
         item.currentx++;
         item.centerx++;
+      }
+
       },
       add_y(){
         let item = test_monitor_wall.value[current_index.value]
-        item.currenty++;
-        item.centery++;
-      }
+        if(multiple_select.value.length>1){
+          multiple_select.value.forEach((element)=>{
+            if(element!=-1){
+              test_monitor_wall.value[element].currenty++;
+              test_monitor_wall.value[element].centery++;
+            }
+          })
+        }else{
+
+                item.currenty++;
+                item.centery++;
+        }
+      },
     };
   },
 });