Skip to content

Commit

Permalink
2.1.4
Browse files Browse the repository at this point in the history 
* The signature cannot be drawn while in the design screen
  • Loading branch information
@FlaminWrap
FlaminWrap committed Jan 31, 2023
1 parent 0c394c6 commit fa16775
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 68 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "Budibase-Signature-Plugin",
"version": "1.2.3",
"version": "1.2.4",
"description": "A plugin that allows signatures to be created and saved in budibase",
"license": "MIT",
"svelte": "index.js",
"module": "dist/plugin.min.js",
"author": "Lewis McRobbie",
"scripts": {
"build": "rollup -c",
"watch": "rollup -cw"
Expand Down
156 changes: 92 additions & 64 deletions src/Canvas.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
export let borderOutline = "none"
export let borderColor = "#000000"
export let borderWidth = "1px"
export let inBuilder = false
let eraseSignatureModal
let canvas
Expand All @@ -30,103 +31,130 @@
let t, l
onMount(() => {
context = canvas.getContext('2d')
context.lineWidth = penWidth;
context.lineJoin = "round";
context.lineCap = "round";
handleSize()
if (!inBuilder){
context = canvas.getContext('2d')
context.lineWidth = penWidth;
context.lineJoin = "round";
context.lineCap = "round";
handleSize();
saveSignature(true);
}
})
$: if(context) {
context.strokeStyle = color
}
const handleStart = (({ offsetX: x, offsetY: y }) => {
if(color === background) {
context.clearRect(0, 0, width, height)
} else {
isDrawing = true
start = { x, y }
}
if (!inBuilder){
if(color === background) {
context.clearRect(0, 0, width, height)
} else {
isDrawing = true
start = { x, y }
}
}
})
const handleEnd = () => {
isDrawing = false;
saveSignature();
if (!inBuilder){
isDrawing = false;
saveSignature(false);
}
}
const handleMove = (({ offsetX: x1, offsetY: y1 }) => {
if(!isDrawing) return
const { x, y } = start
context.beginPath()
context.moveTo(x, y)
context.lineTo(x1, y1)
context.closePath()
context.stroke()
start = { x: x1, y: y1 }
if (!inBuilder){
if(!isDrawing) return
const { x, y } = start
context.beginPath()
context.moveTo(x, y)
context.lineTo(x1, y1)
context.closePath()
context.stroke()
start = { x: x1, y: y1 }
}
})
const handleSize = () => {
const { top, left } = canvas.getBoundingClientRect()
t = top
l = left
const { top, left } = canvas.getBoundingClientRect()
t = top
l = left
}
function clearCanvas(){
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
saveSignature();
if (!inBuilder){
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
saveSignature(false);
}
}
function fillCanvasBackgroundWithColor(color) {
if (saveBackgroundColour){
const context = canvas.getContext('2d');
context.save();
context.globalCompositeOperation = 'destination-over';
context.fillStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
context.restore();
if (!inBuilder){
if (saveBackgroundColour){
const context = canvas.getContext('2d');
context.save();
context.globalCompositeOperation = 'destination-over';
context.fillStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
context.restore();
}
}
}
function saveSignature(){
fillCanvasBackgroundWithColor(background);
let img = canvas.toDataURL("image/png");
setSignatureValue(img);
function saveSignature(inital){
if (!inBuilder){
fillCanvasBackgroundWithColor(background);
let img = canvas.toDataURL("image/png");
setSignatureValue(img, inital);
}
}
</script>

<svelte:window on:resize={handleSize} />

{#if showClearSignatureButton}
<div style="padding-right:5px;padding-bottom:5px;">
{#if showButtonIcon}
<Button icon="Erase" primary on:click={eraseSignatureModal.show}>
{clearSignatureButtonText}
</Button>
{:else}
<Button primary on:click={eraseSignatureModal.show}>
{clearSignatureButtonText}
</Button>
{/if}
<Modal bind:this={eraseSignatureModal}>
<ModalContent
title={modalTitle}
confirmText={modalActionButtonText}
onConfirm={clearCanvas}
>
<span
>{modalBody}</span
>
</ModalContent>
</Modal>
<div style="padding-right:8px;padding-bottom:8px;">
{#if showButtonIcon}
{#if !inBuilder}
<Button icon="Erase" primary on:click={eraseSignatureModal.show}>
{clearSignatureButtonText}
</Button>
{:else}
<Button icon="Erase" primary>
{clearSignatureButtonText}
</Button>
{/if}
{:else}
{#if !inBuilder}
<Button primary on:click={eraseSignatureModal.show}>
{clearSignatureButtonText}
</Button>
{:else}
<Button primary>
{clearSignatureButtonText}
</Button>
{/if}
{/if}
{#if !inBuilder}
<Modal bind:this={eraseSignatureModal}>
<ModalContent
title={modalTitle}
confirmText={modalActionButtonText}
onConfirm={clearCanvas}
>
<span
>{modalBody}</span
>
</ModalContent>
</Modal>
{/if}
</div>
{/if}

<canvas style="outline-style: {borderOutline}; outline-color: {borderColor}; outline-width: {borderWidth}"
{width}
{height}
Expand Down
34 changes: 31 additions & 3 deletions src/Component.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,16 @@
export let modalBody
export let saveBackgroundColour
export let signatureData
//export let required
let initalImage
let currentImage
let canBeDisplayed
let errorMessages = [];
//Budibase SDK
const { styleable } = getContext("sdk");
const { styleable, builderStore, notificationStore } = getContext("sdk");
//Form API
const component = getContext("component");
Expand All @@ -36,6 +40,9 @@
let fieldApi
let fieldState
let inBuilder = false
console.log(fieldState);
const formApi = formContext?.formApi;
const labelPos = fieldGroupContext?.labelPosition || "above";
Expand All @@ -62,8 +69,12 @@ $: formField = formApi?.registerField(
unsubscribe?.();
});
function setSignatureValue(img){
function setSignatureValue(img, inital){
fieldApi.setValue(img);
currentImage = img;
if (inital){
initalImage = img;
}
}
$: checkValid(field, formContext, penWidth, width, height, color, background)
Expand Down Expand Up @@ -105,10 +116,26 @@ $: formField = formApi?.registerField(
}
}
//$: compareImages(required, initalImage, currentImage);
//need to figure out how to pass validation
//function compareImages(required, initalImage, currentImage){
// if (required){
// if (initalImage === currentImage){
// notificationStore.actions.warning(
// `Please draw your signature`
// )
// }
// }
//}
if (($builderStore.inBuilder)){
inBuilder = true;
}
</script>
<div class="spectrum-Form-item" use:styleable={$component.styles}>
{#if !canBeDisplayed}
<!-- Display error message of bad configuration -->
<!-- Display error messages when requirements are not defined -->
<div class="spectrum-InLineAlert spectrum-InLineAlert--notice">
<div class="spectrum-InLineAlert-header">
Signature field error
Expand Down Expand Up @@ -150,6 +177,7 @@ $: formField = formApi?.registerField(
{borderOutline}
{borderColor}
{borderWidth}
{inBuilder}
>
</Canvas>
</div>
Expand Down

0 comments on commit fa16775

Please sign in to comment.