Mixins / foldkit-mixins-ui
SignaturePadSlots
const · packages/mixins-ui/src/signaturePad.ts:33
const SignaturePadSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly control: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly segments: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly stroke: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly guide: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly placeholder: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, r …;A signature pad after Zag's: strokes drawn with a pointer on a control
above a dashed guide and a "Sign here" placeholder, undo and clear, and
a text field where a name can be typed instead, for whoever cannot draw.
The strokes are data in a small Model of this module's: each a list of
points with the pen's pressure, in the pad's own coordinates (its size
when first measured; a pad drawn larger later scales what it is sent into
them). A pen's pressure is used as the browser reports it; a mouse or a
finger reports none worth reading, so the stroke thins as it speeds up
instead. Each stroke is drawn as the outline of a variable-width line,
smoothed, after perfect-freehand's method: pathOf gives its SVG path
data, toSvg the whole drawing as an SVG document, and ExportPng draws
it on a canvas as a PNG data URL.
The signature is the drawing, or, while nothing is drawn, the typed name, which the pad shows on its line in the recipe's script face and both exports write. The control is an image to assistive technology, named by what it holds; the typed field is the way to sign by keyboard.