窗口按实际顺序显示

This commit is contained in:
fangxiang 2022-02-10 15:51:48 +08:00
parent 129ece6bc0
commit 0b44aec804
10 changed files with 254 additions and 103 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "media_player_client", "name": "media_player_client",
"version": "1.2.0", "version": "1.2.1",
"description": "A Quasar Framework app", "description": "A Quasar Framework app",
"productName": "MediaPlayerClient", "productName": "MediaPlayerClient",
"author": "fangxiang <fangxiang@cloudview.work>", "author": "fangxiang <fangxiang@cloudview.work>",

View File

@ -506,10 +506,7 @@ export default class ClientConnection {
public focusIn(window_id: number) { public focusIn(window_id: number) {
this.ws?.send( this.ws?.send(
JSON.stringify( JSON.stringify(
new NormalWindowRequestEntity( new NormalWindowRequestEntity(Protocol.Commands.kFocusWindow, window_id)
Protocol.Commands.kFocuseWindow,
window_id
)
) )
); );
} }

View File

@ -19,7 +19,6 @@ export default class EventBus extends EventEmitter {
export namespace EventNamesDefine { export namespace EventNamesDefine {
export const UnKnow = "onUnKnow"; export const UnKnow = "onUnKnow";
export const UnSelectAllWindows = "onUnSelectAllWindows"; export const UnSelectAllWindows = "onUnSelectAllWindows";
export const UnFocusAllWindows = "onUnFocusAllWindows";
export const WindowResize = "onWindowResize"; export const WindowResize = "onWindowResize";
export const WindowMouseDown = "onWindowMouseDown"; export const WindowMouseDown = "onWindowMouseDown";
export const WindowMouseMove = "onWindowMouseMove"; export const WindowMouseMove = "onWindowMouseMove";

View File

@ -1,16 +1,15 @@
<template> <template>
<div <div
class="window_class window_flag" class="window_class window_flag"
:class=" :class="selected ? 'window_selected' : 'window_normal'"
(selected ? 'window_selected' : 'window_normal') +
' ' +
(focused ? 'top' : '')
"
@click="onClick" @click="onClick"
@mousedown="onMouseDown" @mousedown="onMouseDown"
@mousemove="onMouseMove" @mousemove="onMouseMove"
@mouseleave="onMouseLeave" @mouseleave="onMouseLeave"
@mouseup="onMouseUp" @mouseup="onMouseUp"
:style="{
background: $props.window.client_color,
}"
> >
<q-popup-proxy context-menu> <q-popup-proxy context-menu>
<q-list> <q-list>
@ -405,18 +404,12 @@ export default defineComponent({
}); });
let selected = ref(false); let selected = ref(false);
let focused = ref(false);
let can_move = ref(true); let can_move = ref(true);
let can_resize = ref(true); let can_resize = ref(true);
let move_flag = false; let move_flag = false;
const onUnSelectAllWindows = () => { const onUnSelectAllWindows = () => {
selected.value = false; selected.value = false;
focused.value = false;
};
const onUnFocusAllWindows = () => {
focused.value = false;
}; };
EventBus.getInstance().on( EventBus.getInstance().on(
@ -424,11 +417,6 @@ export default defineComponent({
onUnSelectAllWindows onUnSelectAllWindows
); );
EventBus.getInstance().on(
EventNamesDefine.UnFocusAllWindows,
onUnFocusAllWindows
);
onUnmounted(() => { onUnmounted(() => {
EventBus.getInstance().removeListener( EventBus.getInstance().removeListener(
EventNamesDefine.UnSelectAllWindows, EventNamesDefine.UnSelectAllWindows,
@ -436,20 +424,6 @@ export default defineComponent({
); );
}); });
watch(
() => props.window.focus,
(newValue, oldValue) => {
if (newValue) {
let old = selected.value;
if (newValue.focus) {
EventBus.getInstance().emit(EventNamesDefine.UnFocusAllWindows);
}
focused.value = newValue.focus;
selected.value = old;
}
}
);
let mouse_down_flag = false; let mouse_down_flag = false;
let mouse_last_pos_x = 0; let mouse_last_pos_x = 0;
let mouse_last_pos_y = 0; let mouse_last_pos_y = 0;
@ -467,7 +441,6 @@ export default defineComponent({
return { return {
signal_source, signal_source,
selected, selected,
focused,
can_move, can_move,
can_resize, can_resize,
flags, flags,
@ -475,7 +448,7 @@ export default defineComponent({
is_clock_window, is_clock_window,
calc_is_audio_player_window, calc_is_audio_player_window,
onClick(evt: PointerEvent) { onClick(evt: MouseEvent) {
if (ctrl_press_flag) { if (ctrl_press_flag) {
ctrl_press_flag = false; ctrl_press_flag = false;
return; return;
@ -485,7 +458,6 @@ export default defineComponent({
if (selected.value != true) { if (selected.value != true) {
EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows); EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
selected.value = true; selected.value = true;
focused.value = true;
emit("window_fouse_in", props.window.window_id); emit("window_fouse_in", props.window.window_id);
$store.commit("setSelectedWindow", props.window.uuid); $store.commit("setSelectedWindow", props.window.uuid);
} }
@ -591,9 +563,9 @@ export default defineComponent({
cleanMouseDownFlag(); cleanMouseDownFlag();
} }
if (!focused) { // if (!focused) {
emit("window_fouse_in", props.window.window_id); // emit("window_fouse_in", props.window.window_id);
} // }
}, },
getItemIcon(item_type: string) { getItemIcon(item_type: string) {

View File

@ -44,4 +44,6 @@ export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
polling_title: string = ""; polling_title: string = "";
/** 轮询时的属性,不轮询时无效 */ /** 轮询时的属性,不轮询时无效 */
polling_window_type: string = "EWindowType::Normal"; polling_window_type: string = "EWindowType::Normal";
client_color: string = "";
} }

View File

@ -72,8 +72,12 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "WindowOtherStateChanged"; return Commands.PROTOCOL_PREFIX + "WindowOtherStateChanged";
} }
public static get kFocuseWindow() { public static get kFocusWindow() {
return Commands.PROTOCOL_PREFIX + "FocuseWindow"; return Commands.PROTOCOL_PREFIX + "FocusWindow";
}
public static get kLowerWindow() {
return Commands.PROTOCOL_PREFIX + "LowerWindow";
} }
public static get kWindowFitGrid() { public static get kWindowFitGrid() {
@ -287,6 +291,8 @@ export namespace Protocol {
Commands.kResizeWindow, Commands.kResizeWindow,
Commands.kOpenWindow, Commands.kOpenWindow,
Commands.kCloseWindow, Commands.kCloseWindow,
Commands.kFocusWindow,
Commands.kLowerWindow,
Commands.kWindowOtherStateChanged, Commands.kWindowOtherStateChanged,
Commands.kRpcAddSignalSourceGroup, Commands.kRpcAddSignalSourceGroup,
Commands.kRpcDeleteSignalSourceGroup, Commands.kRpcDeleteSignalSourceGroup,
@ -1572,4 +1578,21 @@ export namespace Protocol {
this.command = Commands.kPollingStateChanged; this.command = Commands.kPollingStateChanged;
} }
} }
export class FocusWindowNotifyEntity extends PacketEntity {
new_window_id: number = 0;
old_window_id: number = 0;
constructor() {
super();
this.command = Commands.kFocusWindow;
}
}
export class LowerWindowNotifyEntity extends PacketEntity {
window_id: number = 0;
constructor() {
super();
this.command = Commands.kLowerWindow;
}
}
} }

View File

@ -3,7 +3,6 @@ import { Protocol } from "./WSProtocol";
export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketEntity { export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketEntity {
window_id: number = 0; window_id: number = 0;
playing = false; playing = false;
focus = false;
muted = false; muted = false;
volume = 80; volume = 80;
polling = false; polling = false;

View File

@ -9,7 +9,6 @@
style="background-color: #bce0f0" style="background-color: #bce0f0"
> >
<div id="windows" style="position: absolute"> <div id="windows" style="position: absolute">
<div v-for="(item, index) in windows" :key="index">
<window <window
@reset_geometry_offset="resetGeometryOffset" @reset_geometry_offset="resetGeometryOffset"
@commit_geometry="commitGeometry" @commit_geometry="commitGeometry"
@ -23,6 +22,8 @@
@start_polling="start_polling" @start_polling="start_polling"
@stop_polling="stop_polling" @stop_polling="stop_polling"
@polling_setting="polling_setting" @polling_setting="polling_setting"
v-for="(item, index) in windows"
:key="index"
:ref="'window_' + item.window_id" :ref="'window_' + item.window_id"
:id="'window_' + item.window_id" :id="'window_' + item.window_id"
:uuid="item.uuid" :uuid="item.uuid"
@ -33,8 +34,7 @@
:window="item" :window="item"
:style="{ :style="{
top: top:
(item.y * $store.state.device_screen_height) / (item.y * $store.state.device_screen_height) / wall_height_scaler +
wall_height_scaler +
'px', 'px',
left: left:
(item.x * $store.state.device_screen_width) / wall_width_scaler + (item.x * $store.state.device_screen_width) / wall_width_scaler +
@ -47,9 +47,12 @@
(item.height * $store.state.device_screen_height) / (item.height * $store.state.device_screen_height) /
wall_height_scaler + wall_height_scaler +
'px', 'px',
'z-index': $store.state.windows_sort.findIndex(
(element) => element == item.uuid
),
}" }"
/> >
</div> </window>
</div> </div>
<div ref="wall_grids" @click="onWallGridsClick"> <div ref="wall_grids" @click="onWallGridsClick">
<div <div
@ -446,18 +449,6 @@ export default defineComponent({
notify.data notify.data
) as WindowOtherStateChangeNotifyEntity; ) as WindowOtherStateChangeNotifyEntity;
if (temp && temp.window_id) { if (temp && temp.window_id) {
if (temp.focus) {
for (const window of $store.state.windows) {
if (window) {
$store.commit("setWindowProperty", {
window,
property_name: "focus",
value: false,
});
}
}
}
const window = $store.state.windows.find( const window = $store.state.windows.find(
(item) => item.window_id == temp.window_id (item) => item.window_id == temp.window_id
); );
@ -468,11 +459,6 @@ export default defineComponent({
property_name: "playing", property_name: "playing",
value: temp.playing, value: temp.playing,
}, },
{
window,
property_name: "focus",
value: temp.focus,
},
{ {
window, window,
property_name: "muted", property_name: "muted",
@ -508,6 +494,43 @@ export default defineComponent({
} }
} }
break; break;
case Protocol.Commands.kFocusWindow:
{
const temp = JSON.parse(
notify.data
) as Protocol.FocusWindowNotifyEntity;
if (temp) {
for (const window of $store.state.windows) {
if (window && window.window_id != temp.new_window_id) {
$store.commit("setWindowProperty", {
window,
property_name: "focus",
value: false,
});
}
}
const window = $store.state.windows.find(
(item) => item.window_id == temp.new_window_id
);
$store.commit("setWindowProperty", {
window,
property_name: "focus",
value: true,
});
$store.commit("topWindow", temp.new_window_id);
}
}
break;
case Protocol.Commands.kLowerWindow:
{
const temp = JSON.parse(
notify.data
) as Protocol.LowerWindowNotifyEntity;
if (temp) {
$store.commit("lowerWindow", temp.window_id);
}
}
break;
case Protocol.Commands.kCurrentRunningPlanStateChanged: case Protocol.Commands.kCurrentRunningPlanStateChanged:
{ {
const temp = JSON.parse( const temp = JSON.parse(

View File

@ -38,6 +38,7 @@ export interface StateInterface {
device_screen_width: number; device_screen_width: number;
device_screen_height: number; device_screen_height: number;
windows: WindowOpenNotifyEntity[]; windows: WindowOpenNotifyEntity[];
windows_sort: string[];
device_ip_address: string; device_ip_address: string;
power_on_plan: string; power_on_plan: string;
fan_temp: number; fan_temp: number;
@ -251,6 +252,8 @@ class _TreeHelper {
export const storeKey: InjectionKey<VuexStore<StateInterface>> = export const storeKey: InjectionKey<VuexStore<StateInterface>> =
Symbol("vuex-key"); Symbol("vuex-key");
import window_color_list from "./window_color_list.js";
export default store(function (/* { ssrContext } */) { export default store(function (/* { ssrContext } */) {
const Store = createStore<StateInterface>({ const Store = createStore<StateInterface>({
modules: { modules: {
@ -267,6 +270,7 @@ export default store(function (/* { ssrContext } */) {
device_screen_width: 1920, device_screen_width: 1920,
device_screen_height: 1080, device_screen_height: 1080,
windows: [], windows: [],
windows_sort: [],
device_ip_address: "localhost", device_ip_address: "localhost",
power_on_plan: "", power_on_plan: "",
fan_temp: 0, fan_temp: 0,
@ -303,17 +307,74 @@ export default store(function (/* { ssrContext } */) {
window[property_name] = value; window[property_name] = value;
} }
}, },
setWindowClientProperty(state: StateInterface, playload?: any) {
const window = playload.window;
const property_name = playload.property_name;
const value = playload.value;
if (window && property_name) {
window.client_propertys[property_name] = value;
}
},
setWindows(state: StateInterface, playload?: WindowOpenNotifyEntity[]) { setWindows(state: StateInterface, playload?: WindowOpenNotifyEntity[]) {
if (playload) { if (playload) {
state.windows = playload; state.windows = playload;
state.windows_sort = [];
for (const item of state.windows) {
state.windows_sort.push(item.uuid);
}
for (const window of state.windows) {
if (window) {
window.client_color = window_color_list.splice(
Math.round(Math.random() * window_color_list.length),
1
)[0];
}
}
} }
}, },
clearWindows(state: StateInterface, playload?: any) { clearWindows(state: StateInterface, playload?: any) {
state.windows = []; state.windows = [];
state.windows_sort = [];
}, },
pushWindow(state: StateInterface, playload?: WindowOpenNotifyEntity) { pushWindow(state: StateInterface, playload?: WindowOpenNotifyEntity) {
if (playload) { if (playload) {
playload.client_color = window_color_list.splice(
Math.round(Math.random() * window_color_list.length),
1
)[0];
state.windows.push(playload); state.windows.push(playload);
state.windows_sort.push(playload.uuid);
}
},
topWindow(state: StateInterface, playload?: number) {
const window = state.windows.find(
(element) => element && element.window_id == playload
);
if (window) {
if (window) {
const index = state.windows_sort.findIndex(
(element) => element && element == window.uuid
);
if (index >= 0) {
state.windows_sort.splice(index, 1);
state.windows_sort.push(window.uuid);
}
}
}
},
lowerWindow(state: StateInterface, playload?: number) {
const window = state.windows.find(
(element) => element && element.window_id == playload
);
if (window) {
const index = state.windows_sort.findIndex(
(element) => element && element == window.uuid
);
if (index >= 0) {
state.windows_sort.splice(index, 1);
state.windows_sort.unshift(window.uuid);
}
} }
}, },
removeWindow(state: StateInterface, playload?: any) { removeWindow(state: StateInterface, playload?: any) {
@ -323,7 +384,16 @@ export default store(function (/* { ssrContext } */) {
(item) => item && item.window_id == window_id (item) => item && item.window_id == window_id
); );
if (index >= 0) { if (index >= 0) {
const window = state.windows[index];
window_color_list.push(window.client_color);
state.windows.splice(index, 1); state.windows.splice(index, 1);
let __index = state.windows_sort.findIndex(
(element) => element && element == window.uuid
);
if (__index >= 0) {
state.windows_sort.splice(__index, 1);
}
} }
} else { } else {
console.log("window_id???"); console.log("window_id???");

View File

@ -0,0 +1,66 @@
export default [
"#C21817AF",
"#72D345AF",
"#1EA033AF",
"#6382F3AF",
"#735F83AF",
"#2AAF9BAF",
"#E4491EAF",
"#D769D9AF",
"#BDADE3AF",
"#24DE81AF",
"#DA454EAF",
"#4CED56AF",
"#91688DAF",
"#BBF360AF",
"#08BB79AF",
"#6F3E0BAF",
"#26BCBDAF",
"#ECA437AF",
"#94BE23AF",
"#FED7C7AF",
"#E2BF1CAF",
"#FDF2F1AF",
"#4C6CDBAF",
"#5E8B3CAF",
"#E09A78AF",
"#3FCD0EAF",
"#99C6BBAF",
"#D80921AF",
"#27072DAF",
"#213531AF",
"#7B01C9AF",
"#304AE5AF",
"#5CA05BAF",
"#F012B3AF",
"#BF7E0AAF",
"#FE4DB2AF",
"#B9416DAF",
"#2C015FAF",
"#01FD9BAF",
"#EB5CAEAF",
"#DA47BEAF",
"#DBEE46AF",
"#FBA68AAF",
"#58358DAF",
"#461298AF",
"#764860AF",
"#659F87AF",
"#3821AFAF",
"#8CACF9AF",
"#65E6B3AF",
"#78EE52AF",
"#4E5D30AF",
"#885361AF",
"#5CB17CAF",
"#5856C3AF",
"#C17EF9AF",
"#48921DAF",
"#543987AF",
"#4A3CFDAF",
"#294DE2AF",
"#A9A494AF",
"#1E603FAF",
"#3EF529AF",
"#CB7177AF",
];