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>
This commit is contained in:
znetsixe
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user