From 119692160a8fb5fbfa03fae1bad38bc6f1691c41 Mon Sep 17 00:00:00 2001
From: OpenClaw Agent <openclaw-agent@local>
Date: Thu, 9 Jul 2026 21:10:06 +0000
Subject: [PATCH] perf: reduce editor redraw sorting overhead

---
 js/ltx_director.js | 71 ++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/js/ltx_director.js b/js/ltx_director.js
index 00a48e5..41b2f9d 100644
--- a/js/ltx_director.js
+++ b/js/ltx_director.js
@@ -81,6 +81,16 @@ function findSegmentIndexById(segments = [], segmentId) {
 function findSegmentById(segments = [], 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) {
   if (!w) return;
@@ -6055,23 +6065,9 @@ class TimelineEditor {
       if (this._previewSegments && previewIsMotion) renderMotionSegments = this._previewSegments;
     }
 
-    const sortedSegments = [...renderSegments].sort((a, b) => {
-      const aSel = selectedIdSet.has(a.id) ? 1 : 0;
-      const bSel = selectedIdSet.has(b.id) ? 1 : 0;
-      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;
-    });
+    const sortedSegments = partitionSegmentsBySelection(renderSegments, selectedIdSet);
+    const sortedMotionSegments = partitionSegmentsBySelection(renderMotionSegments, selectedIdSet);
+    const sortedAudioSegments = partitionSegmentsBySelection(renderAudioSegments, selectedIdSet);
 
     if (this.retakeMode) {
       // Draw Retake Mode Filmstrip and Overlay
@@ -7643,16 +7639,17 @@ class TimelineEditor {
       clickedId = targetArray[clickedIdx].id;
     }
 
-    if (clickedId) {
-      if (isCtrl) {
-        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);
-        if (isSelected) {
-          this.selectedSegmentIds = this.selectedSegmentIds.filter(id => id !== clickedId && id !== sibId);
-        } else {
-          if (!this.selectedSegmentIds.includes(clickedId)) this.selectedSegmentIds.push(clickedId);
-          if (sibId && !this.selectedSegmentIds.includes(sibId)) this.selectedSegmentIds.push(sibId);
-        }
+    if (clickedId) {
+      const selectedIdSet = new Set(this.selectedSegmentIds || []);
+      if (isCtrl) {
+        const sibId = clickedId.endsWith("_v") ? clickedId.slice(0, -2) + "_a" : (clickedId.endsWith("_a") ? clickedId.slice(0, -2) + "_v" : null);
+        const isSelected = selectedIdSet.has(clickedId);
+        if (isSelected) {
+          this.selectedSegmentIds = this.selectedSegmentIds.filter(id => id !== clickedId && id !== sibId);
+        } else {
+          if (!selectedIdSet.has(clickedId)) this.selectedSegmentIds.push(clickedId);
+          if (sibId && !selectedIdSet.has(sibId)) this.selectedSegmentIds.push(sibId);
+        }
 
         if (this.selectedSegmentIds.length > 0) {
           this.selectionType = clickedTrack;
@@ -7661,16 +7658,16 @@ class TimelineEditor {
           this.selectedIndex = -1;
         }
         this._multiDragClickPendingDeselect = null;
-      } else {
-        if (this.selectedSegmentIds.includes(clickedId)) {
-          this._multiDragClickPendingDeselect = clickedId;
-        } else {
-          this.selectedSegmentIds = [clickedId];
-          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);
-          this.selectionType = clickedTrack;
-          this.selectedIndex = clickedIdx;
-          this._multiDragClickPendingDeselect = null;
+      } else {
+        if (selectedIdSet.has(clickedId)) {
+          this._multiDragClickPendingDeselect = clickedId;
+        } else {
+          this.selectedSegmentIds = [clickedId];
+          const sibId = clickedId.endsWith("_v") ? clickedId.slice(0, -2) + "_a" : (clickedId.endsWith("_a") ? clickedId.slice(0, -2) + "_v" : null);
+          if (sibId && !selectedIdSet.has(sibId)) this.selectedSegmentIds.push(sibId);
+          this.selectionType = clickedTrack;
+          this.selectedIndex = clickedIdx;
+          this._multiDragClickPendingDeselect = null;
         }
       }
     }