feat: reinstates interactions

src/components/Renderer/Renderer.tsx

@@ -15,8 +15,11 @@ import { useResizeObserver } from 'src/hooks/useResizeObserver';
 export const Renderer = () => {
   const [isDebugModeOn] = useState(false);
   const containerRef = useRef<HTMLDivElement>();
-  const scene = useSceneStore(({ nodes, connectors, groups }) => {
-    return { nodes, connectors, groups };
+  const nodes = useSceneStore((state) => {
+    return state.nodes;
+  });
+  const scene = useSceneStore(({ connectors, groups }) => {
+    return { connectors, groups };
   });
   const interactionsEnabled = useUiStateStore((state) => {
     return state.interactionsEnabled;
@@ -49,7 +52,7 @@ export const Renderer = () => {
     (nodeIds: string[]) => {
       return nodeIds
         .map((nodeId) => {
-          return scene.nodes.find((node) => {
+          return nodes.find((node) => {
             return node.id === nodeId;
           });
         })
@@ -57,7 +60,7 @@ export const Renderer = () => {
           return node !== undefined;
         }) as NodeI[];
     },
-    [scene.nodes]
+    [nodes]
   );
 
   useEffect(() => {
@@ -89,24 +92,24 @@ export const Renderer = () => {
     >
       <Grid scroll={scroll} zoom={zoom} />
       {scene.groups.map((group) => {
-        const nodes = getNodesFromIds(group.nodeIds);
+        const groupNodes = getNodesFromIds(group.nodeIds);
 
-        return <Group key={group.id} group={group} nodes={nodes} />;
+        return <Group key={group.id} group={group} nodes={groupNodes} />;
       })}
       {mode.showCursor && <Cursor tile={mouse.position.tile} />}
       {scene.connectors.map((connector) => {
-        const nodes = getNodesFromIds([connector.from, connector.to]);
+        const connectorNodes = getNodesFromIds([connector.from, connector.to]);
 
         return (
           <Connector
             key={connector.id}
             connector={connector}
-            fromNode={nodes[0]}
-            toNode={nodes[1]}
+            fromNode={connectorNodes[0]}
+            toNode={connectorNodes[1]}
           />
         );
       })}
-      {scene.nodes.map((node) => {
+      {nodes.map((node) => {
         return (
           <Node
             key={node.id}

src/interaction/reducers/DragItems.ts

@@ -19,6 +19,7 @@ export const DragItems: InteractionReducer = {
 
         draftState.scene.nodes[nodeIndex].position =
           draftState.mouse.position.tile;
+
         draftState.contextMenu = null;
       });
     }

src/interaction/useInteractionManager.ts

@@ -41,6 +41,9 @@ export const useInteractionManager = () => {
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
+  const sceneActions = useSceneStore((state) => {
+    return state.actions;
+  });
   const scene = useSceneStore(({ nodes, connectors, groups, icons }) => {
     return { nodes, connectors, groups, icons };
   });
@@ -126,6 +129,7 @@ export const useInteractionManager = () => {
       uiStateActions.setMode(newState.mode);
       uiStateActions.setContextMenu(newState.contextMenu);
       uiStateActions.setSidebar(newState.itemControls);
+      sceneActions.updateScene(newState.scene);
     },
     [
       mode,
@@ -135,6 +139,7 @@ export const useInteractionManager = () => {
       scroll,
       itemControls,
       uiStateActions,
+      sceneActions,
       scene,
       contextMenu,
       zoom,

src/stores/sceneStore.tsx

@@ -28,6 +28,9 @@ const initialState = () => {
 
           set(newScene);
         },
+        updateScene: (scene) => {
+          set(scene);
+        },
         updateNode: (id, updates) => {
           const { nodes } = get();
           const nodeIndex = nodes.findIndex((node) => {

src/types/scene.ts

@@ -55,6 +55,7 @@ export type Scene = {
 
 export interface SceneActions {
   setScene: (scene: SceneInput) => void;
+  updateScene: (scene: Scene) => void;
   updateNode: (id: string, updates: Partial<Node>) => void;
   createNode: (position: Coords) => void;
 }