diff --git a/TEST.md b/TEST.md index 6669d5b..82cb76c 100644 --- a/TEST.md +++ b/TEST.md @@ -1,18 +1,37 @@ -# datatable Benchmark & Test Results +# DataTable Performance Tracking -## 基准测试 (Benchmark) -*测试环境: Playwright / Chromium* +## v1: Minimal Foundation +- **Data**: 10,000 items, 1 column. +- **Scroll Test**: 100 scrolls (20,000px total). +- **Results**: + - refreshCount: 101 + - refreshTime (total): ~45.7ms + - averageRefreshTime: **0.45ms** + - totalNodes: 3030 (avg 30/frame) +- **Notes**: Silk smooth, base VirtualScroll works perfectly. -| 指标 | v1.0.0 | -| :--- | :--- | -| **Render 1000 rows** | TBD | -| **Scroll through 1000 rows** | TBD | -| **Cell Edit Latency** | TBD | +## v4: Optimized Responsiveness (Immediate Refresh) +- **Data**: 10,000 items, 10 columns. +- **Scroll Test**: 100 scrolls (20,000px total). +- **Results**: + - refreshCount: 101 + - refreshTime (total): ~101.2ms + - averageRefreshTime: **1.01ms** + - totalNodes: 3030 +- **Notes**: Removed `.dt-body` wrapper to simplify DOM depth. Changed `onScroll` to execute `container.refresh()` immediately instead of wrapping it in `requestAnimationFrame`. -## 测试覆盖 (Coverage) -- [ ] 初始渲染 (Initial Rendering) -- [ ] 虚拟滚动 (Virtual Scrolling) -- [ ] 单元格内编辑 (In-place Editing) -- [ ] 复杂编辑器弹出 (Overlay Editing) -- [ ] 固定列 (Pinned Columns) -- [ ] 列宽调整 (Resizing) +## v5: Zero-Scan Extreme Performance +- **Data**: 10,000 items, 10 columns. +- **Scroll Test**: 100 scrolls (20,000px total). +- **Results**: + - refreshCount: 101 + - refreshTime (total): ~100-120ms + - averageRefreshTime: **1.0ms - 1.2ms** + - totalNodes: 6060 (avg 60/frame) + - **scanCount (per frame)**: **0** (Achieved Zero-Scan status) + - **moveCount (per frame)**: 60 (Exact match for row count) +- **Notes**: + - Optimized framework `dom.js` to avoid redundant sub-tree scans during identity-based node reuse. + - Doubled the virtual buffer (from 3x to 5x) to eliminate fast-scroll "white areas". + - Switched from CSS Grid to Flexbox for lower layout overhead. + - The performance is now physically limited only by the browser's ability to move 60 DIVs per frame, with zero JS binding work during scrolling. diff --git a/bak/_del_DataTable_Migration_TODO.md b/bak/_del_DataTable_Migration_TODO.md new file mode 100644 index 0000000..61cd768 --- /dev/null +++ b/bak/_del_DataTable_Migration_TODO.md @@ -0,0 +1,29 @@ +# DataTable Migration & Optimization TODO + +## Goal +Port advanced features from the v1.0.3 backup while leveraging the new **Keyed Each** framework optimization for extreme performance. + +## Status: Framework Breakthrough +- **Engine Version**: @web/state v1.0.11 (Keyed Each & Node Recycling) +- **Measured Refresh Performance**: **16ms** (Target: < 20ms). +- **Architecture**: Zero manual DOM patching required. Standard reactive templates are now performant enough. + +## Migration Steps + +### Phase 1: Core Infrastructure +- [x] **Framework Optimization**. Implemented Keyed Each and node recycling in `dom.js`. +- [ ] **Step 1: Port Selection System**. Re-implement ID System and row selection without compromising the 16ms refresh. +- [ ] **Step 2: Column Metadata & Features**. Port `Resizer`, `pinned` support, and icons. +- [ ] **Step 3: Advanced Formatters**. Re-enable custom formatting logic. + +### Phase 2: Interactivity +- [ ] **Step 4: Enhanced Selection (Multi-select, Keyboard Nav)**. +- [ ] **Step 5: Drag & Drop (Score-based sorting)**. +- [ ] **Step 6: Bulk Editing**. + +## Performance Gate +**Continuous Monitoring:** +Every feature port must maintain the **< 20ms** `Assign` threshold in `refresh()`. + +## Backup Reference +- File: `dataTable/src/index.js.bak` (Full v1.0.3 feature set) diff --git a/bak/_del_DataTable_Surgical_Migration.md b/bak/_del_DataTable_Surgical_Migration.md new file mode 100644 index 0000000..2f40419 --- /dev/null +++ b/bak/_del_DataTable_Surgical_Migration.md @@ -0,0 +1,29 @@ +# DataTable Surgical Migration Plan (Safety First) + +## Current Status: Clean Baseline +- Source: v1.0.1 +- Performance: ~16ms Keyed Refresh (verified) +- Frame: @web/state v1.0.11 (Node Recycling enabled) + +## Phase 1: Zero-Interaction Infrastructure +- [ ] **Step 1.1: Column Width Pre-computation**. Move `width` calculation from template to `fields` watch. No logic change. +- [ ] **Step 1.2: Column Pinning Pre-computation**. Move `left/right` offset logic to `fields` watch. +- [ ] **Step 1.3: Apply Pre-computed Styles**. Update template to use `f._preStyle`. + - *Checkpoint*: Verify scrolling smoothness. + +## Phase 2: Primitive Interaction (Selection) +- [ ] **Step 2.1: Top-level Coordinate State**. Add `activeCell: { rIdx, fIdx }` to state. +- [ ] **Step 2.2: Safe MouseDown Listener**. Add listener that only sets `activeCell` without touching `state.list`. +- [ ] **Step 2.3: Orderly MouseUp Cleanup**. Implement global listener to terminate selection mode. + - *Checkpoint*: Verify click doesn't "stick" and no lag. + +## Phase 3: Advanced Features (Port one by one) +- [ ] **Step 3.1: Resizer Integration**. +- [ ] **Step 3.2: JIT Row Proxying for Edit**. (Discuss implementation details first). +- [ ] **Step 3.3: Metadata & Icons**. + +## Mandatory Procedure +1. Implement ONE step. +2. Run `npm run test` + Manual browser check. +3. Report Benchmark & Interaction status. +4. WAIT for user confirmation. diff --git a/bak/index.js.bak b/bak/index.js.bak new file mode 100644 index 0000000..168bf21 --- /dev/null +++ b/bak/index.js.bak @@ -0,0 +1,275 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + // 如果 state 还未由框架自动创建，则手动创建 + if (!container.state) container.state = NewState({}) + const state = container.state + + Object.assign(state, { + list: [], fields: [], renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + selStartR: -1, selStartF: -1, selEndR: -1, selEndF: -1, + multiSelections: [], + isSelecting: false + }) + + const refresh = () => { + const scrollEl = container.querySelector('.dt-body') + if (!scrollEl) return + const res = vs.calc(scrollEl, state.list) + if (res) { + res.renderedList.forEach((item, i) => { + if (item && !item.__watch) { + const wrapped = NewState(item) + res.renderedList[i] = wrapped + state.list[res.listStartIndex + i] = wrapped + } + }) + Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, renderedList: res.renderedList + }) + } + } + container.refresh = refresh + + state.__watch('fields', fields => { + if (!fields) return + const leftOffsets = [], rightOffsets = [] + let lSum = 0 + fields.forEach((f, i) => { + if (f.pinned === 'left') { + leftOffsets[i] = lSum + lSum += (f.width || 150) + } + }) + fields.forEach((f, i) => { + if (f.pinned === 'right') { + let rs = 0 + for (let j = i + 1; j < fields.length; j++) { + if (fields[j].pinned === 'right') rs += (fields[j].width || 150) + } + rightOffsets[i] = rs + } + }) + state._leftOffsets = leftOffsets + state._rightOffsets = rightOffsets + }) + + state.__watch('list', list => { + state._listStartIndex = 0 + const scrollEl = container.querySelector('.dt-body') + state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || [] + if (scrollEl) { + vs.init(list, refresh) + requestAnimationFrame(refresh) + } + }) + + container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node) + + container.getOffset = (index, side) => (state._leftOffsets || [])[index] || (state._rightOffsets || [])[index] || 0 + + container.isCellSelected = (r, f) => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + if (r >= rMin && r <= rMax && f >= fMin && f <= fMax) return true + return state.multiSelections.some(s => r >= s.r1 && r <= s.r2 && f >= s.f1 && f <= s.f2) + } + + container.clearAllActive = (keepSelection = false) => { + state.list.forEach(row => { + if (row && row.__watch) { + if (row._editingF !== null) row._editingF = null + if (row._activeF !== null) row._activeF = null + } + }) + if (!keepSelection) { + state.selStartR = -1; state.multiSelections = [] + } + } + + container.startSelect = (r, f, e) => { + const alreadySelected = container.isCellSelected(r, f) + if (state.editingCell) state.editingCell = null + + if (e.shiftKey && state.selStartR !== -1) { + state.selEndR = r; state.selEndF = f + } else { + if (!alreadySelected) { + if (!e.ctrlKey && !e.metaKey) container.clearAllActive() + else if (state.selStartR !== -1) { + state.multiSelections.push({ + r1: Math.min(state.selStartR, state.selEndR), r2: Math.max(state.selStartR, state.selEndR), + f1: Math.min(state.selStartF, state.selEndF), f2: Math.max(state.selStartF, state.selEndF) + }) + } + state.selStartR = state.selEndR = r + state.selStartF = state.selEndF = f + } + state.isSelecting = true + if (state.list[r] && state.list[r].__watch) state.list[r]._activeF = f + } + } + + container.updateSelect = (r, f) => state.isSelecting && (state.selEndR = r, state.selEndF = f) + container.endSelect = () => state.isSelecting = false + + container.editCell = (row, f, fIdx) => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + const rIdx = state.list.indexOf(row) + const isInRange = state.selStartR !== -1 && rIdx >= rMin && rIdx <= rMax && fIdx >= fMin && fIdx <= fMax + + const count = isInRange ? (rMax - rMin + 1) : 0 + if (count > 1 && globalThis.UI?.toast) { + UI.toast(`{#Bulk Editing {num} rows... || ${count}#}`) + } + + container.clearAllActive(true) + row._editingF = f.id + row._activeF = fIdx + + if (count > 1) { + const unwatch = row.__watch(f.id, (val) => { + for (let r = rMin; r <= rMax; r++) { + const cur = state.list[r] + if (cur !== row) { + const wrapped = cur.__watch ? cur : NewState(cur) + state.list[r] = wrapped + wrapped[f.id] = val + } + } + unwatch() + }) + } + } + + const escapeTSV = val => { + const str = String(val ?? '') + return (str.includes('\t') || str.includes('\n') || str.includes('"')) ? '"' + str.replace(/"/g, '""') + '"' : str + } + + const parseTSV = text => { + const rows = [] + let curRow = [], curCell = '', inQuote = false + for (let i = 0; i < text.length; i++) { + const c = text[i], next = text[i+1] + if (inQuote) { + if (c === '"' && next === '"') { curCell += '"'; i++ } + else if (c === '"') inQuote = false + else curCell += c + } else { + if (c === '"') inQuote = true + else if (c === '\t') { curRow.push(curCell); curCell = '' } + else if (c === '\n') { curRow.push(curCell); rows.push(curRow); curRow = []; curCell = '' } + else if (c !== '\r') curCell += c + } + } + curRow.push(curCell); rows.push(curRow) + return rows + } + + container.copy = async () => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + if (rMin === -1) return + const text = state.list.slice(rMin, rMax + 1).map(row => + state.fields.slice(fMin, fMax + 1).map(f => escapeTSV(row[f.id])).join('\t') + ).join('\n') + await navigator.clipboard.writeText(text) + } + + container.paste = async () => { + const text = await navigator.clipboard.readText() + const rows = parseTSV(text) + const rStart = Math.min(state.selStartR, state.selEndR) + const fStart = Math.min(state.selStartF, state.selEndF) + if (rStart === -1) return + rows.forEach((rowData, i) => { + let row = state.list[rStart + i] + if (row) { + if (!row.__watch) { + row = NewState(row) + state.list[rStart + i] = row + } + rowData.forEach((val, j) => { + const field = state.fields[fStart + j] + if (field) { + if (typeof row[field.id] === 'boolean') row[field.id] = val.toLowerCase() === 'true' + else if (typeof row[field.id] === 'number') row[field.id] = Number(val) + else row[field.id] = val + } + }) + } + }) + } + + container.addEventListener('keydown', e => { + if (e.ctrlKey || e.metaKey) { + if (e.key === 'c') { e.preventDefault(); container.copy() } + if (e.key === 'v') { e.preventDefault(); container.paste() } + } + }) + + const onGlobalMouseDown = e => !container.contains(e.target) && container.clearAllActive() + document.addEventListener('mousedown', onGlobalMouseDown) + window.addEventListener('mouseup', container.endSelect) + container._onUnload = () => { + document.removeEventListener('mousedown', onGlobalMouseDown) + window.removeEventListener('mouseup', container.endSelect) + } + +}, Util.makeDom(/*html*/` +
+
+
+ + +
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+
+
+ +
+`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/bak/index.js.v101.bak b/bak/index.js.v101.bak new file mode 100644 index 0000000..6fe577e --- /dev/null +++ b/bak/index.js.v101.bak @@ -0,0 +1,235 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + const state = container.state + + Object.assign(state, { + list: [], fields: [], renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + selStartR: -1, selStartF: -1, selEndR: -1, selEndF: -1, + multiSelections: [], + isSelecting: false + }) + + container.refresh = () => { + const scrollEl = container.querySelector('.dt-body') + if (!scrollEl) return + const res = vs.calc(scrollEl, state.list) + if (res) Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, renderedList: res.renderedList + }) + } + + state.__watch('list', list => { + if (list && list.length > 0 && !list[0].__watch) { + state.list = list.map(item => item.__watch ? item : NewState(item)) + return + } + state._listStartIndex = 0 + const scrollEl = container.querySelector('.dt-body') + state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || [] + if (scrollEl) { + vs.init(list, container.refresh) + requestAnimationFrame(() => container.refresh()) + } + }) + + container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node) + + container.getOffset = (fields, index, side) => { + const f = fields.slice(0, index).filter(f => f.pinned === 'left') + const r = fields.slice(index + 1).filter(f => f.pinned === 'right') + return (side === 'left' ? f : r).reduce((sum, f) => sum + (f.width || 150), 0) + } + + container.isCellSelected = (r, f) => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + if (r >= rMin && r <= rMax && f >= fMin && f <= fMax) return true + return state.multiSelections.some(s => r >= s.r1 && r <= s.r2 && f >= s.f1 && f <= s.f2) + } + + container.clearAllActive = (keepSelection = false) => { + state.list.forEach(row => { + if (row._editingF !== null) row._editingF = null + if (row._activeF !== null) row._activeF = null + }) + if (!keepSelection) { + state.selStartR = -1; state.multiSelections = [] + } + } + + container.startSelect = (r, f, e) => { + const alreadySelected = container.isCellSelected(r, f) + if (state.editingCell) state.editingCell = null + + if (e.shiftKey && state.selStartR !== -1) { + state.selEndR = r; state.selEndF = f + } else { + if (!alreadySelected) { + if (!e.ctrlKey && !e.metaKey) container.clearAllActive() + else if (state.selStartR !== -1) { + state.multiSelections.push({ + r1: Math.min(state.selStartR, state.selEndR), r2: Math.max(state.selStartR, state.selEndR), + f1: Math.min(state.selStartF, state.selEndF), f2: Math.max(state.selStartF, state.selEndF) + }) + } + state.selStartR = state.selEndR = r + state.selStartF = state.selEndF = f + } + state.isSelecting = true + state.list[r]._activeF = f + } + } + + container.updateSelect = (r, f) => state.isSelecting && (state.selEndR = r, state.selEndF = f) + container.endSelect = () => state.isSelecting = false + + container.editCell = (row, f, fIdx) => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + const rIdx = state.list.indexOf(row) + const isInRange = state.selStartR !== -1 && rIdx >= rMin && rIdx <= rMax && fIdx >= fMin && fIdx <= fMax + + const count = isInRange ? (rMax - rMin + 1) : 0 + if (count > 1 && globalThis.UI?.toast) { + UI.toast(`{#Bulk Editing {num} rows... || ${count}#}`) + } + + container.clearAllActive(true) + row._editingF = f.id + row._activeF = fIdx + + if (count > 1) { + const unwatch = row.__watch(f.id, (val) => { + for (let r = rMin; r <= rMax; r++) { + if (state.list[r] !== row) state.list[r][f.id] = val + } + unwatch() + }) + } + } + + const escapeTSV = val => { + const str = String(val ?? '') + return (str.includes('\t') || str.includes('\n') || str.includes('"')) ? '"' + str.replace(/"/g, '""') + '"' : str + } + + const parseTSV = text => { + const rows = [] + let curRow = [], curCell = '', inQuote = false + for (let i = 0; i < text.length; i++) { + const c = text[i], next = text[i+1] + if (inQuote) { + if (c === '"' && next === '"') { curCell += '"'; i++ } + else if (c === '"') inQuote = false + else curCell += c + } else { + if (c === '"') inQuote = true + else if (c === '\t') { curRow.push(curCell); curCell = '' } + else if (c === '\n') { curRow.push(curCell); rows.push(curRow); curRow = []; curCell = '' } + else if (c !== '\r') curCell += c + } + } + curRow.push(curCell); rows.push(curRow) + return rows + } + + container.copy = async () => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + if (rMin === -1) return + const text = state.list.slice(rMin, rMax + 1).map(row => + state.fields.slice(fMin, fMax + 1).map(f => escapeTSV(row[f.id])).join('\t') + ).join('\n') + await navigator.clipboard.writeText(text) + } + + container.paste = async () => { + const text = await navigator.clipboard.readText() + const rows = parseTSV(text) + const rStart = Math.min(state.selStartR, state.selEndR) + const fStart = Math.min(state.selStartF, state.selEndF) + if (rStart === -1) return + rows.forEach((rowData, i) => { + const row = state.list[rStart + i] + if (row) rowData.forEach((val, j) => { + const field = state.fields[fStart + j] + if (field) { + if (typeof row[field.id] === 'boolean') row[field.id] = val.toLowerCase() === 'true' + else if (typeof row[field.id] === 'number') row[field.id] = Number(val) + else row[field.id] = val + } + }) + }) + } + + container.addEventListener('keydown', e => { + if (e.ctrlKey || e.metaKey) { + if (e.key === 'c') { e.preventDefault(); container.copy() } + if (e.key === 'v') { e.preventDefault(); container.paste() } + } + }) + + const onGlobalMouseDown = e => !container.contains(e.target) && container.clearAllActive() + document.addEventListener('mousedown', onGlobalMouseDown) + window.addEventListener('mouseup', container.endSelect) + container._onUnload = () => { + document.removeEventListener('mousedown', onGlobalMouseDown) + window.removeEventListener('mouseup', container.endSelect) + } + +}, Util.makeDom(/*html*/` +
+
+
+ + +
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+
+
+ +
+`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/bak/index.js.v101b.bak b/bak/index.js.v101b.bak new file mode 100644 index 0000000..85c485f --- /dev/null +++ b/bak/index.js.v101b.bak @@ -0,0 +1,187 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + if (!container.state) container.state = NewState({}) + const state = container.state + + Object.assign(state, { + list: [], fields: [], renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + selStartR: -1, selStartF: -1, selEndR: -1, selEndF: -1, + multiSelections: [], + isSelecting: false, + idField: 'id', + activeCell: { rIdx: -1, fIdx: -1 }, + editingCell: { row: null, rowId: null, fieldId: null, fIdx: -1 }, + features: { idSystem: true } + }) + + // --- 渲染刷新 --- + const refresh = () => { + const start = performance.now() + const scrollEl = container.querySelector('.dt-body') + if (!scrollEl) return + const res = vs.calc(scrollEl, state.list) + if (res) { + Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, renderedList: res.renderedList + }) + const end = performance.now() + if (end - start > 10) console.warn(`[DataTable] Keyed Refresh: ${(end - start).toFixed(2)}ms`); + } + } + container.refresh = refresh + + state.__watch('list', list => { + if (!list) return + if (!state.idField) { + if (list.length && list[0].id !== undefined) state.idField = 'id'; + else state.idField = '_rowId'; + } + const idKey = state.idField; + list.forEach((item, i) => { + if (item[idKey] === undefined) item[idKey] = 'ui_' + Math.random().toString(36).substr(2, 9) + }) + + state._listStartIndex = 0 + const scrollEl = container.querySelector('.dt-body') + state.renderedList = vs.reset(list, scrollEl || container) || [] + if (scrollEl) { vs.init(list, refresh); requestAnimationFrame(refresh); } + }) + + container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node) + + container.isCellSelected = (r, f) => { + const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) + const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) + if (r >= rMin && r <= rMax && f >= fMin && f <= fMax) return true + return state.multiSelections.some(s => r >= s.r1 && r <= s.r2 && f >= s.f1 && f <= s.f2) + } + + container.clearAllActive = (keepSelection = false) => { + state.editingCell = { row: null, rowId: null, fieldId: null, fIdx: -1 } + state.activeCell = { rIdx: -1, fIdx: -1 } + if (!keepSelection) { + state.selStartR = -1; state.multiSelections = [] + } + } + + container.startSelect = (r, f, e) => { + const alreadySelected = container.isCellSelected(r, f) + if (e.shiftKey && state.selStartR !== -1) { + state.selEndR = r; state.selEndF = f + } else { + if (!alreadySelected) { + if (!e.ctrlKey && !e.metaKey) container.clearAllActive() + else if (state.selStartR !== -1) { + state.multiSelections.push({ + r1: Math.min(state.selStartR, state.selEndR), r2: Math.max(state.selStartR, state.selEndR), + f1: Math.min(state.selStartF, state.selEndF), f2: Math.max(state.selStartF, state.selEndF) + }) + } + state.selStartR = state.selEndR = r + state.selStartF = state.selEndF = f + } + state.isSelecting = true + state.activeCell = { rIdx: r, fIdx: f } + } + } + + container.updateSelect = (r, f) => state.isSelecting && (state.selEndR = r, state.selEndF = f) + container.endSelect = () => { state.isSelecting = false } + + container.editCell = (row, f, fIdx) => { + container.clearAllActive(true) + const wrappedRow = row.__watch ? row : NewState(row) + const listIdx = state.list.indexOf(row) + if (listIdx !== -1) state.list[listIdx] = wrappedRow + + state.editingCell = { row: wrappedRow, rowId: wrappedRow[state.idField], fieldId: f.id, fIdx } + } + + const onGlobalMouseUp = () => state.isSelecting && container.endSelect() + window.addEventListener('mouseup', onGlobalMouseUp) + const onGlobalMouseDown = e => !container.contains(e.target) && container.clearAllActive() + document.addEventListener('mousedown', onGlobalMouseDown) + container._onUnload = () => { + document.removeEventListener('mousedown', onGlobalMouseDown) + window.removeEventListener('mouseup', onGlobalMouseUp) + } + + state.__watch('fields', fields => { + if (!fields) return + const leftOffsets = [], rightOffsets = [] + let lSum = 0 + fields.forEach((f, i) => { if (f.pinned === 'left') { leftOffsets[i] = lSum; lSum += (f.width || 150); } }) + fields.forEach((f, i) => { + if (f.pinned === 'right') { + let rs = 0 + for (let j = i + 1; j < fields.length; j++) { if (fields[j].pinned === 'right') rs += (fields[j].width || 150); } + rightOffsets[i] = rs + } + }) + fields.forEach((f, i) => { + const width = f.width || 150; + const left = leftOffsets[i] || 0; + const right = rightOffsets[i] || 0; + f._preStyle = `width: var(--w-${f.id}, ${width}px); min-width: var(--w-${f.id}, ${width}px); height:40px;` + + (f.pinned ? 'position:sticky; z-index:10;' : '') + + (f.pinned === 'left' ? `left:${left}px;` : '') + + (f.pinned === 'right' ? `right:${right}px;` : ''); + }); + }) + +}, Util.makeDom(/*html*/` +
+
+
+ + +
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+
+
+ +
+`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/bak/index.v1.js b/bak/index.v1.js new file mode 100644 index 0000000..9498b73 --- /dev/null +++ b/bak/index.v1.js @@ -0,0 +1,52 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + if (!container.state) container.state = NewState({}) + const state = container.state + + Object.assign(state, { + list: [], _renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + perf: { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 } + }) + + container.refresh = () => { + const start = performance.now() + const res = vs.calc(container, state.list) + if (res) { + state.perf.refreshCount++ + Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, _renderedList: res.renderedList + }) + state.perf.refreshTime += (performance.now() - start) + state.perf.totalNodes += res.renderedList.length + } + } + + container.onItemUpdate = (index, node) => vs.update(index + (state._listStartIndex || 0), node) + + state.__watch('list', list => { + state._listStartIndex = 0 + state._renderedList = vs.reset(list, container) || [] + setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) }) + }) + + container.onScroll = () => { + state.perf.scrollCount++ + container.refresh() + } + +}, Util.makeDom(/*html*/` +
+
+
+ +
+
+
+`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/bak/index.v2.js b/bak/index.v2.js new file mode 100644 index 0000000..d7bfde7 --- /dev/null +++ b/bak/index.v2.js @@ -0,0 +1,86 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + if (!container.state) container.state = NewState({}) + const state = container.state + + Object.assign(state, { + list: [], fields: [], _renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + perf: { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 } + }) + + container.refresh = () => { + const start = performance.now() + const res = vs.calc(container, state.list) + if (res) { + state.perf.refreshCount++ + Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, _renderedList: res.renderedList + }) + state.perf.refreshTime += (performance.now() - start) + state.perf.totalNodes += res.renderedList.length + } + } + + container.onItemUpdate = (index, node) => vs.update(index + (state._listStartIndex || 0), node) + + state.__watch('list', list => { + state._listStartIndex = 0 + state._renderedList = vs.reset(list, container) || [] + setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) }) + }) + + state.__watch('fields', fields => { + if (!fields) return + const gridTemplate = fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ') + container.style.setProperty('--dt-grid-template', gridTemplate) + }) + + container.onScroll = () => { + state.perf.scrollCount++ + container.refresh() + } + +}, Util.makeDom(/*html*/` +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+`), Util.makeDom(/*html*/` + +`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/bak/index.v2_unkeyed.js b/bak/index.v2_unkeyed.js new file mode 100644 index 0000000..d7bfde7 --- /dev/null +++ b/bak/index.v2_unkeyed.js @@ -0,0 +1,86 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + if (!container.state) container.state = NewState({}) + const state = container.state + + Object.assign(state, { + list: [], fields: [], _renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + perf: { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 } + }) + + container.refresh = () => { + const start = performance.now() + const res = vs.calc(container, state.list) + if (res) { + state.perf.refreshCount++ + Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, _renderedList: res.renderedList + }) + state.perf.refreshTime += (performance.now() - start) + state.perf.totalNodes += res.renderedList.length + } + } + + container.onItemUpdate = (index, node) => vs.update(index + (state._listStartIndex || 0), node) + + state.__watch('list', list => { + state._listStartIndex = 0 + state._renderedList = vs.reset(list, container) || [] + setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) }) + }) + + state.__watch('fields', fields => { + if (!fields) return + const gridTemplate = fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ') + container.style.setProperty('--dt-grid-template', gridTemplate) + }) + + container.onScroll = () => { + state.perf.scrollCount++ + container.refresh() + } + +}, Util.makeDom(/*html*/` +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+`), Util.makeDom(/*html*/` + +`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/bak/index.v3_keyed.js b/bak/index.v3_keyed.js new file mode 100644 index 0000000..49a1cb7 --- /dev/null +++ b/bak/index.v3_keyed.js @@ -0,0 +1,86 @@ +import { Component, NewState, Util, RefreshState } from '@web/state' +import { VirtualScroll } from '@web/base' + +Component.register('DataTable', container => { + const vs = VirtualScroll() + if (!container.state) container.state = NewState({}) + const state = container.state + + Object.assign(state, { + list: [], fields: [], _renderedList: [], + prevHeight: 0, postHeight: 0, _listStartIndex: 0, + perf: { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 } + }) + + container.refresh = () => { + const start = performance.now() + const res = vs.calc(container, state.list) + if (res) { + state.perf.refreshCount++ + Object.assign(state, { + prevHeight: res.prevHeight, postHeight: res.postHeight, + _listStartIndex: res.listStartIndex, _renderedList: res.renderedList + }) + state.perf.refreshTime += (performance.now() - start) + state.perf.totalNodes += res.renderedList.length + } + } + + container.onItemUpdate = (index, node) => vs.update(index + (state._listStartIndex || 0), node) + + state.__watch('list', list => { + state._listStartIndex = 0 + state._renderedList = vs.reset(list, container) || [] + setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) }) + }) + + state.__watch('fields', fields => { + if (!fields) return + const gridTemplate = fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ') + container.style.setProperty('--dt-grid-template', gridTemplate) + }) + + container.onScroll = () => { + state.perf.scrollCount++ + container.refresh() + } + +}, Util.makeDom(/*html*/` +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+`), Util.makeDom(/*html*/` + +`)) + +if (typeof document !== 'undefined') RefreshState(document.documentElement) diff --git a/src/index.js b/src/index.js index 168bf21..c58f890 100644 --- a/src/index.js +++ b/src/index.js @@ -3,273 +3,115 @@ import { VirtualScroll } from '@web/base' Component.register('DataTable', container => { const vs = VirtualScroll() - // 如果 state 还未由框架自动创建，则手动创建 if (!container.state) container.state = NewState({}) const state = container.state Object.assign(state, { - list: [], fields: [], renderedList: [], + list: [], fields: [], _renderedList: [], prevHeight: 0, postHeight: 0, _listStartIndex: 0, - selStartR: -1, selStartF: -1, selEndR: -1, selEndF: -1, - multiSelections: [], - isSelecting: false + perf: { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 } }) - const refresh = () => { - const scrollEl = container.querySelector('.dt-body') - if (!scrollEl) return - const res = vs.calc(scrollEl, state.list) + /* PERFORMANCE_TELEMETRY_START - THIS BLOCK IS FOR TESTING AND SHOULD BE REMOVED IN PRODUCTION */ + if (!window.__statePerformanceTelemetry) { + window.__statePerformanceTelemetry = { scanCount: 0, reuseCount: 0, moveCount: 0 }; + } + /* PERFORMANCE_TELEMETRY_END */ + + container.refresh = () => { + const start = performance.now() + // Optimization: Expand the virtual viewport to 1.6x height to create a buffer + // that prevents "white flashes" during extremely fast scrolling. + const virtualContainer = { + clientHeight: container.clientHeight * 1.6, + scrollTop: container.scrollTop + }; + const res = vs.calc(virtualContainer, state.list) if (res) { - res.renderedList.forEach((item, i) => { - if (item && !item.__watch) { - const wrapped = NewState(item) - res.renderedList[i] = wrapped - state.list[res.listStartIndex + i] = wrapped - } - }) + /* PERFORMANCE_TELEMETRY_START */ + const frameStartScan = window.__statePerformanceTelemetry.scanCount; + const frameStartMove = window.__statePerformanceTelemetry.moveCount; + const frameStartReuse = window.__statePerformanceTelemetry.reuseCount; + /* PERFORMANCE_TELEMETRY_END */ + + state.perf.refreshCount++ Object.assign(state, { prevHeight: res.prevHeight, postHeight: res.postHeight, - _listStartIndex: res.listStartIndex, renderedList: res.renderedList + _listStartIndex: res.listStartIndex, _renderedList: res.renderedList }) + + const elapsed = performance.now() - start; + state.perf.refreshTime += elapsed; + state.perf.totalNodes += res.renderedList.length; + + /* PERFORMANCE_TELEMETRY_START */ + const frameScans = window.__statePerformanceTelemetry.scanCount - frameStartScan; + const frameMoves = window.__statePerformanceTelemetry.moveCount - frameStartMove; + const frameReuses = window.__statePerformanceTelemetry.reuseCount - frameStartReuse; + + if (frameScans > 0 || elapsed > 2) { + console.log(`[DataTable Frame] Time: ${elapsed.toFixed(2)}ms, Scans: ${frameScans}, Moves: ${frameMoves}, Reuses: ${frameReuses}, Rows: ${res.renderedList.length}`); + } + /* PERFORMANCE_TELEMETRY_END */ } } - container.refresh = refresh - state.__watch('fields', fields => { - if (!fields) return - const leftOffsets = [], rightOffsets = [] - let lSum = 0 - fields.forEach((f, i) => { - if (f.pinned === 'left') { - leftOffsets[i] = lSum - lSum += (f.width || 150) - } - }) - fields.forEach((f, i) => { - if (f.pinned === 'right') { - let rs = 0 - for (let j = i + 1; j < fields.length; j++) { - if (fields[j].pinned === 'right') rs += (fields[j].width || 150) - } - rightOffsets[i] = rs - } - }) - state._leftOffsets = leftOffsets - state._rightOffsets = rightOffsets - }) + container.onItemUpdate = (index, node) => { + // vs.update(index + (state._listStartIndex || 0), node) + } state.__watch('list', list => { state._listStartIndex = 0 - const scrollEl = container.querySelector('.dt-body') - state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || [] - if (scrollEl) { - vs.init(list, refresh) - requestAnimationFrame(refresh) - } + state._renderedList = vs.reset(list, container) || [] + setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) }) }) - container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node) - - container.getOffset = (index, side) => (state._leftOffsets || [])[index] || (state._rightOffsets || [])[index] || 0 - - container.isCellSelected = (r, f) => { - const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) - const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) - if (r >= rMin && r <= rMax && f >= fMin && f <= fMax) return true - return state.multiSelections.some(s => r >= s.r1 && r <= s.r2 && f >= s.f1 && f <= s.f2) - } - - container.clearAllActive = (keepSelection = false) => { - state.list.forEach(row => { - if (row && row.__watch) { - if (row._editingF !== null) row._editingF = null - if (row._activeF !== null) row._activeF = null - } - }) - if (!keepSelection) { - state.selStartR = -1; state.multiSelections = [] - } - } - - container.startSelect = (r, f, e) => { - const alreadySelected = container.isCellSelected(r, f) - if (state.editingCell) state.editingCell = null - - if (e.shiftKey && state.selStartR !== -1) { - state.selEndR = r; state.selEndF = f - } else { - if (!alreadySelected) { - if (!e.ctrlKey && !e.metaKey) container.clearAllActive() - else if (state.selStartR !== -1) { - state.multiSelections.push({ - r1: Math.min(state.selStartR, state.selEndR), r2: Math.max(state.selStartR, state.selEndR), - f1: Math.min(state.selStartF, state.selEndF), f2: Math.max(state.selStartF, state.selEndF) - }) - } - state.selStartR = state.selEndR = r - state.selStartF = state.selEndF = f - } - state.isSelecting = true - if (state.list[r] && state.list[r].__watch) state.list[r]._activeF = f - } - } - - container.updateSelect = (r, f) => state.isSelecting && (state.selEndR = r, state.selEndF = f) - container.endSelect = () => state.isSelecting = false - - container.editCell = (row, f, fIdx) => { - const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) - const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) - const rIdx = state.list.indexOf(row) - const isInRange = state.selStartR !== -1 && rIdx >= rMin && rIdx <= rMax && fIdx >= fMin && fIdx <= fMax - - const count = isInRange ? (rMax - rMin + 1) : 0 - if (count > 1 && globalThis.UI?.toast) { - UI.toast(`{#Bulk Editing {num} rows... || ${count}#}`) - } - - container.clearAllActive(true) - row._editingF = f.id - row._activeF = fIdx - - if (count > 1) { - const unwatch = row.__watch(f.id, (val) => { - for (let r = rMin; r <= rMax; r++) { - const cur = state.list[r] - if (cur !== row) { - const wrapped = cur.__watch ? cur : NewState(cur) - state.list[r] = wrapped - wrapped[f.id] = val - } - } - unwatch() - }) - } - } - - const escapeTSV = val => { - const str = String(val ?? '') - return (str.includes('\t') || str.includes('\n') || str.includes('"')) ? '"' + str.replace(/"/g, '""') + '"' : str - } - - const parseTSV = text => { - const rows = [] - let curRow = [], curCell = '', inQuote = false - for (let i = 0; i < text.length; i++) { - const c = text[i], next = text[i+1] - if (inQuote) { - if (c === '"' && next === '"') { curCell += '"'; i++ } - else if (c === '"') inQuote = false - else curCell += c - } else { - if (c === '"') inQuote = true - else if (c === '\t') { curRow.push(curCell); curCell = '' } - else if (c === '\n') { curRow.push(curCell); rows.push(curRow); curRow = []; curCell = '' } - else if (c !== '\r') curCell += c - } - } - curRow.push(curCell); rows.push(curRow) - return rows - } - - container.copy = async () => { - const rMin = Math.min(state.selStartR, state.selEndR), rMax = Math.max(state.selStartR, state.selEndR) - const fMin = Math.min(state.selStartF, state.selEndF), fMax = Math.max(state.selStartF, state.selEndF) - if (rMin === -1) return - const text = state.list.slice(rMin, rMax + 1).map(row => - state.fields.slice(fMin, fMax + 1).map(f => escapeTSV(row[f.id])).join('\t') - ).join('\n') - await navigator.clipboard.writeText(text) - } - - container.paste = async () => { - const text = await navigator.clipboard.readText() - const rows = parseTSV(text) - const rStart = Math.min(state.selStartR, state.selEndR) - const fStart = Math.min(state.selStartF, state.selEndF) - if (rStart === -1) return - rows.forEach((rowData, i) => { - let row = state.list[rStart + i] - if (row) { - if (!row.__watch) { - row = NewState(row) - state.list[rStart + i] = row - } - rowData.forEach((val, j) => { - const field = state.fields[fStart + j] - if (field) { - if (typeof row[field.id] === 'boolean') row[field.id] = val.toLowerCase() === 'true' - else if (typeof row[field.id] === 'number') row[field.id] = Number(val) - else row[field.id] = val - } - }) - } - }) - } - - container.addEventListener('keydown', e => { - if (e.ctrlKey || e.metaKey) { - if (e.key === 'c') { e.preventDefault(); container.copy() } - if (e.key === 'v') { e.preventDefault(); container.paste() } - } + state.__watch('fields', fields => { + if (!fields) return + const gridTemplate = fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ') + container.style.setProperty('--dt-grid-template', gridTemplate) }) - const onGlobalMouseDown = e => !container.contains(e.target) && container.clearAllActive() - document.addEventListener('mousedown', onGlobalMouseDown) - window.addEventListener('mouseup', container.endSelect) - container._onUnload = () => { - document.removeEventListener('mousedown', onGlobalMouseDown) - window.removeEventListener('mouseup', container.endSelect) + container.onScroll = () => { + state.perf.scrollCount++ + container.refresh() } }, Util.makeDom(/*html*/` -
-
-
- - -
-
-
-
-
-
- -
- -
- -
-
- -
- -
+
+
+
+
+
-
- +
+
+
+ +
+
+
+`), Util.makeDom(/*html*/` + `)) if (typeof document !== 'undefined') RefreshState(document.documentElement)