vps1_gitea_admin/innovatieplatform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
znetsixe
2026-04-08 09:40:56 +02:00
parent 6711cd01a3
commit d41ca76e0d
13 changed files with 857 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/Http/Controllers/MetroLineController.php Normal file
View File

@@ -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];
}
}

51
app/Http/Controllers/MetroNodeController.php Normal file
View File

@@ -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.');
}
}

38
app/Models/MetroLine.php Normal file
View File

@@ -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']);
}
}

35
app/Models/MetroNode.php Normal file
View File

@@ -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');
}
}

5
app/Models/Project.php
View File

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

53
app/Services/MapDataService.php
View File

@@ -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),
'y' => $yOffset,
'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
'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),
'y' => -50,
'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
'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),
'y' => 80,
'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
'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),
'y' => 210,
'x' => $this->snapToGrid($xStart + ($order * self::GRID_STEP_X)),
'y' => $this->snapToGrid(250),
'order' => $order + 1,
'status' => 'active',
'badge' => "v{$doc->versie}",
@@ -181,8 +194,7 @@ class MapDataService
];
$nodes = [];
$xOffset = -250;
$spacing = 200;
$xStart = $this->snapToGrid(-250);
// 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),
'y' => -60,
'x' => $this->snapToGrid($xStart + ($i * self::GRID_STEP_X)),
'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),
'y' => 80,
'x' => $this->snapToGrid($xStart + ($i * self::GRID_STEP_X)),
'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),
'y' => 220,
'x' => $this->snapToGrid($xStart + ($i * self::GRID_STEP_X)),
'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,
};
}