修改魔墙旋转时超出

src/components/ControlPanelDialog.vue

@@ -1,11 +1,16 @@
 <template>
-  <q-dialog persistent v-model="show_dialog" @before-hide="resetData" @keydown="
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
       (evt) => {
         if (!loading && evt.keyCode == 27) {
           show_dialog = false;
         }
       }
-  ">
+    "
+  >
     <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
       <q-form @submit="onSubmit">
         <q-card-section class="q-ma-none q-pa-sm">
@@ -15,7 +20,15 @@
             </div>
             <q-space />
             <div>
-              <q-btn :loading="loading" flat round :disable="loading" icon="close" color="red" v-close-popup>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                :disable="loading"
+                icon="close"
+                color="red"
+                v-close-popup
+              >
                 <q-tooltip>
                   {{ $t("close") }}
                 </q-tooltip>
@@ -27,7 +40,6 @@
         <q-separator />
 
         <q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
-
           <q-card class="my-card" flat bordered>
             <q-card-section horizontal>
               <q-card-section class="col-3" style="">
@@ -37,17 +49,33 @@
                 <div class="row no-wrap items-center">
                   <q-item>
                     <q-item-section avatar>
-                      <span class="q-mb-md" style="font-size:1rem"> angle:</span>
+                      <span class="q-mb-md" style="font-size: 1rem">
+                        angle:</span
+                      >
                     </q-item-section>
                     <q-item-section>
-                      <q-input v-if="(current_index > -1)" type="number" min="0"
+                      <q-input
-                        v-model="(test_monitor_wall[current_index].angle)"
+                        v-if="current_index > -1"
-                        oninput="if(value<0)value=0;if(value>360)value=360;" hint="" @update:model-value="changeAngle()">
+                        type="number"
+                        min="0"
+                        v-model="test_monitor_wall[current_index].angle"
+                        oninput="if(value<0)value=0;if(value>360)value=360;"
+                        hint=""
+                        @update:model-value="changeAngle()"
+                        :max="max_angle()"
+                      >
                         <template v-slot:append>
                           <span class="input_append">°</span>
                         </template>
                       </q-input>
-                      <q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
+                      <q-input
+                        v-else
+                        type="number"
+                        min="0"
+                        :model-value="0"
+                        :disable="true"
+                        hint=""
+                      >
                         <template v-slot:append>
                           <span class="input_append">°</span>
                         </template>
@@ -65,9 +93,14 @@
                       <span class="q-mb-md">X:</span>
                     </q-item-section>
                     <q-item-section>
-                      <q-input v-if="(current_index > -1)" type="number" :min="min_x()"
+                      <q-input
-                        v-model="test_monitor_wall[current_index].centerx" @update:model-value="center_x()"
+                        v-if="current_index > -1"
-                        :max="max_x()" :rules="[
+                        type="number"
+                        :min="min_x()"
+                        v-model="test_monitor_wall[current_index].centerx"
+                        @update:model-value="center_x()"
+                        :max="max_x()"
+                        :rules="[
                           (val) =>
                             (val != null &&
                               val != undefined &&
@@ -76,12 +109,22 @@
                           (val) =>
                             parseInt(val) >= 0 ||
                             $t('the number must be greater than 0'),
-                        ]" lazy-rules hint="">
+                        ]"
+                        lazy-rules
+                        hint=""
+                      >
                         <template v-slot:append>
                           <span class="input_append text-h6">px</span>
                         </template>
                       </q-input>
-                      <q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
+                      <q-input
+                        v-else
+                        type="number"
+                        min="0"
+                        :model-value="0"
+                        :disable="true"
+                        hint=""
+                      >
                         <template v-slot:append>
                           <span class="input_append text-h6">px</span>
                         </template>
@@ -91,15 +134,21 @@
                 </div>
                 <br />
 
-
+                <div class="row">
-                <div class="row ">
                   <q-item>
                     <q-item-section avatar>
                       <span class="q-mb-md">Y:</span>
                     </q-item-section>
                     <q-item-section>
-                      <q-input v-if="(current_index > -1)" :hint="''" type="number" :min="min_y()" :max="max_y()"
+                      <q-input
-                        v-model="test_monitor_wall[current_index].centery" @update:model-value="center_y()" :rules="[
+                        v-if="current_index > -1"
+                        :hint="''"
+                        type="number"
+                        :min="min_y()"
+                        :max="max_y()"
+                        v-model="test_monitor_wall[current_index].centery"
+                        @update:model-value="center_y()"
+                        :rules="[
                           (val) =>
                             (val != null &&
                               val != undefined &&
@@ -108,12 +157,21 @@
                           (val) =>
                             parseInt(val) > 0 ||
                             $t('the number must be greater than 0'),
-                        ]" lazy-rules>
+                        ]"
+                        lazy-rules
+                      >
                         <template v-slot:append>
                           <span class="input_append text-h6">px</span>
                         </template>
                       </q-input>
