From 17bf313e45ac596fa9f488bedb0fcbd517507fc7 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <153381408+FromTheLOLAshes@users.noreply.github.com>
Date: Fri, 3 May 2024 12:50:20 -0400
Subject: [PATCH] fix routine for determining if mouse is over the canvas
 (#306)

Co-authored-by: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
---
 app/pages/PageEnigma/DragAndDrop/DndAsset.ts  | 49 ++++++++++++-------
 app/pages/PageEnigma/PageEditor.tsx           | 24 +--------
 .../PageEnigma/comps/Timeline/Timeline.tsx    | 19 +++++--
 3 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/app/pages/PageEnigma/DragAndDrop/DndAsset.ts b/app/pages/PageEnigma/DragAndDrop/DndAsset.ts
index 9c9e886ac8..6ce4639fa7 100644
--- a/app/pages/PageEnigma/DragAndDrop/DndAsset.ts
+++ b/app/pages/PageEnigma/DragAndDrop/DndAsset.ts
@@ -11,9 +11,10 @@ import {
   currPosition,
   dragItem,
   overTimeline,
+  sidePanelWidth,
   timelineHeight,
 } from "~/pages/PageEnigma/store";
-import { pageHeight } from "~/store";
+import { pageHeight, pageWidth } from "~/store";
 import { addShape } from "~/pages/PageEnigma/store/shape";
 
 class DndAsset {
@@ -55,28 +56,40 @@ class DndAsset {
     }
   }
 
-  onPointerUp() {
+  overCanvas(positionX: number, positionY: number) {
+    if (positionY < 69) {
+      return false;
+    }
+    if (positionY > pageHeight.value - timelineHeight.value) {
+      return false;
+    }
+    return positionX <= pageWidth.value - sidePanelWidth.value - 84;
+  }
+
+  onPointerUp(event: PointerEvent) {
     window.removeEventListener("pointerup", this.onPointerUp);
     window.removeEventListener("pointermove", this.onPointerMove);
-    if (!canDrop.value) {
-      this.endDrag();
-      return;
-    }
 
     if (dragItem.value) {
-      const mediaItem = dragItem.value;
-      if (mediaItem.type === AssetType.CHARACTER) {
-        addCharacter(dragItem.value);
-      }
-      // if (dragItem.value.type === AssetType.CAMERA) {
-      //   console.log("Dragged In Camera Type")
-      // }
-      if (dragItem.value.type === AssetType.OBJECT) {
-        addObject(dragItem.value);
-      }
+      const positionX = event.pageX;
+      const positionY = event.pageY;
+      if (this.overCanvas(positionX, positionY)) {
+        const mediaItem = dragItem.value;
+        if (mediaItem.type === AssetType.CHARACTER) {
+          addCharacter(dragItem.value);
+        }
+        // if (dragItem.value.type === AssetType.CAMERA) {
+        //   console.log("Dragged In Camera Type")
+        // }
+        if (dragItem.value.type === AssetType.OBJECT) {
+          addObject(dragItem.value);
+        }
 
-      if (dragItem.value.type === AssetType.SHAPE) {
-        addShape(dragItem.value);
+        if (dragItem.value.type === AssetType.SHAPE) {
+          addShape(dragItem.value);
+        }
+        this.endDrag();
+        return;
       }
     }
 
diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx
index ad53cf40ab..697f6d32bb 100644
--- a/app/pages/PageEnigma/PageEditor.tsx
+++ b/app/pages/PageEnigma/PageEditor.tsx
@@ -91,29 +91,7 @@ export const PageEditor = () => {
                     84,
                   height: pageHeight.value - timelineHeight.value - 68,
                 }}>
-                <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;
-                    }
-                  }}
-                />
+                <canvas id="video-scene" width="1280px" height="720px" />
                 {editorState.value === EditorStates.PREVIEW && (
                   <img
                     className="absolute inset-0"
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index ecafa32b2f..e157c7caca 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -5,6 +5,7 @@ import { Camera } from "./Camera";
 import { Audio } from "./Audio";
 import { ConfirmationModal } from "~/components/ConfirmationModal";
 import {
+  characterGroup,
   deleteAudioClip,
   deleteCharacterClip,
   filmLength,
@@ -56,7 +57,19 @@ export const Timeline = () => {
     lastSelectedObject.current = selectedObject.value;
     switch (selectedObject.value?.type) {
       case AssetType.CHARACTER:
-        scrollItem(`track-character-${selectedObject.value?.id}`);
+        if (
+          characterGroup.value.characters.some(
+            (character) => character.object_uuid === selectedObject.value?.id,
+          )
+        ) {
+          scrollItem(`track-character-${selectedObject.value?.id}`);
+          break;
+        }
+        if (objectsMinimized.value) {
+          scrollItem("track-objects");
+          break;
+        }
+        scrollItem(`track-object-${selectedObject.value?.id}`);
         break;
       case AssetType.CAMERA:
         scrollItem("track-camera");
@@ -64,9 +77,9 @@ export const Timeline = () => {
       case AssetType.OBJECT:
         if (objectsMinimized.value) {
           scrollItem("track-objects");
-        } else {
-          scrollItem(`track-object-${selectedObject.value?.id}`);
+          break;
         }
+        scrollItem(`track-object-${selectedObject.value?.id}`);
         break;
     }
   }