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

添加按CTRL键开窗的功能

This commit is contained in:
fangxiang 2022-01-25 11:34:07 +08:00
parent cabf9ba04d
commit 1b9ead59b9
6 changed files with 233 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.vue
View File

@ -22,6 +22,15 @@ export default defineComponent({
window.onresize = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
window.onmousedown = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowMouseDown, evt);
window.onmousemove = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowMouseMove, evt);
window.onmouseup = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowMouseUp, evt);
window.onmouseout = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowMouseOut, evt);
window.document.body.onclick = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);

4
src/common/EventBus.ts
View File

@ -21,6 +21,10 @@ export namespace EventNamesDefine {
export const UnSelectAllWindows = "onUnSelectAllWindows";
export const UnFocusAllWindows = "onUnFocusAllWindows";
export const WindowResize = "onWindowResize";
export const WindowMouseDown = "onWindowMouseDown";
export const WindowMouseMove = "onWindowMouseMove";
export const WindowMouseUp = "onWindowMouseUp";
export const WindowMouseOut = "onWindowMouseOut";
export const DocumentBodyClick = "onDocumentBodyClick";
export const ResponseMessage = "onResponseData";
export const NotifyMessage = "onNotifyMessage";

14
src/components/SignalSourceTree.vue
View File

@ -7,6 +7,20 @@
clickable
:draggable="!prop.node.is_group"
@dragstart="(evt) => onDragStart(evt, prop.node)"
@click="
$store.commit(
'setSelectedSignalSource',
prop.node.is_group
? $store.state.selected_signal_source
: prop.node.uuid
)
"
:style="{
border:
$store.state.selected_signal_source == prop.node.uuid
? '1px solid #aacceec2'
: 'none',
}"
>
<q-item-section avatar>
<q-icon

85
src/components/Window.vue
View File

