92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
|
import type { Clip } from '$lib/stores/clips.svelte';
|
||
|
|
import { timeToX, type TimelineState } from './renderer';
|
||
|
|
|
||
|
|
const CLIP_LANE_Y = 90;
|
||
|
|
const CLIP_LANE_HEIGHT = 30;
|
||
|
|
const HANDLE_WIDTH = 6;
|
||
|
|
|
||
|
|
export function drawClips(
|
||
|
|
ctx: CanvasRenderingContext2D,
|
||
|
|
state: TimelineState,
|
||
|
|
clips: Clip[],
|
||
|
|
selectedId: string | null,
|
||
|
|
pendingInPoint: number | null
|
||
|
|
): void {
|
||
|
|
for (const clip of clips) {
|
||
|
|
const x1 = timeToX(clip.startTime, state);
|
||
|
|
const x2 = timeToX(clip.endTime, state);
|
||
|
|
const isSelected = clip.id === selectedId;
|
||
|
|
|
||
|
|
ctx.fillStyle = clip.color + '66';
|
||
|
|
ctx.fillRect(x1, CLIP_LANE_Y, x2 - x1, CLIP_LANE_HEIGHT);
|
||
|
|
|
||
|
|
ctx.strokeStyle = isSelected ? '#ffffff' : clip.color;
|
||
|
|
ctx.lineWidth = isSelected ? 2 : 1;
|
||
|
|
ctx.strokeRect(x1, CLIP_LANE_Y, x2 - x1, CLIP_LANE_HEIGHT);
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
|
||
|
|
ctx.fillStyle = isSelected ? '#ffffff' : clip.color;
|
||
|
|
ctx.fillRect(x1 - HANDLE_WIDTH / 2, CLIP_LANE_Y, HANDLE_WIDTH, CLIP_LANE_HEIGHT);
|
||
|
|
ctx.fillRect(x2 - HANDLE_WIDTH / 2, CLIP_LANE_Y, HANDLE_WIDTH, CLIP_LANE_HEIGHT);
|
||
|
|
|
||
|
|
const labelWidth = x2 - x1;
|
||
|
|
if (labelWidth > 40) {
|
||
|
|
ctx.fillStyle = '#ffffff';
|
||
|
|
ctx.font = '11px -apple-system, sans-serif';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.fillText(
|
||
|
|
clip.label,
|
||
|
|
(x1 + x2) / 2,
|
||
|
|
CLIP_LANE_Y + CLIP_LANE_HEIGHT / 2 + 4,
|
||
|
|
labelWidth - 10
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (pendingInPoint !== null) {
|
||
|
|
const x = timeToX(pendingInPoint, state);
|
||
|
|
ctx.strokeStyle = '#f9e2af';
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.setLineDash([4, 4]);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x, CLIP_LANE_Y);
|
||
|
|
ctx.lineTo(x, CLIP_LANE_Y + CLIP_LANE_HEIGHT);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.setLineDash([]);
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ClipHitResult {
|
||
|
|
clipId: string;
|
||
|
|
edge: 'start' | 'end' | 'body';
|
||
|
|
}
|
||
|
|
|
||
|
|
export function hitTestClip(
|
||
|
|
x: number,
|
||
|
|
y: number,
|
||
|
|
state: TimelineState,
|
||
|
|
clips: Clip[]
|
||
|
|
): ClipHitResult | null {
|
||
|
|
if (y < CLIP_LANE_Y || y > CLIP_LANE_Y + CLIP_LANE_HEIGHT) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (const clip of [...clips].reverse()) {
|
||
|
|
const x1 = timeToX(clip.startTime, state);
|
||
|
|
const x2 = timeToX(clip.endTime, state);
|
||
|
|
|
||
|
|
if (Math.abs(x - x1) <= HANDLE_WIDTH) {
|
||
|
|
return { clipId: clip.id, edge: 'start' };
|
||
|
|
}
|
||
|
|
if (Math.abs(x - x2) <= HANDLE_WIDTH) {
|
||
|
|
return { clipId: clip.id, edge: 'end' };
|
||
|
|
}
|
||
|
|
if (x >= x1 && x <= x2) {
|
||
|
|
return { clipId: clip.id, edge: 'body' };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|