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

Fix zoom transition and allow branch handles on occupied positions

Browse Source 
Zoom fix: The zoom handler was being completely removed during the
fit-to-view animation (svg.on('.zoom', null)), which meant D3's
transition dispatched zoom events that nobody handled — so `g` never
got its transform updated during the animation. The view stayed stuck
at the old scale until the user scrolled again.

Fix: Keep handleZoom active during commit animation. When isCommitting
is true, it only applies the visual transform (g.attr('transform'))
and skips threshold logic. This lets D3's transition smoothly animate
`g` to the fit-to-view position.

Branch handles: Removed the occupied-position check. In a real metro,
stations can be shared between lines (interchanges). Now all 3 branch
handles always appear. Ghost preview shows "interchange" label when
targeting an occupied position.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-04-08 09:52:25 +02:00
parent 829b46561e
commit 1dc31a53df
1 changed files with 9 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -266,12 +266,13 @@ const initCanvas = () => {
// ---------------------------------------------------------------------------
const handleZoom = (event) => {
if (isCommitting) return
const t = event.transform
g.attr('transform', t)
transform.value = t
// During commit animation, just apply the visual transform — skip threshold logic
if (isCommitting) return
emit('zoom-change', { scale: t.k, x: t.x, y: t.y })
const w = containerRef.value?.clientWidth ?? 800
@@ -385,6 +386,7 @@ const commitDimensionChange = (direction, node) => {
/**
* 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.
* The zoom handler stays active but isCommitting guards against threshold logic.
*/
const animateZoomReset = () => {
if (!svg || !zoom) {
@@ -399,30 +401,14 @@ const animateZoomReset = () => {
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)
// Render the new dimension immediately so the animation shows correct content
renderMap()
svg.transition()
.duration(400)
.ease(d3.easeCubicOut)
.call(zoom.transform, targetTransform)
.on('end', () => {
// Re-enable zoom handler
svg.call(zoom)
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,
}
})
isCommitting = false
renderMap()
})
@@ -528,8 +514,8 @@ const renderBranchHandles = (nodeGroup, node, allNodes) => {
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
// Allow branching to occupied positions — metro interchanges are valid
const occupied = allNodes.some(n => n.x === targetX && n.y === targetY)
const rad = (b.deg * Math.PI) / 180
const hx = Math.cos(rad) * HANDLE_DIST
@@ -596,7 +582,7 @@ const renderBranchHandles = (nodeGroup, node, allNodes) => {
.attr('font-family', "'VT323', monospace")
.attr('font-size', '12px')
.attr('opacity', 0.5)
.text(b.deg === 0 ? 'extend' : 'fork')
.text(occupied ? 'interchange' : (b.deg === 0 ? 'extend' : 'fork'))
})
.on('mouseleave', () => {
handleGroup.selectAll('.ghost-preview').remove()