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/Http/Controllers/MetroLineController.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\MetroLine;
+use Illuminate\Http\Request;
+
+class MetroLineController extends Controller
+{
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'project_id' => 'required|exists:projects,id',
+            'naam'       => 'required|string|max:255',
+            'color'      => 'nullable|string|max:7',
+        ]);
+
+        $maxOrder = MetroLine::where('project_id', $validated['project_id'])->max('order') ?? 0;
+
+        $line = MetroLine::create([
+            'project_id' => $validated['project_id'],
+            'naam'       => $validated['naam'],
+            'color'      => $validated['color'] ?? $this->nextColor($validated['project_id']),
+            'type'       => 'custom',
+            'order'      => $maxOrder + 1,
+        ]);
+
+        return back()->with('success', "Lijn '{$line->naam}' aangemaakt.");
+    }
+
+    public function destroy(MetroLine $metroLine)
+    {
+        if ($metroLine->isBuiltIn()) {
+            return back()->with('error', 'Ingebouwde lijnen kunnen niet verwijderd worden.');
+        }
+
+        $metroLine->delete();
+
+        return back()->with('success', 'Lijn verwijderd.');
+    }
+
+    private function nextColor(int $projectId): string
+    {
+        $colors = ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#ff8fab', '#a8dadc', '#e07a5f', '#81b29a'];
+        $used = MetroLine::where('project_id', $projectId)->pluck('color')->toArray();
+
+        foreach ($colors as $c) {
+            if (!in_array($c, $used)) {
+                return $c;
+            }
+        }
+
+        return $colors[0];
+    }
+}

app/Http/Controllers/MetroNodeController.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\MetroNode;
+use Illuminate\Http\Request;
+
+class MetroNodeController extends Controller
+{
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'metro_line_id' => 'required|exists:metro_lines,id',
+            'naam'          => 'required|string|max:255',
+            'beschrijving'  => 'nullable|string',
+            'x'             => 'required|integer',
+            'y'             => 'required|integer',
+            'eigenaar_id'   => 'nullable|exists:users,id',
+        ]);
+
+        $maxOrder = MetroNode::where('metro_line_id', $validated['metro_line_id'])->max('order') ?? 0;
+        $validated['order'] = $maxOrder + 1;
+        $validated['status'] = 'active';
+
+        $node = MetroNode::create($validated);
+
+        return back()->with('success', "Node '{$node->naam}' aangemaakt.");
+    }
+
+    public function update(Request $request, MetroNode $metroNode)
+    {
+        $validated = $request->validate([
+            'naam'         => 'sometimes|string|max:255',
+            'beschrijving' => 'nullable|string',
+            'status'       => 'sometimes|string|in:active,completed,parked',
+            'x'            => 'sometimes|integer',
+            'y'            => 'sometimes|integer',
+        ]);
+
+        $metroNode->update($validated);
+
+        return back()->with('success', 'Node bijgewerkt.');
+    }
+
+    public function destroy(MetroNode $metroNode)
+    {
+        $metroNode->delete();
+
+        return back()->with('success', 'Node verwijderd.');
+    }
+}

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);
+    }
 }

app/Services/MapDataService.php

