278 lines
13 KiB
JavaScript
278 lines
13 KiB
JavaScript
|
import { Component, NewState, Util, Hash } from '@web/state'
|
||
|
|
|
||
|
|
export const FastListComponent = Component.register('FastList', container => {
|
||
|
|
const itemHeights = new Map()
|
||
|
|
const groupHeights = new Map()
|
||
|
|
let groupItemCount = 1
|
||
|
|
container.state.renderedList = []
|
||
|
|
const avg = Util.newAvg()
|
||
|
|
let containerPaddingTop = 0
|
||
|
|
let containerRowGap = 0
|
||
|
|
let topMargin = 0
|
||
|
|
let listStartIndex = 0
|
||
|
|
let visibleStartIndex = 0
|
||
|
|
let visibleCount = 10
|
||
|
|
let listInited = false
|
||
|
|
|
||
|
|
container.onItemUpdate = (index, node) => {
|
||
|
|
const absoluteIndex = index + listStartIndex
|
||
|
|
const oldHeight = itemHeights.get(absoluteIndex)
|
||
|
|
const style = window.getComputedStyle(node)
|
||
|
|
const marginTop = parseFloat(style.marginTop) || 0
|
||
|
|
const marginBottom = parseFloat(style.marginBottom) || 0
|
||
|
|
const newHeight = node.offsetHeight + marginTop + marginBottom + containerRowGap
|
||
|
|
if (absoluteIndex === 0 && !topMargin) topMargin = marginTop
|
||
|
|
if (newHeight !== oldHeight) {
|
||
|
|
itemHeights.set(absoluteIndex, newHeight)
|
||
|
|
avg.add(newHeight)
|
||
|
|
const offset = newHeight - oldHeight || 0
|
||
|
|
const groupIndex = absoluteIndex - (absoluteIndex % groupItemCount)
|
||
|
|
if (groupHeights.has(groupIndex)) groupHeights.set(groupIndex, groupHeights.get(groupIndex) + offset)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
container.refresh = () => {
|
||
|
|
if (!listInited) return
|
||
|
|
visibleCount = Math.ceil((container.clientHeight || 100) / (avg.get() || 32))
|
||
|
|
let list = []
|
||
|
|
const fullList = container.state.list
|
||
|
|
const fullSize = fullList.length
|
||
|
|
let i = 0
|
||
|
|
let prev = containerPaddingTop + topMargin + containerRowGap
|
||
|
|
let post = 0
|
||
|
|
let starus = 0
|
||
|
|
for (i = 0; i < fullSize; i++) {
|
||
|
|
if (starus === 0) {
|
||
|
|
const gh = groupHeights.get(i)
|
||
|
|
if (gh && prev + gh < container.scrollTop) {
|
||
|
|
prev += gh
|
||
|
|
i += Math.min(groupItemCount, fullSize - i) - 1
|
||
|
|
} else {
|
||
|
|
const ih = itemHeights.get(i)
|
||
|
|
if (prev + ih < container.scrollTop) {
|
||
|
|
prev += ih
|
||
|
|
} else {
|
||
|
|
starus = 1
|
||
|
|
visibleStartIndex = Math.max(0, i)
|
||
|
|
listStartIndex = Math.max(0, visibleStartIndex - visibleCount)
|
||
|
|
const listEndIndex = Math.min(listStartIndex + visibleCount * 3, fullSize)
|
||
|
|
i = listEndIndex - 1
|
||
|
|
list = fullList.slice(listStartIndex, listEndIndex)
|
||
|
|
for (let j = listStartIndex; j < visibleStartIndex; j++) prev -= itemHeights.get(j)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else if (starus === 1) {
|
||
|
|
const gh = groupHeights.get(i)
|
||
|
|
if (gh) {
|
||
|
|
post += gh
|
||
|
|
i += groupItemCount - 1
|
||
|
|
} else {
|
||
|
|
post += itemHeights.get(i)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
container.state.prevHeight = prev - containerPaddingTop - topMargin - containerRowGap
|
||
|
|
container.state.postHeight = post
|
||
|
|
container.state.renderedList = list
|
||
|
|
}
|
||
|
|
container.state.__watch('list', list => {
|
||
|
|
console.log('FastList list bound, size:', list?.length, container.id);
|
||
|
|
listInited = false
|
||
|
|
itemHeights.clear()
|
||
|
|
groupHeights.clear()
|
||
|
|
avg.clear()
|
||
|
|
if (!list?.length) return
|
||
|
|
|
||
|
|
const listSize = list.length || 0
|
||
|
|
groupItemCount = Math.ceil(Math.sqrt(listSize)) || 10
|
||
|
|
const style = window.getComputedStyle(container)
|
||
|
|
containerPaddingTop = parseFloat(style.paddingTop)
|
||
|
|
containerRowGap = parseFloat(style.rowGap) || 0
|
||
|
|
container.state.renderedList = list.slice(0, Math.min(30, listSize)) || []
|
||
|
|
setTimeout(() => {
|
||
|
|
// 渲染一批之后立刻计算所有高度
|
||
|
|
container.state.list.forEach((item, index) => itemHeights.set(index, avg.get()))
|
||
|
|
for (let i = 0; i < listSize; i += groupItemCount) groupHeights.set(i, Math.min(groupItemCount, listSize - i) * avg.get())
|
||
|
|
listInited = true
|
||
|
|
console.log('FastList inited, calling refresh', container.id);
|
||
|
|
container.refresh()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<div class="overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">
|
||
|
|
<div $if="this.state.prevHeight>0" $style="height:\${this.state.prevHeight}px;" class="flex-shrink-0"></div>
|
||
|
|
<div slot-id="item" class="flex-shrink-0" $each="this.state.renderedList" $onupdate="this.onItemUpdate(index,thisNode)"></div>
|
||
|
|
<div $if="this.state.postHeight>0" $style="height:\${this.state.postHeight}px;" class="flex-shrink-0"></div>
|
||
|
|
</div>
|
||
|
|
`))
|
||
|
|
|
||
|
|
Component.attachSelectFeature = (container, eventName = 'itemclick', selectActionName = 'selectItem', activeActionName = 'itemActiveTag', selectedItemKey = 'selectedItem', idfieldKey = 'idfield', selectableAttr = 'auto-select') => {
|
||
|
|
const selectable = selectableAttr && container.hasAttribute(selectableAttr)
|
||
|
|
container[selectActionName] = (item, index) => {
|
||
|
|
if (selectable) container.state[selectedItemKey] = container.state[selectedItemKey] === item[container[idfieldKey]] ? null : item[container[idfieldKey]]
|
||
|
|
container.dispatchEvent(new CustomEvent(eventName, { bubbles: false, detail: !selectable || container.state[selectedItemKey] ? { item, index } : { item: {}, index: null } }))
|
||
|
|
}
|
||
|
|
container[activeActionName] = (item) => container.state[selectedItemKey] !== null && container.state[selectedItemKey] === item[container[idfieldKey]] ? 'active' : ''
|
||
|
|
}
|
||
|
|
|
||
|
|
Component.register('List', container => {
|
||
|
|
Component.attachSelectFeature(container)
|
||
|
|
const defaultSets = { idfield: 'id', labelfield: 'label', summaryfield: 'summary' }
|
||
|
|
container.state.__watch('list', oldList => {
|
||
|
|
Util.updateDefaults(container, defaultSets)
|
||
|
|
})
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<div class="list-group overflow-auto">
|
||
|
|
<div slot="item" slot-id="item" $each="this.state.list" $onclick="this.selectItem(item,index)" $class="list-group-item list-group-item-action list-group-item-heading d-inline-flex pe-auto align-items-baseline \${this.itemActiveTag?.(item)}">
|
||
|
|
<span $if="this.itemicon" class="bi bi-\${this.itemicon} text-body"></span>
|
||
|
|
<div class="flex-shrink-0 px-1" $text>\${item[this.labelfield]}</div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.summaryfield]"></div>
|
||
|
|
<div slot-id="item-actions"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`))
|
||
|
|
|
||
|
|
Component.register('GroupedList', container => {
|
||
|
|
Component.getSetupFunction('List')(container)
|
||
|
|
container._selectItem = container.selectItem
|
||
|
|
container.selectItem = (item, index) => {
|
||
|
|
container.state.selectedGroup = null
|
||
|
|
container._selectItem(item, index)
|
||
|
|
}
|
||
|
|
Component.attachSelectFeature(container, 'groupclick', 'selectGroup', 'groupActiveTag', 'selectedGroup', 'groupidfield', container.hasAttribute('auto-select-group') || container.hasAttribute('auto-select') && 'group-selectable')
|
||
|
|
container._selectGroup = container.selectGroup
|
||
|
|
container.selectGroup = (item, index) => {
|
||
|
|
container.state.selectedItem = null
|
||
|
|
container._selectGroup(item, index)
|
||
|
|
}
|
||
|
|
|
||
|
|
const defaultSets = { typefield: 'type', groupidfield: 'id', grouplabelfield: 'label', groupsummaryfield: 'summary', groupfield: 'group' }
|
||
|
|
container.state.__watch('list', oldList => {
|
||
|
|
Util.updateDefaults(container, defaultSets)
|
||
|
|
const newList = [];
|
||
|
|
(container.state.groups || []).forEach(group => {
|
||
|
|
newList.push({ [container.typefield]: 'group', ...group })
|
||
|
|
if (oldList) oldList.forEach(item => {
|
||
|
|
if (item[container.groupfield] === group[container.groupidfield]) {
|
||
|
|
newList.push({ [container.typefield]: 'item', ...item })
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
return newList
|
||
|
|
})
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<div class="list-group overflow-auto">
|
||
|
|
<template $each="this.state.list">
|
||
|
|
<div slot-id="group" $if="item.type === 'group'" $onclick="this.selectGroup(item,index)" style="height: 36px" $class="list-group-item list-group-item-action small d-inline-flex align-items-center ps-2 pe-2 \${this.groupActiveTag(item)}">
|
||
|
|
<span $if="this.groupicon" $class="bi bi-\${this.groupicon} text-body"></span>
|
||
|
|
<div class="flex-shrink-0 px-1" $text>\${item[this.grouplabelfield]}</div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.groupsummaryfield]"></div>
|
||
|
|
<div slot-id="group-actions"></div>
|
||
|
|
</div>
|
||
|
|
<div slot-id="item" $if="item.type === 'item'" $onclick="this.selectItem(item,index)" $class="list-group-item list-group-item-action d-inline-flex align-items-baseline ps-3 pe-2 \${this.itemActiveTag?.(item)}">
|
||
|
|
<span $if="this.itemicon" $class="bi bi-\${this.itemicon} text-body"></span>
|
||
|
|
<div class="flex-shrink-0 px-1" $text>\${item[this.labelfield]}</div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.summaryfield]"></div>
|
||
|
|
<div slot-id="item-actions"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
`))
|
||
|
|
|
||
|
|
Component.register('FastGroupedList', container => {
|
||
|
|
Component.getSetupFunction('List')(container)
|
||
|
|
Component.getSetupFunction('GroupedList')(container)
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<FastList class="list-group">
|
||
|
|
<div slot="item">
|
||
|
|
<div slot-id="group" $if="item.type === 'group'" $onclick="this.selectGroup(item,index)" style="height: 36px" $class="list-group-item list-group-item-action small d-inline-flex align-items-center ps-2 pe-2 \${this.groupActiveTag(item)}">
|
||
|
|
<span $if="this.groupicon" $class="bi bi-\${this.groupicon} text-body"></span>
|
||
|
|
<div class="flex-shrink-0 px-1" $text>\${item[this.grouplabelfield]}</div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.groupsummaryfield]"></div>
|
||
|
|
<div slot-id="group-actions"></div>
|
||
|
|
</div>
|
||
|
|
<div slot-id="item" $if="item.type === 'item'" $onclick="this.selectItem(item,index)" $class="list-group-item list-group-item-action d-inline-flex align-items-baseline ps-3 pe-2 \${this.itemActiveTag?.(item)}">
|
||
|
|
<span $if="this.itemicon" $class="bi bi-\${this.itemicon} text-body"></span>
|
||
|
|
<div class="flex-shrink-0 px-1" $text>\${item[this.labelfield]}</div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.summaryfield]"></div>
|
||
|
|
<div slot-id="item-actions"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</FastList>
|
||
|
|
`))
|
||
|
|
|
||
|
|
Component.register('Tree', container => {
|
||
|
|
const defaultSets = { parentfield: 'parent', groupicon: 'folder', itemicon: 'file' }
|
||
|
|
container.state.__watch('list', () => {
|
||
|
|
Util.updateDefaults(container, defaultSets)
|
||
|
|
const childrenMap = {};
|
||
|
|
(container.state.list || []).forEach(item => (childrenMap[item[container.parentfield] || ''] ??= []).push(item))
|
||
|
|
const newList = []
|
||
|
|
const traverse = (list, level) => list.forEach(item => {
|
||
|
|
const id = item[container.idfield]
|
||
|
|
const hasChildren = !!childrenMap[id]?.length
|
||
|
|
newList.push({ ...item, _level: level, _hasChildren: hasChildren })
|
||
|
|
if (hasChildren) traverse(childrenMap[id], level + 1)
|
||
|
|
})
|
||
|
|
traverse(childrenMap[''] || [], 0)
|
||
|
|
return newList
|
||
|
|
})
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<List>
|
||
|
|
<div slot="item" $class="list-group-item list-group-item-action d-flex ps-2 align-items-center \${this.itemActiveTag?.(item)}" $onclick="this.selectItem(item,index)">
|
||
|
|
<div $style="width:\${item._level * 16}px" class="flex-shrink-0"></div>
|
||
|
|
<div $class="text-muted bi bi-\${item._hasChildren?this.groupicon:this.itemicon}"></div>
|
||
|
|
<div class="flex-grow-1 text-truncate px-2" $text="item[this.labelfield]"></div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.summaryfield]"></div>
|
||
|
|
<div slot-id="item-actions"></div>
|
||
|
|
</div>
|
||
|
|
</List>
|
||
|
|
`))
|
||
|
|
|
||
|
|
export const FastTreeComponent = Component.register('FastTree', container => {
|
||
|
|
Component.getSetupFunction('List')(container)
|
||
|
|
Component.getSetupFunction('Tree')(container)
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<FastList class="list-group list-group-action">
|
||
|
|
<div slot="item" $class="list-group-item list-group-item-action d-flex ps-2 align-items-center \${this.itemActiveTag?.(item)}" $onclick="this.selectItem(item,index)">
|
||
|
|
<div $style="width:\${item._level * 16}px" class="flex-shrink-0"></div>
|
||
|
|
<div $class="text-muted bi bi-\${item._hasChildren?this.groupicon:this.itemicon}"></div>
|
||
|
|
<div class="flex-grow-1 text-truncate px-2" $text="item[this.labelfield]"></div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.summaryfield]"></div>
|
||
|
|
<div slot-id="item-actions"></div>
|
||
|
|
</div>
|
||
|
|
</FastList>
|
||
|
|
`))
|
||
|
|
|
||
|
|
Component.register('CollapseTree', container => {
|
||
|
|
Component.attachSelectFeature(container)
|
||
|
|
const defaultSets = { idfield: 'id', parentfield: 'parent', labelfield: 'label', summaryfield: 'summary' }
|
||
|
|
container.collapsed = NewState({})
|
||
|
|
container.state.__watch('list', () => {
|
||
|
|
Util.updateDefaults(container, defaultSets)
|
||
|
|
const childrenMap = {};
|
||
|
|
(container.state.list || []).forEach(item => (childrenMap[item[container.parentfield] || ''] ??= []).push(item))
|
||
|
|
const newList = []
|
||
|
|
const traverse = (list, level, parents) => list.forEach(item => {
|
||
|
|
const id = item[container.idfield]
|
||
|
|
const hasChildren = !!childrenMap[id]?.length
|
||
|
|
newList.push({ ...item, _level: level, _hasChildren: hasChildren, _parents: parents })
|
||
|
|
if (hasChildren) traverse(childrenMap[id], level + 1, [...parents, id])
|
||
|
|
})
|
||
|
|
traverse(childrenMap[''] || [], 0, [])
|
||
|
|
return newList
|
||
|
|
})
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<List>
|
||
|
|
<div slot="item" slot-id="item" $if="!item._parents.some(cur=>this.collapsed[cur])" $class="list-group-item list-group-item-action d-flex ps-2 align-items-center \${this.itemActiveTag?.(item)}" $onclick="this.selectItem(item,index)">
|
||
|
|
<div $style="width:\${item._level * 16 + 16}px; cursor: pointer;" class="text-end text-muted flex-shrink-0" $onclick="event.stopPropagation();this.collapsed[item[this.idfield]] = !this.collapsed[item[this.idfield]]">
|
||
|
|
<i $if="item._hasChildren" $class="bi \${this.collapsed[item[this.idfield]] ? 'bi-caret-right-fill' : 'bi-caret-down-fill'}"></i>
|
||
|
|
</div>
|
||
|
|
<div class="flex-grow-1 text-truncate px-1" $text="item[this.labelfield]"></div>
|
||
|
|
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="item[this.summaryfield]"></div>
|
||
|
|
<div slot-id="item-actions"></div>
|
||
|
|
</div>
|
||
|
|
</List>
|
||
|
|
`))
|