-                      <q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
+                      <q-input
+                        v-else
+                        type="number"
+                        min="0"
+                        :model-value="0"
+                        :disable="true"
+                        hint=""
+                      >
                         <template v-slot:append>
                           <span class="input_append text-h6">px</span>
                         </template>
@@ -124,47 +182,110 @@
               </q-card-section>
               <q-separator vertical></q-separator>
 
-              <q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
+              <q-card-section
-                style="max-height: 80vh; width: 55vw ; position: relative;">
+                @dragenter="onDragEnter"
+                @dragleave="onDragLeave"
+                @dragover="onDragOver"
+                @drop="onDrop"
+                style="max-height: 80vh; width: 55vw; position: relative"
+              >
                 <div class="text-h6 row">
-                  <div for="" class="col-2"> {{ $t("resize") }}</div>
+                  <div for="" class="col-2">{{ $t("resize") }}</div>
-                  <q-slider class="col" style="font-size:0.7rem" v-model="percenter"
+                  <q-slider
-                    @update:model-value="changePercenter()" label :label-value="percenter" markers
+                    class="col"
-                    switch-marker-labels-side label-always :min="0.1" :max="2" :step="0.1" />
+                    style="font-size: 0.7rem"
+                    v-model="percenter"
+                    @update:model-value="changePercenter()"
+                    label
+                    :label-value="percenter"
+                    markers
+                    switch-marker-labels-side
+                    label-always
+                    :min="0.1"
+                    :max="2"
+                    :step="0.1"
+                  />
                 </div>
-                <div style="position: absolute;  height: 20.7vw; width: 36.8vw; text-align: center;"
+                <div
-                  :class="$store.state.power_state ? 'wall' : ''">
+                  style="
-                  <div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
+                    position: absolute;
-                    :class="(i % 2) == 0 ? 'wall_row' : ''">
+                    height: 20.7vw;
+                    width: 36.8vw;
+                    text-align: center;
+                  "
+                  :class="$store.state.power_state ? 'wall' : ''"
+                >
+                  <div
+                    class="row"
+                    v-for="i in 64 / 8"
+                    :key="i"
+                    style="height: 12.5%; align-items: center"
+                    :class="i % 2 == 0 ? 'wall_row' : ''"
+                  >
                     <div class="col" v-for="j in 8" :key="j">
-                      {{ (i * j) }}
+                      {{ i * j }}
                     </div>
                   </div>
                 </div>
-                <div ref="wall" v-if="$store.state.power_state"
+                <div
-                  style="position: absolute;  height: 20.7vw; width: 36.8vw;overflow: hidden;" @click="canel_active()">
+                  ref="wall"
-                  <div v-for=" (item, index) of test_monitor_wall" @click.stop="Unchecked == false">
+                  v-if="$store.state.power_state"
-                    <vue3-resize-drag v-if="item.isShow" :w="item.w" :h="item.h" :x="item.currentx"
+                  style="
-                      :y="item.currenty" :isActive="true" :isGuide="(true && item.angle == 0)"
+                    position: absolute;
-                      :rotate="parseInt(item.angle.toString())" :is-resizable="false" :resizeIconSize="10"
+                    height: 20.7vw;
-                      style="background-color: grey; text-align: center;position: absolute; "
+                    width: 36.8vw;
-                      @moveHandler="moveingMonitor(item, $event, index)" @moveEndHandler="moveMonitor(item, $event)"
+                    overflow: hidden;
-                      @mousedown="activeMouseDown(item, index)" :z-index="item.active ? 99 : 0">
+                  "
-                      <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
+                  @click="canel_active()"
-                        style="text-align:center;" :style="{ lineHeight: show_box_line_height(item.h) }">
+                >
+                  <div
+                    v-for="(item, index) of test_monitor_wall"
+                    @click.stop="Unchecked == false"
+                  >
+                    <vue3-resize-drag
+                      v-if="item.isShow"
+                      :w="item.w"
+                      :h="item.h"
+                      :x="item.currentx"
+                      :y="item.currenty"
+                      :isActive="true"
+                      :isGuide="true && item.angle == 0"
+                      :rotate="parseInt(item.angle.toString())"
+                      :is-resizable="false"
+                      :resizeIconSize="10"
+                      style="
+                        background-color: grey;
+                        text-align: center;
+                        position: absolute;
+                      "
+                      @moveHandler="moveingMonitor(item, $event, index)"
+                      @moveEndHandler="moveMonitor(item, $event)"
+                      @mousedown="activeMouseDown(item, index)"
+                      :z-index="item.active ? 99 : 0"
+                    >
+                      <div
+                        class="full-height full-width"
+                        :class="item.active ? 'monitor_selected' : ''"
+                        style="text-align: center"
+                        :style="{ lineHeight: show_box_line_height(item.h) }"
+                      >
                         <q-popup-proxy context-menu>
                           <q-list>
                             <q-item clickable v-close-popup>
