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

299
resources/js/Pages/Map/MetroMap.vue
View File

@@ -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-leave="handleNodeLeave"
@node-hover="() => {}"
@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="handleCreateProject"
@create-commitment="handleCreateCommitment"
@create-document="handleCreateDocument"
@create-theme="handleCreateTheme"
@create-track="handleCreateTrack"
@item-hover="handleFabItemHover"
@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>