@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,1698 +0,0 @@
-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)
-            return;
-        TMMessageBoxManager.show({
-            title: SDKUI_Localizator.WorkflowRestoreDiagram,
-            message: SDKUI_Localizator.WorkflowRestoreDiagramMessage,
-            buttons: [ButtonNames.YES, ButtonNames.NO],
-            onButtonClick: async (e) => {
-                if (e === ButtonNames.YES) {
-                    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 handleCanvasDoubleClick = useCallback((event) => {
-        if (isReadOnly) {
-            toggleReadOnlyMode();
-        }
-    }, [isReadOnly, toggleReadOnlyMode]);
-    const handleFullScreenKeyDown = useCallback((event) => {
-        if (event.key === 'Escape') {
-            // Blocca sempre la propagazione per evitare che TMSaveForm riceva l'evento
-            event.preventDefault();
-            event.stopPropagation();
-            // Non chiudere il fullscreen se ci sono modal aperti
-            if (isModalOpen || isConnectionModalOpen)
-                return;
-            setIsFullScreen(false);
-        }
-    }, [isModalOpen, isConnectionModalOpen]);
-    const fullScreenRef = useRef(null);
-    // Gestione focus automatico quando si entra in fullscreen
-    useEffect(() => {
-        if (isFullScreen && fullScreenRef.current) {
-            fullScreenRef.current.focus();
-        }
-    }, [isFullScreen]);
-    const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, 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, { ref: fullScreenRef, tabIndex: 0, onKeyDown: handleFullScreenKeyDown, children: diagramContent }), document.body)] }));
-};
-export default WFDiagram;