From e35ef9181703855e4c0098a2c0d7c7fbe011a549 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Fri, 5 Apr 2024 11:39:52 +0200
Subject: [PATCH] Fix scrubber + scrolling

---
 app/modules/LowerPanel/LowerPanel.tsx               | 13 +++++++++++--
 .../comps/Timeline/utils/useMouseEventsAnimation.ts | 13 ++++++++++---
 .../comps/Timeline/utils/useMouseEventsClip.ts      |  2 +-
 app/pages/PageEnigma/store/timing.ts                |  2 ++
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx
index a95d7c9e8e..14657651f5 100644
--- a/app/modules/LowerPanel/LowerPanel.tsx
+++ b/app/modules/LowerPanel/LowerPanel.tsx
@@ -1,6 +1,7 @@
-import React, { useCallback } from "react";
+import React, { UIEvent, UIEventHandler, useCallback } from "react";
 import { useMouseEventsHeight } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsHeight";
 import {
+  currentScroll,
   currentTime,
   overTimeline,
   scale,
@@ -22,7 +23,10 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
   const onTimelineClick = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
-        const newTime = Math.round((event.clientX - 92) / 4 / scale.value);
+        console.log("??", event.clientX, event.pageX, currentScroll.value);
+        const newTime = Math.round(
+          (event.clientX + currentScroll.value - 92) / 4 / scale.value,
+        );
         if (newTime < 0) {
           return;
         }
@@ -37,6 +41,10 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
     [],
   );
 
+  const onScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    currentScroll.value = event.currentTarget.scrollLeft;
+  }, []);
+
   return (
     <>
       <div
@@ -56,6 +64,7 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
         }}
         onPointerLeave={() => (overTimeline.value = false)}
         onPointerDown={onTimelineClick}
+        onScroll={onScroll}
       >
         {children}
       </div>
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
index f3da2a8edb..8f4d302b36 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { currentTime, filmLength, scale } from "~/pages/PageEnigma/store";
+import {
+  currentScroll,
+  currentTime,
+  filmLength,
+  scale,
+} from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
@@ -21,11 +26,13 @@ export const useMouseEventsAnimation = () => {
         Queue.publish({
           queueName: QueueNames.TO_ENGINE,
           action: toEngineActions.UPDATE_TIME,
-          data: { currentTime: Math.round(time) },
+          data: { currentTime: Math.round(time) + currentScroll.value },
         });
       }
     };
 
+    console.log("scroll", currentScroll.value);
+
     const onMouseMove = (event: MouseEvent) => {
       const delta = Math.round(
         (event.clientX - clientX) / 4 / scale.value + currentTime.value,
@@ -41,7 +48,7 @@ export const useMouseEventsAnimation = () => {
             Queue.publish({
               queueName: QueueNames.TO_ENGINE,
               action: toEngineActions.UPDATE_TIME,
-              data: { currentTime: delta },
+              data: { currentTime: delta + currentScroll.value },
             });
           }
           return delta;
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
index 4746501ee8..410298cf37 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
@@ -38,7 +38,7 @@ export const useMouseEventsClip = (
         if (deltaOffset < min) {
           currOffset.current = min;
         } else if (deltaOffset + currLength.current > max) {
-          currOffset.current = max;
+          currOffset.current = max - currLength.current;
         } else {
           currOffset.current = deltaOffset;
         }
diff --git a/app/pages/PageEnigma/store/timing.ts b/app/pages/PageEnigma/store/timing.ts
index d64bb7525a..482fa09c8b 100644
--- a/app/pages/PageEnigma/store/timing.ts
+++ b/app/pages/PageEnigma/store/timing.ts
@@ -1,3 +1,5 @@
 import { signal } from "@preact/signals-core";
 
 export const currentTime = signal(0);
+
+export const currentScroll = signal(0);