@alveole/components 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.18";
+export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.19";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.18";
+export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.19";

package/dist/ui/DocumentViewer/DocumentViewer.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { type DocumentViewerProps } from './DocumentViewer.types';
-export declare const DocumentViewer: (props: DocumentViewerProps) => import("react").JSX.Element;
+export declare const DocumentViewer: (props: DocumentViewerProps) => React.JSX.Element;
 //# sourceMappingURL=DocumentViewer.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMlE,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAkDxD,CAAC"}
+{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,mBAAmB,EAA+B,MAAM,wBAAwB,CAAC;AAO/F,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA4DxD,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.js

@@ -5,12 +5,20 @@ import { DocumentViewerImage } from './DocumentViewerImage';
 import { DocumentViewerPDF } from './DocumentViewerPDF';
 import { DocumentViewerToolbar } from './DocumentViewerToolbar';
 import { usePilotageDeDocument } from './usePilotageDeDocument';
+import { usePleinEcran } from './usePleinEcran';
 export const DocumentViewer = (props) => {
-    const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, ...boxProps } = props;
+    const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, allowFullscreen = false, ...boxProps } = props;
     const styles = useStyles();
     const { rotation, page, state, onPdfReady, onRotateLeft, onRotateRight, onNextPage, onPreviousPage } = usePilotageDeDocument(type);
-    return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: onRotateLeft, onRotateRight: onRotateRight, onNextPage: onNextPage, onPreviousPage: onPreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
-                            ...styles.viewerContainer,
-                            ...(children ? { borderBottomRightRadius: 0 } : {}),
-                        }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: onPdfReady, errorLabel: pdfErrorLabel }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
+    const { poserLeCadre, ...pleinEcran } = usePleinEcran(allowFullscreen);
+    return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", ref: poserLeCadre, flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: onRotateLeft, onRotateRight: onRotateRight, onNextPage: onNextPage, onPreviousPage: onPreviousPage, pleinEcran: pleinEcran.disponible ? pleinEcran.pleinEcran : undefined, onTogglePleinEcran: pleinEcran.basculer }), _jsx(ContenuDuDocument, { type: type, source: source, page: page, rotation: rotation, height: height, onPdfReady: onPdfReady, pdfErrorLabel: pdfErrorLabel, withChildren: children != null })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
+};
+/** Le cadre du document, image ou PDF, sous la barre d'outils. */
+const ContenuDuDocument = (props) => {
+    const { type, source, page, rotation, height, onPdfReady, pdfErrorLabel, withChildren } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "document-viewer-container", style: {
+            ...styles.viewerContainer,
+            ...(withChildren ? { borderBottomRightRadius: 0 } : {}),
+        }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: onPdfReady, errorLabel: pdfErrorLabel }))] }) }));
 };

package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,eAAe,mCAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAQxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBASkB;AAElB,eAAO,MAAM,eAAe,mCAU3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAQxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.stories.js

@@ -8,12 +8,12 @@ export default {
     tags: ['ui'],
     experimental: false,
     webOnly: true,
-    description: 'Viewer de documents (PDF, Image)',
+    description: 'Viewer de documents (PDF, Image). Ctrl/⌘ + molette pour zoomer, double-clic pour revenir à 100 %, bouton plein écran avec `allowFullscreen`.',
     component: DocumentViewer,
     styleFn: useStyles,
 };
