d41ca76e0d
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>
15 lines
561 B
JavaScript
15 lines
561 B
JavaScript
/**
|
|
* 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
|