@@ -9,6 +9,19 @@ use Illuminate\Support\Str;
 
 class MapDataService
 {
+    /**
+     * Grid unit — all node positions snap to multiples of this value.
+     * Keep in sync with resources/js/Components/MetroMap/gridConstants.js
+     */
+    private const GRID = 50;
+    private const GRID_STEP_X = 200;   // horizontal spacing between nodes
+    private const GRID_STEP_Y = 150;   // vertical spacing between metro lines
+
+    private function snapToGrid(float $value): int
+    {
+        return (int) (round($value / self::GRID) * self::GRID);
+    }
+
     /**
      * Build the Level 1 (Strategy) metro map data.
      * Each theme = a metro line, each project = a station.
@@ -38,7 +51,7 @@ class MapDataService
             ];
 
             $projects = $thema->speerpunten->flatMap->projects;
-            $xOffset = -200;
+            $xStart = $this->snapToGrid(-200);
 
             foreach ($projects as $order => $project) {
                 $nodes[] = [
@@ -47,8 +60,8 @@ class MapDataService
                     'entityType' => 'project',
                     'name' => $project->naam,
                     'lineId' => "thema-{$thema->id}",
-                    'x' => $xOffset + ($order * 200),
+                    'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
-                    'y' => $yOffset,
+                    'y' => $this->snapToGrid($yOffset),
                     'order' => $order + 1,
                     'status' => $project->status->value,
                     'description' => Str::limit($project->beschrijving, 100),
@@ -58,7 +71,7 @@ class MapDataService
                 ];
             }
 
-            $yOffset += 130;
+            $yOffset += self::GRID_STEP_Y;
         }
 
         // Get dependencies as connections
@@ -99,7 +112,7 @@ class MapDataService
         ];
 
         $nodes = [];
-        $xOffset = -300;
+        $xStart = $this->snapToGrid(-300);
 
         // Phase nodes on lifecycle line
         foreach ($project->fases->sortBy('type') as $order => $fase) {
@@ -109,8 +122,8 @@ class MapDataService
                 'entityType' => 'fase',
                 'name' => ucfirst(str_replace('_', ' ', $fase->type->value)),
                 'lineId' => 'lifecycle',
-                'x' => $xOffset + ($order * 180),
+                'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
-                'y' => -50,
+                'y' => $this->snapToGrid(-50),
                 'order' => $order + 1,
                 'status' => $fase->status->value,
                 'badge' => ucfirst($fase->status->value),
@@ -126,8 +139,8 @@ class MapDataService
                 'entityType' => 'commitment',
                 'name' => Str::limit($commitment->beschrijving, 40),
                 'lineId' => 'commitments',
-                'x' => $xOffset + ($order * 180),
+                'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
-                'y' => 80,
+                'y' => $this->snapToGrid(100),
                 'order' => $order + 1,
                 'status' => $commitment->status->value,
                 'owner' => $commitment->eigenaar?->name,
@@ -144,8 +157,8 @@ class MapDataService
                 'entityType' => 'document',
                 'name' => $doc->titel,
                 'lineId' => 'documents',
-                'x' => $xOffset + ($order * 180),
+                'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
-                'y' => 210,
+                'y' => $this->snapToGrid(250),
                 'order' => $order + 1,
                 'status' => 'active',
                 'badge' => "v{$doc->versie}",
@@ -181,8 +194,7 @@ class MapDataService
         ];
 
         $nodes = [];
-        $xOffset = -250;
+        $xStart = $this->snapToGrid(-250);
-        $spacing = 200;
 
         // Phase nodes
         foreach ($project->fases->sortBy('created_at') as $i => $fase) {
@@ -192,8 +204,8 @@ class MapDataService
                 'entityType' => 'fase',
                 'name' => ucfirst(str_replace('_', ' ', $fase->type->value)),
                 'lineId' => "lifecycle-{$project->id}",
-                'x' => $xOffset + ($i * $spacing),
+                'x' => $this->snapToGrid($xStart + ($i * self::GRID_STEP_X)),
-                'y' => -60,
+                'y' => $this->snapToGrid(-50),
                 'order' => $i + 1,
                 'status' => $fase->status->value,
                 'badge' => ucfirst($fase->status->value),
@@ -209,8 +221,8 @@ class MapDataService
                 'entityType' => 'commitment',
                 'name' => Str::limit($commitment->beschrijving, 35),
                 'lineId' => "commitments-{$project->id}",
-                'x' => $xOffset + ($i * $spacing),
+                'x' => $this->snapToGrid($xStart + ($i * self::GRID_STEP_X)),
-                'y' => 80,
+                'y' => $this->snapToGrid(100),
                 'order' => $i + 1,
                 'status' => $commitment->status->value,
                 'owner' => $commitment->eigenaar?->name,
@@ -227,8 +239,8 @@ class MapDataService
                 'entityType' => 'document',
                 'name' => $doc->titel,
                 'lineId' => "documents-{$project->id}",
-                'x' => $xOffset + ($i * $spacing),
+                'x' => $this->snapToGrid($xStart + ($i * self::GRID_STEP_X)),
-                'y' => 220,
+                'y' => $this->snapToGrid(250),
                 'order' => $i + 1,
                 'status' => 'active',
                 'badge' => "v{$doc->versie}",
@@ -240,7 +252,6 @@ class MapDataService
             'lines' => $lines,
             'nodes' => $nodes,
             'connections' => [],
-            // Metadata so the frontend knows what dimension it's in
             'parentEntityType' => 'project',
             'parentEntityId' => $project->id,
             'parentName' => $project->naam,
@@ -249,13 +260,11 @@ class MapDataService
 
     /**
      * Return children for any node by entity type and ID.
-     * Used by the API endpoint for on-demand dimension data.
      */
     public function getNodeChildren(string $entityType, int $entityId): ?array
     {
         return match ($entityType) {
             'project' => $this->buildProjectChildren(Project::findOrFail($entityId)),
-            // Future: 'commitment' => $this->buildCommitmentChildren(...)
             default => null,
         };
     }

database/migrations/2026_04_08_000001_create_metro_lines_table.php

@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('metro_lines', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('project_id')->nullable()->constrained('projects')->cascadeOnDelete();
+            $table->string('naam', 255);
+            $table->string('color', 7);
+            $table->string('type');
+            $table->integer('order')->default(0);
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('metro_lines');
+    }
+};

database/migrations/2026_04_08_000002_create_metro_nodes_table.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('metro_nodes', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('metro_line_id')->constrained('metro_lines')->cascadeOnDelete();
+            $table->string('naam', 255);
+            $table->text('beschrijving')->nullable();
+            $table->string('status')->default('active');
+            $table->integer('x')->default(0);
+            $table->integer('y')->default(0);
+            $table->integer('order')->default(0);
+            $table->foreignId('eigenaar_id')->nullable()->constrained('users')->nullOnDelete();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('metro_nodes');
+    }
+};

resources/js/Components/MetroMap/FloatingActions.vue

@@ -8,38 +8,44 @@ const props = defineProps({
 })
 
 const emit = defineEmits([
-    'create-project',
     'create-theme',
-    'create-commitment',
+    'create-track',
-    'create-document',
+    'item-hover',
+    'item-leave',
 ])
 
 const menuOpen = ref(false)
 
 const toggle = () => {
     menuOpen.value = !menuOpen.value
+    if (!menuOpen.value) emit('item-leave')
 }
 
