diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts index 2a998fb63..ba7369661 100644 --- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts +++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts @@ -130,3 +130,12 @@ export interface CheckSignature { } export type CanvasEvent = "select" | "add"; + +export interface ZoomLevel { + id: number; + zoom: number; + label: { + fr?: string, + nl?: string + }; +} \ No newline at end of file diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue index a7c222cce..b223882b2 100644 --- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue +++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue @@ -28,24 +28,40 @@
-
-
-
+
-
-
+ |
-
+
-
-
-
-
+ | -
-
+ |
-
+
-
-
-
- - {{ $t("cancel_signing") }} - - - {{ $t("return") }} - -
@@ -235,6 +248,7 @@ import { Signature, SignatureZone, SignedState, + ZoomLevel, } from "../../types"; import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods"; import * as pdfjsLib from "pdfjs-dist"; @@ -262,6 +276,52 @@ const canvasEvent: Ref = ref("select"); const signedState: Ref = ref("pending"); const page: Ref = ref(1); const pageCount: Ref = ref(0); +const zoom: Ref = ref(1); +const zoomLevel = ""; +const zoomLevels: Ref = ref([ + { + id: 0, + zoom: 0.75, + label: { + fr: "75%", + }, + }, + { + id: 1, + zoom: zoom.value, + label: { + fr: "100%", + }, + }, + { + id: 2, + zoom: 1.25, + label: { + fr: "125%", + }, + }, + { + id: 3, + zoom: 1.5, + label: { + fr: "150%", + }, + }, + { + id: 4, + zoom: 2, + label: { + fr: "200%", + }, + }, + { + id: 5, + zoom: 3, + label: { + fr: "300%", + }, + }, +]); let userSignatureZone: Ref = ref(null); let pdf = {} as PDFDocumentProxy; @@ -275,7 +335,11 @@ const $toast = useToast(); const signature = window.signature; -console.log(signature); +const setZoomLevel = (zoomLevel: string) => { + zoom.value = Number.parseFloat(zoomLevel); + setPage(page.value); + setTimeout(() => drawAllZones(page.value), 200); +}; const mountPdf = async (doc: ArrayBuffer) => { const loadingTask = pdfjsLib.getDocument(doc); @@ -285,7 +349,7 @@ const mountPdf = async (doc: ArrayBuffer) => { }; const getRenderContext = (pdfPage: PDFPageProxy) => { - const scale = 1; + const scale = 1 * zoom.value; const viewport = pdfPage.getViewport({ scale }); const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement; const context = canvas.getContext("2d") as CanvasRenderingContext2D; @@ -343,12 +407,12 @@ const hitSignature = ( scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) < xy[0] && xy[0] < scaleXToCanvas(zone.x + zone.width, canvasWidth, zone.PDFPage.width) && - zone.PDFPage.height - + zone.PDFPage.height * zoom.value - scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) < xy[1] && xy[1] < scaleYToCanvas(zone.height - zone.y, canvasHeight, zone.PDFPage.height) + - zone.PDFPage.height; + zone.PDFPage.height * zoom.value; const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => { userSignatureZone.value = z; @@ -425,19 +489,19 @@ const drawZone = ( ctx.lineJoin = "bevel"; ctx.strokeRect( scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width), - zone.PDFPage.height - + zone.PDFPage.height * zoom.value - scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height), scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width), scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height) ); - ctx.font = "bold 16px serif"; + ctx.font = `bold ${16 * zoom.value}px serif`; ctx.textAlign = "center"; ctx.fillStyle = "black"; const xText = scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) + scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width) / 2; const yText = - zone.PDFPage.height - + zone.PDFPage.height * zoom.value - scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) + scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height) / 2; if (userSignatureZone.value?.index === zone.index) { @@ -445,8 +509,8 @@ const drawZone = ( ctx.fillText("Signer ici", xText, yText); } else { ctx.fillStyle = unselectedBlue; - ctx.fillText("Choisir cette", xText, yText - 12); - ctx.fillText("zone de signature", xText, yText + 12); + ctx.fillText("Choisir cette", xText, yText - 12 * zoom.value); + ctx.fillText("zone de signature", xText, yText + 12 * zoom.value); } }; @@ -616,16 +680,29 @@ div#action-buttons { } div.pdf-tools { background-color: #f3f3f3; - font-size: 0.8rem; + font-size: 0.6rem; + button { + font-size: 0.75rem !important; + } + div.turnSignature { + span { + font-size: 1rem; + } + } @media (min-width: 1400px) { // background: none; // border: none !important; } } div.turn-page { + display: flex; span { - font-size: 0.8rem; - margin: 0 0.4rem; + font-size: 0.75rem; + margin: auto 0.4rem; + } + select { + width: 5rem; + font-size: 0.75rem; } } div.signature-modal-body { diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts index c6ae996b2..49b0f6f79 100644 --- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts +++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts @@ -12,7 +12,6 @@ const appMessages = { sign: 'Signer', choose_another_signature: 'Choisir une autre zone', cancel: 'Annuler', - cancel_signing: 'Refuser de signer', last_sign_zone: 'Zone de signature précédente', next_sign_zone: 'Zone de signature suivante', add_sign_zone: 'Ajouter une zone de signature',