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:
parent
5a5896bd50
commit
cf18417288
3 changed files with 49 additions and 3 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue