@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,210 @@
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { Box, Button, Modal, Stack, TextField, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+interface GraphQLCustomCodeModalProps {
+    open: boolean;
+    onClose: () => void;
+    code: string;
+    onCodeChange: (code: string) => void;
+    title?: string;
+    description?: string;
+    onSave?: () => void;
+}
+
+// Memoize the modal styles
+const useModalStyles = () => useMemo(() => ({
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '80%',
+    maxHeight: 600,
+    overflowY: 'auto',
+    bgcolor: '#232323',
+    color: '#fff',
+    boxShadow: 24,
+    p: 4,
+    borderRadius: 2,
+    '&::-webkit-scrollbar': {
+        width: '10px',
+        background: '#181818',
+    },
+    '&::-webkit-scrollbar-thumb': {
+        background: '#393939',
+        borderRadius: '8px',
+    },
+    scrollbarColor: '#393939 #181818',
+    scrollbarWidth: 'thin',
+}), []);
+
+const GraphQLCustomCodeModal: React.FC<GraphQLCustomCodeModalProps> = React.memo(({
+    open,
+    onClose,
+    code = '',
+    onCodeChange,
+    title,
+    description,
+    onSave,
+}) => {
+    const { t } = useTranslation();
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const modalStyles = useModalStyles();
+
+    const handleImportCode = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files && event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const text = e.target?.result as string;
+                if (typeof text === 'string') {
+                    onCodeChange(text);
+                }
+            };
+            reader.onerror = () => {
+                alert('Failed to read file.');
+            };
+            reader.readAsText(file);
+        }
+        event.target.value = '';
+    }, [onCodeChange]);
+
+    const handleSave = useCallback(() => {
+        if (typeof onSave === 'function') {
+            onSave();
+        }
+    }, [onSave]);
+
+    useEffect(() => {
+        if (open) {
+            // Reset any state when modal opens
+        }
+    }, [open]);
+
+    return (
+        <Modal open={open} onClose={onClose}>
+            <Box sx={modalStyles}>
+                <Typography variant="h6" gutterBottom sx={{ color: '#fff' }}>
+                    {title || t('graphqlForm.customQuery')}
+                </Typography>
+
+                <Typography variant="body1" sx={{ mt: 2, color: '#aaa' }}>
+                    {description || t('graphqlForm.customQueryDescription')}
+                </Typography>
+
+                {/* GraphQL Query Preview */}
+                <Box sx={{
+                    mt: 2,
+                    p: 2,
+                    bgcolor: '#2a2a2a',
+                    borderRadius: 1,
+                    border: '1px solid #444',
+                    fontFamily: 'monospace',
+                    fontSize: '14px'
+                }}>
+                    <Typography variant="body2" sx={{ color: '#888', mb: 1 }}>
+                        {t('graphqlForm.queryPreview') || 'Query Preview:'}
+                    </Typography>
+                    <Box sx={{ color: '#fff' }}>
+                        <span style={{ color: '#ff79c6' }}>query</span>{' '}
+                        <span style={{ color: '#50fa7b' }}>GetUser</span>
+                        <span style={{ color: '#fff' }}>(</span>
+                        <span style={{ color: '#f1fa8c' }}>$userId: ID!</span>
+                        <span style={{ color: '#fff' }}>) {'{'}</span>
+                    </Box>
+                    <Box sx={{ mt: 1, color: '#fff' }}>
+                        <span style={{ color: '#fff' }}>  user(id: $userId) {'{'}</span>
+                    </Box>
+                    <Box sx={{ mt: 1, color: '#fff' }}>
+                        <span style={{ color: '#fff' }}>    id</span>
+                    </Box>
+                    <Box sx={{ color: '#fff' }}>
+                        <span style={{ color: '#fff' }}>    name</span>
+                    </Box>
+                    <Box sx={{ color: '#fff' }}>
+                        <span style={{ color: '#fff' }}>    email</span>
+                    </Box>
+                    <Box sx={{ color: '#fff' }}>
+                        <span style={{ color: '#fff' }}>  {'}'}</span>
+                    </Box>
+                    <Box sx={{ color: '#fff' }}>
+                        <span style={{ color: '#fff' }}>{'}'}</span>
+                    </Box>
+                </Box>
+
+                <Typography variant="body2" sx={{ mt: 2, color: '#aaa', fontStyle: 'italic' }}>
+                    {t('graphqlForm.writeCustomQuery') || 'Write your custom GraphQL query below:'}
+                </Typography>
+                <Typography variant="caption" sx={{ color: '#666', fontStyle: 'italic', display: 'block', mt: 0.5 }}>
+                    {t('graphqlForm.queryNote') || 'Include the complete query, mutation, or subscription with all necessary fields and variables.'}
+                </Typography>
+
+                <TextField
+                    multiline
+                    rows={12}
+                    fullWidth
+                    value={code}
+                    onChange={(e) => onCodeChange(e.target.value)}
+                    placeholder={t('graphqlForm.queryPlaceholder') || `query GetUser($userId: ID!) {
+  user(id: $userId) {
+    id
+    name
+    email
+  }
+}`}
+                    sx={{
+                        mt: 2,
+                        '& .MuiInputBase-input': {
+                            color: '#fff',
+                            background: '#232323',
+                            fontFamily: 'monospace',
+                            fontSize: '14px',
+                            lineHeight: 1.5
+                        },
+                        '& .MuiOutlinedInput-root': {
+                            '& fieldset': { borderColor: '#8E8E93' },
+                            '&:hover fieldset': { borderColor: '#fff' },
+                        },
+                    }}
+                    InputLabelProps={{ style: { color: '#aaa' } }}
+                    InputProps={{ style: { color: '#fff', background: '#232323' } }}
+                />
+
+                <Stack direction="row" spacing={2} sx={{ mt: 4, justifyContent: 'flex-end' }}>
+                    <input
+                        type="file"
+                        accept=".graphql,.gql,.txt,.json"
+                        style={{ display: 'none' }}
+                        ref={fileInputRef}
+                        onChange={handleImportCode}
+                    />
+                    <Button
+                        variant="outlined"
+                        sx={{ color: '#fff', borderColor: '#6c47ff' }}
+                        onClick={() => fileInputRef.current?.click()}
+                    >
+                        {t('graphqlForm.importQuery') || 'Import Query'}
+                    </Button>
+                    <Button
+                        variant="outlined"
+                        sx={{ color: '#fff', borderColor: '#6c47ff' }}
+                        onClick={handleSave}
+                    >
+                        {t('graphqlForm.saveQuery') || 'Save Query'}
+                    </Button>
+                    <Button
+                        variant="contained"
+                        sx={{ background: '#6c47ff', color: '#fff' }}
+                        onClick={onClose}
+                    >
+                        {t('graphqlForm.close') || 'Close'}
+                    </Button>
+                </Stack>
+            </Box>
+        </Modal>
+    );
+});
+
+GraphQLCustomCodeModal.displayName = 'GraphQLCustomCodeModal';
+
+export default GraphQLCustomCodeModal;

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  IconButton,
+  Button,
+  Tabs,
+  Tab,
+  Box,
+  Avatar,
+  ThemeProvider,
+  createTheme,
+} from '@mui/material';
+import { Home, Share, Person } from '@mui/icons-material';
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#8b5cf6', // Purple color for the share button
+    },
+    background: {
+      default: '#1a1a1a',
+      paper: '#2a2a2a',
+    },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#1a1a1a',
+          borderBottom: '1px solid #333',
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#2a2a2a',
+          color: '#ffffff',
+          marginRight: '8px',
+          borderRadius: '8px',
+          minHeight: '40px',
+          textTransform: 'none',
+          '&.Mui-selected': {
+            backgroundColor: '#3a3a3a',
+            color: '#ffffff',
+          },
+        },
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          display: 'none', // Hide the default indicator
+        },
+      },
+    },
+  },
+});
+
+export default function Header() {
+  const [tabValue, setTabValue] = React.useState(0);
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <AppBar
+        position="static"
+        elevation={0}
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+        }}
+      >
+        <Toolbar sx={{ justifyContent: 'space-between', px: 2 }}>
+          {/* Left side - Home icon and Project tabs */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <IconButton
+              onClick={() => {
+                window.location.href = '/';
+              }}
+              sx={{
+                color: 'white',
+                backgroundColor: '#2a2a2a',
+                '&:hover': {
+                  backgroundColor: '#3a3a3a',
+                },
+              }}
+            >
+              <Home />
+            </IconButton>
+
+            <Tabs
+              value={tabValue}
+              onChange={handleTabChange}
+              sx={{ minHeight: '40px' }}
+            >
+              <Tab label="Project Title 1" />
+              <Tab label="Project Title 1" />
+              <Tab label="Project Title 1" />
+            </Tabs>
+          </Box>
+
+          {/* Right side - Share button and Profile */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Button
+              variant="contained"
+              startIcon={<Share />}
+              sx={{
+                backgroundColor: '#8b5cf6',
+                color: 'white',
+                textTransform: 'none',
+                borderRadius: '8px',
+                px: 3,
+                '&:hover': {
+                  backgroundColor: '#7c3aed',
+                },
+              }}
+            >
+              Share
+            </Button>
+
+            <Avatar
+              sx={{
+                backgroundColor: '#2a2a2a',
+                color: 'white',
+                width: 40,
+                height: 40,
+              }}
+            >
+              <Person />
+            </Avatar>
+          </Box>
+        </Toolbar>
+      </AppBar>
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import { MiniMap } from '@xyflow/react'
+
+export default function MiniMapCommon() {
+  return (
+    <MiniMap
+      style={{
+        position: 'absolute',
+        bottom: 20,
+        left: 20,
+        width: 150,
+        height: 100,
+        border: '1px solid #404040',
+        backgroundColor: '#2a2a2a',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+      }}
+      nodeColor="#61dafb"
+      nodeStrokeWidth={1}
+      maskColor="rgba(42, 42, 42, 0.8)"
+      pannable={true}
+      zoomable={true}
+    />
+  )
+}

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

@@ -0,0 +1,82 @@
+import React from 'react';
+
+interface ResizeIconProps {
+  size?: number;
+  color?: string;
+  hoverColor?: string;
+}
+
+// ResizeIcon component for node resizing
+
+function ResizeIcon({ 
+  size = 20, 
+  color = '#61dafb', 
+  hoverColor = '#4fc3f7' 
+}: ResizeIconProps) {
+  return (
+    <div
+      style={{
+        width: '100%',  // Fill the entire NodeResizeControl area
+        height: '100%', // Fill the entire NodeResizeControl area
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        transition: 'all 0.2s ease',
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        border: '2px solid rgba(255, 255, 255, 0.9)',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+        cursor: 'se-resize', // Direct cursor specification
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'auto', // Ensure pointer events work
+      }}
+      onMouseEnter={(e) => {
+        const target = e.currentTarget;
+        target.style.backgroundColor = `${hoverColor}80`;
+        target.style.borderColor = hoverColor;
+        target.style.transform = 'scale(1.1)';
+        target.style.boxShadow = `0 4px 12px ${hoverColor}60`;
+        // Force cursor change
+        target.style.cursor = 'se-resize';
+      }}
+      onMouseLeave={(e) => {
+        const target = e.currentTarget;
+        target.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
+        target.style.borderColor = 'rgba(255, 255, 255, 0.9)';
+        target.style.transform = 'scale(1)';
+        target.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.5)';
+        target.style.cursor = 'se-resize';
+      }}
+      title="Drag to resize"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        strokeWidth="3"
+        stroke="currentColor"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{
+          color: color,
+          pointerEvents: 'none', // Prevent SVG from blocking cursor changes
+        }}
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        {/* Simple diagonal resize arrows */}
+        <polyline points="16 20 20 20 20 16" strokeWidth="3" />
+        <line x1="14" y1="14" x2="20" y2="20" strokeWidth="2" />
+        <polyline points="8 4 4 4 4 8" strokeWidth="3" />
+        <line x1="4" y1="4" x2="10" y2="10" strokeWidth="2" />
+        {/* Center grip dot */}
+        <circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.7" />
+      </svg>
+    </div>
+  );
+}
+
+export default ResizeIcon; 

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+
+interface SidebarProps {
+  children?: React.ReactNode;
+}
+
+export default function Sidebar({ children }: SidebarProps) {
+  return (
+    <Box
+      sx={{
+        width: 350,
+        overflowY: 'auto',
+        height: '100%',
+        bgcolor: '#1a1a1a',
+        color: 'common.white',
+        p: 2,
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        // Custom scrollbar styling
+        '&::-webkit-scrollbar': {
+          width: '6px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: '#444',
+          borderRadius: '3px',
+          '&:hover': {
+            background: '#666',
+          },
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+}