@topconsultnpm/sdkui-react 6.20.0-dev1.76 → 6.20.0-dev1.78

package/lib/components/features/tasks/TMTasksUtils.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Task_States, PdGs, Priorities, ValidationItem, SDK_Localizator, ResultTypes, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../../utils/theme';
 import { SDKUI_Localizator } from '../../../helper';
@@ -402,116 +401,107 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
     const isTaskFromAnotherUser = isTaskDescriptorDefined && areDifferentIDs(taskDescriptor.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
     const menuItems = [
         {
-            name: SDKUI_Localizator.CreateContextualTask,
-            icon: _jsx("span", { className: "dx-icon-plus" }),
-            onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
-            disabled: false,
             id: 'createContextualTask',
-            operationType: 'singleRow'
+            text: SDKUI_Localizator.CreateContextualTask,
+            icon: 'plus',
+            onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
+            disabled: false
         },
         {
-            name: SDKUI_Localizator.Create,
-            icon: _jsx("span", { className: "dx-icon-plus" }),
+            text: SDKUI_Localizator.Create,
+            icon: 'plus',
             onClick: () => { openTaskForm(FormModes.Create, undefined, false); },
-            disabled: false,
-            operationType: 'singleRow'
+            disabled: false
         },
         {
-            name: SDKUI_Localizator.Update,
-            icon: _jsx("span", { className: "dx-icon-edit" }),
+            text: SDKUI_Localizator.Update,
+            icon: 'edit',
             onClick: openEditTaskForm,
-            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
-            operationType: 'singleRow'
+            operationType: 'singleRow',
+            disabled: fromDatagrid ? false : !isTaskDescriptorDefined
         },
         {
-            name: SDKUI_Localizator.Duplicate,
-            icon: _jsx("span", { className: "dx-icon-copy" }),
+            text: SDKUI_Localizator.Duplicate,
+            icon: 'copy',
             onClick: openDuplicateTaskForm,
-            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser,
-            operationType: 'singleRow'
+            operationType: 'singleRow',
+            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },
         {
-            name: SDKUI_Localizator.Delete,
-            icon: _jsx("span", { className: "dx-icon-trash" }),
+            text: SDKUI_Localizator.Delete,
+            icon: 'trash',
             onClick: onDeleteCallback,
-            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser,
-            operationType: 'multiRow'
+            operationType: 'multiRow',
+            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },
         {
-            name: SDKUI_Localizator.MarkAs,
-            icon: _jsx("span", { className: "dx-icon-optionsgear" }),
-            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
+            icon: 'optionsgear',
+            text: SDKUI_Localizator.MarkAs,
             id: "markAs",
             operationType: 'multiRow',
-            submenu: [
-                { name: SDKUI_Localizator.NewFemale, icon: _jsx("span", { className: "dx-icon-product" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.NotStarted)), operationType: 'multiRow' },
-                { name: SDKUI_Localizator.InProgress, icon: _jsx("span", { className: "dx-icon-refresh" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.InProgress)), operationType: 'multiRow' },
-                { name: SDKUI_Localizator.Completed, icon: _jsx("span", { className: "dx-icon-check" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.Completed)), operationType: 'multiRow' },
-                { name: SDKUI_Localizator.Pending, icon: _jsx("span", { className: "dx-icon-taskstop" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.Waiting)), operationType: 'multiRow' },
-                { name: SDKUI_Localizator.Postponed, icon: _jsx("span", { className: "dx-icon-clock" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.Deferred)), operationType: 'multiRow' }
+            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
+            items: [
+                { icon: 'product', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
+                { icon: 'refresh', text: SDKUI_Localizator.InProgress, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.InProgress) },
+                { icon: 'check', text: SDKUI_Localizator.Completed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Completed) },
+                { icon: 'taskstop', text: SDKUI_Localizator.Pending, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Waiting) },
+                { icon: 'clock', text: SDKUI_Localizator.Postponed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Deferred) }
             ]
         },
         {
-            name: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: _jsx("span", { className: "dx-icon-filter" }),
+            id: 'wgContextFilter',
+            text: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: 'filter',
             onClick: () => { setShowContextualWG(prev => !prev); },
             disabled: false,
             beginGroup: true,
-            visible: fromWG,
-            id: 'wgContextFilter',
-            operationType: 'singleRow'
+            visible: fromWG
         },
         {
-            name: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: _jsx("span", { className: "dx-icon-filter" }),
+            id: 'dossierContextFilter',
+            text: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: 'filter',
             onClick: () => { setShowContextualDossier(prev => !prev); },
             disabled: false,
             beginGroup: !fromWG && !fromDocument,
-            visible: fromDossier,
-            id: 'dossierContextFilter',
-            operationType: 'singleRow'
+            visible: fromDossier
         },
         {
-            name: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: _jsx("span", { className: "dx-icon-filter" }),
+            id: 'documentContextFilter',
+            text: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: 'filter',
             onClick: () => { setShowContextualDocument(prev => !prev); },
             disabled: false,
             beginGroup: !fromDossier && !fromWG,
-            visible: fromDocument,
-            id: 'documentContextFilter',
-            operationType: 'singleRow'
+            visible: fromDocument
         },
         {
-            name: SDKUI_Localizator.GoToToday,
-            icon: _jsx("span", { className: "dx-icon-event" }),
+            icon: "event",
             onClick: () => { if (handleGoToToday) {
                 handleGoToToday();
             } },
+            text: SDKUI_Localizator.GoToToday,
             disabled: false,
             beginGroup: true,
-            operationType: 'singleRow'
         },
         {
-            name: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
-            icon: _jsx("span", { className: showSearch ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
-            onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
-            disabled: false,
             beginGroup: true,
-            operationType: 'multiRow'
+            icon: showSearch ? "eyeclose" : "eyeopen",
+            onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
+            text: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
+            disabled: false
         },
         {
-            name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
-            icon: _jsx("span", { className: showId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
+            icon: showId ? "eyeclose" : "eyeopen",
             onClick: () => setShowId(prevShowId => !prevShowId),
-            disabled: false,
-            operationType: 'multiRow'
+            text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+            disabled: false
         },
         {
-            name: SDKUI_Localizator.Refresh,
-            icon: _jsx("span", { className: "dx-icon-refresh" }),
+            text: SDKUI_Localizator.Refresh,
+            icon: 'refresh',
             onClick: () => getAllTasks(),
             disabled: false,
-            operationType: 'multiRow'
         },
     ];
     // Apply filters
@@ -539,7 +529,7 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
             item.visible === undefined);
     }
     if (showGoToToday === false) {
-        filteredMenuItems = filteredMenuItems.filter(item => item.name !== SDKUI_Localizator.GoToToday);
+        filteredMenuItems = filteredMenuItems.filter(item => item.text !== SDKUI_Localizator.GoToToday);
     }
     return filteredMenuItems;
 };

