@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/collaborationDiagram/components/CollabLayout.ts

@@ -1,182 +1,182 @@
-import ELK, { ElkExtendedEdge, ElkNode } from 'elkjs/lib/elk.bundled.js';
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { Node } from '@xyflow/react';
-import constantLengths from '../../../utils/constant-lengths';
-import { MIN_WIDTH, MIN_HEIGHT } from '../nodes/CollabObjectNode';
-import {
-  CollaborationNode,
-  CollaborationEdge,
-} from '../../../types/collaboration-types';
-
-const elk = new ELK();
-
-const getLayoutConfig = (direction: 'DOWN' | 'RIGHT') => ({
-  'elk.algorithm': 'layered',
-  'elk.direction': direction,
-  'elk.padding': '[top=200,left=25,bottom=25,right=25]',
-  'elk.alignment': 'CENTER',
-  'elk.spacing.nodeNode': (constantLengths.SUB_NODE_MARGIN * 2).toString(),
-  'elk.layered.spacing.nodeNodeBetweenLayers': (
-    constantLengths.CONNECTION_LENGTH * 3
-  ).toString(),
-  'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
-});
-
-type LayoutDirection = 'DOWN' | 'RIGHT';
-
-// Add this type at the top (after imports):
-type CollabMeasuredNode = Node & {
-  measured: {
-    width: number;
-    height: number;
-  };
-};
-
-// Type for nodes that might have parentId (for hierarchical layouts)
-type NodeWithParent = CollaborationNode & {
-  parentId?: string;
-};
-
-// Extended ElkNode type with parentId for hierarchical layouts
-type ElkNodeWithParent = ElkNode & {
-  parentId?: string;
-};
-
-// Utility to estimate width based on label length for collabObject
-export function getCollabObjectNodeSize(label: string) {
-  const lines = label.split('\n');
-  const maxLineLength = Math.max(...lines.map((l) => l.length));
-  // Estimate width: 14px per char + 48px padding, no max
-  const width = Math.max(MIN_WIDTH, maxLineLength * 14);
-  // Height: 38px base (MIN_HEIGHT)
-  const height = Math.max(MIN_HEIGHT, lines.length * 22);
-  return { width, height };
-}
-
-export const useCollabLayout = (
-  nodes: CollaborationNode[],
-  edges: CollaborationEdge[],
-  setNodes: React.Dispatch<React.SetStateAction<Node[]>>,
-) => {
-  const frameIdRef = useRef<number | null>(null);
-  const nodeMap = useMemo(
-    () => new Map(nodes.map((n: CollaborationNode) => [n.id, n])),
-    [nodes],
-  );
-  const [layoutDirection, setLayoutDirection] =
-    useState<LayoutDirection>('DOWN');
-
-  const getLayoutedElements = useCallback(() => {
-    if (frameIdRef.current) {
-      cancelAnimationFrame(frameIdRef.current);
-      frameIdRef.current = null;
-    }
-    const validNodeIds = new Set(
-      nodes.map((node: CollaborationNode) => node.id),
-    );
-    const filteredEdges = edges.filter(
-      (edge: CollaborationEdge) =>
-        validNodeIds.has(edge.source) && validNodeIds.has(edge.target),
-    );
-    const currentConfig = getLayoutConfig(layoutDirection);
-    const elkNodes: ElkNodeWithParent[] = nodes.map(
-      (node: CollaborationNode) => {
-        let width = MIN_WIDTH;
-        let height = MIN_HEIGHT;
-        if (node.type === 'collabObject') {
-          const label = node.data?.label || '';
-          const size = getCollabObjectNodeSize(label);
-          width = size.width;
-          height = size.height;
-        } else if (node.type === 'actor') {
-          width = 40;
-          height = 60;
-        }
-        return {
-          id: node.id,
-          position: {},
-          children: [],
-          width,
-          height,
-          layoutOptions: {
-            ...currentConfig,
-            'elk.padding': `[top=${height},left=25,bottom=25,right=25]`,
-          },
-          parentId: (node as NodeWithParent).parentId,
-        };
-      },
-    );
-    const elkEdges: ElkExtendedEdge[] = filteredEdges.map(
-      (edge: CollaborationEdge) => ({
-        id: edge.id,
-        sources: [edge.source],
-        targets: [edge.target],
-      }),
-    );
-    const elkNodesMap = new Map(elkNodes.map((node) => [node.id, node]));
-    elkNodes.forEach((node) => {
-      if (node.parentId) {
-        const parent = elkNodesMap.get(node.parentId);
-        if (parent) {
-          parent.children?.push(node);
-        }
-      }
-    });
-    const graph = {
-      id: 'root',
-      layoutOptions: currentConfig,
-      children: elkNodes.filter((n) => !n.parentId),
-      edges: elkEdges,
-    };
-    elk.layout(graph).then((layoutedGraph) => {
-      const updatedNodes: CollabMeasuredNode[] = [];
-      const processNode = (node: ElkNode) => {
-        if (node.x !== undefined && node.y !== undefined) {
-          const originalNode = nodeMap.get(node.id);
-          if (originalNode) {
-            let width =
-              typeof originalNode.width === 'number'
-                ? originalNode.width
-                : MIN_WIDTH;
-            let height =
-              typeof originalNode.height === 'number'
-                ? originalNode.height
-                : MIN_HEIGHT;
-            if (
-              originalNode.type === 'collabObject' ||
-              originalNode.type === 'actor'
-            ) {
-              const label = originalNode.data?.label || '';
-              const size = getCollabObjectNodeSize(label);
-              width =
-                typeof width === 'number' && width > 0 ? width : size.width;
-              height =
-                typeof height === 'number' && height > 0 ? height : size.height;
-            }
-            const updatedNode: CollabMeasuredNode = {
-              ...originalNode,
-              position: { x: node.x, y: node.y },
-              width,
-              height,
-              measured: { width, height },
-              style: {
-                ...originalNode.style,
-                width,
-                height,
-              },
-            };
-            updatedNodes.push(updatedNode);
-          }
-        }
-        node.children?.forEach(processNode);
-      };
-      layoutedGraph.children?.forEach(processNode);
-      frameIdRef.current = window.requestAnimationFrame(() => {
-        setNodes(updatedNodes);
-        frameIdRef.current = null;
-      });
-    });
-  }, [nodes, edges, setNodes, nodeMap, layoutDirection]);
-
-  return { getLayoutedElements, layoutDirection, setLayoutDirection };
-};
+import ELK, { ElkExtendedEdge, ElkNode } from 'elkjs/lib/elk.bundled.js';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Node } from '@xyflow/react';
+import constantLengths from '../../../utils/constant-lengths';
+import { MIN_WIDTH, MIN_HEIGHT } from '../nodes/CollabObjectNode';
+import {
+  CollaborationNode,
+  CollaborationEdge,
+} from '../../../types/collaboration-types';
+
+const elk = new ELK();
+
+const getLayoutConfig = (direction: 'DOWN' | 'RIGHT') => ({
+  'elk.algorithm': 'layered',
+  'elk.direction': direction,
+  'elk.padding': '[top=200,left=25,bottom=25,right=25]',
+  'elk.alignment': 'CENTER',
+  'elk.spacing.nodeNode': (constantLengths.SUB_NODE_MARGIN * 2).toString(),
+  'elk.layered.spacing.nodeNodeBetweenLayers': (
+    constantLengths.CONNECTION_LENGTH * 3
+  ).toString(),
+  'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+});
+
+type LayoutDirection = 'DOWN' | 'RIGHT';
+
+// Add this type at the top (after imports):
+type CollabMeasuredNode = Node & {
+  measured: {
+    width: number;
+    height: number;
+  };
+};
+
+// Type for nodes that might have parentId (for hierarchical layouts)
+type NodeWithParent = CollaborationNode & {
+  parentId?: string;
+};
+
+// Extended ElkNode type with parentId for hierarchical layouts
+type ElkNodeWithParent = ElkNode & {
+  parentId?: string;
+};
+
+// Utility to estimate width based on label length for collabObject
+export function getCollabObjectNodeSize(label: string) {
+  const lines = label.split('\n');
+  const maxLineLength = Math.max(...lines.map((l) => l.length));
+  // Estimate width: 14px per char + 48px padding, no max
+  const width = Math.max(MIN_WIDTH, maxLineLength * 14);
+  // Height: 38px base (MIN_HEIGHT)
+  const height = Math.max(MIN_HEIGHT, lines.length * 22);
+  return { width, height };
+}
+
+export const useCollabLayout = (
+  nodes: CollaborationNode[],
+  edges: CollaborationEdge[],
+  setNodes: React.Dispatch<React.SetStateAction<Node[]>>,
+) => {
+  const frameIdRef = useRef<number | null>(null);
+  const nodeMap = useMemo(
+    () => new Map(nodes.map((n: CollaborationNode) => [n.id, n])),
+    [nodes],
+  );
+  const [layoutDirection, setLayoutDirection] =
+    useState<LayoutDirection>('DOWN');
+
+  const getLayoutedElements = useCallback(() => {
+    if (frameIdRef.current) {
+      cancelAnimationFrame(frameIdRef.current);
+      frameIdRef.current = null;
+    }
+    const validNodeIds = new Set(
+      nodes.map((node: CollaborationNode) => node.id),
+    );
+    const filteredEdges = edges.filter(
+      (edge: CollaborationEdge) =>
+        validNodeIds.has(edge.source) && validNodeIds.has(edge.target),
+    );
+    const currentConfig = getLayoutConfig(layoutDirection);
+    const elkNodes: ElkNodeWithParent[] = nodes.map(
+      (node: CollaborationNode) => {
+        let width = MIN_WIDTH;
+        let height = MIN_HEIGHT;
+        if (node.type === 'collabObject') {
+          const label = node.data?.label || '';
+          const size = getCollabObjectNodeSize(label);
+          width = size.width;
+          height = size.height;
+        } else if (node.type === 'actor') {
+          width = 40;
+          height = 60;
+        }
+        return {
+          id: node.id,
+          position: {},
+          children: [],
+          width,
+          height,
+          layoutOptions: {
+            ...currentConfig,
+            'elk.padding': `[top=${height},left=25,bottom=25,right=25]`,
+          },
+          parentId: (node as NodeWithParent).parentId,
+        };
+      },
+    );
+    const elkEdges: ElkExtendedEdge[] = filteredEdges.map(
+      (edge: CollaborationEdge) => ({
+        id: edge.id,
+        sources: [edge.source],
+        targets: [edge.target],
+      }),
+    );
+    const elkNodesMap = new Map(elkNodes.map((node) => [node.id, node]));
+    elkNodes.forEach((node) => {
+      if (node.parentId) {
+        const parent = elkNodesMap.get(node.parentId);
+        if (parent) {
+          parent.children?.push(node);
+        }
+      }
+    });
+    const graph = {
+      id: 'root',
+      layoutOptions: currentConfig,
+      children: elkNodes.filter((n) => !n.parentId),
+      edges: elkEdges,
+    };
+    elk.layout(graph).then((layoutedGraph) => {
+      const updatedNodes: CollabMeasuredNode[] = [];
+      const processNode = (node: ElkNode) => {
+        if (node.x !== undefined && node.y !== undefined) {
+          const originalNode = nodeMap.get(node.id);
+          if (originalNode) {
+            let width =
+              typeof originalNode.width === 'number'
+                ? originalNode.width
+                : MIN_WIDTH;
+            let height =
+              typeof originalNode.height === 'number'
+                ? originalNode.height
+                : MIN_HEIGHT;
+            if (
+              originalNode.type === 'collabObject' ||
+              originalNode.type === 'actor'
+            ) {
+              const label = originalNode.data?.label || '';
+              const size = getCollabObjectNodeSize(label);
+              width =
+                typeof width === 'number' && width > 0 ? width : size.width;
+              height =
+                typeof height === 'number' && height > 0 ? height : size.height;
+            }
+            const updatedNode: CollabMeasuredNode = {
+              ...originalNode,
+              position: { x: node.x, y: node.y },
+              width,
+              height,
+              measured: { width, height },
+              style: {
+                ...originalNode.style,
+                width,
+                height,
+              },
+            };
+            updatedNodes.push(updatedNode);
+          }
+        }
+        node.children?.forEach(processNode);
+      };
+      layoutedGraph.children?.forEach(processNode);
+      frameIdRef.current = window.requestAnimationFrame(() => {
+        setNodes(updatedNodes);
+        frameIdRef.current = null;
+      });
+    });
+  }, [nodes, edges, setNodes, nodeMap, layoutDirection]);
+
+  return { getLayoutedElements, layoutDirection, setLayoutDirection };
+};

package/packages/diagrams/src/lib/templates/collaborationDiagram/components/CollabObjectNodeSettings.tsx

@@ -1,87 +1,87 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Box, Button, TextField, Typography, IconButton, Checkbox, FormControlLabel } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { Node } from '@xyflow/react';
-import { CollabObjectNodeData } from '../../../types/collaboration-types';
-import { useTranslation } from 'react-i18next';
-
-interface CollabObjectNodeSettingsProps {
-    open: boolean;
-    node: Node<CollabObjectNodeData> | null;
-    onUpdate: (updates: Partial<CollabObjectNodeData>) => void;
-    onClose: () => void;
-    onSelfMessageChange?: (checked: boolean) => void;
-    hasSelfMessage?: boolean;
-}
-
-const CollabObjectNodeSettings: React.FC<CollabObjectNodeSettingsProps> = ({ open, node, onUpdate, onClose, onSelfMessageChange, hasSelfMessage }) => {
-    const { t } = useTranslation();
-    const [label, setLabel] = useState(node?.data.label || '');
-    const [selfMessage, setSelfMessage] = useState(!!hasSelfMessage);
-
-    useEffect(() => {
-        setLabel(node?.data.label || '');
-        setSelfMessage(!!hasSelfMessage);
-    }, [node, hasSelfMessage]);
-
-    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        setLabel(e.target.value);
-        onUpdate({ label: e.target.value });
-    }, [onUpdate]);
-
-    const handleSelfMessageChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        setSelfMessage(e.target.checked);
-        if (onSelfMessageChange) onSelfMessageChange(e.target.checked);
-    }, [onSelfMessageChange]);
-
-    if (!open || !node) return null;
-
-    return (
-        <Box
-            sx={{
-                position: 'absolute',
-                top: 100,
-                right: 20,
-                bgcolor: 'background.paper',
-                p: 2,
-                border: '1px solid #ddd',
-                borderRadius: 1,
-                boxShadow: 3,
-                zIndex: 20,
-                width: 320,
-            }}
-        >
-            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-                <Typography variant="h6">{t('collabObjectNodeSettings.title')}</Typography>
-                <IconButton onClick={onClose} size="small" sx={{ color: '#666' }}>
-                    <CloseIcon fontSize="small" />
-                </IconButton>
-            </Box>
-            <TextField
-                label={t('collabObjectNodeSettings.label')}
-                value={label}
-                onChange={handleLabelChange}
-                fullWidth
-                variant="outlined"
-                size="small"
-                sx={{ mb: 2 }}
-            />
-            <FormControlLabel
-                control={<Checkbox checked={selfMessage} onChange={handleSelfMessageChange} />}
-                label={t('collabObjectNodeSettings.addSelfMessage')}
-                sx={{ mb: 2 }}
-            />
-            <Button
-                variant="contained"
-                color="primary"
-                fullWidth
-                onClick={onClose}
-                sx={{ mt: 1 }}
-            >
-                {t('collabObjectNodeSettings.close')}
-            </Button>
-        </Box>
-    );
-};
-
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Button, TextField, Typography, IconButton, Checkbox, FormControlLabel } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Node } from '@xyflow/react';
+import { CollabObjectNodeData } from '../../../types/collaboration-types';
+import { useTranslation } from 'react-i18next';
+
+interface CollabObjectNodeSettingsProps {
+    open: boolean;
+    node: Node<CollabObjectNodeData> | null;
+    onUpdate: (updates: Partial<CollabObjectNodeData>) => void;
+    onClose: () => void;
+    onSelfMessageChange?: (checked: boolean) => void;
+    hasSelfMessage?: boolean;
+}
+
+const CollabObjectNodeSettings: React.FC<CollabObjectNodeSettingsProps> = ({ open, node, onUpdate, onClose, onSelfMessageChange, hasSelfMessage }) => {
+    const { t } = useTranslation();
+    const [label, setLabel] = useState(node?.data.label || '');
+    const [selfMessage, setSelfMessage] = useState(!!hasSelfMessage);
+
+    useEffect(() => {
+        setLabel(node?.data.label || '');
+        setSelfMessage(!!hasSelfMessage);
+    }, [node, hasSelfMessage]);
+
+    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+        onUpdate({ label: e.target.value });
+    }, [onUpdate]);
+
+    const handleSelfMessageChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelfMessage(e.target.checked);
+        if (onSelfMessageChange) onSelfMessageChange(e.target.checked);
+    }, [onSelfMessageChange]);
+
+    if (!open || !node) return null;
+
+    return (
+        <Box
+            sx={{
+                position: 'absolute',
+                top: 100,
+                right: 20,
+                bgcolor: 'background.paper',
+                p: 2,
+                border: '1px solid #ddd',
+                borderRadius: 1,
+                boxShadow: 3,
+                zIndex: 20,
+                width: 320,
+            }}
+        >
+            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+                <Typography variant="h6">{t('collabObjectNodeSettings.title')}</Typography>
+                <IconButton onClick={onClose} size="small" sx={{ color: '#666' }}>
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </Box>
+            <TextField
+                label={t('collabObjectNodeSettings.label')}
+                value={label}
+                onChange={handleLabelChange}
+                fullWidth
+                variant="outlined"
+                size="small"
+                sx={{ mb: 2 }}
+            />
+            <FormControlLabel
+                control={<Checkbox checked={selfMessage} onChange={handleSelfMessageChange} />}
+                label={t('collabObjectNodeSettings.addSelfMessage')}
+                sx={{ mb: 2 }}
+            />
+            <Button
+                variant="contained"
+                color="primary"
+                fullWidth
+                onClick={onClose}
+                sx={{ mt: 1 }}
+            >
+                {t('collabObjectNodeSettings.close')}
+            </Button>
+        </Box>
+    );
+};
+
 export default React.memo(CollabObjectNodeSettings);