@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/molecules/AddingBlock.tsx

@@ -1,147 +1,147 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid'; // Importing UUID library for generating unique IDs
-import { Box } from '@mui/material';
-import { useAddBlock } from '../utils/flow-node-hooks';
-import {
-  useIsAddingBlock,
-  useNodeId,
-  useSetAddingBlock,
-} from '../contexts/CardDataProvider';
-import { IBlockType, ICardNode } from '../types/card-node';
-import { useRegisterEventCallback } from '../utils/event-hooks';
-import StyledBox from '../atoms/StyledBox';
-import CardBlockTypeSelector from '../atoms/CardBlockTypeSelector';
-import {
-  useDiagramNodes,
-  useSelectedNode,
-  useSetNodes,
-} from '../contexts/DiagramProvider'; // Importing Box component from Material-UI
-import { GenericEventHandler } from '../utils/event-store';
-
-// Memoized component for adding block button content
-export const AddBlockBtnContent = memo(() => {
-  const id = useNodeId();
-  const onSave = useAddBlock(); // Custom hook for saving block to flow node
-  const setAddingBlock = useSetAddingBlock();
-  // State for managing block type selection
-  const [blockType, setBlockType] = useState<IBlockType>('String');
-
-  // Reference for input element
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const nodes = useDiagramNodes();
-  const setNodes = useSetNodes();
-
-  // Callback function for handling click events
-  const handler: GenericEventHandler = useCallback(
-    (...args: unknown[]) => {
-      const selectedNodeId = args[0] as string | undefined;
-      if (selectedNodeId === id) {
-        return;
-      }
-
-      // Getting input value
-      const value = inputRef.current?.value;
-
-      // Returning if input value is empty
-      if (!value) {
-        return;
-      }
-
-      // Updating nodes with new block
-      const newNodes = nodes.map((node) => {
-        if (node.id === id) {
-          const newBlock = {
-            color: node.data.color,
-            id: uuidv4(),
-            title: value,
-          }; // Creating new block object
-          const newBlocks = [...(node.data.blocks || []), newBlock]; // Adding new block to existing blocks
-          return {
-            ...node,
-            data: { ...node.data, blocks: newBlocks },
-          } as ICardNode; // Updating node data with new blocks
-        }
-        return node as ICardNode;
-      });
-
-      // Setting updated nodes in React Flow
-      setNodes(newNodes);
-    },
-    [nodes, setNodes, id],
-  );
-
-  // Register the new block when the user clicks outside on empty space of the pane
-  useRegisterEventCallback('onPaneClick', handler);
-
-  // Register the new block when the user clicks on some other node
-  useRegisterEventCallback('onOpenToolbar', handler);
-
-  // Effect for focusing on input element after component mount
-  useEffect(() => {
-    setTimeout(() => inputRef.current?.focus(), 0); // Delayed focusing on input element
-  }, []);
-
-  // Callback function for handling input save events
-  const handleInputSave = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key !== 'Enter') {
-        return;
-      }
-
-      const inputVal = inputRef.current?.value; // Getting input value
-      if (!inputVal) {
-        return;
-      }
-
-      onSave({ title: inputVal, type: blockType }); // Saving block with input value and selected type
-      const cur = inputRef.current;
-      if (cur) {
-        cur.value = ''; // Clearing input value after save
-      }
-      setAddingBlock(false); // Hiding add block button after save
-    },
-    [onSave, setAddingBlock, blockType],
-  );
-
-  // Rendering input box for adding new block and block type selection
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <StyledBox
-        component="input"
-        variant="cardAddNewBlock"
-        /*onKeyDown={handleInputSave}*/
-        innerRef={inputRef} // Attaching ref to input element
-      />
-      {id && (
-        <CardBlockTypeSelector
-          value={blockType}
-          onChange={(event) => setBlockType(event.target.value as IBlockType)} // Handling block type change
-          id={id}
-        />
-      )}
-    </Box>
-  );
-});
-
-// Memoized component for adding block button
-export const AddBlockBtn = memo(() => {
-  const id = useNodeId();
-  const isAddingBlock = useIsAddingBlock();
-
-  const selectedNode = useSelectedNode();
-
-  // Rendering add block button only if showAddBlock is true and selectedNode matches current node ID
-  if (!isAddingBlock || selectedNode !== id) {
-    return <></>;
-  }
-
-  return <AddBlockBtnContent />; // Rendering add block button content
-});
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid'; // Importing UUID library for generating unique IDs
+import { Box } from '@mui/material';
+import { useAddBlock } from '../utils/flow-node-hooks';
+import {
+  useIsAddingBlock,
+  useNodeId,
+  useSetAddingBlock,
+} from '../contexts/CardDataProvider';
+import { IBlockType, ICardNode } from '../types/card-node';
+import { useRegisterEventCallback } from '../utils/event-hooks';
+import StyledBox from '../atoms/StyledBox';
+import CardBlockTypeSelector from '../atoms/CardBlockTypeSelector';
+import {
+  useDiagramNodes,
+  useSelectedNode,
+  useSetNodes,
+} from '../contexts/DiagramProvider'; // Importing Box component from Material-UI
+import { GenericEventHandler } from '../utils/event-store';
+
+// Memoized component for adding block button content
+export const AddBlockBtnContent = memo(() => {
+  const id = useNodeId();
+  const onSave = useAddBlock(); // Custom hook for saving block to flow node
+  const setAddingBlock = useSetAddingBlock();
+  // State for managing block type selection
+  const [blockType, setBlockType] = useState<IBlockType>('String');
+
+  // Reference for input element
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const nodes = useDiagramNodes();
+  const setNodes = useSetNodes();
+
+  // Callback function for handling click events
+  const handler: GenericEventHandler = useCallback(
+    (...args: unknown[]) => {
+      const selectedNodeId = args[0] as string | undefined;
+      if (selectedNodeId === id) {
+        return;
+      }
+
+      // Getting input value
+      const value = inputRef.current?.value;
+
+      // Returning if input value is empty
+      if (!value) {
+        return;
+      }
+
+      // Updating nodes with new block
+      const newNodes = nodes.map((node) => {
+        if (node.id === id) {
+          const newBlock = {
+            color: node.data.color,
+            id: uuidv4(),
+            title: value,
+          }; // Creating new block object
+          const newBlocks = [...(node.data.blocks || []), newBlock]; // Adding new block to existing blocks
+          return {
+            ...node,
+            data: { ...node.data, blocks: newBlocks },
+          } as ICardNode; // Updating node data with new blocks
+        }
+        return node as ICardNode;
+      });
+
+      // Setting updated nodes in React Flow
+      setNodes(newNodes);
+    },
+    [nodes, setNodes, id],
+  );
+
+  // Register the new block when the user clicks outside on empty space of the pane
+  useRegisterEventCallback('onPaneClick', handler);
+
+  // Register the new block when the user clicks on some other node
+  useRegisterEventCallback('onOpenToolbar', handler);
+
+  // Effect for focusing on input element after component mount
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 0); // Delayed focusing on input element
+  }, []);
+
+  // Callback function for handling input save events
+  const handleInputSave = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key !== 'Enter') {
+        return;
+      }
+
+      const inputVal = inputRef.current?.value; // Getting input value
+      if (!inputVal) {
+        return;
+      }
+
+      onSave({ title: inputVal, type: blockType }); // Saving block with input value and selected type
+      const cur = inputRef.current;
+      if (cur) {
+        cur.value = ''; // Clearing input value after save
+      }
+      setAddingBlock(false); // Hiding add block button after save
+    },
+    [onSave, setAddingBlock, blockType],
+  );
+
+  // Rendering input box for adding new block and block type selection
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <StyledBox
+        component="input"
+        variant="cardAddNewBlock"
+        /*onKeyDown={handleInputSave}*/
+        innerRef={inputRef} // Attaching ref to input element
+      />
+      {id && (
+        <CardBlockTypeSelector
+          value={blockType}
+          onChange={(event) => setBlockType(event.target.value as IBlockType)} // Handling block type change
+          id={id}
+        />
+      )}
+    </Box>
+  );
+});
+
+// Memoized component for adding block button
+export const AddBlockBtn = memo(() => {
+  const id = useNodeId();
+  const isAddingBlock = useIsAddingBlock();
+
+  const selectedNode = useSelectedNode();
+
+  // Rendering add block button only if showAddBlock is true and selectedNode matches current node ID
+  if (!isAddingBlock || selectedNode !== id) {
+    return <></>;
+  }
+
+  return <AddBlockBtnContent />; // Rendering add block button content
+});