package/lib/components/features/tasks/TMTasksView.js

@@ -5,6 +5,7 @@ import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
 import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
+import ContextMenu from 'devextreme-react/context-menu';
 import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
 import { useDeviceType } from "../../base/TMDeviceProvider";
 import { FormModes } from "../../../ts";
@@ -16,7 +17,6 @@ import { TMResultManager } from "../../forms/TMResultDialog";
 import TMTasksCalendar from "./TMTasksCalendar";
 import TMTasksAgenda from "./TMTasksAgenda";
 import TMTaskForm from "./TMTaskForm";
-import { ContextMenu as TMContextMenu } from "../../NewComponents/ContextMenu";
 let abortController = new AbortController();
 const TMTasksView = (props) => {
     const { id, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, visualizedTasks, activeComponent, activeTabIndex, setActiveTabIndex, currentTask, setCurrentTask, assignedToMeCount, assignedByMeCount, allTasksFilteredCount, showId, setShowId, showSearch, setShowSearch, showContextualWG, setShowContextualWG, showContextualDossier, setShowContextualDossier, showContextualDocument, setShowContextualDocument, handleNavigateToWGs, handleNavigateToDossiers, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, afterTaskSaved, } = props;
@@ -519,13 +519,13 @@ const TMTasksView = (props) => {
         ];
     }, [showId]);
     const getFromOrToDatagridElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, customContextMenuItems: menuItems, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
