diff options
Diffstat (limited to 'apps/web/src/components/editor/timeline-canvas')
| -rw-r--r-- | apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx | 24 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx | 112 |
2 files changed, 68 insertions, 68 deletions
diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx index c0efc19e..e0386f1d 100644 --- a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx +++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx @@ -6,19 +6,19 @@ import React, { forwardRef } from "react"; * Captures mouse events for scrubbing and ensures pointer events are properly enabled. */ const TimelineCanvasRulerWrapper = forwardRef< - HTMLDivElement, - TimelineCanvasRulerWrapperProps + HTMLDivElement, + TimelineCanvasRulerWrapperProps >(({ children, onMouseDown, className = "" }, ref) => { - return ( - <div - ref={ref} - className={`relative overflow-hidden h-5 w-full select-none cursor-pointer ${className}`} - onMouseDown={onMouseDown} - data-ruler-wrapper - > - {children} - </div> - ); + return ( + <div + ref={ref} + className={`relative overflow-hidden h-5 w-full select-none cursor-pointer ${className}`} + onMouseDown={onMouseDown} + data-ruler-wrapper + > + {children} + </div> + ); }); export default TimelineCanvasRulerWrapper; diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx index c40cdbda..c6447432 100644 --- a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx +++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx @@ -7,72 +7,72 @@ import React, { useRef, useEffect } from "react"; * Should be wrapped by TimelineCanvasRulerWrapper for interaction handling. */ export default function TimelineCanvasRuler({ - zoomLevel, - duration, - width, - height = 20, + zoomLevel, + duration, + width, + height = 20, }: TimelineCanvasRulerProps) { - const canvasRef = useRef<HTMLCanvasElement>(null); + const canvasRef = useRef<HTMLCanvasElement>(null); - useEffect(() => { - const ctx = canvasRef.current?.getContext("2d"); - if (!ctx) return; + useEffect(() => { + const ctx = canvasRef.current?.getContext("2d"); + if (!ctx) return; - ctx.clearRect(0, 0, width, height); + ctx.clearRect(0, 0, width, height); - const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; + const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; - const getTimeInterval = () => { - if (pixelsPerSecond >= 200) return 0.1; - if (pixelsPerSecond >= 100) return 0.5; - if (pixelsPerSecond >= 50) return 1; - if (pixelsPerSecond >= 25) return 2; - if (pixelsPerSecond >= 12) return 5; - if (pixelsPerSecond >= 6) return 10; - return 30; - }; + const getTimeInterval = () => { + if (pixelsPerSecond >= 200) return 0.1; + if (pixelsPerSecond >= 100) return 0.5; + if (pixelsPerSecond >= 50) return 1; + if (pixelsPerSecond >= 25) return 2; + if (pixelsPerSecond >= 12) return 5; + if (pixelsPerSecond >= 6) return 10; + return 30; + }; - const mainInterval = getTimeInterval(); - const tickPerMain = 5; - const subInterval = mainInterval / tickPerMain; + const mainInterval = getTimeInterval(); + const tickPerMain = 5; + const subInterval = mainInterval / tickPerMain; - const totalTicks = Math.ceil(duration / subInterval) + 1; + const totalTicks = Math.ceil(duration / subInterval) + 1; - for (let i = 0; i < totalTicks; i++) { - const time = i * subInterval; - const x = time * pixelsPerSecond; + for (let i = 0; i < totalTicks; i++) { + const time = i * subInterval; + const x = time * pixelsPerSecond; - const isMain = i % tickPerMain === 0; + const isMain = i % tickPerMain === 0; - ctx.beginPath(); - ctx.moveTo(x, 0); - ctx.lineTo(x, isMain ? height * 0.3 : height * 0.1); - ctx.strokeStyle = isMain ? "#999" : "#ccc"; - ctx.lineWidth = isMain ? 1 : 0.5; - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, 0); + ctx.lineTo(x, isMain ? height * 0.3 : height * 0.1); + ctx.strokeStyle = isMain ? "#999" : "#ccc"; + ctx.lineWidth = isMain ? 1 : 0.5; + ctx.stroke(); - // Label - if (isMain) { - ctx.fillStyle = "#666"; - ctx.font = "10px sans-serif"; - const mins = Math.floor(time / 60); - const secs = Math.floor(time % 60); - let label = ""; - let xTranslate = 10; - if (mainInterval < 1) { - label = `${time.toFixed(1)}s`; - } else if (mins > 0) { - label = `${mins}:${secs.toString().padStart(2, "0")}`; - } else { - label = `${secs}s`; - xTranslate = 5; - } - ctx.fillText(label, x - xTranslate, height - 4); - } - } - }, [zoomLevel, duration, width, height]); + // Label + if (isMain) { + ctx.fillStyle = "#666"; + ctx.font = "10px sans-serif"; + const mins = Math.floor(time / 60); + const secs = Math.floor(time % 60); + let label = ""; + let xTranslate = 10; + if (mainInterval < 1) { + label = `${time.toFixed(1)}s`; + } else if (mins > 0) { + label = `${mins}:${secs.toString().padStart(2, "0")}`; + } else { + label = `${secs}s`; + xTranslate = 5; + } + ctx.fillText(label, x - xTranslate, height - 4); + } + } + }, [zoomLevel, duration, width, height]); - return ( - <canvas ref={canvasRef} width={width} height={height} className="block" /> - ); + return ( + <canvas ref={canvasRef} width={width} height={height} className="block" /> + ); } |