添加双击铺满宫格的功能和点击网格外部取消窗口选中的功能
This commit is contained in:
parent
964571b556
commit
1156d2f4c7
|
@ -19,6 +19,9 @@ export default defineComponent({
|
||||||
window.onresize = (evt: any) =>
|
window.onresize = (evt: any) =>
|
||||||
EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
|
EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
|
||||||
|
|
||||||
|
window.document.body.onclick = (evt: any) =>
|
||||||
|
EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
|
||||||
|
|
||||||
document.body.classList.add("overflow-hidden");
|
document.body.classList.add("overflow-hidden");
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
|
|
|
@ -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() {
|
public restartDevice() {
|
||||||
this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
|
this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,6 +21,7 @@ export namespace EventNamesDefine {
|
||||||
export const UnSelectAllWindows = "onUnSelectAllWindows";
|
export const UnSelectAllWindows = "onUnSelectAllWindows";
|
||||||
export const UnFocusAllWindows = "onUnFocusAllWindows";
|
export const UnFocusAllWindows = "onUnFocusAllWindows";
|
||||||
export const WindowResize = "onWindowResize";
|
export const WindowResize = "onWindowResize";
|
||||||
|
export const DocumentBodyClick = "onDocumentBodyClick";
|
||||||
export const ResponseMessage = "onResponseData";
|
export const ResponseMessage = "onResponseData";
|
||||||
export const NotifyMessage = "onNotifyMessage";
|
export const NotifyMessage = "onNotifyMessage";
|
||||||
export const WebSocketClose = "onWebSocketClose";
|
export const WebSocketClose = "onWebSocketClose";
|
||||||
|
|
|
@ -75,6 +75,10 @@ export namespace Protocol {
|
||||||
return Commands.PROTOCOL_PREFIX + "FocuseWindow";
|
return Commands.PROTOCOL_PREFIX + "FocuseWindow";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static get kWindowFitGrid() {
|
||||||
|
return Commands.PROTOCOL_PREFIX + "WindowFitGrid";
|
||||||
|
}
|
||||||
|
|
||||||
public static get kRpcAddSignalSourceGroup() {
|
public static get kRpcAddSignalSourceGroup() {
|
||||||
return Commands.PROTOCOL_PREFIX + "RpcAddSignalSourceGroup";
|
return Commands.PROTOCOL_PREFIX + "RpcAddSignalSourceGroup";
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
@close_other_windows="closeOtherWindows"
|
@close_other_windows="closeOtherWindows"
|
||||||
@close_all_windows="closeAllWindows"
|
@close_all_windows="closeAllWindows"
|
||||||
@window_fouse_in="windowFocusIn"
|
@window_fouse_in="windowFocusIn"
|
||||||
|
@dblclick="(evt) => windowDBClick(item.window_id)"
|
||||||
:ref="'window_' + item.window_id"
|
:ref="'window_' + item.window_id"
|
||||||
:id="'window_' + item.window_id"
|
:id="'window_' + item.window_id"
|
||||||
v-for="(item, index) in windows"
|
v-for="(item, index) in windows"
|
||||||
|
@ -134,17 +135,15 @@ export default defineComponent({
|
||||||
const wall_width_scaler = ref(0);
|
const wall_width_scaler = ref(0);
|
||||||
const wall_height_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) {
|
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 =
|
wall_height_scaler.value =
|
||||||
$store.state.device_screen_height /
|
$store.state.device_screen_height / wall_height;
|
||||||
(item_height.value * wall_rows.value);
|
wall_width_scaler.value = $store.state.device_screen_width / wall_width;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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(
|
EventBus.getInstance().on(
|
||||||
EventNamesDefine.NotifyMessage,
|
EventNamesDefine.NotifyMessage,
|
||||||
(notify: NotifyMessage) => {
|
(notify: NotifyMessage) => {
|
||||||
|
@ -268,7 +289,7 @@ export default defineComponent({
|
||||||
(element: HTMLElement) => {
|
(element: HTMLElement) => {
|
||||||
if (element) {
|
if (element) {
|
||||||
calcWallItemWH();
|
calcWallItemWH();
|
||||||
calcWallVWScaler();
|
calcWallVWScaler(element.offsetWidth, element.offsetHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -402,7 +423,7 @@ export default defineComponent({
|
||||||
window,
|
window,
|
||||||
property_name: "width",
|
property_name: "width",
|
||||||
value: Math.max(
|
value: Math.max(
|
||||||
window.width + offset_width * wall_height_scaler.value,
|
window.width + offset_width * wall_width_scaler.value,
|
||||||
32
|
32
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -448,6 +469,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
windowDBClick(window_id: number) {
|
||||||
|
GlobalData.getInstance().getCurrentClient()?.windowFitGrid(window_id);
|
||||||
|
},
|
||||||
closeWindow(window_id: number) {
|
closeWindow(window_id: number) {
|
||||||
GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
|
GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue