daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-04 17:38:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix routine for determining if mouse is over the canvas (#306)

Browse Source 
Co-authored-by: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
This commit is contained in:
FromTheLOLAshesandChristopher Oliphant authored and GitHub committed 2024-05-03 12:50:20 -04:00
1 parent 022e34b8a1
commit 17bf313e45
3 files changed
+48 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/pages/PageEnigma/DragAndDrop/DndAsset.ts
+31 -18
View File
@@ -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;
}
}
app/pages/PageEnigma/PageEditor.tsx
+1 -23
View File
@@ -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"
app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+16 -3
View File
@@ -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;
}
}