Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-01 03:31:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract SCROLL_THROTTLE_MS constant and inline applyWindow

Browse Source 
Apply coderabbitai suggestions
This commit is contained in:
Yourz
2025-12-15 20:26:53 +08:00
parent e094e42c07
commit ed186f9033
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/common/TreeExplorer.vue
View File

@@ -108,6 +108,7 @@ const BUFFER_SIZE = 20
const NODE_HEIGHT = 28 // Approximate height per tree node in pixels const NODE_HEIGHT = 28 // Approximate height per tree node in pixels
const SCROLL_FORWARD_THRESHOLD = 0.7 // Shift window forward when scrolled past 70% const SCROLL_FORWARD_THRESHOLD = 0.7 // Shift window forward when scrolled past 70%
const SCROLL_BACKWARD_THRESHOLD = 0.3 // Shift window backward when scrolled below 30% const SCROLL_BACKWARD_THRESHOLD = 0.3 // Shift window backward when scrolled below 30%
const SCROLL_THROTTLE_MS = 100 // Throttle scroll handler to every 100ms
// For each parent node, track the sliding window range [start, end) // For each parent node, track the sliding window range [start, end)
const parentWindowRanges = ref<Record<string, WindowRange>>({}) const parentWindowRanges = ref<Record<string, WindowRange>>({})
@@ -223,7 +224,7 @@ const handleTreeScroll = useThrottleFn(() => {
if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) { if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) {
shiftWindowsBackward() shiftWindowsBackward()
} }
}, 100) }, SCROLL_THROTTLE_MS)
// Shift window for a single node in given direction (recursive) // Shift window for a single node in given direction (recursive)
type ShiftDirection = 'forward' | 'backward' type ShiftDirection = 'forward' | 'backward'
@@ -293,16 +294,14 @@ const nodeKeyMap = computed<Record<string, RenderedTreeExplorerNode>>(() => {
}) })
// Apply sliding window to limit visible children // Apply sliding window to limit visible children
const applyWindow = (
node: RenderedTreeExplorerNode
): RenderedTreeExplorerNode =>
applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
// Final tree to display with sliding window applied // Final tree to display with sliding window applied
const displayRoot = computed<RenderedTreeExplorerNode>(() => { const displayRoot = computed<RenderedTreeExplorerNode>(() => {
return { return {
...renderedRoot.value, ...renderedRoot.value,
children: (renderedRoot.value.children || []).map(applyWindow) children: (renderedRoot.value.children || []).map((node) =>
applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
)
} }
}) })