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

Recursive zoom dimensions with smooth transitions

Browse Source 
MetroCanvas rewrite:
- Dimension stack: every node can contain children forming a sub-metro-map
- Zoom-triggered transitions: scroll-zoom near a node gradually cross-fades
  parent dimension out and child dimension in (threshold 2.5x, range 1.5x)
- Zoom out past 0.5x transitions back to parent dimension
- Right-click context menu: "New node here" on canvas, "Edit/Add child/Delete" on stations
- Depth indicator HUD with back button
- Transition progress bar during cross-fade
- Nodes with children get dashed ring + glow indicator

Backend:
- MapDataService now includes children data inline per project node
- Each project's children contain lifecycle phases, commitments, documents as sub-map
- New API endpoint: GET /api/map/node/{type}/{id}/children for lazy loading
- Consistent data structure: every node has children field (null = leaf)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-04-01 16:21:14 +02:00
parent f0aca26642
commit 302c790c13
4 changed files with 813 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/Http/Controllers/MapController.php
View File

@@ -43,4 +43,9 @@ class MapController extends Controller
{
return response()->json($this->mapDataService->getProjectMap($projectId));
}
public function apiNodeChildren(string $type, int $id)
{
return response()->json($this->mapDataService->getNodeChildren($type, $id));
}
}

97
app/Services/MapDataService.php
View File

