頂点ドラッグ編集を追加 (#42)

[sugama-satsuki]

Summary

• useVertexEditing フックでライン/ポリゴンの頂点ハンドル管理を実装
• フィーチャ選択時に各頂点に白丸ハンドルを表示
• ドラッグ中はリアルタイムでフィーチャ形状をプレビュー（メインソースを直接更新）
• mouseup 時に setFeatures でコミット（undo 履歴対象）
• justDraggedRef で頂点クリック直後の選択解除を防止
• dragMapAtOffset E2E ヘルパーを追加

Test plan

• ユニットテスト: 60件すべてパス (npm test)
• E2E: vertex-editing.feature (1シナリオ) 含む40シナリオすべてパス (npm run test:e2e)

Closes #42

Summary by CodeRabbit

リリースノート

• New Features

  • マップ上の線やポリゴンの頂点をドラッグして編集できるようになりました。

• Tests

  • 頂点編集機能のエンドツーエンドテストを追加しました。

[coderabbitai]

📝 Walkthrough

Walkthrough

確認済みのラインおよびポリゴンフィーチャに対して、頂点をドラッグして位置を変更する機能を実装しました。新しいカスタムフックと補助関数、E2Eテスト、およびMapViewコンポーネントの統合が含まれます。

Changes

Cohort / File(s)	Summary
E2Eテストとヘルパー e2e/features/vertex-editing.feature, e2e/step-definitions/vertex-editing-steps.ts, e2e/support/helpers/map-helpers.ts	頂点ドラッグ編集機能のE2Eテストシナリオと、マップキャンバス上での段階的なドラッグ操作をシミュレートするdragMapAtOffsetヘルパー関数を追加。
頂点編集フック src/hooks/useVertexEditing.ts	MapLibre GLマップ上での対話的な頂点編集を管理する新しいReactフック。選択フィーチャーの頂点ハンドルをレンダリング、ドラッグ状態の管理、および頂点移動時のリアルタイム更新を実装。
MapViewコンポーネント統合 src/components/MapView.tsx	頂点編集フックの統合、頂点編集後のフィーチャー更新ロジック、および頂点ドラッグ直後のクリック無視ガード機能を追加。

Sequence Diagram(s)

sequenceDiagram
    participant User as ユーザー
    participant MapView as MapView
    participant Hook as useVertexEditing<br/>(Hook)
    participant Map as MapLibreGL<br/>Map
    participant Source as Vertex Source<br/>(GeoJSON)

    User->>MapView: フィーチャーを選択
    MapView->>Hook: selectedFeatureIdが変更される
    Hook->>Hook: getVertexHandles()で頂点を計算
    Hook->>Source: 頂点ハンドルのGeometryを更新
    Source->>Map: 頂点ハンドルをレンダリング

    User->>Map: 頂点ハンドルにマウスダウン
    activate Map
    Map->>Hook: mousedownイベント
    Hook->>Hook: ドラッグ状態をキャプチャ<br/>map.dragPan.disable()
    deactivate Map

    User->>Map: 頂点をドラッグ（mousemove）
    activate Map
    loop ドラッグ中
        Map->>Hook: mousemoveイベント
        Hook->>Hook: applyVertexMove()で<br/>フィーチャー座標を更新
        Hook->>Source: 更新済みフィーチャーを<br/>メインSourceに反映
    end
    deactivate Map

    User->>Map: マウスを放す（mouseup）
    activate Map
    Map->>Hook: mouseupイベント
    Hook->>Hook: ドラッグ状態をクリア<br/>map.dragPan.enable()
    Hook->>MapView: onCommit(updatedFeature)
    MapView->>MapView: updateFeatureVertex()で<br/>フィーチャーを確定
    deactivate Map

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Poem

🐰 ぴょん、ぴょん！
頂点つかんでドラッグする、
リアルタイムで形が変わる、
削除・再描不要、
微調整も楽々だ〜！
🗺️✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR title clearly describes the main feature: adding vertex drag editing functionality in Japanese, which matches the primary objective of the changeset.
Linked Issues check	✅ Passed	Code changes comprehensively address all linked issue #42 requirements: vertex handle display, drag interaction, LineString/Polygon support, and GeoJSON updates are all implemented.
Out of Scope Changes check	✅ Passed	All changes directly support vertex editing: useVertexEditing hook, MapView integration, helper functions, and E2E tests—no unrelated modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/vertex-editing

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

e2e/features/vertex-editing.feature (1)

17-19: 頂点座標の変更を検証するアサーションの追加を検討してください。

現在のシナリオでは、ドラッグ後にフィーチャ数とジオメトリタイプのみを検証しています。頂点編集が実際に適用されたことを証明するには、座標が変更されたことを検証するアサーションがあると、より堅牢なテストになります。

例: ドラッグ前後の GeoJSON 座標を比較するステップを追加する。

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@e2e/features/vertex-editing.feature` around lines 17 - 19, Add an assertion
that verifies the vertex coordinates actually changed by capturing the GeoJSON
coordinates before the step "もし 地図の中央から右に 60px の位置の頂点を右に 40px ドラッグする" and
comparing them to the coordinates after that step; update the scenario to store
the pre-drag coordinates (e.g., via a "given" or helper step that fetches
GeoJSON) and then add a "then" step that asserts the first feature's LineString
coordinates differ from the saved pre-drag coordinates (or that a specific
vertex moved by ~40px in map units), referencing the existing scenario steps to
locate where to insert the new pre- and post-drag checks.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@e2e/features/vertex-editing.feature`:
- Around line 17-19: Add an assertion that verifies the vertex coordinates
actually changed by capturing the GeoJSON coordinates before the step "もし
地図の中央から右に 60px の位置の頂点を右に 40px ドラッグする" and comparing them to the coordinates
after that step; update the scenario to store the pre-drag coordinates (e.g.,
via a "given" or helper step that fetches GeoJSON) and then add a "then" step
that asserts the first feature's LineString coordinates differ from the saved
pre-drag coordinates (or that a specific vertex moved by ~40px in map units),
referencing the existing scenario steps to locate where to insert the new pre-
and post-drag checks.