Command design pattern to add more undo/redo events

Author: vagkaratzas

frontend/src/actions/canvas_controls.ts

@@ -8,6 +8,12 @@ import * as THREE from 'three'
 import { bus } from '../bus'
 import { ctx } from '../three'
 import { registerAnimateHook } from './screen'
+import { history } from '../commands/base'
+import {
+  captureTransforms,
+  TransformCommand,
+  type TransformSnapshot,
+} from '../commands/scene'
 import { redrawIntraLayerEdges, unselectAllEdges } from './edge'
 import {
   checkHoverOverLayer,
@@ -39,6 +45,12 @@ let lasso: THREE.Line | null = null
 
 type CanvasMouseEvent = MouseEvent & { layerX: number; layerY: number }
 
+// Mouse drags (pan, orbit, held-key node/layer transforms) register one undo
+// entry per drag: snapshot on press, command pushed on release if a transform
+// branch actually ran (lasso/selection drags don't count).
+let dragBefore: TransformSnapshot | null = null
+let transformDragged = false
+
 // Smooth wheel zoom: the wheel sets a target scale (same 0.2–2 bounds as
 // Scene.zoom) and easeZoomStep lerps toward it each frame. Users with
 // prefers-reduced-motion get the old instant zoom.
@@ -103,6 +115,10 @@ export function axisRelease(): void {
 // mouse: 0 left, 1 middle, 2 right click
 export function clickDown(event: CanvasMouseEvent): void {
   if (!ctx.scene?.exists()) return
+  if (event.button === 0 || event.button === 1) {
+    dragBefore = captureTransforms()
+    transformDragged = false
+  }
   if (event.button === 0) {
     ctx.scene.leftClickPressed = true
     ctx.scene.middleClickPressed = false
@@ -150,18 +166,27 @@ export function clickDrag(event: CanvasMouseEvent): void {
           event.layerX - ctx.xBoundMax,
           ctx.yBoundMax - event.layerY
         )
-      } else if (ctx.scene.axisPressed !== '' && getSelectedNodes().length > 0)
+      } else if (
+        ctx.scene.axisPressed !== '' &&
+        getSelectedNodes().length > 0
+      ) {
         translateNodesWithHeldKey(event)
-      else if (ctx.scene.axisPressed !== '') rotateLayersWithHeldKey(event)
-      else if (
+        transformDragged = true
+      } else if (ctx.scene.axisPressed !== '') {
+        rotateLayersWithHeldKey(event)
+        transformDragged = true
+      } else if (
         ctx.lastHoveredLayerIndex === null &&
         ctx.lastHoveredNodeIndex === null
-      )
+      ) {
         ctx.scene.translatePanWithMouse(x, y)
+        transformDragged = true
+      }
     } else if (ctx.scene.middleClickPressed) {
       ctx.scene.dragging = true
       event.preventDefault()
       ctx.scene.orbitSphereWithMouse(x, y)
+      transformDragged = true
     }
 
     ctx.mousePreviousX = x
@@ -186,6 +211,13 @@ export function processPendingHover(): void {
 export function clickUp(event: MouseEvent): void {
   if (!ctx.scene?.exists()) return
   ctx.scene.dragging = false
+  if (dragBefore && transformDragged) {
+    history.execute(
+      new TransformCommand('Drag scene', dragBefore, captureTransforms())
+    )
+  }
+  dragBefore = null
+  transformDragged = false
   if (event.button === 0) {
     ctx.scene.leftClickPressed = false
     removeContextMenu() // v2 removed the right-click options list here

frontend/src/actions/drag_controls.ts

@@ -9,6 +9,12 @@ import * as THREE from 'three'
 import { bus } from '../bus'
 import { ctx } from '../three'
 import { findIndexByUuid } from '../utils'
+import { history } from '../commands/base'
+import {
+  captureTransforms,
+  TransformCommand,
+  type TransformSnapshot,
+} from '../commands/scene'
 
 const _plane = new THREE.Plane()
 const _pointer = new THREE.Vector2()
@@ -21,6 +27,9 @@ const _raycaster = new THREE.Raycaster()
 let selected: THREE.Object3D | null = null
 let hovered: THREE.Object3D | null = null
 let surface: DragSurface | null = null
+// One undo entry per layer drag: snapshot on grab, pushed on release.
+let dragBefore: TransformSnapshot | null = null
+let dragMoved = false
 
 // Structural subset of HTMLCanvasElement, so tests can drive a fake surface.
 export interface DragSurface {
@@ -64,6 +73,8 @@ export function onPointerDown(event: PointerLikeEvent): void {
   _raycaster.setFromCamera(_pointer, ctx.camera)
 
   selected = ctx.layers[idx].plane
+  dragBefore = captureTransforms()
+  dragMoved = false
   _plane.setFromNormalAndCoplanarPoint(
     ctx.camera.getWorldDirection(_plane.normal),
     _worldPosition.setFromMatrixPosition(selected.matrixWorld)
@@ -96,6 +107,7 @@ export function onPointerMove(event: PointerLikeEvent): void {
       selected.position.copy(
         _intersection.sub(_offset).applyMatrix4(_inverseMatrix)
       )
+      dragMoved = true
     }
     return
   }
@@ -128,6 +140,12 @@ export function onPointerCancel(): void {
     // redraw what the drag displaced (v2 routed this through Shiny syncs)
     ctx.renderInterLayerEdgesFlag = true
     if (layerIndex !== -1) bus.emit('layer:moved', { layerIndex })
+    if (dragBefore && dragMoved)
+      history.execute(
+        new TransformCommand('Drag layer', dragBefore, captureTransforms())
+      )
+    dragBefore = null
+    dragMoved = false
   }
   surface.style.cursor = hovered ? 'pointer' : 'auto'
 }

frontend/src/actions/layer.ts

@@ -7,6 +7,7 @@
 import type { MeshBasicMaterial } from 'three'
 import { store } from '../store'
 import { ctx, SELECTED_LAYER_DEFAULT_COLOR } from '../three'
+import { LAYER_DEFAULT_COLOR } from '../three/constants'
 import type { ColorPrioritySource } from '../three'
 import { findIndexByUuid } from '../utils'
 import { decideNodeLabelFlags } from './node'
@@ -37,9 +38,20 @@ export function getSelectedLayers(): number[] {
   return ctx.layers.filter((l) => l.isSelected).map((l) => l.id)
 }
 
+// Last floor-picker color applied. Tracked so ChangeFloorColorCommand can
+// recover the previous value on undo — the DOM color input already holds the
+// new value by the time its 'change' event fires, so it can't be read back.
+let lastFloorColor = LAYER_DEFAULT_COLOR
+
+export function getLastFloorColor(): string {
+  return lastFloorColor
+}
+
 // `pickerColor` overrides the DOM color input (themes.ts passes the theme's
 // floor color; the input itself only exists once Phase 13 builds the UI).
 export function repaintLayers(pickerColor?: string): void {
+  if (ctx.layerColorPrioritySource === 'picker' && pickerColor)
+    lastFloorColor = pickerColor
   for (const layer of ctx.layers) {
     if (layer.isSelected) layer.setColor(SELECTED_LAYER_DEFAULT_COLOR)
     else if (ctx.layerColorPrioritySource === 'default')

frontend/src/actions/nav_controls.ts

@@ -9,21 +9,45 @@ import { ctx } from '../three'
 import { redrawIntraLayerEdges, toggleInterLayerEdgesRendering } from './edge'
 import { getSelectedLayers, initialSpreadLayers } from './layer'
 import { getSelectedNodes } from './node'
+import { history } from '../commands/base'
+import {
+  captureTransforms,
+  TransformCommand,
+  type TransformSnapshot,
+} from '../commands/scene'
 
 type Axis = 'X' | 'Y' | 'Z'
 
 const REPEAT_MS = 70
 
 let repeatId: ReturnType<typeof setInterval> | undefined
+// Hold-to-repeat interactions register one undo entry per hold: snapshot on
+// press, command pushed on release (only if a tick actually ran).
+let repeatBefore: TransformSnapshot | null = null
+let repeatMoved = false
 
 function stopRepeat(): void {
   clearInterval(repeatId)
   repeatId = undefined
+  if (repeatBefore && repeatMoved)
+    history.execute(
+      new TransformCommand(
+        'Nav control move',
+        repeatBefore,
+        captureTransforms()
+      )
+    )
+  repeatBefore = null
+  repeatMoved = false
 }
 
 function startRepeat(fn: () => void): void {
   stopRepeat()
-  repeatId = setInterval(fn, REPEAT_MS)
+  repeatBefore = captureTransforms()
+  repeatId = setInterval(() => {
+    repeatMoved = true
+    fn()
+  }, REPEAT_MS)
 }
 
 function sliderValue(id: string): number {
@@ -52,8 +76,12 @@ function rotateScene(direction: number, axis: Axis): void {
 
 export function recenterNetwork(): void {
   if (ctx.scene?.exists()) {
+    const before = captureTransforms()
     ctx.scene.recenter()
     raiseMovedFlags()
+    history.execute(
+      new TransformCommand('Recenter network', before, captureTransforms())
+    )
   }
 }
 
@@ -89,8 +117,12 @@ function moveLayers(direction: number, axis: Axis): void {
 }
 
 function spreadLayers(direction: number): void {
+  const before = captureTransforms()
   initialSpreadLayers(direction)
   raiseMovedFlags()
+  history.execute(
+    new TransformCommand('Spread layers', before, captureTransforms())
+  )
 }
 
 function scaleLayers(): void {
@@ -120,13 +152,17 @@ function scaleLayers(): void {
 function spreadNodes(multiplier: number): void {
   const selected = getSelectedNodes()
   if (selected.length === 0) return alert('Please select at least one node.')
+  const before = captureTransforms()
   for (const i of selected) {
     const node = ctx.nodeObjects[i]
     node.setPosition('y', node.getPosition('y') * multiplier)
     node.setPosition('z', node.getPosition('z') * multiplier)
   }
   redrawIntraLayerEdges()
   raiseMovedFlags()
+  history.execute(
+    new TransformCommand('Spread nodes', before, captureTransforms())
+  )
 }
 
 function moveNodes(direction: number, axis: Axis): void {
@@ -350,10 +386,61 @@ function attachNavControls(): void {
     }
   }
 
-  const scaleL = document.getElementById('layerScaleSlider')!
-  scaleL.addEventListener('input', scaleLayers)
-  const scaleN = document.getElementById('nodeScaleSlider')!
-  scaleN.addEventListener('input', scaleNodes)
+  // Live-scale on input; one undo entry per drag, finalized on 'change'.
+  // `sync` re-applies the restored scale to the slider + its value label on
+  // undo/redo (the transform snapshot only covers the 3D objects).
+  const wireScaleSlider = (
+    el: HTMLElement,
+    run: () => void,
+    description: string,
+    sync: () => void
+  ): void => {
+    let before: TransformSnapshot | null = null
+    el.addEventListener('input', () => {
+      before ??= captureTransforms()
+      run()
+    })
+    el.addEventListener('change', () => {
+      if (before) {
+        history.execute(
+          new TransformCommand(description, before, captureTransforms(), sync)
+        )
+        before = null
+      }
+    })
+  }
+  const setSlider = (sliderId: string, tdId: string, value: number): void => {
+    const s = document.getElementById(sliderId) as HTMLInputElement | null
+    if (s) s.value = String(value)
+    const td = document.getElementById(tdId)
+    if (td) td.textContent = `x${value}`
+  }
+  wireScaleSlider(
+    document.getElementById('layerScaleSlider')!,
+    scaleLayers,
+    'Scale layers',
+    () => {
+      const sel = getSelectedLayers()
+      setSlider(
+        'layerScaleSlider',
+        'sliderValue4',
+        sel.length ? ctx.layers[sel[0]].getScale() : 1
+      )
+    }
+  )
+  wireScaleSlider(
+    document.getElementById('nodeScaleSlider')!,
+    scaleNodes,
+    'Scale nodes',
+    () => {
+      const sel = getSelectedNodes()
+      setSlider(
+        'nodeScaleSlider',
+        'sliderValue6',
+        sel.length ? ctx.nodeObjects[sel[0]].getScale() : 1
+      )
+    }
+  )
   for (const [sliderId, tdId, fmt] of [
     ['sceneRotateSlider', 'sliderValue1', 'Angle: %v˚'],
     ['layerRotateSlider', 'sliderValue2', 'Angle: %v˚'],

frontend/src/actions/node.ts

@@ -154,7 +154,14 @@ export function selectNodesByName(search: string): void {
   updateSelectedNodesStore()
 }
 
+let currentNodeShape: NodeGeometryType = 'sphere'
+
+export function getNodeShape(): NodeGeometryType {
+  return currentNodeShape
+}
+
 export function setNodeShape(shape: NodeGeometryType): void {
+  currentNodeShape = shape
   for (const node of ctx.nodeObjects) node.setGeometry(shape)
 }
 

frontend/src/commands/scene.test.ts

@@ -171,3 +171,44 @@ describe('LoadNetworkCommand', () => {
     expect(ctx.nodeObjects).toHaveLength(1)
   })
 })
+
+describe('TransformCommand', () => {
+  it('restores node/layer transforms on undo', async () => {
+    const { captureTransforms, TransformCommand } = await import('./scene')
+    const before = captureTransforms()
+    ctx.nodeObjects[0].setPosition('y', 42)
+    ctx.layers[0].plane.position.set(1, 2, 3)
+    const c = new TransformCommand('move', before, captureTransforms())
+    c.undo()
+    expect(ctx.nodeObjects[0].getPosition('y')).toBe(0)
+    expect(ctx.layers[0].plane.position.x).toBe(0)
+    c.execute() // redo
+    expect(ctx.nodeObjects[0].getPosition('y')).toBe(42)
+    expect(ctx.layers[0].plane.position.z).toBe(3)
+  })
+})
+
+describe('ChangeChannelColorCommand', () => {
+  it('sets and restores the channel color', async () => {
+    const { ChangeChannelColorCommand } = await import('./scene')
+    ctx.channelColors = { ppi: '#cfcfcf' }
+    const c = new ChangeChannelColorCommand('ppi', '#ff0000')
+    c.execute()
+    expect(ctx.channelColors['ppi']).toBe('#ff0000')
+    c.undo()
+    expect(ctx.channelColors['ppi']).toBe('#cfcfcf')
+  })
+})
+
+describe('ChangeFloorColorCommand', () => {
+  it('rewinds picker color to previous, not the just-set value', async () => {
+    const { ChangeFloorColorCommand } = await import('./scene')
+    ctx.layerColorPrioritySource = 'picker'
+    new ChangeFloorColorCommand('#111111').execute() // establishes prior picker
+    const c = new ChangeFloorColorCommand('#ff0000')
+    c.execute()
+    expect(ctx.layers[0].color.toLowerCase()).toBe('#ff0000')
+    c.undo()
+    expect(ctx.layers[0].color.toLowerCase()).toBe('#111111')
+  })
+})