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

fix(uart auto scroll): auto scroll was unchecked on quick data, and fix height of RxFrameRemain window that oscillate on quick data rate

This commit is contained in:
kerms 2024-06-08 20:14:12 +08:00
parent 99fada4c85
commit 021627caf8
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/text-data-viewer/textDataViewer.vue
View File

@ -163,14 +163,14 @@
</v-virtual-scroll> </v-virtual-scroll>
</div> </div>
<div class="shrink-0 flex max-h-14 mt-0.5 text-xs"> <div class="shrink-0 flex h-8 mt-0.5 text-xs">
<div class="flex shrink-0"> <div class="flex shrink-0">
<el-tooltip content="未满足断帧规则的数据（如：未超时），暂时实时显示在此区域。超过8192字节，自动断帧；" effect="light"> <el-tooltip content="未满足断帧规则的数据（如：未超时），暂时实时显示在此区域。超过8192字节，自动断帧；" effect="light">
<InlineSvg name="help" class="w-3.5 h-3.5 text-gray-500 cursor-help"></InlineSvg> <InlineSvg name="help" class="w-3.5 h-3.5 text-gray-500 cursor-help"></InlineSvg>
</el-tooltip> </el-tooltip>
<p>►</p> <p>►</p>
</div> </div>
<div class="p-0.5 border-2 rounded w-full overflow-auto font-mono text-nowrap"> <div ref="RxHexDumpRef" class="p-0.5 border-2 rounded w-full overflow-scroll font-mono text-nowrap">
<p v-html="store.RxRemainHexdump"></p> <p v-html="store.RxRemainHexdump"></p>
</div> </div>
</div> </div>
@ -265,10 +265,13 @@ const isHexStringValid = ref(false);
const uartInputTextBox = ref("") const uartInputTextBox = ref("")
const store = useDataViewerStore(); const store = useDataViewerStore();
const RxHexDumpRef = ref(document.body);
let lastScrollHeight = 0; let lastScrollHeight = 0;
const mutationObserver = new MutationObserver(() => { const mutationObserver = new MutationObserver(() => {
if (store.forceToBottom) { if (store.forceToBottom) {
lastScrollHeight = vuetifyVirtualScrollBarRef.value.scrollTop;
scrollToBottom(); scrollToBottom();
} }
}); });
@ -427,6 +430,12 @@ watch(() => store.filterChanged, (value) => {
} }
}) })
watch(() => store.RxRemainHexdump, value => {
if (value) {
RxHexDumpRef.value.scrollTop = RxHexDumpRef.value.scrollHeight;
}
})
watch(() => store.showVirtualScroll, () => { watch(() => store.showVirtualScroll, () => {
if (store.forceToBottom) { if (store.forceToBottom) {
scrollToBottom(); scrollToBottom();