Metro map interaction redesign: fit-to-view zoom, grid, branch handles, custom tracks

Phase 1 — Fit-to-view zoom:
- computeFitTransform() calculates bounding box and scales to fit all nodes
- Replaces hardcoded scale=1 reset in animateZoomReset() and initCanvas()
- Dim 1 no longer appears tiny after zooming out from dim 2

Phase 2 — Grid system:
- Shared gridConstants.js (GRID=50, GRID_STEP_X=200, GRID_STEP_Y=150)
- MapDataService snapToGrid() aligns all node positions server-side
- Canvas renders subtle grid lines (shown on interaction only, with fade)
- Line highlighting support via setHighlightedLine() for FAB hover

Phase 3 — Branch handles:
- Hover any station node → 3 "+" handles appear (0°/45°/315°)
- 0° extends the current line, 45°/315° fork to create new branch
- Ghost preview (dashed line + circle) on handle hover
- Handles only show at unoccupied grid positions
- Grid fades in during handle interaction, fades out after

Phase 4 — Custom tracks database:
- metro_lines table (project_id, naam, color, type, order)
- metro_nodes table (metro_line_id, naam, status, x, y, order)
- MetroLine + MetroNode models, controllers, routes
- Project.metroLines() relationship added

Phase 5+6 — FAB redesign + MetroMap wiring:
- FAB shows "Nieuw thema (lijn)" at root, "Nieuwe lijn" in project dim
- Track creation modal with retro-styled form
- MetroMap handles create-node events from branch handles
- Extend (0°) opens commitment/document form, fork opens track form
- Canvas context menu replaced with "hover to branch" hint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/Models/MetroLine.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class MetroLine extends Model
+{
+    use HasFactory;
+
+    protected $table = 'metro_lines';
+
+    protected $fillable = [
+        'project_id',
+        'naam',
+        'color',
+        'type',
+        'order',
+    ];
+
+    public function project(): BelongsTo
+    {
+        return $this->belongsTo(Project::class);
+    }
+
+    public function metroNodes(): HasMany
+    {
+        return $this->hasMany(MetroNode::class);
+    }
+
+    public function isBuiltIn(): bool
+    {
+        return in_array($this->type, ['lifecycle', 'commitments', 'documents']);
+    }
+}

app/Models/MetroNode.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class MetroNode extends Model
+{
+    use HasFactory;
+
+    protected $table = 'metro_nodes';
+
+    protected $fillable = [
+        'metro_line_id',
+        'naam',
+        'beschrijving',
+        'status',
+        'x',
+        'y',
+        'order',
+        'eigenaar_id',
+    ];
+
+    public function metroLine(): BelongsTo
+    {
+        return $this->belongsTo(MetroLine::class);
+    }
+
+    public function eigenaar(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'eigenaar_id');
+    }
+}

app/Models/Project.php

@@ -105,4 +105,9 @@ class Project extends Model
     {
         return $this->hasMany(Overdrachtsplan::class);
     }
+
+    public function metroLines(): HasMany
+    {
+        return $this->hasMany(MetroLine::class);
+    }
 }