From e2f182406b3dc1c351da85633a6e2d5451ef4112 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Thu, 28 Mar 2024 17:06:53 +0700
Subject: [PATCH] Make sure the clip has room before being able to drop it

---
 .../comps/SidePanelTabs/ClipElement.tsx       |  2 +-
 app/pages/PageEnigma/comps/Timeline/Track.tsx | 26 +++++++++++++++++--
 .../Timeline/utils/useMouseEventsHeight.ts    |  1 -
 .../contexts/TrackContext/TrackContext.tsx    |  6 ++++-
 .../TrackContext/utils/useUpdateDragDrop.ts   | 10 +++++--
 app/pages/PageEnigma/store/dragAndDrop.ts     |  1 +
 6 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
index 0bcaf6d128..715a956933 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
@@ -62,7 +62,7 @@ export const ClipElement = ({ clip, type }: Props) => {
         const box = document.getElementById(`ani-clip-${clip.id}`);
         const position = box!.getBoundingClientRect();
 
-        startDrag(type, clip.id);
+        startDrag(type, clip.id, clip.length);
         setCurrPosition({
           x: position.x,
           y: position.y + position.height + 1,
diff --git a/app/pages/PageEnigma/comps/Timeline/Track.tsx b/app/pages/PageEnigma/comps/Timeline/Track.tsx
index c95615fa93..f683f7ea52 100644
--- a/app/pages/PageEnigma/comps/Timeline/Track.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Track.tsx
@@ -5,6 +5,7 @@ import { BaseClip } from "~/pages/PageEnigma/models/track";
 import { PointerEvent } from "react";
 import {
   canDrop,
+  clipLength,
   dragType,
   dropId,
   dropOffset,
@@ -39,7 +40,6 @@ export const Track = ({
     if (dragType.value !== trackType) {
       return;
     }
-    canDrop.value = true;
     dropId.value = id;
   }
 
@@ -51,8 +51,30 @@ export const Track = ({
     if (!track) {
       return;
     }
+
+    // Now check the the clip fits
     const position = track.getBoundingClientRect();
-    dropOffset.value = (event.clientX - position.x) / 4 / scale.value;
+    const clipOffset = (event.clientX - position.x) / 4 / scale.value;
+
+    if (clipOffset + clipLength.value > filmLength.value * 60) {
+      canDrop.value = false;
+      return;
+    }
+
+    const overlap = clips.some((clip) => {
+      if (clipOffset === clip.offset) {
+        return true;
+      }
+      if (clipOffset > clip.offset && clipOffset <= clip.offset + clip.length) {
+        return true;
+      }
+      return (
+        clipOffset < clip.offset && clipOffset + clipLength.value >= clip.offset
+      );
+    });
+
+    canDrop.value = !overlap;
+    dropOffset.value = clipOffset;
   }
   function onPointerLeave() {
     if (dragType.value !== trackType) {
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsHeight.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsHeight.ts
index d1b1a79fd7..50f60f2af3 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsHeight.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsHeight.ts
@@ -10,7 +10,6 @@ export const useMouseEventsHeight = () => {
   useEffect(() => {
     const onPointerUp = () => {
       if (isActive) {
-        console.log("up", height);
         timelineHeight.value = Math.round(height);
         setIsActive(false);
         setHeight(-1);
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
index 7115d4677d..8b8fc0bfd3 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
@@ -79,7 +79,11 @@ export const TrackContext = createContext<{
   audioClips: AudioClip[];
 
   // drag and drop
-  startDrag: (type: "animations" | "lipSync", id: string) => void;
+  startDrag: (
+    type: "animations" | "lipSync",
+    id: string,
+    length: number,
+  ) => void;
   endDrag: () => void;
 }>({
   characters: [],
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts
index 529cf82152..32d7d9192c 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts
@@ -1,11 +1,17 @@
 import { useCallback } from "react";
-import { canDrop, dragId, dragType } from "~/pages/PageEnigma/store";
+import {
+  canDrop,
+  clipLength,
+  dragId,
+  dragType,
+} from "~/pages/PageEnigma/store";
 
 export default function useUpdateDragDrop() {
   const startDrag = useCallback(
-    (type: "animations" | "lipSync", id: string) => {
+    (type: "animations" | "lipSync", id: string, length: number) => {
       dragId.value = id;
       dragType.value = type;
+      clipLength.value = length;
     },
     [],
   );
diff --git a/app/pages/PageEnigma/store/dragAndDrop.ts b/app/pages/PageEnigma/store/dragAndDrop.ts
index dbc5018fd7..e38765ce73 100644
--- a/app/pages/PageEnigma/store/dragAndDrop.ts
+++ b/app/pages/PageEnigma/store/dragAndDrop.ts
@@ -6,3 +6,4 @@ export const canDrop = signal(false);
 export const overTimeline = signal(false);
 export const dropId = signal("");
 export const dropOffset = signal(0);
+export const clipLength = signal(0);