+        return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
     };
     const getFromOrToAgendaElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        return _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, id: `agenda-container-${id}`, children: [_jsx(TMTasksAgenda, { id: id, showId: showId, showSearch: showSearch, visualizedTasks: fromOrToDataSource, fromCell: fromCell, toCell: toCell, currentAgendaDate: currentAgendaDate, setCurrentAgendaDate: setCurrentAgendaDate, openTaskForm: openTaskFormCallback, handleFocusedRowChange: handleFocusedRowChange }), _jsx(TMContextMenu, { items: menuItems, target: `#agenda-container-${id}` })] }) });
+        return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-agenda-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksAgenda, { id: id, showId: showId, showSearch: showSearch, visualizedTasks: fromOrToDataSource, fromCell: fromCell, toCell: toCell, currentAgendaDate: currentAgendaDate, setCurrentAgendaDate: setCurrentAgendaDate, openTaskForm: openTaskFormCallback, handleFocusedRowChange: handleFocusedRowChange }) })] });
     };
     const getFromOrToCalendarElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        return _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange }) }) });
+        return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-calendar-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange }) })] });
     };
     return _jsxs("div", { style: { width: '100%', height: '100%' }, onContextMenu: (e) => e.preventDefault(), children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: onSelectedIndexChange, id: "task-centered-tab-title", children: [_jsx(Item, { title: SDKUI_Localizator.AssignedToMe, icon: "user", tabRender: (params) => {
                                 return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedToMe, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedToMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedToMeCount > 0) ? `(${assignedToMeCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Priorities, ResultTypes, SDK_Globals, SDK_Localizator, TaskEngine, UserListCacheService, ValidationItem, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
 import styled from "styled-components";
 import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo, DateDisplayTypes, TASK_MORE_INFO_PREFIX_NAME, IconSignaturePencil, isSign4TopEnabled, IconCheck, IconCloseCircle, IconStop } from "../../../helper";
@@ -66,17 +66,12 @@ const StyledHorizontalContainer = styled.div `
 export const WorkFlowOperationButtons = (props) => {
     const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo } = props;
     const isMobile = deviceType === DeviceType.MOBILE;
-    // Stato per distinguere workflow di firma vs approvazione
-    const [isSignWorkflow, setIsSignWorkflow] = useState(false);
-    useEffect(() => {
-        // Controlla se il documento ha dei widget definiti, se il documento ha il widget SIGN4_TOP abilitato, allora è un workflow di firma
+    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render
+    const isSignWorkflow = useMemo(() => {
         if (dtd && dtd.widgets && dtd.widgets.length > 0) {
-            setIsSignWorkflow(isSign4TopEnabled(dtd.widgets));
-        }
-        else {
-            // Se non ci sono widget o non è SIGN4_TOP, imposta il workflow di default (approvazione senza firma)
-            setIsSignWorkflow(false);
+            return isSign4TopEnabled(dtd.widgets);
         }
+        return false;
     }, [dtd]);
     return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
 };

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

@@ -6,6 +6,7 @@ interface IWFDiagramProps {
     allowEdit?: boolean;
     onDiagramChange?: (newXmlDiagram: string) => void;
     workitems?: IWorkItemData[];
+    defaultAutoZoom?: boolean;
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect } from 'react';
 import { DiagramItemTypes, ArrowSymbol } from './interfaces';
 import { parseWfDiagramXml, serializeWfDiagramToXml } from './xmlParser';
 import styled, { css, keyframes } from 'styled-components';
@@ -8,7 +8,7 @@ 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 { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock, LocalizeDiagramItemType, IconWindowMinimize, IconZoomAuto } from '../../../../helper';
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../../../base/TMPopUp';
 import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 import DiagramItemForm from './DiagramItemForm';
@@ -317,13 +317,15 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems }) => {
+const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems, defaultAutoZoom = false }) => {
     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 [isAutoZoomEnabled, setIsAutoZoomEnabled] = useState(defaultAutoZoom);
     const [isLoading, setIsLoading] = useState(true);
+    const [isInitialZoomCalculated, setIsInitialZoomCalculated] = useState(!defaultAutoZoom);
     const [wfDiagram, setWfDiagram] = useState(null);
     const [selectedItems, setSelectedItems] = useState(new Set());
     const [selectedConnections, setSelectedConnections] = useState(new Set());
@@ -333,6 +335,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const initialDiagramRef = useRef(null);
     const notifiedXmlRef = useRef(null);
     const svgRef = useRef(null);
+    const containerRef = useRef(null);
     const [isDrawingConnection, setIsDrawingConnection] = useState(false);
     const [tempConnectionSource, setTempConnectionSource] = useState(null);
     const [tempConnectionEnd, setTempConnectionEnd] = useState(null);
@@ -1624,6 +1627,67 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const handleZoomOut = useCallback(() => {
         setZoomLevel(prev => Math.max(prev - 0.1, 0.5)); // Limite min a 0.5
     }, []);
+    const calculateOptimalZoom = useCallback(() => {
+        if (!wfDiagram || !containerRef.current || wfDiagram.DiagramItems.length === 0) {
+            return 1;
+        }
+        // Calcola il bounding box del diagramma
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        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);
+        });
+        const padding = 100; // Padding intorno al diagramma
+        const diagramWidth = maxX - minX + (padding * 2);
+        const diagramHeight = maxY - minY + (padding * 2);
+        // Ottieni le dimensioni del container
+        const containerWidth = containerRef.current.clientWidth;
+        const containerHeight = containerRef.current.clientHeight;
+        // Calcola il fattore di zoom per far entrare tutto il contenuto
+        const zoomX = containerWidth / diagramWidth;
+        const zoomY = containerHeight / diagramHeight;
+        // Usa il fattore più piccolo per garantire che tutto sia visibile
+        let optimalZoom = Math.min(zoomX, zoomY, 2.0); // Max 2.0
+        // Applica un minimo di 0.3 per evitare zoom troppo piccoli
+        optimalZoom = Math.max(optimalZoom, 0.3);
+        // Arrotonda per eccesso alla decina più vicina (in percentuale)
+        const zoomPercentage = optimalZoom * 100;
+        const roundedPercentage = Math.ceil(zoomPercentage / 10) * 10;
+        // Limita al massimo 100%
+        const finalPercentage = Math.min(roundedPercentage, 100);
+        return finalPercentage / 100;
+    }, [wfDiagram]);
+    const handleZoomToFit = useCallback(() => {
+        const optimalZoom = calculateOptimalZoom();
+        setZoomLevel(optimalZoom);
+        setTranslateX(0);
+        setTranslateY(0);
+        setIsAutoZoomEnabled(true);
+    }, [calculateOptimalZoom]);
+    const handleToggleAutoZoom = useCallback(() => {
+        setIsAutoZoomEnabled(prev => {
+            const newValue = !prev;
+            if (!newValue) {
+                // Se si disattiva AutoZoom, riporta lo zoom a 1
+                setZoomLevel(1);
+                setTranslateX(0);
+                setTranslateY(0);
+            }
+            else {
+                // Se si attiva AutoZoom, calcola lo zoom ottimale
+                const optimalZoom = calculateOptimalZoom();
+                setZoomLevel(optimalZoom);
+                setTranslateX(0);
+                setTranslateY(0);
+            }
+            return newValue;
+        });
+    }, [calculateOptimalZoom]);
     const formattedZoomLevel = useMemo(() => {
         return `${Math.round(zoomLevel * 100)}%`;
     }, [zoomLevel]);
@@ -1662,8 +1726,6 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         catch (error) {
             console.error("Errore durante l'elaborazione del diagramma:", error);
             setWfDiagram(null);
-        }
-        finally {
             setIsLoading(false);
         }
     }, [xmlDiagramString, getAdjustedAndRecalculatedDiagram]);