@@ -17,7 +17,7 @@ class MapDataService
{
$themas = Thema::with([
'speerpunten.projects' => function ($q) {
$q->with('eigenaar')
$q->with(['eigenaar', 'fases', 'commitments.eigenaar', 'documents.auteur', 'risicos'])
->withCount(['documents', 'commitments', 'risicos', 'fases']);
}
])->get();
@@ -54,7 +54,7 @@ class MapDataService
'description' => Str::limit($project->beschrijving, 100),
'owner' => $project->eigenaar?->name,
'badge' => ucfirst(str_replace('_', ' ', $project->status->value)),
'children' => $project->documents_count + $project->commitments_count,
'children' => $this->buildProjectChildren($project),
];
}
@@ -114,6 +114,7 @@ class MapDataService
'order' => $order + 1,
'status' => $fase->status->value,
'badge' => ucfirst($fase->status->value),
'children' => null,
];
}
@@ -131,6 +132,7 @@ class MapDataService
'status' => $commitment->status->value,
'owner' => $commitment->eigenaar?->name,
'badge' => $commitment->deadline?->format('d M'),
'children' => null,
];
}
@@ -147,6 +149,7 @@ class MapDataService
'order' => $order + 1,
'status' => 'active',
'badge' => "v{$doc->versie}",
'children' => null,
];
}
@@ -162,4 +165,94 @@ class MapDataService
],
];
}
/**
* Build the Level 2 children data for a project node.
* Used inline in getStrategyMap() and via getNodeChildren().
*/
private function buildProjectChildren(Project $project): array
{
$project->loadMissing(['fases', 'commitments.eigenaar', 'documents.auteur', 'risicos']);
$lines = [
['id' => "lifecycle-{$project->id}", 'name' => 'Levenscyclus', 'color' => '#00d2ff'],
['id' => "commitments-{$project->id}", 'name' => 'Commitments', 'color' => '#e94560'],
['id' => "documents-{$project->id}", 'name' => 'Documenten', 'color' => '#7b68ee'],
];
$nodes = [];
$xOffset = -250;
$spacing = 200;
// Phase nodes
foreach ($project->fases->sortBy('created_at') as $i => $fase) {
$nodes[] = [
'id' => "fase-{$fase->id}",
'entityId' => $fase->id,
'entityType' => 'fase',
'name' => ucfirst(str_replace('_', ' ', $fase->type->value)),
'lineId' => "lifecycle-{$project->id}",
'x' => $xOffset + ($i * $spacing),
'y' => -60,
'order' => $i + 1,
'status' => $fase->status->value,
'badge' => ucfirst($fase->status->value),
'children' => null, // Phases could have children in future
];
}
// Commitment nodes
foreach ($project->commitments as $i => $commitment) {
$nodes[] = [
'id' => "commitment-{$commitment->id}",
'entityId' => $commitment->id,
'entityType' => 'commitment',
'name' => Str::limit($commitment->beschrijving, 35),
'lineId' => "commitments-{$project->id}",
'x' => $xOffset + ($i * $spacing),
'y' => 80,
'order' => $i + 1,
'status' => $commitment->status->value,
'owner' => $commitment->eigenaar?->name,
'badge' => $commitment->deadline?->format('d M Y'),
'children' => null, // Could contain acties in future
];
}
// Document nodes
foreach ($project->documents as $i => $doc) {
$nodes[] = [
'id' => "document-{$doc->id}",
'entityId' => $doc->id,
'entityType' => 'document',
'name' => $doc->titel,
'lineId' => "documents-{$project->id}",
'x' => $xOffset + ($i * $spacing),
'y' => 220,
'order' => $i + 1,
'status' => 'active',
'badge' => "v{$doc->versie}",
'children' => null,
];
}
return [
'lines' => $lines,
'nodes' => $nodes,
'connections' => [],
];
}
/**
* 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,
};
}
}

806
resources/js/Components/MetroMap/MetroCanvas.vue
View File

@@ -1,32 +1,131 @@
<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
import * as d3 from 'd3'
// ---------------------------------------------------------------------------
// Props & Emits
// ---------------------------------------------------------------------------
const props = defineProps({
dimensions: { type: Object, default: () => ({}) }, // root dimension data
currentPath: { type: Array, default: () => [] }, // breadcrumb path of dimension IDs
// Legacy flat-prop support (for backward compat with MetroMap.vue)
nodes: { type: Array, default: () => [] },
lines: { type: Array, default: () => [] },
connections: { type: Array, default: () => [] },
currentLevel: { type: Number, default: 1 },
})
const emit = defineEmits(['node-click', 'node-hover', 'node-leave', 'zoom-change'])
const emit = defineEmits([
'node-click',
'node-hover',
'node-leave',
'dimension-change',
'create-node',
'edit-node',
'delete-node',
'zoom-change',
])
// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------
const ZOOM_IN_THRESHOLD = 2.5
const ZOOM_OUT_THRESHOLD = 0.5
const TRANSITION_RANGE = 1.5
const LINE_COLORS = [
'#00d2ff', '#e94560', '#00ff88', '#7b68ee',
'#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff',
'#ff8fab', '#a8dadc', '#e07a5f', '#81b29a',
]
// ---------------------------------------------------------------------------
// Refs
// ---------------------------------------------------------------------------
const svgRef = ref(null)
const containerRef = ref(null)
const transform = ref(d3.zoomIdentity)
const hoveredNode = ref(null)
// Metro line colors
const lineColors = [
'#00d2ff', '#e94560', '#00ff88', '#7b68ee',
'#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff',
'#ff8fab', '#a8dadc', '#e07a5f', '#81b29a',
]
// Dimension stack: each entry is a full metro-map dimension object
const dimensionStack = ref([])
const currentDimensionIndex = ref(0)
const getLineColor = (index) => lineColors[index % lineColors.length]
// Transition state
const transitionState = ref({
active: false,
direction: null, // 'in' | 'out'
progress: 0,
targetNode: null,
childDimension: null,
})
// Context menu
const contextMenu = ref({
show: false,
x: 0, y: 0,
type: null, // 'canvas' | 'node'
node: null,
canvasX: 0, canvasY: 0,
})
// D3 references (module-level, not reactive)
let svg, g, zoom
// ---------------------------------------------------------------------------
// Derived helpers
// ---------------------------------------------------------------------------
const getLineColor = (index) => LINE_COLORS[index % LINE_COLORS.length]
/** The dimension data that is currently "active" (top of stack) */
const currentDimensionData = computed(() => {
return dimensionStack.value[currentDimensionIndex.value] ?? null
})
/** Flat list of nodes in the current dimension */
const currentNodes = computed(() => {
return currentDimensionData.value?.nodes ?? []
})
/** Current depth (1-based) */
const currentDepth = computed(() => currentDimensionIndex.value + 1)
// ---------------------------------------------------------------------------
// Bootstrap dimension stack from props
// ---------------------------------------------------------------------------
const buildRootDimension = () => {
// If a structured `dimensions` prop is provided, use it as root.
// Otherwise fall back to the legacy flat props (nodes/lines/connections).
if (props.dimensions && (props.dimensions.nodes || props.dimensions.lines)) {
return {
id: 'root',
parentNodeId: null,
lines: props.dimensions.lines ?? [],
nodes: props.dimensions.nodes ?? [],
connections: props.dimensions.connections ?? [],
opacity: 1,
}
}
return {
id: 'root',
parentNodeId: null,
lines: props.lines ?? [],
nodes: props.nodes ?? [],
connections: props.connections ?? [],
opacity: 1,
}
}
// ---------------------------------------------------------------------------
// Canvas init
// ---------------------------------------------------------------------------
const initCanvas = () => {
if (!svgRef.value) return
@@ -37,18 +136,15 @@ const initCanvas = () => {
.attr('width', width)
.attr('height', height)
// Clear previous content
svg.selectAll('*').remove()
// Add defs for glow filter
// --- Defs ---
const defs = svg.append('defs')
const glowFilter = defs.append('filter')
.attr('id', 'glow')
.attr('x', '-50%')
.attr('y', '-50%')
.attr('width', '200%')
.attr('height', '200%')
.attr('x', '-50%').attr('y', '-50%')
.attr('width', '200%').attr('height', '200%')
glowFilter.append('feGaussianBlur')
.attr('stdDeviation', '4')
@@ -58,110 +154,288 @@ const initCanvas = () => {
feMerge.append('feMergeNode').attr('in', 'coloredBlur')
feMerge.append('feMergeNode').attr('in', 'SourceGraphic')
// Scanline pattern
const scanlinePattern = defs.append('pattern')
.attr('id', 'scanlines')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
// Subtle glow for child indicator
const childGlowFilter = defs.append('filter')
.attr('id', 'childGlow')
.attr('x', '-100%').attr('y', '-100%')
.attr('width', '300%').attr('height', '300%')
scanlinePattern.append('line')
.attr('x1', 0).attr('y1', 0)
.attr('x2', 4).attr('y2', 0)
.attr('stroke', 'rgba(0,0,0,0.08)')
.attr('stroke-width', 1)
childGlowFilter.append('feGaussianBlur')
.attr('stdDeviation', '2')
.attr('result', 'coloredBlur')
// Main group for zoom/pan
const feMerge2 = childGlowFilter.append('feMerge')
feMerge2.append('feMergeNode').attr('in', 'coloredBlur')
feMerge2.append('feMergeNode').attr('in', 'SourceGraphic')
// Main panning/zooming group
g = svg.append('g')
// Setup zoom
// --- Zoom ---
zoom = d3.zoom()
.scaleExtent([0.3, 5])
.on('zoom', (event) => {
g.attr('transform', event.transform)
transform.value = event.transform
emit('zoom-change', {
scale: event.transform.k,
x: event.transform.x,
y: event.transform.y,
})
})
.scaleExtent([0.1, 8])
.on('zoom', handleZoom)
svg.call(zoom)
// Center the view
const initialTransform = d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(1)
// Right-click context menu
svg.on('contextmenu', (event) => {
event.preventDefault()
const [x, y] = d3.pointer(event, g.node())
const clickedNode = findNodeAt(x, y)
contextMenu.value = {
show: true,
x: event.clientX,
y: event.clientY,
type: clickedNode ? 'node' : 'canvas',
node: clickedNode,
canvasX: x,
canvasY: y,
}
})
svg.call(zoom.transform, initialTransform)
// 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
renderMap()
}
const renderMap = () => {
if (!g) return
// ---------------------------------------------------------------------------
// Zoom handler
// ---------------------------------------------------------------------------
g.selectAll('*').remove()
const handleZoom = (event) => {
const t = event.transform
g.attr('transform', t)
transform.value = t
// Draw metro lines
props.lines.forEach((line, lineIndex) => {
emit('zoom-change', { scale: t.k, x: t.x, y: t.y })
// Find nearest node to the viewport centre (in canvas space)
const w = containerRef.value?.clientWidth ?? 800
const h = containerRef.value?.clientHeight ?? 600
const cx = (w / 2 - t.x) / t.k
const cy = (h / 2 - t.y) / t.k
const nearest = findNearestNode(cx, cy)
// --- Zoom-in transition ---
if (t.k > ZOOM_IN_THRESHOLD &&
nearest &&
nearest.node.children &&
nearest.distance < 200)
{
const progress = Math.min(1, (t.k - ZOOM_IN_THRESHOLD) / TRANSITION_RANGE)
transitionState.value = {
active: true,
direction: 'in',
progress,
targetNode: nearest.node,
childDimension: nearest.node.children,
}
renderWithTransition()
if (progress >= 1) {
commitDimensionChange('in', nearest.node)
}
return
}
// --- Zoom-out transition ---
if (t.k < ZOOM_OUT_THRESHOLD && dimensionStack.value.length > 1) {
const progress = Math.min(
1,
(ZOOM_OUT_THRESHOLD - t.k) / (ZOOM_OUT_THRESHOLD - 0.1)
)
transitionState.value = {
active: true,
direction: 'out',
progress,
targetNode: null,
childDimension: null,
}
renderWithTransition()
if (progress >= 1) {
commitDimensionChange('out', null)
}
return
}
// --- Normal range: cancel any ongoing transition ---
if (transitionState.value.active) {
transitionState.value.active = false
}
renderMap()
}
// ---------------------------------------------------------------------------
// Dimension commit
// ---------------------------------------------------------------------------
const commitDimensionChange = (direction, node) => {
if (direction === 'in' && node) {
const child = {
id: node.id,
parentNodeId: node.id,
lines: node.children.lines ?? [],
nodes: node.children.nodes ?? [],
connections: node.children.connections ?? [],
opacity: 1,
}
dimensionStack.value.push(child)
currentDimensionIndex.value++
resetZoomToCenter()
transitionState.value.active = false
renderMap()
emit('dimension-change', {
direction: 'in',
node,
depth: dimensionStack.value.length,
})
} else if (direction === 'out') {
dimensionStack.value.pop()
currentDimensionIndex.value = Math.max(0, currentDimensionIndex.value - 1)
resetZoomToCenter()
transitionState.value.active = false
renderMap()
emit('dimension-change', {
direction: 'out',
depth: dimensionStack.value.length,
})
}
}
const resetZoomToCenter = () => {
if (!svg || !zoom) return
const w = containerRef.value?.clientWidth ?? 800
const h = containerRef.value?.clientHeight ?? 600
svg.call(
zoom.transform,
d3.zoomIdentity.translate(w / 2, h / 2).scale(1)
)
}
// ---------------------------------------------------------------------------
// Node finders
// ---------------------------------------------------------------------------
const findNearestNode = (x, y) => {
const nodes = currentNodes.value
if (!nodes.length) return null
let nearest = null
let minDist = Infinity
for (const node of nodes) {
const dist = Math.sqrt((node.x - x) ** 2 + (node.y - y) ** 2)
if (dist < minDist) {
minDist = dist
nearest = { node, distance: dist }
}
}
return nearest
}
const findNodeAt = (x, y, dimData = null) => {
const nodes = dimData?.nodes ?? currentNodes.value
return nodes.find(n => Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2) < 15) ?? null
}
// ---------------------------------------------------------------------------
// Rendering
// ---------------------------------------------------------------------------
/** Render a complete metro-map dimension into a D3 group element */
const renderDimension = (dimData, opacity, parentGroup) => {
if (!dimData) return
const group = parentGroup.append('g')
.attr('opacity', opacity)
.attr('class', 'dimension-group')
.style('transition', 'opacity 0.05s linear')
const nodes = dimData.nodes ?? []
const lines = dimData.lines ?? []
const connections = dimData.connections ?? []
// --- Metro lines ---
lines.forEach((line, lineIndex) => {
const color = line.color || getLineColor(lineIndex)
const lineNodes = props.nodes.filter(n => n.lineId === line.id)
const lineNodes = nodes
.filter(n => n.lineId === line.id)
.sort((a, b) => a.order - b.order)
if (lineNodes.length < 2) return
// Sort nodes by order
lineNodes.sort((a, b) => a.order - b.order)
// Draw the line path
const lineGenerator = d3.line()
const lineGen = d3.line()
.x(d => d.x)
.y(d => d.y)
.curve(d3.curveMonotoneX)
g.append('path')
// Outer glow track
group.append('path')
.datum(lineNodes)
.attr('d', lineGenerator)
.attr('d', lineGen)
.attr('fill', 'none')
.attr('stroke', color)
.attr('stroke-width', 8)
.attr('stroke-linecap', 'round')
.attr('opacity', 0.15)
// Main track
group.append('path')
.datum(lineNodes)
.attr('d', lineGen)
.attr('fill', 'none')
.attr('stroke', color)
.attr('stroke-width', 4)
.attr('stroke-linecap', 'round')
.attr('opacity', 0.7)
.attr('opacity', 0.75)
// Line label — positioned well above the first station
// Line label
if (lineNodes.length > 0) {
g.append('text')
group.append('text')
.attr('x', lineNodes[0].x - 10)
.attr('y', lineNodes[0].y - 35)
.attr('fill', color)
.attr('font-family', "'VT323', monospace")
.attr('font-size', '16px')
.attr('opacity', 0.8)
.attr('opacity', 0.85)
.text(line.name)
}
})
// Draw dependency connections
props.connections.forEach(conn => {
const source = props.nodes.find(n => n.id === conn.from)
const target = props.nodes.find(n => n.id === conn.to)
// --- Dependency connections ---
connections.forEach(conn => {
const source = nodes.find(n => n.id === conn.from)
const target = nodes.find(n => n.id === conn.to)
if (!source || !target) return
g.append('line')
.attr('x1', source.x)
.attr('y1', source.y)
.attr('x2', target.x)
.attr('y2', target.y)
group.append('line')
.attr('x1', source.x).attr('y1', source.y)
.attr('x2', target.x).attr('y2', target.y)
.attr('stroke', '#8892b0')
.attr('stroke-width', 1.5)
.attr('stroke-dasharray', '6,4')
.attr('opacity', 0.4)
})
// Draw station nodes
const nodeGroups = g.selectAll('.station')
.data(props.nodes)
// --- Station nodes ---
const nodeGroups = group.selectAll('.station')
.data(nodes)
.enter()
.append('g')
.attr('class', 'station')
@@ -174,8 +448,7 @@ const renderMap = () => {
.on('mouseenter', (event, d) => {
hoveredNode.value = d
d3.select(event.currentTarget).select('.station-dot')
.transition()
.duration(200)
.transition().duration(200)
.attr('r', 12)
.attr('filter', 'url(#glow)')
emit('node-hover', d)
@@ -183,24 +456,23 @@ const renderMap = () => {
.on('mouseleave', (event, d) => {
hoveredNode.value = null
d3.select(event.currentTarget).select('.station-dot')
.transition()
.duration(200)
.transition().duration(200)
.attr('r', 8)
.attr('filter', null)
emit('node-leave', d)
})
// Station outer ring
// Outer ring
nodeGroups.append('circle')
.attr('r', 11)
.attr('fill', 'none')
.attr('stroke', d => {
const line = props.lines.find(l => l.id === d.lineId)
return line?.color || getLineColor(props.lines.indexOf(line))
const line = lines.find(l => l.id === d.lineId)
return line?.color || getLineColor(lines.indexOf(line))
})
.attr('stroke-width', 2)
// Station inner dot
// Inner dot
nodeGroups.append('circle')
.attr('class', 'station-dot')
.attr('r', 8)
@@ -212,12 +484,34 @@ const renderMap = () => {
return '#16213e'
})
.attr('stroke', d => {
const line = props.lines.find(l => l.id === d.lineId)
return line?.color || getLineColor(props.lines.indexOf(line))
const line = lines.find(l => l.id === d.lineId)
return line?.color || getLineColor(lines.indexOf(line))
})
.attr('stroke-width', 2)
// Station labels — positioned below the station dot to avoid line overlap
// Child-dimension indicator (pulsing ring for nodes that have children)
nodeGroups.filter(d => d.children && (d.children.nodes?.length ?? 0) > 0)
.append('circle')
.attr('r', 16)
.attr('fill', 'none')
.attr('stroke', '#00d2ff')
.attr('stroke-width', 1)
.attr('stroke-dasharray', '3,3')
.attr('opacity', 0.5)
.attr('filter', 'url(#childGlow)')
// "[+]" label for nodes with children
nodeGroups.filter(d => d.children && (d.children.nodes?.length ?? 0) > 0)
.append('text')
.attr('x', 13)
.attr('y', -13)
.attr('fill', '#00d2ff')
.attr('font-family', "'VT323', monospace")
.attr('font-size', '11px')
.attr('opacity', 0.8)
.text('[+]')
// Station label
nodeGroups.append('text')
.attr('x', 0)
.attr('y', 28)
@@ -227,7 +521,7 @@ const renderMap = () => {
.attr('font-size', '14px')
.text(d => d.name)
// Status badge — below the label
// Status badge
nodeGroups.filter(d => d.badge)
.append('text')
.attr('x', 0)
@@ -239,60 +533,238 @@ const renderMap = () => {
.text(d => d.badge)
}
const handleResize = () => {
if (svgRef.value && containerRef.value) {
svg.attr('width', containerRef.value.clientWidth)
.attr('height', containerRef.value.clientHeight)
/** Normal (no transition) render */
const renderMap = () => {
if (!g) return
g.selectAll('*').remove()
const dim = currentDimensionData.value
if (dim) renderDimension(dim, 1, g)
}
/** Cross-fade render during a zoom transition */
const renderWithTransition = () => {
if (!g) return
g.selectAll('*').remove()
const { progress, direction, childDimension } = transitionState.value
const eased = d3.easeCubicInOut(progress)
if (direction === 'in') {
// Parent fades out
renderDimension(currentDimensionData.value, 1 - eased, g)
// Child fades in
if (childDimension) {
renderDimension(
{
lines: childDimension.lines ?? [],
nodes: childDimension.nodes ?? [],
connections: childDimension.connections ?? [],
},
eased,
g
)
}
} else if (direction === 'out' && dimensionStack.value.length > 1) {
// Current child fades out
renderDimension(currentDimensionData.value, 1 - eased, g)
// Parent fades in
const parentDim = dimensionStack.value[currentDimensionIndex.value - 1]
if (parentDim) {
renderDimension(parentDim, eased, g)
}
}
}
watch(() => [props.nodes, props.lines, props.connections], () => {
// ---------------------------------------------------------------------------
// Context menu handlers
// ---------------------------------------------------------------------------
const closeContextMenu = () => {
contextMenu.value.show = false
}
const handleContextCreate = () => {
emit('create-node', {
x: contextMenu.value.canvasX,
y: contextMenu.value.canvasY,
parentNodeId: currentDimensionData.value?.parentNodeId ?? null,
dimensionId: currentDimensionData.value?.id ?? 'root',
})
closeContextMenu()
}
const handleContextEdit = () => {
if (contextMenu.value.node) emit('edit-node', contextMenu.value.node)
closeContextMenu()
}
const handleContextAddChild = () => {
if (contextMenu.value.node) {
emit('create-node', {
x: contextMenu.value.canvasX,
y: contextMenu.value.canvasY,
parentNodeId: contextMenu.value.node.id,
dimensionId: contextMenu.value.node.id,
addToNode: contextMenu.value.node,
})
}
closeContextMenu()
}
const handleContextDelete = () => {
if (contextMenu.value.node) emit('delete-node', contextMenu.value.node)
closeContextMenu()
}
/** FAB / [+] button creates a node in the current dimension */
const handleFabCreate = () => {
emit('create-node', {
x: 0, y: 0,
parentNodeId: currentDimensionData.value?.parentNodeId ?? null,
dimensionId: currentDimensionData.value?.id ?? 'root',
})
}
// ---------------------------------------------------------------------------
// Resize
// ---------------------------------------------------------------------------
const handleResize = () => {
if (!svg || !containerRef.value) return
svg.attr('width', containerRef.value.clientWidth)
.attr('height', containerRef.value.clientHeight)
}
// ---------------------------------------------------------------------------
// Document click to close context menu
// ---------------------------------------------------------------------------
const onDocumentClick = (e) => {
// Close context menu on any click outside it
if (contextMenu.value.show) {
closeContextMenu()
}
}
// ---------------------------------------------------------------------------
// Watchers
// ---------------------------------------------------------------------------
watch(
() => [props.nodes, props.lines, props.connections, props.dimensions],
() => {
// Rebuild the root dimension from updated props
if (dimensionStack.value.length > 0) {
dimensionStack.value[0] = buildRootDimension()
} else {
dimensionStack.value = [buildRootDimension()]
}
if (!transitionState.value.active) {
renderMap()
}, { deep: true })
}
},
{ deep: true }
)
// ---------------------------------------------------------------------------
// Lifecycle
// ---------------------------------------------------------------------------
onMounted(() => {
initCanvas()
window.addEventListener('resize', handleResize)
document.addEventListener('click', onDocumentClick)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
document.removeEventListener('click', onDocumentClick)
})
// Expose zoom methods
// ---------------------------------------------------------------------------
// Exposed API
// ---------------------------------------------------------------------------
const zoomTo = (x, y, scale) => {
if (!svg || !zoom) return
const transform = d3.zoomIdentity.translate(x, y).scale(scale)
svg.transition().duration(500).call(zoom.transform, transform)
svg.transition().duration(500).call(
zoom.transform,
d3.zoomIdentity.translate(x, y).scale(scale)
)
}
defineExpose({ zoomTo })
defineExpose({ zoomTo, handleFabCreate })
</script>
<template>
<div ref="containerRef" class="metro-canvas-container">
<div ref="containerRef" class="metro-canvas-container" @click="closeContextMenu">
<!-- Main SVG canvas -->
<svg ref="svgRef" class="metro-canvas"></svg>
<!-- Depth indicator -->
<div class="depth-indicator">
DEPTH:&nbsp;{{ currentDepth }}
<span v-if="currentDepth > 1" class="depth-back" @click.stop="commitDimensionChange('out', null)">
[↑ BACK]
</span>
</div>
<!-- Transition progress bar -->
<div
v-if="transitionState.active"
class="transition-bar"
:style="{ width: (transitionState.progress * 100) + '%' }"
></div>
<!-- Hover tooltip -->
<Transition name="fade">
<div
v-if="hoveredNode"
class="node-tooltip"
:style="{
left: `${hoveredNode.x + transform.x + 30}px`,
top: `${hoveredNode.y + transform.y - 20}px`,
left: `${hoveredNode.x * transform.k + transform.x + 30}px`,
top: `${hoveredNode.y * transform.k + transform.y - 20}px`,
}"
>
<div class="tooltip-title">{{ hoveredNode.name }}</div>
<div v-if="hoveredNode.description" class="tooltip-desc">{{ hoveredNode.description }}</div>
<div v-if="hoveredNode.status" class="tooltip-status">{{ hoveredNode.status }}</div>
<div class="tooltip-hint">Click to zoom in</div>
<div v-if="hoveredNode.children && (hoveredNode.children.nodes?.length ?? 0) > 0" class="tooltip-hint">
Scroll to zoom in &rarr; child dimension
</div>
<div v-else class="tooltip-hint">Click to view details</div>
</div>
</Transition>
<!-- Context menu -->
<Transition name="menu-fade">
<div
v-if="contextMenu.show"
class="context-menu"
:style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
@click.stop
>
<template v-if="contextMenu.type === 'canvas'">
<div class="context-menu-header">CANVAS</div>
<button class="context-item" @click="handleContextCreate">+ New node here</button>
</template>
<template v-else-if="contextMenu.type === 'node'">
<div class="context-menu-header">{{ contextMenu.node?.name ?? 'NODE' }}</div>
<button class="context-item" @click="handleContextEdit">Edit</button>
<button class="context-item" @click="handleContextAddChild">+ Add child node</button>
<button class="context-item danger" @click="handleContextDelete">Delete</button>
</template>
</div>
</Transition>
</div>
</template>
<style scoped>
/* -----------------------------------------------------------------------
Container & canvas
----------------------------------------------------------------------- */
.metro-canvas-container {
position: relative;
width: 100%;
@@ -307,6 +779,55 @@ defineExpose({ zoomTo })
height: 100%;
}
/* -----------------------------------------------------------------------
Depth indicator
----------------------------------------------------------------------- */
.depth-indicator {
position: absolute;
bottom: 16px;
left: 16px;
font-family: 'VT323', monospace;
font-size: 14px;
color: #00d2ff;
background: rgba(22, 33, 62, 0.8);
border: 1px solid rgba(0, 210, 255, 0.3);
padding: 4px 10px;
border-radius: 3px;
letter-spacing: 0.1em;
user-select: none;
display: flex;
align-items: center;
gap: 8px;
}
.depth-back {
color: #e94560;
cursor: pointer;
transition: color 0.15s;
}
.depth-back:hover {
color: #ff8fab;
text-shadow: 0 0 8px rgba(233, 69, 96, 0.6);
}
/* -----------------------------------------------------------------------
Transition progress bar
----------------------------------------------------------------------- */
.transition-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, #00d2ff, #e94560);
transition: width 0.05s linear;
pointer-events: none;
box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}
/* -----------------------------------------------------------------------
Hover tooltip
----------------------------------------------------------------------- */
.node-tooltip {
position: absolute;
pointer-events: none;
@@ -347,10 +868,95 @@ defineExpose({ zoomTo })
opacity: 0.6;
}
.fade-enter-active, .fade-leave-active {
/* -----------------------------------------------------------------------
Context menu
----------------------------------------------------------------------- */
.context-menu {
position: fixed;
z-index: 200;
min-width: 180px;
background: #0d1b2a;
border: 1px solid #00d2ff;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 210, 255, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.4);
overflow: hidden;
font-family: 'VT323', monospace;
}
.context-menu-header {
padding: 6px 12px;
font-size: 12px;
color: #00d2ff;
letter-spacing: 0.15em;
background: rgba(0, 210, 255, 0.08);
border-bottom: 1px solid rgba(0, 210, 255, 0.2);
user-select: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.context-item {
display: block;
width: 100%;
padding: 8px 14px;
text-align: left;
background: none;
border: none;
color: #e8e8e8;
font-family: 'VT323', monospace;
font-size: 15px;
cursor: pointer;
letter-spacing: 0.05em;
transition: background 0.12s, color 0.12s;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.context-item:last-child {
border-bottom: none;
}
.context-item:hover {
background: rgba(0, 210, 255, 0.12);
color: #00d2ff;
}
.context-item.danger {
color: #e94560;
}
.context-item.danger:hover {
background: rgba(233, 69, 96, 0.12);
color: #ff8fab;
}
/* -----------------------------------------------------------------------
Transitions
----------------------------------------------------------------------- */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.15s;
}
.fade-enter-from, .fade-leave-to {
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.menu-fade-enter-active {
transition: opacity 0.1s, transform 0.1s;
}
.menu-fade-leave-active {
transition: opacity 0.08s;
}
.menu-fade-enter-from {
opacity: 0;
transform: scale(0.95) translateY(-4px);
}
.menu-fade-leave-to {
opacity: 0;
}
</style>

1
routes/web.php
View File

@@ -20,6 +20,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
Route::prefix('api')->group(function () {
Route::get('/map/strategy', [MapController::class, 'apiStrategy'])->name('api.map.strategy');
Route::get('/map/project/{project}', [MapController::class, 'apiProject'])->name('api.map.project');
Route::get('/map/node/{type}/{id}/children', [MapController::class, 'apiNodeChildren'])->name('api.map.node.children');
});
// Projects