@ -10,7 +10,7 @@
@mousedown="onMouseDown"
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
@mouseup="onMouseLeave"
@mouseup="onMouseUp"
>
<q-popup-proxy context-menu>
<q-list>
@ -354,6 +354,9 @@ export default defineComponent({
disable: {
type: Boolean,
},
mouse_area_flag: {
type: Boolean,
},
},
emits: [
"reset_geometry_offset",
@ -472,40 +475,50 @@ export default defineComponent({
calc_is_audio_player_window,
onClick(evt: PointerEvent) {
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);
}
},
onMouseDown(evt: MouseEvent) {
if (props.disable) {
return;
}
if (selected.value) {
if (evt.button == 0) {
mouse_down_flag = true;
mouse_last_pos_x = evt.x;
mouse_last_pos_y = evt.y;
if (!props.mouse_area_flag) {
evt.stopPropagation();
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);
}
}
},
onMouseDown(evt: MouseEvent) {
if (!evt.ctrlKey) {
evt.stopPropagation();
if (props.disable) {
return;
}
if (selected.value) {
if (evt.button == 0) {
mouse_down_flag = true;
mouse_last_pos_x = evt.x;
mouse_last_pos_y = evt.y;
}
}
}
// console.log("down", ctrl_flag);
},
onMouseMove(evt: MouseEvent) {
if (can_move.value && mouse_down_flag && selected.value) {
emit(
"reset_geometry_offset",
props.window,
evt.x - mouse_last_pos_x,
evt.y - mouse_last_pos_y,
0,
0
);
if (!props.mouse_area_flag) {
evt.stopPropagation();
if (can_move.value && mouse_down_flag && selected.value) {
emit(
"reset_geometry_offset",
props.window,
evt.x - mouse_last_pos_x,
evt.y - mouse_last_pos_y,
0,
0
);
mouse_last_pos_x = evt.x;
mouse_last_pos_y = evt.y;
move_flag = true;
mouse_last_pos_x = evt.x;
mouse_last_pos_y = evt.y;
move_flag = true;
}
}
},
@ -550,15 +563,19 @@ export default defineComponent({
cleanMouseDownFlag,
onMouseLeave(evt: MouseEvent) {
if (selected.value && mouse_down_flag) {
if (move_flag) {
emit("commit_geometry", props.window);
// console.log("leave", ctrl_flag);
if (!props.mouse_area_flag) {
if (selected.value && mouse_down_flag) {
if (move_flag) {
emit("commit_geometry", props.window);
}
cleanMouseDownFlag();
}
cleanMouseDownFlag();
}
},
onMouseUp(evt: MouseEvent) {
// console.log("up", ctrl_flag);
if (selected.value && mouse_down_flag) {
if (move_flag) {
emit("commit_geometry", props.window);

149
src/pages/WallPage.vue
View File

@ -29,6 +29,7 @@
:key="index"
:disable="plan_running"
class="window"
:mouse_area_flag="area_open_window_flag"
:signal_source_table_uuid="item.signal_source_table_uuid"
:window="item"
:style="{
@ -88,6 +89,25 @@
</div>
</div>
</div>
<div
class="mouse_area_mask"
v-show="area_open_window_flag"
style="position: fixed; pointer-events: none; z-index: 999"
:style="{
left:
Math.min(area_open_window_rect.start_x, area_open_window_rect.end_x) +
'px',
top:
Math.min(area_open_window_rect.start_y, area_open_window_rect.end_y) +
'px',
width:
Math.abs(area_open_window_rect.end_x - area_open_window_rect.start_x) +
'px',
height:
Math.abs(area_open_window_rect.end_y - area_open_window_rect.start_y) +
'px',
}"
></div>
<edit-volume-dialog ref="edit_volume_dialog" />
<polling-setting-dialog ref="polling_setting_dialog" />
</template>
@ -107,6 +127,11 @@
.wall_item_flag {
}
.mouse_area_mask {
background: #aacceec2;
border: 1px solid #0069bee7;
}
</style>
<script lang="ts">
@ -127,6 +152,20 @@ import { NotifyMessage } from "src/common/ClientConnection";
import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
import PollingSettingDialog from "src/components/PollingSettingDialog.vue";
class Rect {
start_x = 0;
start_y = 0;
end_x = 0;
end_y = 0;
reset() {
this.start_x = 0;
this.start_y = 0;
this.end_x = 0;
this.end_y = 0;
}
}
export default defineComponent({
name: "PageWall",
@ -158,6 +197,9 @@ export default defineComponent({
const wall: Ref<HTMLElement | null> = ref(null);
const area_open_window_flag = ref(false);
const area_open_window_rect = ref(new Rect());
let item_witdh = ref(0);
const item_height = ref(0);
@ -185,6 +227,111 @@ export default defineComponent({
}
};
const wallMouseDown = (evt: MouseEvent) => {
if (evt.ctrlKey && wall.value) {
let left =
wall.value.offsetLeft + (wall.value.parentElement?.offsetLeft ?? 0);
let top =
wall.value.offsetTop + (wall.value.parentElement?.offsetTop ?? 0);
if (
left <= evt.clientX &&
top <= evt.clientY &&
left + wall.value.offsetWidth >= evt.clientX &&
top + wall.value.offsetHeight >= evt.clientY
) {
area_open_window_rect.value.start_x = evt.clientX;
area_open_window_rect.value.start_y = evt.clientY;
area_open_window_rect.value.end_x = evt.clientX;
area_open_window_rect.value.end_y = evt.clientY;
area_open_window_flag.value = true;
evt.stopPropagation();
}
}
};
const wallMouseUp = (evt: MouseEvent) => {
if (area_open_window_flag.value && wall.value) {
evt.stopPropagation();
// 开窗
let left =
wall.value.offsetLeft + (wall.value.parentElement?.offsetLeft ?? 0);
let top =
wall.value.offsetTop + (wall.value.parentElement?.offsetTop ?? 0);
let start_x =
Math.min(
area_open_window_rect.value.start_x,
area_open_window_rect.value.end_x
) - left;
let start_y =
Math.min(
area_open_window_rect.value.start_y,
area_open_window_rect.value.end_y
) - top;
let end_x = Math.abs(
area_open_window_rect.value.end_x -
area_open_window_rect.value.start_x
);
let end_y = Math.abs(
area_open_window_rect.value.end_y -
area_open_window_rect.value.start_y
);
GlobalData.getInstance()
.getCurrentClient()
?.openWindow(
new Protocol.OpenWindowRequestEntity(
$store.state.selected_signal_source,
(start_x * wall_width_scaler.value) /
$store.state.device_screen_width,
(start_y * wall_height_scaler.value) /
$store.state.device_screen_height,
(end_x *
wall_width_scaler.value) /
$store.state.device_screen_width,
(end_y *
wall_height_scaler.value) /
$store.state.device_screen_height
)
);
}
area_open_window_flag.value = false;
area_open_window_rect.value.reset();
};
const wallMouseMove = (evt: MouseEvent) => {
if (area_open_window_flag.value) {
evt.stopPropagation();
if (wall.value) {
let left =
wall.value.offsetLeft + (wall.value.parentElement?.offsetLeft ?? 0);
let top =
wall.value.offsetTop + (wall.value.parentElement?.offsetTop ?? 0);
let right = left + wall.value.offsetWidth;
let bottom = top + wall.value.offsetHeight;
if (evt.clientX < left) {
area_open_window_rect.value.end_x = left;
} else if (evt.clientX > right) {
area_open_window_rect.value.end_x = right;
} else {
area_open_window_rect.value.end_x = evt.clientX;
}
if (evt.clientY < top) {
area_open_window_rect.value.end_y = top;
} else if (evt.clientY > bottom) {
area_open_window_rect.value.end_y = bottom;
} else {
area_open_window_rect.value.end_y = evt.clientY;
}
}
}
};
EventBus.getInstance().on(EventNamesDefine.WindowMouseDown, wallMouseDown);
EventBus.getInstance().on(EventNamesDefine.WindowMouseMove, wallMouseMove);
EventBus.getInstance().on(EventNamesDefine.WindowMouseUp, wallMouseUp);
EventBus.getInstance().on(
EventNamesDefine.DocumentBodyClick,
(evt: PointerEvent) => {
@ -387,6 +534,8 @@ export default defineComponent({
plan_running,
edit_volume_dialog,
polling_setting_dialog,
area_open_window_rect,
area_open_window_flag,
onDrop(e: DragEvent) {
e.preventDefault();
let target = e.target as any;

6
src/store/index.ts
View File

@ -42,6 +42,7 @@ export interface StateInterface {
power_on_plan: string;
fan_temp: number;
selected_window: string;
selected_signal_source: string;
}
// provide typings for `this.$store`
@ -270,6 +271,8 @@ export default store(function (/* { ssrContext } */) {
power_on_plan: "",
fan_temp: 0,
selected_window: "",
selected_signal_source:
"FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF",
},
mutations: {
@ -646,6 +649,9 @@ export default store(function (/* { ssrContext } */) {
setSelectedWindow(state: StateInterface, playload?: any) {
state.selected_window = playload;
},
setSelectedSignalSource(state: StateInterface, playload?: any) {
state.selected_signal_source = playload;
},
},
// enable strict mode (adds overhead!)