diff --git a/packages/bbui/src/Form/Core/Signature.svelte b/packages/bbui/src/Form/Core/Signature.svelte index 7ffc28f5d7..729d3ac5e2 100644 --- a/packages/bbui/src/Form/Core/Signature.svelte +++ b/packages/bbui/src/Form/Core/Signature.svelte @@ -5,6 +5,8 @@ const dispatch = createEventDispatcher() + let last + export let value export let disabled = false export let editable = true @@ -73,16 +75,44 @@ updated = false } + $: if (last) { + dispatch("update") + } + onMount(() => { if (!editable) { return } + const getPos = e => { + var rect = canvasRef.getBoundingClientRect() + const canvasX = e.offsetX || e.targetTouches?.[0].pageX - rect.left + const canvasY = e.offsetY || e.targetTouches?.[0].pageY - rect.top + + return { x: canvasX, y: canvasY } + } + + const checkUp = e => { + last = getPos(e) + } + + canvasRef.addEventListener("pointerdown", e => { + const current = getPos(e) + //If the cursor didn't move at all, block the default pointerdown + if (last?.x === current?.x && last?.y === current?.y) { + e.preventDefault() + e.stopImmediatePropagation() + } + }) + + document.addEventListener("pointerup", checkUp) + signature = new Atrament(canvasRef, { width, height, color: "white", }) + signature.weight = 4 signature.smoothing = 2 @@ -96,6 +126,11 @@ canvasWidth = wrapWidth canvasContext = canvasRef.getContext("2d") + + return () => { + signature.destroy() + document.removeEventListener("pointerup", checkUp) + } }) diff --git a/packages/client/package.json b/packages/client/package.json index 1b933605a2..a7db1ee7ef 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -29,13 +29,13 @@ "dayjs": "^1.10.8", "downloadjs": "1.4.7", "html5-qrcode": "^2.2.1", - "atrament": "^4.1.0", "leaflet": "^1.7.1", "sanitize-html": "^2.7.0", "screenfull": "^6.0.1", "shortid": "^2.2.15", "svelte-apexcharts": "^1.0.2", - "svelte-spa-router": "^4.0.1" + "svelte-spa-router": "^4.0.1", + "atrament": "^4.3.0" }, "devDependencies": { "@rollup/plugin-alias": "^5.1.0", diff --git a/packages/frontend-core/src/components/SignatureModal.svelte b/packages/frontend-core/src/components/SignatureModal.svelte index 7d1a2db1d3..8132c5bced 100644 --- a/packages/frontend-core/src/components/SignatureModal.svelte +++ b/packages/frontend-core/src/components/SignatureModal.svelte @@ -7,11 +7,13 @@ export let darkMode export const show = () => { + edited = false modal.show() } let modal let canvas + let edited = false @@ -20,6 +22,7 @@ showCancelButton={false} showCloseIcon={false} custom + disabled={!edited} showDivider={false} onConfirm={() => { onConfirm(canvas) @@ -29,7 +32,15 @@ {title}
- + { + edited = true + }} + />