feat: Selection Colors / Document Colors パネル#61
Merged
Conversation
Figma の Selection colors と同等。選択セットがあればそのスコープ、
なければドキュメント全体の色を集計して一覧表示する。
- src/components/Viewer/SelectionColorsPanel.tsx 新規
- fill / stroke.fill から色を抽出（ネストした color object も対応）
- 利用ノード数でソートして表示、使用箇所 (fill / stroke) ラベル付き
- Select ボタン: 同じ色を使う全ノードを選択
- Replace ボタン: swatch クリック or Replace クリックで ColorPicker
popover が開き、選んだ色でドキュメント全体を一括置換
- コマンドパレット "🎨 Selection / Document Colors" から起動
- collectSelectionColors / replaceColor は純関数として export
- 12 テスト追加 (合計 275 pass)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Figma の Selection colors / Document colors と同等を追加。選択スコープ or ドキュメント全体の色を集計、swatch 一覧で Select / Replace できます。
UX
実装
collectSelectionColors/replaceColorは純関数として分離、12 件のユニットテストでカバー{ type: "color", color: "..." }の object 形式と string 形式両方対応、大文字小文字を無視して matchTest plan
🤖 Generated with Claude Code