MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added workaround for atrament doubleclick issue. Disabled edit button until the canvas is actually changed. Upgraded atrament to the latest

This commit is contained in:
Dean 2024-05-16 16:40:35 +01:00
parent 5a5896bd50
commit cf18417288
3 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/bbui/src/Form/Core/Signature.svelte
View File

@ -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)
}
})
</script>

4
packages/client/package.json
View File

@ -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",

13
packages/frontend-core/src/components/SignatureModal.svelte
View File

@ -7,11 +7,13 @@
export let darkMode
export const show = () => {
edited = false
modal.show()
}
let modal
let canvas
let edited = false
</script>
<Modal bind:this={modal}>
@ -20,6 +22,7 @@
showCancelButton={false}
showCloseIcon={false}
custom
disabled={!edited}
showDivider={false}
onConfirm={() => {
onConfirm(canvas)
@ -29,7 +32,15 @@
<Body>{title}</Body>
</div>
<div class="signature-wrap modal">
<CoreSignature {darkMode} {value} saveIcon={false} bind:this={canvas} />
<CoreSignature
{darkMode}
{value}
saveIcon={false}
bind:this={canvas}
on:update={() => {
edited = true
}}
/>
</div>
</ModalContent>
</Modal>