-export const DocumentImageEx = () => (_jsx(Box, { width: "100%", maxW: 500, height: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", source: "https://picsum.photos/1000/2000", height: "100%" }) }));
-export const DocumentPdf = () => (_jsx(Box, { width: "100%", height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "/document-exemple.pdf", height: "100%" }) }));
+export const DocumentImageEx = () => (_jsx(Box, { width: "100%", maxW: 500, height: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", allowFullscreen: true, source: "https://picsum.photos/1000/2000", height: "100%" }) }));
+export const DocumentPdf = () => (_jsx(Box, { width: "100%", height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "/document-exemple.pdf", height: "100%", allowFullscreen: true }) }));
 export const DocumentPdfError = () => (_jsx(Box, { width: "100%", height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF en erreur", type: "pdf", source: "https://example.com/document-inexistant.pdf", height: "100%" }) }));
 export const WithChildren = () => (_jsx(Box, { width: "100%", height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "/document-exemple.pdf", height: "100%", children: _jsx(Box, { p: '2W', children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
 export * as Sources from './DocumentViewer.stories.sources';

package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA0O,CAAC;AAEvQ,eAAO,MAAM,WAAW,cAAwN,CAAC;AAEjP,eAAO,MAAM,gBAAgB,cAA8R,CAAC;AAE5T,eAAO,MAAM,YAAY,cAAwT,CAAC;AAElV,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAAkS,CAAC;AAE/T,eAAO,MAAM,WAAW,cAAwO,CAAC;AAEjQ,eAAO,MAAM,gBAAgB,cAA8R,CAAC;AAE5T,eAAO,MAAM,YAAY,cAAwT,CAAC;AAElV,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/DocumentViewer/DocumentViewer.stories.tsx
-export const DocumentImageEx = () => "export const DocumentImageEx = () => (\n  <Box width=\"100%\" maxW={500} height={500}>\n    <DocumentViewer title=\"Document image\" type=\"image\" source=\"https://picsum.photos/1000/2000\" height=\"100%\" />\n  </Box>\n);";
-export const DocumentPdf = () => "export const DocumentPdf = () => (\n  <Box width=\"100%\" height={400} maxW={500}>\n    <DocumentViewer title=\"Document PDF\" type=\"pdf\" source=\"/document-exemple.pdf\" height=\"100%\" />\n  </Box>\n);";
+export const DocumentImageEx = () => "export const DocumentImageEx = () => (\n  <Box width=\"100%\" maxW={500} height={500}>\n    <DocumentViewer\n      title=\"Document image\"\n      type=\"image\"\n      allowFullscreen\n      source=\"https://picsum.photos/1000/2000\"\n      height=\"100%\"\n    />\n  </Box>\n);";
+export const DocumentPdf = () => "export const DocumentPdf = () => (\n  <Box width=\"100%\" height={400} maxW={500}>\n    <DocumentViewer title=\"Document PDF\" type=\"pdf\" source=\"/document-exemple.pdf\" height=\"100%\" allowFullscreen />\n  </Box>\n);";
 export const DocumentPdfError = () => "export const DocumentPdfError = () => (\n  <Box width=\"100%\" height={400} maxW={500}>\n    <DocumentViewer\n      title=\"Document PDF en erreur\"\n      type=\"pdf\"\n      source=\"https://example.com/document-inexistant.pdf\"\n      height=\"100%\"\n    />\n  </Box>\n);";
 export const WithChildren = () => "export const WithChildren = () => (\n  <Box width=\"100%\" height={600}>\n    <DocumentViewer title=\"Document PDF\" type=\"pdf\" source=\"/document-exemple.pdf\" height=\"100%\">\n      <Box p={'2W'}>\n        <Typography>Contenu enfant</Typography>\n      </Box>\n    </DocumentViewer>\n  </Box>\n);";
 export const storySources = {

package/dist/ui/DocumentViewer/DocumentViewer.types.d.ts

@@ -8,5 +8,7 @@ export type DocumentViewerProps = BoxProps & {
     height?: BoxProps['height'];
     ChildrenProps?: Omit<BoxProps, 'children'>;
     pdfErrorLabel?: string;
+    /** Affiche le bouton plein ecran dans la barre d'outils (web, si le navigateur le permet). */
+    allowFullscreen?: boolean;
 };
 //# sourceMappingURL=DocumentViewer.types.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewer.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.types.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAExD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"DocumentViewer.types.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAExD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8FAA8F;IAC9F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps } from '../../core/Box';
 import { DocumentViewerRotation } from './DocumentViewer.types';
 export type DocumentViewerImageProps = {
@@ -7,5 +6,5 @@ export type DocumentViewerImageProps = {
     rotation: DocumentViewerRotation;
     scale?: number;
 };
-export declare const DocumentViewerImage: (props: DocumentViewerImageProps) => React.JSX.Element;
+export declare const DocumentViewerImage: (props: DocumentViewerImageProps) => import("react").JSX.Element;
 //# sourceMappingURL=DocumentViewerImage.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIhE,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,sBA6ClE,CAAC"}
+{"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,gCA6BlE,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerImage.js

@@ -1,25 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
 import { Box } from '../../core/Box';
 import { Image } from '../../core/Image';
 import { useStyles } from './DocumentViewer.styles';
-import { positionEnPourcentage } from './documentViewerPdfCalculs';
-import { lirePointeurWeb } from './pointeurWeb';
+import { useZoomMolette } from './useZoomMolette';
 export const DocumentViewerImage = (props) => {
     const { source, rotation, height, scale = 1 } = props;
     const styles = useStyles();
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
-    const hoveredScale = isHovered ? 2 : 1;
-    const handlePointerMove = React.useCallback((event) => {
-        const pointeur = lirePointeurWeb(event);
-        if (!pointeur)
-            return;
-        const { x, y } = positionEnPourcentage(pointeur);
-        const origin = getRotatedTransformOrigin(x, y, rotation);
-        setTransformOrigin(`${origin.x}% ${origin.y}%`);
-    }, [rotation]);
-    return (_jsx(Box, { tag: "document-viewer-image", width: '100%', height: height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerImageContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', children: _jsx(Box, { width: '100%', height: '100%', style: { transform: [{ rotate: `${rotation}deg` }] }, children: _jsx(Box, { width: '100%', height: '100%', style: [styles.viewerImageZoomLayer, { transformOrigin }, { transform: [{ scale: scale * hoveredScale }] }], children: _jsx(Image, { source: { uri: source }, contentFit: "contain", width: '100%', height: '100%', pointerEvents: "none" }) }) }) }) }));
+    const { poserLeCadre, ...zoom } = useZoomMolette();
+    const origine = getRotatedTransformOrigin(zoom.position.x, zoom.position.y, rotation);
+    const transformOrigin = `${origine.x}% ${origine.y}%`;
+    return (_jsx(Box, { tag: "document-viewer-image", width: '100%', height: height, ref: poserLeCadre, onPointerMove: zoom.onDeplacement, style: styles.viewerImageContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', children: _jsx(Box, { width: '100%', height: '100%', style: { transform: [{ rotate: `${rotation}deg` }] }, children: _jsx(Box, { width: '100%', height: '100%', style: [styles.viewerImageZoomLayer, { transformOrigin }, { transform: [{ scale: scale * zoom.echelle }] }], children: _jsx(Image, { source: { uri: source }, contentFit: "contain", width: '100%', height: '100%', pointerEvents: "none" }) }) }) }) }));
 };
 const getRotatedTransformOrigin = (x, y, rotation) => {
     switch (rotation) {

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAOhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAwDF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAkC9D,CAAC"}
+{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAOhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA+DF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAmC9D,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.js

@@ -6,19 +6,19 @@ import { useStyles } from './DocumentViewer.styles';
 import { useDocumentPdfCharge } from './useDocumentPdfCharge';
 import { useEtatReinitialiseParCle } from './useEtatReinitialiseParCle';
 import { useRenduDePage } from './useRenduDePage';
-import { useSurvolAvecZoom } from './useSurvolAvecZoom';
 import { useTailleParResizeObserver } from './useTailleParResizeObserver';
-/** Le cadre du visualiseur : la mesure invisible, le canvas a l'echelle du survol, et
+import { useZoomMolette } from './useZoomMolette';
+/** Le cadre du visualiseur : la mesure invisible, le canvas a l'echelle du zoom, et
  *  l'incrustation d'erreur quand le document ou la page n'a pas pu se rendre. */
-const ZonePdf = ({ mesureRef, canvasRef, tailleRendue, survol, hasError, errorLabel, height }) => {
+const ZonePdf = ({ mesureRef, canvasRef, tailleRendue, poserLeCadre, zoom, hasError, errorLabel, height, }) => {
     const styles = useStyles();
-    return (_jsxs(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onMouseEnter: survol.onEntree, onMouseLeave: survol.onSortie, onPointerEnter: survol.onEntree, onPointerLeave: survol.onSortie, onPointerMove: survol.onDeplacement, style: [styles.viewerPdfContent, { position: 'relative' }], children: [_jsx("div", { ref: mesureRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }), _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [_jsx(Box, { style: [
+    return (_jsxs(Box, { tag: "document-viewer-pdf", width: '100%', height: height, ref: poserLeCadre, onPointerMove: zoom.onDeplacement, style: [styles.viewerPdfContent, { position: 'relative' }], children: [_jsx("div", { ref: mesureRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }), _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [_jsx(Box, { style: [
                             styles.viewerPdfCanvasWrapper,
                             {
                                 width: tailleRendue.width,
                                 height: tailleRendue.height,
-                                transformOrigin: survol.origine,
-                                transform: [{ scale: survol.echelle }],
+                                transformOrigin: zoom.origine,
+                                transform: [{ scale: zoom.echelle }],
                             },
                         ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) }), hasError && (_jsx(Box, { style: styles.viewerPdfOverlay, children: _jsx(Typography, { style: styles.viewerPdfErrorLabel, children: errorLabel }) }))] })] }));
 };
@@ -33,6 +33,6 @@ export const DocumentViewerPDF = (props) => {
     const [erreurDeRendu, setErreurDeRendu] = useEtatReinitialiseParCle(source);
     const onErreurDeRendu = React.useCallback(() => setErreurDeRendu(true), [setErreurDeRendu]);
     const tailleRendue = useRenduDePage({ pdf, page, rotation, scale, cadre, canvasRef, onErreur: onErreurDeRendu });
-    const survol = useSurvolAvecZoom();
-    return (_jsx(ZonePdf, { mesureRef: mesureRef, canvasRef: canvasRef, tailleRendue: tailleRendue, survol: survol, hasError: erreurDeChargement || erreurDeRendu, errorLabel: errorLabel, height: height }));
+    const { poserLeCadre, ...zoom } = useZoomMolette();
+    return (_jsx(ZonePdf, { mesureRef: mesureRef, canvasRef: canvasRef, tailleRendue: tailleRendue, poserLeCadre: poserLeCadre, zoom: zoom, hasError: erreurDeChargement || erreurDeRendu, errorLabel: errorLabel, height: height }));
 };

package/dist/ui/DocumentViewer/DocumentViewerToolbar.d.ts

@@ -13,6 +13,9 @@ export type DocumentViewerToolbarProps = {
     onRotateRight: () => void;
     onPreviousPage?: () => void;
     onNextPage?: () => void;
+    /** Absent quand le plein ecran n'est pas disponible : le bouton n'est alors pas affiche. */
+    pleinEcran?: boolean;
+    onTogglePleinEcran?: () => void;
 };
 export declare const DocumentViewerToolbar: (props: DocumentViewerToolbarProps) => import("react").JSX.Element;
 //# sourceMappingURL=DocumentViewerToolbar.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerToolbar.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,0BAA0B,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,gCAsDtE,CAAC"}
+{"version":3,"file":"DocumentViewerToolbar.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,0BAA0B,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,gCAkEtE,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerToolbar.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { useStyles } from './DocumentViewer.styles';
 import { ToolbarButton } from './DocumentViewerToolbarButton';
 export const DocumentViewerToolbar = (props) => {
-    const { title, state, withChildren, onRotateLeft, onRotateRight, onNextPage, onPreviousPage } = props;
+    const { title, state, withChildren, onRotateLeft, onRotateRight, onNextPage, onPreviousPage, pleinEcran, onTogglePleinEcran, } = props;
     const styles = useStyles();
     const isPdf = state.fileType === 'pdf';
     const isFirstPage = state.page === 1;
@@ -13,5 +13,9 @@ export const DocumentViewerToolbar = (props) => {
     return (_jsxs(Box, { tag: "document-viewer-toolbar", style: {
             ...styles.toolbar,
             ...(withChildren ? { borderTopRightRadius: 0 } : {}),
-        }, children: [_jsx(Box, { children: _jsx(Typography, { style: styles.toolbarTitle, children: title }) }), _jsxs(Box, { tag: "document-viewer-toolbar-actions", style: styles.toolbarAction, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onRotateLeft, icon: "RotateCcwSquare", accessibilityLabel: "Pivoter vers la gauche" }), _jsx(ToolbarButton, { onPress: onRotateRight, icon: "RotateCwSquare", accessibilityLabel: "Pivoter vers la droite" })] }), _jsx(Box, { style: styles.toolbarDivider }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onPreviousPage, disabled: isFirstPage || !hasPagination, icon: "SquareChevronLeft", accessibilityLabel: "Page precedente" }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsxs(Typography, { style: styles.toolbarState, children: [hasPagination ? state.page : 1, " / ", hasPagination ? state.totalPages : 1] }) }), _jsx(ToolbarButton, { onPress: onNextPage, disabled: isLastPage || !hasPagination, icon: "SquareChevronRight", accessibilityLabel: "Page suivante" })] })] })] }));
+        }, children: [_jsx(Box, { children: _jsx(Typography, { style: styles.toolbarTitle, children: title }) }), _jsxs(Box, { tag: "document-viewer-toolbar-actions", style: styles.toolbarAction, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onRotateLeft, icon: "RotateCcwSquare", accessibilityLabel: "Pivoter vers la gauche" }), _jsx(ToolbarButton, { onPress: onRotateRight, icon: "RotateCwSquare", accessibilityLabel: "Pivoter vers la droite" })] }), _jsx(Box, { style: styles.toolbarDivider }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onPreviousPage, disabled: isFirstPage || !hasPagination, icon: "SquareChevronLeft", accessibilityLabel: "Page precedente" }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsxs(Typography, { style: styles.toolbarState, children: [hasPagination ? state.page : 1, " / ", hasPagination ? state.totalPages : 1] }) }), _jsx(ToolbarButton, { onPress: onNextPage, disabled: isLastPage || !hasPagination, icon: "SquareChevronRight", accessibilityLabel: "Page suivante" })] }), pleinEcran !== undefined && _jsx(BoutonPleinEcran, { pleinEcran: pleinEcran, onPress: onTogglePleinEcran })] })] }));
+};
+const BoutonPleinEcran = ({ pleinEcran, onPress }) => {
+    const styles = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { style: styles.toolbarDivider }), _jsx(ToolbarButton, { onPress: onPress, icon: pleinEcran ? 'Minimize' : 'Maximize', accessibilityLabel: pleinEcran ? 'Quitter le plein ecran' : 'Afficher en plein ecran' })] }));
 };

