mirror of https://github.com/docusealco/docuseal
* feat: add typed signature with font picker to user profile - Add 'Type' tab alongside 'Draw' and 'Upload' in signature/initials modals - Create typed-signature-form custom element for canvas-based typed signatures - Persist font preference per user via UserConfig (signature_font/initials_font) - Pre-select saved font when reopening the modal - Add i18n keys for 'type' and 'type_signature_here' in all 7 languages * fix: use options_for_select to satisfy BetterHtml validation --------- Co-authored-by: Bob Develop <developbob50@gmail.com>pull/639/head
devin-ai-integration[bot]
2 weeks ago
committed by
GitHub
parent
7def97ef4a
commit
7029590b32
@ -0,0 +1,137 @@
|
|||||||
|
import { target, targetable } from '@github/catalyst/lib/targetable'
|
||||||
|
import { cropCanvasAndExportToPNG } from '../submission_form/crop_canvas'
|
||||||
|
|
||||||
|
const SIGNATURE_FONTS = {
|
||||||
|
'Dancing Script': 'DancingScript-Regular.otf',
|
||||||
|
'Great Vibes': 'GreatVibes-Regular.ttf',
|
||||||
|
Pacifico: 'Pacifico-Regular.ttf',
|
||||||
|
Caveat: 'Caveat-Regular.ttf',
|
||||||
|
'Homemade Apple': 'HomemadeApple-Regular.ttf',
|
||||||
|
'Mrs Saint Delafield': 'MrsSaintDelafield-Regular.ttf',
|
||||||
|
'Shadows Into Light': 'ShadowsIntoLight-Regular.ttf',
|
||||||
|
'Alex Brush': 'AlexBrush-Regular.ttf',
|
||||||
|
Kalam: 'Kalam-Regular.ttf',
|
||||||
|
Sacramento: 'Sacramento-Regular.ttf',
|
||||||
|
'Herr Von Muellerhoff': 'HerrVonMuellerhoff-Regular.ttf'
|
||||||
|
}
|
||||||
|
|
||||||
|
const fontLoadPromises = {}
|
||||||
|
const scale = 3
|
||||||
|
|
||||||
|
export default targetable(class extends HTMLElement {
|
||||||
|
static [target.static] = ['canvas', 'textInput', 'fontSelect', 'input', 'button', 'fontHidden']
|
||||||
|
|
||||||
|
async connectedCallback () {
|
||||||
|
this.setCanvasSize()
|
||||||
|
|
||||||
|
this.resizeObserver = new ResizeObserver(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (!this.canvas) return
|
||||||
|
|
||||||
|
this.setCanvasSize()
|
||||||
|
this.updateCanvas()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.resizeObserver.observe(this.canvas.parentNode)
|
||||||
|
|
||||||
|
this.textInput.addEventListener('input', () => this.updateCanvas())
|
||||||
|
|
||||||
|
this.fontSelect.addEventListener('change', async () => {
|
||||||
|
this.fontHidden.value = this.fontSelect.value
|
||||||
|
await this.loadFont(this.fontSelect.value)
|
||||||
|
this.updateCanvas()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.button.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
if (!this.textInput.value.trim()) return
|
||||||
|
|
||||||
|
this.button.disabled = true
|
||||||
|
this.submit()
|
||||||
|
})
|
||||||
|
|
||||||
|
await this.loadFont(this.fontSelect.value)
|
||||||
|
|
||||||
|
if (this.textInput.value) {
|
||||||
|
this.updateCanvas()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback () {
|
||||||
|
if (this.resizeObserver) {
|
||||||
|
this.resizeObserver.disconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setCanvasSize () {
|
||||||
|
const width = this.canvas.parentNode.clientWidth
|
||||||
|
const height = width / 2.5
|
||||||
|
|
||||||
|
if (this.canvas.width !== width * scale || this.canvas.height !== height * scale) {
|
||||||
|
this.canvas.width = width * scale
|
||||||
|
this.canvas.height = height * scale
|
||||||
|
this.canvas.getContext('2d').scale(scale, scale)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadFont (fontName) {
|
||||||
|
const file = SIGNATURE_FONTS[fontName]
|
||||||
|
if (!file) return Promise.resolve()
|
||||||
|
|
||||||
|
if (!fontLoadPromises[fontName]) {
|
||||||
|
const ext = file.endsWith('.otf') ? 'opentype' : 'truetype'
|
||||||
|
const font = new FontFace(fontName, `url(/fonts/${file}) format("${ext}")`)
|
||||||
|
|
||||||
|
fontLoadPromises[fontName] = font.load().then((loadedFont) => {
|
||||||
|
document.fonts.add(loadedFont)
|
||||||
|
}).catch((error) => {
|
||||||
|
console.error('Font loading failed:', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return fontLoadPromises[fontName]
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCanvas () {
|
||||||
|
const context = this.canvas.getContext('2d')
|
||||||
|
const text = this.textInput.value
|
||||||
|
const fontFamily = this.fontSelect.value
|
||||||
|
const initialFontSize = 44
|
||||||
|
|
||||||
|
const setFontSize = (size) => {
|
||||||
|
context.font = `italic ${size}px "${fontFamily}"`
|
||||||
|
}
|
||||||
|
|
||||||
|
const maxWidth = this.canvas.width / scale
|
||||||
|
let size = initialFontSize
|
||||||
|
|
||||||
|
setFontSize(size)
|
||||||
|
|
||||||
|
while (context.measureText(text).width > maxWidth && size > 1) {
|
||||||
|
size -= 1
|
||||||
|
setFontSize(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
context.textAlign = 'center'
|
||||||
|
context.clearRect(0, 0, this.canvas.width / scale, this.canvas.height / scale)
|
||||||
|
context.fillText(text, this.canvas.width / 2 / scale, this.canvas.height / 2 / scale + 11)
|
||||||
|
}
|
||||||
|
|
||||||
|
async submit () {
|
||||||
|
const blob = await cropCanvasAndExportToPNG(this.canvas)
|
||||||
|
const file = new File([blob], 'signature.png', { type: 'image/png' })
|
||||||
|
|
||||||
|
const dataTransfer = new DataTransfer()
|
||||||
|
dataTransfer.items.add(file)
|
||||||
|
|
||||||
|
this.input.files = dataTransfer.files
|
||||||
|
|
||||||
|
if (this.input.webkitEntries.length) {
|
||||||
|
this.input.dataset.file = `${dataTransfer.files[0].name}`
|
||||||
|
}
|
||||||
|
|
||||||
|
this.closest('form').requestSubmit()
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in new issue