feat: implements node delete

src/components/ItemControls/NodeControls/NodeControls.tsx

@@ -3,6 +3,7 @@ import { Tabs, Tab, Box } from '@mui/material';
 import { Node } from 'src/types';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useNode } from 'src/hooks/useNode';
+import { useUiStateStore } from 'src/stores/uiStateStore';
 import { ControlsContainer } from '../components/ControlsContainer';
 import { Icons } from '../IconSelection/Icons';
 import { Header } from '../components/Header';
@@ -20,6 +21,9 @@ export const NodeControls = ({ id }: Props) => {
   const sceneActions = useSceneStore((state) => {
     return state.actions;
   });
+  const uiStateActions = useUiStateStore((state) => {
+    return state.actions;
+  });
   const node = useNode(id);
 
   const onTabChanged = (event: React.SyntheticEvent, newValue: number) => {
@@ -33,6 +37,11 @@ export const NodeControls = ({ id }: Props) => {
     [sceneActions, id]
   );
 
+  const onNodeDeleted = useCallback(() => {
+    uiStateActions.setItemControls(null);
+    sceneActions.deleteNode(id);
+  }, [sceneActions, id, uiStateActions]);
+
   return (
     <ControlsContainer
       header={
@@ -51,6 +60,7 @@ export const NodeControls = ({ id }: Props) => {
           label={node.label}
           labelHeight={node.labelHeight}
           onUpdate={onNodeUpdated}
+          onDelete={onNodeDeleted}
         />
       )}
       {tab === 1 && (

src/components/ItemControls/NodeControls/NodeSettings/NodeSettings.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Slider } from '@mui/material';
+import { Slider, Button, Box } from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Node } from 'src/types';
 import { MarkdownEditor } from '../../../MarkdownEditor/MarkdownEditor';
 
@@ -9,9 +10,15 @@ interface Props {
   label: string;
   labelHeight: number;
   onUpdate: (updates: Partial<Node>) => void;
+  onDelete: () => void;
 }
 
-export const NodeSettings = ({ label, labelHeight, onUpdate }: Props) => {
+export const NodeSettings = ({
+  label,
+  labelHeight,
+  onUpdate,
+  onDelete
+}: Props) => {
   return (
     <>
       <Section title="Label">
@@ -34,6 +41,19 @@ export const NodeSettings = ({ label, labelHeight, onUpdate }: Props) => {
           }}
         />
       </Section>
+      <Section>
+        <Box>
+          <Button
+            color="error"
+            size="small"
+            variant="outlined"
+            startIcon={<DeleteIcon />}
+            onClick={onDelete}
+          >
+            Delete
+          </Button>
+        </Box>
+      </Section>
     </>
   );
 };

src/stores/sceneStore.tsx

@@ -70,6 +70,24 @@ const initialState = () => {
           set({ nodes: newScene.nodes, connectors: newScene.connectors });
         },
 
+        deleteNode: (id: string) => {
+          const newScene = produce(get(), (draftState) => {
+            const { index } = getItemById(draftState.nodes, id);
+
+            draftState.nodes.splice(index, 1);
+
+            draftState.connectors = draftState.connectors.filter(
+              (connector) => {
+                return !connector.anchors.find((anchor) => {
+                  return anchor.type === 'NODE' && anchor.id === id;
+                });
+              }
+            );
+          });
+
+          set({ nodes: newScene.nodes, connectors: newScene.connectors });
+        },
+
         updateConnector: (id, updates) => {
           const newScene = produce(get(), (draftState) => {
             const { item: connector, index } = getItemById(

src/types/scene.ts

@@ -74,6 +74,7 @@ export interface SceneActions {
   setScene: (scene: SceneInput) => void;
   updateScene: (scene: Scene) => void;
   updateNode: (id: string, updates: Partial<Node>) => void;
+  deleteNode: (id: string) => void;
   updateConnector: (id: string, updates: Partial<Connector>) => void;
   updateRectangle: (id: string, updates: Partial<Rectangle>) => void;
   createNode: (node: NodeInput) => void;

src/utils/renderer.ts

@@ -318,7 +318,7 @@ export function getItemById<T extends { id: string }>(
   });
 
   if (index === -1) {
-    throw new Error(`Item with id ${id} not found.`);
+    throw new Error(`Item with id "${id}" not found.`);
   }
 
   return { item: items[index], index };