feat(signature): multi-font typed signature (11 fonts)

2 weeks ago · 3d269df1a0
parent 049d3cab1e
commit 3d269df1a0
3 changed files with 93 additions and 11 deletions
--- a/17
+++ b/17
@ -8,6 +8,16 @@ RUN apk --no-cache add wget && \
    wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && \
    wget https://raw.githubusercontent.com/impallari/DancingScript/master/OFL.txt && \
    wget https://raw.githubusercontent.com/notofonts/noto-fonts/refs/heads/main/LICENSE && \
+    wget https://github.com/google/fonts/raw/main/ofl/greatvibes/GreatVibes-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/pacifico/Pacifico-Regular.ttf && \
+    wget -O Caveat-Regular.ttf "https://github.com/google/fonts/raw/main/ofl/caveat/Caveat%5Bwght%5D.ttf" && \
+    wget https://github.com/google/fonts/raw/main/apache/homemadeapple/HomemadeApple-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/mrssaintdelafield/MrsSaintDelafield-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/shadowsintolight/ShadowsIntoLight-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/alexbrush/AlexBrush-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/kalam/Kalam-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/sacramento/Sacramento-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/herrvonmuellerhoff/HerrVonMuellerhoff-Regular.ttf && \
    wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.0.0/model_704_int8.onnx" && \
    wget -O pdfium-linux.tgz "https://github.com/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-musl-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
    mkdir -p /pdfium-linux && \
@ -79,13 +89,16 @@ COPY --chown=docuseal:docuseal ./tmp ./tmp
 COPY --chown=docuseal:docuseal LICENSE LICENSE_ADDITIONAL_TERMS README.md Rakefile config.ru .version ./
 COPY --chown=docuseal:docuseal .version ./public/version

-COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts/LICENSE /fonts/
+COPY --chown=docuseal:docuseal --from=download /fonts/ /fonts/
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
 COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
 COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
 COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs

-RUN mkdir -p /app/public/fonts && ln -s /fonts/DancingScript-Regular.otf /app/public/fonts/ && \
+RUN mkdir -p /app/public/fonts && \
+    for f in DancingScript-Regular.otf GreatVibes-Regular.ttf Pacifico-Regular.ttf Caveat-Regular.ttf HomemadeApple-Regular.ttf MrsSaintDelafield-Regular.ttf ShadowsIntoLight-Regular.ttf AlexBrush-Regular.ttf Kalam-Regular.ttf Sacramento-Regular.ttf HerrVonMuellerhoff-Regular.ttf; do \
+      ln -s /fonts/$f /app/public/fonts/; \
+    done && \
    mkdir -p /usr/share/fonts/noto && ln -s /fonts/GoNotoKurrent-Regular.ttf /usr/share/fonts/noto/ && ln -s /fonts/GoNotoKurrent-Bold.ttf /usr/share/fonts/noto/ && fc-cache -f && \
    bundle exec bootsnap precompile -j 1 --gemfile app/ lib/ && \
    chown -R docuseal:docuseal /app/tmp/cache
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@ -246,6 +246,27 @@
      type="text"
      @input="updateWrittenSignature"
    >
+    <select
+      v-if="isTextSignature && !modelValue && !computedPreviousValue"
+      v-model="selectedFont"
+      class="base-input mt-2 text-sm"
+      :aria-label="t('font')"
+      @change="onFontChange"
+    >
+      <option
+        v-for="f in availableFonts"
+        :key="f"
+        :value="f"
+      >
+        {{ f }}
+      </option>
+    </select>
+    <input
+      v-if="isTextSignature"
+      type="hidden"
+      name="signature_font"
+      :value="selectedFont"
+    >
    <select
      v-if="withSigningReason && !isOtherReason"
      class="select base-input !text-2xl w-full mt-6 text-center"
@ -348,7 +369,21 @@ import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'

-let fontLoadPromise = null
+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

