[WIP] Feature: add duplicate item

src/components/ItemControls/NodeControls/NodeControls.tsx

@@ -28,7 +28,7 @@ type Mode = keyof typeof ModeOptions;
 
 export const NodeControls = ({ id }: Props) => {
   const [mode, setMode] = useState<Mode>('SETTINGS');
-  const { updateModelItem, updateViewItem, deleteViewItem } = useScene();
+  const { updateModelItem, updateViewItem, deleteViewItem, duplicateViewItem } = useScene();
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
@@ -101,6 +101,9 @@ export const NodeControls = ({ id }: Props) => {
             uiStateActions.setItemControls(null);
             deleteViewItem(viewItem.id);
           }}
+          onDuplicated={() => {
+            duplicateViewItem(viewItem);
+          }}
         />
       )}
       {mode === 'CHANGE_ICON' && (

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Slider, Box, TextField } from '@mui/material';
+import { Slider, TextField, Grid } from '@mui/material';
 import { ModelItem, ViewItem } from 'src/types';
 import { MarkdownEditor } from 'src/components/MarkdownEditor/MarkdownEditor';
 import { useModelItem } from 'src/hooks/useModelItem';
 import { DeleteButton } from '../../components/DeleteButton';
+import { DuplicateButton } from '../../components/DuplicateButton';
 import { Section } from '../../components/Section';
 
 export type NodeUpdates = {
@@ -16,13 +17,15 @@ interface Props {
   onModelItemUpdated: (updates: Partial<ModelItem>) => void;
   onViewItemUpdated: (updates: Partial<ViewItem>) => void;
   onDeleted: () => void;
+  onDuplicated: () => void;
 }
 
 export const NodeSettings = ({
   node,
   onModelItemUpdated,
   onViewItemUpdated,
-  onDeleted
+  onDeleted,
+  onDuplicated
 }: Props) => {
   const modelItem = useModelItem(node.id);
 
@@ -61,11 +64,14 @@ export const NodeSettings = ({
           />
         </Section>
       )}
-      <Section>
-        <Box>
+      <Grid container spacing={2} sx={{ pt: 3, px: 3 }}>
+        <Grid item>
           <DeleteButton onClick={onDeleted} />
-        </Box>
-      </Section>
+        </Grid>
+        <Grid item>
+          <DuplicateButton onClick={onDuplicated} />
+        </Grid>
+      </Grid>
     </>
   );
 };

src/components/ItemControls/components/DuplicateButton.tsx

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

src/hooks/useScene.ts

@@ -129,6 +129,18 @@ export const useScene = () => {
     [getState, setState, currentViewId]
   );
 
+  const duplicateViewItem = useCallback(
+    (newViewItem: ViewItem) => {
+      const newState = reducers.view({
+        action: 'CREATE_VIEWITEM',
+        payload: newViewItem,
+        ctx: { viewId: currentViewId, state: getState() }
+      });
+      setState(newState);
+    },
+    [getState, setState, currentViewId]
+  )
+
   const updateViewItem = useCallback(
     (id: string, updates: Partial<ViewItem>) => {
       const newState = reducers.view({
@@ -287,6 +299,7 @@ export const useScene = () => {
     updateViewItem,
     deleteViewItem,
     createConnector,
+    duplicateViewItem,
     updateConnector,
     deleteConnector,
     createTextBox,