Make sure the clip has room before being able to drop it

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,

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) {

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);

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: [],

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;
     },
     [],
   );

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);