From b266678fe4bb8c4053688fd037693fa2f930ac14 Mon Sep 17 00:00:00 2001
From: gantiro <gantiro396@gmail.com>
Date: Tue, 15 Jul 2025 22:51:38 +0700
Subject: Optimize timeline performance

---
 .../timeline-canvas-ruler-wrapper.tsx              | 24 ++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx

(limited to 'apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx')

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
new file mode 100644
index 00000000..c0efc19e
--- /dev/null
+++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx
@@ -0,0 +1,24 @@
+import { TimelineCanvasRulerWrapperProps } from "@/types/timeline";
+import React, { forwardRef } from "react";
+
+/**
+ * Wrapper div around the canvas-based timeline ruler.
+ * Captures mouse events for scrubbing and ensures pointer events are properly enabled.
+ */
+const TimelineCanvasRulerWrapper = forwardRef<
+  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>
+  );
+});
+
+export default TimelineCanvasRulerWrapper;
-- 
cgit v1.3.1