Merge pull request #47 from storytold/bug/fix-current-time-dragging

Bug/fix current time dragging

app/modules/LowerPanel/LowerPanel.tsx

@@ -6,6 +6,9 @@ import {
   scale,
   timelineHeight,
 } 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";
 
 interface LowerPanelPropsI {
   children: React.ReactNode;
@@ -19,7 +22,13 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
   const onTimelineClick = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
-        currentTime.value = (Math.round(event.clientX) - 92) / 4 / scale.value;
+        const newTime = Math.round((event.clientX - 92) / 4 / scale.value);
+        currentTime.value = newTime;
+        Queue.publish({
+          queueName: QueueNames.TO_ENGINE,
+          action: toEngineActions.UPDATE_TIME,
+          data: { currentTime: Math.round(newTime) },
+        });
       }
     },
     [],

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -17,11 +17,8 @@ import {
   timelineHeight,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
-import { EngineContext } from "../../contexts/EngineContext";
 
 export const Timeline = () => {
-  const editorEngine = useContext(EngineContext);
-
   const {
     characters,
     objects,
@@ -135,20 +132,21 @@ export const Timeline = () => {
           </div>
         )}
         <div
-          className="absolute text-brand-primary"
-          style={{ top: 8, left: displayTime * 4 * scale.value + 88 }}
+          className="absolute flex cursor-ew-resize flex-col items-center text-brand-primary"
+          style={{ top: 8, left: displayTime * 4 * scale.value + 84 }}
           onPointerDown={onPointerDown}
         >
-          <FontAwesomeIcon
-            icon={faSortDown}
-            className="absolute ml-[-5px] mt-[-10px] h-5 text-brand-primary"
-          />
+          <div>
+            <FontAwesomeIcon
+              icon={faSortDown}
+              className="h-5 text-brand-primary"
+            />
+          </div>
           <div
-            className="absolute block bg-brand-primary"
+            className="block bg-brand-primary"
             style={{
-              left: 0,
-              top: 8,
-              width: 4,
+              width: 2,
+              marginTop: -5,
               height: fullHeight,
             }}
           />

app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts

@@ -1,22 +1,22 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { currentTime, scale } from "~/pages/PageEnigma/store";
+import { 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";
 
 export const useMouseEventsAnimation = () => {
-  const [isActive, setIsActive] = useState("");
+  const [isActive, setIsActive] = useState(false);
   const [clientX, setClientX] = useState(0);
 
   const [time, setTime] = useState(-1);
 
   useEffect(() => {
-    const max = length * 60 * 4 * scale.value;
+    const max = filmLength.value * 60 * 4 * scale.value;
 
     const onPointerUp = () => {
       if (isActive) {
         currentTime.value = Math.round(time);
-        setIsActive("");
+        setIsActive(false);
         setTime(-1);
         Queue.publish({
           queueName: QueueNames.TO_ENGINE,
@@ -29,7 +29,7 @@ export const useMouseEventsAnimation = () => {
     const onMouseMove = (event: MouseEvent) => {
       const delta =
         (event.clientX - clientX) / 4 / scale.value + currentTime.value;
-      if (isActive === "drag") {
+      if (isActive) {
         event.stopPropagation();
         event.preventDefault();
         if (delta < 0 || delta > max) {
@@ -53,7 +53,7 @@ export const useMouseEventsAnimation = () => {
     onPointerDown: useCallback((event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
         setClientX(event.clientX);
-        setIsActive("drag");
+        setIsActive(true);
         setTime(currentTime.value);
       }
     }, []),