drag and drop fix

app/pages/PageEnigma/PageEditor.tsx

@@ -18,7 +18,8 @@ import {
   sidePanelVisible,
   dndSidePanelWidth,
   dndTimelineHeight,
-  sidePanelHeight,
+  dragItem,
+  canDrop,
 } from "~/pages/PageEnigma/store";
 import { useSignals } from "@preact/signals-react/runtime";
 import { AppUiContext } from "~/contexts/AppUiContext";
@@ -26,6 +27,7 @@ import { pageHeight, pageWidth } from "~/store";
 import { TopBar } from "~/modules/TopBar";
 import { DialogueTTS } from "./comps/DialogueTTS/DialogueTTS";
 import { Pages } from "~/pages/PageEnigma/constants/page";
+import { AssetType } from "./models/assets";
 
 interface Props {
   setPage: (page: Pages) => void;
@@ -83,7 +85,29 @@ export const PageEditor = ({ setPage }: Props) => {
                     84,
                   height: pageHeight.value - timelineHeight.value - 68,
                 }}>
-                <canvas id="video-scene" width="1280px" height="720px" />
+                <canvas
+                  id="video-scene"
+                  width="1280px"
+                  height="720px"
+                  onPointerOver={() => {
+                    if (
+                      dragItem.value?.type === AssetType.OBJECT ||
+                      dragItem.value?.type === AssetType.SHAPE ||
+                      dragItem.value?.type === AssetType.CHARACTER
+                    ) {
+                      canDrop.value = true;
+                    }
+                  }}
+                  onPointerLeave={() => {
+                    if (
+                      dragItem.value?.type === AssetType.OBJECT ||
+                      dragItem.value?.type === AssetType.SHAPE ||
+                      dragItem.value?.type === AssetType.CHARACTER
+                    ) {
+                      canDrop.value = false;
+                    }
+                  }}
+                />
               </div>
 
               {/* Top controls */}

app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx

@@ -33,6 +33,11 @@ export const TrackProvider = ({ children }: Props) => {
 
   // cross group functions
   const dropClip = useCallback(() => {
+    if (!canDrop.value) {
+      endDrag();
+      return;
+    }
+
     if (dragItem.value) {
       const mediaItem = dragItem.value;
       if (mediaItem.type === AssetType.CHARACTER) {