PageScene: migrate dragAndDrop signals to PageSceneStore

frontend/apps/artcraft/app/src/pages/PageScene/DragAndDrop/DndAsset.ts

@@ -1,10 +1,5 @@
 import React from "react";
 import { MediaItem } from "~/pages/PageScene/models";
-import {
-  canDrop,
-  currPosition,
-  dragItem,
-} from "~/pages/PageScene/signals";
 import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 import { pageHeight, pageWidth } from "~/signals";
 import { AssetType } from "~/enums";
@@ -38,29 +33,27 @@ class DndAsset {
   ) {
     if (event.button === 0) {
       this.editor = editor;
-      dragItem.value = item;
-      currPosition.value = {
-        currX: event.pageX,
-        currY: event.pageY,
-      };
+      const store = usePageSceneStore.getState();
+      store.setDragItem(item);
+      store.setDragPosition({ currX: event.pageX, currY: event.pageY });
       this.initX = event.pageX;
       this.initY = event.pageY;
       this.isDragging = false;
-      canDrop.value = false;
+      store.setCanDrop(false);
       this.notDropText = "";
-      usePageSceneStore.getState().setAssetModalVisibleDuringDrag(false);
+      store.setAssetModalVisibleDuringDrag(false);
       window.addEventListener("pointerup", this.onPointerUp);
       window.addEventListener("pointermove", this.onPointerMove);
     }
   }
 
   endDrag() {
-    if (dragItem.value) {
-      dragItem.value = null;
-      canDrop.value = false;
+    const store = usePageSceneStore.getState();
+    if (store.dragItem) {
+      store.setDragItem(null);
+      store.setCanDrop(false);
       this.overElement = null;
       this.notDropText = "";
-      const store = usePageSceneStore.getState();
       store.setAssetModalVisibleDuringDrag(store.reopenAfterDrag);
     }
     this.editor = null;
@@ -80,20 +73,21 @@ class DndAsset {
     window.removeEventListener("pointerup", this.onPointerUp);
     window.removeEventListener("pointermove", this.onPointerMove);
 
+    const store = usePageSceneStore.getState();
     if (!this.isDragging) {
-      usePageSceneStore.getState().setAssetModalVisibleDuringDrag(true);
-      dragItem.value = null;
-      currPosition.value = { currX: 0, currY: 0 };
+      store.setAssetModalVisibleDuringDrag(true);
+      store.setDragItem(null);
+      store.setDragPosition({ currX: 0, currY: 0 });
       this.editor = null;
       return;
     }
 
     const editor = this.editor;
-    if (dragItem.value && editor) {
+    const mediaItem = store.dragItem;
+    if (mediaItem && editor) {
       const positionX = event.pageX;
       const positionY = event.pageY;
       if (this.overCanvas(positionX, positionY)) {
-        const mediaItem = dragItem.value;
         if (mediaItem.type === AssetType.CHARACTER) {
           void addCharacter(editor, mediaItem);
         } else if (
@@ -112,7 +106,8 @@ class DndAsset {
   }
 
   onPointerMove(event: MouseEvent) {
-    if (dragItem.value) {
+    const store = usePageSceneStore.getState();
+    if (store.dragItem) {
       event.stopPropagation();
       event.preventDefault();
       const deltaX = event.pageX - this.initX;
@@ -123,10 +118,10 @@ class DndAsset {
       ) {
         this.isDragging = true;
       }
-      currPosition.value = {
+      store.setDragPosition({
         currX: this.initX + deltaX,
         currY: this.initY + deltaY,
-      };
+      });
       if (this.overElement) {
         const pos = this.overElement;
         const eventY = event.pageY;
@@ -137,7 +132,7 @@ class DndAsset {
         if (inHeight && inWidth) {
           return;
         }
-        canDrop.value = false;
+        store.setCanDrop(false);
         this.dropId = "";
         this.overElement = null;
         this.notDropText = "";

frontend/apps/artcraft/app/src/pages/PageScene/comps/DragComponent/DragComponent.tsx

@@ -1,16 +1,17 @@
-import { currPosition, dragItem } from "~/pages/PageScene/signals";
-import { useSignals } from "@preact/signals-react/runtime";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 
 export const DragComponent = () => {
-  useSignals();
-  if (!dragItem.value) {
+  const dragItem = usePageSceneStore((s) => s.dragItem);
+  const dragPosition = usePageSceneStore((s) => s.dragPosition);
+
+  if (!dragItem) {
     return null;
   }
-  const { currX, currY } = currPosition.value;
+  const { currX, currY } = dragPosition;
 
-  const thumbnail = dragItem.value.thumbnail
-    ? dragItem.value.thumbnail
-    : `/resources/images/default-covers/${dragItem.value.imageIndex || 0}.webp`;
+  const thumbnail = dragItem.thumbnail
+    ? dragItem.thumbnail
+    : `/resources/images/default-covers/${dragItem.imageIndex || 0}.webp`;
 
   return (
     <div
@@ -28,11 +29,11 @@ export const DragComponent = () => {
           crossOrigin: "anonymous",
           src: thumbnail,
         }}
-        alt={dragItem.value.name}
+        alt={dragItem.name}
         className="pointer-events-none select-none rounded-t-lg bg-gradient-to-b from-[#CCCCCC] to-[#A0A0A0]"
       />
       <div className="w-full truncate rounded-b-lg bg-ui-controls px-2 py-1 text-center text-[12px]">
-        {dragItem.value.name || dragItem.value.media_id}
+        {dragItem.name || dragItem.media_id}
       </div>
     </div>
   );

frontend/apps/artcraft/app/src/pages/PageScene/signals/dragAndDrop.ts

@@ -1,10 +0,0 @@
-import { signal } from "@preact/signals-core";
-import { MediaItem } from "~/pages/PageScene/models";
-
-export const canDrop = signal(false);
-export const dragItem = signal<MediaItem | null>(null);
-
-export const currPosition = signal<{ currX: number; currY: number }>({
-  currX: 0,
-  currY: 0,
-});

frontend/apps/artcraft/app/src/pages/PageScene/signals/index.ts

@@ -1,5 +1,4 @@
 export * from "./demoAssets";
 export * from "./engine";
-export * from "./dragAndDrop";
 export * from "./objectPanel";
 export * from "./outliner";