@@ -1672,6 +1734,73 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
             isUndoingRedoing.current = false;
         }
     }, [wfDiagram]);
+    // useLayoutEffect viene eseguito PRIMA del paint del browser, evitando il flash visivo
+    useLayoutEffect(() => {
+        if (defaultAutoZoom && !isInitialZoomCalculated && wfDiagram && wfDiagram.DiagramItems.length > 0 && containerRef.current) {
+            const container = containerRef.current;
+            // Calcola il bounding box del diagramma
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            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);
+            });
+            const padding = 100;
+            const diagramWidth = maxX - minX + (padding * 2);
+            const diagramHeight = maxY - minY + (padding * 2);
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+            if (containerWidth > 0 && containerHeight > 0) {
+                const zoomX = containerWidth / diagramWidth;
+                const zoomY = containerHeight / diagramHeight;
+                let optimalZoom = Math.min(zoomX, zoomY, 2.0);
+                optimalZoom = Math.max(optimalZoom, 0.3);
+                const zoomPercentage = optimalZoom * 100;
+                const roundedPercentage = Math.ceil(zoomPercentage / 10) * 10;
+                const finalPercentage = Math.min(roundedPercentage, 100);
+                setZoomLevel(finalPercentage / 100);
+                setIsInitialZoomCalculated(true);
+                setIsLoading(false);
+            }
+            else {
+                // Se il container non ha dimensioni, riprova al prossimo render
+                requestAnimationFrame(() => {
+                    setIsInitialZoomCalculated(false);
+                });
+            }
+        }
+        else if (!defaultAutoZoom && wfDiagram && isLoading) {
+            // Se non c'è autozoom, rimuovi il loading appena il diagramma è pronto
+            setIsLoading(false);
+        }
+    }, [wfDiagram, defaultAutoZoom, isInitialZoomCalculated, isLoading]);
+    // Gestisce AutoZoom: ricalcola lo zoom quando il diagramma cambia o il container viene ridimensionato
+    useEffect(() => {
+        if (!containerRef.current || !isAutoZoomEnabled || !isInitialZoomCalculated) {
+            return;
+        }
+        // Funzione per ricalcolare e applicare lo zoom se necessario
+        const updateZoom = () => {
+            if (wfDiagram && wfDiagram.DiagramItems.length > 0) {
+                const newZoom = calculateOptimalZoom();
+                if (newZoom !== undefined && Math.abs(zoomLevel - newZoom) > 0.001) {
+                    setZoomLevel(newZoom);
+                }
+            }
+        };
+        // Ricalcola lo zoom quando il diagramma cambia
+        updateZoom();
+        // Installa ResizeObserver per reagire ai ridimensionamenti del container
+        const container = containerRef.current;
+        const resizeObserver = new ResizeObserver(() => {
+            updateZoom();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [isAutoZoomEnabled, wfDiagram, calculateOptimalZoom, isInitialZoomCalculated, zoomLevel]);
     const handleCanvasDoubleClick = useCallback((event) => {
         if (isReadOnly && allowEdit) {
             toggleReadOnlyMode();
@@ -1696,8 +1825,11 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         }
     }, [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, backgroundColor: getWorkItemBackgroundColor(item.ID) }, item.ID))), calculatedConnections.map(connection => {
+                , 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, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsxs("button", { onClick: handleToggleAutoZoom, title: "AutoZoom", style: { backgroundColor: isAutoZoomEnabled ? '#66b3ff' : undefined }, children: [_jsx(IconZoomAuto, {}), !isToolbarCollapsed && _jsx("span", { children: "AutoZoom" })] }), _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, { ref: containerRef, 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, style: {
+                        opacity: (defaultAutoZoom && !isInitialZoomCalculated) ? 0 : 1,
+                        transition: 'opacity 0.15s ease-in'
+                    }, 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, backgroundColor: getWorkItemBackgroundColor(item.ID) }, 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)

package/lib/components/query/TMQueryEditor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMApplyFormProps, FormModes } from '../../ts';
+import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $borderRadius?: string;
@@ -54,5 +55,5 @@ export interface ITMQdDropDownMenuProps {
     backgroundColor?: string;
     disabled?: boolean;
     borderRadius?: string;
-    items?: any[];
+    items?: TMContextMenuItemProps[];
 }