package/packages/diagrams/src/lib/molecules/AvailableVariablesDisplay.tsx

@@ -1,57 +1,57 @@
-import React from 'react';
-import { Box, Typography, Chip, Paper } from '@mui/material';
-import { useAvailableVariables } from '../contexts/DiagramProvider';
-
-export const AvailableVariablesDisplay: React.FC = () => {
-    const availableVariables = useAvailableVariables();
-
-    if (!availableVariables || availableVariables.length === 0) {
-        return (
-            <Paper sx={{ p: 2, m: 1, bgcolor: 'background.paper' }}>
-                <Typography variant="h6" gutterBottom>
-                    Available Variables
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                    No variables available yet. Create function, let, set, or forLoop nodes to see variables here.
-                </Typography>
-            </Paper>
-        );
-    }
-
-    // Group variables by type
-    const groupedVariables = availableVariables.reduce((acc, variable) => {
-        const type = variable.type;
-        if (!acc[type]) acc[type] = [];
-        acc[type].push(variable);
-        return acc;
-    }, {} as Record<string, typeof availableVariables>);
-
-    return (
-        <Paper sx={{ p: 2, m: 1, bgcolor: 'background.paper' }}>
-            <Typography variant="h6" gutterBottom>
-                Available Variables ({availableVariables.length})
-            </Typography>
-
-            {Object.entries(groupedVariables).map(([type, variables]) => (
-                <Box key={type} sx={{ mb: 2 }}>
-                    <Typography variant="subtitle2" color="primary" gutterBottom>
-                        {type.charAt(0).toUpperCase() + type.slice(1)} Variables
-                    </Typography>
-                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-                        {variables.map((variable) => (
-                            <Chip
-                                key={variable.id}
-                                label={`${variable.name}: ${variable.dataType || 'any'}`}
-                                size="small"
-                                variant="outlined"
-                                title={`Source: ${variable.sourceNodeType} (${variable.sourceNodeId})`}
-                            />
-                        ))}
-                    </Box>
-                </Box>
-            ))}
-        </Paper>
-    );
-};
-
-
+import React from 'react';
+import { Box, Typography, Chip, Paper } from '@mui/material';
+import { useAvailableVariables } from '../contexts/DiagramProvider';
+
+export const AvailableVariablesDisplay: React.FC = () => {
+    const availableVariables = useAvailableVariables();
+
+    if (!availableVariables || availableVariables.length === 0) {
+        return (
+            <Paper sx={{ p: 2, m: 1, bgcolor: 'background.paper' }}>
+                <Typography variant="h6" gutterBottom>
+                    Available Variables
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                    No variables available yet. Create function, let, set, or forLoop nodes to see variables here.
+                </Typography>
+            </Paper>
+        );
+    }
+
+    // Group variables by type
+    const groupedVariables = availableVariables.reduce((acc, variable) => {
+        const type = variable.type;
+        if (!acc[type]) acc[type] = [];
+        acc[type].push(variable);
+        return acc;
+    }, {} as Record<string, typeof availableVariables>);
+
+    return (
+        <Paper sx={{ p: 2, m: 1, bgcolor: 'background.paper' }}>
+            <Typography variant="h6" gutterBottom>
+                Available Variables ({availableVariables.length})
+            </Typography>
+
+            {Object.entries(groupedVariables).map(([type, variables]) => (
+                <Box key={type} sx={{ mb: 2 }}>
+                    <Typography variant="subtitle2" color="primary" gutterBottom>
+                        {type.charAt(0).toUpperCase() + type.slice(1)} Variables
+                    </Typography>
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {variables.map((variable) => (
+                            <Chip
+                                key={variable.id}
+                                label={`${variable.name}: ${variable.dataType || 'any'}`}
+                                size="small"
+                                variant="outlined"
+                                title={`Source: ${variable.sourceNodeType} (${variable.sourceNodeId})`}
+                            />
+                        ))}
+                    </Box>
+                </Box>
+            ))}
+        </Paper>
+    );
+};
+
+