@topconsultnpm/sdkui-react-beta 6.16.1 → 6.16.2

package/lib/components/features/workflow/diagram/DiagramItemComponent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import styled, { keyframes, css } from 'styled-components';
-import DiagramItemSvgContent from './DiagramItemSvgContent'; // Importa la nuova componente
-import { calculateDiagramItemFullDimensions, PADDING_TOP, SPACING_SVG_TEXT, SVG_ICON_SIZE } from './workflowHelpers';
+import DiagramItemSvgContent from './DiagramItemSvgContent';
+import { calculateDiagramItemFullDimensions, FONT_SIZE, MAX_ITEM_WIDTH, MAX_LINES, PADDING_HORIZONTAL, PADDING_TOP, SPACING_SVG_TEXT, SVG_ICON_SIZE, wrapText } from './workflowHelpers';
 const blink = keyframes `
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
@@ -90,8 +90,8 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
     const [textDimensions, setTextDimensions] = useState({ width: 0, height: 0 });
     // Calcola le dimensioni totali dell'elemento usando la funzione di utilità
     const { calculatedWidth, calculatedHeight } = useMemo(() => {
-        return calculateDiagramItemFullDimensions(textDimensions);
-    }, [textDimensions]);
+        return calculateDiagramItemFullDimensions(item, textDimensions);
+    }, [item.ItemName, textDimensions]);
     useEffect(() => {
         setCurrentPosition({ x: item.Left, y: item.Top });
     }, [item.Left, item.Top, item.ID]);
@@ -197,6 +197,9 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
     const handleMouseLeave = useCallback(() => {
         setIsHovered(false);
     }, []);
+    const handleDoubleClick = useCallback(() => {
+        onDoubleClick?.(item.ID);
+    }, [onDoubleClick, item.ID]);
     const renderContent = () => {
         const renderConnectorWithHitArea = (cx, cy, connectorName) => (_jsxs(_Fragment, { children: [_jsx(Connector, { cx: cx, cy: cy, r: 4, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly }), _jsx(ConnectorHitArea, { cx: cx, cy: cy, r: 15, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly, "data-is-connector": "true", onMouseDown: (e) => {
                         if (readOnly)
@@ -219,11 +222,22 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
             // Se non c'è testo, centra verticalmente l'icona SVG all'interno dell'altezza calcolata
             svgY = (calculatedHeight - iconRenderHeight) / 2;
         }
-        // Posizionamento del testo (solo se ItemName è presente)
-        const textX = calculatedWidth / 2;
-        const textY = PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT + (textDimensions.height / 2);
-        return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight }) }), item.ItemName && (_jsx("text", { ref: textRef, x: textX, y: textY - 10, dominantBaseline: "central", className: "item-text", children: item.ItemName })), connectors] }));
+        // Calculate text lines for wrapping
+        let textLines = [];
+        let isTruncated = false;
+        if (item.ItemName) {
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            if (context) {
+                context.font = `${FONT_SIZE}px sans-serif`;
+                textLines = wrapText(item.ItemName, MAX_ITEM_WIDTH - (PADDING_HORIZONTAL * 2), MAX_LINES, context);
+                // Check if the last line contains an ellipsis to determine truncation
+                isTruncated = textLines[textLines.length - 1].endsWith('...');
+                console.log('isTruncated ', isTruncated);
+            }
+        }
+        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
     };
-    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: () => onDoubleClick?.(item.ID), children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
+    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
 };
 export default React.memo(DiagramItemComponent);

package/lib/components/features/workflow/diagram/DiagramItemForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DiagramItem } from './interfaces';
+interface DiagramItemFormProps {
+    itemToEdit: DiagramItem;
+    onClose: () => void;
+    onApply: (updatedItem: DiagramItem) => void;
+}
+declare const DiagramItemForm: React.FC<DiagramItemFormProps>;
+export default DiagramItemForm;

package/lib/components/features/workflow/diagram/DiagramItemForm.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react'; // Importa useState
+import TMModal from '../../../base/TMModal';
+import { DiagramItemTypes } from './interfaces';
+const DiagramItemForm = ({ itemToEdit, onClose, onApply }) => {
+    // Usa uno stato locale per le modifiche
+    const [localItem, setLocalItem] = useState(itemToEdit);
+    if (!localItem) {
+        return null;
+    }
+    // Gestore per l'input
+    const handleNameChange = (event) => {
+        setLocalItem({
+            ...localItem,
+            ItemName: event.target.value
+        });
+    };
+    // Gestore per il salvataggio
+    const handleSave = () => {
+        onApply(localItem);
+        onClose();
+    };
+    return (_jsxs(TMModal, { title: DiagramItemTypes[localItem.Type].toString(), onClose: onClose, isModal: true, width: '50%', height: '50%', children: [_jsx("div", { children: _jsx("input", { type: "text", value: localItem.ItemName, onChange: handleNameChange }) }), _jsx("button", { onClick: handleSave, children: "Applica" })] }));
+};
+export default DiagramItemForm;

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -9,9 +9,9 @@ import DiagramItemComponent from './DiagramItemComponent';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateArrowAngle, getConnectionPoint, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
 import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator } from '../../../../helper';
-import TMModal from '../../../base/TMModal';
 import { TMExceptionBoxManager } from '../../../base/TMPopUp';
 import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
+import DiagramItemForm from './DiagramItemForm';
 const CanvasContainer = styled.div `
   position: relative;
   width: 100%;
