pref: optimize virtual scroll (#111)
This commit is contained in:
Hayden
@@ -31,20 +31,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ResponseScroll
|
||||
ref="responseScroll"
|
||||
:items="list"
|
||||
:itemSize="itemSize"
|
||||
:row-key="(item) => item.map(genModelKey).join(',')"
|
||||
class="h-full flex-1"
|
||||
>
|
||||
<ResponseScroll :items="list" :itemSize="itemSize" class="h-full flex-1">
|
||||
<template #item="{ item }">
|
||||
<div
|
||||
class="grid grid-cols-1 justify-center gap-8 px-8"
|
||||
:style="contentStyle"
|
||||
>
|
||||
<ModelCard
|
||||
v-for="model in item"
|
||||
v-for="model in item.row"
|
||||
:key="genModelKey(model)"
|
||||
:model="model"
|
||||
></ModelCard>
|
||||
@@ -75,7 +69,7 @@ import { chunk } from 'lodash'
|
||||
import { app } from 'scripts/comfyAPI'
|
||||
import { Model } from 'types/typings'
|
||||
import { genModelKey } from 'utils/model'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { isMobile, cardWidth, gutter, aspect } = useConfig()
|
||||
@@ -89,8 +83,6 @@ const { $2xl: $toolbar_2xl } = useContainerQueries(toolbarContainer)
|
||||
const contentContainer = ref<HTMLElement | null>(null)
|
||||
const { $lg: $content_lg } = useContainerQueries(contentContainer)
|
||||
|
||||
const responseScroll = ref()
|
||||
|
||||
const searchContent = ref<string>()
|
||||
|
||||
const currentType = ref('all')
|
||||
@@ -133,10 +125,6 @@ const sortOrderOptions = ref(
|
||||
}),
|
||||
)
|
||||
|
||||
watch([searchContent, currentType], () => {
|
||||
responseScroll.value.init()
|
||||
})
|
||||
|
||||
const itemSize = computed(() => {
|
||||
let itemWidth = cardWidth
|
||||
let itemGutter = gutter
|
||||
@@ -193,7 +181,9 @@ const list = computed(() => {
|
||||
|
||||
const sortedList = filterList.sort(sortStrategy)
|
||||
|
||||
return chunk(sortedList, cols.value)
|
||||
return chunk(sortedList, cols.value).map((row) => {
|
||||
return { key: row.map(genModelKey).join(','), row }
|
||||
})
|
||||
})
|
||||
|
||||
const contentStyle = computed(() => ({
|
||||
|
||||
@@ -1,57 +1,35 @@
|
||||
<template>
|
||||
<div data-scroll-area class="group/scroll relative overflow-hidden">
|
||||
<div
|
||||
ref="viewport"
|
||||
data-scroll-viewport
|
||||
class="h-full w-full overflow-auto scrollbar-none"
|
||||
:style="{ contain: items ? 'strict' : undefined }"
|
||||
>
|
||||
<div data-scroll-content class="relative min-w-full">
|
||||
<div class="group/scroll relative overflow-hidden">
|
||||
<div ref="viewport" class="h-full w-full overflow-auto scrollbar-none">
|
||||
<div ref="content">
|
||||
<slot name="default">
|
||||
<div
|
||||
v-for="(item, index) in loadedItems"
|
||||
:key="genRowKey(item, index)"
|
||||
:style="{ height: `${itemSize}px` }"
|
||||
>
|
||||
<slot name="item" :item="item"></slot>
|
||||
</div>
|
||||
<slot v-if="loadedItems.length === 0" name="empty">
|
||||
<slot v-if="renderedItems.length === 0" name="empty">
|
||||
<div class="absolute w-full py-20 text-center">No Data</div>
|
||||
</slot>
|
||||
|
||||
<div :style="{ height: `${headHeight}px` }"></div>
|
||||
<div>
|
||||
<div
|
||||
v-for="item in renderedItems"
|
||||
:key="item.key"
|
||||
:style="{ height: `${itemSize}px` }"
|
||||
data-virtual-item
|
||||
>
|
||||
<slot name="item" :item="item"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{ height: `${tailHeight}px` }"></div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-scroll-space
|
||||
class="pointer-events-none absolute left-0 top-0 h-px w-px"
|
||||
:style="spaceStyle"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="scroll in scrollbars"
|
||||
:key="scroll.direction"
|
||||
v-show="scroll.visible"
|
||||
v-bind="{ [`data-scroll-bar-${scroll.direction}`]: '' }"
|
||||
:class="[
|
||||
'pointer-events-none absolute z-auto h-full w-full rounded-full',
|
||||
'data-[scroll-bar-horizontal]:bottom-0 data-[scroll-bar-horizontal]:left-0 data-[scroll-bar-horizontal]:h-2',
|
||||
'data-[scroll-bar-vertical]:right-0 data-[scroll-bar-vertical]:top-0 data-[scroll-bar-vertical]:w-2',
|
||||
]"
|
||||
>
|
||||
<div class="absolute right-0 top-0 h-full w-2">
|
||||
<div
|
||||
v-bind="{ ['data-scroll-thumb']: scroll.direction }"
|
||||
:class="[
|
||||
'pointer-events-auto absolute h-full w-full rounded-full',
|
||||
'cursor-pointer bg-black dark:bg-white',
|
||||
'opacity-0 transition-opacity duration-300 group-hover/scroll:opacity-10',
|
||||
'absolute w-full cursor-pointer rounded-full bg-gray-500',
|
||||
'opacity-0 transition-opacity duration-300 group-hover/scroll:opacity-30',
|
||||
]"
|
||||
:style="{
|
||||
[scrollbarAttrs[scroll.direction].size]: `${scroll.size}px`,
|
||||
[scrollbarAttrs[scroll.direction].offset]: `${scroll.offset}px`,
|
||||
opacity: isDragging ? 0.1 : '',
|
||||
}"
|
||||
@mousedown="startDragThumb"
|
||||
:style="{ height: `${thumbSize}px`, top: `${thumbOffset}px` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,258 +38,75 @@
|
||||
<script setup lang="ts" generic="T">
|
||||
import { useContainerResize } from 'hooks/resize'
|
||||
import { useContainerScroll } from 'hooks/scroll'
|
||||
import { clamp, throttle } from 'lodash'
|
||||
import { nextTick, onUnmounted, ref, watch } from 'vue'
|
||||
import { clamp } from 'lodash'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
interface ScrollAreaProps {
|
||||
items?: T[][]
|
||||
items?: (T & { key: string })[]
|
||||
itemSize?: number
|
||||
scrollbar?: boolean
|
||||
rowKey?: string | ((item: T[]) => string)
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ScrollAreaProps>(), {
|
||||
scrollbar: true,
|
||||
})
|
||||
|
||||
type ScrollbarDirection = 'horizontal' | 'vertical'
|
||||
|
||||
interface Scrollbar {
|
||||
direction: ScrollbarDirection
|
||||
visible: boolean
|
||||
size: number
|
||||
offset: number
|
||||
}
|
||||
|
||||
interface ScrollbarAttribute {
|
||||
clientSize: string
|
||||
scrollOffset: string
|
||||
pagePosition: string
|
||||
offset: string
|
||||
size: string
|
||||
}
|
||||
|
||||
const scrollbarAttrs: Record<ScrollbarDirection, ScrollbarAttribute> = {
|
||||
horizontal: {
|
||||
clientSize: 'clientWidth',
|
||||
scrollOffset: 'scrollLeft',
|
||||
pagePosition: 'pageX',
|
||||
offset: 'left',
|
||||
size: 'width',
|
||||
},
|
||||
vertical: {
|
||||
clientSize: 'clientHeight',
|
||||
scrollOffset: 'scrollTop',
|
||||
pagePosition: 'pageY',
|
||||
offset: 'top',
|
||||
size: 'height',
|
||||
},
|
||||
}
|
||||
|
||||
const scrollbars = ref<Record<ScrollbarDirection, Scrollbar>>({
|
||||
horizontal: {
|
||||
direction: 'horizontal',
|
||||
visible: props.scrollbar,
|
||||
size: 0,
|
||||
offset: 0,
|
||||
},
|
||||
vertical: {
|
||||
direction: 'vertical',
|
||||
visible: props.scrollbar,
|
||||
size: 0,
|
||||
offset: 0,
|
||||
},
|
||||
})
|
||||
|
||||
const isDragging = ref(false)
|
||||
|
||||
const spaceStyle = ref({})
|
||||
const loadedItems = ref<T[][]>([])
|
||||
|
||||
const genRowKey = (item: any | any[], index: number) => {
|
||||
if (typeof props.rowKey === 'function') {
|
||||
return props.rowKey(item)
|
||||
}
|
||||
return item[props.rowKey ?? 'key'] ?? index
|
||||
}
|
||||
|
||||
const setSpacerSize = () => {
|
||||
const items = props.items
|
||||
if (items) {
|
||||
const itemSize = props.itemSize ?? 0
|
||||
spaceStyle.value = { height: `${itemSize * items.length}px` }
|
||||
} else {
|
||||
spaceStyle.value = {}
|
||||
}
|
||||
}
|
||||
|
||||
const getContainerContent = (raw?: boolean): HTMLElement => {
|
||||
const container = viewport.value as HTMLElement
|
||||
|
||||
if (props.items && !raw) {
|
||||
return container.querySelector('[data-scroll-space]')!
|
||||
}
|
||||
return container.querySelector('[data-scroll-content]')!
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
const container = viewport.value as HTMLElement
|
||||
container.scrollTop = 0
|
||||
getContainerContent().style.transform = ''
|
||||
}
|
||||
|
||||
const calculateLoadItems = () => {
|
||||
let visibleItems: any[] = []
|
||||
|
||||
if (props.items) {
|
||||
const container = viewport.value as HTMLElement
|
||||
const content = getContainerContent(true)
|
||||
|
||||
const resolveVisibleItems = (items: any[], attr: ScrollbarAttribute) => {
|
||||
const containerSize = container[attr.clientSize]
|
||||
const itemSize = props.itemSize!
|
||||
const viewCount = Math.ceil(containerSize / itemSize)
|
||||
|
||||
let start = Math.floor(container[attr.scrollOffset] / itemSize)
|
||||
const offset = start * itemSize
|
||||
|
||||
let end = start + viewCount
|
||||
end = Math.min(end + viewCount, items.length)
|
||||
|
||||
content.style.transform = `translateY(${offset}px)`
|
||||
return items.slice(start, end)
|
||||
}
|
||||
|
||||
visibleItems = resolveVisibleItems(props.items, scrollbarAttrs.vertical)
|
||||
}
|
||||
|
||||
loadedItems.value = visibleItems
|
||||
}
|
||||
|
||||
const calculateScrollThumbSize = () => {
|
||||
const container = viewport.value as HTMLElement
|
||||
const content = getContainerContent()
|
||||
|
||||
const resolveScrollbarSize = (item: Scrollbar, attr: ScrollbarAttribute) => {
|
||||
const containerSize: number = container[attr.clientSize]
|
||||
const contentSize: number = content[attr.clientSize]
|
||||
item.visible = props.scrollbar && contentSize > containerSize
|
||||
item.size = Math.max(Math.pow(containerSize, 2) / contentSize, 16)
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
resolveScrollbarSize(scrollbars.value.horizontal, scrollbarAttrs.horizontal)
|
||||
resolveScrollbarSize(scrollbars.value.vertical, scrollbarAttrs.vertical)
|
||||
})
|
||||
}
|
||||
const props = defineProps<ScrollAreaProps>()
|
||||
|
||||
const viewport = ref<HTMLElement | null>(null)
|
||||
const content = ref<HTMLElement | null>(null)
|
||||
|
||||
const { width, height } = useContainerResize(viewport)
|
||||
const { height: viewportHeight } = useContainerResize(viewport)
|
||||
const { height: contentHeight } = useContainerResize(content)
|
||||
const { y: scrollY } = useContainerScroll(viewport)
|
||||
|
||||
watch([width, height], () => {
|
||||
if (isDragging.value) return
|
||||
const itemSize = computed(() => props.itemSize || 0)
|
||||
|
||||
calculateScrollThumbSize()
|
||||
const viewRows = computed(() =>
|
||||
Math.ceil(viewportHeight.value / itemSize.value),
|
||||
)
|
||||
const offsetRows = computed(() => Math.floor(scrollY.value / itemSize.value))
|
||||
|
||||
const items = computed(() => {
|
||||
return props.items ?? []
|
||||
})
|
||||
|
||||
useContainerScroll(viewport, {
|
||||
onScroll: (event) => {
|
||||
if (isDragging.value) return
|
||||
const state = computed(() => {
|
||||
const bufferRows = viewRows.value
|
||||
|
||||
const container = event.target as HTMLDivElement
|
||||
const content = getContainerContent()
|
||||
const fromRow = offsetRows.value - bufferRows
|
||||
const toRow = offsetRows.value + bufferRows + viewRows.value
|
||||
|
||||
const resolveOffset = (item: Scrollbar, attr: ScrollbarAttribute) => {
|
||||
const containerSize = container[attr.clientSize]
|
||||
const contentSize = content[attr.clientSize]
|
||||
const scrollOffset = container[attr.scrollOffset]
|
||||
const itemCount = items.value.length
|
||||
|
||||
item.offset =
|
||||
(scrollOffset / (contentSize - containerSize)) *
|
||||
(containerSize - item.size)
|
||||
}
|
||||
|
||||
resolveOffset(scrollbars.value.horizontal, scrollbarAttrs.horizontal)
|
||||
resolveOffset(scrollbars.value.vertical, scrollbarAttrs.vertical)
|
||||
|
||||
calculateLoadItems()
|
||||
},
|
||||
})
|
||||
|
||||
const draggingDirection = ref<ScrollbarDirection>()
|
||||
const prevDraggingEvent = ref<MouseEvent>()
|
||||
|
||||
const moveThumb = throttle((event: MouseEvent) => {
|
||||
if (isDragging.value) {
|
||||
const container = viewport.value!
|
||||
const content = getContainerContent()
|
||||
|
||||
const resolveOffset = (item: Scrollbar, attr: ScrollbarAttribute) => {
|
||||
const containerSize = container[attr.clientSize]
|
||||
const contentSize = content[attr.clientSize]
|
||||
|
||||
// Resolve thumb position
|
||||
const prevPagePos = prevDraggingEvent.value![attr.pagePosition]
|
||||
const currPagePos = event[attr.pagePosition]
|
||||
const offset = currPagePos - prevPagePos
|
||||
item.offset = clamp(item.offset + offset, 0, containerSize - item.size)
|
||||
|
||||
// Resolve scroll position
|
||||
const scrollOffset = containerSize - item.size
|
||||
const offsetSize = contentSize - containerSize
|
||||
|
||||
container[attr.scrollOffset] = (item.offset / scrollOffset) * offsetSize
|
||||
}
|
||||
|
||||
const scrollDirection = draggingDirection.value!
|
||||
|
||||
resolveOffset(
|
||||
scrollbars.value[scrollDirection],
|
||||
scrollbarAttrs[scrollDirection],
|
||||
)
|
||||
prevDraggingEvent.value = event
|
||||
|
||||
calculateLoadItems()
|
||||
return {
|
||||
start: clamp(fromRow, 0, itemCount),
|
||||
end: clamp(toRow, fromRow, itemCount),
|
||||
}
|
||||
})
|
||||
|
||||
const stopMoveThumb = () => {
|
||||
isDragging.value = false
|
||||
draggingDirection.value = undefined
|
||||
prevDraggingEvent.value = undefined
|
||||
document.removeEventListener('mousemove', moveThumb)
|
||||
document.removeEventListener('mouseup', stopMoveThumb)
|
||||
document.body.style.userSelect = ''
|
||||
document.body.style.cursor = ''
|
||||
}
|
||||
const renderedItems = computed(() => {
|
||||
const { start, end } = state.value
|
||||
|
||||
const startDragThumb = (event: MouseEvent) => {
|
||||
isDragging.value = true
|
||||
const target = event.target as HTMLElement
|
||||
draggingDirection.value = <any>target.getAttribute('data-scroll-thumb')
|
||||
prevDraggingEvent.value = event
|
||||
document.addEventListener('mousemove', moveThumb)
|
||||
document.addEventListener('mouseup', stopMoveThumb)
|
||||
document.body.style.userSelect = 'none'
|
||||
document.body.style.cursor = 'default'
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.items,
|
||||
() => {
|
||||
setSpacerSize()
|
||||
calculateScrollThumbSize()
|
||||
calculateLoadItems()
|
||||
},
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
stopMoveThumb()
|
||||
return props.items?.slice(start, end) ?? []
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
viewport,
|
||||
init,
|
||||
const headHeight = computed(() => {
|
||||
return state.value.start * itemSize.value
|
||||
})
|
||||
|
||||
const tailHeight = computed(() => {
|
||||
return (items.value.length - state.value.end) * itemSize.value
|
||||
})
|
||||
|
||||
const thumbSize = computed(() => {
|
||||
if (viewportHeight.value >= contentHeight.value) {
|
||||
return 0
|
||||
}
|
||||
|
||||
const thumbHeight = Math.pow(viewportHeight.value, 2) / contentHeight.value
|
||||
return Math.max(thumbHeight, 16)
|
||||
})
|
||||
|
||||
const thumbOffset = computed(() => {
|
||||
return (
|
||||
(scrollY.value / (contentHeight.value - viewportHeight.value)) *
|
||||
(viewportHeight.value - thumbSize.value)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user