Image Cropper

fandhe-frontend-pre-styled-ui の image_cropper mod が提供するスタイル済み Image Cropper 部品です。

Demo

画像切り抜き範囲の選択 UI。headless-ui の ImageCropper 状態機械（クロップ枠・8 方位リサイズハンドル・三分割グリッド線を含む完全な anatomy）をラップする。

size variant クラスを root へ付与し、headless-ui の ImageCropper 状態機械（切り抜き範囲・原寸を保持）へ委譲する。
selection パーツが --fandhe-image-cropper-*（4 個）custom property を含む style を動的値の唯一の出力点として持つ。

root
  viewport
    image
    selection
      handle
      grid

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`state`	`&ImageCropper`	—	headless-ui の切り抜き状態機械。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード（通常 `selection` を含む）。

Part	Attribute	Observed Values
`handle`	`data-position`	`e`, `n`, `ne`, `nw`, `s`, `se`, `sw`, `w`

Variable	Default
`--fandhe-image-cropper-h`	`100%`
`--fandhe-image-cropper-handle-size`	`0.75rem`
`--fandhe-image-cropper-w`	`100%`
`--fandhe-image-cropper-x`	`0%`
`--fandhe-image-cropper-y`	`0%`