Skip to content
fandhe-frontend
GitHub

Signature Pad

fandhe-frontend-headless-ui の signature_pad mod が提供する手書き署名入力の unstyled 部品です。Root / Label / Control / Segment（svg）/ SegmentPath / Guide / ClearTrigger / HiddenInput の 8 anatomy パーツを持ち、canvas を一切使わず、ストローク（座標列）を SVG path 文字列へ変換する決定的な純粋関数のみで描画します。ポインタイベントの収集自体は本部品の責務外です。

/themes/ 側の SignaturePad（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Signature Pad を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Signature

Features

  • Root / Label / Control / Segment（`svg`）/ SegmentPath（ストロークごとの `path`）/ Guide / ClearTrigger / HiddenInput の 8 anatomy パーツを提供する。canvas を一切使わず、ストローク（座標列）を SVG path 文字列へ変換する決定的な純粋関数（`stroke_path_d`）が中核である。
  • `stroke_path_d` は同一座標列から常に同一の `d` 属性値を生成する（固定小数点 2 桁・round half away from zero・指数表記なし）。ポインタイベントの収集自体は本モジュールの責務外（`fandhe-frontend-wasm-full` が座標列を正規化して dispatch する）。
  • `hidden_input` は全ストロークの `d` 文字列を `;` 結合した値をフォーム送信する。points 数・ストローク数には上限（`MAX_POINTS_PER_STROKE`/`MAX_STROKES`）があり、改ざんされた dispatch payload・hydration 属性による無制限メモリ確保を防ぐ。

Anatomy

root
  label
  control
    guide
    segment
      segment-path
  clear-trigger
  hidden-input

API Reference

Arguments

NameTypeDefaultDescription
root(disabled)bool`data-disabled` を反映する。
root(empty)boolstrokes が空かどうか。`data-empty` として反映する。
control(disabled)bool`data-disabled` を反映する。
segment(width, height)u32, u32`viewBox="0 0 {width} {height}"` として描画領域寸法を出力する。
segment(aria_label_text)Option<&str>`Some` のとき `aria-label` を付与する。未指定時は `role="img"` のみ（偽の説明文を捏造しない fail-closed 方針）。
segment_path(stroke)&Stroke`d` 属性値は `stroke_path_d(stroke)` の内部生成文字列のみ（`fill`/`stroke` は付与せず headless 中立を保つ）。
clear_trigger(disabled)boolネイティブ `disabled` + `data-disabled` を反映する。
hidden_input(name, value)&str, &strフォーム送信名と、全ストロークを `;` 結合した値。

Examples

Empty, disabled

ストロークが 1 本もない無効化状態（`root(empty: true, disabled: true)`）。`guide` のみが描画される。

Signature (disabled)

Accessibility

WAI-ARIA

AttributeDescription
role="img" (segment)`aria_label_text` が `None` のときのみ `role="img"` のみを出力し、偽の説明文を作らない（`aria_label_text` が `Some` のときは `aria-label` を併せて付与する）。