@topconsultnpm/sdkui-react-beta 6.12.106 → 6.12.108

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

@@ -70,7 +70,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const [currentDcmt, setCurrentDcmt] = useState();
     const [dcmtFile, setDcmtFile] = useState(null);
     const [focusedMetadataValue, setFocusedMetadataValue] = useState();
-    const [showAll, setShowAll] = useState(false);
+    const [showAll, setShowAll] = useState(layoutMode === LayoutModes.Ark);
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     const deviceType = useDeviceType();

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

@@ -144,9 +144,9 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     const [zoomFactor, setZoomFactor] = useState(1);
     const [translateX, setTranslateX] = useState(0);
     const [translateY, setTranslateY] = useState(0);
-    const isDragging = useRef(false);
-    const lastX = useRef(0);
-    const lastY = useRef(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStartX = useRef(0);
+    const dragStartY = useRef(0);
     useEffect(() => {
         if (fileBlob) {
             const url = URL.createObjectURL(fileBlob);
@@ -162,29 +162,29 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
             const container = containerRef.current;
             const image = imageRef.current;
             if (container && image) {
-                const containerWidth = container.clientWidth;
-                const containerHeight = container.clientHeight;
-                const imageWidth = image.naturalWidth;
-                const imageHeight = image.naturalHeight;
-                const scaleX = containerWidth / imageWidth;
-                const scaleY = containerHeight / imageHeight;
-                const initialScale = Math.min(scaleX, scaleY);
-                setBaseZoom(initialScale);
+                const cw = container.clientWidth;
+                const ch = container.clientHeight;
+                const iw = image.naturalWidth;
+                const ih = image.naturalHeight;
+                const scaleX = cw / iw;
+                const scaleY = ch / ih;
+                const initialZoom = Math.min(scaleX, scaleY);
+                setBaseZoom(initialZoom);
                 setZoomFactor(1);
                 setTranslateX(0);
                 setTranslateY(0);
             }
         };
         const img = imageRef.current;
-        if (img?.complete) {
+        if (img?.complete)
             handleLoad();
-        }
         else {
             img?.addEventListener('load', handleLoad);
             return () => img?.removeEventListener('load', handleLoad);
         }
         return () => { };
     }, [imageUrl]);
+    const fullZoom = baseZoom * zoomFactor;
     const clampTranslation = (tx, ty, zoom) => {
         const container = containerRef.current;
         const image = imageRef.current;
@@ -201,68 +201,67 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
             y: Math.max(minY, Math.min(0, ty)),
         };
     };
-    const isZoomedIn = useMemo(() => {
-        return zoomFactor > 1;
-    }, [zoomFactor]);
-    const containerCursor = useMemo(() => {
-        if (isZoomedIn) {
-            if (isDragging)
-                return 'grabbing';
-            return 'grab';
-        }
-        return 'default';
-    }, [isZoomedIn, isDragging]);
-    const handleZoomIn = () => setZoomFactor(prev => Math.min(prev + 0.25, 3));
-    const handleZoomOut = () => setZoomFactor(prev => Math.max(prev - 0.25, 0.5));
+    const handleZoom = (delta) => {
+        const newZoom = Math.min(3, Math.max(0.5, zoomFactor + delta));
+        if (newZoom === zoomFactor)
+            return;
+        const scaleChange = newZoom / zoomFactor;
+        const newTx = translateX * scaleChange;
+        const newTy = translateY * scaleChange;
+        const clamped = clampTranslation(newTx, newTy, baseZoom * newZoom);
+        setTranslateX(clamped.x);
+        setTranslateY(clamped.y);
+        setZoomFactor(newZoom);
+    };
     const handleResetZoom = () => {
         setZoomFactor(1);
         setTranslateX(0);
         setTranslateY(0);
     };
