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); },