diff --git a/src/common/RemoteDataExangeProcesser.ts b/src/common/RemoteDataExangeProcesser.ts index 4502121..35d2037 100644 --- a/src/common/RemoteDataExangeProcesser.ts +++ b/src/common/RemoteDataExangeProcesser.ts @@ -49,6 +49,14 @@ export default class RemoteDataExangeProcesser { "setWallRow", global_data.applicationConfig.wall_row ); + $store.commit( + "setDeviceScreenWidth", + global_data.applicationConfig.screen_width + ); + $store.commit( + "setDeviceScreenHeight", + global_data.applicationConfig.screen_height + ); } } } diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts index 2717823..ed0da97 100644 --- a/src/entities/WSProtocol.ts +++ b/src/entities/WSProtocol.ts @@ -187,6 +187,14 @@ export namespace Protocol { return Commands.PROTOCOL_PREFIX + "RpcSetSubtitle"; } + public static get kRpcGetScreenSize() { + return Commands.PROTOCOL_PREFIX + "RpcGetScreenSize"; + } + + public static get kScreenSizeChanged() { + return Commands.PROTOCOL_PREFIX + "ScreenSizeChanged"; + } + static _all_commands = new Set([ Commands.kUnKnowCommand, Commands.kSearchDevice, @@ -228,6 +236,8 @@ export namespace Protocol { Commands.kSetApplicationConfig, Commands.kRpcGetSubtitle, Commands.kRpcSetSubtitle, + Commands.kRpcGetScreenSize, + Commands.kScreenSizeChanged, ]); public static get AllCommands() { @@ -1076,4 +1086,32 @@ export namespace Protocol { this.command = Protocol.Commands.kRpcSetSubtitle; } } + + export class GetScreenSizeRequestEntity extends Protocol.PacketEntity { + timestamp = new Date().getMilliseconds(); + + constructor(rcp_id?: number) { + super(); + this.rpc_id = rcp_id ?? 0; + this.command = Protocol.Commands.kRpcGetScreenSize; + } + } + + export class GetScreenSizeResponseEntity extends Protocol.PacketEntity { + width: number = 0; + height: number = 0; + constructor() { + super(); + this.command = Protocol.Commands.kRpcGetScreenSize; + } + } + + export class ScreenSizeChangedNotifyEntity extends PacketEntity { + width: number = 0; + height: number = 0; + constructor() { + super(); + this.command = Commands.kScreenSizeChanged; + } + } } diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue index 0129a66..e678382 100644 --- a/src/pages/WallPage.vue +++ b/src/pages/WallPage.vue @@ -6,7 +6,7 @@ @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop" - style="background-color:#bce0f0;" + style="background-color: #bce0f0" >
@@ -302,9 +312,6 @@ export default defineComponent({ item_height, wall_width_scaler, wall_height_scaler, - loga(a: any) { - console.log(a); - }, onDrop(e: DragEvent) { e.preventDefault(); let target = e.target as any; @@ -329,10 +336,14 @@ export default defineComponent({ ?.openWindow( new Protocol.OpenWindowRequestEntity( signal_source.uuid, - dom.offsetLeft * wall_width_scaler.value, - dom.offsetTop * wall_height_scaler.value, - dom.offsetWidth * wall_width_scaler.value, - dom.offsetHeight * wall_height_scaler.value + (dom.offsetLeft * wall_width_scaler.value) / + $store.state.device_screen_width, + (dom.offsetTop * wall_height_scaler.value) / + $store.state.device_screen_height, + (dom.offsetWidth * wall_width_scaler.value) / + $store.state.device_screen_width, + (dom.offsetHeight * wall_height_scaler.value) / + $store.state.device_screen_height ) ); } else if (dom.classList.contains("window_flag")) { @@ -409,27 +420,37 @@ export default defineComponent({ { window, property_name: "x", - value: window.x + offset_x * wall_width_scaler.value, + value: + window.x + + (offset_x * wall_width_scaler.value) / + $store.state.device_screen_width, }, { window, property_name: "y", - value: window.y + offset_y * wall_height_scaler.value, + value: + window.y + + (offset_y * wall_height_scaler.value) / + $store.state.device_screen_height, }, { window, property_name: "width", value: Math.max( - window.width + offset_width * wall_width_scaler.value, - 32 + window.width + + (offset_width * wall_width_scaler.value) / + $store.state.device_screen_width, + 32 / $store.state.device_screen_width ), }, { window, property_name: "height", value: Math.max( - window.height + offset_height * wall_height_scaler.value, - 32 + window.height + + (offset_height * wall_height_scaler.value) / + $store.state.device_screen_height, + 32 / $store.state.device_screen_height ), }, ]);