Merge branch '317-add-zone-bug-with-zoom' into 'master'

Resolve "Lorsqu'on place manuellement une zone de signature avec le zoom actif, la zone n'est pas placée correctement sur la page"

Closes #317

See merge request Chill-Projet/chill-bundles!757
This commit is contained in:
Julien Fastré 2024-12-05 15:49:38 +00:00
commit b9e515f4e6

View File

@ -40,23 +40,23 @@
{{ z.label.fr }} {{ z.label.fr }}
</option> </option>
</select> </select>
<template v-if="pageCount > 1"> <template v-if="pageCount > 1">
<button <button
class="btn btn-light btn-xs p-1" class="btn btn-light btn-xs p-1"
:disabled="page <= 1" :disabled="page <= 1"
@click="turnPage(-1)" @click="turnPage(-1)"
> >
</button> </button>
<span>{{ page }}/{{ pageCount }}</span> <span>{{ page }}/{{ pageCount }}</span>
<button <button
class="btn btn-light btn-xs p-1" class="btn btn-light btn-xs p-1"
:disabled="page >= pageCount" :disabled="page >= pageCount"
@click="turnPage(1)" @click="turnPage(1)"
> >
</button> </button>
</template> </template>
</div> </div>
<div <div
v-if="signature.zones.length > 1" v-if="signature.zones.length > 1"
@ -96,16 +96,23 @@
> >
{{ $t("cancel") }} {{ $t("cancel") }}
</button> </button>
<button v-if="userSignatureZone === null" <button
:class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }" v-if="userSignatureZone === null"
:class="{
btn: true,
'btn-sm': true,
'btn-create': canvasEvent !== 'add',
'btn-chill-green': canvasEvent === 'add',
active: canvasEvent === 'add',
}"
@click="toggleAddZone()" @click="toggleAddZone()"
:title="$t('add_sign_zone')" :title="$t('add_sign_zone')"
> >
<template v-if="canvasEvent === 'add'"> <template v-if="canvasEvent === 'add'">
<div class="spinner-border spinner-border-sm" role="status"> <div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</template> </template>
</button> </button>
</div> </div>
</div> </div>
@ -125,23 +132,23 @@
{{ z.label.fr }} {{ z.label.fr }}
</option> </option>
</select> </select>
<template v-if="pageCount > 1"> <template v-if="pageCount > 1">
<button <button
class="btn btn-light btn-xs p-1" class="btn btn-light btn-xs p-1"
:disabled="page <= 1" :disabled="page <= 1"
@click="turnPage(-1)" @click="turnPage(-1)"
> >
</button> </button>
<span>{{ page }} / {{ pageCount }}</span> <span>{{ page }} / {{ pageCount }}</span>
<button <button
class="btn btn-light btn-xs p-1" class="btn btn-light btn-xs p-1"
:disabled="page >= pageCount" :disabled="page >= pageCount"
@click="turnPage(1)" @click="turnPage(1)"
> >
</button> </button>
</template> </template>
</div> </div>
<div <div
v-if="signature.zones.length > 1 && signedState !== 'signed'" v-if="signature.zones.length > 1 && signedState !== 'signed'"
@ -200,26 +207,36 @@
> >
{{ $t("cancel") }} {{ $t("cancel") }}
</button> </button>
<button v-if="userSignatureZone === null" <button
:class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }" v-if="userSignatureZone === null"
:class="{
btn: true,
'btn-sm': true,
'btn-create': canvasEvent !== 'add',
'btn-chill-green': canvasEvent === 'add',
active: canvasEvent === 'add',
}"
@click="toggleAddZone()" @click="toggleAddZone()"
:title="$t('add_sign_zone')" :title="$t('add_sign_zone')"
> >
<template v-if="canvasEvent !== 'add'"> <template v-if="canvasEvent !== 'add'">
{{ $t("add_zone") }} {{ $t("add_zone") }}
</template> </template>
<template v-else> <template v-else>
{{ $t("click_on_document")}} {{ $t("click_on_document") }}
<div class="spinner-border spinner-border-sm" role="status"> <div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</template> </template>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center" :class="{onAddZone: canvasEvent === 'add'}"> <div
<canvas class="m-auto" id="canvas" ></canvas> class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
:class="{ onAddZone: canvasEvent === 'add' }"
>
<canvas class="m-auto" id="canvas"></canvas>
</div> </div>
<div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons"> <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
@ -648,11 +665,11 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
scaleXToCanvas(x, canvas.width, PDFPageWidth) - scaleXToCanvas(x, canvas.width, PDFPageWidth) -
scaleXToCanvas(BOX_WIDTH / 2, canvas.width, PDFPageWidth), scaleXToCanvas(BOX_WIDTH / 2, canvas.width, PDFPageWidth),
y: y:
PDFPageHeight - PDFPageHeight * zoom.value -
scaleYToCanvas(y, canvas.height, PDFPageHeight) + scaleYToCanvas(y, canvas.height, PDFPageHeight) +
scaleYToCanvas(BOX_HEIGHT / 2, canvas.height, PDFPageHeight), scaleYToCanvas(BOX_HEIGHT / 2, canvas.height, PDFPageHeight),
width: BOX_WIDTH, width: BOX_WIDTH * zoom.value,
height: BOX_HEIGHT, height: BOX_HEIGHT * zoom.value,
PDFPage: { PDFPage: {
index: page.value - 1, index: page.value - 1,
width: PDFPageWidth, width: PDFPageWidth,
@ -683,11 +700,11 @@ init();
} }
.onAddZone { .onAddZone {
cursor: not-allowed; cursor: not-allowed;
#canvas { #canvas {
cursor: copy; cursor: copy;
} }
} }
div#action-buttons { div#action-buttons {