kerms
/
wireless-esp32-tools-web-host
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(uart layout) use localStorage to store settings and import/export

This commit is contained in:
kerms 2024-07-31 20:38:32 +08:00
parent aa4e83937a
commit 6b2d195faf
3 changed files with 105 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/stores/dataViewerStore.ts
View File

@ -834,6 +834,39 @@ export const useDataViewerStore = defineStore('text-viewer', () => {
isHexStringValid, isHexStringValid,
} }
interface WinProperty {
show: boolean;
width: string;
height: string;
borderSize: number;
}
/* window layout */
const winLeft = useStorage('winLeft',{
show: true,
width: "100px",
height: "100px",
borderSize: 3,
});
/* window layout */
const winRight = useStorage('winRight',{
show: true,
width: "100px",
height: "100px",
borderSize: 3,
});
const winAutoLayout = useStorage('winAuto', true);
const winLayoutMode = useStorage('winLayout', 'row');
const winLayoutRet = {
winLeft,
winRight,
winAutoLayout,
winLayoutMode,
}
return { return {
addItem, addItem,
@ -887,5 +920,6 @@ export const useDataViewerStore = defineStore('text-viewer', () => {
uartBaudReal, uartBaudReal,
setUartBaud, setUartBaud,
...loopSendRet, ...loopSendRet,
...winLayoutRet,
} }
}); });

