From 1156d2f4c733334e578f9ea69fe96557064d66c9 Mon Sep 17 00:00:00 2001 From: fangxiang Date: Fri, 27 Aug 2021 17:15:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=8C=E5=87=BB=E9=93=BA?= =?UTF-8?q?=E6=BB=A1=E5=AE=AB=E6=A0=BC=E7=9A=84=E5=8A=9F=E8=83=BD=E5=92=8C?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=BD=91=E6=A0=BC=E5=A4=96=E9=83=A8=E5=8F=96?= =?UTF-8?q?=E6=B6=88=E7=AA=97=E5=8F=A3=E9=80=89=E4=B8=AD=E7=9A=84=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 3 +++ src/common/ClientConnection.ts | 11 ++++++++ src/common/EventBus.ts | 1 + src/entities/WSProtocol.ts | 4 +++ src/pages/WallPage.vue | 46 ++++++++++++++++++++++++++-------- 5 files changed, 54 insertions(+), 11 deletions(-) diff --git a/src/App.vue b/src/App.vue index 83c8896..55af366 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,6 +19,9 @@ export default defineComponent({ window.onresize = (evt: any) => EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt); + window.document.body.onclick = (evt: any) => + EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt); + document.body.classList.add("overflow-hidden"); return {}; }, diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts index d73e440..ace81df 100644 --- a/src/common/ClientConnection.ts +++ b/src/common/ClientConnection.ts @@ -553,6 +553,17 @@ export default class ClientConnection { ); } + public windowFitGrid(window_id: number) { + this.ws?.send( + JSON.stringify( + new NormalWindowRequestEntity( + Protocol.Commands.kWindowFitGrid, + window_id + ) + ) + ); + } + public restartDevice() { this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity())); } diff --git a/src/common/EventBus.ts b/src/common/EventBus.ts index 0d572ee..9b8e099 100644 --- a/src/common/EventBus.ts +++ b/src/common/EventBus.ts @@ -21,6 +21,7 @@ export namespace EventNamesDefine { export const UnSelectAllWindows = "onUnSelectAllWindows"; export const UnFocusAllWindows = "onUnFocusAllWindows"; export const WindowResize = "onWindowResize"; + export const DocumentBodyClick = "onDocumentBodyClick"; export const ResponseMessage = "onResponseData"; export const NotifyMessage = "onNotifyMessage"; export const WebSocketClose = "onWebSocketClose"; diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts index 13cc3b5..473017f 100644 --- a/src/entities/WSProtocol.ts +++ b/src/entities/WSProtocol.ts @@ -75,6 +75,10 @@ export namespace Protocol { return Commands.PROTOCOL_PREFIX + "FocuseWindow"; } + public static get kWindowFitGrid() { + return Commands.PROTOCOL_PREFIX + "WindowFitGrid"; + } + public static get kRpcAddSignalSourceGroup() { return Commands.PROTOCOL_PREFIX + "RpcAddSignalSourceGroup"; } diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue index e1fb0ed..1464792 100644 --- a/src/pages/WallPage.vue +++ b/src/pages/WallPage.vue @@ -15,6 +15,7 @@ @close_other_windows="closeOtherWindows" @close_all_windows="closeAllWindows" @window_fouse_in="windowFocusIn" + @dblclick="(evt) => windowDBClick(item.window_id)" :ref="'window_' + item.window_id" :id="'window_' + item.window_id" v-for="(item, index) in windows" @@ -134,17 +135,15 @@ export default defineComponent({ const wall_width_scaler = ref(0); const wall_height_scaler = ref(0); - const calcWallVWScaler = () => { + const calcWallVWScaler = (wall_width: number, wall_height: number) => { if (wall.value && wall.value.parentElement) { + console.log($store.state.device_screen_width); + console.log($store.state.device_screen_height); + console.log(wall_width); + console.log(wall_height); wall_height_scaler.value = - $store.state.device_screen_height / - (item_height.value * wall_rows.value); - wall_width_scaler.value = - $store.state.device_screen_width / - wall.value.parentElement.offsetWidth; - - wall_height_scaler.value += 0.1; - wall_width_scaler.value += 0.05; + $store.state.device_screen_height / wall_height; + wall_width_scaler.value = $store.state.device_screen_width / wall_width; } }; @@ -161,6 +160,28 @@ export default defineComponent({ } }; + EventBus.getInstance().on( + EventNamesDefine.DocumentBodyClick, + (evt: PointerEvent) => { + if (wall.value) { + let flag = false; + { + let item: HTMLElement | null = evt.srcElement as HTMLElement; + while (item) { + if (item == wall.value) { + flag = true; + break; + } + item = item.parentElement; + } + } + if (!flag) { + EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows); + } + } + } + ); + EventBus.getInstance().on( EventNamesDefine.NotifyMessage, (notify: NotifyMessage) => { @@ -268,7 +289,7 @@ export default defineComponent({ (element: HTMLElement) => { if (element) { calcWallItemWH(); - calcWallVWScaler(); + calcWallVWScaler(element.offsetWidth, element.offsetHeight); } } ); @@ -402,7 +423,7 @@ export default defineComponent({ window, property_name: "width", value: Math.max( - window.width + offset_width * wall_height_scaler.value, + window.width + offset_width * wall_width_scaler.value, 32 ), }, @@ -448,6 +469,9 @@ export default defineComponent({ } } }, + windowDBClick(window_id: number) { + GlobalData.getInstance().getCurrentClient()?.windowFitGrid(window_id); + }, closeWindow(window_id: number) { GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id); },