package/dist/ui/DocumentViewer/usePleinEcran.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Le plein ecran du visualiseur, par la Fullscreen API du navigateur. Indisponible s'il n'est pas `actif`, hors du web
+ * ou quand le navigateur le refuse (`document.fullscreenEnabled`). La sortie par Echap passe par
+ * le navigateur : l'etat suit donc `fullscreenchange` plutot que les appuis sur le bouton.
+ */
+export declare const usePleinEcran: (actif: boolean) => {
+    poserLeCadre: React.Dispatch<unknown>;
+    disponible: boolean;
+    pleinEcran: boolean;
+    basculer: () => void;
+};
+//# sourceMappingURL=usePleinEcran.d.ts.map

package/dist/ui/DocumentViewer/usePleinEcran.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePleinEcran.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/usePleinEcran.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO;;;;;CAqB3C,CAAC"}

package/dist/ui/DocumentViewer/usePleinEcran.js

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * Le plein ecran du visualiseur, par la Fullscreen API du navigateur. Indisponible s'il n'est pas `actif`, hors du web
+ * ou quand le navigateur le refuse (`document.fullscreenEnabled`). La sortie par Echap passe par
+ * le navigateur : l'etat suit donc `fullscreenchange` plutot que les appuis sur le bouton.
+ */
+export const usePleinEcran = (actif) => {
+    const [cadre, poserLeCadre] = React.useState(null);
+    const [pleinEcran, setPleinEcran] = React.useState(false);
+    const disponible = actif && typeof document !== 'undefined' && document.fullscreenEnabled === true;
+    React.useEffect(() => {
+        if (!disponible)
+            return;
+        const onChangement = () => setPleinEcran(document.fullscreenElement === cadre);
+        document.addEventListener('fullscreenchange', onChangement);
+        return () => document.removeEventListener('fullscreenchange', onChangement);
+    }, [cadre, disponible]);
+    const basculer = React.useCallback(() => {
+        if (!(cadre instanceof Element))
+            return;
+        if (document.fullscreenElement === cadre)
+            void document.exitFullscreen();
+        else
+            void cadre.requestFullscreen();
+    }, [cadre]);
+    return { poserLeCadre, disponible, pleinEcran, basculer };
+};

