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
@@ -8,38 +8,44 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'create-project',
|
||||
'create-theme',
|
||||
'create-commitment',
|
||||
'create-document',
|
||||
'create-track',
|
||||
'item-hover',
|
||||
'item-leave',
|
||||
])
|
||||
|
||||
const menuOpen = ref(false)
|
||||
|
||||
const toggle = () => {
|
||||
menuOpen.value = !menuOpen.value
|
||||
if (!menuOpen.value) emit('item-leave')
|
||||
}
|
||||
|
||||
/** Options change based on which dimension we're in */
|
||||
/** Menu items adapt to the current dimension */
|
||||
const menuItems = computed(() => {
|
||||
if (props.depth > 1 && props.parentEntityType === 'project') {
|
||||
// Inside a project dimension: create project-level items
|
||||
return [
|
||||
{ label: 'Nieuw commitment', event: 'create-commitment' },
|
||||
{ label: 'Nieuw document', event: 'create-document' },
|
||||
{ label: 'Nieuwe lijn', event: 'create-track', color: null, icon: '═' },
|
||||
]
|
||||
}
|
||||
// Root dimension: create top-level items
|
||||
return [
|
||||
{ label: 'Nieuw project', event: 'create-project' },
|
||||
{ label: 'Nieuw thema', event: 'create-theme' },
|
||||
{ label: 'Nieuw thema (lijn)', event: 'create-theme', color: '#00d2ff', icon: '═' },
|
||||
]
|
||||
})
|
||||
|
||||
const handleItemClick = (item) => {
|
||||
menuOpen.value = false
|
||||
emit('item-leave')
|
||||
emit(item.event)
|
||||
}
|
||||
|
||||
const handleItemHover = (item) => {
|
||||
emit('item-hover', item)
|
||||
}
|
||||
|
||||
const handleItemLeave = () => {
|
||||
emit('item-leave')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -52,9 +58,14 @@ const handleItemClick = (item) => {
|
||||
:key="item.event"
|
||||
class="fab-menu-item"
|
||||
@click="handleItemClick(item)"
|
||||
@mouseenter="handleItemHover(item)"
|
||||
@mouseleave="handleItemLeave"
|
||||
>
|
||||
<span class="fab-menu-icon">+</span>
|
||||
<span class="fab-menu-icon" :style="item.color ? { color: item.color } : {}">
|
||||
{{ item.icon }}
|
||||
</span>
|
||||
<span class="fab-menu-label">{{ item.label }}</span>
|
||||
<span v-if="item.color" class="fab-color-dot" :style="{ background: item.color }"></span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
@@ -170,6 +181,13 @@ const handleItemClick = (item) => {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.fab-color-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px currentColor;
|
||||
}
|
||||
|
||||
/* Menu transition */
|
||||
.fab-menu-enter-active,
|
||||
.fab-menu-leave-active {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
|
||||
import * as d3 from 'd3'
|
||||
import { GRID, GRID_STEP_X, GRID_STEP_Y, snapToGrid } from './gridConstants.js'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props & Emits
|
||||
@@ -34,9 +35,13 @@ const emit = defineEmits([
|
||||
|
||||
const ZOOM_IN_THRESHOLD = 2.5
|
||||
const ZOOM_OUT_THRESHOLD = 0.6
|
||||
const ZOOM_IN_COMMIT = 4.0 // commit at this scale (smoother range)
|
||||
const ZOOM_OUT_COMMIT = 0.25 // commit at this scale
|
||||
const NODE_PROXIMITY = 250 // how close to a node to trigger zoom-in
|
||||
const ZOOM_IN_COMMIT = 4.0
|
||||
const ZOOM_OUT_COMMIT = 0.25
|
||||
const NODE_PROXIMITY = 250
|
||||
const FIT_PADDING = 80 // px padding around nodes for labels
|
||||
const FIT_MARGIN = 0.85 // use 85% of viewport
|
||||
const FIT_SCALE_MIN = 0.3
|
||||
const FIT_SCALE_MAX = 2.0
|
||||
|
||||
const LINE_COLORS = [
|
||||
'#00d2ff', '#e94560', '#00ff88', '#7b68ee',
|
||||
@@ -69,6 +74,13 @@ const transitionState = ref({
|
||||
// Tracks whether we're mid-commit (prevent re-entry)
|
||||
let isCommitting = false
|
||||
|
||||
// Grid visibility (shown during branch handle interaction)
|
||||
const gridVisible = ref(false)
|
||||
let gridFadeTimer = null
|
||||
|
||||
// Line highlighting (set by FAB hover)
|
||||
const highlightedLineId = ref(null)
|
||||
|
||||
// Context menu
|
||||
const contextMenu = ref({
|
||||
show: false,
|
||||
@@ -131,6 +143,42 @@ const buildRootDimension = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Fit-to-view transform
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Compute a D3 zoom transform that fits all nodes of a dimension into the
|
||||
* viewport with padding, instead of always resetting to scale=1.
|
||||
*/
|
||||
const computeFitTransform = (dimData, w, h) => {
|
||||
const nodes = dimData?.nodes ?? []
|
||||
if (!nodes.length) {
|
||||
return d3.zoomIdentity.translate(w / 2, h / 2).scale(1)
|
||||
}
|
||||
|
||||
const xMin = Math.min(...nodes.map(n => n.x)) - FIT_PADDING
|
||||
const xMax = Math.max(...nodes.map(n => n.x)) + FIT_PADDING
|
||||
const yMin = Math.min(...nodes.map(n => n.y)) - FIT_PADDING
|
||||
const yMax = Math.max(...nodes.map(n => n.y)) + FIT_PADDING
|
||||
|
||||
// Guard against degenerate bbox (single node or co-linear)
|
||||
const bboxW = Math.max(xMax - xMin, 100)
|
||||
const bboxH = Math.max(yMax - yMin, 100)
|
||||
|
||||
const scaleX = (w * FIT_MARGIN) / bboxW
|
||||
const scaleY = (h * FIT_MARGIN) / bboxH
|
||||
const scale = Math.min(Math.max(Math.min(scaleX, scaleY), FIT_SCALE_MIN), FIT_SCALE_MAX)
|
||||
|
||||
const bboxCenterX = (xMin + xMax) / 2
|
||||
const bboxCenterY = (yMin + yMax) / 2
|
||||
|
||||
const tx = w / 2 - bboxCenterX * scale
|
||||
const ty = h / 2 - bboxCenterY * scale
|
||||
|
||||
return d3.zoomIdentity.translate(tx, ty).scale(scale)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Canvas init
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -202,16 +250,14 @@ const initCanvas = () => {
|
||||
}
|
||||
})
|
||||
|
||||
// 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
|
||||
|
||||
// Fit initial view to the data instead of hardcoded scale=1
|
||||
const rootDim = dimensionStack.value[0]
|
||||
svg.call(zoom.transform, computeFitTransform(rootDim, width, height))
|
||||
|
||||
renderMap()
|
||||
}
|
||||
|
||||
@@ -337,8 +383,8 @@ const commitDimensionChange = (direction, node) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* Smoothly animate back to the default zoom (scale=1, centered).
|
||||
* This prevents the jarring snap that a hard reset causes.
|
||||
* Smoothly animate to a fit-to-view transform for the current dimension.
|
||||
* Calculates bounding box of all nodes and zooms to fit them in the viewport.
|
||||
*/
|
||||
const animateZoomReset = () => {
|
||||
if (!svg || !zoom) {
|
||||
@@ -350,16 +396,16 @@ const animateZoomReset = () => {
|
||||
const w = containerRef.value?.clientWidth ?? 800
|
||||
const h = containerRef.value?.clientHeight ?? 600
|
||||
|
||||
const targetDim = currentDimensionData.value
|
||||
const targetTransform = computeFitTransform(targetDim, w, h)
|
||||
|
||||
// Temporarily disable the zoom handler to prevent re-entry during animation
|
||||
svg.on('.zoom', null)
|
||||
|
||||
svg.transition()
|
||||
.duration(400)
|
||||
.ease(d3.easeCubicOut)
|
||||
.call(
|
||||
zoom.transform,
|
||||
d3.zoomIdentity.translate(w / 2, h / 2).scale(1)
|
||||
)
|
||||
.call(zoom.transform, targetTransform)
|
||||
.on('end', () => {
|
||||
// Re-enable zoom handler
|
||||
svg.call(zoom)
|
||||
@@ -406,6 +452,174 @@ const findNodeAt = (x, y, dimData = null) => {
|
||||
return nodes.find(n => Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2) < 15) ?? null
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Grid rendering (shown on interaction only)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const renderGrid = (dimData, parentGroup) => {
|
||||
const nodes = dimData?.nodes ?? []
|
||||
if (!nodes.length) return
|
||||
|
||||
const gridGroup = parentGroup.append('g')
|
||||
.attr('class', 'grid-layer')
|
||||
.attr('opacity', gridVisible.value ? 0.6 : 0)
|
||||
.style('transition', 'opacity 0.3s ease')
|
||||
|
||||
const margin = 300
|
||||
const xMin = Math.min(...nodes.map(n => n.x)) - margin
|
||||
const xMax = Math.max(...nodes.map(n => n.x)) + margin
|
||||
const yMin = Math.min(...nodes.map(n => n.y)) - margin
|
||||
const yMax = Math.max(...nodes.map(n => n.y)) + margin
|
||||
|
||||
for (let x = snapToGrid(xMin); x <= xMax; x += GRID_STEP_X) {
|
||||
gridGroup.append('line')
|
||||
.attr('x1', x).attr('y1', yMin)
|
||||
.attr('x2', x).attr('y2', yMax)
|
||||
.attr('stroke', 'rgba(0, 210, 255, 0.06)')
|
||||
.attr('stroke-width', 0.5)
|
||||
.attr('stroke-dasharray', '2,6')
|
||||
}
|
||||
for (let y = snapToGrid(yMin); y <= yMax; y += GRID_STEP_Y) {
|
||||
gridGroup.append('line')
|
||||
.attr('x1', xMin).attr('y1', y)
|
||||
.attr('x2', xMax).attr('y2', y)
|
||||
.attr('stroke', 'rgba(0, 210, 255, 0.06)')
|
||||
.attr('stroke-width', 0.5)
|
||||
.attr('stroke-dasharray', '2,6')
|
||||
}
|
||||
}
|
||||
|
||||
const showGrid = () => {
|
||||
clearTimeout(gridFadeTimer)
|
||||
gridVisible.value = true
|
||||
if (g) g.select('.grid-layer').transition().duration(200).attr('opacity', 0.6)
|
||||
}
|
||||
|
||||
const hideGrid = () => {
|
||||
gridFadeTimer = setTimeout(() => {
|
||||
gridVisible.value = false
|
||||
if (g) g.select('.grid-layer').transition().duration(300).attr('opacity', 0)
|
||||
}, 400)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Branch handles
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Render branch handles on a hovered node.
|
||||
* 0° = extend line right, 45° = fork down-right, 315° = fork up-right.
|
||||
*/
|
||||
const renderBranchHandles = (nodeGroup, node, allNodes) => {
|
||||
// Remove any existing handles first
|
||||
nodeGroup.select('.branch-handles').remove()
|
||||
|
||||
const handleGroup = nodeGroup.append('g').attr('class', 'branch-handles')
|
||||
const HANDLE_DIST = 30 // distance from node center to handle
|
||||
const HANDLE_R = 9 // handle circle radius
|
||||
|
||||
const branches = [
|
||||
{ deg: 0, dx: GRID_STEP_X, dy: 0, label: '→' },
|
||||
{ deg: 45, dx: GRID_STEP_X, dy: GRID_STEP_Y, label: '↘' },
|
||||
{ deg: 315, dx: GRID_STEP_X, dy: -GRID_STEP_Y, label: '↗' },
|
||||
]
|
||||
|
||||
branches.forEach(b => {
|
||||
const targetX = snapToGrid(node.x + b.dx)
|
||||
const targetY = snapToGrid(node.y + b.dy)
|
||||
|
||||
// Skip if target position is occupied
|
||||
if (allNodes.some(n => n.x === targetX && n.y === targetY)) return
|
||||
|
||||
const rad = (b.deg * Math.PI) / 180
|
||||
const hx = Math.cos(rad) * HANDLE_DIST
|
||||
const hy = Math.sin(rad) * HANDLE_DIST
|
||||
|
||||
// Handle circle
|
||||
const handle = handleGroup.append('circle')
|
||||
.attr('cx', hx).attr('cy', hy)
|
||||
.attr('r', HANDLE_R)
|
||||
.attr('fill', 'rgba(0, 210, 255, 0.1)')
|
||||
.attr('stroke', '#00d2ff')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-dasharray', '3,2')
|
||||
.attr('cursor', 'pointer')
|
||||
.attr('class', 'branch-handle')
|
||||
.attr('opacity', 0)
|
||||
.transition().duration(200)
|
||||
.attr('opacity', 0.8)
|
||||
|
||||
// "+" text on handle
|
||||
handleGroup.append('text')
|
||||
.attr('x', hx).attr('y', hy + 4)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('fill', '#00d2ff')
|
||||
.attr('font-family', "'VT323', monospace")
|
||||
.attr('font-size', '13px')
|
||||
.attr('pointer-events', 'none')
|
||||
.attr('opacity', 0)
|
||||
.transition().duration(200)
|
||||
.attr('opacity', 0.9)
|
||||
.text('+')
|
||||
|
||||
// Invisible larger hit area for the handle
|
||||
handleGroup.append('circle')
|
||||
.attr('cx', hx).attr('cy', hy)
|
||||
.attr('r', HANDLE_R + 6)
|
||||
.attr('fill', 'transparent')
|
||||
.attr('cursor', 'pointer')
|
||||
.on('mouseenter', () => {
|
||||
// Ghost preview: dashed line + ghost circle at target
|
||||
handleGroup.selectAll('.ghost-preview').remove()
|
||||
handleGroup.append('line')
|
||||
.attr('class', 'ghost-preview')
|
||||
.attr('x1', 0).attr('y1', 0)
|
||||
.attr('x2', b.dx).attr('y2', b.dy)
|
||||
.attr('stroke', '#00d2ff')
|
||||
.attr('stroke-width', 2)
|
||||
.attr('stroke-dasharray', '6,4')
|
||||
.attr('opacity', 0.4)
|
||||
handleGroup.append('circle')
|
||||
.attr('class', 'ghost-preview')
|
||||
.attr('cx', b.dx).attr('cy', b.dy)
|
||||
.attr('r', 8)
|
||||
.attr('fill', 'none')
|
||||
.attr('stroke', '#00d2ff')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-dasharray', '4,3')
|
||||
.attr('opacity', 0.5)
|
||||
handleGroup.append('text')
|
||||
.attr('class', 'ghost-preview')
|
||||
.attr('x', b.dx).attr('y', b.dy + 28)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('fill', '#00d2ff')
|
||||
.attr('font-family', "'VT323', monospace")
|
||||
.attr('font-size', '12px')
|
||||
.attr('opacity', 0.5)
|
||||
.text(b.deg === 0 ? 'extend' : 'fork')
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
handleGroup.selectAll('.ghost-preview').remove()
|
||||
})
|
||||
.on('click', (event) => {
|
||||
event.stopPropagation()
|
||||
emit('create-node', {
|
||||
x: targetX,
|
||||
y: targetY,
|
||||
lineId: b.deg === 0 ? node.lineId : null, // null = new track
|
||||
afterNodeId: node.id,
|
||||
branchAngle: b.deg,
|
||||
parentNodeId: currentDimensionData.value?.parentNodeId ?? null,
|
||||
parentEntityType: currentDimensionData.value?.parentEntityType ?? null,
|
||||
parentEntityId: currentDimensionData.value?.parentEntityId ?? null,
|
||||
dimensionId: currentDimensionData.value?.id ?? 'root',
|
||||
depth: currentDepth.value,
|
||||
sourceNode: node,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Rendering
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -418,6 +632,9 @@ const renderDimension = (dimData, opacity, parentGroup) => {
|
||||
.attr('class', 'dimension-group')
|
||||
.style('transition', 'opacity 0.05s linear')
|
||||
|
||||
// Grid layer (behind everything, only visible during interaction)
|
||||
renderGrid(dimData, group)
|
||||
|
||||
const nodes = dimData.nodes ?? []
|
||||
const lines = dimData.lines ?? []
|
||||
const connections = dimData.connections ?? []
|
||||
@@ -425,6 +642,8 @@ const renderDimension = (dimData, opacity, parentGroup) => {
|
||||
// --- Metro lines ---
|
||||
lines.forEach((line, lineIndex) => {
|
||||
const color = line.color || getLineColor(lineIndex)
|
||||
const isHighlighted = highlightedLineId.value === line.id
|
||||
const isAnyHighlighted = highlightedLineId.value !== null
|
||||
const lineNodes = nodes
|
||||
.filter(n => n.lineId === line.id)
|
||||
.sort((a, b) => a.order - b.order)
|
||||
@@ -449,15 +668,19 @@ const renderDimension = (dimData, opacity, parentGroup) => {
|
||||
.y(d => d.y)
|
||||
.curve(d3.curveMonotoneX)
|
||||
|
||||
const trackOpacity = isAnyHighlighted ? (isHighlighted ? 1.0 : 0.2) : 0.75
|
||||
const glowOpacity = isAnyHighlighted ? (isHighlighted ? 0.3 : 0.05) : 0.15
|
||||
|
||||
// Outer glow track
|
||||
group.append('path')
|
||||
.datum(lineNodes)
|
||||
.attr('d', lineGen)
|
||||
.attr('fill', 'none')
|
||||
.attr('stroke', color)
|
||||
.attr('stroke-width', 8)
|
||||
.attr('stroke-width', isHighlighted ? 10 : 8)
|
||||
.attr('stroke-linecap', 'round')
|
||||
.attr('opacity', 0.15)
|
||||
.attr('opacity', glowOpacity)
|
||||
.attr('filter', isHighlighted ? 'url(#glow)' : null)
|
||||
|
||||
// Main track
|
||||
group.append('path')
|
||||
@@ -465,9 +688,9 @@ const renderDimension = (dimData, opacity, parentGroup) => {
|
||||
.attr('d', lineGen)
|
||||
.attr('fill', 'none')
|
||||
.attr('stroke', color)
|
||||
.attr('stroke-width', 4)
|
||||
.attr('stroke-width', isHighlighted ? 5 : 4)
|
||||
.attr('stroke-linecap', 'round')
|
||||
.attr('opacity', 0.75)
|
||||
.attr('opacity', trackOpacity)
|
||||
|
||||
// Line label
|
||||
if (lineNodes.length > 0) {
|
||||
@@ -515,6 +738,11 @@ const renderDimension = (dimData, opacity, parentGroup) => {
|
||||
.transition().duration(200)
|
||||
.attr('r', 12)
|
||||
.attr('filter', 'url(#glow)')
|
||||
|
||||
// Show branch handles
|
||||
showGrid()
|
||||
renderBranchHandles(d3.select(event.currentTarget), d, nodes)
|
||||
|
||||
emit('node-hover', d)
|
||||
})
|
||||
.on('mouseleave', (event, d) => {
|
||||
@@ -523,6 +751,11 @@ const renderDimension = (dimData, opacity, parentGroup) => {
|
||||
.transition().duration(200)
|
||||
.attr('r', 8)
|
||||
.attr('filter', null)
|
||||
|
||||
// Remove branch handles
|
||||
d3.select(event.currentTarget).select('.branch-handles').remove()
|
||||
hideGrid()
|
||||
|
||||
emit('node-leave', d)
|
||||
})
|
||||
|
||||
@@ -760,12 +993,20 @@ const zoomTo = (x, y, scale) => {
|
||||
)
|
||||
}
|
||||
|
||||
const setHighlightedLine = (lineId) => {
|
||||
highlightedLineId.value = lineId
|
||||
renderMap()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
zoomTo,
|
||||
handleFabCreate,
|
||||
currentDepth,
|
||||
currentDimensionData,
|
||||
isInChildDimension,
|
||||
setHighlightedLine,
|
||||
showGrid,
|
||||
hideGrid,
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -819,12 +1060,8 @@ defineExpose({
|
||||
@click.stop
|
||||
>
|
||||
<template v-if="contextMenu.type === 'canvas'">
|
||||
<div class="context-menu-header">
|
||||
{{ currentDepth > 1 ? 'PROJECT' : 'CANVAS' }}
|
||||
</div>
|
||||
<button class="context-item" @click="handleContextCreate">
|
||||
+ {{ currentDepth > 1 ? 'New item here' : 'New node here' }}
|
||||
</button>
|
||||
<div class="context-menu-header">CANVAS</div>
|
||||
<div class="context-hint">Hover a station to branch</div>
|
||||
</template>
|
||||
<template v-else-if="contextMenu.type === 'node'">
|
||||
<div class="context-menu-header">{{ contextMenu.node?.name ?? 'NODE' }}</div>
|
||||
@@ -1013,6 +1250,14 @@ defineExpose({
|
||||
color: #ff8fab;
|
||||
}
|
||||
|
||||
.context-hint {
|
||||
padding: 8px 14px;
|
||||
color: #8892b0;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Transitions
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
14
resources/js/Components/MetroMap/gridConstants.js
Normal file
14
resources/js/Components/MetroMap/gridConstants.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user