Merge branch 'magic_wall'

# Conflicts:
#	src/common/ClientConnection.ts
#	src/components/RegisterDialog.vue
#	src/components/SystemSettingDialog.vue
#	src/entities/MagicWallConfig.ts
#	src/entities/RectF.ts
#	src/entities/WSProtocol.ts
#	src/i18n/en-US/index.ts
#	src/i18n/zh-CN/index.ts
#	src/pages/TopToolBar.vue
#	src/store/index.ts

src/components/AdvancedDebugDialog.vue

@@ -69,15 +69,7 @@
                   :disable="loading"
                 />
               </q-item-section>
-              <q-item-section avatar>
+
-                <q-btn
-                  @click="setDeviceAttribute"
-                  :label="$t('commit')"
-                  no-caps
-                  outline
-                  color="primary"
-                />
-              </q-item-section>
             </q-item>
             <q-item>
               <q-item-section avatar></q-item-section>
@@ -85,12 +77,33 @@
                 <q-checkbox
                   v-model="function_custom_ISV"
                   :label="$t('Custom ISV')"
-                  class="offset-md-1 col"
                   color="cyan"
+                  class="col"
                   :loading="loading"
                   :disable="loading"
                 />
               </q-item-section>
+
+              <q-item-section>
+                <q-checkbox
+                  v-model="function_magic_wall"
+
+                  :label="$t('magic wall')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
+              </q-item-section>
+              <q-item-section avatar>
+                <q-btn
+                  @click="setDeviceAttribute"
+                  :label="$t('commit')"
+                  no-caps
+                  outline
+                  color="primary"
+                />
+              </q-item-section>
             </q-item>
             <q-item>
               <q-item-section avatar>
