chris.dumas/WhatDreamsCost-Dumas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: cache render selection and segment state

Browse Source
This commit is contained in:
OpenClaw Agent
2026-07-09 21:05:50 +00:00
parent 264fdcf7cd
commit 7bb54f61d6
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
js/ltx_director.js
View File

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