-                              <q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
+                              <q-item-section @click="closeWindow(item, index)">
+                                {{ $t("close this window") }}
                               </q-item-section>
                             </q-item>
                             <q-item clickable v-close-popup>
-                              <q-item-section @click="closeOtherWindows(item, index)">
+                              <q-item-section
+                                @click="closeOtherWindows(item, index)"
+                              >
                                 {{ $t("close other windows") }}
                               </q-item-section>
                             </q-item>
                             <q-item clickable v-close-popup>
-                              <q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }}
+                              <q-item-section @click="closeAllWindows()">
+                                {{ $t("close all windows") }}
                               </q-item-section>
                             </q-item>
                           </q-list>
@@ -181,53 +302,109 @@
           <q-card class="my-card" flat bordered>
             <q-item>
               <q-item-section>
-                <q-item-label class="text-h6">{{ $t("monitors list") }}</q-item-label>
+                <q-item-label class="text-h6">{{
+                  $t("monitors list")
+                }}</q-item-label>
               </q-item-section>
             </q-item>
             <q-separator></q-separator>
             <q-card-section horizontal>
-              <q-list key="uuid" class=" full-width">
+              <q-list key="uuid" class="full-width">
-                <div v-for="item in (Math.ceil(test_monitor_list.length / 4))" class="row justify-around">
+                <div
-                  <div v-for="(j) in 4" style="display:inline-block"
+                  v-for="item in Math.ceil(test_monitor_list.length / 4)"
-                    v-if="(item < test_monitor_list.length / 4 || (test_monitor_list.length % 4 == 0))"
+                  class="row justify-around"
-                    :style="{ lineHeight: box_height(item, j) }">
+                >
-                    <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide">
+                  <div
-
+                    v-for="j in 4"
-                    </div>
+                    style="display: inline-block"
-                    <div v-else style="background-color: grey; border: 1px solid black;text-align: center;"
+                    v-if="
-                      :style="{ width: box_width(item, j), height: box_height(item, j) }"
+                      item < test_monitor_list.length / 4 ||
+                      test_monitor_list.length % 4 == 0
+                    "
+                    :style="{ lineHeight: box_height(item, j) }"
+                  >
+                    <div
+                      v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
+                    ></div>
+                    <div
+                      v-else
+                      style="
+                        background-color: grey;
+                        border: 1px solid black;
+                        text-align: center;
+                      "
+                      :style="{
+                        width: box_width(item, j),
+                        height: box_height(item, j),
+                      }"
                       :draggable="$store.state.power_state"
