添加按CTRL键开窗的功能

src/App.vue

@@ -22,6 +22,15 @@ export default defineComponent({
     window.onresize = (evt: any) =>
       EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
 
+    window.onmousedown = (evt: any) =>
+      EventBus.getInstance().emit(EventNamesDefine.WindowMouseDown, evt);
+    window.onmousemove = (evt: any) =>
+      EventBus.getInstance().emit(EventNamesDefine.WindowMouseMove, evt);
+    window.onmouseup = (evt: any) =>
+      EventBus.getInstance().emit(EventNamesDefine.WindowMouseUp, evt);
+    window.onmouseout = (evt: any) =>
+      EventBus.getInstance().emit(EventNamesDefine.WindowMouseOut, evt);
+
     window.document.body.onclick = (evt: any) =>
       EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
 

src/common/EventBus.ts

@@ -21,6 +21,10 @@ export namespace EventNamesDefine {
   export const UnSelectAllWindows = "onUnSelectAllWindows";
   export const UnFocusAllWindows = "onUnFocusAllWindows";
   export const WindowResize = "onWindowResize";
+  export const WindowMouseDown = "onWindowMouseDown";
+  export const WindowMouseMove = "onWindowMouseMove";
+  export const WindowMouseUp = "onWindowMouseUp";
+  export const WindowMouseOut = "onWindowMouseOut";
   export const DocumentBodyClick = "onDocumentBodyClick";
   export const ResponseMessage = "onResponseData";
   export const NotifyMessage = "onNotifyMessage";

src/components/SignalSourceTree.vue

@@ -7,6 +7,20 @@
           clickable
           :draggable="!prop.node.is_group"
           @dragstart="(evt) => onDragStart(evt, prop.node)"
+          @click="
+            $store.commit(
+              'setSelectedSignalSource',
+              prop.node.is_group
+                ? $store.state.selected_signal_source
+                : prop.node.uuid
+            )
+          "
+          :style="{
+            border:
+              $store.state.selected_signal_source == prop.node.uuid
+                ? '1px solid #aacceec2'
+                : 'none',
+          }"
         >
           <q-item-section avatar>
             <q-icon

src/components/Window.vue

@@ -10,7 +10,7 @@
     @mousedown="onMouseDown"
     @mousemove="onMouseMove"
     @mouseleave="onMouseLeave"
-    @mouseup="onMouseLeave"
+    @mouseup="onMouseUp"
   >
     <q-popup-proxy context-menu>
       <q-list>
@@ -354,6 +354,9 @@ export default defineComponent({
     disable: {
       type: Boolean,
     },
+    mouse_area_flag: {
+      type: Boolean,
+    },
   },
   emits: [
     "reset_geometry_offset",
@@ -472,40 +475,50 @@ export default defineComponent({
 
       calc_is_audio_player_window,
       onClick(evt: PointerEvent) {
-        if (selected.value != true) {
+        if (!props.mouse_area_flag) {
-          EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
+          evt.stopPropagation();
-          selected.value = true;
+          if (selected.value != true) {
-          focused.value = true;
+            EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
-          emit("window_fouse_in", props.window.window_id);
+            selected.value = true;
-          $store.commit("setSelectedWindow", props.window.uuid);
+            focused.value = true;
-        }
+            emit("window_fouse_in", props.window.window_id);
-      },
+            $store.commit("setSelectedWindow", props.window.uuid);
-      onMouseDown(evt: MouseEvent) {
-        if (props.disable) {
-          return;
-        }
-        if (selected.value) {
-          if (evt.button == 0) {
-            mouse_down_flag = true;
-            mouse_last_pos_x = evt.x;
-            mouse_last_pos_y = evt.y;
           }
         }
       },
+      onMouseDown(evt: MouseEvent) {
+        if (!evt.ctrlKey) {
+          evt.stopPropagation();
+          if (props.disable) {
+            return;
+          }
+          if (selected.value) {
+            if (evt.button == 0) {
+              mouse_down_flag = true;
+              mouse_last_pos_x = evt.x;
+              mouse_last_pos_y = evt.y;
+            }
+          }
+        }
+        // console.log("down", ctrl_flag);
+      },
       onMouseMove(evt: MouseEvent) {
-        if (can_move.value && mouse_down_flag && selected.value) {
+        if (!props.mouse_area_flag) {
-          emit(
+          evt.stopPropagation();
-            "reset_geometry_offset",
+          if (can_move.value && mouse_down_flag && selected.value) {
-            props.window,
+            emit(
-            evt.x - mouse_last_pos_x,
+              "reset_geometry_offset",
-            evt.y - mouse_last_pos_y,
+              props.window,
-            0,
+              evt.x - mouse_last_pos_x,
-            0
+              evt.y - mouse_last_pos_y,
-          );
+              0,
+              0
+            );
 
-          mouse_last_pos_x = evt.x;
+            mouse_last_pos_x = evt.x;
-          mouse_last_pos_y = evt.y;
+            mouse_last_pos_y = evt.y;
-          move_flag = true;
+            move_flag = true;
+          }
         }
       },
 
@@ -550,15 +563,19 @@ export default defineComponent({
 
       cleanMouseDownFlag,
       onMouseLeave(evt: MouseEvent) {
-        if (selected.value && mouse_down_flag) {
+        // console.log("leave", ctrl_flag);
-          if (move_flag) {
+        if (!props.mouse_area_flag) {
-            emit("commit_geometry", props.window);
+          if (selected.value && mouse_down_flag) {
+            if (move_flag) {
+              emit("commit_geometry", props.window);
+            }
+            cleanMouseDownFlag();
           }
-          cleanMouseDownFlag();
         }
       },
 
       onMouseUp(evt: MouseEvent) {
+        // console.log("up", ctrl_flag);
         if (selected.value && mouse_down_flag) {
           if (move_flag) {
             emit("commit_geometry", props.window);

src/pages/WallPage.vue

@@ -29,6 +29,7 @@
         :key="index"
         :disable="plan_running"
         class="window"
+        :mouse_area_flag="area_open_window_flag"
         :signal_source_table_uuid="item.signal_source_table_uuid"
         :window="item"
         :style="{
@@ -88,6 +89,25 @@
       </div>
     </div>
   </div>
+  <div
+    class="mouse_area_mask"
+    v-show="area_open_window_flag"
+    style="position: fixed; pointer-events: none; z-index: 999"
+    :style="{
+      left:
+        Math.min(area_open_window_rect.start_x, area_open_window_rect.end_x) +
+        'px',
+      top:
+        Math.min(area_open_window_rect.start_y, area_open_window_rect.end_y) +
+        'px',
+      width:
+        Math.abs(area_open_window_rect.end_x - area_open_window_rect.start_x) +
+        'px',
+      height:
+        Math.abs(area_open_window_rect.end_y - area_open_window_rect.start_y) +
+        'px',
+    }"
+  ></div>
   <edit-volume-dialog ref="edit_volume_dialog" />
   <polling-setting-dialog ref="polling_setting_dialog" />
 </template>
@@ -107,6 +127,11 @@
 
 .wall_item_flag {
 }
+
+.mouse_area_mask {
+  background: #aacceec2;
+  border: 1px solid #0069bee7;
+}
 </style>
 
 <script lang="ts">
@@ -127,6 +152,20 @@ import { NotifyMessage } from "src/common/ClientConnection";
 import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
 import PollingSettingDialog from "src/components/PollingSettingDialog.vue";
 
+class Rect {
+  start_x = 0;
+  start_y = 0;
+  end_x = 0;
+  end_y = 0;
+
+  reset() {
+    this.start_x = 0;
+    this.start_y = 0;
+    this.end_x = 0;
+    this.end_y = 0;
+  }
+}
+
 export default defineComponent({
   name: "PageWall",
 
@@ -158,6 +197,9 @@ export default defineComponent({
 
     const wall: Ref<HTMLElement | null> = ref(null);
 
+    const area_open_window_flag = ref(false);
+    const area_open_window_rect = ref(new Rect());
+
     let item_witdh = ref(0);
     const item_height = ref(0);
 
@@ -185,6 +227,111 @@ export default defineComponent({
       }
     };
 
+    const wallMouseDown = (evt: MouseEvent) => {
+      if (evt.ctrlKey && wall.value) {
+        let left =
+          wall.value.offsetLeft + (wall.value.parentElement?.offsetLeft ?? 0);
+        let top =
+          wall.value.offsetTop + (wall.value.parentElement?.offsetTop ?? 0);
+
+        if (
+          left <= evt.clientX &&
+          top <= evt.clientY &&
+          left + wall.value.offsetWidth >= evt.clientX &&
+          top + wall.value.offsetHeight >= evt.clientY
+        ) {
+          area_open_window_rect.value.start_x = evt.clientX;
+          area_open_window_rect.value.start_y = evt.clientY;
+          area_open_window_rect.value.end_x = evt.clientX;
+          area_open_window_rect.value.end_y = evt.clientY;
+          area_open_window_flag.value = true;
+          evt.stopPropagation();
+        }
+      }
+    };
+
+    const wallMouseUp = (evt: MouseEvent) => {
+      if (area_open_window_flag.value && wall.value) {
+        evt.stopPropagation();
+        // 开窗
+        let left =
+          wall.value.offsetLeft + (wall.value.parentElement?.offsetLeft ?? 0);
+        let top =
+          wall.value.offsetTop + (wall.value.parentElement?.offsetTop ?? 0);
+        let start_x =
+          Math.min(
+            area_open_window_rect.value.start_x,
+            area_open_window_rect.value.end_x
+          ) - left;
+        let start_y =
+          Math.min(
+            area_open_window_rect.value.start_y,
+            area_open_window_rect.value.end_y
+          ) - top;
+        let end_x = Math.abs(
+          area_open_window_rect.value.end_x -
+            area_open_window_rect.value.start_x
+        );
+        let end_y = Math.abs(
+          area_open_window_rect.value.end_y -
+            area_open_window_rect.value.start_y
+        );
+
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.openWindow(
+            new Protocol.OpenWindowRequestEntity(
+              $store.state.selected_signal_source,
+              (start_x * wall_width_scaler.value) /
+                $store.state.device_screen_width,
+              (start_y * wall_height_scaler.value) /
+                $store.state.device_screen_height,
+              (end_x *
+                wall_width_scaler.value) /
+                $store.state.device_screen_width,
+              (end_y *
+                wall_height_scaler.value) /
+                $store.state.device_screen_height
+            )
+          );
+      }
+      area_open_window_flag.value = false;
+      area_open_window_rect.value.reset();
+    };
+
+    const wallMouseMove = (evt: MouseEvent) => {
+      if (area_open_window_flag.value) {
+        evt.stopPropagation();
+        if (wall.value) {
+          let left =
+            wall.value.offsetLeft + (wall.value.parentElement?.offsetLeft ?? 0);
+          let top =
+            wall.value.offsetTop + (wall.value.parentElement?.offsetTop ?? 0);
+          let right = left + wall.value.offsetWidth;
+          let bottom = top + wall.value.offsetHeight;
+          if (evt.clientX < left) {
+            area_open_window_rect.value.end_x = left;
+          } else if (evt.clientX > right) {
+            area_open_window_rect.value.end_x = right;
+          } else {
+            area_open_window_rect.value.end_x = evt.clientX;
+          }
+
+          if (evt.clientY < top) {
+            area_open_window_rect.value.end_y = top;
+          } else if (evt.clientY > bottom) {
+            area_open_window_rect.value.end_y = bottom;
+          } else {
+            area_open_window_rect.value.end_y = evt.clientY;
+          }
+        }
+      }
+    };
+
+    EventBus.getInstance().on(EventNamesDefine.WindowMouseDown, wallMouseDown);
+    EventBus.getInstance().on(EventNamesDefine.WindowMouseMove, wallMouseMove);
+    EventBus.getInstance().on(EventNamesDefine.WindowMouseUp, wallMouseUp);
+
     EventBus.getInstance().on(
       EventNamesDefine.DocumentBodyClick,
       (evt: PointerEvent) => {
@@ -387,6 +534,8 @@ export default defineComponent({
       plan_running,
       edit_volume_dialog,
       polling_setting_dialog,
+      area_open_window_rect,
+      area_open_window_flag,
       onDrop(e: DragEvent) {
         e.preventDefault();
         let target = e.target as any;

src/store/index.ts

@@ -42,6 +42,7 @@ export interface StateInterface {
   power_on_plan: string;
   fan_temp: number;
   selected_window: string;
+  selected_signal_source: string;
 }
 
 // provide typings for `this.$store`
@@ -270,6 +271,8 @@ export default store(function (/* { ssrContext } */) {
       power_on_plan: "",
       fan_temp: 0,
       selected_window: "",
+      selected_signal_source:
+        "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF",
     },
 
     mutations: {
@@ -646,6 +649,9 @@ export default store(function (/* { ssrContext } */) {
       setSelectedWindow(state: StateInterface, playload?: any) {
         state.selected_window = playload;
       },
+      setSelectedSignalSource(state: StateInterface, playload?: any) {
+        state.selected_signal_source = playload;
+      },
     },
 
     // enable strict mode (adds overhead!)