@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,1666 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { DiagramItemTypes, ArrowSymbol } from './interfaces';
+import { parseWfDiagramXml, serializeWfDiagramToXml } from './xmlParser';
+import styled, { css, keyframes } from 'styled-components';
+import { CultureIDs, DataListCacheService, SearchEngine, WFAppTypes, WorkItemStatus } from "@topconsultnpm/sdk-ts";
+import ConnectionComponent from './ConnectionComponent';
+import DiagramItemComponent from './DiagramItemComponent';
+import DiagramItemSvgContent from './DiagramItemSvgContent';
+import { calculateArrowAngle, downloadFile, getConnectionPoint, getNewWfDiagram, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
+import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock, LocalizeDiagramItemType, IconWindowMinimize } from '../../../../helper';
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../../../base/TMPopUp';
+import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
+import DiagramItemForm from './DiagramItemForm';
+import ReactDOM from 'react-dom';
+import ConnectionForm from './ConnectionForm';
+const ZoomLevelText = styled.span `
+    font-size: 0.9em;
+    color: #555; 
+    white-space: nowrap; 
+    background-color: white;
+    padding: 2px 4px; /* Aggiunto un leggero padding per chiarezza */
+    border-radius: 4px;
+
+    /* A. Modalità Compressa (non Floating & Collapsed) */
+    ${props => !props.$isFloating && props.$isCollapsed
+    ? `
+            padding: 0 2px;
+            margin: 0; 
+            display: inline-block; 
+            line-height: 20px;
+        `
+    // B. Modalità Flottante (Verticale)
+    : props.$isFloating
+        ? `
+            display: block; 
+            text-align: center; 
+            margin: 4px 0; 
+            padding: 2px 4px;
+        `
+        // C. Modalità Standard (Orizzontale & non Collapsed)
+        : `
+            display: flex; 
+            align-items: center; 
+            margin: 0 8px; 
+            padding: 2px 4px;
+        `}
+`;
+const DiagramWrapper = styled.div `
+  height: 100%;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  position: relative; 
+  transition: all 0.3s ease-in-out;
+`;
+const FullScreenContainer = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1500; 
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const CanvasContainer = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  display: flex;
+  overflow: hidden; /* Ensure content doesn't overflow when panels are collapsed */
+`;
+const pulse = keyframes `
+    0% {
+        transform: scale(1.0);
+        /* 💡 NUOVO: Ombra bianca/chiara per massimo contrasto contro il blu */
+        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.9); 
+    }
+    50% {
+        transform: scale(1.3); /* Aumentato a 1.3 per maggiore impatto visivo */
+        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); /* Aumentato lo spread a 12px */
+    }
+    100% {
+        transform: scale(1.0);
+        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
+    }
+`;
+const ToolbarContainer = styled.div `
+  display: flex;
+  gap: 5px;
+  background: ${props => props.$isReadOnly
+    ? 'transparent linear-gradient(180deg, #007bff 0%, #1E90FF 45%, #0056b3 100%) 0% 0% no-repeat padding-box'
+    : 'transparent linear-gradient(180deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box'};
+  padding: 8px;
+  border-radius: 4px;
+  z-index: 10;
+  flex-shrink: 0;
+  transition: all 0.3s ease-in-out; 
+
+  ${props => props.$isFloating ? `
+    position: absolute;
+    bottom: 20px;
+    left: ${props.$isReadOnly ? '20px' : props.$isToolboxVisible ? '160px' : '20px'};
+    flex-direction: row;
+    width: auto;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 5px 8px;
+  ` : `
+    position: relative;
+    flex-direction: column;
+    width: ${props.$isCollapsed ? '40px' : 'auto'};
+  `}
+  overflow-y: auto;
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: ${props => props.$isCollapsed || props.$isFloating ? 'center' : 'flex-start'}; // Centra icone in entrambe le modalità
+    white-space: nowrap;
+
+    position: relative; 
+    overflow: visible; 
+    transition: background-color 0.3s; /* Aggiunto transform per l'animazione */
+    &[title="Progettazione"] {
+            ${props => props.$isReadOnly && css `
+                svg {
+                    /* Applicazione animazione */
+                    animation: ${pulse} 2s infinite; 
+                    
+                    /* Assicura che l'animazione sia sopra */
+                    z-index: 2; 
+                    
+                    /* FIX: box-shadow e transform necessitano di spazio visibile */
+                    overflow: visible; /* Assicurati che l'SVG non tagli l'ombra */
+                    position: relative; /* Necessario per z-index in alcuni contesti */
+                    
+                    /* Assicura una transizione base per trasformazione */
+                    transition: transform 0.2s; 
+                }
+            `}
+        }
+
+    svg {
+      color: white;
+      font-size: ${props => props.$isFloating ? '20px' : '30px'}; // Icone più piccole in modalità floating
+      min-width: ${props => props.$isFloating ? '20px' : '30px'};
+    }
+
+    span {
+        display: ${props => (props.$isCollapsed || props.$isFloating) ? 'none' : 'block'}; // Nascondi testo in modalità collapsed e floating
+        color: white;
+        margin-left: 8px;
+    }
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: transparent;
+      &:hover {
+        background-color: transparent;
+      }
+      svg {
+        color: #cccccc;
+      }
+    }
+  }
+`;
+const ButtonGroup = styled.div `
+  display: flex;
+  gap: 5px; // Spazio tra i pulsanti all'interno di un gruppo
+  flex-shrink: 0; // Impedisce ai gruppi di restringersi
+
+  ${props => props.$isFloating ? `
+    flex-direction: row;
+    ${!props.$isLast && `
+      border-right: 1px solid rgba(255, 255, 255, 0.3);
+      padding-right: 5px;
+      margin-right: 5px;
+    `}
+  ` : `
+    flex-direction: column;
+    ${!props.$isLast && `
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+      padding-bottom: 5px;
+      margin-bottom: 5px;
+    `}
+  `}
+`;
+const ToolbarToggle = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto; /* Push to the bottom */
+
+  svg {
+    /* color: white; */
+    font-size: 20px;
+  }
+`;
+const ToolboxContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background-color: #f0f0f0;
+    padding: 5px;
+    border-radius: 4px;
+    z-index: 10;
+    flex-shrink: 0;
+    border-right: 1px solid #ccc;
+    overflow-y: auto;
+    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    opacity: ${props => props.$isVisible ? '1' : '0'};
+    pointer-events: ${props => props.$isVisible ? 'auto' : 'none'};
+`;
+const ToolboxIconWrapper = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    margin-bottom: 5px;
+    transition: all 0.2s ease-in-out;
+`;
+const ToolboxItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    border-radius: 5px;
+    cursor: grab;
+    transition: background-color 0.2s ease-in-out;
+    min-width: 80px;
+    text-align: center;
+
+    &:hover {
+        background-color: #e9e9e9;
+        
+        ${ToolboxIconWrapper} {
+            background-color: #e0e0e0;
+            border-color: #a0a0a0;
+        }
+    }
+
+    span {
+        font-size: 0.8em;
+        color: #333;
+        word-break: break-word;
+        line-height: 1.1;
+        max-width: 70px;
+    }
+`;
+const SvgScrollContainer = styled.div `
+  flex-grow: 1;
+  overflow: auto;
+  position: relative;
+`;
+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});
+  transform-origin: 0 0;
+`;
+const SelectionRect = styled.rect `
+  fill: rgba(0, 123, 255, 0.1);
+  stroke: #007bff;
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+`;
+const TempConnectionPath = styled.path `
+    fill: none;
+    stroke: #888;
+    stroke-width: 2;
+    stroke-dasharray: 5 5;
+    pointer-events: none;
+`;
+const DiagramMessage = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.2em;
+  color: #555;
+  text-align: center;
+`;
+const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange }) => {
+    const [isReadOnly, setIsReadOnly] = useState(true);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    const [zoomLevel, setZoomLevel] = useState(1);
+    const [translateX, setTranslateX] = useState(0);
+    const [translateY, setTranslateY] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [wfDiagram, setWfDiagram] = useState(null);
+    const [selectedItems, setSelectedItems] = useState(new Set());
+    const [selectedConnections, setSelectedConnections] = useState(new Set());
+    const [wfDiagramHistory, setWfDiagramHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const isUndoingRedoing = useRef(false);
+    const initialDiagramRef = useRef(null);
+    const notifiedXmlRef = useRef(null);
+    const svgRef = useRef(null);
+    const [isDrawingConnection, setIsDrawingConnection] = useState(false);
+    const [tempConnectionSource, setTempConnectionSource] = useState(null);
+    const [tempConnectionEnd, setTempConnectionEnd] = useState(null);
+    const [mouseDownPos, setMouseDownPos] = useState(null);
+    const [isDraggingExistingConnectionEndpoint, setIsDraggingExistingConnectionEndpoint] = useState(false);
+    const [draggingConnectionId, setDraggingConnectionId] = useState(null);
+    const [draggingEndpointType, setDraggingEndpointType] = useState(null);
+    const [draggingConnectionFixedPoint, setDraggingConnectionFixedPoint] = useState(null);
+    const [isDrawingSelectionRect, setIsDrawingSelectionRect] = useState(false);
+    const [selectionRectStart, setSelectionRectStart] = useState(null);
+    const [selectionRectEnd, setSelectionRectEnd] = useState(null);
+    const [copiedItems, setCopiedItems] = useState([]);
+    const [copiedConnections, setCopiedConnections] = useState([]);
+    const [isCutOperation, setIsCutOperation] = useState(false);
+    const [isDraggingFromToolbox, setIsDraggingFromToolbox] = useState(false);
+    const [draggedItemType, setDraggedItemType] = useState(null);
+    const [isToolbarCollapsed, setIsToolbarCollapsed] = useState(false);
+    const [isToolbarFloating, setIsToolbarFloating] = useState(true);
+    const [isToolboxVisible, setIsToolboxVisible] = useState(true);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [itemToEdit, setItemToEdit] = useState(null);
+    const [isConnectionModalOpen, setIsConnectionModalOpen] = useState(false);
+    const [connectionToEdit, setConnectionToEdit] = useState(null);
+    const { svgWidth, svgHeight } = useMemo(() => {
+        if (!wfDiagram) {
+            return { svgWidth: 0, svgHeight: 0 };
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = 0;
+        let maxY = 0;
+        const connectionPadding = 50;
+        const itemPadding = 50;
+        wfDiagram.DiagramItems.forEach(item => {
+            minX = Math.min(minX, item.Left);
+            minY = Math.min(minY, item.Top);
+            maxX = Math.max(maxX, item.Left + item.Width);
+            maxY = Math.max(maxY, item.Top + item.Height + 50);
+        });
+        wfDiagram.Connections.forEach(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) {
+                minX = Math.min(minX, sourceItem.Left - connectionPadding, sinkItem.Left - connectionPadding);
+                minY = Math.min(minY, sourceItem.Top - connectionPadding, sinkItem.Top - connectionPadding);
+                maxX = Math.max(maxX, sourceItem.Left + sourceItem.Width + connectionPadding, sinkItem.Left + sinkItem.Width + connectionPadding);
+                maxY = Math.max(maxY, sourceItem.Top + sourceItem.Height + connectionPadding, sinkItem.Top + sinkItem.Height + connectionPadding);
+            }
+        });
+        const finalMinX = minX - itemPadding;
+        const finalMinY = minY - itemPadding;
+        const finalMaxX = maxX + itemPadding;
+        const finalMaxY = maxY + itemPadding;
+        const totalWidth = finalMaxX - finalMinX;
+        const totalHeight = finalMaxY - finalMinY;
+        return { svgWidth: Math.max(0, totalWidth * zoomLevel), svgHeight: Math.max(0, totalHeight * zoomLevel) };
+    }, [wfDiagram, zoomLevel]);
+    const updateDiagram = useCallback((newDiagram, validate = true) => {
+        if (isReadOnly)
+            return;
+        try {
+            if (validate) {
+                validateDiagram(newDiagram);
+            }
+            if (!isUndoingRedoing.current) {
+                const newHistory = wfDiagramHistory.slice(0, historyIndex + 1);
+                setWfDiagramHistory([...newHistory, newDiagram]);
+                setHistoryIndex(newHistory.length);
+            }
+            setWfDiagram(newDiagram);
+            (async () => {
+                try {
+                    // await è necessario per attendere il risultato stringa
+                    const newXml = await serializeWfDiagramToXml(newDiagram);
+                    notifiedXmlRef.current = newXml;
+                    // Chiama il callback per notificare TMWFEditor
+                    // L'invio dell'XML al genitore avviene solo a serializzazione completata.
+                    onDiagramChange?.(newXml);
+                }
+                catch (e) {
+                    console.error("Errore durante la serializzazione del diagramma:", e);
+                    // Puoi gestire l'errore di serializzazione qui, ad esempio mostrando una notifica
+                    // TMExceptionBoxManager.show({ exception: new Error("Errore serializzazione WF") });
+                }
+            })();
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    }, [wfDiagramHistory, historyIndex, isUndoingRedoing, setWfDiagramHistory, setHistoryIndex, setWfDiagram, isReadOnly]);
+    const handleUndo = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (historyIndex > 0) {
+            isUndoingRedoing.current = true;
+            const newIndex = historyIndex - 1;
+            const newDiagram = wfDiagramHistory[newIndex];
+            setHistoryIndex(newIndex);
+            setWfDiagram(newDiagram);
+            serializeWfDiagramToXml(newDiagram).then(newXml => {
+                notifiedXmlRef.current = newXml;
+                onDiagramChange?.(newXml);
+            });
+        }
+    }, [historyIndex, wfDiagramHistory, isReadOnly, onDiagramChange]);
+    const handleRedo = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (historyIndex < wfDiagramHistory.length - 1) {
+            isUndoingRedoing.current = true;
+            const newIndex = historyIndex + 1;
+            const newDiagram = wfDiagramHistory[newIndex];
+            setHistoryIndex(newIndex);
+            setWfDiagram(newDiagram);
+            serializeWfDiagramToXml(newDiagram).then(newXml => {
+                notifiedXmlRef.current = newXml;
+                onDiagramChange?.(newXml);
+            });
+        }
+    }, [historyIndex, wfDiagramHistory, isReadOnly, onDiagramChange]);
+    const handleDelete = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (!wfDiagram || (selectedItems.size === 0 && selectedConnections.size === 0)) {
+            return;
+        }
+        // 1. Filtra i nodi "Start" e "End" dal set di elementi selezionati
+        const nonDeletableItems = wfDiagram.DiagramItems.filter(item => item.Type === DiagramItemTypes.Start || item.Type === DiagramItemTypes.End);
+        const deletableSelectedItems = new Set([...selectedItems].filter(id => !nonDeletableItems.some(item => item.ID === id)));
+        let newDiagramItems = wfDiagram.DiagramItems;
+        let newConnections = wfDiagram.Connections;
+        if (deletableSelectedItems.size > 0) {
+            // 2. Filtra gli elementi del diagramma usando il set filtrato
+            newDiagramItems = wfDiagram.DiagramItems.filter(item => !deletableSelectedItems.has(item.ID));
+            // 3. Filtra le connessioni usando il set filtrato
+            newConnections = newConnections.filter(conn => !deletableSelectedItems.has(conn.Source.ParentDiagramItem.ID) &&
+                !deletableSelectedItems.has(conn.Sink.ParentDiagramItem.ID));
+        }
+        if (selectedConnections.size > 0) {
+            newConnections = newConnections.filter(conn => !selectedConnections.has(conn.ID));
+        }
+        const newWfDiagram = {
+            ...wfDiagram,
+            DiagramItems: newDiagramItems,
+            Connections: newConnections,
+        };
+        // Assicura che i nodi non cancellabili restino selezionati per coerenza UI
+        setSelectedItems(new Set([...deletableSelectedItems, ...[...selectedItems].filter(id => nonDeletableItems.some(item => item.ID === id))]));
+        setSelectedConnections(new Set());
+        updateDiagram(newWfDiagram, false);
+    }, [wfDiagram, selectedItems, selectedConnections, setWfDiagram, setSelectedItems, setSelectedConnections, updateDiagram, isReadOnly]);
+    const handleCopy = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (!wfDiagram || selectedItems.size === 0) {
+            return;
+        }
+        const itemsToCopy = wfDiagram.DiagramItems.filter(item => selectedItems.has(item.ID));
+        const connectionsToCopy = wfDiagram.Connections.filter(connection => selectedItems.has(connection.Source.ParentDiagramItem.ID) &&
+            selectedItems.has(connection.Sink.ParentDiagramItem.ID));
+        setCopiedItems(itemsToCopy);
+        setCopiedConnections(connectionsToCopy);
+        setIsCutOperation(false);
+    }, [wfDiagram, selectedItems, isReadOnly]);
+    const handleCut = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (!wfDiagram || selectedItems.size === 0) {
+            return;
+        }
+        const itemsToCut = wfDiagram.DiagramItems.filter(item => selectedItems.has(item.ID));
+        const connectionsToCut = wfDiagram.Connections.filter(connection => selectedItems.has(connection.Source.ParentDiagramItem.ID) &&
+            selectedItems.has(connection.Sink.ParentDiagramItem.ID));
+        setCopiedItems(itemsToCut);
+        setCopiedConnections(connectionsToCut);
+        setIsCutOperation(true);
+        let newDiagramItems = wfDiagram.DiagramItems.filter(item => !selectedItems.has(item.ID));
+        let newConnections = wfDiagram.Connections.filter(conn => !selectedItems.has(conn.Source.ParentDiagramItem.ID) &&
+            !selectedItems.has(conn.Sink.ParentDiagramItem.ID));
+        const newWfDiagram = {
+            ...wfDiagram,
+            DiagramItems: newDiagramItems,
+            Connections: newConnections,
+        };
+        setSelectedItems(new Set());
+        setSelectedConnections(new Set());
+        updateDiagram(newWfDiagram, false);
+    }, [wfDiagram, selectedItems, setSelectedItems, setSelectedConnections, updateDiagram, isReadOnly]);
+    const handlePaste = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (!wfDiagram || (copiedItems.length === 0 && copiedConnections.length === 0)) {
+            return;
+        }
+        const offset = 20;
+        const newDiagramItems = [];
+        const oldIdToNewIdMap = new Map();
+        copiedItems.forEach(item => {
+            const newId = generateUUID();
+            oldIdToNewIdMap.set(item.ID, newId);
+            newDiagramItems.push({
+                ...item,
+                ID: newId,
+                Left: item.Left + offset,
+                Top: item.Top + offset,
+            });
+        });
+        const newConnections = [];
+        copiedConnections.forEach(connection => {
+            const newSourceItemId = oldIdToNewIdMap.get(connection.Source.ParentDiagramItem.ID);
+            const newSinkItemId = oldIdToNewIdMap.get(connection.Sink.ParentDiagramItem.ID);
+            if (newSourceItemId && newSinkItemId) {
+                newConnections.push({
+                    ...connection,
+                    ID: generateUUID(),
+                    Source: { ParentDiagramItem: { ID: newSourceItemId }, ConnectorName: connection.Source.ConnectorName },
+                    Sink: { ParentDiagramItem: { ID: newSinkItemId }, ConnectorName: connection.Sink.ConnectorName },
+                    PathGeometry: "",
+                });
+            }
+        });
+        const combinedDiagramItems = [...wfDiagram.DiagramItems, ...newDiagramItems];
+        const combinedConnections = [...wfDiagram.Connections, ...newConnections];
+        if (isCutOperation) {
+            setCopiedItems([]);
+            setCopiedConnections([]);
+            setIsCutOperation(false);
+        }
+        const newlySelectedItems = new Set(newDiagramItems.map(item => item.ID));
+        setSelectedItems(newlySelectedItems);
+        setSelectedConnections(new Set());
+        const newWfDiagram = {
+            ...wfDiagram,
+            DiagramItems: combinedDiagramItems,
+            Connections: combinedConnections,
+        };
+        updateDiagram(newWfDiagram, false);
+    }, [wfDiagram, copiedItems, copiedConnections, isCutOperation, updateDiagram, setSelectedItems, setSelectedConnections, isReadOnly]);
+    const handleNew = useCallback(() => {
+        if (isReadOnly)
+            return;
+        const newWfDiagram = getNewWfDiagram(wfDiagram?.Info || null);
+        updateDiagram(newWfDiagram);
+        setWfDiagramHistory([newWfDiagram]);
+        setHistoryIndex(0);
+        setSelectedItems(new Set());
+        setSelectedConnections(new Set());
+        setCopiedItems([]);
+        setCopiedConnections([]);
+        setIsCutOperation(false);
+    }, [wfDiagram, isReadOnly]);
+    const handleToggleToolbarMode = () => {
+        setIsToolbarFloating(prev => !prev);
+    };
+    const handleToggleToolboxVisibility = () => {
+        setIsToolboxVisible(prev => !prev);
+    };
+    const handleDoubleClickItem = useCallback((itemId) => {
+        if (isReadOnly)
+            return;
+        const itemFound = wfDiagram?.DiagramItems.find(item => item.ID === itemId);
+        if (itemFound) {
+            setItemToEdit(itemFound);
+            setIsModalOpen(true);
+        }
+    }, [wfDiagram, isReadOnly]);
+    const handleCloseModal = useCallback(() => {
+        if (isReadOnly)
+            return;
+        setIsModalOpen(prevIsModalOpen => {
+            return false;
+        });
+    }, [isReadOnly]);
+    const handleDoubleClickConnection = useCallback((connectionId) => {
+        if (isReadOnly)
+            return;
+        const connFound = wfDiagram?.Connections.find(c => c.ID === connectionId);
+        if (connFound) {
+            const sinkItem = wfDiagram?.DiagramItems.find(item => item.ID === connFound.Sink.ParentDiagramItem.ID);
+            if (sinkItem) {
+                const canOpen = [
+                    DiagramItemTypes.Approval,
+                    DiagramItemTypes.DataEntry,
+                    DiagramItemTypes.ExecTask
+                ].includes(sinkItem.Type);
+                if (canOpen) {
+                    setConnectionToEdit(connFound);
+                    setIsConnectionModalOpen(true);
+                }
+            }
+        }
+    }, [wfDiagram, isReadOnly]);
+    const handleKeyDown = useCallback((event) => {
+        if (isReadOnly)
+            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;
+            }
+            event.preventDefault();
+        }
+        if (event.ctrlKey) {
+            if (event.key === 'z') {
+                handleUndo();
+                return;
+            }
+            else if (event.key === 'y') {
+                handleRedo();
+                return;
+            }
+            else if (event.key === 'c') {
+                handleCopy();
+                return;
+            }
+            else if (event.key === 'x') {
+                handleCut();
+                return;
+            }
+            else if (event.key === 'v') {
+                handlePaste();
+                return;
+            }
+        }
+        if (!wfDiagram) {
+            return;
+        }
+        if (selectedItems.size > 0) {
+            let deltaX = 0;
+            let deltaY = 0;
+            const step = event.shiftKey ? 1 : (event.ctrlKey ? 50 : 10);
+            switch (event.key) {
+                case 'ArrowUp':
+                    deltaY = -step;
+                    break;
+                case 'ArrowDown':
+                    deltaY = step;
+                    break;
+                case 'ArrowLeft':
+                    deltaX = -step;
+                    break;
+                case 'ArrowRight':
+                    deltaX = step;
+                    break;
+            }
+            if (deltaX !== 0 || deltaY !== 0) {
+                const newDiagramItems = wfDiagram.DiagramItems.map(item => {
+                    if (selectedItems.has(item.ID)) {
+                        return {
+                            ...item,
+                            Left: item.Left + deltaX,
+                            Top: item.Top + deltaY,
+                        };
+                    }
+                    return item;
+                });
+                const newWfDiagram = {
+                    ...wfDiagram,
+                    DiagramItems: newDiagramItems,
+                };
+                updateDiagram(newWfDiagram, false);
+                return;
+            }
+        }
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            handleDelete();
+            return;
+        }
+    }, [wfDiagram, selectedItems, selectedConnections, handleUndo, handleRedo, handleDelete, updateDiagram, handleCopy, handleCut, handlePaste, isReadOnly]);
+    const handleExportDiagram = useCallback(async () => {
+        if (!wfDiagram) {
+            // Visualizza un errore se il diagramma non è stato caricato o è vuoto
+            TMExceptionBoxManager.show({ exception: new Error('Diagram not loaded.') });
+            return;
+        }
+        try {
+            // 1. Serializza il diagramma in XML
+            const xmlString = await serializeWfDiagramToXml(wfDiagram);
+            // 2. Determina il nome del file (usa l'ID o un UUID se non disponibile)
+            const filename = `WorkflowDiagram_${wfDiagram.Info?.ID || generateUUID()}.xml`;
+            // 3. Avvia il download (la cartella è scelta dal browser)
+            downloadFile(xmlString, filename, 'application/xml');
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    }, [wfDiagram]);
+    const fileInputRef = useRef(null);
+    const handleImportDiagramClick = useCallback(() => {
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    }, []);
+    const handleFileChange = useCallback((event) => {
+        const file = event.target.files?.[0];
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const xmlContent = e.target?.result;
+                const newWfDiagram = parseWfDiagramXml(xmlContent);
+                updateDiagram(newWfDiagram, false);
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+            catch (error) {
+                const errorMessage = 'Error importing diagram. Invalid XML format.';
+                TMExceptionBoxManager.show({ exception: new Error(errorMessage + `\n${error.message}`) });
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+        };
+        reader.readAsText(file, 'UTF-8');
+    }, [updateDiagram]);
+    const calculateConnectionPath = useCallback((connection, sourceItem, sinkItem) => {
+        const sourcePoint = getConnectionPoint(sourceItem, connection.Source.ConnectorName);
+        const sinkPoint = getConnectionPoint(sinkItem, connection.Sink.ConnectorName);
+        const sourceRect = { x: sourceItem.Left, y: sourceItem.Top, width: sourceItem.Width, height: sourceItem.Height };
+        const sinkRect = { x: sinkItem.Left, y: sinkItem.Top, width: sinkItem.Width, height: sinkItem.Height };
+        const sourceConnectorName = connection.Source.ConnectorName.toLowerCase();
+        const sinkConnectorName = connection.Sink.ConnectorName.toLowerCase();
+        const isNonLinearConnection = isConnectionNonLinear(sourceRect, sinkRect, sourceConnectorName, sinkConnectorName);
+        let pathPoints = [];
+        let sinkArrowAngle = 0;
+        const offsetStub = 15;
+        const bypassBuffer = 50;
+        const getDirection = (connectorName) => {
+            if (connectorName === 'Left' || connectorName === 'Right')
+                return 'H';
+            return 'V';
+        };
+        const sourceDir = getDirection(connection.Source.ConnectorName);
+        const sinkDir = getDirection(connection.Sink.ConnectorName);
+        let startStubPoint;
+        switch (connection.Source.ConnectorName) {
+            case 'Right':
+                startStubPoint = { x: sourcePoint.x + offsetStub, y: sourcePoint.y };
+                break;
+            case 'Left':
+                startStubPoint = { x: sourcePoint.x - offsetStub, y: sourcePoint.y };
+                break;
+            case 'Bottom':
+                startStubPoint = { x: sourcePoint.x, y: sourcePoint.y + offsetStub };
+                break;
+            case 'Top':
+                startStubPoint = { x: sourcePoint.x, y: sourcePoint.y - offsetStub };
+                break;
+            default: startStubPoint = sourcePoint;
+        }
+        pathPoints.push(sourcePoint);
+        pathPoints.push(startStubPoint);
+        let endStubPoint;
+        switch (connection.Sink.ConnectorName) {
+            case 'Right':
+                endStubPoint = { x: sinkPoint.x + offsetStub, y: sinkPoint.y };
+                break;
+            case 'Left':
+                endStubPoint = { x: sinkPoint.x - offsetStub, y: sinkPoint.y };
+                break;
+            case 'Bottom':
+                endStubPoint = { x: sinkPoint.x, y: sinkPoint.y + offsetStub };
+                break;
+            case 'Top':
+                endStubPoint = { x: sinkPoint.x, y: sinkPoint.y - offsetStub };
+                break;
+            default: endStubPoint = sinkPoint;
+        }
+        let currentPathPoint = startStubPoint;
+        const doesSegmentIntersectRect = (p1, p2, rect) => {
+            const bufferedRect = {
+                x: rect.x - 0.5, y: rect.y - 0.5,
+                width: rect.width + 1, height: rect.height + 1
+            };
+            if ((p1.x > bufferedRect.x && p1.x < bufferedRect.x + bufferedRect.width && p1.y > bufferedRect.y && p1.y < bufferedRect.y + bufferedRect.height) ||
+                (p2.x > bufferedRect.x && p2.x < bufferedRect.x + bufferedRect.width && p2.y > bufferedRect.y && p2.y < bufferedRect.y + bufferedRect.height)) {
+                return true;
+            }
+            if (p1.y === p2.y) {
+                const segMinX = Math.min(p1.x, p2.x);
+                const segMaxX = Math.max(p1.x, p2.x);
+                if (p1.y >= bufferedRect.y && p1.y <= bufferedRect.y + bufferedRect.height) {
+                    if (segMaxX > bufferedRect.x && segMinX < bufferedRect.x + bufferedRect.width) {
+                        return true;
+                    }
+                }
+            }
+            else if (p1.x === p2.x) {
+                const segMinY = Math.min(p1.y, p2.y);
+                const segMaxY = Math.max(p1.y, p2.y);
+                if (p1.x >= bufferedRect.x && p1.x <= bufferedRect.x + bufferedRect.height) {
+                    if (segMaxY > bufferedRect.y && segMinY < bufferedRect.y + bufferedRect.height) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        const canTakeDirectLPath = () => {
+            const itemsToAvoid = [sourceRect, sinkRect];
+            const p_hv_mid = { x: endStubPoint.x, y: currentPathPoint.y };
+            const pathHV = [currentPathPoint, p_hv_mid, endStubPoint];
+            const crossesHV = pathHV.some((p, i) => i < pathHV.length - 1 && itemsToAvoid.some(rect => doesSegmentIntersectRect(p, pathHV[i + 1], rect)));
+            const p_vh_mid = { x: currentPathPoint.x, y: endStubPoint.y };
+            const pathVH = [currentPathPoint, p_vh_mid, endStubPoint];
+            const crossesVH = pathVH.some((p, i) => i < pathVH.length - 1 && itemsToAvoid.some(rect => doesSegmentIntersectRect(p, pathVH[i + 1], rect)));
+            if (sourceDir === 'H' && !crossesHV)
+                return p_hv_mid;
+            if (sourceDir === 'V' && !crossesVH)
+                return p_vh_mid;
+            if (!crossesHV)
+                return p_hv_mid;
+            if (!crossesVH)
+                return p_vh_mid;
+            return null;
+        };
+        const proximityTolerance = 20; // Regola questo valore in base alle tue esigenze (in pixel)
+        // Crea i rettangoli espansi
+        const expandedSourceRect = {
+            x: sourceRect.x - proximityTolerance,
+            y: sourceRect.y - proximityTolerance,
+            width: sourceRect.width + (2 * proximityTolerance),
+            height: sourceRect.height + (2 * proximityTolerance),
+        };
+        const expandedSinkRect = {
+            x: sinkRect.x - proximityTolerance,
+            y: sinkRect.y - proximityTolerance,
+            width: sinkRect.width + (2 * proximityTolerance),
+            height: sinkRect.height + (2 * proximityTolerance),
+        };
+        // Ora, controlla se i rettangoli espansi si sovrappongono.
+        // Questa è una delle implementazioni più comuni e robuste per determinare la "vicinanza" tra due rettangoli.
+        const isNodesVeryClose = expandedSourceRect.x < (expandedSinkRect.x + expandedSinkRect.width) &&
+            (expandedSourceRect.x + expandedSourceRect.width) > expandedSinkRect.x &&
+            expandedSourceRect.y < (expandedSinkRect.y + expandedSinkRect.height) &&
+            (expandedSourceRect.y + expandedSourceRect.height) > expandedSinkRect.y;
+        if (isNodesVeryClose && !isNonLinearConnection) {
+            // Force an L-path. Decide between H-V and V-H based on which is more direct/less "bent"
+            let p_mid_forced;
+            if (sourceDir === 'H' || (sourceDir === 'V' && Math.abs(sourcePoint.x - sinkPoint.x) > Math.abs(sourcePoint.y - sinkPoint.y))) {
+                p_mid_forced = { x: endStubPoint.x, y: currentPathPoint.y };
+            }
+            else {
+                p_mid_forced = { x: currentPathPoint.x, y: endStubPoint.y };
+            }
+            pathPoints.push(p_mid_forced);
+            currentPathPoint = p_mid_forced;
+        }
+        else {
+            // Original logic for complex routing if not "very close"
+            const directLPathMidPoint = canTakeDirectLPath();
+            if (directLPathMidPoint) {
+                pathPoints.push(directLPathMidPoint);
+                currentPathPoint = directLPathMidPoint;
+            }
+            else {
+                const minOverallX = Math.min(sourceRect.x, sinkRect.x);
+                const maxOverallX = Math.max(sourceRect.x + sourceRect.width, sinkRect.x + sinkRect.width);
+                const minOverallY = Math.min(sourceRect.y, sinkRect.y);
+                const maxOverallY = Math.max(sourceRect.y + sourceRect.height, sinkRect.y + sinkRect.height);
+                let p2;
+                let p3;
+                let preferredBypassAxis;
+                const avgMidX = (sourceRect.x + sourceRect.width / 2 + sinkRect.x + sinkRect.width / 2) / 2;
+                const avgMidY = (sourceRect.y + sourceRect.height / 2 + sinkRect.y + sinkRect.height / 2) / 2;
+                if (sourceDir === 'H') {
+                    preferredBypassAxis = 'Y';
+                }
+                else {
+                    preferredBypassAxis = 'X';
+                }
+                if (preferredBypassAxis === 'Y') {
+                    let bypassY_coord;
+                    if (currentPathPoint.y < avgMidY) {
+                        bypassY_coord = minOverallY - bypassBuffer;
+                    }
+                    else {
+                        bypassY_coord = maxOverallY + bypassBuffer;
+                    }
+                    p2 = { x: currentPathPoint.x, y: bypassY_coord };
+                    p3 = { x: endStubPoint.x, y: bypassY_coord };
+                    pathPoints.push(p2);
+                    pathPoints.push(p3);
+                    currentPathPoint = p3;
+                }
+                else {
+                    let bypassX_coord;
+                    if (currentPathPoint.x < avgMidX) {
+                        bypassX_coord = minOverallX - bypassBuffer;
+                    }
+                    else {
+                        bypassX_coord = maxOverallX + bypassBuffer;
+                    }
+                    p2 = { x: bypassX_coord, y: currentPathPoint.y };
+                    p3 = { x: bypassX_coord, y: endStubPoint.y };
+                    pathPoints.push(p2);
+                    pathPoints.push(p3);
+                    currentPathPoint = p3;
+                }
+            }
+        }
+        pathPoints.push(endStubPoint);
+        pathPoints.push(sinkPoint);
+        const prevPointForArrow = pathPoints.length > 1 ? pathPoints[pathPoints.length - 2] : startStubPoint;
+        sinkArrowAngle = calculateArrowAngle(prevPointForArrow, sinkPoint);
+        let pathData = `M${pathPoints[0].x},${pathPoints[0].y}`;
+        for (let i = 1; i < pathPoints.length; i++) {
+            pathData += ` L${pathPoints[i].x},${pathPoints[i].y}`;
+        }
+        return { path: pathData, sinkArrowAngle: sinkArrowAngle };
+    }, []);
+    const calculatedConnections = useMemo(() => {
+        if (!wfDiagram)
+            return [];
+        return wfDiagram.Connections.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) {
+                console.warn(`Cannot find source or sink item for connection ${connection.ID}`);
+                return { ...connection, PathGeometry: "" };
+            }
+            const { path, sinkArrowAngle } = calculateConnectionPath(connection, sourceItem, sinkItem);
+            return {
+                ...connection,
+                PathGeometry: path,
+                sinkArrowAngle: sinkArrowAngle,
+            };
+        });
+    }, [wfDiagram, calculateConnectionPath]);
+    const tempConnectionPathData = useMemo(() => {
+        if (isDrawingConnection && tempConnectionSource && tempConnectionEnd && wfDiagram) {
+            const sourceItem = tempConnectionSource.item;
+            const sourcePoint = getConnectionPoint(sourceItem, tempConnectionSource.connectorName);
+            return `M ${sourcePoint.x} ${sourcePoint.y} L ${tempConnectionEnd.x} ${tempConnectionEnd.y}`;
+        }
+        else if (isDraggingExistingConnectionEndpoint && draggingConnectionFixedPoint && tempConnectionEnd) {
+            // Disegna la linea temporanea dal punto fisso all'attuale posizione del mouse
+            return `M ${draggingConnectionFixedPoint.x} ${draggingConnectionFixedPoint.y} L ${tempConnectionEnd.x} ${tempConnectionEnd.y}`;
+        }
+        return "";
+    }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, wfDiagram, isDraggingExistingConnectionEndpoint, draggingConnectionFixedPoint]);
+    const handleRestore = useCallback(() => {
+        if (isReadOnly)
+            return;
+        if (initialDiagramRef.current) {
+            setWfDiagram(initialDiagramRef.current);
+            setWfDiagramHistory([initialDiagramRef.current]);
+            setHistoryIndex(0);
+        }
+    }, [isReadOnly]);
+    const autoAdjustDiagram = (diagram) => {
+        if (!diagram)
+            return diagram;
+        let newDiagramItems = diagram.DiagramItems.map(item => ({ ...item }));
+        const alignmentThreshold = 25;
+        const spacingBuffer = 10;
+        let changed = true;
+        let iteration = 0;
+        const maxIterations = 100;
+        while (changed && iteration < maxIterations) {
+            changed = false;
+            const itemsForIteration = newDiagramItems.map(item => ({ ...item }));
+            for (let i = 0; i < itemsForIteration.length; i++) {
+                const item1 = itemsForIteration[i];
+                for (let j = 0; j < itemsForIteration.length; j++) {
+                    if (i === j)
+                        continue;
+                    const item2 = itemsForIteration[j];
+                    if (item1.Left < item2.Left + item2.Width &&
+                        item1.Left + item1.Width > item2.Left &&
+                        item1.Top < item2.Top + item2.Height &&
+                        item1.Top + item1.Height > item2.Top) {
+                        const overlapX = Math.min(item1.Left + item1.Width, item2.Left + item2.Width) - Math.max(item1.Left, item2.Left);
+                        const overlapY = Math.min(item1.Top + item1.Height, item2.Top + item2.Height) - Math.max(item1.Top, item2.Top);
+                        if (overlapX < overlapY) {
+                            if (item1.Left < item2.Left) {
+                                item2.Left = item1.Left + item1.Width + spacingBuffer;
+                            }
+                            else {
+                                item2.Left = item1.Left - item2.Width - spacingBuffer;
+                            }
+                        }
+                        else {
+                            if (item1.Top < item2.Top) {
+                                item2.Top = item1.Top + item1.Height + spacingBuffer;
+                            }
+                            else {
+                                item2.Top = item1.Top - item2.Height - spacingBuffer;
+                            }
+                        }
+                        changed = true;
+                    }
+                }
+                const relevantConnections = diagram.Connections.filter(conn => conn.Source.ParentDiagramItem.ID === item1.ID || conn.Sink.ParentDiagramItem.ID === item1.ID);
+                for (const connection of relevantConnections) {
+                    const sourceItem = itemsForIteration.find(it => it.ID === connection.Source.ParentDiagramItem.ID);
+                    const sinkItem = itemsForIteration.find(it => it.ID === connection.Sink.ParentDiagramItem.ID);
+                    if (!sourceItem || !sinkItem)
+                        continue;
+                    const sourceCenterX = sourceItem.Left + sourceItem.Width / 2;
+                    const sourceCenterY = sourceItem.Top + sourceItem.Height / 2;
+                    const sinkCenterX = sinkItem.Left + sinkItem.Width / 2;
+                    const sinkCenterY = sinkItem.Top + sinkItem.Height / 2;
+                    if (Math.abs(sourceCenterY - sinkCenterY) < alignmentThreshold) {
+                        if (sourceItem.ID === item1.ID && Math.abs(sourceCenterY - sinkCenterY) > 0) {
+                            item1.Top = sinkCenterY - item1.Height / 2;
+                            changed = true;
+                        }
+                        else if (sinkItem.ID === item1.ID && Math.abs(sourceCenterY - sinkCenterY) > 0) {
+                            item1.Top = sourceCenterY - item1.Height / 2;
+                            changed = true;
+                        }
+                    }
+                    if (Math.abs(sourceCenterX - sinkCenterX) < alignmentThreshold) {
+                        if (sourceItem.ID === item1.ID && Math.abs(sourceCenterX - sinkCenterX) > 0) {
+                            item1.Left = sinkCenterX - item1.Width / 2;
+                            changed = true;
+                        }
+                        else if (sinkItem.ID === item1.ID && Math.abs(sourceCenterX - sinkCenterX) > 0) {
+                            item1.Left = sourceCenterX - item1.Width / 2;
+                            changed = true;
+                        }
+                    }
+                }
+            }
+            newDiagramItems = itemsForIteration;
+            iteration++;
+        }
+        let minLeft = Infinity;
+        let minTop = Infinity;
+        const minimumPadding = 50;
+        newDiagramItems.forEach(item => {
+            minLeft = Math.min(minLeft, item.Left);
+            minTop = Math.min(minTop, item.Top);
+        });
+        const offsetX = (minLeft < minimumPadding) ? minimumPadding - minLeft : 0;
+        const offsetY = (minTop < minimumPadding) ? minimumPadding - minTop : 0;
+        if (offsetX > 0 || offsetY > 0) {
+            newDiagramItems = newDiagramItems.map(item => ({
+                ...item,
+                Left: item.Left + offsetX,
+                Top: item.Top + offsetY,
+            }));
+        }
+        return { ...diagram, DiagramItems: newDiagramItems };
+    };
+    const getAdjustedAndRecalculatedDiagram = useCallback((diagramToProcess) => {
+        // Aggiusta le posizioni degli elementi
+        const adjustedItemsDiagram = autoAdjustDiagram(diagramToProcess);
+        // 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);
+            const sinkItem = diagramItemsMap.get(conn.Sink.ParentDiagramItem.ID);
+            if (sourceItem && sinkItem) {
+                const { path, sinkArrowAngle } = calculateConnectionPath(conn, sourceItem, sinkItem);
+                const finalSinkArrowSymbol = conn.SinkArrowSymbol === ArrowSymbol.None ? ArrowSymbol.Arrow : conn.SinkArrowSymbol;
+                return { ...conn, PathGeometry: path, sinkArrowAngle: sinkArrowAngle, SinkArrowSymbol: finalSinkArrowSymbol };
+            }
+            return conn;
+        });
+        // Ritorna l'oggetto diagramma finale e completo
+        return { ...adjustedItemsDiagram, Connections: adjustedConnections };
+    }, [calculateConnectionPath]);
+    const handleAutoAdjust = useCallback(() => {
+        if (isReadOnly || !wfDiagram)
+            return;
+        const finalDiagram = getAdjustedAndRecalculatedDiagram(wfDiagram);
+        updateDiagram(finalDiagram, false);
+    }, [wfDiagram, isReadOnly, updateDiagram, getAdjustedAndRecalculatedDiagram]);
+    const handleMouseDown = useCallback((event) => {
+        if (isReadOnly)
+            return;
+        if (event.target === svgRef.current) {
+            setSelectedItems(new Set());
+            setSelectedConnections(new Set());
+            setIsDrawingSelectionRect(true);
+            setSelectionRectStart({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
+            setSelectionRectEnd(null);
+        }
+    }, [isReadOnly]);
+    const handleMouseMove = useCallback((event) => {
+        if (isReadOnly)
+            return;
+        // Questa parte gestisce la transizione da "clic potenziale" a "trascinamento".
+        // Viene eseguita solo se un mousedown è avvenuto ma il drag non è ancora iniziato.
+        if (mouseDownPos && !isDrawingConnection && !isDrawingSelectionRect && !isDraggingFromToolbox && !isDraggingExistingConnectionEndpoint) {
+            const deltaX = Math.abs(event.nativeEvent.offsetX - mouseDownPos.x);
+            const deltaY = Math.abs(event.nativeEvent.offsetY - mouseDownPos.y);
+            const threshold = 5; // Soglia in pixel.
+            if (deltaX > threshold || deltaY > threshold) {
+                // Se il mouse si è spostato oltre la soglia, inizia il trascinamento del connettore.
+                // L'onMouseDown del connettore ha già impostato tempConnectionSource.
+                if (tempConnectionSource) {
+                    setIsDrawingConnection(true);
+                    const initialPoint = getConnectionPoint(tempConnectionSource.item, tempConnectionSource.connectorName);
+                    setTempConnectionEnd(initialPoint);
+                }
+            }
+        }
+        // Qui inizia la logica principale, che si basa sugli stati già attivi.
+        // L'ordine è importante: il primo `if` che è `true` viene eseguito.
+        if (isDrawingConnection && tempConnectionSource) {
+            // Logica per aggiornare il punto finale della connessione in fase di creazione.
+            setTempConnectionEnd({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
+        }
+        else if (isDraggingExistingConnectionEndpoint && draggingConnectionFixedPoint) {
+            // Logica per aggiornare il punto finale di un endpoint esistente.
+            setTempConnectionEnd({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
+        }
+        else if (isDrawingSelectionRect && selectionRectStart) {
+            // Logica per disegnare il rettangolo di selezione.
+            const currentX = event.nativeEvent.offsetX;
+            const currentY = event.nativeEvent.offsetY;
+            setSelectionRectEnd({ x: currentX, y: currentY });
+            const rect = {
+                x: Math.min(selectionRectStart.x, currentX),
+                y: Math.min(selectionRectStart.y, currentY),
+                width: Math.abs(selectionRectStart.x - currentX),
+                height: Math.abs(selectionRectStart.y - currentY)
+            };
+            const newSelectedItems = new Set();
+            const newSelectedConnections = new Set();
+            if (wfDiagram) {
+                wfDiagram.DiagramItems.forEach(item => {
+                    const itemRect = {
+                        x: item.Left * zoomLevel + translateX,
+                        y: item.Top * zoomLevel + translateY,
+                        width: item.Width * zoomLevel,
+                        height: (item.Height + 50) * zoomLevel
+                    };
+                    if (rect.x < itemRect.x + itemRect.width &&
+                        rect.x + rect.width > itemRect.x &&
+                        rect.y < itemRect.y + itemRect.height &&
+                        rect.y + rect.height > itemRect.y) {
+                        newSelectedItems.add(item.ID);
+                    }
+                });
+                if (calculatedConnections) {
+                    calculatedConnections.forEach(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) {
+                            const sourcePoint = getConnectionPoint(sourceItem, connection.Source.ConnectorName);
+                            const sinkPoint = getConnectionPoint(sinkItem, connection.Sink.ConnectorName);
+                            // Controlla se almeno uno dei due punti estremi è all'interno del rettangolo
+                            if ((sourcePoint.x >= rect.x && sourcePoint.x <= rect.x + rect.width && sourcePoint.y >= rect.y && sourcePoint.y <= rect.y + rect.height) ||
+                                (sinkPoint.x >= rect.x && sinkPoint.x <= rect.x + rect.width && sinkPoint.y >= rect.y && sinkPoint.y <= rect.y + rect.height)) {
+                                newSelectedConnections.add(connection.ID);
+                            }
+                        }
+                    });
+                }
+            }
+            setSelectedItems(newSelectedItems);
+            setSelectedConnections(newSelectedConnections);
+        }
+        else if (isDraggingFromToolbox && draggedItemType !== null) {
+            // Logica per il trascinamento di un elemento dalla toolbox.
+            setTempConnectionEnd({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
+        }
+    }, [isDrawingConnection, tempConnectionSource, isDrawingSelectionRect, selectionRectStart, wfDiagram, zoomLevel, translateX, translateY, isDraggingFromToolbox, draggedItemType, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionFixedPoint, mouseDownPos]);
+    const handleMouseUp = useCallback((event) => {
+        if (isReadOnly)
+            return;
+        if (isDrawingConnection) {
+            // Logica per una nuova connessione, rimane invariata
+            setIsDrawingConnection(false);
+            setTempConnectionSource(null);
+            setTempConnectionEnd(null);
+        }
+        else if (isDraggingExistingConnectionEndpoint) {
+            // Se si stava trascinando un endpoint di connessione esistente e non è stato agganciato
+            // Reset degli stati di trascinamento e ripristino della selezione originale
+            setIsDraggingExistingConnectionEndpoint(false);
+            setDraggingConnectionId(null);
+            setDraggingEndpointType(null);
+            setDraggingConnectionFixedPoint(null);
+            setTempConnectionEnd(null); // Pulisci la linea temporanea
+            // La connessione originale verrà renderizzata di nuovo grazie a calculatedConnections
+        }
+        if (isDrawingSelectionRect) {
+            setIsDrawingSelectionRect(false);
+            setSelectionRectStart(null);
+            setSelectionRectEnd(null);
+        }
+        setIsDraggingFromToolbox(false);
+        setDraggedItemType(null);
+    }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, isDrawingSelectionRect, selectionRectStart, selectionRectEnd, wfDiagram, zoomLevel, translateX, translateY, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
+    const handleDiagramItemClick = useCallback((id, event) => {
+        if (isReadOnly)
+            return;
+        event.stopPropagation();
+        const isCtrlPressed = event.ctrlKey || event.metaKey;
+        setSelectedItems(prev => {
+            const newSelection = new Set(prev);
+            if (isCtrlPressed) {
+                if (newSelection.has(id)) {
+                    newSelection.delete(id);
+                }
+                else {
+                    newSelection.add(id);
+                }
+            }
+            else {
+                newSelection.clear();
+                newSelection.add(id);
+            }
+            return newSelection;
+        });
+        if (!isCtrlPressed)
+            setSelectedConnections(new Set());
+    }, [isReadOnly]);
+    const handleConnectionClick = useCallback((id, event) => {
+        if (isReadOnly)
+            return;
+        event.stopPropagation();
+        const isCtrlPressed = event.ctrlKey || event.metaKey;
+        setSelectedConnections(prev => {
+            const newSelection = new Set(prev);
+            if (isCtrlPressed) {
+                if (newSelection.has(id)) {
+                    newSelection.delete(id);
+                }
+                else {
+                    newSelection.add(id);
+                }
+            }
+            else {
+                newSelection.clear();
+                newSelection.add(id);
+            }
+            return newSelection;
+        });
+        if (!isCtrlPressed)
+            setSelectedItems(new Set());
+    }, [isReadOnly]);
+    const handleDrag = useCallback((id, newX, newY) => {
+        if (isReadOnly)
+            return;
+        setWfDiagram(prevDiagram => {
+            if (!prevDiagram)
+                return null;
+            return {
+                ...prevDiagram,
+                DiagramItems: prevDiagram.DiagramItems.map(item => item.ID === id ? { ...item, Left: newX, Top: newY } : item),
+            };
+        });
+    }, [isReadOnly]);
+    const handleDragEnd = useCallback((id, finalX, finalY) => {
+        if (isReadOnly)
+            return;
+        setWfDiagram(prevDiagram => {
+            if (!prevDiagram)
+                return null;
+            const updatedDiagram = {
+                ...prevDiagram,
+                DiagramItems: prevDiagram.DiagramItems.map(item => item.ID === id ? { ...item, Left: finalX, Top: finalY } : item),
+            };
+            updateDiagram(updatedDiagram);
+            return updatedDiagram;
+        });
+    }, [updateDiagram, isReadOnly]);
+    const handleConnectorMouseDown = useCallback((itemId, connectorName, event) => {
+        if (isReadOnly || !wfDiagram)
+            return;
+        event.stopPropagation();
+        // Salva la posizione iniziale del mouse.
+        setMouseDownPos({ x: event.clientX, y: event.clientY });
+        // Imposta il connettore di partenza per un potenziale drag.
+        setTempConnectionSource({ item: wfDiagram.DiagramItems.find(i => i.ID === itemId), connectorName });
+        // NON avviare il drag qui. Lo faremo in base al movimento del mouse.
+    }, [wfDiagram, isReadOnly]);
+    const handleConnectionEndpointMouseDown = useCallback((connectionId, endpointType, event) => {
+        if (isReadOnly)
+            return;
+        event.stopPropagation();
+        setIsDraggingExistingConnectionEndpoint(true);
+        setDraggingConnectionId(connectionId);
+        setDraggingEndpointType(endpointType);
+        // Trova la connessione e l'item all'altra estremità per impostare il punto fisso
+        const connection = wfDiagram?.Connections.find(conn => conn.ID === connectionId);
+        if (connection) {
+            let fixedItem;
+            let fixedConnectorName;
+            if (endpointType === 'source') {
+                // Se trascino la sorgente, il sink è fisso
+                fixedItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Sink.ParentDiagramItem.ID);
+                fixedConnectorName = connection.Sink.ConnectorName;
+            }
+            else {
+                // Se trascino il sink, la sorgente è fissa
+                fixedItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Source.ParentDiagramItem.ID);
+                fixedConnectorName = connection.Source.ConnectorName;
+            }
+            if (fixedItem) {
+                setDraggingConnectionFixedPoint(getConnectionPoint(fixedItem, fixedConnectorName));
+            }
+        }
+        setTempConnectionEnd({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
+    }, [wfDiagram, isReadOnly]);
+    const handleConnectorMouseUp = useCallback((targetItemId, targetConnectorName) => {
+        if (isReadOnly)
+            return;
+        // Se isDrawingConnection è false, significa che il mouseup è avvenuto
+        // prima che il drag fosse avviato (cioè, il mouse non si è mosso oltre la soglia).
+        // Questo è un "clic".
+        if (!isDrawingConnection && !isDraggingExistingConnectionEndpoint) {
+            // Il drag non è iniziato, pulisci solo lo stato di partenza.
+            setMouseDownPos(null);
+            setTempConnectionSource(null);
+            return;
+        }
+        if (isDrawingConnection && tempConnectionSource && wfDiagram) {
+            const sourceItem = tempConnectionSource.item;
+            let outputStatus = WorkItemStatus.New;
+            if (sourceItem.Type === DiagramItemTypes.Condition || sourceItem.Type === DiagramItemTypes.Approval) {
+                const existingConnectionsFromSource = wfDiagram.Connections.filter(conn => conn.Source.ParentDiagramItem.ID === sourceItem.ID);
+                if (existingConnectionsFromSource.length === 0) {
+                    outputStatus = WorkItemStatus.Completed;
+                }
+                else if (existingConnectionsFromSource.length === 1) {
+                    outputStatus = WorkItemStatus.Rejected;
+                }
+            }
+            const newConnection = {
+                ID: generateUUID(),
+                Source: { ParentDiagramItem: { ID: tempConnectionSource.item.ID }, ConnectorName: tempConnectionSource.connectorName },
+                Sink: { ParentDiagramItem: { ID: targetItemId }, ConnectorName: targetConnectorName },
+                OutputStatus: outputStatus,
+                Description: "",
+                PathGeometry: "",
+                SourceArrowSymbol: ArrowSymbol.None,
+                SinkArrowSymbol: ArrowSymbol.Arrow,
+            };
+            const updatedDiagram = {
+                ...wfDiagram,
+                Connections: [...wfDiagram.Connections, newConnection],
+            };
+            updateDiagram(updatedDiagram);
+        }
+        else if (isDraggingExistingConnectionEndpoint && draggingConnectionId && draggingEndpointType && wfDiagram) {
+            // Logica per la riconnessione di un endpoint esistente
+            const updatedConnections = wfDiagram.Connections.map(conn => {
+                if (conn.ID === draggingConnectionId) {
+                    if (draggingEndpointType === 'source') {
+                        return {
+                            ...conn,
+                            Source: { ParentDiagramItem: { ID: targetItemId }, ConnectorName: targetConnectorName },
+                        };
+                    }
+                    else { // 'sink'
+                        return {
+                            ...conn,
+                            Sink: { ParentDiagramItem: { ID: targetItemId }, ConnectorName: targetConnectorName },
+                        };
+                    }
+                }
+                return conn;
+            });
+            const updatedDiagram = {
+                ...wfDiagram,
+                Connections: updatedConnections,
+            };
+            updateDiagram(updatedDiagram);
+            // Resetta tutti gli stati di trascinamento dell'endpoint
+            setIsDraggingExistingConnectionEndpoint(false);
+            setDraggingConnectionId(null);
+            setDraggingEndpointType(null);
+            setDraggingConnectionFixedPoint(null);
+            setTempConnectionEnd(null);
+        }
+        setIsDrawingConnection(false);
+        setTempConnectionSource(null);
+        setTempConnectionEnd(null);
+        setMouseDownPos(null);
+    }, [isDrawingConnection, tempConnectionSource, wfDiagram, updateDiagram, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
+    const handleDragOver = useCallback((event) => {
+        if (isReadOnly) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+    }, [isReadOnly]);
+    const handleDropOnCanvas = useCallback(async (event) => {
+        if (isReadOnly)
+            return;
+        event.preventDefault();
+        if (isDraggingFromToolbox && draggedItemType !== null && wfDiagram) {
+            const svgRect = svgRef.current?.getBoundingClientRect();
+            if (!svgRect)
+                return;
+            const x = (event.clientX - svgRect.left) / zoomLevel;
+            const y = (event.clientY - svgRect.top) / zoomLevel;
+            let newQD = undefined;
+            if (draggedItemType === DiagramItemTypes.Condition) {
+                newQD = SearchEngine.NewQueryDescriptor();
+                if (newQD.from)
+                    newQD.from.tid = wfDiagram.Info?.MTID;
+            }
+            let statusProps = {};
+            if (draggedItemType === DiagramItemTypes.Status && wfDiagram.Info?.MStatusDLID) {
+                try {
+                    const statusDataList = await DataListCacheService.GetAsync(wfDiagram.Info.MStatusDLID);
+                    if (statusDataList && statusDataList.items && statusDataList.items.length > 0) {
+                        const firstItem = statusDataList.items[0];
+                        statusProps = {
+                            ItemName: firstItem.name || `New ${DiagramItemTypes[draggedItemType]}`,
+                            StatusValue: firstItem.value
+                        };
+                    }
+                }
+                catch (error) {
+                    console.error("Errore nel recuperare la DataList per lo stato:", error);
+                    TMExceptionBoxManager.show({ exception: new Error("Impossibile caricare i valori per lo stato.") });
+                }
+            }
+            const newItem = {
+                ID: generateUUID(),
+                Left: x - 50,
+                Top: y - 50,
+                Width: 64,
+                Height: 64,
+                Type: draggedItemType,
+                ItemName: `New ${DiagramItemTypes[draggedItemType]}`,
+                Description: "",
+                ...(draggedItemType === DiagramItemTypes.Condition ? { QD: newQD } : {}),
+                ...(draggedItemType === DiagramItemTypes.RunApp || draggedItemType === DiagramItemTypes.ExecTask ? { AppType: WFAppTypes.EXE, FormatCultureID: CultureIDs.It_IT } : {}),
+                ...statusProps,
+            };
+            const updatedDiagram = {
+                ...wfDiagram,
+                DiagramItems: [...wfDiagram.DiagramItems, newItem],
+            };
+            updateDiagram(updatedDiagram);
+            setIsDraggingFromToolbox(false);
+            setDraggedItemType(null);
+        }
+    }, [isDraggingFromToolbox, draggedItemType, wfDiagram, updateDiagram, zoomLevel, isReadOnly]);
+    const currentSelectionRect = useMemo(() => {
+        if (isDrawingSelectionRect && selectionRectStart && selectionRectEnd) {
+            const x = Math.min(selectionRectStart.x, selectionRectEnd.x);
+            const y = Math.min(selectionRectStart.y, selectionRectEnd.y);
+            const width = Math.abs(selectionRectStart.x - selectionRectEnd.x);
+            const height = Math.abs(selectionRectStart.y - selectionRectEnd.y);
+            return { x, y, width, height };
+        }
+        return null;
+    }, [isDrawingSelectionRect, selectionRectStart, selectionRectEnd]);
+    const handleToolboxDragStart = useCallback((event, itemType) => {
+        if (isReadOnly) {
+            event.preventDefault();
+            return;
+        }
+        setIsDraggingFromToolbox(true);
+        setDraggedItemType(itemType);
+        event.dataTransfer.setData("text/plain", itemType.toString());
+    }, [isReadOnly]);
+    const handleToolboxDragEnd = () => {
+        if (isReadOnly)
+            return;
+        setIsDraggingFromToolbox(false);
+        setDraggedItemType(null);
+    };
+    const handleItemDimensionsChange = useCallback((itemId, width, height) => {
+        setWfDiagram(prevDiagram => {
+            if (!prevDiagram)
+                return null;
+            const updatedDiagram = {
+                ...prevDiagram,
+                DiagramItems: prevDiagram.DiagramItems.map(item => item.ID === itemId ? { ...item, Width: width, Height: height } : item),
+            };
+            updateDiagram(updatedDiagram);
+            return updatedDiagram;
+        });
+    }, []);
+    const handleUpdateDiagramItem = useCallback((updatedItem) => {
+        if (!wfDiagram)
+            return;
+        const updatedDiagramItems = wfDiagram.DiagramItems.map(item => {
+            if (item.ID === updatedItem.ID) {
+                return updatedItem;
+            }
+            return item;
+        });
+        const newDiagram = { ...wfDiagram, DiagramItems: updatedDiagramItems };
+        updateDiagram(newDiagram);
+    }, [wfDiagram, updateDiagram]);
+    const handleUpdateConnection = useCallback((updatedConnection) => {
+        setWfDiagram(prevDiagram => {
+            if (!prevDiagram)
+                return null;
+            const updatedConnections = prevDiagram.Connections.map(conn => {
+                if (conn.ID === updatedConnection.ID) {
+                    return updatedConnection;
+                }
+                return conn;
+            });
+            const newDiagram = { ...prevDiagram, Connections: updatedConnections };
+            updateDiagram(newDiagram);
+            return newDiagram;
+        });
+    }, [updateDiagram]);
+    const availableItemTypes = useMemo(() => {
+        return [
+            DiagramItemTypes.Approval,
+            DiagramItemTypes.Condition,
+            DiagramItemTypes.Exit,
+            DiagramItemTypes.Status,
+            // DiagramItemTypes.DataEntry,
+            DiagramItemTypes.ExecTask,
+            DiagramItemTypes.UpdateDcmt,
+            DiagramItemTypes.RunApp,
+            DiagramItemTypes.Notification,
+            DiagramItemTypes.WorkGroup_Create,
+            DiagramItemTypes.WorkGroup_AddParts,
+            DiagramItemTypes.CaseFlow_Create,
+            DiagramItemTypes.CaseFlow_AddParts,
+            // DiagramItemTypes.SignAndTimeStamp
+        ];
+    }, []);
+    const toggleReadOnlyMode = useCallback(() => {
+        if (isReadOnly) {
+            setIsReadOnly(false);
+            return;
+        }
+        // Condizione per mostrare il messaggio di conferma
+        const hasPendingState = wfDiagramHistory.length > 1 || selectedItems.size > 0 || selectedConnections.size > 0;
+        if (hasPendingState) {
+            TMMessageBoxManager.show({
+                title: "Progettazione diagramma",
+                message: "Attenzione: Stai uscendo dalla modalità di progettazione. Tutte le selezioni attive verranno annullate. Vuoi continuare?",
+                buttons: [ButtonNames.YES, ButtonNames.NO],
+                onButtonClick: async (e) => {
+                    try {
+                        if (e !== ButtonNames.YES)
+                            return;
+                        setIsReadOnly(true);
+                        setSelectedItems(new Set());
+                        setSelectedConnections(new Set());
+                    }
+                    catch (error) {
+                        console.error("Errore nel cambio modalità:", error);
+                    }
+                }
+            });
+        }
+        else {
+            // Nessuna modifica pendente o elemento selezionato, cambia direttamente
+            setIsReadOnly(true);
+        }
+    }, [isReadOnly, wfDiagramHistory, selectedItems, selectedConnections]);
+    const toggleFullScreenMode = useCallback(() => {
+        setIsFullScreen(prev => !prev);
+    }, []);
+    const handleZoomIn = useCallback(() => {
+        setZoomLevel(prev => Math.min(prev + 0.1, 2.0)); // Limite max a 2.0
+    }, []);
+    const handleZoomOut = useCallback(() => {
+        setZoomLevel(prev => Math.max(prev - 0.1, 0.5)); // Limite min a 0.5
+    }, []);
+    const formattedZoomLevel = useMemo(() => {
+        return `${Math.round(zoomLevel * 100)}%`;
+    }, [zoomLevel]);
+    useEffect(() => {
+        // Se l'XML che ho appena ricevuto (xmlDiagramString) è lo stesso che ho notificato al genitore,
+        // significa che la modifica è partita da me ed è solo un ciclo di riconciliazione.
+        if (xmlDiagramString && notifiedXmlRef.current === xmlDiagramString) {
+            notifiedXmlRef.current = null;
+            return;
+        }
+        // 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);
+                // 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);
+                initialDiagramRef.current = null;
+                setWfDiagramHistory([]);
+                setHistoryIndex(-1);
+            }
+        }
+        catch (error) {
+            console.error("Errore durante l'elaborazione del diagramma:", error);
+            setWfDiagram(null);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [xmlDiagramString, getAdjustedAndRecalculatedDiagram]);
+    useEffect(() => {
+        if (isUndoingRedoing.current) {
+            isUndoingRedoing.current = false;
+        }
+    }, [wfDiagram]);
+    const diagramContent = (_jsxs(CanvasContainer, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
+                , onChange: handleFileChange, style: { display: 'none' } }), _jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, "$isReadOnly": isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly, children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly })] }) }), allowEdit && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: SDKUI_Localizator.ShowToolbox, children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowToolboxToggle })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: SDKUI_Localizator.ShowFullScreen, children: [isFullScreen ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowFullScreen })] })] }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: SDKUI_Localizator.ZoomIn, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: SDKUI_Localizator.Undo, children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Undo })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: SDKUI_Localizator.Redo, children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Redo })] }), _jsxs("button", { onClick: handleRestore, title: SDKUI_Localizator.Restore, children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Restore })] }), _jsxs("button", { onClick: handleNew, title: SDKUI_Localizator.DiagramNew, disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.DiagramNew })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export, children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import, children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import })] })] }), !isReadOnly && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: SDKUI_Localizator.AutoAdjust, children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.AutoAdjust })] }) }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Copy, children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Copy })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Cut, children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Cut })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: SDKUI_Localizator.Paste, children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Paste })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? SDKUI_Localizator.ToolbarDock : SDKUI_Localizator.ToolbarFloat, children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: SDKUI_Localizator.ToggleMode })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? SDKUI_Localizator.ToolbarExpand : SDKUI_Localizator.ToolbarCollapse, children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(ToolboxIconWrapper, { children: _jsx(DiagramItemSvgContent, { itemType: type, width: 38, height: 38, isToolboxPreview: true }) }), _jsx("span", { children: LocalizeDiagramItemType(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, { wf: wfDiagram?.Info, readOnly: isReadOnly, 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)
+                                    return null;
+                                // Calcola i punti di origine e destinazione della connessione
+                                const sourcePoint = getConnectionPoint(sourceItem, connection.Source.ConnectorName);
+                                const sinkPoint = getConnectionPoint(sinkItem, connection.Sink.ConnectorName);
+                                // 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, onDoubleClick: handleDoubleClickConnection, 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(DiagramItemForm, { itemToEdit: itemToEdit, wf: wfDiagram?.Info, onClose: handleCloseModal, onApply: handleUpdateDiagramItem })), isConnectionModalOpen && connectionToEdit && (_jsx(ConnectionForm, { connectionToEdit: connectionToEdit, onClose: () => setIsConnectionModalOpen(false), onApply: handleUpdateConnection }))] }));
+    const diagramRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [!isFullScreen && (_jsx(DiagramWrapper, { ref: diagramRef, children: diagramContent })), isFullScreen && ReactDOM.createPortal(_jsx(FullScreenContainer, { children: diagramContent }), document.body)] }));
+};
+export default WFDiagram;