@ -465,7 +500,9 @@ export default {
      isUsePreviousValue: true,
      isTouchAttachment: false,
      isTextSignature: !this.signatureSrc && (!!this.signatureText || this.field.preferences?.format === 'typed' || this.field.preferences?.format === 'typed_or_upload'),
-      uploadImageInputKey: Math.random().toString()
+      uploadImageInputKey: Math.random().toString(),
+      selectedFont: 'Dancing Script',
+      availableFonts: Object.keys(SIGNATURE_FONTS)
    }
  },
  computed: {
@ -606,18 +643,29 @@ export default {
      this.isUsePreviousValue = false
      this.isSignatureStarted = false
    },
-    loadFont () {
-      if (!fontLoadPromise) {
-        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript-Regular.otf) format("opentype")`)
+    async onFontChange () {
+      await this.loadFont()
+      if (this.$refs.textInput && this.$refs.textInput.value) {
+        this.updateWrittenSignature({ target: this.$refs.textInput })
+      }
+    },
+    loadFont (name) {
+      const fontName = name || this.selectedFont
+      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(${this.baseUrl}/fonts/${file}) format("${ext}")`)

-        fontLoadPromise = font.load().then((loadedFont) => {
+        fontLoadPromises[fontName] = font.load().then((loadedFont) => {
          document.fonts.add(loadedFont)
        }).catch((error) => {
          console.error('Font loading failed:', error)
        })
      }

-      return fontLoadPromise
+      return fontLoadPromises[fontName]
    },
    showQr () {
      this.isShowQr = true
@ -684,7 +732,7 @@ export default {
      const canvas = this.$refs.canvas
      const context = canvas.getContext('2d')

-      const fontFamily = 'Dancing Script'
+      const fontFamily = this.selectedFont
      const initialFontSize = 44
      const fontStyle = 'italic'
      const fontWeight = ''
--- a/lib/submitters/generate_font_image.rb
+++ b/lib/submitters/generate_font_image.rb
@ -7,12 +7,33 @@ module Submitters

    FONTS = {
      'Dancing Script Regular' => '/fonts/DancingScript-Regular.otf',
+      'Great Vibes Regular' => '/fonts/GreatVibes-Regular.ttf',
+      'Pacifico Regular' => '/fonts/Pacifico-Regular.ttf',
+      'Caveat Regular' => '/fonts/Caveat-Regular.ttf',
+      'Homemade Apple Regular' => '/fonts/HomemadeApple-Regular.ttf',
+      'Mrs Saint Delafield Regular' => '/fonts/MrsSaintDelafield-Regular.ttf',
+      'Shadows Into Light Regular' => '/fonts/ShadowsIntoLight-Regular.ttf',
+      'Alex Brush Regular' => '/fonts/AlexBrush-Regular.ttf',
+      'Kalam Regular' => '/fonts/Kalam-Regular.ttf',
+      'Sacramento Regular' => '/fonts/Sacramento-Regular.ttf',
+      'Herr Von Muellerhoff Regular' => '/fonts/HerrVonMuellerhoff-Regular.ttf',
      'Go Noto Kurrent-Bold Bold' => '/fonts/GoNotoKurrent-Bold.ttf'
    }.freeze

    FONT_ALIASES = {
      'initials' => 'Go Noto Kurrent-Bold Bold',
-      'signature' => 'Dancing Script Regular'
+      'signature' => 'Dancing Script Regular',
+      'Dancing Script' => 'Dancing Script Regular',
+      'Great Vibes' => 'Great Vibes Regular',
+      'Pacifico' => 'Pacifico Regular',
+      'Caveat' => 'Caveat Regular',
+      'Homemade Apple' => 'Homemade Apple Regular',
+      'Mrs Saint Delafield' => 'Mrs Saint Delafield Regular',
+      'Shadows Into Light' => 'Shadows Into Light Regular',
+      'Alex Brush' => 'Alex Brush Regular',
+      'Kalam' => 'Kalam Regular',
+      'Sacramento' => 'Sacramento Regular',
+      'Herr Von Muellerhoff' => 'Herr Von Muellerhoff Regular'
    }.freeze

    module_function