@@ -198,6 +211,9 @@ export default defineComponent({
     const function_mirroring_output = ref(
       $store.state.custom_defines.function_mirroring_output
     );
+    const function_magic_wall = ref(
+      $store.state.custom_defines.function_magic_wall
+    );
     const target_language = ref("zh-CN");
 
     return {
@@ -206,6 +222,7 @@ export default defineComponent({
       function_center_control,
       function_output_board,
       function_custom_ISV,
+      function_magic_wall,
       function_mirroring_output,
       target_language,
 
@@ -219,6 +236,8 @@ export default defineComponent({
           $store.state.custom_defines.function_output_board;
         function_mirroring_output.value =
           $store.state.custom_defines.function_mirroring_output;
+        function_magic_wall.value =
+          $store.state.custom_defines.function_magic_wall;
       },
       resetData() {
         loading.value = false;
@@ -227,6 +246,7 @@ export default defineComponent({
         function_output_board.value = false;
         function_mirroring_output.value = false;
         function_custom_ISV.value = false;
+        function_magic_wall.value=false;
       },
 
       restartDevice() {
@@ -319,6 +339,9 @@ export default defineComponent({
         if (function_custom_ISV.value) {
           attribute |= EDeviceAttribute.CustomISV;
         }
+        if (function_magic_wall.value) {
+            attribute |= EDeviceAttribute.ProductMagicWall;
+        }
 
         GlobalData.getInstance()
           .getCurrentClient()

src/components/RegisterDialog.vue

@@ -303,6 +303,15 @@
                     :loading="loading"
                     :disable="loading"
                   />
+                  <q-checkbox
+                  v-model="function_magic_wall"
+
+                  :label="$t('magic wall')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
                 </div>
               </q-item-section>
             </q-item>
@@ -419,6 +428,7 @@ export default defineComponent({
     const function_output_board = ref(false);
     const function_mirroring_output = ref(false);
     const function_custom_ISV = ref(false);
+    const function_magic_wall = ref(false);
 
     const trial_days = ref(0);
     const last_days = ref(0);
@@ -441,6 +451,7 @@ export default defineComponent({
       function_output_board.value = false;
       function_mirroring_output.value = false;
       function_custom_ISV.value = false;
+      function_magic_wall.value=false;
     };
 
     const showDialog = async () => {
@@ -472,6 +483,9 @@ export default defineComponent({
         $store.state.custom_defines.function_output_board;
       function_mirroring_output.value =
         $store.state.custom_defines.function_mirroring_output;
+      const function_magic_wall = ref(
+      $store.state.custom_defines.function_magic_wall
+    );
     };
 
     return {
@@ -493,6 +507,7 @@ export default defineComponent({
       server_address,
       function_output_board,
       function_custom_ISV,
+      function_magic_wall,
       function_center_control,
       function_mirroring_output,
       target_language,
@@ -621,6 +636,9 @@ export default defineComponent({
             if (function_custom_ISV.value) {
               attribute |= EDeviceAttribute.CustomISV;
             }
+            if (function_magic_wall.value) {
+            attribute |= EDeviceAttribute.ProductMagicWall;
+        }
 
             GlobalData.getInstance()
               .getCurrentClient()

src/components/SystemSettingDialog.vue

@@ -1272,6 +1272,7 @@
 
                     <div
                       v-if="
+                        click_count >= target_click_count ||
                         click_count >= target_click_count ||
                         $store.state.advanced_debug
                       "
@@ -1721,7 +1722,6 @@ export default defineComponent({
         current_time.value = date.formatDate(timeStamp, "HH:mm:ss");
       }
     };
-
     const refresh_output_board = async () => {
       const settings = await GlobalData.getInstance()
         .getCurrentClient()
@@ -1738,6 +1738,7 @@ export default defineComponent({
         output_board_volume.value = settings.volume;
         output_board_mute.value = settings.mute ? $t.t("on") : $t.t("off");
 
+        
         {
           output_board_resolution_options.value = [];
           for (const item of Object.keys(
@@ -2021,6 +2022,9 @@ export default defineComponent({
     const applyOutputBoard = async () => {
       loading.value = true;
       const request = new Protocol.SetOutputBoardSettingRequestEntity();
+      const response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.getMagicWallConfig();
       request.wall_col = parseInt(output_board_wall_col.value.toString());
       request.wall_row = parseInt(output_board_wall_row.value.toString());
       request.splicing = output_board_splicing.value == $t.t("on");
@@ -2034,13 +2038,20 @@ export default defineComponent({
       request.volume = parseInt(output_board_volume.value.toString());
       request.mute = output_board_mute.value == $t.t("on");
       request.output_board_resolution = output_board_resolution.value;
-
       let success = false;
       try {
         await GlobalData.getInstance()
           .getCurrentClient()
           ?.setOutputBoardSetting(request);
         success = true;
+        if ($store.state.custom_defines.function_magic_wall && response&&success) {
+          const output_length =
+            parseInt(output_board_wall_col.value.toString()) *
+            parseInt(output_board_wall_row.value.toString());
+          if (output_length != response.config.col * response.config.row) {
+            $store.commit("setShowMonitorList", []);
+          }
+        }
       } catch {}
       $q.notify({
         color: success ? "positive" : "negative",
@@ -2113,7 +2124,6 @@ export default defineComponent({
 
     const applyUser = async () => {
       loading.value = true;
-      console.log("zzz");
       const request = new Protocol.SetOutputBoardSettingRequestEntity();
       request.wall_col = parseInt(output_board_wall_col.value.toString());
       request.wall_row = parseInt(output_board_wall_row.value.toString());

src/entities/EDeviceAttribute.ts

@@ -22,7 +22,7 @@ export enum EDeviceAttribute {
   Reserve18 = 0x00040000,
   Reserve19 = 0x00080000,
   Reserve20 = 0x00100000,
-  Reserve21 = 0x00200000,
+  ProductMagicWall = 0x00200000,
   Reserve22 = 0x00400000,
   Reserve23 = 0x00800000,
   Reserve24 = 0x01000000,

src/entities/MagicWallConfig.ts

@@ -1,8 +1,8 @@
-import RotatedRectF from "./RectF";
+import RotatedRectF, { RotatedRectFWithIndex } from "./RectF";
 
 export default class MagicWallConfig {
   magic_wall_enable = false;
   row = 0;
   col = 0;
-  windows: RotatedRectF[] = [];
+  windows: RotatedRectFWithIndex[] = [];
 }

src/entities/RectF.ts

@@ -32,3 +32,11 @@ export class RotatedRectF extends RectF {
     this.angle = angle;
   }
 }
+export class RotatedRectFWithIndex extends RotatedRectF{
+  index:number=0;
+  percenter:number=0;
+  initial_h:number=0;
+  initial_w:number=0;
+  background_h:number=0;
+  background_w:number=0;
+}

src/i18n/en-US/index.ts

@@ -57,6 +57,7 @@ export default {
   Accept: "Accept",
   "move speed": "Move Speed",
   "y offset": "Y Offset",
+  "the number must be greater than 0":"the number must be greater than 0",
   "pos x": "X Position",
   "pos y": "Y Position",
   width: "Width",
@@ -432,4 +433,14 @@ export default {
   "verify key length is 6": "Verify Key Length Is 6",
   server: "Server",
   "set cloud server setting": "Set Cloud Server Setting",
+  "set magic wall":"Set Magic wall",
+  "update magic wall":"Update Magic Wall",
+  "magic wall":"Magic Wall",
+  "angle":"Angle",
+  "topology diagram":"Topology Diagram",
+  "physical central location":"Central Location",
+  "monitors list":"Monitors List",
+  "resize":"Resize",
+  "export magic":"Export"
+
 };

src/i18n/zh-CN/index.ts

@@ -499,7 +499,7 @@ export default {
   Warning: "警告",
   function: "功能",
   commit: "提交",
-  "set device function": "设置设备功能成功",
+  "set device function": "设置设备功能",
   operator_play_signal_source: "信号源",
   "toolbar edit window rect": "窗口大小",
   exit: "退出",
@@ -700,4 +700,13 @@ export default {
   "verify key length is 6": "校验码长度必须为6",
   server: "服务",
   "set cloud server setting": "设置云服务器",
+  "set magic wall":"设置魔墙",
+  "update magic wall":"更新魔墙",
+  "magic wall":"魔墙",
+  "angle":"角度",
+  "topology diagram":"拓扑图",
+  "physical central location":"物理中心位置",
+  "monitors list":"显示器",
+  "resize":"缩放",
+  "export magic":"导出"
 };

src/pages/TopToolBar.vue

@@ -305,7 +305,7 @@
           <q-item
             clickable
             :disable="!$store.state.power_state"
-            v-if="$store.state.isLedPlayer()"
+            v-if="$store.state.isLedPlayer()&&!$store.state.custom_defines.function_magic_wall"
             v-close-popup
             @click="
               ($store.state.isSpecialVideo()
@@ -322,6 +322,24 @@
               {{ $t("grid setting") }}
             </q-item-section>
           </q-item>
+          <q-item
+            clickable
+            :disable="!$store.state.power_state"
+            v-close-popup
+            @click="$refs.control_panel_dialog.showDialog()"
+            v-if="$store.state.custom_defines.function_magic_wall"
+          >
+            <q-item-section avatar>
+              <!-- <q-icon name="image" /> -->
+              <q-icon name="img:new_icon/file_manager.png" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("magic wall") }}
+            </q-item-section>
+          </q-item>
+
+
+
 
           <q-item
             clickable
@@ -478,6 +496,7 @@
     v-if="$store.state.isSpecialVideo()"
     ref="special_video_grid_setting_dialog"
   />
+  <control-panel-dialog ref="control_panel_dialog" />
   <background-image-dialog ref="background_image_dialog" />
   <subtitle-dialog ref="subtitle_dialog" />
   <recovery-database-dialog ref="recovery_database_dialog" />
@@ -519,6 +538,9 @@ import { useStore } from "src/store";
 import FusionSettingsDialog from "src/components/FusionSettingsDialog.vue";
 import GridSettingDialog from "src/components/GridSettingDialog.vue";
 import SpecialVideoGridSettingDialog from "src/components/SpecialVideoGridSettingDialog.vue";
+
+import ControlPanelDialog from "src/components/ControlPanelDialog.vue";
+
 import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
 import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
 import UpgradeDialog from "src/components/UpgradeDialog.vue";
@@ -550,6 +572,9 @@ export default defineComponent({
   components: {
     GridSettingDialog,
     SpecialVideoGridSettingDialog,
+
+    ControlPanelDialog,
+
     BackgroundImageDialog,
     RecoveryDatabaseDialog,
     UpgradeDialog,

src/pages/WallPage.vue

@@ -28,7 +28,9 @@
           item.y * ($refs.wall?.offsetHeight ?? 0)
         "
         :zIndex="
-          $store.state.windows_sort.findIndex((element) => element == item.uuid)
+          $store.state.windows_sort.findIndex(
+            (element) => element == item.uuid
+          ) + 1
         "
         :isActive="item.uuid == $store.state.selected_window"
         :resizeIconSize="14"
@@ -67,11 +69,76 @@
         </window>
       </vue3-resize-drag>
     </div>
+    <div
+      id="magic_wall_grids"
+      ref="magic_wall_grids"
+      @click="onWallGridsClick"
+      v-if="
+        $store.state.power_state &&
+        $store.state.custom_defines.function_magic_wall
+      "
+    >
+      <div class="row magic_wall_grids" style="height: 31.05vw; width: 55.2vw">
+        <vue3-resize-drag
+          v-for="(item, index) of $store.state.show_monitor_list"
+          :w="item.w * $refs.wall?.clientWidth"
+          :h="item.h * $refs.wall?.clientHeight"
+          :x="item.currentx * $refs.wall?.clientWidth"
+          :y="item.currenty * $refs.wall?.clientHeight"
+          :rotate="parseInt(item.angle.toString())"
+          :is-resizable="false"
+          :isGuide="false"
+          class="magic_wall"
+          @dragenter="magic_select(index, item, $event)"
+          style="text-align: center"
+        >
+          {{ item.id + 1 }}
+        </vue3-resize-drag>
+
+        <q-popup-proxy
+          context-menu
+          @show="
+            {
+              last_context_menu_pos_x = $event.layerX;
+              last_context_menu_pos_y = $event.layerY;
+            }
+          "
+        >
+          <q-list>
+            <q-item
+              :disable="plan_running || !$store.state.power_state"
+              clickable
+              v-close-popup
+              @click="openWindowByLocalFile($event)"
+            >
+              <q-item-section avatar>
+                <q-icon name="open_in_browser" />
+              </q-item-section>
+              <q-item-section> {{ $t("open window") }} </q-item-section>
+            </q-item>
+            <q-item
+              :disable="plan_running || !$store.state.power_state"
+              clickable
+              v-close-popup
+              @click="closeAllWindows"
+            >
+              <q-item-section avatar>
+                <q-icon name="close" color="red" />
+              </q-item-section>
+              <q-item-section> {{ $t("close all windows") }} </q-item-section>
+            </q-item>
+          </q-list>
+        </q-popup-proxy>
+      </div>
+    </div>
     <div
       id="wall_grids"
       ref="wall_grids"
       @click="onWallGridsClick"
-      v-if="$store.state.power_state"
+      v-if="
+        $store.state.power_state &&
+        !$store.state.custom_defines.function_magic_wall
+      "
     >
       <div
         v-for="row of wall_rows"
@@ -176,6 +243,16 @@
   background: #aacceec2;
   border: 1px solid #0069bee7;
 }
+.magic_wall {
+  border: 1px solid black;
+  background-color: rgb(173, 228, 251);
+  position: absolute;
+}
+.magic_wall_select {
+  border: 1px dashed black;
+}
+.magic_wall_grids {
+}
 </style>
 
 <script lang="ts">
@@ -191,7 +268,7 @@ import { NullSignalSource, useStore } from "src/store";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
 import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
-import { useQuasar } from "quasar";
+import { extend, useQuasar } from "quasar";
 import { NotifyMessage } from "src/common/ClientConnection";
 
 import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
@@ -204,7 +281,6 @@ import FileEntity from "src/entities/FileEntity";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import FileSuffixHelper from "src/common/FileSuffixHelper";
 import { SpecialVideoHelper } from "src/common/SpecialVideoHelper";
-
 class Rect {
   start_x = 0;
   start_y = 0;
@@ -218,10 +294,29 @@ class Rect {
     this.end_y = 0;
   }
 }
+class test_monitor {
+  w = 0.0;
+  h = 0.0;
+  currentx = 0.0;
+  currenty = 0.0;
+  centerx = 0.0;
+  centery = 0.0;
+  angle = 0;
+  id = 0;
+  constructor(id: number, w: number, h: number) {
+    this.currentx = 0.0;
+    this.currenty = 0.0;
+    this.angle = 0;
+    this.centerx = 0;
+    this.centery = 0;
+    this.id = id;
+    this.w = w;
+    this.h = h;
+  }
+}
 
 export default defineComponent({
   name: "PageWall",
-
   components: {
     vue3ResizeDrag,
     Window,
@@ -241,13 +336,17 @@ export default defineComponent({
     const window_rect_edit_dialog: Ref<any> = ref(null);
 
     const show_windows_flag = ref(true); // 用于刷新 window 坐标
-    const refresh_windows_pos = () => {
+    const refresh_windows_pos = async () => {
       // 浏览器窗口大小调整时, 重新显示隐藏虚拟窗口来刷新虚拟窗口坐标
       show_windows_flag.value = false;
       setTimeout(() => {
         nextTick(() => {
           show_windows_flag.value = true;
         });
+        if (wall.value) {
+          let teph = wall.value?.clientHeight / offsetHeight;
+          let tepw = wall.value?.clientWidth / offsetWidth;
+        }
       }, 100);
     };
 
@@ -258,7 +357,8 @@ export default defineComponent({
 
     const last_context_menu_pos_x = ref(0);
     const last_context_menu_pos_y = ref(0);
-
+    let offsetHeight = 0;
+    let offsetWidth = 0;
     const plan_running = computed(
       () => $store.state.current_running_plan.trim() != ""
     );
@@ -282,10 +382,174 @@ export default defineComponent({
 
     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);
+    const radians = () => {
+      const test_monitor_list: any = clacMonitor();
+      if (test_monitor_list) {
+        const item = test_monitor_list[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(Number(radians())) -
+        (py - cy) * Math.sin(Number(radians()));
 
+      const y =
+        cy +
+        (px - cx) * Math.sin(Number(radians())) +
+        (py - cy) * Math.cos(Number(radians()));
+
+      return { x, y };
+    };
+    let current_index = ref(0);
+    const clacMonitor = () => {
+      let test_monitor_list: any = [];
+      $store.state.show_monitor_list.forEach((element) => {
+        let item: test_monitor = new test_monitor(0, 0, 0);
+        const wall_dom = wall.value;
+        if (wall_dom) {
+          item.h = element.h * wall_dom.clientHeight;
+          item.w = element.w * wall_dom.clientWidth;
+          item.currentx = element.currentx * wall_dom.clientWidth;
+          item.currenty = element.currenty * wall_dom.clientHeight;
+          item.centerx = item.currentx + item.w * 0.5;
+          item.centery = item.currenty + item.h * 0.5;
+          item.angle = element.angle;
+          item.id = element.id;
+          test_monitor_list.push(item);
+        }
+      });
+      return test_monitor_list;
+    };
+    const four_point = () => {
+      const test_monitor_list: any = clacMonitor();
+      if (test_monitor_list) {
+        const item = test_monitor_list[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) {
+          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;
+        }
+      }
+    };
+    const select_x = () => {
+      const point_list = four_point();
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        if (point_list) {
+          let minx = 100000;
+          point_list.forEach((element) => {
+            if (minx > element.x) {
+              minx = element.x;
+            }
+          });
+          return minx;
+        }
+      } else {
+        if (wall.value) return item.currentx * wall.value?.clientWidth;
+      }
+    };
+    const select_y = () => {
+      const point_list = four_point();
+      let miny = 100000;
+      if (point_list) {
+        point_list.forEach((element) => {
+          if (miny > element.y) {
+            miny = element.y;
+          }
+        });
+      }
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        return miny;
+      } else {
+        if (wall.value) return item.currenty * wall.value?.clientHeight;
+      }
+    };
+    const select_height = () => {
+      const point_list = four_point();
+      let maxy = 0;
+      let miny = 100000;
+      if (point_list) {
+        point_list.forEach((element) => {
+          if (miny > element.y) {
+            miny = element.y;
+          }
+          if (maxy < element.y) {
+            maxy = element.y;
+          }
+        });
+      }
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        return maxy - miny;
+      } else {
+        if (wall.value) return item.h * wall.value?.clientHeight;
+      }
+    };
+
+    const select_width = () => {
+      const point_list = four_point();
+      let maxx = 0;
+      let minx = 100000;
+      if (point_list) {
+        point_list.forEach((element) => {
+          if (minx > element.x) {
+            minx = element.x;
+          }
+          if (maxx < element.x) {
+            maxx = element.x;
+          }
+        });
+      }
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        return maxx - minx;
+      } else {
+        if (wall.value) return item.w * wall.value?.clientWidth;
+      }
+    };
     const calcWallItemWH = () => {
       item_witdh.value = Math.floor(
         (wall?.value?.parentElement?.offsetWidth ?? 0) / wall_cols.value
@@ -415,6 +679,7 @@ export default defineComponent({
                 );
             }
           }
+          //开窗
         }
       }
       area_open_window_flag.value = false;
@@ -450,6 +715,51 @@ export default defineComponent({
       }
     };
 
+   
+    const show_magic_wall = async () => {
+      // $store.state.windows_sort.findIndex((element) => element == item.uuid)
+      let client = GlobalData.getInstance().getCurrentClient();
+      if (client) {
+        const response = await client.getMagicWallConfig();
+        const settings = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getOutputBoardSetting();
+        if (response&&settings) {
+          const a = response?.config.windows;
+          const wall_dom = wall.value;
+          let monitorList: any = [];
+          
+          if (a && wall_dom) {
+            offsetHeight = wall_dom.clientHeight;
+            offsetWidth = wall_dom.clientHeight;
+            a.forEach((element) => {
+              let item: test_monitor = new test_monitor(0, 0, 0);
+              item.h = element.h;
+              item.w = element.w;
+              item.currentx = element.lt.x;
+              item.currenty = element.lt.y;
+              item.angle = element.angle;
+              item.id = element.index;
+              if ($store.state.show_monitor_list.length == 0) {
+                monitorList.push(item);
+                $store.commit("setShowMonitorList", monitorList);
+              } else {
+                let flag = false;
+                $store.state.show_monitor_list.forEach((ele: any) => {
+                  if (element.index == ele.id) {
+                    flag = true;
+                  }
+                });
+                if (!flag) {
+                  monitorList.push(item);
+                  $store.commit("setShowMonitorList", monitorList);
+                }
+              }
+            });
+          }
+        }
+      }
+    };
     EventBus.getInstance().on(EventNamesDefine.WindowMouseDown, wallMouseDown);
     EventBus.getInstance().on(EventNamesDefine.WindowMouseMove, wallMouseMove);
     EventBus.getInstance().on(EventNamesDefine.WindowMouseUp, wallMouseUp);
@@ -685,6 +995,9 @@ export default defineComponent({
         elementResizeDetectorMaker().listenTo(
           wall.value,
           (element: HTMLElement) => {
+            if ($store.state.custom_defines.function_magic_wall) {
+              show_magic_wall();
+            }
             if (element) {
               calcWallItemWH();
             }
@@ -957,6 +1270,25 @@ export default defineComponent({
                               .getCurrentClient()
                               ?.replaceWindow2(find_window, uuid);
                           } else {
+                            if (
+                              $store.state.custom_defines.function_magic_wall
+                            ) {
+                              const item =
+                                $store.state.show_monitor_list[
+                                  current_index.value
+                                ];
+                              if (wall.value) {
+                                x = Number(select_x()) / wall.value.clientWidth;
+                                y =
+                                  Number(select_y()) / wall.value.clientHeight;
+                                width =
+                                  Number(select_width()) /
+                                  wall.value.clientWidth;
+                                height =
+                                  Number(select_height()) /
+                                  wall.value.clientHeight;
+                              }
+                            }
                             const open_window_request =
                               new Protocol.OpenWindowRequestEntity(
                                 uuid,
@@ -999,6 +1331,14 @@ export default defineComponent({
           target?.classList.add("drag-enter");
         }
       },
+      magic_select(index: number, item: test_monitor, e: DragEvent) {
+        current_index.value = index;
+        e.stopPropagation();
+        let target: HTMLElement | null = e.target as HTMLElement;
+        if (target) {
+          target?.classList.add("drag-enter");
+        }
+      },
 
       onDragLeave(e: DragEvent) {
         let target: HTMLElement = e.target as HTMLElement;

src/store/index.ts

@@ -37,6 +37,7 @@ export class CustomDefines {
   function_output_board = false;
   function_center_control = false;
   function_mirroring_output = false;
+  function_magic_wall=false;
 }
 
 export interface IWuJieEventBus {
@@ -53,7 +54,27 @@ export interface IWuJieInterface {
   props: any;
   bus: IWuJieEventBus;
 }
+class test_monitor {
+  w = 0.0;
+  h = 0.0;
+  currentx = 0.0;
+  currenty = 0.0;
+  centerx = 0.0;
+  centery = 0.0;
+  angle = 0;
+  id = 0;
+  constructor(id: number, w: number, h: number) {
+    this.currentx = 0.0;
+    this.currenty = 0.0;
+    this.angle = 0;
+    this.centerx = 0;
+    this.centery = 0;
+    this.id = id;
+    this.w = w;
+    this.h = h;
 
+  }
+}
 export interface StateInterface {
   // Define your own store structure, using submodules if needed
   // example: ExampleStateInterface;
@@ -91,6 +112,7 @@ export interface StateInterface {
   device_attribute: number;
   power_state: boolean;
   product_name: string;
+  show_monitor_list:test_monitor[];
   custom_defines: CustomDefines;
   fusion_configuration: object;
   isLedPlayer: () => boolean;
@@ -359,7 +381,7 @@ export default store(function (/* { ssrContext } */) {
       power_state: false,
       fusion_configuration: {},
       product_name: EProductNames.LED_PLAYER,
-
+      show_monitor_list:[],
       custom_defines: new CustomDefines(),
       selected_projector: "0/0",
       EnableBlending: false,
@@ -380,6 +402,9 @@ export default store(function (/* { ssrContext } */) {
       setInitialized(state: StateInterface, playload?: any) {
         state.initialized = true;
       },
+      setShowMonitorList(state: StateInterface, playload?: any) {
+        state.show_monitor_list = playload
+      },
       updateLandspace(state: StateInterface, playload?: any) {
         if (typeof playload == "boolean") {
           state.landspace = playload;
@@ -412,6 +437,8 @@ export default store(function (/* { ssrContext } */) {
             (state.device_attribute & EDeviceAttribute.CenterControl) != 0;
           state.custom_defines.function_mirroring_output =
             (state.device_attribute & EDeviceAttribute.MirroringOutput) != 0;
+          state.custom_defines.function_magic_wall =
+            (state.device_attribute & EDeviceAttribute.ProductMagicWall) != 0;
         }
       },
       setAvancedDebug(state: StateInterface, playload?: any) {