perf: cache render selection and segment state

This commit is contained in:
OpenClaw Agent
2026-07-09 21:05:50 +00:00
parent 264fdcf7cd
commit 7bb54f61d6

View File

@@ -5973,6 +5973,9 @@ class TimelineEditor {
const height = this.canvasHeight;
const totalFrames = this.getVisualDurationFrames();
const selectedIdSet = new Set(this.selectedSegmentIds || []);
const hasMultiSelect = this.isMultiSelectActive();
const timelineSegmentMap = new Map((this.timeline.segments || []).map((seg) => [seg.id, seg]));
const timelineMotionSegmentMap = new Map((this.timeline.motionSegments || []).map((seg) => [seg.id, seg]));
if (!width || width <= 0) return;
@@ -6420,7 +6423,7 @@ class TimelineEditor {
const pxWidth = Math.max(1, Math.floor(rawEndX) - startX);
const isSelected = selectedIdSet.has(seg.id);
const originalSeg = this.timeline.segments.find(s => s.id === seg.id);
const originalSeg = timelineSegmentMap.get(seg.id);
const imgObj = originalSeg ? originalSeg.imgObj : seg.imgObj;
const videoEl = originalSeg ? originalSeg.videoEl : seg.videoEl;
@@ -6731,7 +6734,7 @@ class TimelineEditor {
this.ctx.strokeStyle = outlineColor;
this.ctx.lineWidth = 2;
this.ctx.strokeRect(startX, RULER_HEIGHT + 1, pxWidth, this.blockHeight - 2);
if (!this.isMultiSelectActive()) {
if (!hasMultiSelect) {
this.ctx.fillStyle = outlineColor;
this.ctx.beginPath();
this.ctx.roundRect(startX, RULER_HEIGHT + this.blockHeight / 2 - 12, 4, 24, 2);
@@ -6780,7 +6783,7 @@ class TimelineEditor {
this.ctx.fillStyle = "#000";
this.ctx.fillRect(startX, trackY + 1, pxWidth, this.motionTrackHeight - 2);
const originalSeg = findSegmentById(this.timeline.motionSegments, seg.id);
const originalSeg = timelineMotionSegmentMap.get(seg.id);
const imgObj = originalSeg ? originalSeg.imgObj : seg.imgObj;
const videoEl = originalSeg ? originalSeg.videoEl : seg.videoEl;
@@ -6950,7 +6953,7 @@ class TimelineEditor {
this.ctx.strokeStyle = "#fff";
this.ctx.lineWidth = 2;
this.ctx.strokeRect(startX, trackY + 1, pxWidth, this.motionTrackHeight - 2);
if (!this.isMultiSelectActive()) {
if (!hasMultiSelect) {
this.ctx.fillStyle = "#fff";
this.ctx.beginPath();
this.ctx.roundRect(startX, trackY + this.motionTrackHeight / 2 - 12, 4, 24, 2);
@@ -6998,7 +7001,7 @@ class TimelineEditor {
this.ctx.font = "bold 12px sans-serif";
this.ctx.fillText("Drop Audio", startX + pxWidth / 2, trackY + this.audioTrackHeight / 2);
} else {
const showHandles = !this.isMultiSelectActive();
const showHandles = !hasMultiSelect;
const outlineColor = isSelected ? "#fff" : null;
this.drawAudioSegmentVisuals(this.ctx, seg, isSelected, trackY, this.audioTrackHeight, startX, pxWidth, outlineColor, showHandles);
}