Add Stage.tsx refactoring foundation: hooks and tool behaviors

frontend/src/editor/components/library.tsx

@@ -34,6 +34,7 @@ import { defaultAppearanceId } from "../utils/character-helpers";
 import { makeId } from "../utils/utils";
 import Sprite from "./sprites/sprite";
 import { TapToEditLabel } from "./tap-to-edit-label";
+import { createCharacterSpriteData, createAppearanceData } from "./stage/hooks";
 
 interface LibraryItemProps {
   character: Character;
@@ -78,13 +79,15 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
       event.dataTransfer.setDragImage(img, offset.dragLeft, offset.dragTop);
 
       event.dataTransfer.setData("drag-offset", JSON.stringify(offset));
-      if (dragType) {
+      if (dragType === "sprite") {
         event.dataTransfer.setData(
-          dragType,
-          JSON.stringify({
-            characterId: character.id,
-            appearance: appearance,
-          }),
+          "sprite",
+          createCharacterSpriteData(character.id, appearance),
+        );
+      } else if (dragType === "appearance" && appearance) {
+        event.dataTransfer.setData(
+          "appearance",
+          createAppearanceData(character.id, appearance),
         );
       }
     },

frontend/src/editor/components/sprites/actor-sprite.tsx

@@ -5,6 +5,7 @@ import {
   renderTransformedImage,
   transformSwapsDimensions,
 } from "../../utils/stage-helpers";
+import { createActorSpriteData } from "../stage/hooks";
 import VariableOverlay from "../modal-paint/variable-overlay";
 import { DEFAULT_APPEARANCE_INFO, SPRITE_TRANSFORM_CSS } from "./sprite";
 
@@ -99,10 +100,7 @@ const ActorSprite = (props: {
     );
     event.dataTransfer.setData(
       "sprite",
-      JSON.stringify({
-        dragAnchorActorId: actor.id,
-        actorIds: dragActorIds,
-      }),
+      createActorSpriteData(dragActorIds, actor.id),
     );
 
     // Create a properly transformed drag image using canvas

frontend/src/editor/components/sprites/recording-handle.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { Position } from "../../../types";
 import { STAGE_CELL_SIZE } from "../../constants/constants";
+import { setHandleDragData, HandleSide } from "../stage/hooks";
 
-const RecordingHandle = ({ side, position }: { side: string; position: Position }) => {
+const RecordingHandle = ({ side, position }: { side: HandleSide; position: Position }) => {
   const onDragStart = (event: React.DragEvent) => {
     const img = new Image();
     img.src =
       "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
     event.dataTransfer.setDragImage(img, 0, 0);
     event.dataTransfer.effectAllowed = "move";
-    event.dataTransfer.setData(`handle`, "true");
-    event.dataTransfer.setData(`handle:${side}`, "true");
+    setHandleDragData(event.dataTransfer, side);
   };
 
   return (