feat: implements rectangle delete

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Slider, Button, Box } from '@mui/material';
-import { Delete as DeleteIcon } from '@mui/icons-material';
+import { Slider, Box } from '@mui/material';
 import { Node } from 'src/types';
-import { MarkdownEditor } from '../../../MarkdownEditor/MarkdownEditor';
-
+import { MarkdownEditor } from 'src/components/MarkdownEditor/MarkdownEditor';
+import { DeleteButton } from '../../components/DeleteButton';
 import { Section } from '../../components/Section';
 
 interface Props {
@@ -43,15 +42,7 @@ export const NodeSettings = ({
       </Section>
       <Section>
         <Box>
-          <Button
-            color="error"
-            size="small"
-            variant="outlined"
-            startIcon={<DeleteIcon />}
-            onClick={onDelete}
-          >
-            Delete
-          </Button>
+          <DeleteButton onClick={onDelete} />
         </Box>
       </Section>
     </>

src/components/ItemControls/RectangleControls/RectangleControls.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import { Rectangle } from 'src/types';
-import { useTheme } from '@mui/material';
+import { useTheme, Box } from '@mui/material';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useRectangle } from 'src/hooks/useRectangle';
 import { ColorSelector } from 'src/components/ColorSelector/ColorSelector';
+import { useUiStateStore } from 'src/stores/uiStateStore';
 import { ControlsContainer } from '../components/ControlsContainer';
 import { Section } from '../components/Section';
 import { Header } from '../components/Header';
+import { DeleteButton } from '../components/DeleteButton';
 
 interface Props {
   id: string;
@@ -17,6 +19,9 @@ export const RectangleControls = ({ id }: Props) => {
   const sceneActions = useSceneStore((state) => {
     return state.actions;
   });
+  const uiStateActions = useUiStateStore((state) => {
+    return state.actions;
+  });
   const rectangle = useRectangle(id);
 
   const onRectangleUpdated = useCallback(
@@ -26,6 +31,11 @@ export const RectangleControls = ({ id }: Props) => {
     [sceneActions, id]
   );
 
+  const onRectangleDeleted = useCallback(() => {
+    uiStateActions.setItemControls(null);
+    sceneActions.deleteRectangle(id);
+  }, [sceneActions, id, uiStateActions]);
+
   return (
     <ControlsContainer header={<Header title="Rectangle settings" />}>
       <Section>
@@ -37,6 +47,11 @@ export const RectangleControls = ({ id }: Props) => {
           activeColor={rectangle.color}
         />
       </Section>
+      <Section>
+        <Box>
+          <DeleteButton onClick={onRectangleDeleted} />
+        </Box>
+      </Section>
     </ControlsContainer>
   );
 };

src/components/ItemControls/components/ControlsContainer.tsx

@@ -30,7 +30,7 @@ export const ControlsContainer = ({ header, children }: Props) => {
           }
         }}
       >
-        <Box sx={{ width: '100%', pb: 6 }}>{children}</Box>
+        <Box sx={{ width: '100%' }}>{children}</Box>
       </Box>
     </Box>
   );

src/components/ItemControls/components/DeleteButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Delete as DeleteIcon } from '@mui/icons-material';
+import { Button } from '@mui/material';
+
+interface Props {
+  onClick: () => void;
+}
+
+export const DeleteButton = ({ onClick }: Props) => {
+  return (
+    <Button
+      color="error"
+      size="small"
+      variant="outlined"
+      startIcon={<DeleteIcon />}
+      onClick={onClick}
+    >
+      Delete
+    </Button>
+  );
+};

src/stores/sceneStore.tsx

@@ -120,6 +120,16 @@ const initialState = () => {
           set({ rectangles: newScene.rectangles });
         },
 
+        deleteRectangle: (id: string) => {
+          const newScene = produce(get(), (draftState) => {
+            const { index } = getItemById(draftState.rectangles, id);
+
+            draftState.rectangles.splice(index, 1);
+          });
+
+          set({ rectangles: newScene.rectangles });
+        },
+
         createConnector: (connector) => {
           const newScene = produce(get(), (draftState) => {
             draftState.connectors.push(

src/types/scene.ts

@@ -77,6 +77,7 @@ export interface SceneActions {
   deleteNode: (id: string) => void;
   updateConnector: (id: string, updates: Partial<Connector>) => void;
   updateRectangle: (id: string, updates: Partial<Rectangle>) => void;
+  deleteRectangle: (id: string) => void;
   createNode: (node: NodeInput) => void;
   createConnector: (connector: ConnectorInput) => void;
   createRectangle: (rectangle: RectangleInput) => void;