Merge branch 'magic_wall'
# Conflicts: # src/common/ClientConnection.ts # src/components/RegisterDialog.vue # src/components/SystemSettingDialog.vue # src/entities/MagicWallConfig.ts # src/entities/RectF.ts # src/entities/WSProtocol.ts # src/i18n/en-US/index.ts # src/i18n/zh-CN/index.ts # src/pages/TopToolBar.vue # src/store/index.ts
This commit is contained in:
commit
e940f24b52
|
@ -69,15 +69,7 @@
|
|||
:disable="loading"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-btn
|
||||
@click="setDeviceAttribute"
|
||||
:label="$t('commit')"
|
||||
no-caps
|
||||
outline
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar></q-item-section>
|
||||
|
@ -85,12 +77,33 @@
|
|||
<q-checkbox
|
||||
v-model="function_custom_ISV"
|
||||
:label="$t('Custom ISV')"
|
||||
class="offset-md-1 col"
|
||||
color="cyan"
|
||||
class="col"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
v-model="function_magic_wall"
|
||||
|
||||
:label="$t('magic wall')"
|
||||
color="cyan"
|
||||
class="offset-md-1 col"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-btn
|
||||
@click="setDeviceAttribute"
|
||||
:label="$t('commit')"
|
||||
no-caps
|
||||
outline
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
|
@ -198,6 +211,9 @@ export default defineComponent({
|
|||
const function_mirroring_output = ref(
|
||||
$store.state.custom_defines.function_mirroring_output
|
||||
);
|
||||
const function_magic_wall = ref(
|
||||
$store.state.custom_defines.function_magic_wall
|
||||
);
|
||||
const target_language = ref("zh-CN");
|
||||
|
||||
return {
|
||||
|
@ -206,6 +222,7 @@ export default defineComponent({
|
|||
function_center_control,
|
||||
function_output_board,
|
||||
function_custom_ISV,
|
||||
function_magic_wall,
|
||||
function_mirroring_output,
|
||||
target_language,
|
||||
|
||||
|
@ -219,6 +236,8 @@ export default defineComponent({
|
|||
$store.state.custom_defines.function_output_board;
|
||||
function_mirroring_output.value =
|
||||
$store.state.custom_defines.function_mirroring_output;
|
||||
function_magic_wall.value =
|
||||
$store.state.custom_defines.function_magic_wall;
|
||||
},
|
||||
resetData() {
|
||||
loading.value = false;
|
||||
|
@ -227,6 +246,7 @@ export default defineComponent({
|
|||
function_output_board.value = false;
|
||||
function_mirroring_output.value = false;
|
||||
function_custom_ISV.value = false;
|
||||
function_magic_wall.value=false;
|
||||
},
|
||||
|
||||
restartDevice() {
|
||||
|
@ -319,6 +339,9 @@ export default defineComponent({
|
|||
if (function_custom_ISV.value) {
|
||||
attribute |= EDeviceAttribute.CustomISV;
|
||||
}
|
||||
if (function_magic_wall.value) {
|
||||
attribute |= EDeviceAttribute.ProductMagicWall;
|
||||
}
|
||||
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -303,6 +303,15 @@
|
|||
:loading="loading"
|
||||
:disable="loading"
|
||||
/>
|
||||
<q-checkbox
|
||||
v-model="function_magic_wall"
|
||||
|
||||
:label="$t('magic wall')"
|
||||
color="cyan"
|
||||
class="offset-md-1 col"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
@ -419,6 +428,7 @@ export default defineComponent({
|
|||
const function_output_board = ref(false);
|
||||
const function_mirroring_output = ref(false);
|
||||
const function_custom_ISV = ref(false);
|
||||
const function_magic_wall = ref(false);
|
||||
|
||||
const trial_days = ref(0);
|
||||
const last_days = ref(0);
|
||||
|
@ -441,6 +451,7 @@ export default defineComponent({
|
|||
function_output_board.value = false;
|
||||
function_mirroring_output.value = false;
|
||||
function_custom_ISV.value = false;
|
||||
function_magic_wall.value=false;
|
||||
};
|
||||
|
||||
const showDialog = async () => {
|
||||
|
@ -472,6 +483,9 @@ export default defineComponent({
|
|||
$store.state.custom_defines.function_output_board;
|
||||
function_mirroring_output.value =
|
||||
$store.state.custom_defines.function_mirroring_output;
|
||||
const function_magic_wall = ref(
|
||||
$store.state.custom_defines.function_magic_wall
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
|
@ -493,6 +507,7 @@ export default defineComponent({
|
|||
server_address,
|
||||
function_output_board,
|
||||
function_custom_ISV,
|
||||
function_magic_wall,
|
||||
function_center_control,
|
||||
function_mirroring_output,
|
||||
target_language,
|
||||
|
@ -621,6 +636,9 @@ export default defineComponent({
|
|||
if (function_custom_ISV.value) {
|
||||
attribute |= EDeviceAttribute.CustomISV;
|
||||
}
|
||||
if (function_magic_wall.value) {
|
||||
attribute |= EDeviceAttribute.ProductMagicWall;
|
||||
}
|
||||
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
|
|
|
@ -1272,6 +1272,7 @@
|
|||
|
||||
<div
|
||||
v-if="
|
||||
click_count >= target_click_count ||
|
||||
click_count >= target_click_count ||
|
||||
$store.state.advanced_debug
|
||||
"
|
||||
|
@ -1721,7 +1722,6 @@ export default defineComponent({
|
|||
current_time.value = date.formatDate(timeStamp, "HH:mm:ss");
|
||||
}
|
||||
};
|
||||
|
||||
const refresh_output_board = async () => {
|
||||
const settings = await GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
|
@ -1738,6 +1738,7 @@ export default defineComponent({
|
|||
output_board_volume.value = settings.volume;
|
||||
output_board_mute.value = settings.mute ? $t.t("on") : $t.t("off");
|
||||
|
||||
|
||||
{
|
||||
output_board_resolution_options.value = [];
|
||||
for (const item of Object.keys(
|
||||
|
@ -2021,6 +2022,9 @@ export default defineComponent({
|
|||
const applyOutputBoard = async () => {
|
||||
loading.value = true;
|
||||
const request = new Protocol.SetOutputBoardSettingRequestEntity();
|
||||
const response = await GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.getMagicWallConfig();
|
||||
request.wall_col = parseInt(output_board_wall_col.value.toString());
|
||||
request.wall_row = parseInt(output_board_wall_row.value.toString());
|
||||
request.splicing = output_board_splicing.value == $t.t("on");
|
||||
|
@ -2034,13 +2038,20 @@ export default defineComponent({
|
|||
request.volume = parseInt(output_board_volume.value.toString());
|
||||
request.mute = output_board_mute.value == $t.t("on");
|
||||
request.output_board_resolution = output_board_resolution.value;
|
||||
|
||||
let success = false;
|
||||
try {
|
||||
await GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.setOutputBoardSetting(request);
|
||||
success = true;
|
||||
if ($store.state.custom_defines.function_magic_wall && response&&success) {
|
||||
const output_length =
|
||||
parseInt(output_board_wall_col.value.toString()) *
|
||||
parseInt(output_board_wall_row.value.toString());
|
||||
if (output_length != response.config.col * response.config.row) {
|
||||
$store.commit("setShowMonitorList", []);
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
$q.notify({
|
||||
color: success ? "positive" : "negative",
|
||||
|
@ -2113,7 +2124,6 @@ export default defineComponent({
|
|||
|
||||
const applyUser = async () => {
|
||||
loading.value = true;
|
||||
console.log("zzz");
|
||||
const request = new Protocol.SetOutputBoardSettingRequestEntity();
|
||||
request.wall_col = parseInt(output_board_wall_col.value.toString());
|
||||
request.wall_row = parseInt(output_board_wall_row.value.toString());
|
||||
|
|
|
@ -22,7 +22,7 @@ export enum EDeviceAttribute {
|
|||
Reserve18 = 0x00040000,
|
||||
Reserve19 = 0x00080000,
|
||||
Reserve20 = 0x00100000,
|
||||
Reserve21 = 0x00200000,
|
||||
ProductMagicWall = 0x00200000,
|
||||
Reserve22 = 0x00400000,
|
||||
Reserve23 = 0x00800000,
|
||||
Reserve24 = 0x01000000,
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import RotatedRectF from "./RectF";
|
||||
import RotatedRectF, { RotatedRectFWithIndex } from "./RectF";
|
||||
|
||||
export default class MagicWallConfig {
|
||||
magic_wall_enable = false;
|
||||
row = 0;
|
||||
col = 0;
|
||||
windows: RotatedRectF[] = [];
|
||||
windows: RotatedRectFWithIndex[] = [];
|
||||
}
|
||||
|
|
|
@ -32,3 +32,11 @@ export class RotatedRectF extends RectF {
|
|||
this.angle = angle;
|
||||
}
|
||||
}
|
||||
export class RotatedRectFWithIndex extends RotatedRectF{
|
||||
index:number=0;
|
||||
percenter:number=0;
|
||||
initial_h:number=0;
|
||||
initial_w:number=0;
|
||||
background_h:number=0;
|
||||
background_w:number=0;
|
||||
}
|
||||
|
|
|
@ -57,6 +57,7 @@ export default {
|
|||
Accept: "Accept",
|
||||
"move speed": "Move Speed",
|
||||
"y offset": "Y Offset",
|
||||
"the number must be greater than 0":"the number must be greater than 0",
|
||||
"pos x": "X Position",
|
||||
"pos y": "Y Position",
|
||||
width: "Width",
|
||||
|
@ -432,4 +433,14 @@ export default {
|
|||
"verify key length is 6": "Verify Key Length Is 6",
|
||||
server: "Server",
|
||||
"set cloud server setting": "Set Cloud Server Setting",
|
||||
"set magic wall":"Set Magic wall",
|
||||
"update magic wall":"Update Magic Wall",
|
||||
"magic wall":"Magic Wall",
|
||||
"angle":"Angle",
|
||||
"topology diagram":"Topology Diagram",
|
||||
"physical central location":"Central Location",
|
||||
"monitors list":"Monitors List",
|
||||
"resize":"Resize",
|
||||
"export magic":"Export"
|
||||
|
||||
};
|
||||
|
|
|
@ -499,7 +499,7 @@ export default {
|
|||
Warning: "警告",
|
||||
function: "功能",
|
||||
commit: "提交",
|
||||
"set device function": "设置设备功能成功",
|
||||
"set device function": "设置设备功能",
|
||||
operator_play_signal_source: "信号源",
|
||||
"toolbar edit window rect": "窗口大小",
|
||||
exit: "退出",
|
||||
|
@ -700,4 +700,13 @@ export default {
|
|||
"verify key length is 6": "校验码长度必须为6",
|
||||
server: "服务",
|
||||
"set cloud server setting": "设置云服务器",
|
||||
"set magic wall":"设置魔墙",
|
||||
"update magic wall":"更新魔墙",
|
||||
"magic wall":"魔墙",
|
||||
"angle":"角度",
|
||||
"topology diagram":"拓扑图",
|
||||
"physical central location":"物理中心位置",
|
||||
"monitors list":"显示器",
|
||||
"resize":"缩放",
|
||||
"export magic":"导出"
|
||||
};
|
||||
|
|
|
@ -305,7 +305,7 @@
|
|||
<q-item
|
||||
clickable
|
||||
:disable="!$store.state.power_state"
|
||||
v-if="$store.state.isLedPlayer()"
|
||||
v-if="$store.state.isLedPlayer()&&!$store.state.custom_defines.function_magic_wall"
|
||||
v-close-popup
|
||||
@click="
|
||||
($store.state.isSpecialVideo()
|
||||
|
@ -322,6 +322,24 @@
|
|||
{{ $t("grid setting") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
:disable="!$store.state.power_state"
|
||||
v-close-popup
|
||||
@click="$refs.control_panel_dialog.showDialog()"
|
||||
v-if="$store.state.custom_defines.function_magic_wall"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<!-- <q-icon name="image" /> -->
|
||||
<q-icon name="img:new_icon/file_manager.png" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("magic wall") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
|
||||
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
|
@ -478,6 +496,7 @@
|
|||
v-if="$store.state.isSpecialVideo()"
|
||||
ref="special_video_grid_setting_dialog"
|
||||
/>
|
||||
<control-panel-dialog ref="control_panel_dialog" />
|
||||
<background-image-dialog ref="background_image_dialog" />
|
||||
<subtitle-dialog ref="subtitle_dialog" />
|
||||
<recovery-database-dialog ref="recovery_database_dialog" />
|
||||
|
@ -519,6 +538,9 @@ import { useStore } from "src/store";
|
|||
import FusionSettingsDialog from "src/components/FusionSettingsDialog.vue";
|
||||
import GridSettingDialog from "src/components/GridSettingDialog.vue";
|
||||
import SpecialVideoGridSettingDialog from "src/components/SpecialVideoGridSettingDialog.vue";
|
||||
|
||||
import ControlPanelDialog from "src/components/ControlPanelDialog.vue";
|
||||
|
||||
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
||||
import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
|
||||
import UpgradeDialog from "src/components/UpgradeDialog.vue";
|
||||
|
@ -550,6 +572,9 @@ export default defineComponent({
|
|||
components: {
|
||||
GridSettingDialog,
|
||||
SpecialVideoGridSettingDialog,
|
||||
|
||||
ControlPanelDialog,
|
||||
|
||||
BackgroundImageDialog,
|
||||
RecoveryDatabaseDialog,
|
||||
UpgradeDialog,
|
||||
|
|
|
@ -28,7 +28,9 @@
|
|||
item.y * ($refs.wall?.offsetHeight ?? 0)
|
||||
"
|
||||
:zIndex="
|
||||
$store.state.windows_sort.findIndex((element) => element == item.uuid)
|
||||
$store.state.windows_sort.findIndex(
|
||||
(element) => element == item.uuid
|
||||
) + 1
|
||||
"
|
||||
:isActive="item.uuid == $store.state.selected_window"
|
||||
:resizeIconSize="14"
|
||||
|
@ -67,11 +69,76 @@
|
|||
</window>
|
||||
</vue3-resize-drag>
|
||||
</div>
|
||||
<div
|
||||
id="magic_wall_grids"
|
||||
ref="magic_wall_grids"
|
||||
@click="onWallGridsClick"
|
||||
v-if="
|
||||
$store.state.power_state &&
|
||||
$store.state.custom_defines.function_magic_wall
|
||||
"
|
||||
>
|
||||
<div class="row magic_wall_grids" style="height: 31.05vw; width: 55.2vw">
|
||||
<vue3-resize-drag
|
||||
v-for="(item, index) of $store.state.show_monitor_list"
|
||||
:w="item.w * $refs.wall?.clientWidth"
|
||||
:h="item.h * $refs.wall?.clientHeight"
|
||||
:x="item.currentx * $refs.wall?.clientWidth"
|
||||
:y="item.currenty * $refs.wall?.clientHeight"
|
||||
:rotate="parseInt(item.angle.toString())"
|
||||
:is-resizable="false"
|
||||
:isGuide="false"
|
||||
class="magic_wall"
|
||||
@dragenter="magic_select(index, item, $event)"
|
||||
style="text-align: center"
|
||||
>
|
||||
{{ item.id + 1 }}
|
||||
</vue3-resize-drag>
|
||||
|
||||
<q-popup-proxy
|
||||
context-menu
|
||||
@show="
|
||||
{
|
||||
last_context_menu_pos_x = $event.layerX;
|
||||
last_context_menu_pos_y = $event.layerY;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
:disable="plan_running || !$store.state.power_state"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="openWindowByLocalFile($event)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="open_in_browser" />
|
||||
</q-item-section>
|
||||
<q-item-section> {{ $t("open window") }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
:disable="plan_running || !$store.state.power_state"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="closeAllWindows"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="close" color="red" />
|
||||
</q-item-section>
|
||||
<q-item-section> {{ $t("close all windows") }} </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-popup-proxy>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="wall_grids"
|
||||
ref="wall_grids"
|
||||
@click="onWallGridsClick"
|
||||
v-if="$store.state.power_state"
|
||||
v-if="
|
||||
$store.state.power_state &&
|
||||
!$store.state.custom_defines.function_magic_wall
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="row of wall_rows"
|
||||
|
@ -176,6 +243,16 @@
|
|||
background: #aacceec2;
|
||||
border: 1px solid #0069bee7;
|
||||
}
|
||||
.magic_wall {
|
||||
border: 1px solid black;
|
||||
background-color: rgb(173, 228, 251);
|
||||
position: absolute;
|
||||
}
|
||||
.magic_wall_select {
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.magic_wall_grids {
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -191,7 +268,7 @@ import { NullSignalSource, useStore } from "src/store";
|
|||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
|
||||
import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
|
||||
import { useQuasar } from "quasar";
|
||||
import { extend, useQuasar } from "quasar";
|
||||
import { NotifyMessage } from "src/common/ClientConnection";
|
||||
|
||||
import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
|
||||
|
@ -204,7 +281,6 @@ import FileEntity from "src/entities/FileEntity";
|
|||
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
|
||||
import FileSuffixHelper from "src/common/FileSuffixHelper";
|
||||
import { SpecialVideoHelper } from "src/common/SpecialVideoHelper";
|
||||
|
||||
class Rect {
|
||||
start_x = 0;
|
||||
start_y = 0;
|
||||
|
@ -218,10 +294,29 @@ class Rect {
|
|||
this.end_y = 0;
|
||||
}
|
||||
}
|
||||
class test_monitor {
|
||||
w = 0.0;
|
||||
h = 0.0;
|
||||
currentx = 0.0;
|
||||
currenty = 0.0;
|
||||
centerx = 0.0;
|
||||
centery = 0.0;
|
||||
angle = 0;
|
||||
id = 0;
|
||||
constructor(id: number, w: number, h: number) {
|
||||
this.currentx = 0.0;
|
||||
this.currenty = 0.0;
|
||||
this.angle = 0;
|
||||
this.centerx = 0;
|
||||
this.centery = 0;
|
||||
this.id = id;
|
||||
this.w = w;
|
||||
this.h = h;
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "PageWall",
|
||||
|
||||
components: {
|
||||
vue3ResizeDrag,
|
||||
Window,
|
||||
|
@ -241,13 +336,17 @@ export default defineComponent({
|
|||
const window_rect_edit_dialog: Ref<any> = ref(null);
|
||||
|
||||
const show_windows_flag = ref(true); // 用于刷新 window 坐标
|
||||
const refresh_windows_pos = () => {
|
||||
const refresh_windows_pos = async () => {
|
||||
// 浏览器窗口大小调整时, 重新显示隐藏虚拟窗口来刷新虚拟窗口坐标
|
||||
show_windows_flag.value = false;
|
||||
setTimeout(() => {
|
||||
nextTick(() => {
|
||||
show_windows_flag.value = true;
|
||||
});
|
||||
if (wall.value) {
|
||||
let teph = wall.value?.clientHeight / offsetHeight;
|
||||
let tepw = wall.value?.clientWidth / offsetWidth;
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
|
@ -258,7 +357,8 @@ export default defineComponent({
|
|||
|
||||
const last_context_menu_pos_x = ref(0);
|
||||
const last_context_menu_pos_y = ref(0);
|
||||
|
||||
let offsetHeight = 0;
|
||||
let offsetWidth = 0;
|
||||
const plan_running = computed(
|
||||
() => $store.state.current_running_plan.trim() != ""
|
||||
);
|
||||
|
@ -282,10 +382,174 @@ export default defineComponent({
|
|||
|
||||
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);
|
||||
const radians = () => {
|
||||
const test_monitor_list: any = clacMonitor();
|
||||
if (test_monitor_list) {
|
||||
const item = test_monitor_list[current_index.value];
|
||||
return /*a*/ (item.angle * Math.PI) / 180;
|
||||
}
|
||||
};
|
||||
const calculateCoordinates = (
|
||||
px: number,
|
||||
py: number,
|
||||
cx: number,
|
||||
cy: number
|
||||
) => {
|
||||
const x =
|
||||
cx +
|
||||
(px - cx) * Math.cos(Number(radians())) -
|
||||
(py - cy) * Math.sin(Number(radians()));
|
||||
|
||||
const y =
|
||||
cy +
|
||||
(px - cx) * Math.sin(Number(radians())) +
|
||||
(py - cy) * Math.cos(Number(radians()));
|
||||
|
||||
return { x, y };
|
||||
};
|
||||
let current_index = ref(0);
|
||||
const clacMonitor = () => {
|
||||
let test_monitor_list: any = [];
|
||||
$store.state.show_monitor_list.forEach((element) => {
|
||||
let item: test_monitor = new test_monitor(0, 0, 0);
|
||||
const wall_dom = wall.value;
|
||||
if (wall_dom) {
|
||||
item.h = element.h * wall_dom.clientHeight;
|
||||
item.w = element.w * wall_dom.clientWidth;
|
||||
item.currentx = element.currentx * wall_dom.clientWidth;
|
||||
item.currenty = element.currenty * wall_dom.clientHeight;
|
||||
item.centerx = item.currentx + item.w * 0.5;
|
||||
item.centery = item.currenty + item.h * 0.5;
|
||||
item.angle = element.angle;
|
||||
item.id = element.id;
|
||||
test_monitor_list.push(item);
|
||||
}
|
||||
});
|
||||
return test_monitor_list;
|
||||
};
|
||||
const four_point = () => {
|
||||
const test_monitor_list: any = clacMonitor();
|
||||
if (test_monitor_list) {
|
||||
const item = test_monitor_list[current_index.value];
|
||||
item.centerx = parseInt(item.centerx.toString());
|
||||
item.centery = parseInt(item.centery.toString());
|
||||
const x2: number = item.currentx + item.w;
|
||||
const y2: number = item.currenty + item.h;
|
||||
if (item.angle != 0) {
|
||||
const point_left_top = calculateCoordinates(
|
||||
item.currentx,
|
||||
item.currenty,
|
||||
item.centerx,
|
||||
item.centery
|
||||
);
|
||||
const point_left_bootom = calculateCoordinates(
|
||||
item.currentx,
|
||||
y2,
|
||||
item.centerx,
|
||||
item.centery
|
||||
);
|
||||
const point_right_top = calculateCoordinates(
|
||||
x2,
|
||||
item.currenty,
|
||||
item.centerx,
|
||||
item.centery
|
||||
);
|
||||
const point_right_bottom = calculateCoordinates(
|
||||
x2,
|
||||
y2,
|
||||
item.centerx,
|
||||
item.centery
|
||||
);
|
||||
const point_list = [
|
||||
point_left_top,
|
||||
point_left_bootom,
|
||||
point_right_top,
|
||||
point_right_bottom,
|
||||
];
|
||||
|
||||
return point_list;
|
||||
}
|
||||
}
|
||||
};
|
||||
const select_x = () => {
|
||||
const point_list = four_point();
|
||||
const item = $store.state.show_monitor_list[current_index.value];
|
||||
if (item.angle != 0) {
|
||||
if (point_list) {
|
||||
let minx = 100000;
|
||||
point_list.forEach((element) => {
|
||||
if (minx > element.x) {
|
||||
minx = element.x;
|
||||
}
|
||||
});
|
||||
return minx;
|
||||
}
|
||||
} else {
|
||||
if (wall.value) return item.currentx * wall.value?.clientWidth;
|
||||
}
|
||||
};
|
||||
const select_y = () => {
|
||||
const point_list = four_point();
|
||||
let miny = 100000;
|
||||
if (point_list) {
|
||||
point_list.forEach((element) => {
|
||||
if (miny > element.y) {
|
||||
miny = element.y;
|
||||
}
|
||||
});
|
||||
}
|
||||
const item = $store.state.show_monitor_list[current_index.value];
|
||||
if (item.angle != 0) {
|
||||
return miny;
|
||||
} else {
|
||||
if (wall.value) return item.currenty * wall.value?.clientHeight;
|
||||
}
|
||||
};
|
||||
const select_height = () => {
|
||||
const point_list = four_point();
|
||||
let maxy = 0;
|
||||
let miny = 100000;
|
||||
if (point_list) {
|
||||
point_list.forEach((element) => {
|
||||
if (miny > element.y) {
|
||||
miny = element.y;
|
||||
}
|
||||
if (maxy < element.y) {
|
||||
maxy = element.y;
|
||||
}
|
||||
});
|
||||
}
|
||||
const item = $store.state.show_monitor_list[current_index.value];
|
||||
if (item.angle != 0) {
|
||||
return maxy - miny;
|
||||
} else {
|
||||
if (wall.value) return item.h * wall.value?.clientHeight;
|
||||
}
|
||||
};
|
||||
|
||||
const select_width = () => {
|
||||
const point_list = four_point();
|
||||
let maxx = 0;
|
||||
let minx = 100000;
|
||||
if (point_list) {
|
||||
point_list.forEach((element) => {
|
||||
if (minx > element.x) {
|
||||
minx = element.x;
|
||||
}
|
||||
if (maxx < element.x) {
|
||||
maxx = element.x;
|
||||
}
|
||||
});
|
||||
}
|
||||
const item = $store.state.show_monitor_list[current_index.value];
|
||||
if (item.angle != 0) {
|
||||
return maxx - minx;
|
||||
} else {
|
||||
if (wall.value) return item.w * wall.value?.clientWidth;
|
||||
}
|
||||
};
|
||||
const calcWallItemWH = () => {
|
||||
item_witdh.value = Math.floor(
|
||||
(wall?.value?.parentElement?.offsetWidth ?? 0) / wall_cols.value
|
||||
|
@ -415,6 +679,7 @@ export default defineComponent({
|
|||
);
|
||||
}
|
||||
}
|
||||
//开窗
|
||||
}
|
||||
}
|
||||
area_open_window_flag.value = false;
|
||||
|
@ -450,6 +715,51 @@ export default defineComponent({
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
const show_magic_wall = async () => {
|
||||
// $store.state.windows_sort.findIndex((element) => element == item.uuid)
|
||||
let client = GlobalData.getInstance().getCurrentClient();
|
||||
if (client) {
|
||||
const response = await client.getMagicWallConfig();
|
||||
const settings = await GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.getOutputBoardSetting();
|
||||
if (response&&settings) {
|
||||
const a = response?.config.windows;
|
||||
const wall_dom = wall.value;
|
||||
let monitorList: any = [];
|
||||
|
||||
if (a && wall_dom) {
|
||||
offsetHeight = wall_dom.clientHeight;
|
||||
offsetWidth = wall_dom.clientHeight;
|
||||
a.forEach((element) => {
|
||||
let item: test_monitor = new test_monitor(0, 0, 0);
|
||||
item.h = element.h;
|
||||
item.w = element.w;
|
||||
item.currentx = element.lt.x;
|
||||
item.currenty = element.lt.y;
|
||||
item.angle = element.angle;
|
||||
item.id = element.index;
|
||||
if ($store.state.show_monitor_list.length == 0) {
|
||||
monitorList.push(item);
|
||||
$store.commit("setShowMonitorList", monitorList);
|
||||
} else {
|
||||
let flag = false;
|
||||
$store.state.show_monitor_list.forEach((ele: any) => {
|
||||
if (element.index == ele.id) {
|
||||
flag = true;
|
||||
}
|
||||
});
|
||||
if (!flag) {
|
||||
monitorList.push(item);
|
||||
$store.commit("setShowMonitorList", monitorList);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
EventBus.getInstance().on(EventNamesDefine.WindowMouseDown, wallMouseDown);
|
||||
EventBus.getInstance().on(EventNamesDefine.WindowMouseMove, wallMouseMove);
|
||||
EventBus.getInstance().on(EventNamesDefine.WindowMouseUp, wallMouseUp);
|
||||
|
@ -685,6 +995,9 @@ export default defineComponent({
|
|||
elementResizeDetectorMaker().listenTo(
|
||||
wall.value,
|
||||
(element: HTMLElement) => {
|
||||
if ($store.state.custom_defines.function_magic_wall) {
|
||||
show_magic_wall();
|
||||
}
|
||||
if (element) {
|
||||
calcWallItemWH();
|
||||
}
|
||||
|
@ -957,6 +1270,25 @@ export default defineComponent({
|
|||
.getCurrentClient()
|
||||
?.replaceWindow2(find_window, uuid);
|
||||
} else {
|
||||
if (
|
||||
$store.state.custom_defines.function_magic_wall
|
||||
) {
|
||||
const item =
|
||||
$store.state.show_monitor_list[
|
||||
current_index.value
|
||||
];
|
||||
if (wall.value) {
|
||||
x = Number(select_x()) / wall.value.clientWidth;
|
||||
y =
|
||||
Number(select_y()) / wall.value.clientHeight;
|
||||
width =
|
||||
Number(select_width()) /
|
||||
wall.value.clientWidth;
|
||||
height =
|
||||
Number(select_height()) /
|
||||
wall.value.clientHeight;
|
||||
}
|
||||
}
|
||||
const open_window_request =
|
||||
new Protocol.OpenWindowRequestEntity(
|
||||
uuid,
|
||||
|
@ -999,6 +1331,14 @@ export default defineComponent({
|
|||
target?.classList.add("drag-enter");
|
||||
}
|
||||
},
|
||||
magic_select(index: number, item: test_monitor, e: DragEvent) {
|
||||
current_index.value = index;
|
||||
e.stopPropagation();
|
||||
let target: HTMLElement | null = e.target as HTMLElement;
|
||||
if (target) {
|
||||
target?.classList.add("drag-enter");
|
||||
}
|
||||
},
|
||||
|
||||
onDragLeave(e: DragEvent) {
|
||||
let target: HTMLElement = e.target as HTMLElement;
|
||||
|
|
|
@ -37,6 +37,7 @@ export class CustomDefines {
|
|||
function_output_board = false;
|
||||
function_center_control = false;
|
||||
function_mirroring_output = false;
|
||||
function_magic_wall=false;
|
||||
}
|
||||
|
||||
export interface IWuJieEventBus {
|
||||
|
@ -53,7 +54,27 @@ export interface IWuJieInterface {
|
|||
props: any;
|
||||
bus: IWuJieEventBus;
|
||||
}
|
||||
class test_monitor {
|
||||
w = 0.0;
|
||||
h = 0.0;
|
||||
currentx = 0.0;
|
||||
currenty = 0.0;
|
||||
centerx = 0.0;
|
||||
centery = 0.0;
|
||||
angle = 0;
|
||||
id = 0;
|
||||
constructor(id: number, w: number, h: number) {
|
||||
this.currentx = 0.0;
|
||||
this.currenty = 0.0;
|
||||
this.angle = 0;
|
||||
this.centerx = 0;
|
||||
this.centery = 0;
|
||||
this.id = id;
|
||||
this.w = w;
|
||||
this.h = h;
|
||||
|
||||
}
|
||||
}
|
||||
export interface StateInterface {
|
||||
// Define your own store structure, using submodules if needed
|
||||
// example: ExampleStateInterface;
|
||||
|
@ -91,6 +112,7 @@ export interface StateInterface {
|
|||
device_attribute: number;
|
||||
power_state: boolean;
|
||||
product_name: string;
|
||||
show_monitor_list:test_monitor[];
|
||||
custom_defines: CustomDefines;
|
||||
fusion_configuration: object;
|
||||
isLedPlayer: () => boolean;
|
||||
|
@ -359,7 +381,7 @@ export default store(function (/* { ssrContext } */) {
|
|||
power_state: false,
|
||||
fusion_configuration: {},
|
||||
product_name: EProductNames.LED_PLAYER,
|
||||
|
||||
show_monitor_list:[],
|
||||
custom_defines: new CustomDefines(),
|
||||
selected_projector: "0/0",
|
||||
EnableBlending: false,
|
||||
|
@ -380,6 +402,9 @@ export default store(function (/* { ssrContext } */) {
|
|||
setInitialized(state: StateInterface, playload?: any) {
|
||||
state.initialized = true;
|
||||
},
|
||||
setShowMonitorList(state: StateInterface, playload?: any) {
|
||||
state.show_monitor_list = playload
|
||||
},
|
||||
updateLandspace(state: StateInterface, playload?: any) {
|
||||
if (typeof playload == "boolean") {
|
||||
state.landspace = playload;
|
||||
|
@ -412,6 +437,8 @@ export default store(function (/* { ssrContext } */) {
|
|||
(state.device_attribute & EDeviceAttribute.CenterControl) != 0;
|
||||
state.custom_defines.function_mirroring_output =
|
||||
(state.device_attribute & EDeviceAttribute.MirroringOutput) != 0;
|
||||
state.custom_defines.function_magic_wall =
|
||||
(state.device_attribute & EDeviceAttribute.ProductMagicWall) != 0;
|
||||
}
|
||||
},
|
||||
setAvancedDebug(state: StateInterface, playload?: any) {
|
||||
|
|
Loading…
Reference in New Issue