@topconsultnpm/sdkui-react 6.20.0-dev1.89 → 6.20.0-dev1.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js +16 -9
- package/lib/components/NewComponents/FloatingMenuBar/styles.js +2 -2
- package/lib/components/NewComponents/FloatingMenuBar/types.d.ts +2 -0
- package/lib/components/features/workflow/diagram/WFDiagram.js +13 -4
- package/package.json +1 -1
|
@@ -243,7 +243,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
243
243
|
setState(s => ({ ...s, items: itemsToSet }));
|
|
244
244
|
}
|
|
245
245
|
}
|
|
246
|
-
}, []); //
|
|
246
|
+
}, disbaleConfigMode ? [defaultItems] : []); // Update when defaultItems change if config mode is disabled
|
|
247
247
|
const togglePin = useCallback((item) => {
|
|
248
248
|
setState(s => {
|
|
249
249
|
const isInFloatingBar = s.items.some(i => i.id === item.id);
|
|
@@ -798,15 +798,22 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
798
798
|
}
|
|
799
799
|
// Get current state (disabled and onClick) from contextMenuItems
|
|
800
800
|
const currentState = getCurrentItemState(item.id);
|
|
801
|
-
|
|
801
|
+
// Prefer currentState.disabled if contextMenuItems has items, otherwise use item.disabled
|
|
802
|
+
const isDisabled = (contextMenuItems.length > 0 && currentState.disabled !== undefined)
|
|
803
|
+
? currentState.disabled === true
|
|
804
|
+
: item.disabled === true;
|
|
802
805
|
const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
|
|
803
|
-
return (
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
806
|
+
return (_jsx(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: item.staticItem ? (
|
|
807
|
+
// Visualizza l'elemento statico personalizzato
|
|
808
|
+
_jsxs(_Fragment, { children: [item.staticItem, state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] })) : (
|
|
809
|
+
// Visualizza il pulsante standard
|
|
810
|
+
_jsxs(_Fragment, { children: [_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
|
|
811
|
+
if (state.isConfigMode || isDisabled)
|
|
812
|
+
return;
|
|
813
|
+
if (currentOnClick) {
|
|
814
|
+
currentOnClick();
|
|
815
|
+
}
|
|
816
|
+
}, disabled: isDisabled, "$isActive": item.isToggle, children: item.icon }) }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] })) }, item.id));
|
|
810
817
|
}), !state.isConfigMode && !disbaleConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: false, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0
|
|
811
818
|
? 'Devi aggiungere almeno un item'
|
|
812
819
|
: SDKUI_Localizator.Save, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0 || !hasChanges(), children: _jsx(IconSave, { fontSize: 20 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Close, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.CloseButton, { onClick: handleClose, children: _jsx(IconCloseOutline, { fontSize: 20 }) }) })] })] }))] })] }));
|
|
@@ -147,7 +147,7 @@ export const MenuButton = styled.button `
|
|
|
147
147
|
justify-content: center;
|
|
148
148
|
width: 30px;
|
|
149
149
|
height: 30px;
|
|
150
|
-
background: transparent;
|
|
150
|
+
background: ${props => props.$isActive ? 'rgba(102, 179, 255, 0.3)' : 'transparent'};
|
|
151
151
|
border: none;
|
|
152
152
|
border-radius: 8px;
|
|
153
153
|
color: white;
|
|
@@ -157,7 +157,7 @@ export const MenuButton = styled.button `
|
|
|
157
157
|
position: relative;
|
|
158
158
|
|
|
159
159
|
&:hover:not(:disabled) {
|
|
160
|
-
background: rgba(255, 255, 255, 0.2);
|
|
160
|
+
background: ${props => props.$isActive ? 'rgba(102, 179, 255, 0.4)' : 'rgba(255, 255, 255, 0.2)'};
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
&:active:not(:disabled) {
|
|
@@ -7,6 +7,8 @@ export interface TMFloatingMenuItem {
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
isPinned?: boolean;
|
|
9
9
|
isSeparator?: boolean;
|
|
10
|
+
isToggle?: boolean;
|
|
11
|
+
staticItem?: React.ReactNode;
|
|
10
12
|
}
|
|
11
13
|
export interface TMFloatingMenuBarProps {
|
|
12
14
|
containerRef: React.RefObject<HTMLElement | null>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect } from 'react';
|
|
3
3
|
import { DiagramItemTypes, ArrowSymbol } from './interfaces';
|
|
4
4
|
import { parseWfDiagramXml, serializeWfDiagramToXml } from './xmlParser';
|
|
5
5
|
import styled, { css, keyframes } from 'styled-components';
|
|
6
|
-
import { CultureIDs, DataListCacheService, SearchEngine, WFAppTypes, WorkItemStatus } from "@topconsultnpm/sdk-ts";
|
|
6
|
+
import { AppModules, CultureIDs, DataListCacheService, SDK_Globals, SearchEngine, WFAppTypes, WorkItemStatus } from "@topconsultnpm/sdk-ts";
|
|
7
7
|
import ConnectionComponent from './ConnectionComponent';
|
|
8
8
|
import DiagramItemComponent from './DiagramItemComponent';
|
|
9
9
|
import DiagramItemSvgContent from './DiagramItemSvgContent';
|
|
@@ -14,6 +14,7 @@ import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
|
|
|
14
14
|
import DiagramItemForm from './DiagramItemForm';
|
|
15
15
|
import ReactDOM from 'react-dom';
|
|
16
16
|
import ConnectionForm from './ConnectionForm';
|
|
17
|
+
import TMFloatingMenuBar from '../../../NewComponents/FloatingMenuBar';
|
|
17
18
|
const ZoomLevelText = styled.span `
|
|
18
19
|
font-size: 0.9em;
|
|
19
20
|
color: #555;
|
|
@@ -21,6 +22,7 @@ const ZoomLevelText = styled.span `
|
|
|
21
22
|
background-color: white;
|
|
22
23
|
padding: 2px 4px; /* Aggiunto un leggero padding per chiarezza */
|
|
23
24
|
border-radius: 4px;
|
|
25
|
+
width: 40px;
|
|
24
26
|
|
|
25
27
|
/* A. Modalità Compressa (non Floating & Collapsed) */
|
|
26
28
|
${props => !props.$isFloating && props.$isCollapsed
|
|
@@ -1805,6 +1807,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
|
|
|
1805
1807
|
}
|
|
1806
1808
|
}, [isModalOpen, isConnectionModalOpen]);
|
|
1807
1809
|
const fullScreenRef = useRef(null);
|
|
1810
|
+
const diagramRef = useRef(null);
|
|
1808
1811
|
// Gestione focus automatico quando si entra in fullscreen
|
|
1809
1812
|
useEffect(() => {
|
|
1810
1813
|
if (isFullScreen && fullScreenRef.current) {
|
|
@@ -1812,7 +1815,14 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
|
|
|
1812
1815
|
}
|
|
1813
1816
|
}, [isFullScreen]);
|
|
1814
1817
|
const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
|
|
1815
|
-
, onChange: handleFileChange, style: { display: 'none' } }),
|
|
1818
|
+
, onChange: handleFileChange, style: { display: 'none' } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER ?
|
|
1819
|
+
_jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 1, y: 85 }, disbaleConfigMode: true, defaultItems: [
|
|
1820
|
+
{ icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
|
|
1821
|
+
{ icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
|
|
1822
|
+
{ icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },
|
|
1823
|
+
{ icon: _jsx(_Fragment, {}), name: 'Zoom Level', onClick: () => { }, id: 'zoom-level', isPinned: true, staticItem: _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel }) }
|
|
1824
|
+
], isConstrained: true }) :
|
|
1825
|
+
_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 ?
|
|
1816
1826
|
(_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: {
|
|
1817
1827
|
opacity: (defaultAutoZoom && !isInitialZoomCalculated) ? 0 : 1,
|
|
1818
1828
|
transition: 'opacity 0.15s ease-in'
|
|
@@ -1828,7 +1838,6 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
|
|
|
1828
1838
|
const isThisConnectionBeingDragged = isDraggingExistingConnectionEndpoint && draggingConnectionId === connection.ID;
|
|
1829
1839
|
return (_jsx(ConnectionComponent, { connection: connection, isSelected: selectedConnections.has(connection.ID), sourcePoint: sourcePoint, sinkPoint: sinkPoint, isTemporary: isThisConnectionBeingDragged, onClick: handleConnectionClick, onDoubleClick: handleDoubleClickConnection, onConnectionEndpointMouseDown: handleConnectionEndpointMouseDown }, connection.ID));
|
|
1830
1840
|
}), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) })) : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(DiagramItemForm, { itemToEdit: itemToEdit, wf: wfDiagram?.Info, onClose: handleCloseModal, onApply: handleUpdateDiagramItem })), isConnectionModalOpen && connectionToEdit && (_jsx(ConnectionForm, { connectionToEdit: connectionToEdit, onClose: () => setIsConnectionModalOpen(false), onApply: handleUpdateConnection }))] }));
|
|
1831
|
-
const diagramRef = useRef(null);
|
|
1832
1841
|
return (_jsxs(_Fragment, { children: [!isFullScreen && (_jsx(DiagramWrapper, { ref: diagramRef, children: diagramContent })), isFullScreen && ReactDOM.createPortal(_jsx(FullScreenContainer, { ref: fullScreenRef, tabIndex: 0, onKeyDown: handleFullScreenKeyDown, children: diagramContent }), document.body)] }));
|
|
1833
1842
|
};
|
|
1834
1843
|
export default WFDiagram;
|