-/** Options change based on which dimension we're in */
+/** Menu items adapt to the current dimension */
 const menuItems = computed(() => {
     if (props.depth > 1 && props.parentEntityType === 'project') {
-        // Inside a project dimension: create project-level items
         return [
-            { label: 'Nieuw commitment', event: 'create-commitment' },
+            { label: 'Nieuwe lijn', event: 'create-track', color: null, icon: '═' },
-            { label: 'Nieuw document', event: 'create-document' },
         ]
     }
-    // Root dimension: create top-level items
     return [
-        { label: 'Nieuw project', event: 'create-project' },
+        { label: 'Nieuw thema (lijn)', event: 'create-theme', color: '#00d2ff', icon: '═' },
-        { label: 'Nieuw thema', event: 'create-theme' },
     ]
 })
 
 const handleItemClick = (item) => {
     menuOpen.value = false
+    emit('item-leave')
     emit(item.event)
 }
+
+const handleItemHover = (item) => {
+    emit('item-hover', item)
+}
+
+const handleItemLeave = () => {
+    emit('item-leave')
+}
 </script>
 
 <template>
@@ -52,9 +58,14 @@ const handleItemClick = (item) => {
                     :key="item.event"
                     class="fab-menu-item"
                     @click="handleItemClick(item)"
+                    @mouseenter="handleItemHover(item)"
+                    @mouseleave="handleItemLeave"
                 >
-                    <span class="fab-menu-icon">+</span>
+                    <span class="fab-menu-icon" :style="item.color ? { color: item.color } : {}">
+                        {{ item.icon }}
+                    </span>
                     <span class="fab-menu-label">{{ item.label }}</span>
+                    <span v-if="item.color" class="fab-color-dot" :style="{ background: item.color }"></span>
                 </button>
             </div>
         </Transition>
@@ -170,6 +181,13 @@ const handleItemClick = (item) => {
     letter-spacing: 0.5px;
 }
 
+.fab-color-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    box-shadow: 0 0 6px currentColor;
+}
+
 /* Menu transition */
 .fab-menu-enter-active,
 .fab-menu-leave-active {

resources/js/Components/MetroMap/MetroCanvas.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
 import * as d3 from 'd3'
+import { GRID, GRID_STEP_X, GRID_STEP_Y, snapToGrid } from './gridConstants.js'
 
 // ---------------------------------------------------------------------------
 // Props & Emits
@@ -34,9 +35,13 @@ const emit = defineEmits([
 
 const ZOOM_IN_THRESHOLD  = 2.5
 const ZOOM_OUT_THRESHOLD = 0.6
-const ZOOM_IN_COMMIT     = 4.0   // commit at this scale (smoother range)
+const ZOOM_IN_COMMIT     = 4.0
-const ZOOM_OUT_COMMIT    = 0.25  // commit at this scale
+const ZOOM_OUT_COMMIT    = 0.25
-const NODE_PROXIMITY     = 250   // how close to a node to trigger zoom-in
+const NODE_PROXIMITY     = 250
+const FIT_PADDING        = 80    // px padding around nodes for labels
+const FIT_MARGIN         = 0.85  // use 85% of viewport
+const FIT_SCALE_MIN      = 0.3
+const FIT_SCALE_MAX      = 2.0
 
 const LINE_COLORS = [
     '#00d2ff', '#e94560', '#00ff88', '#7b68ee',
@@ -69,6 +74,13 @@ const transitionState = ref({
 // Tracks whether we're mid-commit (prevent re-entry)
 let isCommitting = false
 
+// Grid visibility (shown during branch handle interaction)
+const gridVisible = ref(false)
+let gridFadeTimer = null
+
+// Line highlighting (set by FAB hover)
+const highlightedLineId = ref(null)
+
 // Context menu
 const contextMenu = ref({
     show: false,
@@ -131,6 +143,42 @@ const buildRootDimension = () => {
     }
 }
 
+// ---------------------------------------------------------------------------
+// Fit-to-view transform
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute a D3 zoom transform that fits all nodes of a dimension into the
+ * viewport with padding, instead of always resetting to scale=1.
+ */
+const computeFitTransform = (dimData, w, h) => {
+    const nodes = dimData?.nodes ?? []
+    if (!nodes.length) {
+        return d3.zoomIdentity.translate(w / 2, h / 2).scale(1)
+    }
+
+    const xMin = Math.min(...nodes.map(n => n.x)) - FIT_PADDING
+    const xMax = Math.max(...nodes.map(n => n.x)) + FIT_PADDING
+    const yMin = Math.min(...nodes.map(n => n.y)) - FIT_PADDING
+    const yMax = Math.max(...nodes.map(n => n.y)) + FIT_PADDING
+
+    // Guard against degenerate bbox (single node or co-linear)
+    const bboxW = Math.max(xMax - xMin, 100)
+    const bboxH = Math.max(yMax - yMin, 100)
+
+    const scaleX = (w * FIT_MARGIN) / bboxW
+    const scaleY = (h * FIT_MARGIN) / bboxH
+    const scale  = Math.min(Math.max(Math.min(scaleX, scaleY), FIT_SCALE_MIN), FIT_SCALE_MAX)
+
+    const bboxCenterX = (xMin + xMax) / 2
+    const bboxCenterY = (yMin + yMax) / 2
+
+    const tx = w / 2 - bboxCenterX * scale
+    const ty = h / 2 - bboxCenterY * scale
+
+    return d3.zoomIdentity.translate(tx, ty).scale(scale)
+}
+
 // ---------------------------------------------------------------------------
 // Canvas init
 // ---------------------------------------------------------------------------
@@ -202,16 +250,14 @@ const initCanvas = () => {
         }
     })
 
-    // Centre the initial view
-    svg.call(
-        zoom.transform,
-        d3.zoomIdentity.translate(width / 2, height / 2).scale(1)
-    )
-
     // Seed the dimension stack with root data
     dimensionStack.value = [buildRootDimension()]
     currentDimensionIndex.value = 0
 
+    // Fit initial view to the data instead of hardcoded scale=1
+    const rootDim = dimensionStack.value[0]
+    svg.call(zoom.transform, computeFitTransform(rootDim, width, height))
+
     renderMap()
 }
 
@@ -337,8 +383,8 @@ const commitDimensionChange = (direction, node) => {
 }
 
 /**
- * Smoothly animate back to the default zoom (scale=1, centered).
+ * Smoothly animate to a fit-to-view transform for the current dimension.
- * This prevents the jarring snap that a hard reset causes.
+ * Calculates bounding box of all nodes and zooms to fit them in the viewport.
  */
 const animateZoomReset = () => {
     if (!svg || !zoom) {
@@ -350,16 +396,16 @@ const animateZoomReset = () => {
     const w = containerRef.value?.clientWidth  ?? 800
     const h = containerRef.value?.clientHeight ?? 600
 
+    const targetDim = currentDimensionData.value
+    const targetTransform = computeFitTransform(targetDim, w, h)
+
     // Temporarily disable the zoom handler to prevent re-entry during animation
     svg.on('.zoom', null)
 
     svg.transition()
         .duration(400)
         .ease(d3.easeCubicOut)
-        .call(
+        .call(zoom.transform, targetTransform)
-            zoom.transform,
-            d3.zoomIdentity.translate(w / 2, h / 2).scale(1)
-        )
         .on('end', () => {
             // Re-enable zoom handler
             svg.call(zoom)
@@ -406,6 +452,174 @@ const findNodeAt = (x, y, dimData = null) => {
     return nodes.find(n => Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2) < 15) ?? null
 }
 
+// ---------------------------------------------------------------------------
+// Grid rendering (shown on interaction only)
+// ---------------------------------------------------------------------------
+
+const renderGrid = (dimData, parentGroup) => {
+    const nodes = dimData?.nodes ?? []
+    if (!nodes.length) return
+
+    const gridGroup = parentGroup.append('g')
+        .attr('class', 'grid-layer')
+        .attr('opacity', gridVisible.value ? 0.6 : 0)
+        .style('transition', 'opacity 0.3s ease')
+
+    const margin = 300
+    const xMin = Math.min(...nodes.map(n => n.x)) - margin
+    const xMax = Math.max(...nodes.map(n => n.x)) + margin
+    const yMin = Math.min(...nodes.map(n => n.y)) - margin
+    const yMax = Math.max(...nodes.map(n => n.y)) + margin
+
+    for (let x = snapToGrid(xMin); x <= xMax; x += GRID_STEP_X) {
+        gridGroup.append('line')
+            .attr('x1', x).attr('y1', yMin)
+            .attr('x2', x).attr('y2', yMax)
+            .attr('stroke', 'rgba(0, 210, 255, 0.06)')
+            .attr('stroke-width', 0.5)
+            .attr('stroke-dasharray', '2,6')
+    }
+    for (let y = snapToGrid(yMin); y <= yMax; y += GRID_STEP_Y) {
+        gridGroup.append('line')
+            .attr('x1', xMin).attr('y1', y)
+            .attr('x2', xMax).attr('y2', y)
+            .attr('stroke', 'rgba(0, 210, 255, 0.06)')
+            .attr('stroke-width', 0.5)
+            .attr('stroke-dasharray', '2,6')
+    }
+}
+
+const showGrid = () => {
+    clearTimeout(gridFadeTimer)
+    gridVisible.value = true
+    if (g) g.select('.grid-layer').transition().duration(200).attr('opacity', 0.6)
+}
+
+const hideGrid = () => {
+    gridFadeTimer = setTimeout(() => {
+        gridVisible.value = false
+        if (g) g.select('.grid-layer').transition().duration(300).attr('opacity', 0)
+    }, 400)
+}
+
+// ---------------------------------------------------------------------------
+// Branch handles
+// ---------------------------------------------------------------------------
+
+/**
+ * Render branch handles on a hovered node.
+ * 0° = extend line right, 45° = fork down-right, 315° = fork up-right.
+ */
+const renderBranchHandles = (nodeGroup, node, allNodes) => {
+    // Remove any existing handles first
+    nodeGroup.select('.branch-handles').remove()
+
+    const handleGroup = nodeGroup.append('g').attr('class', 'branch-handles')
+    const HANDLE_DIST = 30   // distance from node center to handle
+    const HANDLE_R = 9       // handle circle radius
+
+    const branches = [
+        { deg: 0,   dx: GRID_STEP_X, dy: 0,             label: '→' },
+        { deg: 45,  dx: GRID_STEP_X, dy: GRID_STEP_Y,   label: '↘' },
+        { deg: 315, dx: GRID_STEP_X, dy: -GRID_STEP_Y,  label: '↗' },
+    ]
+
+    branches.forEach(b => {
+        const targetX = snapToGrid(node.x + b.dx)
+        const targetY = snapToGrid(node.y + b.dy)
+
+        // Skip if target position is occupied
+        if (allNodes.some(n => n.x === targetX && n.y === targetY)) return
+
+        const rad = (b.deg * Math.PI) / 180
+        const hx = Math.cos(rad) * HANDLE_DIST
+        const hy = Math.sin(rad) * HANDLE_DIST
+
+        // Handle circle
+        const handle = handleGroup.append('circle')
+            .attr('cx', hx).attr('cy', hy)
+            .attr('r', HANDLE_R)
+            .attr('fill', 'rgba(0, 210, 255, 0.1)')
+            .attr('stroke', '#00d2ff')
+            .attr('stroke-width', 1.5)
+            .attr('stroke-dasharray', '3,2')
+            .attr('cursor', 'pointer')
+            .attr('class', 'branch-handle')
+            .attr('opacity', 0)
+            .transition().duration(200)
+            .attr('opacity', 0.8)
+
+        // "+" text on handle
+        handleGroup.append('text')
+            .attr('x', hx).attr('y', hy + 4)
+            .attr('text-anchor', 'middle')
+            .attr('fill', '#00d2ff')
+            .attr('font-family', "'VT323', monospace")
+            .attr('font-size', '13px')
+            .attr('pointer-events', 'none')
+            .attr('opacity', 0)
+            .transition().duration(200)
+            .attr('opacity', 0.9)
+            .text('+')
+
+        // Invisible larger hit area for the handle
+        handleGroup.append('circle')
+            .attr('cx', hx).attr('cy', hy)
+            .attr('r', HANDLE_R + 6)
+            .attr('fill', 'transparent')
+            .attr('cursor', 'pointer')
+            .on('mouseenter', () => {
+                // Ghost preview: dashed line + ghost circle at target
+                handleGroup.selectAll('.ghost-preview').remove()
+                handleGroup.append('line')
+                    .attr('class', 'ghost-preview')
+                    .attr('x1', 0).attr('y1', 0)
+                    .attr('x2', b.dx).attr('y2', b.dy)
+                    .attr('stroke', '#00d2ff')
+                    .attr('stroke-width', 2)
+                    .attr('stroke-dasharray', '6,4')
+                    .attr('opacity', 0.4)
+                handleGroup.append('circle')
+                    .attr('class', 'ghost-preview')
+                    .attr('cx', b.dx).attr('cy', b.dy)
+                    .attr('r', 8)
+                    .attr('fill', 'none')
+                    .attr('stroke', '#00d2ff')
+                    .attr('stroke-width', 1.5)
+                    .attr('stroke-dasharray', '4,3')
+                    .attr('opacity', 0.5)
+                handleGroup.append('text')
+                    .attr('class', 'ghost-preview')
+                    .attr('x', b.dx).attr('y', b.dy + 28)
+                    .attr('text-anchor', 'middle')
+                    .attr('fill', '#00d2ff')
+                    .attr('font-family', "'VT323', monospace")
+                    .attr('font-size', '12px')
+                    .attr('opacity', 0.5)
+                    .text(b.deg === 0 ? 'extend' : 'fork')
+            })
+            .on('mouseleave', () => {
+                handleGroup.selectAll('.ghost-preview').remove()
+            })
+            .on('click', (event) => {
+                event.stopPropagation()
+                emit('create-node', {
+                    x: targetX,
+                    y: targetY,
+                    lineId: b.deg === 0 ? node.lineId : null, // null = new track
+                    afterNodeId: node.id,
+                    branchAngle: b.deg,
+                    parentNodeId: currentDimensionData.value?.parentNodeId ?? null,
+                    parentEntityType: currentDimensionData.value?.parentEntityType ?? null,
+                    parentEntityId: currentDimensionData.value?.parentEntityId ?? null,
+                    dimensionId: currentDimensionData.value?.id ?? 'root',
+                    depth: currentDepth.value,
+                    sourceNode: node,
+                })
+            })
+    })
+}
+
 // ---------------------------------------------------------------------------
 // Rendering
 // ---------------------------------------------------------------------------
@@ -418,6 +632,9 @@ const renderDimension = (dimData, opacity, parentGroup) => {
         .attr('class', 'dimension-group')
         .style('transition', 'opacity 0.05s linear')
 
+    // Grid layer (behind everything, only visible during interaction)
+    renderGrid(dimData, group)
+
     const nodes       = dimData.nodes       ?? []
     const lines       = dimData.lines       ?? []
     const connections = dimData.connections ?? []
@@ -425,6 +642,8 @@ const renderDimension = (dimData, opacity, parentGroup) => {
     // --- Metro lines ---
     lines.forEach((line, lineIndex) => {
         const color     = line.color || getLineColor(lineIndex)
+        const isHighlighted = highlightedLineId.value === line.id
+        const isAnyHighlighted = highlightedLineId.value !== null
         const lineNodes = nodes
             .filter(n => n.lineId === line.id)
             .sort((a, b) => a.order - b.order)
@@ -449,15 +668,19 @@ const renderDimension = (dimData, opacity, parentGroup) => {
             .y(d => d.y)
             .curve(d3.curveMonotoneX)
 
+        const trackOpacity = isAnyHighlighted ? (isHighlighted ? 1.0 : 0.2) : 0.75
+        const glowOpacity = isAnyHighlighted ? (isHighlighted ? 0.3 : 0.05) : 0.15
+
         // Outer glow track
         group.append('path')
             .datum(lineNodes)
             .attr('d', lineGen)
             .attr('fill', 'none')
             .attr('stroke', color)
-            .attr('stroke-width', 8)
+            .attr('stroke-width', isHighlighted ? 10 : 8)
             .attr('stroke-linecap', 'round')
-            .attr('opacity', 0.15)
+            .attr('opacity', glowOpacity)
+            .attr('filter', isHighlighted ? 'url(#glow)' : null)
 
         // Main track
         group.append('path')
@@ -465,9 +688,9 @@ const renderDimension = (dimData, opacity, parentGroup) => {
             .attr('d', lineGen)
             .attr('fill', 'none')
             .attr('stroke', color)
-            .attr('stroke-width', 4)
+            .attr('stroke-width', isHighlighted ? 5 : 4)
             .attr('stroke-linecap', 'round')
-            .attr('opacity', 0.75)
+            .attr('opacity', trackOpacity)
 
         // Line label
         if (lineNodes.length > 0) {
@@ -515,6 +738,11 @@ const renderDimension = (dimData, opacity, parentGroup) => {
                 .transition().duration(200)
                 .attr('r', 12)
                 .attr('filter', 'url(#glow)')
+
+            // Show branch handles
+            showGrid()
+            renderBranchHandles(d3.select(event.currentTarget), d, nodes)
+
             emit('node-hover', d)
         })
         .on('mouseleave', (event, d) => {
@@ -523,6 +751,11 @@ const renderDimension = (dimData, opacity, parentGroup) => {
                 .transition().duration(200)
                 .attr('r', 8)
                 .attr('filter', null)
+
+            // Remove branch handles
+            d3.select(event.currentTarget).select('.branch-handles').remove()
+            hideGrid()
+
             emit('node-leave', d)
         })
 
@@ -760,12 +993,20 @@ const zoomTo = (x, y, scale) => {
     )
 }
 
+const setHighlightedLine = (lineId) => {
+    highlightedLineId.value = lineId
+    renderMap()
+}
+
 defineExpose({
     zoomTo,
     handleFabCreate,
     currentDepth,
     currentDimensionData,
     isInChildDimension,
+    setHighlightedLine,
+    showGrid,
+    hideGrid,
 })
 </script>
 
@@ -819,12 +1060,8 @@ defineExpose({
                 @click.stop
             >
                 <template v-if="contextMenu.type === 'canvas'">
-                    <div class="context-menu-header">
+                    <div class="context-menu-header">CANVAS</div>
-                        {{ currentDepth > 1 ? 'PROJECT' : 'CANVAS' }}
+                    <div class="context-hint">Hover a station to branch</div>
-                    </div>
-                    <button class="context-item" @click="handleContextCreate">
-                        + {{ currentDepth > 1 ? 'New item here' : 'New node here' }}
-                    </button>
                 </template>
                 <template v-else-if="contextMenu.type === 'node'">
                     <div class="context-menu-header">{{ contextMenu.node?.name ?? 'NODE' }}</div>
@@ -1013,6 +1250,14 @@ defineExpose({
     color: #ff8fab;
 }
 
+.context-hint {
+    padding: 8px 14px;
+    color: #8892b0;
+    font-family: 'VT323', monospace;
+    font-size: 13px;
+    opacity: 0.7;
+}
+
 /* -----------------------------------------------------------------------
    Transitions
    ----------------------------------------------------------------------- */

resources/js/Components/MetroMap/gridConstants.js

@@ -0,0 +1,14 @@
+/**
+ * Shared grid constants for the metro map canvas.
+ * Used by both rendering (MetroCanvas.vue) and server-side positioning (MapDataService.php).
+ * Server must use the same values — keep in sync with MapDataService::GRID.
+ */
+
+export const GRID = 50            // base snap unit (px)
+export const GRID_STEP_X = 200    // horizontal spacing between nodes on a line
+export const GRID_STEP_Y = 150    // vertical spacing between metro lines
+
+/**
+ * Snap a value to the nearest grid point.
+ */
+export const snapToGrid = (val) => Math.round(val / GRID) * GRID

resources/js/Pages/Map/MetroMap.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { usePage, router } from '@inertiajs/vue3'
+import { usePage, router, useForm } from '@inertiajs/vue3'
 import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
 import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
 import NodePreview from '@/Components/MetroMap/NodePreview.vue'
@@ -28,17 +28,15 @@ const showPreview = ref(false)
 const canvasDepth = ref(1)
 const canvasDimension = ref(null)
 
-// Reactive breadcrumb based on both page-level and canvas-level navigation
+// Reactive breadcrumb
 const breadcrumbPath = computed(() => {
     const pageLevel = props.mapData.level ?? 1
     const project = props.mapData.project ?? null
     const path = [{ label: 'Strategie', level: 1, data: null }]
 
     if (pageLevel === 2 && project) {
-        // Page-level project view
         path.push({ label: project.naam ?? project.name ?? 'Project', level: 2, data: project })
     } else if (canvasDepth.value > 1 && canvasDimension.value) {
-        // Canvas zoom-in dimension
         path.push({
             label: canvasDimension.value.parentName ?? 'Detail',
             level: 2,
@@ -48,32 +46,26 @@ const breadcrumbPath = computed(() => {
     return path
 })
 
-// Dimension-aware project ID: from page props OR from canvas zoom
+// Dimension-aware project ID
 const currentProjectId = computed(() => {
-    // Page-level project
     if (props.mapData.project?.id) return props.mapData.project.id
-    // Canvas zoom-level project
     if (canvasDimension.value?.parentEntityType === 'project') {
         return canvasDimension.value.parentEntityId
     }
     return null
 })
 
-// Entity type in current dimension (for FAB awareness)
 const currentParentEntityType = computed(() => {
     if (props.mapData.level === 2) return 'project'
     return canvasDimension.value?.parentEntityType ?? null
 })
 
-// Handlers
+// --- Node click / hover ---
 const handleNodeClick = (node) => {
     selectedNode.value = node
     showPreview.value = true
 }
 
-const handleNodeHover = (node) => {}
-const handleNodeLeave = () => {}
-
 const handleZoomIn = (node) => {
     showPreview.value = false
     if (node.entityType === 'project') {
@@ -92,12 +84,110 @@ const handleBreadcrumbNavigate = (item, index) => {
 const handleDimensionChange = (event) => {
     canvasDepth.value = event.depth
     canvasDimension.value = event.dimension ?? null
-
-    // Close preview when dimension changes
     showPreview.value = false
     selectedNode.value = null
 }
 
+// --- Branch handle node creation ---
+const handleCreateNode = (event) => {
+    if (event.branchAngle === 0) {
+        // Extend existing line — determine entity type from lineId
+        handleExtendLine(event)
+    } else {
+        // Fork — create a new track + first node
+        handleForkBranch(event)
+    }
+}
+
+const handleExtendLine = (event) => {
+    const lineId = event.lineId ?? ''
+
+    // In dim 2 (project level): determine what type of entity to create
+    if (event.depth > 1 && event.parentEntityType === 'project') {
+        if (lineId.startsWith('lifecycle-') || lineId === 'lifecycle') {
+            // Can't manually add lifecycle phases — they advance via transition
+            return
+        }
+        if (lineId.startsWith('commitments-') || lineId === 'commitments') {
+            pendingCreatePosition.value = { x: event.x, y: event.y }
+            showCommitmentForm.value = true
+            return
+        }
+        if (lineId.startsWith('documents-') || lineId === 'documents') {
+            // Future: document upload
+            console.log('Document creation at', event.x, event.y)
+            return
+        }
+        // Custom line — create a metro node
+        createMetroNode(event)
+        return
+    }
+
+    // In dim 1 (strategy level): extend = add project to theme
+    editingProject.value = null
+    showProjectForm.value = true
+}
+
+const handleForkBranch = (event) => {
+    // Fork creates a new track (metro line), then the first node on it
+    if (event.parentEntityType === 'project' && event.parentEntityId) {
+        pendingForkEvent.value = event
+        showTrackForm.value = true
+    }
+}
+
+const pendingCreatePosition = ref(null)
+const pendingForkEvent = ref(null)
+
+// --- Track creation form (for fork branches) ---
+const showTrackForm = ref(false)
+const trackForm = useForm({
+    project_id: null,
+    naam: '',
+})
+
+const submitTrackForm = () => {
+    trackForm.project_id = currentProjectId.value
+    trackForm.post('/metro-lines', {
+        onSuccess: () => {
+            showTrackForm.value = false
+            trackForm.reset()
+            pendingForkEvent.value = null
+        },
+    })
+}
+
+// --- Metro node creation (for custom line extend) ---
+const createMetroNode = (event) => {
+    // Determine metro_line_id from the lineId
+    // lineId format for custom lines will need to be mapped
+    // For now, emit a placeholder
+    console.log('Create metro node on custom line:', event)
+}
+
+// --- FAB handlers ---
+const handleCreateTheme = () => {
+    // Future: thema creation form
+    editingProject.value = null
+    showProjectForm.value = true
+}
+
+const handleCreateTrack = () => {
+    showTrackForm.value = true
+}
+
+const handleFabItemHover = (item) => {
+    // Highlight the relevant line on canvas
+    // (only meaningful in dim 2 where lines are visible)
+    if (item.lineId) {
+        canvasRef.value?.setHighlightedLine(item.lineId)
+    }
+}
+
+const handleFabItemLeave = () => {
+    canvasRef.value?.setHighlightedLine(null)
+}
+
 const handleCliCommand = (command) => {
     console.log('CLI command:', command)
 }
@@ -113,25 +203,11 @@ const hasNodes = computed(() => props.mapData.nodes && props.mapData.nodes.lengt
 const showProjectForm = ref(false)
 const showCommitmentForm = ref(false)
 const editingProject = ref(null)
-
-const handleCreateProject = () => {
-    editingProject.value = null
-    showProjectForm.value = true
-}
-
-const handleCreateCommitment = () => {
-    showCommitmentForm.value = true
-}
-
-const handleCreateDocument = () => {
-    // Future: document upload modal
-    console.log('Create document in project:', currentProjectId.value)
-}
 </script>
 
 <template>
     <div class="metro-map-page">
-        <!-- Top bar: breadcrumb left, user/logout right -->
+        <!-- Top bar -->
         <div class="top-bar">
             <Breadcrumb
                 :path="breadcrumbPath"
@@ -151,9 +227,10 @@ const handleCreateDocument = () => {
                 :connections="props.mapData.connections"
                 :current-level="props.mapData.level ?? 1"
                 @node-click="handleNodeClick"
-                @node-hover="handleNodeHover"
+                @node-hover="() => {}"
-                @node-leave="handleNodeLeave"
+                @node-leave="() => {}"
                 @dimension-change="handleDimensionChange"
+                @create-node="handleCreateNode"
             />
 
             <NodePreview
@@ -172,10 +249,10 @@ const handleCreateDocument = () => {
             :depth="canvasDepth"
             :parent-entity-type="currentParentEntityType"
             :parent-project-id="currentProjectId"
-            @create-project="handleCreateProject"
+            @create-theme="handleCreateTheme"
-            @create-theme="handleCreateProject"
+            @create-track="handleCreateTrack"
-            @create-commitment="handleCreateCommitment"
+            @item-hover="handleFabItemHover"
-            @create-document="handleCreateDocument"
+            @item-leave="handleFabItemLeave"
         />
 
         <ProjectForm
@@ -190,9 +267,39 @@ const handleCreateDocument = () => {
             :show="showCommitmentForm"
             :project-id="currentProjectId"
             :users="users"
-            @close="showCommitmentForm = false"
+            @close="showCommitmentForm = false; pendingCreatePosition = null"
         />
 
+        <!-- Track creation modal (for fork branches and FAB) -->
+        <Teleport to="body">
+            <Transition name="modal-fade">
+                <div v-if="showTrackForm" class="modal-backdrop" @click="showTrackForm = false">
+                    <div class="modal-content" @click.stop>
+                        <div class="modal-header">NIEUWE LIJN</div>
+                        <form @submit.prevent="submitTrackForm">
+                            <div class="form-group">
+                                <label class="form-label">Naam</label>
+                                <input
+                                    v-model="trackForm.naam"
+                                    type="text"
+                                    class="form-input"
+                                    placeholder="bijv. Risico's, Acties..."
+                                    required
+                                    autofocus
+                                />
+                            </div>
+                            <div class="form-actions">
+                                <button type="button" class="btn-cancel" @click="showTrackForm = false">Annuleren</button>
+                                <button type="submit" class="btn-submit" :disabled="trackForm.processing">
+                                    {{ trackForm.processing ? 'Bezig...' : 'Aanmaken' }}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
+
         <CliBar @command="handleCliCommand" />
     </div>
 </template>
@@ -266,4 +373,124 @@ const handleCreateDocument = () => {
     text-align: center;
     opacity: 0.7;
 }
+
+/* Track creation modal */
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 300;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: #0d1b2a;
+    border: 1px solid #00d2ff;
+    border-radius: 6px;
+    padding: 24px;
+    min-width: 340px;
+    box-shadow: 0 0 30px rgba(0, 210, 255, 0.2);
+}
+
+.modal-header {
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
+    color: #00d2ff;
+    margin-bottom: 20px;
+    letter-spacing: 0.1em;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-label {
+    display: block;
+    font-family: 'VT323', monospace;
+    font-size: 14px;
+    color: #8892b0;
+    margin-bottom: 6px;
+    letter-spacing: 0.05em;
+}
+
+.form-input {
+    width: 100%;
+    padding: 8px 12px;
+    background: #16213e;
+    border: 1px solid rgba(0, 210, 255, 0.3);
+    border-radius: 3px;
+    color: #e8e8e8;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.form-input:focus {
+    border-color: #00d2ff;
+    box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.btn-cancel {
+    font-family: 'VT323', monospace;
+    font-size: 15px;
+    color: #8892b0;
+    background: none;
+    border: 1px solid rgba(136, 146, 176, 0.3);
+    padding: 6px 16px;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-cancel:hover {
+    color: #e8e8e8;
+    border-color: #8892b0;
+}
+
+.btn-submit {
+    font-family: 'VT323', monospace;
+    font-size: 15px;
+    color: #00d2ff;
+    background: rgba(0, 210, 255, 0.1);
+    border: 1px solid #00d2ff;
+    padding: 6px 16px;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-submit:hover {
+    background: rgba(0, 210, 255, 0.2);
+    box-shadow: 0 0 12px rgba(0, 210, 255, 0.3);
+}
+
+.btn-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Modal transitions */
+.modal-fade-enter-active {
+    transition: opacity 0.15s ease;
+}
+
+.modal-fade-leave-active {
+    transition: opacity 0.1s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+    opacity: 0;
+}
 </style>

routes/web.php

@@ -3,6 +3,8 @@
 use App\Http\Controllers\CommitmentController;
 use App\Http\Controllers\DocumentController;
 use App\Http\Controllers\MapController;
+use App\Http\Controllers\MetroLineController;
+use App\Http\Controllers\MetroNodeController;
 use App\Http\Controllers\ProjectController;
 use App\Http\Controllers\ThemaController;
 use Illuminate\Support\Facades\Route;
@@ -48,6 +50,15 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::get('/documents/{document}/download', [DocumentController::class, 'download'])->name('documents.download');
     Route::delete('/documents/{document}', [DocumentController::class, 'destroy'])->name('documents.destroy');
 
+    // Metro Lines
+    Route::post('/metro-lines', [MetroLineController::class, 'store'])->name('metro-lines.store');
+    Route::delete('/metro-lines/{metroLine}', [MetroLineController::class, 'destroy'])->name('metro-lines.destroy');
+
+    // Metro Nodes
+    Route::post('/metro-nodes', [MetroNodeController::class, 'store'])->name('metro-nodes.store');
+    Route::put('/metro-nodes/{metroNode}', [MetroNodeController::class, 'update'])->name('metro-nodes.update');
+    Route::delete('/metro-nodes/{metroNode}', [MetroNodeController::class, 'destroy'])->name('metro-nodes.destroy');
+
     // Dashboard (redirects to map)
     Route::get('/dashboard', fn () => redirect('/map'))->name('dashboard');
 });