perf: reduce editor redraw sorting overhead

This commit is contained in:
OpenClaw Agent
2026-07-09 21:10:06 +00:00
parent 7bb54f61d6
commit 119692160a

View File

@@ -82,6 +82,16 @@ function findSegmentById(segments = [], segmentId) {
return (segments || []).find((seg) => seg.id === segmentId); return (segments || []).find((seg) => seg.id === segmentId);
} }
function partitionSegmentsBySelection(segments = [], selectedIdSet) {
const unselected = [];
const selected = [];
for (const seg of segments || []) {
if (selectedIdSet.has(seg.id)) selected.push(seg);
else unselected.push(seg);
}
return unselected.concat(selected);
}
function hideWidget(w) { function hideWidget(w) {
if (!w) return; if (!w) return;
@@ -6055,23 +6065,9 @@ class TimelineEditor {
if (this._previewSegments && previewIsMotion) renderMotionSegments = this._previewSegments; if (this._previewSegments && previewIsMotion) renderMotionSegments = this._previewSegments;
} }
const sortedSegments = [...renderSegments].sort((a, b) => { const sortedSegments = partitionSegmentsBySelection(renderSegments, selectedIdSet);
const aSel = selectedIdSet.has(a.id) ? 1 : 0; const sortedMotionSegments = partitionSegmentsBySelection(renderMotionSegments, selectedIdSet);
const bSel = selectedIdSet.has(b.id) ? 1 : 0; const sortedAudioSegments = partitionSegmentsBySelection(renderAudioSegments, selectedIdSet);
return aSel - bSel;
});
const sortedMotionSegments = [...renderMotionSegments].sort((a, b) => {
const aSel = selectedIdSet.has(a.id) ? 1 : 0;
const bSel = selectedIdSet.has(b.id) ? 1 : 0;
return aSel - bSel;
});
const sortedAudioSegments = [...renderAudioSegments].sort((a, b) => {
const aSel = selectedIdSet.has(a.id) ? 1 : 0;
const bSel = selectedIdSet.has(b.id) ? 1 : 0;
return aSel - bSel;
});
if (this.retakeMode) { if (this.retakeMode) {
// Draw Retake Mode Filmstrip and Overlay // Draw Retake Mode Filmstrip and Overlay
@@ -7644,14 +7640,15 @@ class TimelineEditor {
} }
if (clickedId) { if (clickedId) {
const selectedIdSet = new Set(this.selectedSegmentIds || []);
if (isCtrl) { if (isCtrl) {
const sibId = clickedId.endsWith("_v") ? clickedId.slice(0, -2) + "_a" : (clickedId.endsWith("_a") ? clickedId.slice(0, -2) + "_v" : null); const sibId = clickedId.endsWith("_v") ? clickedId.slice(0, -2) + "_a" : (clickedId.endsWith("_a") ? clickedId.slice(0, -2) + "_v" : null);
const isSelected = this.selectedSegmentIds.includes(clickedId); const isSelected = selectedIdSet.has(clickedId);
if (isSelected) { if (isSelected) {
this.selectedSegmentIds = this.selectedSegmentIds.filter(id => id !== clickedId && id !== sibId); this.selectedSegmentIds = this.selectedSegmentIds.filter(id => id !== clickedId && id !== sibId);
} else { } else {
if (!this.selectedSegmentIds.includes(clickedId)) this.selectedSegmentIds.push(clickedId); if (!selectedIdSet.has(clickedId)) this.selectedSegmentIds.push(clickedId);
if (sibId && !this.selectedSegmentIds.includes(sibId)) this.selectedSegmentIds.push(sibId); if (sibId && !selectedIdSet.has(sibId)) this.selectedSegmentIds.push(sibId);
} }
if (this.selectedSegmentIds.length > 0) { if (this.selectedSegmentIds.length > 0) {
@@ -7662,12 +7659,12 @@ class TimelineEditor {
} }
this._multiDragClickPendingDeselect = null; this._multiDragClickPendingDeselect = null;
} else { } else {
if (this.selectedSegmentIds.includes(clickedId)) { if (selectedIdSet.has(clickedId)) {
this._multiDragClickPendingDeselect = clickedId; this._multiDragClickPendingDeselect = clickedId;
} else { } else {
this.selectedSegmentIds = [clickedId]; this.selectedSegmentIds = [clickedId];
const sibId = clickedId.endsWith("_v") ? clickedId.slice(0, -2) + "_a" : (clickedId.endsWith("_a") ? clickedId.slice(0, -2) + "_v" : null); const sibId = clickedId.endsWith("_v") ? clickedId.slice(0, -2) + "_a" : (clickedId.endsWith("_a") ? clickedId.slice(0, -2) + "_v" : null);
if (sibId && !this.selectedSegmentIds.includes(sibId)) this.selectedSegmentIds.push(sibId); if (sibId && !selectedIdSet.has(sibId)) this.selectedSegmentIds.push(sibId);
this.selectionType = clickedTrack; this.selectionType = clickedTrack;
this.selectedIndex = clickedIdx; this.selectedIndex = clickedIdx;
this._multiDragClickPendingDeselect = null; this._multiDragClickPendingDeselect = null;