package/dist/ui/DocumentViewer/useZoomMolette.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type EvenementPointeur } from './pointeurWeb';
+export declare const ZOOM_MIN = 1;
+export declare const ZOOM_MAX = 4;
+/** Le zoom suivant d'un cran de molette, borne entre `ZOOM_MIN` et `ZOOM_MAX`. */
+export declare const zoomSuivant: (zoom: number, deltaY: number) => number;
+/**
+ * Le zoom a Ctrl (ou Cmd) + molette, centre sous le pointeur ; la molette seule laisse defiler
+ * la page. Un double-clic revient a 100 %. Une fois zoome, l'origine suit le pointeur pour
+ * parcourir la page. Le listener `wheel` est pose a la main, non passif : `onWheel` de React
+ * est passif et ne peut pas empecher le zoom du navigateur. Hors du DOM (natif), rien n'est pose.
+ */
+export declare const useZoomMolette: () => {
+    poserLeCadre: React.Dispatch<unknown>;
+    echelle: number;
+    /** La position du pointeur, en pourcentage du cadre. */
+    position: {
+        x: number;
+        y: number;
+    };
+    origine: string;
+    onDeplacement: (event: EvenementPointeur) => void;
+};
+//# sourceMappingURL=useZoomMolette.d.ts.map

package/dist/ui/DocumentViewer/useZoomMolette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomMolette.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useZoomMolette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,eAAe,CAAC;AAExE,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAG1B,kFAAkF;AAClF,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,EAAE,QAAQ,MAAM,WACsC,CAAC;AAE/F;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;IAoCvB,wDAAwD;;;;;;2BAGjC,iBAAiB;CAI3C,CAAC"}