@@ -173,6 +173,10 @@ const StyledSvg = styled.svg `
   min-width: calc(100% - 5px);
   min-height: calc(100% - 5px);
   background-color: transparent;
+
+  &:focus {
+    outline: none;
+  }
 `;
 const ScalableGroup = styled.g `
   transform: translate(${props => props.$translateX}px, ${props => props.$translateY}px) scale(${props => props.$scale});
@@ -266,33 +270,48 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         const totalHeight = finalMaxY - finalMinY;
         return { svgWidth: Math.max(0, totalWidth * zoomLevel), svgHeight: Math.max(0, totalHeight * zoomLevel) };
     }, [wfDiagram, zoomLevel]);
-    const updateWfDiagram = useCallback((newDiagram) => {
+    // const updateWfDiagram = useCallback((newDiagram: WfDiagram) => {
+    //     if (readOnly) return;
+    //     try {
+    //         validateDiagram(newDiagram);
+    //         setWfDiagram(newDiagram);
+    //         if (!isUndoingRedoing.current) {
+    //             setWfDiagramHistory(prevHistory => {
+    //                 const newHistory = prevHistory.slice(0, historyIndex + 1);
+    //                 return [...newHistory, newDiagram];
+    //             });
+    //             setHistoryIndex(prevIndex => prevIndex + 1);
+    //         }
+    //     } catch (e: any) {
+    //         TMExceptionBoxManager.show({ exception: e });
+    //     }
+    // }, [historyIndex, readOnly]);
+    // const updateDiagramAndHistory = useCallback((newDiagram: WfDiagram) => {
+    //     if (readOnly) return;
+    //     if (!isUndoingRedoing.current) {
+    //         const newHistory = wfDiagramHistory.slice(0, historyIndex + 1);
+    //         setWfDiagramHistory([...newHistory, newDiagram]);
+    //         setHistoryIndex(newHistory.length);
+    //     }
+    //     setWfDiagram(newDiagram);
+    // }, [wfDiagramHistory, historyIndex, isUndoingRedoing, setWfDiagramHistory, setHistoryIndex, setWfDiagram, readOnly]);
+    const updateDiagram = useCallback((newDiagram, validate = true) => {
         if (readOnly)
             return;
         try {
-            validateDiagram(newDiagram);
-            setWfDiagram(newDiagram);
+            if (validate) {
+                validateDiagram(newDiagram);
+            }
             if (!isUndoingRedoing.current) {
-                setWfDiagramHistory(prevHistory => {
-                    const newHistory = prevHistory.slice(0, historyIndex + 1);
-                    return [...newHistory, newDiagram];
-                });
-                setHistoryIndex(prevIndex => prevIndex + 1);
+                const newHistory = wfDiagramHistory.slice(0, historyIndex + 1);
+                setWfDiagramHistory([...newHistory, newDiagram]);
+                setHistoryIndex(newHistory.length);
             }
+            setWfDiagram(newDiagram);
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
         }
-    }, [historyIndex, readOnly]);
-    const updateDiagramAndHistory = useCallback((newDiagram) => {
-        if (readOnly)
-            return;
-        if (!isUndoingRedoing.current) {
-            const newHistory = wfDiagramHistory.slice(0, historyIndex + 1);
-            setWfDiagramHistory([...newHistory, newDiagram]);
-            setHistoryIndex(newHistory.length);
-        }
-        setWfDiagram(newDiagram);
     }, [wfDiagramHistory, historyIndex, isUndoingRedoing, setWfDiagramHistory, setHistoryIndex, setWfDiagram, readOnly]);
     const handleUndo = useCallback(() => {
         if (readOnly)
@@ -337,8 +356,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         };
         setSelectedItems(new Set());
         setSelectedConnections(new Set());
-        updateDiagramAndHistory(newWfDiagram);
-    }, [wfDiagram, selectedItems, selectedConnections, setWfDiagram, setSelectedItems, setSelectedConnections, updateDiagramAndHistory, readOnly]);
+        updateDiagram(newWfDiagram, false);
+    }, [wfDiagram, selectedItems, selectedConnections, setWfDiagram, setSelectedItems, setSelectedConnections, updateDiagram, readOnly]);
     const handleCopy = useCallback(() => {
         if (readOnly)
             return;
@@ -374,8 +393,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         };
         setSelectedItems(new Set());
         setSelectedConnections(new Set());
-        updateDiagramAndHistory(newWfDiagram);
-    }, [wfDiagram, selectedItems, setSelectedItems, setSelectedConnections, updateDiagramAndHistory, readOnly]);
+        updateDiagram(newWfDiagram, false);
+    }, [wfDiagram, selectedItems, setSelectedItems, setSelectedConnections, updateDiagram, readOnly]);
     const handlePaste = useCallback(() => {
         if (readOnly)
             return;
@@ -424,8 +443,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             DiagramItems: combinedDiagramItems,
             Connections: combinedConnections,
         };
-        updateDiagramAndHistory(newWfDiagram);
-    }, [wfDiagram, copiedItems, copiedConnections, isCutOperation, updateDiagramAndHistory, setSelectedItems, setSelectedConnections, readOnly]);
+        updateDiagram(newWfDiagram, false);
+    }, [wfDiagram, copiedItems, copiedConnections, isCutOperation, updateDiagram, setSelectedItems, setSelectedConnections, readOnly]);
     const handleNew = useCallback(() => {
         if (readOnly)
             return;
@@ -478,17 +497,20 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             setItemToEdit(itemFound);
             setIsModalOpen(true);
         }
-    }, [wfDiagram]);
+    }, [wfDiagram, readOnly]);
     const handleCloseModal = useCallback(() => {
         if (readOnly)
             return;
-        setIsModalOpen(false);
-        setItemToEdit(null); // Resetta l'elemento
-    }, []);
+        setIsModalOpen(prevIsModalOpen => {
+            return false;
+        });
+    }, [readOnly]);
     const handleKeyDown = useCallback((event) => {
         if (readOnly)
             return;
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'z', 'y'].includes(event.key)) {
+            // Prevent the event from bubbling up to parent components (like the TabPanel)
+            event.stopPropagation();
             if (['z', 'y'].includes(event.key) && !event.ctrlKey) {
                 return;
             }
@@ -552,7 +574,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                     ...wfDiagram,
                     DiagramItems: newDiagramItems,
                 };
-                updateDiagramAndHistory(newWfDiagram);
+                updateDiagram(newWfDiagram, false);
                 return;
             }
         }
@@ -560,7 +582,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             handleDelete();
             return;
         }
-    }, [wfDiagram, selectedItems, selectedConnections, handleUndo, handleRedo, handleDelete, updateDiagramAndHistory, handleCopy, handleCut, handlePaste, readOnly]);
+    }, [wfDiagram, selectedItems, selectedConnections, handleUndo, handleRedo, handleDelete, updateDiagram, handleCopy, handleCut, handlePaste, readOnly]);
     const calculateConnectionPath = useCallback((connection, sourceItem, sinkItem) => {
         const sourcePoint = getConnectionPoint(sourceItem, connection.Source.ConnectorName);
         const sinkPoint = getConnectionPoint(sinkItem, connection.Sink.ConnectorName);
@@ -893,9 +915,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         return { ...diagram, DiagramItems: newDiagramItems };
     };
     const getAdjustedAndRecalculatedDiagram = useCallback((diagramToProcess) => {
-        // Step 1: Aggiusta le posizioni degli elementi
+        // Aggiusta le posizioni degli elementi
         const adjustedItemsDiagram = autoAdjustDiagram(diagramToProcess);
-        // Step 2: Ricalcola le connessioni basandosi sulle nuove posizioni
+        // Ricalcola le connessioni basandosi sulle nuove posizioni
         const diagramItemsMap = new Map(adjustedItemsDiagram.DiagramItems.map(item => [item.ID, item]));
         const adjustedConnections = adjustedItemsDiagram.Connections.map(conn => {
             const sourceItem = diagramItemsMap.get(conn.Source.ParentDiagramItem.ID);
@@ -907,15 +929,15 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             }
             return conn;
         });
-        // Step 3: Ritorna l'oggetto diagramma finale e completo
+        // Ritorna l'oggetto diagramma finale e completo
         return { ...adjustedItemsDiagram, Connections: adjustedConnections };
     }, [calculateConnectionPath]);
     const handleAutoAdjust = useCallback(() => {
         if (readOnly || !wfDiagram)
             return;
         const finalDiagram = getAdjustedAndRecalculatedDiagram(wfDiagram);
-        updateDiagramAndHistory(finalDiagram);
-    }, [wfDiagram, readOnly, updateDiagramAndHistory, getAdjustedAndRecalculatedDiagram]);
+        updateDiagram(finalDiagram, false);
+    }, [wfDiagram, readOnly, updateDiagram, getAdjustedAndRecalculatedDiagram]);
     const handleMouseDown = useCallback((event) => {
         if (readOnly)
             return;
@@ -1105,10 +1127,10 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 ...prevDiagram,
                 DiagramItems: prevDiagram.DiagramItems.map(item => item.ID === id ? { ...item, Left: finalX, Top: finalY } : item),
             };
-            updateWfDiagram(updatedDiagram);
+            updateDiagram(updatedDiagram);
             return updatedDiagram;
         });
-    }, [updateWfDiagram, readOnly]);
+    }, [updateDiagram, readOnly]);
     const handleConnectorMouseDown = useCallback((itemId, connectorName, event) => {
         if (readOnly || !wfDiagram)
             return;
@@ -1175,7 +1197,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 ...wfDiagram,
                 Connections: [...wfDiagram.Connections, newConnection],
             };
-            updateWfDiagram(updatedDiagram);
+            updateDiagram(updatedDiagram);
         }
         else if (isDraggingExistingConnectionEndpoint && draggingConnectionId && draggingEndpointType && wfDiagram) {
             // Logica per la riconnessione di un endpoint esistente
@@ -1200,7 +1222,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 ...wfDiagram,
                 Connections: updatedConnections,
             };
-            updateWfDiagram(updatedDiagram);
+            updateDiagram(updatedDiagram);
             // Resetta tutti gli stati di trascinamento dell'endpoint
             setIsDraggingExistingConnectionEndpoint(false);
             setDraggingConnectionId(null);
@@ -1212,7 +1234,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setTempConnectionSource(null);
         setTempConnectionEnd(null);
         setMouseDownPos(null);
-    }, [isDrawingConnection, tempConnectionSource, wfDiagram, updateWfDiagram, readOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
+    }, [isDrawingConnection, tempConnectionSource, wfDiagram, updateDiagram, readOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
     const handleDragOver = useCallback((event) => {
         if (readOnly) {
             event.preventDefault();
@@ -1244,11 +1266,11 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 ...wfDiagram,
                 DiagramItems: [...wfDiagram.DiagramItems, newItem],
             };
-            updateWfDiagram(updatedDiagram);
+            updateDiagram(updatedDiagram);
             setIsDraggingFromToolbox(false);
             setDraggedItemType(null);
         }
-    }, [isDraggingFromToolbox, draggedItemType, wfDiagram, updateWfDiagram, zoomLevel, readOnly]);
+    }, [isDraggingFromToolbox, draggedItemType, wfDiagram, updateDiagram, zoomLevel, readOnly]);
     const currentSelectionRect = useMemo(() => {
         if (isDrawingSelectionRect && selectionRectStart && selectionRectEnd) {
             const x = Math.min(selectionRectStart.x, selectionRectEnd.x);
@@ -1275,6 +1297,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setDraggedItemType(null);
     };
     const handleItemDimensionsChange = useCallback((itemId, width, height) => {
+        console.log('itemId', itemId, 'width', width, 'height', height);
         setWfDiagram(prevDiagram => {
             if (!prevDiagram)
                 return null;
@@ -1282,10 +1305,23 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 ...prevDiagram,
                 DiagramItems: prevDiagram.DiagramItems.map(item => item.ID === itemId ? { ...item, Width: width, Height: height } : item),
             };
-            updateWfDiagram(updatedDiagram);
+            updateDiagram(updatedDiagram);
             return updatedDiagram;
         });
     }, []);
+    const handleUpdateDiagramItem = useCallback((updatedItem) => {
+        setWfDiagram(prevDiagram => {
+            if (!prevDiagram)
+                return null;
+            const updatedDiagramItems = prevDiagram.DiagramItems.map(item => {
+                if (item.ID === updatedItem.ID) {
+                    return updatedItem;
+                }
+                return item;
+            });
+            return { ...prevDiagram, DiagramItems: updatedDiagramItems };
+        });
+    }, []);
     const availableItemTypes = useMemo(() => {
         return [
             DiagramItemTypes.Approval,
@@ -1305,15 +1341,23 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         ];
     }, []);
     useEffect(() => {
+        // se undo/redo, il `xmlDiagramString` è cambiato ma la storia non deve essere resettata.
+        if (isUndoingRedoing.current) {
+            isUndoingRedoing.current = false;
+            return;
+        }
         setIsLoading(true);
         try {
             let initialDiagram = xmlDiagramString ? parseWfDiagramXml(xmlDiagramString) : null;
             if (initialDiagram) {
                 const finalDiagram = getAdjustedAndRecalculatedDiagram(initialDiagram);
-                setWfDiagram(finalDiagram);
-                initialDiagramRef.current = finalDiagram;
-                setWfDiagramHistory([finalDiagram]);
-                setHistoryIndex(0);
+                // Aggiungi un controllo per evitare di resettare la storia se il diagramma è lo stesso.
+                if (JSON.stringify(wfDiagram) !== JSON.stringify(finalDiagram)) {
+                    setWfDiagram(finalDiagram);
+                    initialDiagramRef.current = finalDiagram;
+                    setWfDiagramHistory([finalDiagram]);
+                    setHistoryIndex(0);
+                }
             }
             else {
                 setWfDiagram(null);
@@ -1335,13 +1379,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             isUndoingRedoing.current = false;
         }
     }, [wfDiagram]);
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown]);
-    return (_jsxs(CanvasContainer, { children: [!readOnly && (_jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, children: [_jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: readOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] })] }), _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] })), !readOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ? (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { readOnly: readOnly, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem }, item.ID))), calculatedConnections.map(connection => {
+    return (_jsxs(CanvasContainer, { children: [!readOnly && (_jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, children: [_jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: readOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] })] }), _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] })), !readOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ?
+                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { readOnly: readOnly, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem }, item.ID))), calculatedConnections.map(connection => {
                                 const sourceItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Source.ParentDiagramItem.ID);
                                 const sinkItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Sink.ParentDiagramItem.ID);
                                 if (!sourceItem || !sinkItem)
@@ -1352,7 +1391,6 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                                 // Determina se questa è la connessione che stiamo trascinando
                                 const isThisConnectionBeingDragged = isDraggingExistingConnectionEndpoint && draggingConnectionId === connection.ID;
                                 return (_jsx(ConnectionComponent, { connection: connection, isSelected: selectedConnections.has(connection.ID), sourcePoint: sourcePoint, sinkPoint: sinkPoint, isTemporary: isThisConnectionBeingDragged, onClick: handleConnectionClick, onConnectionEndpointMouseDown: handleConnectionEndpointMouseDown }, connection.ID));
-                            }), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) }))
-                    : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(TMModal, { title: DiagramItemTypes[itemToEdit.Type].toString(), onClose: handleCloseModal, isModal: true, width: '50%', height: '50%', children: _jsx("div", { children: itemToEdit.ItemName }) }))] }));
+                            }), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) })) : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(DiagramItemForm, { itemToEdit: itemToEdit, onClose: handleCloseModal, onApply: handleUpdateDiagramItem }))] }));
 };
 export default WFDiagram;

package/lib/components/features/workflow/diagram/workflowHelpers.d.ts

@@ -37,14 +37,28 @@ export declare const PADDING_TOP = 5;
 export declare const PADDING_BOTTOM = 5;
 export declare const PADDING_HORIZONTAL = 5;
 export declare const SPACING_SVG_TEXT = 0;
+export declare const FONT_SIZE = 11;
+export declare const MAX_ITEM_WIDTH = 130;
+export declare const MIN_ITEM_WIDTH = 64;
+export declare const MAX_LINES = 2;
+/**
+ * Breaks a string into multiple lines to fit a maximum width, adding an ellipsis if it exceeds the maximum number of lines.
+ *
+ * @param text The string to be wrapped.
+ * @param maxWidth The maximum width for a single line of text.
+ * @param maxLines The maximum number of lines allowed before truncation.
+ * @returns An array of strings, where each element is a line of text.
+ */
+export declare const wrapText: (text: string, maxWidth: number, maxLines: number, ctx: CanvasRenderingContext2D) => string[];
 /**
  * Calculates the full dimensions of a diagram item, including the icon and text.
  * This function is based on already measured or estimated text dimensions.
  *
+ * @param item The DiagramItem.
  * @param textDimensions The dimensions (width, height) of the item's text.
  * @returns An object with the calculatedWidth and calculatedHeight of the item.
- */
-export declare const calculateDiagramItemFullDimensions: (textDimensions: TextDimensions) => {
+*/
+export declare const calculateDiagramItemFullDimensions: (item: DiagramItem, textDimensions: TextDimensions) => {
     calculatedWidth: number;
     calculatedHeight: number;
 };

package/lib/components/features/workflow/diagram/workflowHelpers.js

@@ -72,30 +72,93 @@ export const isConnectionNonLinear = (sourceRect, sinkRect, sourceConnectorName,
     // If none of the above conditions are true, the connection is considered "linear"
     return false;
 };
-// Layout constants - MUST BE CONSISTENT WITH CSS STYLES AND LAYOUT LOGIC
-// of DiagramItemComponent.tsx
+// Layout constants of DiagramItemComponent.tsx
 export const SVG_ICON_SIZE = 60;
 export const PADDING_TOP = 5;
 export const PADDING_BOTTOM = 5;
 export const PADDING_HORIZONTAL = 5;
 export const SPACING_SVG_TEXT = 0;
+export const FONT_SIZE = 11;
+export const MAX_ITEM_WIDTH = 130;
+export const MIN_ITEM_WIDTH = 64;
+export const MAX_LINES = 2;
+/**
+ * Breaks a string into multiple lines to fit a maximum width, adding an ellipsis if it exceeds the maximum number of lines.
+ *
+ * @param text The string to be wrapped.
+ * @param maxWidth The maximum width for a single line of text.
+ * @param maxLines The maximum number of lines allowed before truncation.
+ * @returns An array of strings, where each element is a line of text.
+ */
+export const wrapText = (text, maxWidth, maxLines, ctx) => {
+    if (!text || !ctx) {
+        return [];
+    }
+    // Per un calcolo accurato, usiamo un contesto canvas
+    // La logica precedente aveva un piccolo problema con la gestione degli spazi
+    const words = text.split(' ');
+    let lines = [];
+    let currentLine = '';
+    for (let i = 0; i < words.length; i++) {
+        const word = words[i];
+        let testLine = currentLine.length > 0 ? currentLine + ' ' + word : word;
+        const metrics = ctx.measureText(testLine);
+        const testWidth = metrics.width;
+        if (testWidth > maxWidth) {
+            lines.push(currentLine);
+            currentLine = word;
+        }
+        else {
+            currentLine = testLine;
+        }
+    }
+    lines.push(currentLine);
+    // Gestisce il caso dell'ellissi
+    if (lines.length > maxLines) {
+        let lastLine = lines[maxLines - 1];
+        while (ctx.measureText(lastLine + '...').width > maxWidth) {
+            lastLine = lastLine.slice(0, -1);
+        }
+        lines[maxLines - 1] = lastLine + '...';
+        lines = lines.slice(0, maxLines);
+    }
+    return lines;
+};
 /**
  * Calculates the full dimensions of a diagram item, including the icon and text.
  * This function is based on already measured or estimated text dimensions.
  *
+ * @param item The DiagramItem.
  * @param textDimensions The dimensions (width, height) of the item's text.
  * @returns An object with the calculatedWidth and calculatedHeight of the item.
- */
-export const calculateDiagramItemFullDimensions = (textDimensions) => {
-    const { width: textWidth, height: textHeight } = textDimensions;
-    let baseWidth = SVG_ICON_SIZE + (PADDING_HORIZONTAL * 2); // 40 + (10 * 2) = 60
-    let baseHeight = PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT + textHeight + PADDING_BOTTOM - 10; // 10 + 40 + 5 + textHeight + 10 = 65 + textHeight
-    // Initial width calculation based on SVG/padding or text
-    let finalCalculatedWidth = Math.max(baseWidth, textWidth + (PADDING_HORIZONTAL * 2));
-    // Initial height calculation
-    let finalCalculatedHeight = baseHeight;
+*/
+export const calculateDiagramItemFullDimensions = (item, textDimensions) => {
+    // Calcola la larghezza del testo con padding
+    const textWidthWithPadding = textDimensions.width + (PADDING_HORIZONTAL * 2);
+    // Applica i vincoli: la larghezza è il valore maggiore tra il minimo e il minore tra la larghezza calcolata e il massimo
+    const finalCalculatedWidth = Math.max(MIN_ITEM_WIDTH, Math.min(textWidthWithPadding, MAX_ITEM_WIDTH));
+    const textHeight = textDimensions.height;
+    let finalCalculatedHeight;
+    if (item.ItemName) {
+        // Calculate height based on wrapped text lines
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (context) {
+            context.font = `${FONT_SIZE}px sans-serif`;
+            const lines = wrapText(item.ItemName, MAX_ITEM_WIDTH - (PADDING_HORIZONTAL * 2), MAX_LINES, context);
+            // Calculate height based on number of lines
+            finalCalculatedHeight = PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT + (lines.length * FONT_SIZE) + PADDING_BOTTOM;
+        }
+        else {
+            // Fallback if canvas context is not available
+            finalCalculatedHeight = PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT + textHeight + PADDING_BOTTOM;
+        }
+    }
+    else {
+        // No text, so height is just icon + padding
+        finalCalculatedHeight = PADDING_TOP + SVG_ICON_SIZE + PADDING_BOTTOM;
+    }
     // Applies the guarantee that dimensions are never less than 64px
-    finalCalculatedWidth = Math.max(finalCalculatedWidth, 64);
     finalCalculatedHeight = Math.max(finalCalculatedHeight, 64);
     return { calculatedWidth: finalCalculatedWidth, calculatedHeight: finalCalculatedHeight };
 };

package/lib/components/forms/TMChooserForm.js

@@ -86,8 +86,8 @@ const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowA
             ...summaryItems ?? {}
         });
     }, [manageUseLocalizedName, summaryItems]);
-    return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: (children ??
-            filteredItems.length > 0)
+    return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
+            filteredItems.length > 0
             ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
             : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.1",
+    "version": "6.16.2",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",