@topconsultnpm/sdkui-react-beta 6.16.76 → 6.16.78

package/lib/components/features/documents/TMDcmtForm.js

@@ -8,10 +8,10 @@ import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconZoomIn, IconZoomOut } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
-import { StyledClickableIconWrapper, StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
+import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
@@ -74,7 +74,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const [workItems, setWorkItems] = useState([]);
     const [workflows, setWorkflows] = useState([]);
     const [showCommentForm, setShowCommentForm] = useState(false);
-    const [zoomLevel, setZoomLevel] = useState(1);
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // Custom hook to manage workflow approval data
@@ -155,9 +154,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             TMSpinner.hide();
         }
     };
-    const handleZoomIn = () => setZoomLevel(z => Math.min(z + 0.2, 2));
-    const handleZoomOut = () => setZoomLevel(z => Math.max(z - 0.2, 0.4));
-    const formattedZoomLevel = `${Math.round(zoomLevel * 100)}%`;
     useEffect(() => { setID(genUniqueId()); }, []);
     useEffect(() => {
         if (!inputFile || inputFile === null)
@@ -555,7 +551,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 }, children: _jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento dati workflow'}...` })] }) }));
         }
         return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 3 }, children: [workItems.length > 0
-                    ? _jsx(WFDiagram, { xmlDiagramString: workflows?.[0]?.diagram || '', currentSetID: workitemSetID, readOnly: true, zoomLevel: zoomLevel, translateX: 0, translateY: 0 })
+                    ? _jsx(WFDiagram, { xmlDiagramString: workflows?.[0]?.diagram || '', allowEdit: false, currentSetID: workitemSetID })
                     : _jsx("div", { style: {
                             position: 'absolute',
                             top: '50%',
@@ -564,35 +560,13 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                             fontSize: '1.1rem',
                             color: TMColors.primaryColor,
                             textAlign: 'center',
-                        }, children: SDKUI_Localizator.WorkitemsToApproveNone }), workItems.length > 0 && _jsxs("div", { style: {
-                        position: 'absolute',
-                        left: 16,
-                        bottom: workitemSetID || workItems.length <= 0 ? 16 : 64,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        background: 'transparent linear-gradient(180deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box',
-                        gap: 5,
-                        padding: 5,
-                        borderRadius: 8,
-                        color: 'white',
-                        zIndex: 10,
-                        alignItems: 'center'
-                    }, children: [_jsx(StyledClickableIconWrapper, { onClick: handleZoomIn, "$disabled": zoomLevel >= 2, children: _jsx(IconZoomIn, { fontSize: 22 }) }), _jsx(StyledClickableIconWrapper, { onClick: handleZoomOut, "$disabled": zoomLevel <= 0.4, children: _jsx(IconZoomOut, { fontSize: 22 }) }), _jsx("span", { style: {
-                                backgroundColor: 'white',
-                                color: '#555',
-                                fontSize: '0.9rem',
-                                height: 32,
-                                display: 'flex',
-                                alignItems: 'center',
-                                padding: '0 8px',
-                                borderRadius: 4
-                            }, children: formattedZoomLevel })] }), !workitemSetID && workItems.length > 0 &&
+                        }, children: SDKUI_Localizator.WorkitemsToApproveNone }), !workitemSetID && workItems.length > 0 &&
                     _jsx("div", { style: {
                             padding: 5,
                             backgroundColor: 'khaki',
                             borderRadius: 8
                         }, children: SDKUI_Localizator.WorkItemTechnicalNote_SetID })] }));
-    }, [workflows, formData, workitemSetID, workItems, zoomLevel, isWFDataLoading, handleZoomIn, handleZoomOut]);
+    }, [workflows, formData, workitemSetID, workItems, isWFDataLoading]);
     const normalizedTID = TID !== undefined ? Number(TID) : undefined;
     const defaultPanelDimensions = {
         'tmDcmtForm': { width: '20%', height: '100%' },

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

@@ -1,11 +1,9 @@
 import React from 'react';
 interface IWFDiagramProps {
     xmlDiagramString: string;
-    readOnly?: boolean;
-    zoomLevel?: number;
-    translateX?: number;
-    translateY?: number;
     currentSetID?: string;
+    allowEdit?: boolean;
+    onDiagramChange?: (newXmlDiagram: string) => void;
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;

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

@@ -1,17 +1,76 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { CultureIDs, SearchEngine, WFAppTypes, WorkItemStatus } from "@topconsultnpm/sdk-ts-beta";
 import ConnectionComponent from './ConnectionComponent';
 import DiagramItemComponent from './DiagramItemComponent';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateArrowAngle, downloadFile, getConnectionPoint, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
-import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport } from '../../../../helper';
-import { TMExceptionBoxManager } from '../../../base/TMPopUp';
+import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock } from '../../../../helper';
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../../../base/TMPopUp';
 import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 import DiagramItemForm from './DiagramItemForm';
