@flowuent-org/diagramming-core 1.0.8 → 1.1.1

package/packages/diagrams/src/lib/components/DiagramPanel.tsx

@@ -1,331 +1,331 @@
-import React from 'react';
-import { Box, Button } from '@mui/material';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import UploadIcon from '@mui/icons-material/Upload';
-import SettingsIcon from '@mui/icons-material/Settings';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import { useReactFlow, Panel } from '@xyflow/react';
-
-export interface DiagramPanelProps {
-  // History controls
-  historyIndex: number;
-  historyLength: number;
-  onUndo: () => void;
-  onRedo: () => void;
-  onClear: () => void;
-
-  // Import/Export
-  onImport: (data: any) => void;
-
-  // Settings
-  isSettingsOpen: boolean;
-  onToggleSettings: () => void;
-
-  // Optional custom controls
-  showCustomControls?: boolean;
-  onGridLayout?: () => void;
-  onTreeLayout?: () => void;
-}
-
-// Custom controls component that uses useReactFlow
-const CustomControls: React.FC<{
-  onGridLayout?: () => void;
-  onTreeLayout?: () => void;
-}> = ({ onGridLayout, onTreeLayout }) => {
-  const { zoomIn, zoomOut } = useReactFlow();
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.5,
-        bgcolor: '#2a2a2a',
-        borderRadius: '8px',
-        padding: '4px 8px',
-        border: '1px solid #404040',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-      }}
-    >
-      {/* Zoom Out */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={() => zoomOut()}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <ZoomOutIcon sx={{ fontSize: '18px' }} />
-      </Button>
-
-      {/* Divider */}
-      <Box
-        sx={{
-          width: '1px',
-          height: '24px',
-          bgcolor: '#404040',
-          mx: 0.5,
-        }}
-      />
-
-      {/* Zoom In */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={() => zoomIn()}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <ZoomInIcon sx={{ fontSize: '18px' }} />
-      </Button>
-
-      {/* Divider */}
-      <Box
-        sx={{
-          width: '1px',
-          height: '24px',
-          bgcolor: '#404040',
-          mx: 0.5,
-        }}
-      />
-
-      {/* Grid Layout */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={onGridLayout || (() => console.log('Grid layout clicked'))}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <ViewModuleIcon sx={{ fontSize: '18px' }} />
-      </Button>
-
-      {/* Tree Layout */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={onTreeLayout || (() => console.log('Tree layout clicked'))}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <AccountTreeIcon sx={{ fontSize: '18px' }} />
-      </Button>
-    </Box>
-  );
-};
-
-// Divider component for reusability
-const Divider: React.FC = () => (
-  <Box
-    sx={{
-      width: '1px',
-      height: '24px',
-      bgcolor: '#404040',
-      mx: 0.5,
-    }}
-  />
-);
-
-export default function DiagramPanel({
-  historyIndex,
-  historyLength,
-  onUndo,
-  onRedo,
-  onClear,
-  onImport,
-  isSettingsOpen,
-  onToggleSettings,
-  showCustomControls = true,
-  onGridLayout,
-  onTreeLayout,
-}: DiagramPanelProps) {
-  const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          const data = JSON.parse(e.target?.result as string);
-          if (data.nodes && data.edges) {
-            onImport(data);
-          }
-        } catch (error) {
-          console.error('Error importing diagram:', error);
-        }
-      };
-      reader.readAsText(file);
-    }
-  };
-
-  return (
-    <Panel position="top-left">
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          marginTop: '30px', // Add top margin to push buttons down
-        }}
-      >
-        {/* Main Controls Toolbar */}
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.5,
-            bgcolor: '#2a2a2a',
-            borderRadius: '8px',
-            padding: '4px 8px',
-            border: '1px solid #404040',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-          }}
-        >
-          {/* Clear Button */}
-          <Button
-            variant="text"
-            size="small"
-            onClick={onClear}
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: '#ffffff',
-              fontSize: '12px',
-              '&:hover': {
-                bgcolor: 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            C
-          </Button>
-
-          <Divider />
-
-          {/* Undo Button */}
-          <Button
-            variant="text"
-            size="small"
-            onClick={onUndo}
-            disabled={historyIndex <= 0}
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: historyIndex <= 0 ? '#666666' : '#ffffff',
-              '&:hover': {
-                bgcolor:
-                  historyIndex <= 0 ? 'transparent' : 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            <UndoIcon sx={{ fontSize: '18px' }} />
-          </Button>
-
-          {/* Redo Button */}
-          <Button
-            variant="text"
-            size="small"
-            onClick={onRedo}
-            disabled={historyIndex >= historyLength - 1}
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: historyIndex >= historyLength - 1 ? '#666666' : '#ffffff',
-              '&:hover': {
-                bgcolor:
-                  historyIndex >= historyLength - 1
-                    ? 'transparent'
-                    : 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            <RedoIcon sx={{ fontSize: '18px' }} />
-          </Button>
-
-          <Divider />
-
-          {/* Import Button */}
-          <Button
-            variant="text"
-            component="label"
-            size="small"
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: '#ffffff',
-              '&:hover': {
-                bgcolor: 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            <UploadIcon sx={{ fontSize: '18px' }} />
-            <input
-              type="file"
-              onChange={handleFileImport}
-              accept=".json"
-              style={{ display: 'none' }}
-            />
-          </Button>
-        </Box>
-
-        {/* Custom Controls Toolbar */}
-        {showCustomControls && (
-          <CustomControls
-            onGridLayout={onGridLayout}
-            onTreeLayout={onTreeLayout}
-          />
-        )}
-      </Box>
-    </Panel>
-  );
-}
+import React from 'react';
+import { Box, Button } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import UploadIcon from '@mui/icons-material/Upload';
+import SettingsIcon from '@mui/icons-material/Settings';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import { useReactFlow, Panel } from '@xyflow/react';
+
+export interface DiagramPanelProps {
+  // History controls
+  historyIndex: number;
+  historyLength: number;
+  onUndo: () => void;
+  onRedo: () => void;
+  onClear: () => void;
+
+  // Import/Export
+  onImport: (data: any) => void;
+
+  // Settings
+  isSettingsOpen: boolean;
+  onToggleSettings: () => void;
+
+  // Optional custom controls
+  showCustomControls?: boolean;
+  onGridLayout?: () => void;
+  onTreeLayout?: () => void;
+}
+
+// Custom controls component that uses useReactFlow
+const CustomControls: React.FC<{
+  onGridLayout?: () => void;
+  onTreeLayout?: () => void;
+}> = ({ onGridLayout, onTreeLayout }) => {
+  const { zoomIn, zoomOut } = useReactFlow();
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        bgcolor: '#2a2a2a',
+        borderRadius: '8px',
+        padding: '4px 8px',
+        border: '1px solid #404040',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+      }}
+    >
+      {/* Zoom Out */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={() => zoomOut()}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <ZoomOutIcon sx={{ fontSize: '18px' }} />
+      </Button>
+
+      {/* Divider */}
+      <Box
+        sx={{
+          width: '1px',
+          height: '24px',
+          bgcolor: '#404040',
+          mx: 0.5,
+        }}
+      />
+
+      {/* Zoom In */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={() => zoomIn()}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <ZoomInIcon sx={{ fontSize: '18px' }} />
+      </Button>
+
+      {/* Divider */}
+      <Box
+        sx={{
+          width: '1px',
+          height: '24px',
+          bgcolor: '#404040',
+          mx: 0.5,
+        }}
+      />
+
+      {/* Grid Layout */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={onGridLayout || (() => console.log('Grid layout clicked'))}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <ViewModuleIcon sx={{ fontSize: '18px' }} />
+      </Button>
+
+      {/* Tree Layout */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={onTreeLayout || (() => console.log('Tree layout clicked'))}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <AccountTreeIcon sx={{ fontSize: '18px' }} />
+      </Button>
+    </Box>
+  );
+};
+
+// Divider component for reusability
+const Divider: React.FC = () => (
+  <Box
+    sx={{
+      width: '1px',
+      height: '24px',
+      bgcolor: '#404040',
+      mx: 0.5,
+    }}
+  />
+);
+
+export default function DiagramPanel({
+  historyIndex,
+  historyLength,
+  onUndo,
+  onRedo,
+  onClear,
+  onImport,
+  isSettingsOpen,
+  onToggleSettings,
+  showCustomControls = true,
+  onGridLayout,
+  onTreeLayout,
+}: DiagramPanelProps) {
+  const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const data = JSON.parse(e.target?.result as string);
+          if (data.nodes && data.edges) {
+            onImport(data);
+          }
+        } catch (error) {
+          console.error('Error importing diagram:', error);
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  return (
+    <Panel position="top-left">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          marginTop: '30px', // Add top margin to push buttons down
+        }}
+      >
+        {/* Main Controls Toolbar */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            bgcolor: '#2a2a2a',
+            borderRadius: '8px',
+            padding: '4px 8px',
+            border: '1px solid #404040',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+          }}
+        >
+          {/* Clear Button */}
+          <Button
+            variant="text"
+            size="small"
+            onClick={onClear}
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: '#ffffff',
+              fontSize: '12px',
+              '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            C
+          </Button>
+
+          <Divider />
+
+          {/* Undo Button */}
+          <Button
+            variant="text"
+            size="small"
+            onClick={onUndo}
+            disabled={historyIndex <= 0}
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: historyIndex <= 0 ? '#666666' : '#ffffff',
+              '&:hover': {
+                bgcolor:
+                  historyIndex <= 0 ? 'transparent' : 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            <UndoIcon sx={{ fontSize: '18px' }} />
+          </Button>
+
+          {/* Redo Button */}
+          <Button
+            variant="text"
+            size="small"
+            onClick={onRedo}
+            disabled={historyIndex >= historyLength - 1}
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: historyIndex >= historyLength - 1 ? '#666666' : '#ffffff',
+              '&:hover': {
+                bgcolor:
+                  historyIndex >= historyLength - 1
+                    ? 'transparent'
+                    : 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            <RedoIcon sx={{ fontSize: '18px' }} />
+          </Button>
+
+          <Divider />
+
+          {/* Import Button */}
+          <Button
+            variant="text"
+            component="label"
+            size="small"
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: '#ffffff',
+              '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            <UploadIcon sx={{ fontSize: '18px' }} />
+            <input
+              type="file"
+              onChange={handleFileImport}
+              accept=".json"
+              style={{ display: 'none' }}
+            />
+          </Button>
+        </Box>
+
+        {/* Custom Controls Toolbar */}
+        {showCustomControls && (
+          <CustomControls
+            onGridLayout={onGridLayout}
+            onTreeLayout={onTreeLayout}
+          />
+        )}
+      </Box>
+    </Panel>
+  );
+}