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

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

@@ -1,264 +0,0 @@
-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';
-const blink = keyframes `
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-`;
-const pulseAnimation = keyframes `
-0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-`;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
-`;
-const AnimatingGroup = styled.g `
-  ${({ $isCurrent }) => $isCurrent &&
-    css `
-      animation: ${pulseAnimation} 1.5s infinite;
-    `}
-`;
-const StyledDiagramItem = styled.g `
-  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
-  filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
-  
-  & .item-main-shape {
-    fill: transparent;
-    stroke: ${props => {
-    if (props.$isDragging)
-        return '#ffc107';
-    if (props.$isSelected)
-        return '#007bff';
-    return 'none';
-}};
-    stroke-width: ${props => {
-    if (props.$isDragging)
-        return 2;
-    if (props.$isSelected)
-        return 2;
-    return 1;
-}};
-    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
-  }
-
-  & .item-text {
-    font-size: 11px;
-    fill: #333;
-    text-anchor: middle;
-    user-select: none;
-    pointer-events: none;
-  }
-`;
-const Connector = styled.circle `
-  fill: transparent;
-  stroke: blue;
-  stroke-width: 1;
-  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
-  opacity: ${props => (props.$isVisible ? 1 : 0)};
-  transition: opacity 0.2s ease-in-out;
-`;
-const ConnectorHitArea = styled.circle `
-  fill: transparent;
-  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
-  opacity: 0;
-  pointer-events: all;
-`;
-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);
-    const [isHovered, setIsHovered] = useState(false);
-    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);
-    }, [item.ItemName, textDimensions]);
-    useEffect(() => {
-        setCurrentPosition({ x: item.Left, y: item.Top });
-    }, [item.Left, item.Top, item.ID]);
-    // Misura le dimensioni del testo dopo il rendering
-    useEffect(() => {
-        if (textRef.current && item.ItemName) {
-            const bbox = textRef.current.getBBox();
-            setTextDimensions({ width: bbox.width, height: bbox.height });
-        }
-        else if (!item.ItemName) {
-            setTextDimensions({ width: 0, height: 0 });
-        }
-    }, [item.ItemName]);
-    useEffect(() => {
-        // Solo se le dimensioni calcolate sono diverse da quelle correntemente memorizzate in item.Width/Height
-        // Questo è cruciale per evitare loop di rendering infiniti.
-        if (onDimensionsChange && (calculatedWidth !== item.Width || calculatedHeight !== item.Height)) {
-            onDimensionsChange(item.ID, calculatedWidth, calculatedHeight);
-        }
-    }, [item.ID, calculatedWidth, calculatedHeight, item.Width, item.Height, onDimensionsChange]);
-    const handleMouseDown = useCallback((event) => {
-        if (readOnly)
-            return;
-        if (event.button !== 0)
-            return;
-        const targetElement = event.target;
-        if (targetElement.getAttribute('data-is-connector') === 'true') {
-            return;
-        }
-        event.stopPropagation();
-        setIsDragging(true);
-        const svgElement = diagramItemRef.current?.ownerSVGElement;
-        if (svgElement) {
-            const svgPoint = svgElement.createSVGPoint();
-            svgPoint.x = event.clientX;
-            svgPoint.y = event.clientY;
-            const CTM = svgElement.getScreenCTM()?.inverse();
-            const transformedPoint = svgPoint.matrixTransform(CTM);
-            setStartDragOffset({
-                x: transformedPoint.x - currentPosition.x,
-                y: transformedPoint.y - currentPosition.y,
-            });
-        }
-    }, [currentPosition.x, currentPosition.y, readOnly]);
-    const handleMouseMove = useCallback((event) => {
-        if (readOnly)
-            return;
-        if (!isDragging || !startDragOffset || !diagramItemRef.current)
-            return;
-        event.preventDefault();
-        const svgElement = diagramItemRef.current.ownerSVGElement;
-        if (svgElement) {
-            const svgPoint = svgElement.createSVGPoint();
-            svgPoint.x = event.clientX;
-            svgPoint.y = event.clientY;
-            const CTM = svgElement.getScreenCTM()?.inverse();
-            const transformedPoint = svgPoint.matrixTransform(CTM);
-            const newX = transformedPoint.x - startDragOffset.x;
-            const newY = transformedPoint.y - startDragOffset.y;
-            setCurrentPosition({ x: newX, y: newY });
-            onDrag(item.ID, newX, newY);
-        }
-    }, [isDragging, startDragOffset, onDrag, item.ID, readOnly]);
-    const handleConnectorMouseUpLocal = (event, connectorName) => {
-        if (readOnly)
-            return;
-        event.stopPropagation();
-        onConnectorMouseUp(item.ID, connectorName);
-    };
-    const handleMouseUp = useCallback((event) => {
-        if (readOnly)
-            return;
-        if (!isDragging || !startDragOffset)
-            return;
-        setIsDragging(false);
-        setStartDragOffset(null);
-        onDragEnd(item.ID, currentPosition.x, currentPosition.y);
-    }, [isDragging, startDragOffset, onDragEnd, item.ID, currentPosition.x, currentPosition.y, readOnly]);
-    useEffect(() => {
-        if (isDragging && !readOnly) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-        }
-        else {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isDragging, handleMouseMove, handleMouseUp, readOnly]);
-    const handleItemClick = useCallback((event) => {
-        if (readOnly)
-            return;
-        if (!isDragging) {
-            onClick(item.ID, event);
-        }
-    }, [item.ID, onClick, isDragging, readOnly]);
-    const handleMouseEnter = useCallback(() => {
-        setIsHovered(true);
-    }, []);
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-    const handleDoubleClick = useCallback(() => {
-        onDoubleClick?.(item.ID);
-    }, [onDoubleClick, item.ID]);
-    const renderContent = () => {
-        const renderConnectorWithHitArea = (cx, cy, connectorName) => (_jsxs(_Fragment, { children: [_jsx(Connector, { cx: cx, cy: cy, r: 4, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly }), _jsx(ConnectorHitArea, { cx: cx, cy: cy, r: 15, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly, "data-is-connector": "true", onMouseDown: (e) => {
-                        if (readOnly)
-                            return;
-                        e.stopPropagation();
-                        onConnectorMouseDown(item.ID, connectorName, e);
-                    }, onMouseUp: (e) => handleConnectorMouseUpLocal(e, connectorName) })] }));
-        const connectors = (_jsxs(_Fragment, { children: [renderConnectorWithHitArea(0, calculatedHeight / 2, "Left"), renderConnectorWithHitArea(calculatedWidth, calculatedHeight / 2, "Right"), renderConnectorWithHitArea(calculatedWidth / 2, 0, "Top"), renderConnectorWithHitArea(calculatedWidth / 2, calculatedHeight, "Bottom")] }));
-        // Determina la dimensione effettiva dell'icona SVG che verrà renderizzata
-        const iconRenderWidth = item.ItemName ? SVG_ICON_SIZE : 60;
-        const iconRenderHeight = item.ItemName ? SVG_ICON_SIZE : 60;
-        // Calcola la posizione X per centrare l'icona SVG orizzontalmente
-        const svgX = (calculatedWidth - iconRenderWidth) / 2;
-        let svgY;
-        if (item.ItemName) {
-            // Se c'è testo, posiziona l'SVG in alto (PADDING_TOP) per lasciare spazio al testo sotto
-            svgY = PADDING_TOP;
-        }
-        else {
-            // Se non c'è testo, centra verticalmente l'icona SVG all'interno dell'altezza calcolata
-            svgY = (calculatedHeight - iconRenderHeight) / 2;
-        }
-        // Calculate text lines for wrapping
-        let textLines = [];
-        let isTruncated = false;
-        if (item.ItemName) {
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            if (context) {
-                context.font = `${FONT_SIZE}px sans-serif`;
-                textLines = wrapText(item.ItemName, MAX_ITEM_WIDTH - (PADDING_HORIZONTAL * 2), MAX_LINES, context);
-                // Check if the last line contains an ellipsis to determine truncation
-                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, 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() }) }));
-};
-export default React.memo(DiagramItemComponent);

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { DiagramItem, WfInfo } from './interfaces';
-interface DiagramItemFormProps {
-    itemToEdit: DiagramItem;
-    wf: WfInfo | null | undefined;
-    onClose: () => void;
-    onApply: (updatedItem: DiagramItem) => void;
-}
-declare const DiagramItemForm: React.FC<DiagramItemFormProps>;
-export default DiagramItemForm;