github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 01:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

scroll perfomant implemetation

Browse Source
This commit is contained in:
Peter Olu 2022-04-25 18:56:09 +01:00
parent 36394113e2
commit d71808d036
2 changed files with 11 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/FullVue.vue
View File

@ -35,7 +35,6 @@ import { ref, watch, onMounted, defineComponent } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
// import { useAppStoreWithOut } from "@/store/modules/app";
import Configuration from "../views/dashboard/configuration"; import Configuration from "../views/dashboard/configuration";
import controls from "../views/dashboard/controls/index"; import controls from "../views/dashboard/controls/index";
@ -53,7 +52,6 @@ export default defineComponent({
const { t } = useI18n(); const { t } = useI18n();
const p = useRoute().params; const p = useRoute().params;
const currentItem = ref(""); const currentItem = ref("");
const initScroll = ref(0);
const scrollWrapRef = ref<any>(null); const scrollWrapRef = ref<any>(null);
watch( watch(
() => dashboardStore.layout, () => dashboardStore.layout,
@ -77,18 +75,7 @@ export default defineComponent({
document.querySelectorAll(".item").forEach((element) => { document.querySelectorAll(".item").forEach((element) => {
observer.observe(element); observer.observe(element);
}); });
} }
function scrollToFirstGraph(scrollUp: boolean) {
// const noNextEl =
// document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null;
// if (scrollUp && noNextEl) {
// initScroll.value++;
// if (initScroll.value > 1) {
// firstItem.value.scrollIntoView();
// initScroll.value = 0;
// }
// }
}
function initScroller() { function initScroller() {
scrollWrapRef?.value?.addEventListener("scroll", (e: Event) => { scrollWrapRef?.value?.addEventListener("scroll", (e: Event) => {
const isBottom = const isBottom =

42
src/views/dashboard/controls/Tab.vue
View File

@ -182,10 +182,7 @@ export default defineComponent({
const tabRef = ref<any>(""); const tabRef = ref<any>("");
const tabObserveContainer = ref<any>(null); const tabObserveContainer = ref<any>(null);
const currentItem = ref(""); const currentItem = ref("");
const firstItem = ref<any>();
const refScrollTimeOut = ref();
const currentScrollY = ref(0);
const initScroll = ref(0);
const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i); const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
if (dashboardStore.layout[l].children.length) { if (dashboardStore.layout[l].children.length) {
@ -202,18 +199,15 @@ export default defineComponent({
} }
function observeItems(kill = false) { function observeItems(kill = false) {
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach((element) => { entries.forEach((element) => {
if (element.isIntersecting && element.intersectionRatio > 0) { if (element.isIntersecting && element.intersectionRatio > 0) {
setTimeout(() => { setTimeout(() => {
currentItem.value = element.target.id; currentItem.value = element.target.id;
console.log("219-CurrentEl:", currentItem.value);
}, 200); }, 200);
} }
}); });
}); });
firstItem.value = document?.getElementById(`tabitem${graphs[0].i}`);
document.querySelectorAll(".tabitem").forEach((element) => { document.querySelectorAll(".tabitem").forEach((element) => {
observer.observe(element); observer.observe(element);
}); });
@ -292,34 +286,18 @@ export default defineComponent({
dashboardStore.layout[l].children[activeTabIndex.value].children dashboardStore.layout[l].children[activeTabIndex.value].children
); );
} }
function scrollToFirstGraph(scrollUp: boolean) {
const noNextEl =
document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null;
if (scrollUp && noNextEl) {
initScroll.value++;
if (initScroll.value > 1) {
firstItem.value.scrollIntoView();
initScroll.value = 0;
}
}
}
function initScrollWatcher() { function initScrollWatcher() {
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => { tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
if (refScrollTimeOut.value) { const isBottom =
clearTimeout(refScrollTimeOut.value); tabObserveContainer?.value?.offsetHeight +
} tabObserveContainer?.value?.scrollTop +
refScrollTimeOut.value = window.setTimeout(() => { 70 >
if ( tabObserveContainer?.value?.scrollHeight;
tabObserveContainer.value?.scrollTop > currentScrollY.value ||
tabObserveContainer.value?.scrollTop === currentScrollY.value
) {
setTimeout(() => {
scrollToFirstGraph(true);
}, 200);
}
currentScrollY.value = tabObserveContainer.value?.scrollTop; if (isBottom) {
}, 100); tabObserveContainer?.value.scroll(0, 0);
}
}); });
} }
document.body.addEventListener("click", handleClick, false); document.body.addEventListener("click", handleClick, false);