Signature field and component support

[deanhannigan]

Description

Enhance your app with direct signature capture in Budibase forms!

• Internal data sources now directly support a Signature data type.
• Forms can now capture and store signatures with the SignatureField component type.
• Signatures are stored as .png files and can be embedded in your applications.
• Supports mouse capture and also touch entry for mobile users.

Addresses

• https://linear.app/budibase/issue/BUDI-8104/signature-component
• Bug - Single attachment validation behaviour was missing. It has now been added and supports Required and Max upload size options
• Bug - added support for single attachment type in the edit row modal.

Screenshots

View and edit signature in the data section

Capture signatures in your app forms!

Launchcontrol

Signature field support added to internal datasources and forms.

Feature branch env

Feature Branch Link

[aptkingston]

Awesome work Dean! Nothing major but just a few suggestions 👌

[aptkingston]

One small suggestion to update the grid cell to use the latest components, but otherwise LGTM! This is so smooth to write on, I love it 😂

[mike12345567]

Gave this a go myself, Ubuntu + Firefox, all seems to be working well with my graphics tablet

Takes a little bit of getting used to due to it not starting immediately where you click, but works nicely!

[aptkingston]

Bit of a random one, but if you just click (don't drag) you get lines shooting in from the top left... Not a massive issue lol unless there's an easy fix.

Edit: as @mike12345567 pointed out it probably actually does need fixed if possible, because it would be impossible to dot an "i" otherwise (you'd get a weird line in the top left).

Edit 2: I can see you dotted i's successfully in your demo video, so I'm puzzled.

[deanhannigan]

@aptkingston there appears to be a recent issue around this on the framework itself jakubfiala/atrament#99

Switching to the version from 3 weeks ago might fix the issue.

[adrinr]

Still being broken for me using firefox on a mac. Happy to debug today to see if we can reproduce it

[deanhannigan]

Had a call with @adrinr this morning to run through this and the error he's seeing is definitely happening. It seems that it only occurs when the component is loaded on a native/laptop monitor 🙃. The canvas get's resized to 800x400 irrespective of the configuration. This was reproducible in Firefox and Chrome. Reviewing the issue now.

This was due to devicePixelRatio being 2 for the Mac laptop screen and 1 on external monitors. Restricting the canvas to the configured size will keep it bound within the modal.

[deanhannigan]

@aptkingston @mike12345567 added a fix for the issue around clicking on the canvas. The issue manifests itself if you click in exactly same area without moving. I added a check for where the last draw ended and where the pointer is on click. If they match exactly, the draw behaviour will be canned and the odd lines wont appear.

[aptkingston]

@aptkingston @mike12345567 added a fix for the issue around clicking on the canvas. The issue manifests itself if you click in exactly same area without moving. I added a check for where the last draw ended and where the pointer is on click. If they match exactly, the draw behaviour will be canned and the odd lines wont appear.

Ah I see - I think the common manifestation of this is then if you have never clicked yet, it treats it as if you've clicked in the same area since your reference point is null.

Requested refactoring has been complete