Skip to content

feat: Number field で数式入力 (100+20 / 100*2 / 50% / 50vw)#59

Merged
Pregum merged 1 commit intomainfrom
feat/number-field-math
Apr 23, 2026
Merged

feat: Number field で数式入力 (100+20 / 100*2 / 50% / 50vw)#59
Pregum merged 1 commit intomainfrom
feat/number-field-math

Conversation

@Pregum
Copy link
Copy Markdown
Owner

@Pregum Pregum commented Apr 23, 2026

Summary

Figma と同じく、PropertyPanel の数値入力欄に式を書けるように。

サポート構文

入力 結果 備考
100 + 20 120 四則
100 * 2 200
10 + 5 * 2 20 演算子優先
(10 + 5) * 2 30 括弧
-10 -10 単項マイナス
50% current * 0.5 現在値基準
50vw / 50vh viewport 基準

UX

  • 入力中(未確定 draft)は数値表示を保持、Enter / Blur で評価
  • 単純な数字(例 123)は入力中も即反映(スライダー感覚を妨げない)
  • Esc で draft 破棄、元の値に戻る
  • ArrowUp / Down で ±1、Shift+Arrow で ±10 (Figma と同じ)

実装

  • src/utils/evalExpression.ts 純関数(eval / Function 不使用)
  • 許可文字セットで validate してから再帰降下パーサで評価
  • PropertyPanel.NumberField を type="text" 化、draft state 追加
  • 13 テスト追加(250 → 263 tests

Test plan

  • 100 + 20 を width に入れて Enter → 120
  • width*1.5 を ... は未対応(識別子不可)、数値のみ
  • Esc で元の値に戻る
  • Shift+Arrow で 10 刻み
  • 不正式は値を変えずに draft だけ破棄

🤖 Generated with Claude Code

Figma の数値入力欄と同じく、PropertyPanel の X/Y/W/H 等で式を書けるように。

- src/utils/evalExpression.ts 新規
  - 再帰降下パーサで + - * / ( ) 単項 - を評価
  - "50%" (ctx.current ベース) / "50vw" / "50vh" suffix 対応
  - eval / Function は使わず、許可文字セット + zod ライクな厳密 validate
- NumberField を type="text" + draft state 化
  - 数値入力中は即 onChange (スライダー感覚)
  - "100 + 20" 等の式は blur / Enter で evalExpression 経由で確定
  - Esc で draft 破棄
  - ArrowUp/Down で ±1 (Shift で ±10) Figma 互換
- 13 件のユニットテスト追加 (合計 263 pass)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Pregum Pregum merged commit a3d7ac0 into main Apr 23, 2026
1 check passed
@Pregum Pregum deleted the feat/number-field-math branch April 23, 2026 06:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant