Formtest Entwicklerdoku

Appearance

Signature Pad ​

Die wiederverwendbare Signatur-Zeichenebene liegt in app/composables/forms/useSignaturePad.ts. Der gemeinsame Komponenten-Lifecycle liegt in app/composables/forms/useSignaturePadLifecycle.ts.

Zweck ​

Sie kapselt die Bibliothek signature_pad und ergänzt resize-sicheres Lifecycle-Handling für Vue-Komponenten.

Im Code verifizierte Verbraucher:

  • app/components/Form/SignatureInput.vue
  • app/components/OtherRemarks/OtherRemarksForm.vue

useSignaturePad ​

Eingaben:

  • canvasRef
  • wrapperRef
  • optional initialData
  • optional padOptions
  • optional onEndStroke

Rückgabewerte:

  • signaturePad
  • isPadEmpty
  • initPad()
  • resizeCanvas()
  • clear()
  • fromDataURL()
  • toDataURL()
  • destroy()

Wichtiges Verhalten ​

  • initialisiert die SignaturePad-Instanz bei Bedarf neu
  • beobachtet die Größe des Wrappers über ResizeObserver
  • skaliert das Canvas anhand des Device-Pixel-Ratios
  • erhält vorhandene Signaturinhalte über Größenänderungen hinweg
  • stellt entweder Vektor-Strichdaten oder einen Data-URL-Fallback wieder her, wenn keine Vektordaten verfügbar sind
  • zerstört Pad und Observer beim Unmounten der Komponente

useSignaturePadLifecycle ​

useSignaturePadLifecycle(...) baut auf useSignaturePad(...) auf und kapselt den wiederholten Komponenten-Glue für Canvas-Flächen.

Der Helper übernimmt:

  • Initialisierung erst nach aktivem Renderzustand und stabilem Canvas
  • Rehydrierung aus gespeicherten Data-URLs, solange das Pad leer ist
  • optionales Abschalten der Pad-Interaktion
  • gemeinsames Clear-Verhalten mit domänenspezifischem Callback
  • optionales Zerstören des Pad-Zustands, wenn die UI inaktiv wird

Die Verbraucher liefern nur noch ihre fachlichen Regeln, zum Beispiel gespeicherte Data-URL, Clear-Callback oder Save-on-Stroke.

Integration in Signature Input ​

SignatureInput.vue verwendet den Lifecycle-Helper innerhalb eines Modals.

Diese Komponente ergänzt auf dem Pad aufbauend fachliche Workflow-Aspekte:

  • Namens- und Vertretungsfelder
  • Verweigerungszustand
  • Read-only-Behandlung
  • Modal-Open-/Close-Lifecycle
  • Umwandlung des Pad-Inhalts in das gespeicherte Signatur-Payload

OtherRemarksForm.vue verwendet denselben Lifecycle für die handschriftlichen Bemerkungen und ergänzt nur das automatische Speichern ins Store-Feld handwriting sowie die KI-Transkription.