48e15ee013
- Create lightsync/frontend/timeline/segments.js with SegmentOverlay class - Integrate SegmentOverlay into timeline.js render pipeline (between row banding and waveform) - Add loadSegments method to TimelineCanvas - Wire loadSegments call in app.js loadedmetadata handler
641 lines
25 KiB
JavaScript
641 lines
25 KiB
JavaScript
// TimelineCanvas — DAW-style canvas timeline renderer for LightSync
|
|
// Renders per-device tracks, waveform background, beat marks, cue blocks,
|
|
// and a realtime playback cursor synced to an HTML5 audio element.
|
|
|
|
import { CommandHistory } from './history.js';
|
|
import { PlaceBlockCommand, MoveBlockCommand, ResizeBlockCommand, DeleteBlockCommand, setCurrentShowId } from './commands.js';
|
|
import { BeatGrid } from './beats.js';
|
|
import { SegmentOverlay } from './segments.js';
|
|
|
|
const PIXELS_PER_SECOND = 100; // default, adjustable via zoom
|
|
const TRACK_HEIGHT = 48;
|
|
const HEADER_WIDTH = 140;
|
|
const TIME_AXIS_HEIGHT = 24;
|
|
const EDGE = 8; // resize handle hit zone in pixels
|
|
const MIN_DURATION = 0.5; // minimum block duration in seconds
|
|
const SNAP_THRESHOLD = 0.1; // 100ms snap radius
|
|
|
|
class TimelineCanvas {
|
|
constructor(canvasEl, audioEl) {
|
|
this.canvas = canvasEl;
|
|
this.ctx = canvasEl.getContext('2d');
|
|
this.audio = audioEl;
|
|
|
|
this.pixelsPerSecond = PIXELS_PER_SECOND;
|
|
this.scrollX = 0;
|
|
this.tracks = []; // [{device_id, device_name, strip_type, cues: []}]
|
|
this.waveformPeaks = [];
|
|
this.audioDuration = 0;
|
|
this.beatGrid = new BeatGrid();
|
|
this.segmentOverlay = new SegmentOverlay();
|
|
this.selectedBlock = null;
|
|
this._dragState = null;
|
|
this._onSelectBlock = null; // callback(cue) for inspector
|
|
this.history = new CommandHistory(50);
|
|
this.showId = null; // set when a show is loaded
|
|
|
|
this._resizeCanvas();
|
|
window.addEventListener('resize', () => this._resizeCanvas());
|
|
|
|
// Scroll via wheel
|
|
this.canvas.addEventListener('wheel', (e) => {
|
|
e.preventDefault();
|
|
this.scrollX = Math.max(0, this.scrollX + e.deltaX + e.deltaY);
|
|
}, { passive: false });
|
|
|
|
this._setupInteractions();
|
|
}
|
|
|
|
// ── Coordinate helpers ────────────────────────────────────────────────────
|
|
|
|
timeToX(t) {
|
|
return HEADER_WIDTH + t * this.pixelsPerSecond - this.scrollX;
|
|
}
|
|
|
|
xToTime(x) {
|
|
return (x - HEADER_WIDTH + this.scrollX) / this.pixelsPerSecond;
|
|
}
|
|
|
|
trackIndexToY(i) {
|
|
return TIME_AXIS_HEIGHT + i * TRACK_HEIGHT;
|
|
}
|
|
|
|
yToTrackIndex(y) {
|
|
if (y < TIME_AXIS_HEIGHT) return -1;
|
|
return Math.floor((y - TIME_AXIS_HEIGHT) / TRACK_HEIGHT);
|
|
}
|
|
|
|
// ── Canvas resize (HiDPI) ─────────────────────────────────────────────────
|
|
|
|
_resizeCanvas() {
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.canvas.width = rect.width * dpr;
|
|
this.canvas.height = rect.height * dpr;
|
|
this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
}
|
|
|
|
// ── Render loop ───────────────────────────────────────────────────────────
|
|
|
|
startRenderLoop() {
|
|
const loop = () => {
|
|
this.render();
|
|
requestAnimationFrame(loop);
|
|
};
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
render() {
|
|
const ctx = this.ctx;
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const W = this.canvas.width / dpr;
|
|
const H = this.canvas.height / dpr;
|
|
|
|
// 1. Background
|
|
ctx.fillStyle = '#0a0a0a';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
// Empty state
|
|
if (this.tracks.length === 0) {
|
|
ctx.fillStyle = '#555555';
|
|
ctx.font = '12px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('NO DEVICES — add a device in the sidebar to create tracks', W / 2, H / 2);
|
|
ctx.textAlign = 'left';
|
|
this._drawTimeAxis(ctx, W, H);
|
|
this._drawTrackHeaders(ctx, W, H);
|
|
return;
|
|
}
|
|
|
|
if (this.audioDuration === 0) {
|
|
ctx.fillStyle = '#555555';
|
|
ctx.font = '12px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('LOAD AUDIO — use the transport bar to load a file', W / 2, H / 2);
|
|
ctx.textAlign = 'left';
|
|
}
|
|
|
|
// 2. Track row banding
|
|
this.tracks.forEach((_, i) => {
|
|
const y = this.trackIndexToY(i);
|
|
ctx.fillStyle = i % 2 === 0 ? '#0a0a0a' : '#0c0c0c';
|
|
ctx.fillRect(HEADER_WIDTH, y, W - HEADER_WIDTH, TRACK_HEIGHT);
|
|
});
|
|
|
|
// 2.5 Segment overlay bands (drawn below waveform)
|
|
if (this.segmentOverlay.segments.length > 0) {
|
|
this.segmentOverlay.draw(ctx, W, H, this.tracks.length, (t) => this.timeToX(t));
|
|
}
|
|
|
|
// 3. Waveform background
|
|
if (this.waveformPeaks.length > 0 && this.audioDuration > 0) {
|
|
const totalH = this.tracks.length * TRACK_HEIGHT;
|
|
const midY = TIME_AXIS_HEIGHT + totalH / 2;
|
|
ctx.fillStyle = '#1a3a3a';
|
|
for (let i = 0; i < this.waveformPeaks.length; i++) {
|
|
const t = (i / this.waveformPeaks.length) * this.audioDuration;
|
|
const x = this.timeToX(t);
|
|
if (x < HEADER_WIDTH || x > W) continue;
|
|
const peak = this.waveformPeaks[i];
|
|
const h = peak * totalH * 0.4;
|
|
ctx.fillRect(x, midY - h, 1, h * 2);
|
|
}
|
|
}
|
|
|
|
// 4. Beat marks
|
|
if (this.beatGrid.hasBeats) {
|
|
const calibrated = this.beatGrid.getCalibratedBeats();
|
|
ctx.strokeStyle = 'rgba(0, 255, 255, 0.4)';
|
|
ctx.lineWidth = 1;
|
|
for (const bt of calibrated) {
|
|
const x = this.timeToX(bt);
|
|
if (x < HEADER_WIDTH || x > W) continue;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, TIME_AXIS_HEIGHT);
|
|
ctx.lineTo(x, H);
|
|
ctx.stroke();
|
|
}
|
|
// Also draw onset marks as dimmer, shorter ticks (if onset data available)
|
|
const onsets = this.beatGrid.getCalibratedOnsets();
|
|
if (onsets.length > 0) {
|
|
ctx.strokeStyle = 'rgba(0, 255, 255, 0.15)';
|
|
for (const ot of onsets) {
|
|
const x = this.timeToX(ot);
|
|
if (x < HEADER_WIDTH || x > W) continue;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, TIME_AXIS_HEIGHT);
|
|
ctx.lineTo(x, TIME_AXIS_HEIGHT + 8); // short tick at top
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
} else if (this.beatGrid.loading) {
|
|
// Loading indicator
|
|
ctx.fillStyle = '#555555';
|
|
ctx.font = '10px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('DETECTING BEATS...', HEADER_WIDTH + (W - HEADER_WIDTH) / 2, TIME_AXIS_HEIGHT + 14);
|
|
ctx.textAlign = 'left';
|
|
} else if (this.beatGrid.error) {
|
|
ctx.fillStyle = '#555555';
|
|
ctx.font = '10px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(this.beatGrid.error, HEADER_WIDTH + (W - HEADER_WIDTH) / 2, TIME_AXIS_HEIGHT + 14);
|
|
ctx.textAlign = 'left';
|
|
}
|
|
|
|
// 5. Block rendering
|
|
this.tracks.forEach((track, trackIdx) => {
|
|
const y = this.trackIndexToY(trackIdx);
|
|
for (const cue of track.cues) {
|
|
const x = this.timeToX(cue.timestamp);
|
|
const w = (cue.duration || 4.0) * this.pixelsPerSecond;
|
|
if (x + w < HEADER_WIDTH || x > W) continue;
|
|
|
|
const isSelected = this.selectedBlock === cue;
|
|
// Block fill — use block color at low opacity for visual distinction
|
|
const blockColor = cue.params?.color || '#00ffff';
|
|
if (isSelected) {
|
|
ctx.fillStyle = '#0d3a3a';
|
|
} else {
|
|
ctx.fillStyle = blockColor + '1a'; // ~10% opacity hex suffix
|
|
}
|
|
ctx.fillRect(x, y + 1, w, TRACK_HEIGHT - 2);
|
|
|
|
ctx.strokeStyle = isSelected ? '#00ffff' : '#1a4a4a';
|
|
ctx.lineWidth = isSelected ? 1.5 : 1;
|
|
ctx.strokeRect(x, y + 1, w, TRACK_HEIGHT - 2);
|
|
|
|
// Resize handle indicators (visible on selected block)
|
|
if (isSelected) {
|
|
ctx.fillStyle = '#00ffff';
|
|
ctx.fillRect(x, y + 1, EDGE, TRACK_HEIGHT - 2);
|
|
ctx.fillRect(x + w - EDGE, y + 1, EDGE, TRACK_HEIGHT - 2);
|
|
}
|
|
|
|
// Label
|
|
if (w > 20) {
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.rect(x + EDGE + 2, y + 1, w - EDGE * 2 - 4, TRACK_HEIGHT - 2);
|
|
ctx.clip();
|
|
ctx.fillStyle = isSelected ? '#00ffff' : '#00cccc';
|
|
ctx.font = '10px monospace';
|
|
ctx.textAlign = 'left';
|
|
const label = (cue.animation || 'CUE').toUpperCase();
|
|
ctx.fillText(label, x + EDGE + 4, y + TRACK_HEIGHT / 2 + 4);
|
|
ctx.restore();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 6. Drag ghost
|
|
if (this._dragState && this._dragState.ghost) {
|
|
const trackIdx = this._dragState.trackIdx;
|
|
if (trackIdx >= 0 && trackIdx < this.tracks.length) {
|
|
const y = this.trackIndexToY(trackIdx);
|
|
const x = this.timeToX(this._dragState.time);
|
|
const w = (this._dragState.duration || 4.0) * this.pixelsPerSecond;
|
|
ctx.fillStyle = 'rgba(0, 255, 255, 0.15)';
|
|
ctx.fillRect(x, y + 1, w, TRACK_HEIGHT - 2);
|
|
ctx.strokeStyle = '#00ffff';
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(x, y + 1, w, TRACK_HEIGHT - 2);
|
|
}
|
|
}
|
|
|
|
// 7. Track headers (drawn over track rows)
|
|
this._drawTrackHeaders(ctx, W, H);
|
|
|
|
// 8. Time axis
|
|
this._drawTimeAxis(ctx, W, H);
|
|
|
|
// 9. Playback cursor + auto-scroll
|
|
if (!this.audio.paused) {
|
|
const cursorX = this.timeToX(this.audio.currentTime);
|
|
|
|
// Auto-scroll: if cursor approaches right edge, shift viewport
|
|
if (cursorX > W * 0.8) {
|
|
this.scrollX = HEADER_WIDTH + this.audio.currentTime * this.pixelsPerSecond - W * 0.2;
|
|
this.scrollX = Math.max(0, this.scrollX);
|
|
}
|
|
|
|
const cursorXAfterScroll = this.timeToX(this.audio.currentTime);
|
|
if (cursorXAfterScroll >= HEADER_WIDTH && cursorXAfterScroll <= W) {
|
|
ctx.strokeStyle = '#00ffff';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(cursorXAfterScroll, TIME_AXIS_HEIGHT);
|
|
ctx.lineTo(cursorXAfterScroll, H);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
_drawTrackHeaders(ctx, W, H) {
|
|
// Header background
|
|
ctx.fillStyle = '#0f0f0f';
|
|
ctx.fillRect(0, TIME_AXIS_HEIGHT, HEADER_WIDTH, H - TIME_AXIS_HEIGHT);
|
|
|
|
// Separator lines + labels
|
|
ctx.strokeStyle = '#1a4a4a';
|
|
ctx.lineWidth = 1;
|
|
this.tracks.forEach((track, i) => {
|
|
const y = this.trackIndexToY(i);
|
|
|
|
// Bottom border of track row
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y + TRACK_HEIGHT);
|
|
ctx.lineTo(HEADER_WIDTH, y + TRACK_HEIGHT);
|
|
ctx.stroke();
|
|
|
|
// Device name label
|
|
ctx.fillStyle = '#cccccc';
|
|
ctx.font = '12px monospace';
|
|
ctx.textAlign = 'left';
|
|
const label = track.device_name || `Device ${i + 1}`;
|
|
// Clip to header width
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.rect(0, y, HEADER_WIDTH - 4, TRACK_HEIGHT);
|
|
ctx.clip();
|
|
ctx.fillText(label, 8, y + TRACK_HEIGHT / 2 + 4);
|
|
ctx.restore();
|
|
});
|
|
|
|
// Right border of header area
|
|
ctx.beginPath();
|
|
ctx.moveTo(HEADER_WIDTH, TIME_AXIS_HEIGHT);
|
|
ctx.lineTo(HEADER_WIDTH, H);
|
|
ctx.stroke();
|
|
}
|
|
|
|
_drawTimeAxis(ctx, W, H) {
|
|
// Time axis background
|
|
ctx.fillStyle = '#080808';
|
|
ctx.fillRect(0, 0, W, TIME_AXIS_HEIGHT);
|
|
|
|
ctx.strokeStyle = '#1a4a4a';
|
|
ctx.fillStyle = '#555555';
|
|
ctx.font = '10px monospace';
|
|
ctx.textAlign = 'left';
|
|
ctx.lineWidth = 1;
|
|
|
|
const visibleStart = Math.max(0, this.xToTime(HEADER_WIDTH));
|
|
const visibleEnd = this.xToTime(W);
|
|
|
|
// Draw second marks
|
|
const firstSec = Math.ceil(visibleStart);
|
|
for (let sec = firstSec; sec <= visibleEnd; sec++) {
|
|
const x = this.timeToX(sec);
|
|
const isMajor = sec % 10 === 0;
|
|
const isMid = sec % 5 === 0;
|
|
const tickH = isMajor ? 10 : (isMid ? 7 : 4);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, TIME_AXIS_HEIGHT - tickH);
|
|
ctx.lineTo(x, TIME_AXIS_HEIGHT);
|
|
ctx.stroke();
|
|
|
|
if (isMajor || (isMid && this.pixelsPerSecond >= 40)) {
|
|
const m = Math.floor(sec / 60);
|
|
const s = sec % 60;
|
|
const label = m > 0 ? `${m}:${String(s).padStart(2, '0')}` : `${s}s`;
|
|
ctx.fillText(label, x + 2, TIME_AXIS_HEIGHT - 2);
|
|
}
|
|
}
|
|
|
|
// Bottom border
|
|
ctx.strokeStyle = '#1a4a4a';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, TIME_AXIS_HEIGHT);
|
|
ctx.lineTo(W, TIME_AXIS_HEIGHT);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// ── Hit testing ───────────────────────────────────────────────────────────
|
|
|
|
hitTest(mouseX, mouseY) {
|
|
for (const track of this.tracks) {
|
|
const trackIdx = this.tracks.indexOf(track);
|
|
const y = this.trackIndexToY(trackIdx);
|
|
if (mouseY < y || mouseY > y + TRACK_HEIGHT) continue;
|
|
// Iterate cues in reverse (last placed = on top)
|
|
for (let i = track.cues.length - 1; i >= 0; i--) {
|
|
const cue = track.cues[i];
|
|
const x = this.timeToX(cue.timestamp);
|
|
const w = (cue.duration || 4.0) * this.pixelsPerSecond;
|
|
if (mouseX < x || mouseX > x + w) continue;
|
|
if (mouseX < x + EDGE) return { block: cue, handle: 'resize-left', trackIdx };
|
|
if (mouseX > x + w - EDGE) return { block: cue, handle: 'resize-right', trackIdx };
|
|
return { block: cue, handle: 'move', trackIdx };
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// ── Overlap check ─────────────────────────────────────────────────────────
|
|
|
|
_hasOverlap(track, block, startTime, duration) {
|
|
const end = startTime + duration;
|
|
return track.cues.some(c => {
|
|
if (c.id === block.id) return false; // skip self
|
|
const cEnd = c.timestamp + c.duration;
|
|
return startTime < cEnd && end > c.timestamp;
|
|
});
|
|
}
|
|
|
|
// ── Snap to beat ──────────────────────────────────────────────────────────
|
|
|
|
snapToBeat(t) {
|
|
return this.beatGrid.snap(t);
|
|
}
|
|
|
|
// ── Getters/setters for backward compatibility with app.js toolbar wiring ──
|
|
|
|
get snapEnabled() { return this.beatGrid.snapEnabled; }
|
|
set snapEnabled(v) { this.beatGrid.snapEnabled = v; }
|
|
get calibrationOffset() { return this.beatGrid.calibrationOffset; }
|
|
set calibrationOffset(v) { this.beatGrid.calibrationOffset = v; }
|
|
|
|
// ── Interaction setup ─────────────────────────────────────────────────────
|
|
|
|
_setupInteractions() {
|
|
const canvas = this.canvas;
|
|
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
|
|
// Ignore clicks in header or time axis area
|
|
if (mx < HEADER_WIDTH || my < TIME_AXIS_HEIGHT) return;
|
|
|
|
const hit = this.hitTest(mx, my);
|
|
|
|
if (!hit) {
|
|
// Clicked on empty canvas — deselect block, update segment selection
|
|
this.selectedBlock = null;
|
|
if (this._onSelectBlock) this._onSelectBlock(null);
|
|
const clickTime = this.xToTime(mx);
|
|
this.segmentOverlay.handleClick(clickTime);
|
|
return;
|
|
}
|
|
|
|
// Select the clicked block
|
|
this.selectedBlock = hit.block;
|
|
if (this._onSelectBlock) this._onSelectBlock(hit.block);
|
|
|
|
if (hit.handle === 'move') {
|
|
this._startMove(e, hit.block, mx);
|
|
} else if (hit.handle === 'resize-left' || hit.handle === 'resize-right') {
|
|
this._startResize(e, hit.block, hit.handle, mx);
|
|
}
|
|
});
|
|
|
|
// Update cursor on hover
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
if (this._dragState) return; // during drag, document handles mousemove
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
const hit = this.hitTest(mx, my);
|
|
if (hit && (hit.handle === 'resize-left' || hit.handle === 'resize-right')) {
|
|
canvas.style.cursor = 'ew-resize';
|
|
} else if (hit && hit.handle === 'move') {
|
|
canvas.style.cursor = 'grab';
|
|
} else {
|
|
canvas.style.cursor = 'default';
|
|
}
|
|
});
|
|
|
|
// Keyboard: Delete, Ctrl+Z (undo), Ctrl+Shift+Z / Ctrl+Y (redo)
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Delete' && this.selectedBlock) {
|
|
const cmd = new DeleteBlockCommand(this.tracks, this.selectedBlock);
|
|
this.history.execute(cmd);
|
|
this.selectedBlock = null;
|
|
if (this._onSelectBlock) this._onSelectBlock(null);
|
|
}
|
|
// Undo: Ctrl+Z (not Ctrl+Shift+Z)
|
|
if (e.ctrlKey && !e.shiftKey && e.key === 'z') {
|
|
e.preventDefault();
|
|
this.history.undo();
|
|
if (this._onSelectBlock) this._onSelectBlock(this.selectedBlock);
|
|
}
|
|
// Redo: Ctrl+Shift+Z or Ctrl+Y
|
|
if ((e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y')) {
|
|
e.preventDefault();
|
|
this.history.redo();
|
|
if (this._onSelectBlock) this._onSelectBlock(this.selectedBlock);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Move interaction ──────────────────────────────────────────────────────
|
|
|
|
_startMove(e, block, startMX) {
|
|
const oldTimestamp = block.timestamp;
|
|
const startTime = block.timestamp;
|
|
this.canvas.style.cursor = 'grabbing';
|
|
this._dragState = { type: 'move' };
|
|
|
|
const onDrag = (ev) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const mx = ev.clientX - rect.left;
|
|
const deltaX = mx - startMX;
|
|
const deltaTime = deltaX / this.pixelsPerSecond;
|
|
block.timestamp = Math.max(0, startTime + deltaTime);
|
|
};
|
|
|
|
const onUp = () => {
|
|
document.removeEventListener('mousemove', onDrag);
|
|
document.removeEventListener('mouseup', onUp);
|
|
this.canvas.style.cursor = 'default';
|
|
this._dragState = null;
|
|
|
|
const snapped = this.snapToBeat(Math.max(0, block.timestamp));
|
|
const track = this.tracks.find(t => t.device_id === block.device_id);
|
|
|
|
// Revert live position for command to apply cleanly
|
|
block.timestamp = oldTimestamp;
|
|
|
|
if (snapped === oldTimestamp) return;
|
|
|
|
// Check overlap at final position
|
|
if (track && this._hasOverlap(track, block, snapped, block.duration)) return;
|
|
|
|
const cmd = new MoveBlockCommand(this.tracks, block, oldTimestamp, snapped);
|
|
this.history.execute(cmd);
|
|
};
|
|
|
|
document.addEventListener('mousemove', onDrag);
|
|
document.addEventListener('mouseup', onUp, { once: true });
|
|
}
|
|
|
|
// ── Resize interaction ────────────────────────────────────────────────────
|
|
|
|
_startResize(e, block, handle, startMX) {
|
|
const oldTimestamp = block.timestamp;
|
|
const oldDuration = block.duration;
|
|
const rightEdgeTime = oldTimestamp + oldDuration; // fixed right edge for left-handle resize
|
|
const blockStartX = this.timeToX(oldTimestamp);
|
|
this._dragState = { type: 'resize' };
|
|
|
|
const onDrag = (ev) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const mx = ev.clientX - rect.left;
|
|
|
|
if (handle === 'resize-right') {
|
|
// Right edge moves, left stays fixed
|
|
const newRightTime = Math.max(0, this.xToTime(mx));
|
|
block.duration = Math.max(MIN_DURATION, newRightTime - oldTimestamp);
|
|
} else {
|
|
// Left edge moves, right edge stays fixed
|
|
const newLeftTime = Math.max(0, this.xToTime(mx));
|
|
const newDuration = rightEdgeTime - newLeftTime;
|
|
if (newDuration >= MIN_DURATION) {
|
|
block.timestamp = newLeftTime;
|
|
block.duration = newDuration;
|
|
}
|
|
}
|
|
};
|
|
|
|
const onUp = () => {
|
|
document.removeEventListener('mousemove', onDrag);
|
|
document.removeEventListener('mouseup', onUp);
|
|
this.canvas.style.cursor = 'default';
|
|
this._dragState = null;
|
|
|
|
let newTimestamp = block.timestamp;
|
|
let newDuration = block.duration;
|
|
|
|
// Snap left edge if resize-left
|
|
if (handle === 'resize-left') {
|
|
newTimestamp = this.snapToBeat(Math.max(0, newTimestamp));
|
|
newDuration = rightEdgeTime - newTimestamp;
|
|
}
|
|
// Enforce minimum
|
|
if (newDuration < MIN_DURATION) {
|
|
newTimestamp = oldTimestamp;
|
|
newDuration = oldDuration;
|
|
}
|
|
|
|
// Revert for command to apply cleanly
|
|
block.timestamp = oldTimestamp;
|
|
block.duration = oldDuration;
|
|
|
|
const unchanged = newTimestamp === oldTimestamp && newDuration === oldDuration;
|
|
if (unchanged) return;
|
|
|
|
const track = this.tracks.find(t => t.device_id === block.device_id);
|
|
if (track && this._hasOverlap(track, block, newTimestamp, newDuration)) return;
|
|
|
|
const cmd = new ResizeBlockCommand(
|
|
this.tracks, block, oldTimestamp, oldDuration, newTimestamp, newDuration
|
|
);
|
|
this.history.execute(cmd);
|
|
};
|
|
|
|
document.addEventListener('mousemove', onDrag);
|
|
document.addEventListener('mouseup', onUp, { once: true });
|
|
}
|
|
|
|
// ── Drop from palette ─────────────────────────────────────────────────────
|
|
|
|
handleDrop(animationType, mouseX, mouseY) {
|
|
const trackIdx = this.yToTrackIndex(mouseY);
|
|
if (trackIdx < 0 || trackIdx >= this.tracks.length) return;
|
|
const track = this.tracks[trackIdx];
|
|
const rawTime = Math.max(0, this.xToTime(mouseX));
|
|
const time = this.snapToBeat(rawTime);
|
|
const duration = 4.0; // default duration
|
|
|
|
// Reject if overlap
|
|
if (this._hasOverlap(track, { id: null }, time, duration)) return;
|
|
|
|
const block = {
|
|
id: crypto.randomUUID(),
|
|
device_id: track.device_id,
|
|
timestamp: time,
|
|
duration: duration,
|
|
animation: animationType,
|
|
params: { color: '#00ffff', speed: 1.0, direction: 'forward', length: 0.3 }
|
|
};
|
|
const cmd = new PlaceBlockCommand(this.tracks, block);
|
|
this.history.execute(cmd);
|
|
this.selectedBlock = block;
|
|
if (this._onSelectBlock) this._onSelectBlock(block);
|
|
}
|
|
|
|
// ── Data loading ──────────────────────────────────────────────────────────
|
|
|
|
loadTracks(devices) {
|
|
this.tracks = devices.map(d => ({
|
|
device_id: d.id,
|
|
device_name: d.name,
|
|
strip_type: d.strip_type,
|
|
cues: [],
|
|
}));
|
|
}
|
|
|
|
async loadWaveform(audioPath) {
|
|
try {
|
|
const res = await fetch(`/api/audio/waveform?path=${encodeURIComponent(audioPath)}&peaks=2000`);
|
|
const data = await res.json();
|
|
this.waveformPeaks = data.peaks || [];
|
|
} catch (e) {
|
|
console.warn('[waveform]', e);
|
|
}
|
|
}
|
|
|
|
async loadBeats(audioPath) {
|
|
await this.beatGrid.load(audioPath);
|
|
}
|
|
|
|
async loadSegments(audioPath) {
|
|
await this.segmentOverlay.load(audioPath);
|
|
}
|
|
}
|
|
|
|
export { TimelineCanvas };
|