Move selected Item to signal

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from "react";
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
+import { useCallback, useEffect, useState } from "react";
 import { LowerPanel } from "~/modules/LowerPanel";
 
 import { Camera } from "./Camera";
@@ -18,6 +17,7 @@ import { Characters } from "~/pages/PageEnigma/comps/Timeline/Characters";
 import { ObjectGroups } from "~/pages/PageEnigma/comps/Timeline/ObjectGroups";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 import { Clip, Keyframe } from "~/pages/PageEnigma/models/track";
+import { selectedItem } from "~/pages/PageEnigma/store/selectedItem";
 
 function getItemType(item: Clip | Keyframe | null) {
   if (!item) {
@@ -28,7 +28,6 @@ function getItemType(item: Clip | Keyframe | null) {
 
 export const Timeline = () => {
   useSignals();
-  const { selectedItem } = useContext(TrackContext);
   const [dialogOpen, setDialogOpen] = useState(false);
   const { deleteKeyframe } = useUpdateKeyframe();
 
@@ -39,22 +38,23 @@ export const Timeline = () => {
     timelineHeight.value = window.outerHeight * 0.25;
   }, []);
 
-  const onDeleteAsk = useCallback(
-    (event: KeyboardEvent) => {
-      if (["Backspace", "Delete"].indexOf(event.key) > -1 && selectedItem) {
-        event.stopPropagation();
-        event.preventDefault();
-        setDialogOpen(true);
-      }
-    },
-    [selectedItem],
-  );
+  const onDeleteAsk = useCallback((event: KeyboardEvent) => {
+    if (
+      ["Backspace", "Delete"].indexOf(event.key) > -1 &&
+      selectedItem.value !== null
+    ) {
+      event.stopPropagation();
+      event.preventDefault();
+      setDialogOpen(true);
+    }
+  }, []);
 
   const onDelete = useCallback(() => {
-    deleteCharacterClip(selectedItem as Clip);
-    deleteAudioClip(selectedItem as Clip);
-    deleteKeyframe(selectedItem as Keyframe);
-  }, [selectedItem, deleteKeyframe]);
+    deleteCharacterClip(selectedItem.value as Clip);
+    deleteAudioClip(selectedItem.value as Clip);
+    deleteKeyframe(selectedItem.value as Keyframe);
+    selectedItem.value = null;
+  }, [deleteKeyframe]);
 
   useEffect(() => {
     document.addEventListener("keydown", onDeleteAsk);
@@ -82,7 +82,7 @@ export const Timeline = () => {
       </LowerPanel>
       <ConfirmationModal
         title="Delete Clip"
-        text={`Are you sure you want to delete the selected ${getItemType(selectedItem)}?`}
+        text={`Are you sure you want to delete the selected ${getItemType(selectedItem.value)}?`}
         open={dialogOpen}
         onClose={() => setDialogOpen(false)}
         onOk={() => {

app/pages/PageEnigma/comps/Timeline/TrackClip.tsx

@@ -1,8 +1,8 @@
 import { useMouseEventsClip } from "./utils/useMouseEventsClip";
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { scale } from "~/pages/PageEnigma/store";
 import { Clip } from "~/pages/PageEnigma/models/track";
+import { selectedItem } from "~/pages/PageEnigma/store/selectedItem";
 
 interface Props {
   min: number;
@@ -13,7 +13,6 @@ interface Props {
 }
 
 export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
-  const { selectItem, selectedItem } = useContext(TrackContext);
   const [state, setState] = useState({
     length: clip.length,
     offset: clip.offset,
@@ -26,23 +25,10 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
     setState,
   );
 
-  const selectedClipId = (selectedItem as Clip | null)?.clip_uuid ?? "";
+  const selectedClipId = (selectedItem.value as Clip | null)?.clip_uuid ?? "";
 
   const { length, offset } = state;
 
-  // const onPlayClick = useCallback(
-  //   (event: React.MouseEvent<HTMLButtonElement>) => {
-  //     event.stopPropagation();
-  //     event.preventDefault();
-  //     Queue.publish({
-  //       queueName: QueueNames.TO_ENGINE,
-  //       action: toEngineActions.PLAY_CLIP,
-  //       data: clip,
-  //     });
-  //   },
-  //   [clip],
-  // );
-
   const classes = [
     "absolute",
     clip.clip_uuid === selectedClipId
@@ -78,7 +64,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           cursor: "w-resize",
         }}
         onPointerDown={(event) => onPointerDown(event, "left")}
-        onClick={() => selectItem(clip)}
+        onClick={() => (selectedItem.value = clip)}
       />
       <button
         className={[
@@ -94,7 +80,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           cursor: "move",
         }}
         onPointerDown={(event) => onPointerDown(event, "drag")}
-        onClick={() => selectItem(clip)}
+        onClick={() => (selectedItem.value = clip)}
       />
       <button
         className={[
@@ -111,21 +97,8 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           cursor: "e-resize",
         }}
         onPointerDown={(event) => onPointerDown(event, "right")}
-        onClick={() => selectItem(clip)}
+        onClick={() => (selectedItem.value = clip)}
       />
-      {/*{selectedItem === clip.clip_uuid && (*/}
-      {/*  <button*/}
-      {/*    className="absolute flex h-full items-center justify-center"*/}
-      {/*    style={{*/}
-      {/*      width: length * 4 * scale.value,*/}
-      {/*      left: offset * 4 * scale.value,*/}
-      {/*      zIndex: 2000,*/}
-      {/*    }}*/}
-      {/*    onPointerDown={onPlayClick}*/}
-      {/*  >*/}
-      {/*    <FontAwesomeIcon icon={faPlay} />*/}
-      {/*  </button>*/}
-      {/*)}*/}
     </>
   );
 };

app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx

@@ -1,10 +1,10 @@
 import { Keyframe } from "~/pages/PageEnigma/models/track";
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { scale } from "~/pages/PageEnigma/store";
 import { useMouseEventsKeyframe } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsKeyframe";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSortUpDown } from "@fortawesome/pro-solid-svg-icons";
+import { selectedItem } from "~/pages/PageEnigma/store/selectedItem";
 
 interface Props {
   min: number;
@@ -21,8 +21,6 @@ export const TrackKeyFrame = ({
   style,
   updateKeyframe,
 }: Props) => {
-  const { selectedItem, selectItem } = useContext(TrackContext);
-  // const { selectItem, selectedItem } = useContext(TrackContext);
   const [offset, setOffset] = useState(keyframe.offset);
   const { onPointerDown } = useMouseEventsKeyframe({
     keyframe,
@@ -33,7 +31,7 @@ export const TrackKeyFrame = ({
   });
 
   const selectedKeyframeId =
-    (selectedItem as Keyframe | null)?.keyframe_uuid ?? "";
+    (selectedItem.value as Keyframe | null)?.keyframe_uuid ?? "";
 
   const classes = [
     "absolute",
@@ -43,26 +41,24 @@ export const TrackKeyFrame = ({
   ];
 
   return (
-    <>
-      <button
-        className={[
-          ...classes,
-          "rounded-l-lg",
-          "block h-full",
-          keyframe.keyframe_uuid === selectedKeyframeId
-            ? "border border-b-2 border-l-2 border-r-0 border-t-2 border-white focus-visible:outline-0"
-            : "",
-        ].join(" ")}
-        style={{
-          width: 15,
-          left: offset * 4 * scale.value,
-          cursor: "w-resize",
-        }}
-        onPointerDown={(event) => onPointerDown(event, "left")}
-        onClick={() => selectItem(keyframe)}
-      >
-        <FontAwesomeIcon icon={faSortUpDown} />
-      </button>
-    </>
+    <button
+      className={[
+        ...classes,
+        "rounded-l-lg",
+        "block h-full",
+        keyframe.keyframe_uuid === selectedKeyframeId
+          ? "border-2 border-white focus-visible:outline-0"
+          : "",
+      ].join(" ")}
+      style={{
+        width: 15,
+        left: offset * 4 * scale.value,
+        cursor: "w-resize",
+      }}
+      onPointerDown={(event) => onPointerDown(event, "left")}
+      onClick={() => (selectedItem.value = keyframe)}
+    >
+      <FontAwesomeIcon icon={faSortUpDown} />
+    </button>
   );
 };

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

@@ -11,10 +11,6 @@ export const TrackContext = createContext<{
   addKeyframe: (keyframe: QueueKeyframe, offset: number) => void;
   deleteKeyframe: (keyframe: Keyframe) => void;
 
-  // current - only select one item - will be replaced
-  selectedItem: Clip | Keyframe | null;
-  selectItem: (item: Clip | Keyframe) => void;
-
   // sidebar clips
   animationClips: MediaClip[];
   audioClips: MediaClip[];
@@ -30,9 +26,6 @@ export const TrackContext = createContext<{
   addKeyframe: () => {},
   deleteKeyframe: () => {},
 
-  selectedItem: null,
-  selectItem: () => {},
-
   animationClips: [],
   audioClips: [],
 

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

@@ -27,14 +27,6 @@ export const TrackProvider = ({ children }: Props) => {
 
   const { endDrag, ...dragDrop } = useUpdateDragDrop();
 
-  const [selectedItem, setSelectedItem] = useState<Clip | Keyframe | null>(
-    null,
-  );
-  const selectItem = useCallback((item: Clip | Keyframe) => {
-    console.log("item", item);
-    setSelectedItem(item);
-  }, []);
-
   const [animationClips, setAnimationClips] = useState<MediaClip[]>([]);
   const [audioClips, setAudioClips] = useState<MediaClip[]>([]);
 
@@ -144,9 +136,6 @@ export const TrackProvider = ({ children }: Props) => {
     return {
       ...keyframes,
 
-      selectItem,
-      selectedItem,
-
       ...dragDrop,
       endDrag: dropClip,
 
@@ -164,9 +153,6 @@ export const TrackProvider = ({ children }: Props) => {
   }, [
     keyframes,
 
-    selectItem,
-    selectedItem,
-
     dragDrop,
     dropClip,
 

app/pages/PageEnigma/store/selectedItem.ts

@@ -0,0 +1,4 @@
+import { signal } from "@preact/signals-core";
+import { Clip, Keyframe } from "~/pages/PageEnigma/models/track";
+
+export const selectedItem = signal<Clip | Keyframe | null>(null);