lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

适配新的窗口坐标代码

This commit is contained in:
fangxiang 2021-12-15 16:42:19 +08:00
parent 3344512a77
commit c13dfc7acb
3 changed files with 85 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/RemoteDataExangeProcesser.ts
View File

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

38
src/entities/WSProtocol.ts
View File

@ -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;
}
}
}

57
src/pages/WallPage.vue
View File

@ -6,7 +6,7 @@
@dragleave="onDragLeave"
@dragover="onDragOver"
@drop="onDrop"
style="background-color:#bce0f0;"
style="background-color: #bce0f0"
>
<div id="windows" style="position: absolute">
<window
@ -26,10 +26,20 @@
:signal_source_table_uuid="item.signal_source_table_uuid"
:window="item"
:style="{
top: item.y / wall_height_scaler + 'px',
left: item.x / wall_width_scaler + 'px',
width: item.width / wall_width_scaler + 'px',
height: item.height / wall_height_scaler + 'px',
top:
(item.y * $store.state.device_screen_height) / wall_height_scaler +
'px',
left:
(item.x * $store.state.device_screen_width) / wall_width_scaler +
'px',
width:
(item.width * $store.state.device_screen_width) /
wall_width_scaler +
'px',
height:
(item.height * $store.state.device_screen_height) /
wall_height_scaler +
'px',
}"
/>
</div>
@ -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
),
},
]);