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() const dispatch = createEventDispatcher()
let last
export let value export let value
export let disabled = false export let disabled = false
export let editable = true export let editable = true
@ -73,16 +75,44 @@
updated = false updated = false
} }
$: if (last) {
dispatch("update")
}
onMount(() => { onMount(() => {
if (!editable) { if (!editable) {
return 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, { signature = new Atrament(canvasRef, {
width, width,
height, height,
color: "white", color: "white",
}) })
signature.weight = 4 signature.weight = 4
signature.smoothing = 2 signature.smoothing = 2
@ -96,6 +126,11 @@
canvasWidth = wrapWidth canvasWidth = wrapWidth
canvasContext = canvasRef.getContext("2d") canvasContext = canvasRef.getContext("2d")
return () => {
signature.destroy()
document.removeEventListener("pointerup", checkUp)
}
}) })
</script> </script>

4
packages/client/package.json
View File

@ -29,13 +29,13 @@
"dayjs": "^1.10.8", "dayjs": "^1.10.8",
"downloadjs": "1.4.7", "downloadjs": "1.4.7",
"html5-qrcode": "^2.2.1", "html5-qrcode": "^2.2.1",
"atrament": "^4.1.0",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"sanitize-html": "^2.7.0", "sanitize-html": "^2.7.0",
"screenfull": "^6.0.1", "screenfull": "^6.0.1",
"shortid": "^2.2.15", "shortid": "^2.2.15",
"svelte-apexcharts": "^1.0.2", "svelte-apexcharts": "^1.0.2",
"svelte-spa-router": "^4.0.1" "svelte-spa-router": "^4.0.1",
"atrament": "^4.3.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-alias": "^5.1.0", "@rollup/plugin-alias": "^5.1.0",

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

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