package/dist/ui/DocumentViewer/useZoomMolette.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { positionEnPourcentage } from './documentViewerPdfCalculs';
+import { lirePointeurWeb } from './pointeurWeb';
+export const ZOOM_MIN = 1;
+export const ZOOM_MAX = 4;
+const PAS_DE_ZOOM = 1.25;
+/** Le zoom suivant d'un cran de molette, borne entre `ZOOM_MIN` et `ZOOM_MAX`. */
+export const zoomSuivant = (zoom, deltaY) => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, deltaY < 0 ? zoom * PAS_DE_ZOOM : zoom / PAS_DE_ZOOM));
+/**
+ * Le zoom a Ctrl (ou Cmd) + molette, centre sous le pointeur ; la molette seule laisse defiler
+ * la page. Un double-clic revient a 100 %. Une fois zoome, l'origine suit le pointeur pour
+ * parcourir la page. Le listener `wheel` est pose a la main, non passif : `onWheel` de React
+ * est passif et ne peut pas empecher le zoom du navigateur. Hors du DOM (natif), rien n'est pose.
+ */
+export const useZoomMolette = () => {
+    // Un ref par callback : le cadre est un etat, pose une fois monte, que l'effet suit.
+    const [cadre, poserLeCadre] = React.useState(null);
+    const [echelle, setEchelle] = React.useState(1);
+    const [position, setPosition] = React.useState({ x: 50, y: 50 });
+    const suivrePointeur = React.useCallback((event) => {
+        const pointeur = lirePointeurWeb(event);
+        if (!pointeur)
+            return;
+        setPosition(positionEnPourcentage(pointeur));
+    }, []);
+    React.useEffect(() => {
+        if (typeof Element === 'undefined' || !(cadre instanceof Element))
+            return;
+        const onWheel = (event) => {
+            if (!(event instanceof WheelEvent) || !(event.ctrlKey || event.metaKey))
+                return;
+            event.preventDefault();
+            suivrePointeur({ currentTarget: cadre, nativeEvent: event });
+            setEchelle(zoom => zoomSuivant(zoom, event.deltaY));
+        };
+        const onDoubleClic = () => setEchelle(1);
+        cadre.addEventListener('wheel', onWheel, { passive: false });
+        cadre.addEventListener('dblclick', onDoubleClic);
+        return () => {
+            cadre.removeEventListener('wheel', onWheel);
+            cadre.removeEventListener('dblclick', onDoubleClic);
+        };
+    }, [cadre, suivrePointeur]);
+    return {
+        poserLeCadre,
+        echelle,
+        /** La position du pointeur, en pourcentage du cadre. */
+        position,
+        origine: `${position.x}% ${position.y}%`,
+        onDeplacement: (event) => {
+            if (echelle > 1)
+                suivrePointeur(event);
+        },
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/ui/DocumentViewer/useSurvolAvecZoom.d.ts

@@ -1,15 +0,0 @@
-import { type EvenementPointeur } from './pointeurWeb';
-/**
- * Le zoom qui suit le pointeur au survol : la page grossit autour du point survole, comme une
- * loupe. L'origine de l'agrandissement est la position du pointeur en pourcentage du cadre,
- * recalculee a chaque deplacement.
- */
-export declare const useSurvolAvecZoom: () => {
-    survole: boolean;
-    origine: string;
-    echelle: number;
-    onEntree: () => void;
-    onSortie: () => void;
-    onDeplacement: (event: EvenementPointeur) => void;
-};
-//# sourceMappingURL=useSurvolAvecZoom.d.ts.map

package/dist/ui/DocumentViewer/useSurvolAvecZoom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSurvolAvecZoom.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useSurvolAvecZoom.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,eAAe,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;2BAIoB,iBAAiB;CAgBlE,CAAC"}

package/dist/ui/DocumentViewer/useSurvolAvecZoom.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { positionEnPourcentage } from './documentViewerPdfCalculs';
-import { lirePointeurWeb } from './pointeurWeb';
-/**
- * Le zoom qui suit le pointeur au survol : la page grossit autour du point survole, comme une
- * loupe. L'origine de l'agrandissement est la position du pointeur en pourcentage du cadre,
- * recalculee a chaque deplacement.
- */
-export const useSurvolAvecZoom = () => {
-    const [survole, setSurvole] = React.useState(false);
-    const [origine, setOrigine] = React.useState('50% 50%');
-    const onDeplacement = React.useCallback((event) => {
-        const pointeur = lirePointeurWeb(event);
-        if (!pointeur)
-            return;
-        const { x, y } = positionEnPourcentage(pointeur);
-        setOrigine(`${x}% ${y}%`);
-    }, []);
-    return {
-        survole,
-        origine,
-        echelle: survole ? 2 : 1,
-        onEntree: () => setSurvole(true),
-        onSortie: () => setSurvole(false),
-        onDeplacement,
-    };
-};