@topconsultnpm/sdkui-react-beta 6.16.29 → 6.16.30

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { DiagramItem } from './interfaces';
+import { DiagramItem, WfInfo } from './interfaces';
 interface DiagramItemComponentProps {
+    wf?: WfInfo | null;
     item: DiagramItem;
     isSelected: boolean;
     isCurrent: boolean;

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { DiagramItemTypes } from './interfaces';
 import styled, { keyframes, css } from 'styled-components';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateDiagramItemFullDimensions, FONT_SIZE, MAX_ITEM_WIDTH, MAX_LINES, PADDING_HORIZONTAL, PADDING_TOP, SPACING_SVG_TEXT, SVG_ICON_SIZE, wrapText } from './workflowHelpers';
+import { DataListCacheService } from '@topconsultnpm/sdk-ts-beta';
 const blink = keyframes `
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
@@ -80,7 +82,7 @@ const ConnectorHitArea = styled.circle `
   opacity: 0;
   pointer-events: all;
 `;
-const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
+const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
     const diagramItemRef = useRef(null);
     const textRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -88,6 +90,26 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
     const [startDragOffset, setStartDragOffset] = useState(null);
     const [currentPosition, setCurrentPosition] = useState({ x: item.Left, y: item.Top });
     const [textDimensions, setTextDimensions] = useState({ width: 0, height: 0 });
+    const [statusData, setStatusData] = useState(undefined);
+    useEffect(() => {
+        const fetchStatusData = async () => {
+            if (item.Type === DiagramItemTypes.Status && wf?.MStatusDLID) {
+                try {
+                    const fullDataList = await DataListCacheService.GetAsync(wf.MStatusDLID);
+                    const foundItem = fullDataList?.items?.find(o => o.value == item.StatusValue);
+                    setStatusData(foundItem);
+                }
+                catch (error) {
+                    console.error("Errore durante il recupero dei dati di stato:", error);
+                    setStatusData(undefined);
+                }
+            }
+            else {
+                setStatusData(undefined);
+            }
+        };
+        fetchStatusData();
+    }, [item.Type, item.StatusValue, wf?.MStatusDLID]);
     // Calcola le dimensioni totali dell'elemento usando la funzione di utilità
     const { calculatedWidth, calculatedHeight } = useMemo(() => {
         return calculateDiagramItemFullDimensions(item, textDimensions);
@@ -235,7 +257,7 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
                 isTruncated = textLines[textLines.length - 1].endsWith('...');
             }
         }
-        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
+        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
     };
     return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
 };

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { DiagramItemTypes } from './interfaces';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts-beta';
 interface DiagramItemSvgContentProps {
     itemType: DiagramItemTypes;
     width: number;
     height: number;
     isToolboxPreview?: boolean;
+    statusData?: DataListItemDescriptor;
 }
 declare const DiagramItemSvgContent: React.FC<DiagramItemSvgContentProps>;
 export default DiagramItemSvgContent;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { DiagramItemTypes } from './interfaces'; // Assicurati che il percorso sia corretto
 import styled from 'styled-components';
+import { TMImageLibrary } from '../../../../helper';
 // Stili per il contenitore SVG nella toolbox per centrare l'elemento
 const StyledToolboxSvgContainer = styled.div `
     width: 100%;
@@ -15,7 +16,7 @@ const StyledToolboxSvgContainer = styled.div `
         display: block; // Rimuove spazi extra sotto l'SVG
     }
 `;
-const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = false }) => {
+const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = false, statusData }) => {
     const PADDING = 10;
     // ICON_SIZE e SMALL_ICON_SIZE possono essere regolati a seconda se è una preview o l'elemento reale
     const ICON_SIZE = isToolboxPreview ? Math.min(width, height) * 0.6 : 40;
@@ -39,7 +40,19 @@ const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = fal
             svgContent = (_jsx("polygon", { points: `${svgCenterX},${PADDING} ${calculatedWidth - PADDING},${svgCenterY} ${svgCenterX},${calculatedHeight - PADDING} ${PADDING},${svgCenterY}`, fill: "#87d1df", stroke: "#62d3e2", strokeWidth: "2" }));
             break;
         case DiagramItemTypes.Status:
-            svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "orange", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            // Se i dati non sono disponibili o è una preview, mostra l'icona di fallback
+            if (isToolboxPreview || !statusData?.imageID) {
+                svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "orange", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            }
+            else { // Altrimenti, mostra l'immagine personalizzata
+                svgContent = (_jsx("foreignObject", { x: (width - ICON_SIZE) / 2, y: (height - ICON_SIZE) / 2, width: ICON_SIZE, height: ICON_SIZE, children: _jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%',
+                            height: '100%'
+                        }, children: statusData?.imageID && _jsx(TMImageLibrary, { imageID: statusData.imageID }) }) }));
+            }
             break;
         case DiagramItemTypes.DataEntry:
         case DiagramItemTypes.Approval:

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

@@ -339,12 +339,17 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         if (!wfDiagram || (selectedItems.size === 0 && selectedConnections.size === 0)) {
             return;
         }
+        // 1. Filtra i nodi "Start" e "End" dal set di elementi selezionati
+        const nonDeletableItems = wfDiagram.DiagramItems.filter(item => item.Type === DiagramItemTypes.Start || item.Type === DiagramItemTypes.End);
+        const deletableSelectedItems = new Set([...selectedItems].filter(id => !nonDeletableItems.some(item => item.ID === id)));
         let newDiagramItems = wfDiagram.DiagramItems;
         let newConnections = wfDiagram.Connections;
-        if (selectedItems.size > 0) {
-            newDiagramItems = wfDiagram.DiagramItems.filter(item => !selectedItems.has(item.ID));
-            newConnections = newConnections.filter(conn => !selectedItems.has(conn.Source.ParentDiagramItem.ID) &&
-                !selectedItems.has(conn.Sink.ParentDiagramItem.ID));
+        if (deletableSelectedItems.size > 0) {
+            // 2. Filtra gli elementi del diagramma usando il set filtrato
+            newDiagramItems = wfDiagram.DiagramItems.filter(item => !deletableSelectedItems.has(item.ID));
+            // 3. Filtra le connessioni usando il set filtrato
+            newConnections = newConnections.filter(conn => !deletableSelectedItems.has(conn.Source.ParentDiagramItem.ID) &&
+                !deletableSelectedItems.has(conn.Sink.ParentDiagramItem.ID));
         }
         if (selectedConnections.size > 0) {
             newConnections = newConnections.filter(conn => !selectedConnections.has(conn.ID));
@@ -354,7 +359,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             DiagramItems: newDiagramItems,
             Connections: newConnections,
         };
-        setSelectedItems(new Set());
+        // Assicura che i nodi non cancellabili restino selezionati per coerenza UI
+        setSelectedItems(new Set([...deletableSelectedItems, ...[...selectedItems].filter(id => nonDeletableItems.some(item => item.ID === id))]));
         setSelectedConnections(new Set());
         updateDiagram(newWfDiagram, false);
     }, [wfDiagram, selectedItems, selectedConnections, setWfDiagram, setSelectedItems, setSelectedConnections, updateDiagram, readOnly]);
@@ -1380,7 +1386,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         }
     }, [wfDiagram]);
     return (_jsxs(CanvasContainer, { children: [!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" })] })] }), _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, { 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 => {
+                    (_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 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/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.29",
+    "version": "6.16.30",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "clean": "powershell Remove-Item lib/ -recurse",
         "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
         "tm-build": "npm run clean && tsc && npm run copy-files",
+        "tm-watch": "tsc -w",
         "tm-publish": "npm publish",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build"