+import ReactDOM from 'react-dom';
+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%;
@@ -21,10 +80,23 @@ const CanvasContainer = styled.div `
   display: flex;
   overflow: hidden; /* Ensure content doesn't overflow when panels are collapsed */
 `;
+const pulse = keyframes `
+    0% {
+        box-shadow: 0 0 0 0px rgba(0, 123, 255, 0.7); /* Colore #007bff */
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0px rgba(0, 123, 255, 0);
+    }
+`;
 const ToolbarContainer = styled.div `
   display: flex;
   gap: 5px;
-  background: transparent linear-gradient(180deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box;
+  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;
@@ -34,19 +106,21 @@ const ToolbarContainer = styled.div `
   ${props => props.$isFloating ? `
     position: absolute;
     bottom: 20px;
-    left: ${props.$isToolboxVisible ? '160px' : '20px'};
-    flex-direction: row; // Orizzontale in modalità floating
-    width: auto; // Lascia che il contenuto determini la larghezza
+    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; // Padding leggermente ridotto per la modalità floating
+    padding: 5px 8px;
   ` : `
-    position: relative; // O 'absolute; top: 8px; left: 8px;' a seconda del layout del CanvasContainer
-    flex-direction: column; // Verticale in modalità ancorata
+    position: relative;
+    flex-direction: column;
     width: ${props.$isCollapsed ? '40px' : 'auto'};
   `}
   overflow-y: auto;
 
   button {
+
+    
     background: none;
     border: none;
     cursor: pointer;
@@ -55,6 +129,8 @@ const ToolbarContainer = styled.div `
     align-items: center;
     justify-content: ${props => props.$isCollapsed || props.$isFloating ? 'center' : 'flex-start'}; // Centra icone in entrambe le modalità
     white-space: nowrap;
+    position: relative;
+    transition: background-color 0.3s, box-shadow 0.3s;
 
     svg {
       color: white;
@@ -205,7 +281,12 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel = 1, translateX = 0, translateY = 0 }) => {
+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());
@@ -214,6 +295,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
     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);
@@ -271,7 +353,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         return { svgWidth: Math.max(0, totalWidth * zoomLevel), svgHeight: Math.max(0, totalHeight * zoomLevel) };
     }, [wfDiagram, zoomLevel]);
     const updateDiagram = useCallback((newDiagram, validate = true) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         try {
             if (validate) {
@@ -283,13 +365,28 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 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, readOnly]);
+    }, [wfDiagramHistory, historyIndex, isUndoingRedoing, setWfDiagramHistory, setHistoryIndex, setWfDiagram, isReadOnly]);
     const handleUndo = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (historyIndex > 0) {
             isUndoingRedoing.current = true;
@@ -297,9 +394,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             setHistoryIndex(newIndex);
             setWfDiagram(wfDiagramHistory[newIndex]);
         }
-    }, [historyIndex, wfDiagramHistory, setHistoryIndex, setWfDiagram, readOnly]);
+    }, [historyIndex, wfDiagramHistory, setHistoryIndex, setWfDiagram, isReadOnly]);
     const handleRedo = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (historyIndex < wfDiagramHistory.length - 1) {
             isUndoingRedoing.current = true;
@@ -307,9 +404,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             setHistoryIndex(newIndex);
             setWfDiagram(wfDiagramHistory[newIndex]);
         }
-    }, [historyIndex, wfDiagramHistory, setHistoryIndex, setWfDiagram, readOnly]);
+    }, [historyIndex, wfDiagramHistory, setHistoryIndex, setWfDiagram, isReadOnly]);
     const handleDelete = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (!wfDiagram || (selectedItems.size === 0 && selectedConnections.size === 0)) {
             return;
@@ -338,9 +435,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         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, readOnly]);
+    }, [wfDiagram, selectedItems, selectedConnections, setWfDiagram, setSelectedItems, setSelectedConnections, updateDiagram, isReadOnly]);
     const handleCopy = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (!wfDiagram || selectedItems.size === 0) {
             return;
@@ -351,9 +448,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setCopiedItems(itemsToCopy);
         setCopiedConnections(connectionsToCopy);
         setIsCutOperation(false);
-    }, [wfDiagram, selectedItems, readOnly]);
+    }, [wfDiagram, selectedItems, isReadOnly]);
     const handleCut = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (!wfDiagram || selectedItems.size === 0) {
             return;
@@ -375,9 +472,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setSelectedItems(new Set());
         setSelectedConnections(new Set());
         updateDiagram(newWfDiagram, false);
-    }, [wfDiagram, selectedItems, setSelectedItems, setSelectedConnections, updateDiagram, readOnly]);
+    }, [wfDiagram, selectedItems, setSelectedItems, setSelectedConnections, updateDiagram, isReadOnly]);
     const handlePaste = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (!wfDiagram || (copiedItems.length === 0 && copiedConnections.length === 0)) {
             return;
@@ -425,9 +522,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             Connections: combinedConnections,
         };
         updateDiagram(newWfDiagram, false);
-    }, [wfDiagram, copiedItems, copiedConnections, isCutOperation, updateDiagram, setSelectedItems, setSelectedConnections, readOnly]);
+    }, [wfDiagram, copiedItems, copiedConnections, isCutOperation, updateDiagram, setSelectedItems, setSelectedConnections, isReadOnly]);
     const handleNew = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         const startItem = {
             ID: generateUUID(),
@@ -463,7 +560,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setCopiedItems([]);
         setCopiedConnections([]);
         setIsCutOperation(false);
-    }, [wfDiagram, readOnly]);
+    }, [wfDiagram, isReadOnly]);
     const handleToggleToolbarMode = () => {
         setIsToolbarFloating(prev => !prev);
     };
@@ -471,23 +568,23 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setIsToolboxVisible(prev => !prev);
     };
     const handleDoubleClickItem = useCallback((itemId) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         const itemFound = wfDiagram?.DiagramItems.find(item => item.ID === itemId);
         if (itemFound) {
             setItemToEdit(itemFound);
             setIsModalOpen(true);
         }
-    }, [wfDiagram, readOnly]);
+    }, [wfDiagram, isReadOnly]);
     const handleCloseModal = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         setIsModalOpen(prevIsModalOpen => {
             return false;
         });
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleKeyDown = useCallback((event) => {
-        if (readOnly)
+        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)
@@ -563,7 +660,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             handleDelete();
             return;
         }
-    }, [wfDiagram, selectedItems, selectedConnections, handleUndo, handleRedo, handleDelete, updateDiagram, handleCopy, handleCut, handlePaste, readOnly]);
+    }, [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
@@ -581,16 +678,13 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
         }
-    }, [wfDiagram]); // Dipende dallo stato attuale del diagramma
+    }, [wfDiagram]);
     const fileInputRef = useRef(null);
-    // Gestore dell'evento click sul bottone (apre la finestra di selezione file)
     const handleImportDiagramClick = useCallback(() => {
         if (fileInputRef.current) {
             fileInputRef.current.click();
         }
     }, []);
-    // Gestore dell'evento di selezione file (esegue il parse e chiama il genitore)
-    // Gestore dell'evento di selezione file (esegue il parse e chiama il genitore)
     const handleFileChange = useCallback((event) => {
         const file = event.target.files?.[0];
         if (!file) {
@@ -600,23 +694,15 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         reader.onload = (e) => {
             try {
                 const xmlContent = e.target?.result;
-                // 1. Esegui il parse per ottenere il nuovo oggetto WfDiagram.
                 const newWfDiagram = parseWfDiagramXml(xmlContent);
-                // 2. TRATTA L'IMPORT COME UNA MODIFICA:
-                // Usa updateDiagram per aggiornare lo stato interno (wfDiagram) e la history (wfDiagramHistory).
-                // L'originale xmlDiagramString del genitore resta intatto.
-                // Passiamo false per 'validate' in quanto il file importato è già stato validato da parseWfDiagramXml.
                 updateDiagram(newWfDiagram, false);
-                // 3. Resetta l'input per permettere re-import dello stesso file
                 if (fileInputRef.current) {
                     fileInputRef.current.value = '';
                 }
             }
             catch (error) {
-                // Gestione dell'errore di parsing (es. file non valido)
                 const errorMessage = 'Error importing diagram. Invalid XML format.';
                 TMExceptionBoxManager.show({ exception: new Error(errorMessage + `\n${error.message}`) });
-                // Resetta l'input anche in caso di errore
                 if (fileInputRef.current) {
                     fileInputRef.current.value = '';
                 }
@@ -851,14 +937,14 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         return "";
     }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, wfDiagram, isDraggingExistingConnectionEndpoint, draggingConnectionFixedPoint]);
     const handleRestore = useCallback(() => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (initialDiagramRef.current) {
             setWfDiagram(initialDiagramRef.current);
             setWfDiagramHistory([initialDiagramRef.current]);
             setHistoryIndex(0);
         }
-    }, [readOnly]);
+    }, [isReadOnly]);
     const autoAdjustDiagram = (diagram) => {
         if (!diagram)
             return diagram;
@@ -974,13 +1060,13 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         return { ...adjustedItemsDiagram, Connections: adjustedConnections };
     }, [calculateConnectionPath]);
     const handleAutoAdjust = useCallback(() => {
-        if (readOnly || !wfDiagram)
+        if (isReadOnly || !wfDiagram)
             return;
         const finalDiagram = getAdjustedAndRecalculatedDiagram(wfDiagram);
         updateDiagram(finalDiagram, false);
-    }, [wfDiagram, readOnly, updateDiagram, getAdjustedAndRecalculatedDiagram]);
+    }, [wfDiagram, isReadOnly, updateDiagram, getAdjustedAndRecalculatedDiagram]);
     const handleMouseDown = useCallback((event) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (event.target === svgRef.current) {
             setSelectedItems(new Set());
@@ -989,9 +1075,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             setSelectionRectStart({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
             setSelectionRectEnd(null);
         }
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleMouseMove = useCallback((event) => {
-        if (readOnly)
+        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.
@@ -1070,9 +1156,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             // 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, readOnly, isDraggingExistingConnectionEndpoint, draggingConnectionFixedPoint, mouseDownPos]);
+    }, [isDrawingConnection, tempConnectionSource, isDrawingSelectionRect, selectionRectStart, wfDiagram, zoomLevel, translateX, translateY, isDraggingFromToolbox, draggedItemType, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionFixedPoint, mouseDownPos]);
     const handleMouseUp = useCallback((event) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         if (isDrawingConnection) {
             // Logica per una nuova connessione, rimane invariata
@@ -1097,9 +1183,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         }
         setIsDraggingFromToolbox(false);
         setDraggedItemType(null);
-    }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, isDrawingSelectionRect, selectionRectStart, selectionRectEnd, wfDiagram, zoomLevel, translateX, translateY, readOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
+    }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, isDrawingSelectionRect, selectionRectStart, selectionRectEnd, wfDiagram, zoomLevel, translateX, translateY, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
     const handleDiagramItemClick = useCallback((id, event) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         event.stopPropagation();
         const isCtrlPressed = event.ctrlKey || event.metaKey;
@@ -1121,9 +1207,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         });
         if (!isCtrlPressed)
             setSelectedConnections(new Set());
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleConnectionClick = useCallback((id, event) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         event.stopPropagation();
         const isCtrlPressed = event.ctrlKey || event.metaKey;
@@ -1145,9 +1231,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         });
         if (!isCtrlPressed)
             setSelectedItems(new Set());
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleDrag = useCallback((id, newX, newY) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         setWfDiagram(prevDiagram => {
             if (!prevDiagram)
@@ -1157,9 +1243,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                 DiagramItems: prevDiagram.DiagramItems.map(item => item.ID === id ? { ...item, Left: newX, Top: newY } : item),
             };
         });
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleDragEnd = useCallback((id, finalX, finalY) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         setWfDiagram(prevDiagram => {
             if (!prevDiagram)
@@ -1171,9 +1257,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             updateDiagram(updatedDiagram);
             return updatedDiagram;
         });
-    }, [updateDiagram, readOnly]);
+    }, [updateDiagram, isReadOnly]);
     const handleConnectorMouseDown = useCallback((itemId, connectorName, event) => {
-        if (readOnly || !wfDiagram)
+        if (isReadOnly || !wfDiagram)
             return;
         event.stopPropagation();
         // Salva la posizione iniziale del mouse.
@@ -1181,9 +1267,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         // 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, readOnly]);
+    }, [wfDiagram, isReadOnly]);
     const handleConnectionEndpointMouseDown = useCallback((connectionId, endpointType, event) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         event.stopPropagation();
         setIsDraggingExistingConnectionEndpoint(true);
@@ -1209,9 +1295,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             }
         }
         setTempConnectionEnd({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
-    }, [wfDiagram, readOnly]);
+    }, [wfDiagram, isReadOnly]);
     const handleConnectorMouseUp = useCallback((targetItemId, targetConnectorName) => {
-        if (readOnly)
+        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).
@@ -1275,16 +1361,16 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         setTempConnectionSource(null);
         setTempConnectionEnd(null);
         setMouseDownPos(null);
-    }, [isDrawingConnection, tempConnectionSource, wfDiagram, updateDiagram, readOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
+    }, [isDrawingConnection, tempConnectionSource, wfDiagram, updateDiagram, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
     const handleDragOver = useCallback((event) => {
-        if (readOnly) {
+        if (isReadOnly) {
             event.preventDefault();
             return;
         }
         event.preventDefault();
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleDropOnCanvas = useCallback((event) => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         event.preventDefault();
         if (isDraggingFromToolbox && draggedItemType !== null && wfDiagram) {
@@ -1319,7 +1405,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             setIsDraggingFromToolbox(false);
             setDraggedItemType(null);
         }
-    }, [isDraggingFromToolbox, draggedItemType, wfDiagram, updateDiagram, zoomLevel, readOnly]);
+    }, [isDraggingFromToolbox, draggedItemType, wfDiagram, updateDiagram, zoomLevel, isReadOnly]);
     const currentSelectionRect = useMemo(() => {
         if (isDrawingSelectionRect && selectionRectStart && selectionRectEnd) {
             const x = Math.min(selectionRectStart.x, selectionRectEnd.x);
@@ -1331,16 +1417,16 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         return null;
     }, [isDrawingSelectionRect, selectionRectStart, selectionRectEnd]);
     const handleToolboxDragStart = useCallback((event, itemType) => {
-        if (readOnly) {
+        if (isReadOnly) {
             event.preventDefault();
             return;
         }
         setIsDraggingFromToolbox(true);
         setDraggedItemType(itemType);
         event.dataTransfer.setData("text/plain", itemType.toString());
-    }, [readOnly]);
+    }, [isReadOnly]);
     const handleToolboxDragEnd = () => {
-        if (readOnly)
+        if (isReadOnly)
             return;
         setIsDraggingFromToolbox(false);
         setDraggedItemType(null);
@@ -1388,7 +1474,56 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             // 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;
@@ -1427,9 +1562,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             isUndoingRedoing.current = false;
         }
     }, [wfDiagram]);
-    return (_jsxs(CanvasContainer, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
-                , onChange: handleFileChange, style: { display: 'none' } }), !readOnly && (_jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, children: [_jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: readOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: readOnly || !wfDiagram, title: SDKUI_Localizator.Export || 'Export Diagram', children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export || 'Export' })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: readOnly, title: SDKUI_Localizator.Import || 'Import Diagram', children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import || 'Import' })] })] }), _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] })), !readOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ?
-                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: readOnly, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem }, item.ID))), calculatedConnections.map(connection => {
+    const diagramContent = (_jsxs(CanvasContainer, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
+                , onChange: handleFileChange, style: { display: 'none' } }), _jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, "$isReadOnly": isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: "Progettazione", children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? 'Progettazione' : 'Sola lettura' })] }) }), allowEdit && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: "Show full screen", children: [_jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra tutto schermo" })] })] }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: "Zoom in", children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: "Zoom in" })] }), _jsxs("button", { onClick: handleZoomOut, title: "Zoom out", children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: "Zoom out" })] }), _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export || 'Export Diagram', children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export || 'Export' })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import || 'Import Diagram', children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import || 'Import' })] })] }), !isReadOnly && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ?
+                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { 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)
@@ -1441,5 +1576,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
                                 const isThisConnectionBeingDragged = isDraggingExistingConnectionEndpoint && draggingConnectionId === connection.ID;
                                 return (_jsx(ConnectionComponent, { connection: connection, isSelected: selectedConnections.has(connection.ID), sourcePoint: sourcePoint, sinkPoint: sinkPoint, isTemporary: isThisConnectionBeingDragged, onClick: handleConnectionClick, onConnectionEndpointMouseDown: handleConnectionEndpointMouseDown }, connection.ID));
                             }), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) })) : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(DiagramItemForm, { itemToEdit: itemToEdit, wf: wfDiagram?.Info, onClose: handleCloseModal, onApply: handleUpdateDiagramItem }))] }));
+    const diagramRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [!isFullScreen && (_jsx(DiagramWrapper, { ref: diagramRef, children: diagramContent })), isFullScreen && ReactDOM.createPortal(_jsx(FullScreenContainer, { children: diagramContent }), document.body)] }));
 };
 export default WFDiagram;

package/lib/components/forms/Login/PasswordStrengthChecker.js

@@ -8,7 +8,7 @@ const PasswordStrengthChecker = ({ password, onValidationChange }) => {
         return [
             {
                 label: SDKUI_Localizator.PasswordRule_Length,
-                test: (pw) => pw.length >= 10 && pw.length <= 128,
+                test: (pw) => pw.length >= 16 && pw.length <= 128,
             },
             {
                 label: SDKUI_Localizator.PasswordRule_Lowercase,

package/lib/helper/SDKUI_Localizator.d.ts

@@ -359,13 +359,13 @@ export declare class SDKUI_Localizator {
     static get PasswordContainsUsernameError(): "Das Passwort darf den Benutzernamen nicht enthalten" | "The password cannot contain the username" | "La contraseña no puede contener el nombre de usuario" | "Le mot de passe ne peut pas contenir le nom d'utilisateur" | "A senha não pode conter o nome de usuário" | "La password non può contenere il nome utente";
     static get PasswordConfirmError(): "Entspricht nicht dem neuen Passwort" | "Does not match the new password" | "No coincide con la nueva contraseña" | "Ne correspond pas au nouveau mot de passe" | "Não corresponde à nova senha" | "Non corrisponde alla nuova password";
     static get PasswordEqualsUsernameError(): "Das Passwort darf nicht mit dem Benutzernamen identisch sein" | "The password cannot be the same as the username" | "La contraseña no puede ser la misma que el nombre de usuario" | "Le mot de passe ne peut pas être identique au nom d'utilisateur" | "A senha não pode ser igual ao nome do usuário" | "La password non può coincidere con il nome utente";
-    static get PasswordLengthError(): "Das Passwort muss zwischen 10 und 128 Zeichen enthalten" | "Password must contain between 10 and 128 characters" | "La contraseña debe contener entre 10 y 128 caracteres" | "Le mot de passe doit contenir entre 10 et 128 caractères" | "A senha deve conter entre 10 e 128 caracteres" | "La password deve contenere tra 10 e 128 caratteri";
+    static get PasswordLengthError(): "Das Passwort muss zwischen 16 und 128 Zeichen enthalten" | "Password must contain between 16 and 128 characters" | "La contraseña debe contener entre 16 y 128 caracteres" | "Le mot de passe doit contenir entre 16 et 128 caractères" | "A senha deve conter entre 16 e 128 caracteres" | "La password deve contenere tra 16 e 128 caratteri";
     static get PasswordLowercaseError(): "Das Passwort muss Kleinbuchstaben enthalten (a-z)" | "Password must include lowercase character (a-z)" | "La contraseña debe incluir caracteres en minúscula (a-z)" | "Le mot de passe doit inclure un caractère minuscule (a-z)" | "A senha deve incluir caracteres minúsculos (a-z)" | "La password deve includere caratteri minuscoli (a-z)";
     static get PasswordNumberError(): "Das Passwort muss Zahlen enthalten (0-9)" | "Password must include number (0-9)" | "La contraseña debe incluir números (0-9)" | "Le mot de passe doit inclure des chiffres (0-9)" | "A senha deve incluir números (0-9)" | "La password deve includere numeri (0-9)";
     static get PasswordSymbolError(): "Das Passwort muss mindestens ein Sonderzeichen enthalten (!\"#$%&'()*+,-./:;<=>?@[]^_{|})" | "The password must contain at least one special character (!\"#$%&'()*+,-./:;<=>?@[]^_{|})" | "La contraseña debe contener al menos un carácter especial. (!\"#$%&'()*+,-./:;<=>?@[]^_{|})" | "Le mot de passe doit contenir au moins un caractère spécial (!\"#$%&'()*+,-./:;<=>?@[]^_{|})" | "A senha deve conter pelo menos um caractere especial (!\"#$%&'()*+,-./:;<=>?@[]^_{|})" | "La password deve contenere almeno un carattere speciale (!\"#$%&'()*+,-./:;<=>?@[]^_{|})";
     static get PasswordUppercaseError(): "Das Passwort muss Großbuchstaben enthalten (A-Z)" | "Password must include uppercase character (A-Z)" | "La contraseña debe incluir caracteres en mayúscula (A-Z)" | "Le mot de passe doit inclure un caractère majuscule (A-Z)" | "A senha deve incluir caracteres maiúsculos (A-Z)" | "La password deve includere caratteri maiuscoli (A-Z)";
     static get PasswordRule_Requirement(): "Das neue Passwort muss enthalten:" | "The new password must contain:" | "La nueva contraseña debe contener:" | "Le nouveau mot de passe doit contenir :" | "A nova senha deve conter:" | "La nuova password deve contenere:";
-    static get PasswordRule_Length(): "Zwischen 10 und 128 Zeichen." | "Between 10 and 128 characters." | "Entre 10 y 128 caracteres." | "Entre 10 et 128 caractères." | "Entre 10 e 128 caracteres." | "Tra 10 e 128 caratteri.";
+    static get PasswordRule_Length(): "Zwischen 16 und 128 Zeichen." | "Between 16 and 128 characters." | "Entre 16 y 128 caracteres." | "Entre 16 et 128 caractères." | "Entre 16 e 128 caracteres." | "Tra 16 e 128 caratteri.";
     static get PasswordRule_Lowercase(): "Kleinbuchstaben (a–z)." | "Lowercase characters (a–z)." | "Letras minúsculas (a–z)." | "Caractères minuscules (a–z)." | "Lettere minuscole (a–z).";
     static get PasswordRule_Uppercase(): "Großbuchstaben (A–Z)." | "Uppercase character (A–Z)." | "Letra mayúscula (A–Z)." | "Caractère majuscule (A–Z)." | "Letra maiúscula (A–Z)." | "Lettere maiuscole (A–Z).";
     static get PasswordRule_Number(): "Zahlen (0–9)." | "Number (0–9)." | "Números (0–9)." | "Chiffre (0–9)." | "Numeri (0–9).";

package/lib/helper/SDKUI_Localizator.js

@@ -3549,12 +3549,12 @@ export class SDKUI_Localizator {
     }
     static get PasswordLengthError() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "Das Passwort muss zwischen 10 und 128 Zeichen enthalten";
-            case CultureIDs.En_US: return "Password must contain between 10 and 128 characters";
-            case CultureIDs.Es_ES: return "La contraseña debe contener entre 10 y 128 caracteres";
-            case CultureIDs.Fr_FR: return "Le mot de passe doit contenir entre 10 et 128 caractères";
-            case CultureIDs.Pt_PT: return "A senha deve conter entre 10 e 128 caracteres";
-            default: return "La password deve contenere tra 10 e 128 caratteri";
+            case CultureIDs.De_DE: return "Das Passwort muss zwischen 16 und 128 Zeichen enthalten";
+            case CultureIDs.En_US: return "Password must contain between 16 and 128 characters";
+            case CultureIDs.Es_ES: return "La contraseña debe contener entre 16 y 128 caracteres";
+            case CultureIDs.Fr_FR: return "Le mot de passe doit contenir entre 16 et 128 caractères";
+            case CultureIDs.Pt_PT: return "A senha deve conter entre 16 e 128 caracteres";
+            default: return "La password deve contenere tra 16 e 128 caratteri";
         }
     }
     static get PasswordLowercaseError() {
@@ -3609,12 +3609,12 @@ export class SDKUI_Localizator {
     }
     static get PasswordRule_Length() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "Zwischen 10 und 128 Zeichen.";
-            case CultureIDs.En_US: return "Between 10 and 128 characters.";
-            case CultureIDs.Es_ES: return "Entre 10 y 128 caracteres.";
-            case CultureIDs.Fr_FR: return "Entre 10 et 128 caractères.";
-            case CultureIDs.Pt_PT: return "Entre 10 e 128 caracteres.";
-            default: return "Tra 10 e 128 caratteri.";
+            case CultureIDs.De_DE: return "Zwischen 16 und 128 Zeichen.";
+            case CultureIDs.En_US: return "Between 16 and 128 characters.";
+            case CultureIDs.Es_ES: return "Entre 16 y 128 caracteres.";
+            case CultureIDs.Fr_FR: return "Entre 16 et 128 caractères.";
+            case CultureIDs.Pt_PT: return "Entre 16 e 128 caracteres.";
+            default: return "Tra 16 e 128 caratteri.";
         }
     }
     static get PasswordRule_Lowercase() {

package/lib/hooks/useForm.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { FormModes } from "../ts";
 import { TMExceptionBoxManager, TMSpinner } from "../components";
-import { ArchiveConstraints, AreaEngine, BasketTypeEngine, DataListEngine, DcmtTypeEngine, DiskEngine, EncryptionModes, GroupEngine, JobEngine, JobTypes, LDAPDescriptor, LDAPProviders, MembershipConstraints, NumeratorDescriptor, ObjectClasses, ProcessEngine, RelationEngine, ResultTypes, SAPEngine, SavedQueryEngine, SignCertDescriptor, TaskEngine, TreeDescriptor, TSADescriptor, UserEngine, UserLevels, UserTypes, WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts-beta";
+import { AreaEngine, BasketTypeEngine, DataListEngine, DcmtTypeEngine, DiskEngine, GroupEngine, JobEngine, JobTypes, LDAPDescriptor, LDAPProviders, NumeratorDescriptor, ObjectClasses, ProcessEngine, RelationEngine, ResultTypes, SAPEngine, SavedQueryEngine, SignCertDescriptor, TaskEngine, TreeDescriptor, TSADescriptor, UserEngine, WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts-beta";
 import { PlatformObjectService } from "../services";
 import { SDKUI_Localizator, calcIsModified } from "../helper";
 export class SaveFormOptions {
@@ -16,21 +16,6 @@ export function useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChang
     const [exception, setException] = useState();
     const [validationItems, setValidationItems] = useState([]);
     // #region Normalize object
-    function normalizeDcmtType(d) {
-        d.archiveConstraint = ArchiveConstraints.None;
-        d.encryptionMode = EncryptionModes.None;
-        d.indexes = [];
-        d.metadata = [];
-        d.trgSharedArk = 0;
-        d.wfAppr = 0;
-        d.hasBlog = 0;
-        d.cico = 0;
-        return d;
-    }
-    function normalizeGroup(d) {
-        d.membershipConstraint = MembershipConstraints.Mixed;
-        return d;
-    }
     function normalizeLDAP(d) {
         d.provider = LDAPProviders.MSActiveDirectory;
         return d;
@@ -39,16 +24,6 @@ export function useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChang
         d.isAuto = 1;
         return d;
     }
-    function normalizeUser(d) {
-        d.level = UserLevels.Member;
-        d.type = UserTypes.TopMedia;
-        d.secureAuth = 1;
-        d.canDST = 0;
-        d.disabled = false;
-        d.neutralNames = 0;
-        d.onlyOnBehalfOf = 0;
-        return d;
-    }
     // #endregion
     const getDataAsync = async (id, fm) => {
         switch (fm) {

package/package.json

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