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
@@ -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
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user