@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

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

@@ -14,308 +14,308 @@ 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) */
+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;
+    ? `
+            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;
+        ? `
+            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;
-        `}
+        : `
+            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 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 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 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 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;
+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;
-      }
-    }
-  }
+    : '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 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 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 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 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 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 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 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 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 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 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 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);
@@ -981,11 +981,20 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const handleRestore = useCallback(() => {
         if (isReadOnly)
             return;
-        if (initialDiagramRef.current) {
-            setWfDiagram(initialDiagramRef.current);
-            setWfDiagramHistory([initialDiagramRef.current]);
-            setHistoryIndex(0);
-        }
+        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)
@@ -1646,7 +1655,30 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
             isUndoingRedoing.current = false;
         }
     }, [wfDiagram]);
-    const diagramContent = (_jsxs(CanvasContainer, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
+    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);
@@ -1661,6 +1693,6 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
                                 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)] }));
+    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;