132
src/views/Uart.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<div class="button-m-0 messages-container flex flex-grow overflow-hidden" :class="{'flex-col': layoutMode==='col'}"> <div class="button-m-0 messages-container flex flex-grow overflow-hidden" :class="{'flex-col': store.winLayoutMode ==='col'}">
<div v-show="store.configPanelShow" ref="win1Ref" class="bg-gray-50 flex-shrink-0 overflow-auto" <div v-show="store.configPanelShow" ref="win1Ref" class="bg-gray-50 flex-shrink-0 overflow-auto"
:class="{ :class="{
'max-w-60': layoutMode==='row', 'xl:max-w-80': layoutMode==='row', 'max-w-60': store.winLayoutMode==='row', 'xl:max-w-80': store.winLayoutMode==='row',
'min-w-60': layoutMode==='row', 'xl:min-w-80': layoutMode==='row' 'min-w-60': store.winLayoutMode==='row', 'xl:min-w-80': store.winLayoutMode==='row'
}" }"
> >
<text-data-config></text-data-config> <text-data-config></text-data-config>
</div> </div>
<div v-show="store.configPanelShow && (winDataView.show || win2.show)" ref="firstWinResizeRef"></div> <div v-show="store.configPanelShow && (winDataView.show || store.winRight.show)" ref="firstWinResizeRef"></div>
<div v-show="winDataView.show" class="flex flex-col flex-grow overflow-hidden p-2"> <div v-show="winDataView.show" class="flex flex-col flex-grow overflow-hidden p-2">
<textDataViewer></textDataViewer> <textDataViewer></textDataViewer>
</div> </div>
<div v-show="winDataView.show && win2.show" ref="thirdWinResizeRef"></div> <div v-show="winDataView.show && store.winRight.show" ref="thirdWinResizeRef"></div>
<div v-show="win2.show" ref="win2Ref" :class="{ <div v-show="store.winRight.show" ref="win2Ref" :class="{
'max-w-80': layoutMode==='row', 'xl:max-w-96': layoutMode==='row', 'max-w-80': store.winLayoutMode==='row', 'xl:max-w-96': store.winLayoutMode==='row',
'min-w-80': layoutMode==='row', 'xl:min-w-96': layoutMode==='row' 'min-w-80': store.winLayoutMode==='row', 'xl:min-w-96': store.winLayoutMode==='row'
}" }"
class="bg-gray-50 flex flex-col flex-shrink-0 min-h-32 overflow-auto p-2"> class="bg-gray-50 flex flex-col flex-shrink-0 min-h-32 overflow-auto p-2">
<TextDataMacro></TextDataMacro> <TextDataMacro @winSizeRefresh="handleWinSizeRefresh"></TextDataMacro>
</div> </div>
</div> </div>
@ -36,13 +36,13 @@
> >
<div class="button-m-0 flex flex-col space-y-2"> <div class="button-m-0 flex flex-col space-y-2">
<div class="custom-style flex justify-center"> <div class="custom-style flex justify-center">
<el-segmented v-model="layoutMode" :options="layoutOptions" size="small"/> <el-segmented v-model="store.winLayoutMode" :options="layoutOptions" size="small"/>
</div> </div>
<el-checkbox label="自适应" v-model="layoutConf.isAutoHide" border size="small" <el-checkbox label="自适应" v-model="store.winAutoLayout" border size="small"
:disabled="layoutMode==='col'"/> :disabled="store.winLayoutMode==='col'"/>
<el-checkbox label="设置窗" v-model="store.configPanelShow" border size="small" :disabled="layoutConf.isAutoHide"/> <el-checkbox label="设置窗" v-model="store.configPanelShow" border size="small" :disabled="store.winAutoLayout"/>
<el-checkbox label="数据窗" v-model="winDataView.show" border size="small" :disabled="layoutConf.isAutoHide"/> <el-checkbox label="数据窗" v-model="winDataView.show" border size="small" :disabled="store.winAutoLayout"/>
<el-checkbox label="快捷窗" v-model="win2.show" border size="small" :disabled="layoutConf.isAutoHide"/> <el-checkbox label="快捷窗" v-model="store.winRight.show" border size="small" :disabled="store.winAutoLayout"/>
</div> </div>
<template #reference> <template #reference>
@ -68,10 +68,12 @@ import {
uart_get_baud, uart_get_baud,
uart_get_config, uart_get_config,
uart_get_default_num, uart_get_default_num,
uart_set_baud,
uart_set_config,
WtUartCmd WtUartCmd
} from '@/api/apiUart'; } from '@/api/apiUart';
/* TODO: use https://antoniandre.github.io/splitpanes/ */
import {type ApiBinaryMsg} from '@/api/binDataDef'; import {type ApiBinaryMsg} from '@/api/binDataDef';
import * as df from '@/api/apiDataFlow'; import * as df from '@/api/apiDataFlow';
import textDataViewer from "@/views/text-data-viewer/textDataViewer.vue"; import textDataViewer from "@/views/text-data-viewer/textDataViewer.vue";
@ -96,7 +98,6 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
const layoutConf = reactive({ const layoutConf = reactive({
isSmall: breakpoints.smaller("sm"), isSmall: breakpoints.smaller("sm"),
isMedium: breakpoints.smaller("lg"), isMedium: breakpoints.smaller("lg"),
isAutoHide: ref(true)
}); });
const layoutOptions = [{ const layoutOptions = [{
@ -107,8 +108,6 @@ const layoutOptions = [{
value: 'col' value: 'col'
}] }]
const layoutMode = ref(layoutOptions[0].value);
interface WinProperty { interface WinProperty {
show: boolean; show: boolean;
width: string; width: string;
@ -116,19 +115,6 @@ interface WinProperty {
borderSize: number; borderSize: number;
} }
const win1 = reactive<WinProperty>({
show: true,
width: "100px",
height: "100px",
borderSize: 3,
});
const win2 = reactive<WinProperty>({
show: true,
width: "100px",
height: "100px",
borderSize: 3,
});
const winDataView = reactive({ const winDataView = reactive({
show: true, show: true,
@ -140,7 +126,7 @@ const ctx = reactive({
}); });
function updateCursor(i: HTMLElement) { function updateCursor(i: HTMLElement) {
if (layoutMode.value === 'row') { if (store.winLayoutMode === 'row') {
i.style.cursor = "col-resize"; i.style.cursor = "col-resize";
} else { } else {
i.style.cursor = "row-resize"; i.style.cursor = "row-resize";
@ -148,7 +134,7 @@ function updateCursor(i: HTMLElement) {
} }
function updateWin(r: Ref<HTMLElement>, p: UnwrapRef<WinProperty>) { function updateWin(r: Ref<HTMLElement>, p: UnwrapRef<WinProperty>) {
if (layoutMode.value === 'row') { if (store.winLayoutMode === 'row') {
r.value.style.minHeight = ""; r.value.style.minHeight = "";
r.value.style.maxHeight = "" r.value.style.maxHeight = ""
if (winDataView.show) { if (winDataView.show) {
@ -172,14 +158,14 @@ function updateCursors() {
function updateResizer() { function updateResizer() {
updateCursors(); updateCursors();
updateWin(win1Ref, win1); updateWin(win1Ref, store.winLeft);
updateWin(win2Ref, win2); updateWin(win2Ref, store.winRight);
} }
function mouseResize(e: MouseEvent) { function mouseResize(e: MouseEvent) {
const curTarget = e.target as HTMLElement const curTarget = e.target as HTMLElement
if (layoutMode.value === 'row') { if (store.winLayoutMode === 'row') {
let f = e.clientX; let f = e.clientX;
if (ctx.curResizeTarget === "first") { if (ctx.curResizeTarget === "first") {
win1Ref.value.style.minWidth = f + "px"; win1Ref.value.style.minWidth = f + "px";
@ -190,8 +176,8 @@ function mouseResize(e: MouseEvent) {
"layerX", e.layerX, "layerY", e.layerY, "offsetX", e.offsetX, "offsetY", e.offsetY, "layerX", e.layerX, "layerY", e.layerY, "offsetX", e.offsetX, "offsetY", e.offsetY,
"pageX", e.pageX, "pageY", e.pageY, win2Ref.value.clientHeight); "pageX", e.pageX, "pageY", e.pageY, win2Ref.value.clientHeight);
} }
win2Ref.value.style.minWidth = document.body.scrollWidth - f - win2.borderSize + "px"; win2Ref.value.style.minWidth = document.body.scrollWidth - f - store.winRight.borderSize + "px";
win2Ref.value.style.maxWidth = document.body.scrollWidth - f - win2.borderSize + "px"; win2Ref.value.style.maxWidth = document.body.scrollWidth - f - store.winRight.borderSize + "px";
} }
} else { } else {
/* col mode */ /* col mode */
@ -215,14 +201,14 @@ function touchResize(e: TouchEvent) {
let t = e.touches[0]; let t = e.touches[0];
let f: number; let f: number;
if (layoutMode.value === 'row') { if (store.winLayoutMode === 'row') {
f = t.clientX; f = t.clientX;
if (ctx.curResizeTarget === "first") { if (ctx.curResizeTarget === "first") {
win1Ref.value.style.minWidth = f + "px"; win1Ref.value.style.minWidth = f + "px";
win1Ref.value.style.maxWidth = f + "px"; win1Ref.value.style.maxWidth = f + "px";
} else { } else {
win2Ref.value.style.minWidth = document.body.scrollWidth - f - win2.borderSize + "px"; win2Ref.value.style.minWidth = document.body.scrollWidth - f - store.winRight.borderSize + "px";
win2Ref.value.style.maxWidth = document.body.scrollWidth - f - win2.borderSize + "px"; win2Ref.value.style.maxWidth = document.body.scrollWidth - f - store.winRight.borderSize + "px";
} }
} else { } else {
/* column layout mode */ /* column layout mode */
@ -233,8 +219,8 @@ function touchResize(e: TouchEvent) {
win1Ref.value.style.maxHeight = f - ctx.curHeightOffset + "px"; win1Ref.value.style.maxHeight = f - ctx.curHeightOffset + "px";
} else { } else {
/* quick access window */ /* quick access window */
win2Ref.value.style.minHeight = document.body.scrollHeight - f - win2.borderSize + "px"; win2Ref.value.style.minHeight = document.body.scrollHeight - f - store.winRight.borderSize + "px";
win2Ref.value.style.maxHeight = document.body.scrollHeight - f - win2.borderSize + "px"; win2Ref.value.style.maxHeight = document.body.scrollHeight - f - store.winRight.borderSize + "px";
} }
} }
} }
@ -262,24 +248,24 @@ function startResize(event: Event) {
win2Ref.value.style.transition = 'initial'; win2Ref.value.style.transition = 'initial';
document.addEventListener("mousemove", mouseResize, false); document.addEventListener("mousemove", mouseResize, false);
document.addEventListener("touchmove", touchResize, false); document.addEventListener("touchmove", touchResize, false);
layoutConf.isAutoHide = false; store.winAutoLayout = false;
} }
function stopResize() { function stopResize() {
if (win1Ref.value) { if (win1Ref.value) {
win1Ref.value.style.transition = ''; win1Ref.value.style.transition = '';
if (layoutMode.value === "row") { if (store.winLayoutMode === "row") {
win1.width = win1Ref.value.style.minWidth; store.winLeft.width = win1Ref.value.style.minWidth;
} else { } else {
win1.height = win1Ref.value.style.minHeight; store.winLeft.height = win1Ref.value.style.minHeight;
} }
} }
if (win2Ref.value) { if (win2Ref.value) {
win2Ref.value.style.transition = ''; win2Ref.value.style.transition = '';
if (layoutMode.value === "row") { if (store.winLayoutMode === "row") {
win2.width = win1Ref.value.style.minWidth; store.winRight.width = win2Ref.value.style.minWidth;
} else { } else {
win2.height = win1Ref.value.style.minHeight; store.winRight.height = win2Ref.value.style.minHeight;
} }
} }
document.body.style.cursor = ''; document.body.style.cursor = '';
@ -287,19 +273,19 @@ function stopResize() {
document.removeEventListener("touchmove", touchResize, false); document.removeEventListener("touchmove", touchResize, false);
} }
watch(() => layoutMode.value, (value) => { watch(() => store.winLayoutMode, (value) => {
updateResizer(); updateResizer();
if (value === "col") { if (value === "col") {
layoutConf.isAutoHide = false; store.winAutoLayout = false;
} }
}); });
watch([ watch([
() => layoutConf.isSmall, () => layoutConf.isSmall,
() => layoutConf.isAutoHide () => store.winAutoLayout
], (value) => { ], (value) => {
if (layoutConf.isAutoHide) { if (store.winAutoLayout) {
win2.show = !value[0]; store.winRight.show = !value[0];
win1Ref.value.style.minWidth = ""; win1Ref.value.style.minWidth = "";
win1Ref.value.style.maxWidth = ""; win1Ref.value.style.maxWidth = "";
} }
@ -309,9 +295,9 @@ watch([
watch([ watch([
() => layoutConf.isMedium, () => layoutConf.isMedium,
() => layoutConf.isAutoHide () => store.winAutoLayout
], (value) => { ], (value) => {
if (layoutConf.isAutoHide) { if (store.winAutoLayout) {
store.configPanelShow = !value[0]; store.configPanelShow = !value[0];
win1Ref.value.style.minWidth = ""; win1Ref.value.style.minWidth = "";
win1Ref.value.style.maxWidth = ""; win1Ref.value.style.maxWidth = "";
@ -337,7 +323,7 @@ watch(() => winDataView.show, value => {
} }
}); });
watch(() => win2.show, value => { watch(() => store.winRight.show, value => {
if (!value && !winDataView.show) { if (!value && !winDataView.show) {
win1Ref.value.style.maxHeight = ""; win1Ref.value.style.maxHeight = "";
win1Ref.value.style.maxHeight = ""; win1Ref.value.style.maxHeight = "";
@ -404,6 +390,27 @@ function updateUartData() {
df.wt_data_flow_attach_cur_to_sender(0); df.wt_data_flow_attach_cur_to_sender(0);
} }
function handleWinSizeRefresh() {
if (!store.winAutoLayout) {
if (win1Ref.value) {
if (store.winLayoutMode === "row") {
win1Ref.value.style.minWidth = store.winLeft.width;
} else {
win1Ref.value.style.minHeight = store.winLeft.height;
win1Ref.value.style.maxHeight = store.winRight.height;
}
}
if (win2Ref.value) {
if (store.winLayoutMode === "row") {
win2Ref.value.style.minWidth = store.winRight.width;
} else {
win2Ref.value.style.minHeight = store.winRight.height;
win2Ref.value.style.maxHeight = store.winRight.height;
}
}
}
}
onMounted(() => { onMounted(() => {
registerModule(api.WtModuleID.UART, { registerModule(api.WtModuleID.UART, {
ctrlCallback: onClientCtrl, ctrlCallback: onClientCtrl,
@ -411,8 +418,8 @@ onMounted(() => {
serverBinMsgCallback: onUartBinaryMsg, serverBinMsgCallback: onUartBinaryMsg,
}); });
firstWinResizeRef.value.style.borderWidth = win1.borderSize + "px"; firstWinResizeRef.value.style.borderWidth = store.winLeft.borderSize + "px";
thirdWinResizeRef.value.style.borderWidth = win2.borderSize + "px"; thirdWinResizeRef.value.style.borderWidth = store.winRight.borderSize + "px";
updateCursors() updateCursors()
if (firstWinResizeRef.value) { if (firstWinResizeRef.value) {
@ -428,6 +435,7 @@ onMounted(() => {
document.addEventListener("touchend", stopResize, false); document.addEventListener("touchend", stopResize, false);
updateUartData(); updateUartData();
store.acceptIncomingData = wsStore.state === ControlEvent.CONNECTED; store.acceptIncomingData = wsStore.state === ControlEvent.CONNECTED;
handleWinSizeRefresh()
}); });
onUnmounted(() => { onUnmounted(() => {

1
src/views/text-data-viewer/textDataMacro.vue
View File

@ -62,6 +62,7 @@ import {useStorage} from '@vueuse/core';
const editMode = ref(false); const editMode = ref(false);
const draggableEnabled = ref(true); const draggableEnabled = ref(true);
const store = useDataViewerStore(); const store = useDataViewerStore();
const emit = defineEmits(['winSizeRefresh'])
interface macroItem { interface macroItem {
value: string; value: string;