-    const handleMouseDown = (e) => {
+    const handleZoomIn = () => handleZoom(0.25);
+    const handleZoomOut = () => handleZoom(-0.25);
+    const onMouseDown = (e) => {
         if (zoomFactor === 1)
             return;
-        isDragging.current = true;
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        lastX.current = clientX;
-        lastY.current = clientY;
+        setIsDragging(true);
+        const point = 'touches' in e ? e.touches[0] : e;
+        dragStartX.current = point.clientX;
+        dragStartY.current = point.clientY;
     };
-    const handleMouseMove = (e) => {
-        if (!isDragging.current)
+    const onMouseMove = (e) => {
+        if (!isDragging)
             return;
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        const dx = clientX - lastX.current;
-        const dy = clientY - lastY.current;
-        const newTx = translateX + dx;
-        const newTy = translateY + dy;
-        const clamped = clampTranslation(newTx, newTy, baseZoom * zoomFactor);
+        const point = 'touches' in e ? e.touches[0] : e;
+        const dx = point.clientX - dragStartX.current;
+        const dy = point.clientY - dragStartY.current;
+        const scale = baseZoom * zoomFactor;
+        const newTx = translateX + dx / scale;
+        const newTy = translateY + dy / scale;
+        const clamped = clampTranslation(newTx, newTy, scale);
         setTranslateX(clamped.x);
         setTranslateY(clamped.y);
-        lastX.current = clientX;
-        lastY.current = clientY;
-    };
-    const handleMouseUp = () => {
-        isDragging.current = false;
+        dragStartX.current = point.clientX;
+        dragStartY.current = point.clientY;
     };
+    const stopDrag = () => setIsDragging(false);
     useEffect(() => {
-        const moveHandler = (e) => handleMouseMove(e);
-        const upHandler = () => handleMouseUp();
-        window.addEventListener('mousemove', moveHandler);
-        window.addEventListener('touchmove', moveHandler);
-        window.addEventListener('mouseup', upHandler);
-        window.addEventListener('touchend', upHandler);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', stopDrag);
+        window.addEventListener('touchmove', onMouseMove);
+        window.addEventListener('touchend', stopDrag);
         return () => {
-            window.removeEventListener('mousemove', moveHandler);
-            window.removeEventListener('touchmove', moveHandler);
-            window.removeEventListener('mouseup', upHandler);
-            window.removeEventListener('touchend', upHandler);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', stopDrag);
+            window.removeEventListener('touchmove', onMouseMove);
+            window.removeEventListener('touchend', stopDrag);
         };
-    }, [baseZoom, zoomFactor, translateX, translateY]);
-    const fullZoom = baseZoom * zoomFactor;
-    const transform = `scale(${fullZoom}) translate(${translateX}px, ${translateY}px)`;
-    return (_jsxs(ImageContainer, { className: className, ref: containerRef, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, "$cursor": containerCursor, children: [imageUrl && (_jsx(StyledImage, { ref: imageRef, src: imageUrl, alt: alt, "$transform": transform })), _jsxs(Toolbar, { children: [_jsx(ZoomButton, { onClick: handleZoomOut, disabled: zoomFactor <= 0.5, children: _jsx(IconZoomOutLinear, {}) }), _jsx(ZoomButton, { onClick: handleResetZoom, disabled: zoomFactor === 1 && translateX === 0 && translateY === 0, children: SDKUI_Localizator.Restore }), _jsx(ZoomButton, { onClick: handleZoomIn, disabled: zoomFactor >= 3, children: _jsx(IconZoomInLinear, {}) })] })] }));
+    }, [translateX, translateY, fullZoom, isDragging]);
+    const cursor = useMemo(() => {
+        if (zoomFactor <= 1)
+            return 'default';
+        return isDragging ? 'grabbing' : 'grab';
+    }, [zoomFactor, isDragging]);
+    return (_jsxs(ImageContainer, { ref: containerRef, onMouseDown: onMouseDown, onTouchStart: onMouseDown, "$cursor": cursor, className: className, children: [imageUrl && (_jsx(StyledImage, { ref: imageRef, src: imageUrl, alt: alt, "$scale": fullZoom, "$tx": translateX, "$ty": translateY })), _jsxs(Toolbar, { children: [_jsx(ZoomButton, { onClick: handleZoomOut, disabled: zoomFactor <= 0.5, children: _jsx(IconZoomOutLinear, {}) }), _jsx(ZoomButton, { onClick: handleResetZoom, disabled: zoomFactor === 1 && translateX === 0 && translateY === 0, children: SDKUI_Localizator.Restore }), _jsx(ZoomButton, { onClick: handleZoomIn, disabled: zoomFactor >= 3, children: _jsx(IconZoomInLinear, {}) })] })] }));
 };
 export const TMNothingToShow = ({ text = '', secondText, fileExt, icon = _jsx(IconPreview, { fontSize: 96 }) }) => {
     return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [icon, _jsxs(StyledPreviewNotAvailable, { children: [text && _jsx("div", { children: text }), _jsxs("div", { children: [" ", secondText ?? 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] })] })] }) }));
@@ -287,6 +286,19 @@ export const StyledHeaderIcon = styled.div ` color: ${props => props.$color};  c
 export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
 const StyledPreviewNotAvailable = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; `;
 const ImageContainer = styled.div ` width: 100%; height: 100%; position: relative; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
+const ZoomButton = styled.button ` display: flex; align-items: center; justify-content: center; background: ${TMColors.primary}; color: white; border: none; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 14px; &:disabled { background: #ccc; cursor: not-allowed; } `;
 const Toolbar = styled.div ` position: absolute; bottom: 15px; left: 15px; display: flex; gap: 10px; background: rgba(255, 255, 255, 0.8); padding: 6px 10px; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); z-index: 1; `;
-const ZoomButton = styled.button ` display: flex; align-items: center; justify-content: center; background: #007bff; color: white; border: none; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 14px; &:disabled { background: #ccc; cursor: not-allowed; } `;
-const StyledImage = styled.img.attrs(props => ({ style: { transform: props.$transform, }, })) ` position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; `;
+const StyledImage = styled.img.attrs(props => ({
+    style: {
+        transform: `translate(${props.$tx}px, ${props.$ty}px) scale(${props.$scale})`,
+    },
+})) `
+    display: block;
+    max-width: none;
+    max-height: none;
+    transform-origin: top left;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  `;

package/package.json

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