-                      @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
+                      @dragstart="
-                      @dragend="(evt) => onDragend(evt, item, j)">
+                        (evt) =>
-                      {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
+                          onDragStart(
+                            evt,
+                            test_monitor_list[(item - 1) * 4 + (j - 1)]
+                          )
+                      "
+                      @dragend="(evt) => onDragend(evt, item, j)"
+                    >
+                      {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
                     </div>
                   </div>
-                  <div v-else v-for="j in (test_monitor_list.length) % 4"
+                  <div
-                    style="display:inline-block;text-align: center;" :style="{ lineHeight: box_height(item, j) }">
+                    v-else
-                    <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide">
+                    v-for="j in test_monitor_list.length % 4"
-
+                    style="display: inline-block; text-align: center"
-                    </div>
+                    :style="{ lineHeight: box_height(item, j) }"
-                    <div v-else style="background-color: grey;  border: 1px solid black;"
+                  >
-                      :style="{ width: box_width(item, j), height: box_height(item, j) }"
+                    <div
+                      v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
+                    ></div>
+                    <div
+                      v-else
+                      style="background-color: grey; border: 1px solid black"
+                      :style="{
+                        width: box_width(item, j),
+                        height: box_height(item, j),
+                      }"
                       :draggable="$store.state.power_state"
-                      @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
+                      @dragstart="
-                      @dragend="(evt) => onDragend(evt, item, j)">
+                        (evt) =>
-                      {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
+                          onDragStart(
+                            evt,
+                            test_monitor_list[(item - 1) * 4 + (j - 1)]
+                          )
+                      "
+                      @dragend="(evt) => onDragend(evt, item, j)"
+                    >
+                      {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
                     </div>
                   </div>
                 </div>
-
               </q-list>
             </q-card-section>
           </q-card>
 
           <q-separator />
-
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn :loading="loading" flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
+          <q-btn
-          <q-btn ref="accept" flat :label="$t('Accept')" no-caps :loading="loading" type="submit" color="primary" />
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            no-caps
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            no-caps
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -369,27 +546,71 @@ export default defineComponent({
       height: 0,
       active: false
     });
+    const radians = () => {
+      const item = test_monitor_wall.value[current_index.value]
+      return /*a*/ (item.angle * Math.PI) / 180;
+    };
+   const calculateCoordinates=(px:number,py:number, cx:number,cy:number) =>{
+      const x =cx+(px-cx)*Math.cos(radians())-(py - cy) * Math.sin(radians());
+
+      const y =cy+(px-cx)*Math.sin(radians())+(py - cy) * Math.cos(radians());
+
+      return { x, y };
+    };
+    const four_point=()=>{
+      const item = test_monitor_wall.value[current_index.value]
+      item.centerx = parseInt(item.centerx.toString())
+      item.centery = parseInt(item.centery.toString())
+      const x2: number = item.currentx + item.w;
+      const y2: number = item.currenty + item.h;
+          if(item.angle!=0){
+            // console.log("这里")
+            // console.log(item)
+              const point_left_top=calculateCoordinates(item.currentx,item.currenty,item.centerx,item.centery);
+              const point_left_bootom=calculateCoordinates(item.currentx,y2,item.centerx,item.centery);
+              const point_right_top=calculateCoordinates(x2,item.currenty,item.centerx,item.centery);
+              const point_right_bottom=calculateCoordinates(x2,y2,item.centerx,item.centery);
+              const point_list=[point_left_top,point_left_bootom,point_right_top,point_right_bottom];
+              return point_list;
+          }
+    };
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
     const set_x = () => {
       const wall_dom = wall.value
       const item = test_monitor_wall.value[current_index.value]
       const rx: number = item.currentx + item.w;
       if (wall_dom) {
+        // if(item.angle!=0){
+        //   const point_list=four_point();
+        //   point_list?.forEach((element)=>{
+        //     if(element.x<0){
+        //       return item.currentx+=Math.abs(element.x);
+        //     }else if(element.x>wall_dom.offsetWidth){
+        //       return  item.currentx-=(element.x-wall_dom.offsetWidth);
+        //     }
+        //   })
+        // }else{
         if (rx > wall_dom.offsetWidth) {
           item.currentx = wall_dom.offsetWidth - item.w
           return item.currentx;
         } else {
           return item.currentx;
         }
+      // }
     }
-
     };
     const min_x = () => {
       const wall_dom = wall.value
       const item = test_monitor_wall.value[current_index.value]
+      const point_list=four_point();
       if (wall_dom) {
+        if(item.angle!=0&&point_list){
+          return Math.floor(item.centerx)
+        }else{
           return Math.floor(item.w / 2)
         }
+
+      }
     };
     const max_x = () => {
       const wall_dom = wall.value
@@ -404,13 +625,25 @@ export default defineComponent({
       const item = test_monitor_wall.value[current_index.value]
       const ry: number = item.currenty + item.h;
       if (wall_dom) {
+        // if(item.angle!=0){
+        //   const point_list=four_point();
+        //   point_list?.forEach((element)=>{
+        //     if(element.y<0){
+        //       return item.currenty+=Math.abs(element.y);
+        //     }else if(element.x>wall_dom.offsetHeight){
+        //       return  item.currenty-=(element.y-wall_dom.offsetHeight);
+        //     }
+        //   })
+        // }else{
           if (ry > wall_dom.offsetHeight) {
             item.currenty = wall_dom.offsetHeight - item.h
             return item.currenty;
           } else {
             return item.currenty;
+          // }
         }
       }
+
     };
     const min_y = () => {
       const wall_dom = wall.value
@@ -425,6 +658,9 @@ export default defineComponent({
       if (wall_dom) {
         return Math.floor(wall_dom.offsetHeight - item.h / 2)
       }
+    };
+    const max_angle=()=>{
+
     };
     let Unchecked = ref(false);
     const moveingMonitor = (item: test_monitor, rect: show__Rect, index: number) => {
@@ -452,16 +688,17 @@ export default defineComponent({
     const moveMonitor = (item: test_monitor, rect: show__Rect) => {
       //计算是否超出，然后放回
       const wall_dom = wall.value
+      
       if (rect.left < 0) {
         item.currentx = 0
       } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
-        item.currentx = set_x() ?? 0;
+          item.currentx = Number(set_x()) ?? 0;
       } else {
         item.currentx = rect.left
       }
       if (rect.top < 0) {
         item.currenty = 0
-      } else if (wall.value && rect.top > wall.value.offsetHeight - item.h) {
+      } else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) {
         item.currenty = set_y() ?? 0;
       } else {
         item.currenty = rect.top
@@ -491,6 +728,54 @@ export default defineComponent({
 
       return element;
     };
+
+   const exceedrange=(item:test_monitor)=>{
+        const wall_dom = wall.value
+        // const item = test_monitor_wall.value[current_index.value]
+        let a=0;
+        const point_list=four_point();
+        if(wall_dom&&point_list){
+          point_list.forEach((element)=>{
+                a++;
+                // console.log(a)
+                // console.log(element)
+                // console.log(wall_dom.offsetWidth)
+                let maxx=0;
+                let maxy=0;
+                let minx=0;
+                let miny=0;
+                if(element.x<0){
+                  if(minx>element.x){
+                    minx=element.x;
+                    item.currentx+=Math.abs(element.x);
+                    item.centerx=item.w/2+item.currentx;
+                  }
+                }else if(element.x>wall_dom.offsetWidth){
+                  if(maxx<element.x){
+                    maxx=element.x;
+                    item.currentx-=(element.x-wall_dom.offsetWidth);
+                    item.centerx=item.currentx+item.w/2;
+                  }
+                }
+                if(element.y<0){
+                  if(miny>element.y){
+                    miny=element.y;
+                    item.currenty+=Math.abs(element.y);
+                    item.centery=item.h/2+item.currenty;
+                  }
+                }else if(element.y>wall_dom.offsetHeight){
+                  if(maxy<element.y){
+                    maxy=element.y
+                    item.currenty-=(element.y-wall_dom.offsetHeight);
+                    item.centery=item.currenty+item.h/2;
+                  }
+                }
+              })
+              // item.centerx=item.centerx+item.currentx;
+              // item.centery=item.centery+item.currenty;
+          }
+        // return item;
+    };
     let test_delete_flag = false;
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const wall_dom = wall.value
@@ -512,6 +797,9 @@ export default defineComponent({
       }
     });
     return {
+      exceedrange,
+      max_angle,
+      four_point,
       show_dialog,
       loading,
       window_rect,
@@ -541,16 +829,16 @@ export default defineComponent({
           const response = await client.getMagicWallConfig()
           const a = response?.config.windows;
           const wall_dom = wall.value
-          console.log(response)
           if (a && wall_dom) {
             a.forEach((element) => {
               let item: test_monitor = new test_monitor(0, '0', 0, 0, 0)
               extend(true, item, test_monitor_list.value[element.index])
+              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;
+              item.InitialH = element.initial_h*sizeh;
-              item.InitialW = element.initial_w;
+              item.InitialW = element.initial_w*sizew;
               item.h = (item.InitialH * percenter.value);
               item.w = (item.InitialW * percenter.value);
               item.centerx = Math.floor(item.currentx + item.w / 2);
@@ -599,7 +887,6 @@ export default defineComponent({
               //处理缩放后超出
               // element=isexceed(element);
               // console.log(wall_dom.offsetHeight)
-              console.log(element)
               cloud_monitor_list.windows.push({
                 index: element.id,
                 lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight),
@@ -793,9 +1080,7 @@ export default defineComponent({
           if (element.isShow) {
             tep = true;
           }
-          if(element.angle!=0){
 
-          }
         })
       },
       canel_active() {
@@ -809,10 +1094,10 @@ export default defineComponent({
       },
       changeAngle(){
         const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
+        let item = test_monitor_wall.value[current_index.value]
-        console.log(item.currentx)
+        exceedrange(item);
       }
     };
   },
-});
+})
 </script>