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

窗口按实际顺序显示

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

5
src/common/ClientConnection.ts
View File

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

1
src/common/EventBus.ts
View File

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

44
src/components/Window.vue
View File

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

2
src/entities/MultimediaWindowEntity.ts
View File

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

27
src/entities/WSProtocol.ts
View File

@ -72,8 +72,12 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "WindowOtherStateChanged";
}
public static get kFocuseWindow() {
return Commands.PROTOCOL_PREFIX + "FocuseWindow";
public static get kFocusWindow() {
return Commands.PROTOCOL_PREFIX + "FocusWindow";
}
public static get kLowerWindow() {
return Commands.PROTOCOL_PREFIX + "LowerWindow";
}
public static get kWindowFitGrid() {
@ -287,6 +291,8 @@ export namespace Protocol {
Commands.kResizeWindow,
Commands.kOpenWindow,
Commands.kCloseWindow,
Commands.kFocusWindow,
Commands.kLowerWindow,
Commands.kWindowOtherStateChanged,
Commands.kRpcAddSignalSourceGroup,
Commands.kRpcDeleteSignalSourceGroup,
@ -1572,4 +1578,21 @@ export namespace Protocol {
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;
}
}
}

1
src/entities/WindowOtherStateChangeNotifyEntity.ts
View File

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

139
src/pages/WallPage.vue
View File

@ -9,47 +9,50 @@
style="background-color: #bce0f0"
>
<div id="windows" style="position: absolute">
<div v-for="(item, index) in windows" :key="index">
<window
@reset_geometry_offset="resetGeometryOffset"
@commit_geometry="commitGeometry"
@close_this_window="closeWindow"
@close_other_windows="closeOtherWindows"
@close_all_windows="closeAllWindows"
@window_fouse_in="windowFocusIn"
@dblclick="(evt) => windowDBClick(item.window_id)"
@edit_volume="edit_volume"
@mute_unmute="mute_unmute"
@start_polling="start_polling"
@stop_polling="stop_polling"
@polling_setting="polling_setting"
:ref="'window_' + item.window_id"
:id="'window_' + item.window_id"
:uuid="item.uuid"
:disable="plan_running"
class="window"
:mouse_area_flag="area_open_window_flag"
:signal_source_table_uuid="item.signal_source_table_uuid"
:window="item"
:style="{
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>
<window
@reset_geometry_offset="resetGeometryOffset"
@commit_geometry="commitGeometry"
@close_this_window="closeWindow"
@close_other_windows="closeOtherWindows"
@close_all_windows="closeAllWindows"
@window_fouse_in="windowFocusIn"
@dblclick="(evt) => windowDBClick(item.window_id)"
@edit_volume="edit_volume"
@mute_unmute="mute_unmute"
@start_polling="start_polling"
@stop_polling="stop_polling"
@polling_setting="polling_setting"
v-for="(item, index) in windows"
:key="index"
:ref="'window_' + item.window_id"
:id="'window_' + item.window_id"
:uuid="item.uuid"
:disable="plan_running"
class="window"
:mouse_area_flag="area_open_window_flag"
:signal_source_table_uuid="item.signal_source_table_uuid"
:window="item"
:style="{
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',
'z-index': $store.state.windows_sort.findIndex(
(element) => element == item.uuid
),
}"
>
</window>
</div>
<div ref="wall_grids" @click="onWallGridsClick">
<div
@ -446,18 +449,6 @@ export default defineComponent({
notify.data
) as WindowOtherStateChangeNotifyEntity;
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(
(item) => item.window_id == temp.window_id
);
@ -468,11 +459,6 @@ export default defineComponent({
property_name: "playing",
value: temp.playing,
},
{
window,
property_name: "focus",
value: temp.focus,
},
{
window,
property_name: "muted",
@ -508,6 +494,43 @@ export default defineComponent({
}
}
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:
{
const temp = JSON.parse(

70
src/store/index.ts
View File

@ -38,6 +38,7 @@ export interface StateInterface {
device_screen_width: number;
device_screen_height: number;
windows: WindowOpenNotifyEntity[];
windows_sort: string[];
device_ip_address: string;
power_on_plan: string;
fan_temp: number;
@ -251,6 +252,8 @@ class _TreeHelper {
export const storeKey: InjectionKey<VuexStore<StateInterface>> =
Symbol("vuex-key");
import window_color_list from "./window_color_list.js";
export default store(function (/* { ssrContext } */) {
const Store = createStore<StateInterface>({
modules: {
@ -267,6 +270,7 @@ export default store(function (/* { ssrContext } */) {
device_screen_width: 1920,
device_screen_height: 1080,
windows: [],
windows_sort: [],
device_ip_address: "localhost",
power_on_plan: "",
fan_temp: 0,
@ -303,17 +307,74 @@ export default store(function (/* { ssrContext } */) {
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[]) {
if (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) {
state.windows = [];
state.windows_sort = [];
},
pushWindow(state: StateInterface, playload?: WindowOpenNotifyEntity) {
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_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) {
@ -323,7 +384,16 @@ export default store(function (/* { ssrContext } */) {
(item) => item && item.window_id == window_id
);
if (index >= 0) {
const window = state.windows[index];
window_color_list.push(window.client_color);
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 {
console.log("window_id???");

66
src/store/window_color_list.js Normal file
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",
];