@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/editor/use-floorplan-background-placement.ts

@@ -2,20 +2,27 @@
 
 import { emitter, type FenceNode, isCurvedWall, type WallNode } from '@pascal-app/core'
 import { type MouseEvent as ReactMouseEvent, useCallback } from 'react'
-import { getPlanPointDistance } from '../../lib/floorplan'
+import { resolveCeilingPlanPointSnap } from '../../lib/ceiling-plan-snap'
+import { alignFloorplanDraftPoint, getPlanPointDistance } from '../../lib/floorplan'
+import { resolveSlabPlanPointSnap } from '../../lib/slab-plan-snap'
+import useAlignmentGuides from '../../store/use-alignment-guides'
+import useEditor, { isAngleSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import usePlacementPreview from '../../store/use-placement-preview'
+import useSegmentDraftChain from '../../store/use-segment-draft-chain'
 import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
-import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+import { getSegmentGridStep, type WallPlanPoint } from '../tools/wall/wall-drafting'
 
 type UseFloorplanBackgroundPlacementArgs = {
   activePolygonDraftPoints: WallPlanPoint[]
   ceilingDraftPoints: WallPlanPoint[]
   clearFencePlacementDraft: () => void
   clearRoofPlacementDraft: () => void
+  clearWallPlacementDraft: () => void
   emitFloorplanGridEvent: (
     type: 'click' | 'double-click' | 'move',
     planPoint: WallPlanPoint,
     event: ReactMouseEvent<SVGSVGElement>,
-  ) => WallPlanPoint
+  ) => void
   fenceDraftStart: WallPlanPoint | null
   fences: FenceNode[]
   findClosestWallPoint: (
@@ -30,11 +37,16 @@ type UseFloorplanBackgroundPlacementArgs = {
   } | null
   floorplanOpeningLocalY: number
   getSnappedFloorplanPoint: (point: WallPlanPoint) => WallPlanPoint
+  handleCeilingItemPlacementClick: (
+    planPoint: WallPlanPoint,
+    nativeEvent: ReactMouseEvent<SVGSVGElement>,
+  ) => boolean
   handleCeilingPlacementPoint: (point: WallPlanPoint) => void
   handleSlabPlacementPoint: (point: WallPlanPoint) => void
   handleWallPlacementPoint: (point: WallPlanPoint) => void
   handleZonePlacementPoint: (point: WallPlanPoint) => void
   isCeilingBuildActive: boolean
+  isCeilingItemPlacementActive: boolean
   isFenceBuildActive: boolean
   isFloorplanGridInteractionActive: boolean
   isOpeningPlacementActive: boolean
@@ -42,18 +54,21 @@ type UseFloorplanBackgroundPlacementArgs = {
   isRoofBuildActive: boolean
   isWallBuildActive: boolean
   isZoneBuildActive: boolean
+  levelId: string | null
   roofDraftStart: WallPlanPoint | null
   setCursorPoint: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setFenceDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setFenceDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setRoofDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setRoofDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
-  shiftPressed: boolean
   snapWallDraftPoint: (args: {
     point: WallPlanPoint
     walls: WallNode[]
     start?: WallPlanPoint
-    angleSnap: boolean
+    angleSnap?: boolean
+    bypassSnap?: boolean
+    step?: number
+    gridSnap?: (point: WallPlanPoint) => WallPlanPoint
   }) => WallPlanPoint
   snapPolygonDraftPoint: (args: {
     point: WallPlanPoint
@@ -62,6 +77,13 @@ type UseFloorplanBackgroundPlacementArgs = {
   }) => WallPlanPoint
   toPoint2D: (point: WallPlanPoint) => { x: number; y: number }
   walls: WallNode[]
+  /**
+   * Snap a building-local plan point to the world XZ grid at `step`.
+   * Injected so the hook doesn't have to know the building's rotation
+   * or position — used by wall / fence branches that snap at variable
+   * step.
+   */
+  worldGridSnap: (point: WallPlanPoint, step: number) => WallPlanPoint
 }
 
 export function useFloorplanBackgroundPlacement({
@@ -69,17 +91,20 @@ export function useFloorplanBackgroundPlacement({
   ceilingDraftPoints,
   clearFencePlacementDraft,
   clearRoofPlacementDraft,
+  clearWallPlacementDraft,
   emitFloorplanGridEvent,
   fenceDraftStart,
   fences,
   findClosestWallPoint,
   floorplanOpeningLocalY,
   getSnappedFloorplanPoint,
+  handleCeilingItemPlacementClick,
   handleCeilingPlacementPoint,
   handleSlabPlacementPoint,
   handleWallPlacementPoint,
   handleZonePlacementPoint,
   isCeilingBuildActive,
+  isCeilingItemPlacementActive,
   isFenceBuildActive,
   isFloorplanGridInteractionActive,
   isOpeningPlacementActive,
@@ -87,17 +112,18 @@ export function useFloorplanBackgroundPlacement({
   isRoofBuildActive,
   isWallBuildActive,
   isZoneBuildActive,
+  levelId,
   roofDraftStart,
   setCursorPoint,
   setFenceDraftEnd,
   setFenceDraftStart,
   setRoofDraftEnd,
   setRoofDraftStart,
-  shiftPressed,
   snapWallDraftPoint,
   snapPolygonDraftPoint,
   toPoint2D,
   walls,
+  worldGridSnap,
 }: UseFloorplanBackgroundPlacementArgs) {
   const handleBackgroundPlacementClick = useCallback(
     (
@@ -123,24 +149,42 @@ export function useFloorplanBackgroundPlacement({
             stopPropagation: () => {},
           } as any)
         }
+        // Drop the off-wall ghost on commit so it doesn't linger at the
+        // just-placed spot before the next pointer move re-evaluates.
+        usePlacementPreview.getState().clear()
         return true
       }
 
       if (isCeilingBuildActive) {
-        emitFloorplanGridEvent('click', planPoint, event)
-
-        const snappedPoint = snapPolygonDraftPoint({
+        // Align the committed vertex the same way the move-preview did, so the
+        // placed point matches what the user saw — mode-driven (the chip):
+        // `grid` quantizes, `angles` locks 15° rays, `lines` snaps onto walls /
+        // alignment, `off` is free. Alt remains force/free at commit time.
+        const angleSnap = ceilingDraftPoints.length > 0 && isAngleSnapActive()
+        const fallbackPoint = snapPolygonDraftPoint({
           point: planPoint,
           start: ceilingDraftPoints[ceilingDraftPoints.length - 1],
-          angleSnap: ceilingDraftPoints.length > 0 && !shiftPressed,
+          angleSnap,
         })
+        const snappedPoint = resolveCeilingPlanPointSnap({
+          rawPoint: planPoint,
+          fallbackPoint,
+          levelId,
+          align: !angleSnap,
+        }).point
 
+        emitFloorplanGridEvent('click', snappedPoint, event)
         handleCeilingPlacementPoint(snappedPoint)
         return true
       }
 
       if (isRoofBuildActive) {
-        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        // Footprint placement (polygon context: grid / lines / off, no angle),
+        // mode-driven to match the chip. Alt is force/free at commit time;
+        // alignment display/pull follows the active magnetic mode.
+        const snappedPoint = alignFloorplanDraftPoint(getSnappedFloorplanPoint(planPoint), {
+          applySnap: isMagneticSnapActive(),
+        })
         emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
 
@@ -154,43 +198,95 @@ export function useFloorplanBackgroundPlacement({
       }
 
       if (isFenceBuildActive) {
-        emitFloorplanGridEvent('click', planPoint, event)
-
-        const snappedPoint = snapFenceDraftPoint({
+        // Fence draft: mode-driven (matches the chip), same as the move
+        // preview. `grid` snaps to the world XZ grid (rotation-safe via the
+        // `gridSnap` callback), `angles` locks 15° rays from the start, `lines`
+        // pulls onto walls / fences / alignment, `off` is free.
+        const fenceStep = getSegmentGridStep()
+        const fenceAngleSnap = fenceDraftStart !== null && isAngleSnapActive()
+        const fenceSnapped = snapFenceDraftPoint({
           point: planPoint,
           walls,
           fences,
           start: fenceDraftStart ?? undefined,
-          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+          angleSnap: fenceAngleSnap,
+          magnetic: isMagneticSnapActive(),
+          gridSnap: (p) => worldGridSnap(p, fenceStep),
         })
+        const fenceGridBase = worldGridSnap(planPoint, fenceStep)
+        const fenceLocked =
+          fenceSnapped[0] !== fenceGridBase[0] || fenceSnapped[1] !== fenceGridBase[1]
+        const snappedPoint = fenceLocked
+          ? fenceSnapped
+          : alignFloorplanDraftPoint(fenceSnapped, {
+              applySnap: isMagneticSnapActive() && !fenceAngleSnap,
+            })
 
+        emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
 
+        // Double-click finishes the chain. The emit above already made the
+        // 3D fence tool stopDrafting (its detail >= 2 guard), so close the
+        // 2D draft too — leaving it open desyncs the two views.
+        if (fenceDraftStart && event.detail >= 2) {
+          clearFencePlacementDraft()
+          return true
+        }
+
         if (!fenceDraftStart) {
           setFenceDraftStart(snappedPoint)
           setFenceDraftEnd(snappedPoint)
         } else if (
           getPlanPointDistance(toPoint2D(fenceDraftStart), toPoint2D(snappedPoint)) >= 0.01
         ) {
-          clearFencePlacementDraft()
+          // Single mode commits one segment per click: the same emit above
+          // already made the 3D fence tool stopDrafting, so close the 2D
+          // draft too instead of chaining.
+          if (useEditor.getState().getContinuation('fence') === 'single') {
+            clearFencePlacementDraft()
+            setCursorPoint(snappedPoint)
+            return true
+          }
+          // The 3D fence tool owns creation and keeps chaining from the
+          // committed fence's resolved end — chain the 2D draft from the
+          // same published point so both views draft the next segment
+          // from the same start.
+          const nextStart = useSegmentDraftChain.getState().fence ?? snappedPoint
+          setFenceDraftStart(nextStart)
+          setFenceDraftEnd(nextStart)
         } else {
           setFenceDraftEnd(snappedPoint)
         }
         return true
       }
 
-      if (isFloorplanGridInteractionActive) {
-        const snappedPoint = emitFloorplanGridEvent('click', planPoint, event)
-        setCursorPoint(snappedPoint)
-        return true
-      }
-
+      // Slab / zone polygon build — local draft state + grid emit.
+      // Must run BEFORE the `isFloorplanGridInteractionActive` catch-all
+      // (since slab is registry-driven, the catch-all would otherwise
+      // swallow the click and skip local draft state updates — leaving
+      // the 2D draft polygon invisible while the 3D tool builds fine).
       if (isPolygonBuildActive) {
-        const snappedPoint = snapPolygonDraftPoint({
+        const angleSnap = activePolygonDraftPoints.length > 0 && isAngleSnapActive()
+        const fallbackPoint = snapPolygonDraftPoint({
           point: planPoint,
           start: activePolygonDraftPoints[activePolygonDraftPoints.length - 1],
-          angleSnap: activePolygonDraftPoints.length > 0 && !shiftPressed,
+          angleSnap,
         })
+        // Zone shares the slab surface snap (wall corners / midpoints /
+        // crossings + alignment) — it's the same polygon-on-a-level draw.
+        const snappedPoint = resolveSlabPlanPointSnap({
+          rawPoint: planPoint,
+          fallbackPoint,
+          levelId,
+          align: !angleSnap,
+        }).point
+
+        // Emit the grid event so the registry-driven slab tool also
+        // sees the click (parity with ceiling / fence / roof branches
+        // above). Zone has no registry tool — emit-or-not is irrelevant.
+        if (!isZoneBuildActive) {
+          emitFloorplanGridEvent('click', snappedPoint, event)
+        }
 
         if (isZoneBuildActive) {
           handleZonePlacementPoint(snappedPoint)
@@ -200,35 +296,93 @@ export function useFloorplanBackgroundPlacement({
         return true
       }
 
-      if (!isWallBuildActive) {
-        return false
+      // Wall placement — local draft state + grid emit. Same reasoning
+      // as slab above: wall is registry-driven, so without this branch
+      // the catch-all would swallow the click and the local draftStart
+      // / draftEnd state in the floor plan would never update, leaving
+      // the dashed-line draft preview invisible.
+      if (isWallBuildActive) {
+        // Wall draft: mode-driven (matches the chip + the move-preview branch).
+        // `grid` snaps to the world XZ grid (rotation-safe via `gridSnap`),
+        // `angles` locks 15° rays from the start, `lines` pulls the endpoint
+        // onto existing wall corners / edges + alignment, `off` is free.
+        const wallStep = getSegmentGridStep()
+        const wallAngleSnap = draftStart !== null && isAngleSnapActive()
+        const wallSnapped = snapWallDraftPoint({
+          point: planPoint,
+          walls,
+          start: draftStart ?? undefined,
+          angleSnap: wallAngleSnap,
+          gridSnap: (p) => worldGridSnap(p, wallStep),
+        })
+        const wallGridBase = worldGridSnap(planPoint, wallStep)
+        const wallLocked = wallSnapped[0] !== wallGridBase[0] || wallSnapped[1] !== wallGridBase[1]
+        let snappedPoint = wallSnapped
+        if (wallLocked) {
+          useAlignmentGuides.getState().clear()
+        } else {
+          // Alignment lines are shown in every mode; the pull applies only when
+          // magnetic ('lines') and the segment isn't angle-locked.
+          snappedPoint = alignFloorplanDraftPoint(wallSnapped, {
+            applySnap: isMagneticSnapActive() && !wallAngleSnap,
+          })
+        }
+
+        emitFloorplanGridEvent('click', snappedPoint, event)
+
+        // Double-click finishes the chain. The emit above already made the
+        // 3D wall tool stopDrafting (its detail >= 2 guard), so close the
+        // 2D draft too — otherwise it stays open against a closed 3D tool
+        // and the next previewed segment is silently never created.
+        if (draftStart && event.detail >= 2) {
+          clearWallPlacementDraft()
+          setCursorPoint(snappedPoint)
+          return true
+        }
+
+        handleWallPlacementPoint(snappedPoint)
+        return true
       }
 
-      const snappedPoint = snapWallDraftPoint({
-        point: planPoint,
-        walls,
-        start: draftStart ?? undefined,
-        angleSnap: Boolean(draftStart) && !shiftPressed,
-      })
+      // Ceiling-attached item placement (lights, fans). Routes the click
+      // through `ceiling:click` instead of `grid:click` so the placement
+      // strategy parents the new item to the ceiling at the correct
+      // height — mirrors the pointer-move handler in `floorplan-panel`.
+      if (isCeilingItemPlacementActive) {
+        handleCeilingItemPlacementClick(planPoint, event)
+        return true
+      }
+
+      // Generic catch-all — registry-driven tool whose kind has no
+      // local floor-plan draft handler (column / spawn / shelf / etc.).
+      // The tool's `grid:click` subscriber owns the placement.
+      if (isFloorplanGridInteractionActive) {
+        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        emitFloorplanGridEvent('click', snappedPoint, event)
+        setCursorPoint(snappedPoint)
+        return true
+      }
 
-      handleWallPlacementPoint(snappedPoint)
-      return true
+      return false
     },
     [
       activePolygonDraftPoints,
       ceilingDraftPoints,
       clearFencePlacementDraft,
       clearRoofPlacementDraft,
+      clearWallPlacementDraft,
       emitFloorplanGridEvent,
       fenceDraftStart,
       fences,
       findClosestWallPoint,
       floorplanOpeningLocalY,
       getSnappedFloorplanPoint,
+      handleCeilingItemPlacementClick,
       handleCeilingPlacementPoint,
       handleSlabPlacementPoint,
       handleZonePlacementPoint,
       isCeilingBuildActive,
+      isCeilingItemPlacementActive,
       isFenceBuildActive,
       isFloorplanGridInteractionActive,
       isOpeningPlacementActive,
@@ -236,18 +390,19 @@ export function useFloorplanBackgroundPlacement({
       isRoofBuildActive,
       isWallBuildActive,
       isZoneBuildActive,
+      levelId,
       roofDraftStart,
       setCursorPoint,
       setFenceDraftEnd,
       setFenceDraftStart,
       setRoofDraftEnd,
       setRoofDraftStart,
-      shiftPressed,
       snapWallDraftPoint,
       snapPolygonDraftPoint,
       toPoint2D,
       walls,
       handleWallPlacementPoint,
+      worldGridSnap,
     ],
   )
 

package/src/components/editor/use-floorplan-hit-testing.ts

@@ -3,7 +3,9 @@
 import type {
   AnyNode,
   CeilingNode,
+  ColumnNode,
   DoorNode,
+  ElevatorNode,
   ItemNode,
   Point2D,
   RoofNode,
@@ -46,6 +48,16 @@ type CeilingPolygonEntry = {
   holes: Point2D[][]
 }
 
+type ColumnPolygonEntry = {
+  column: ColumnNode
+  polygon: Point2D[]
+}
+
+type ElevatorPolygonEntry = {
+  elevator: ElevatorNode
+  polygon: Point2D[]
+}
+
 type FloorplanRoofEntry = {
   roof: RoofNode
   segments: Array<{
@@ -72,8 +84,10 @@ type FloorplanStairEntry = {
 
 type UseFloorplanHitTestingArgs = {
   ceilingPolygons: CeilingPolygonEntry[]
+  columnPolygons: ColumnPolygonEntry[]
   displaySlabPolygons: SlabPolygonEntry[]
   displayWallPolygons: WallPolygonEntry[]
+  floorplanElevatorEntries: ElevatorPolygonEntry[]
   floorplanItemEntries: FloorplanItemEntry[]
   floorplanOpeningHitTolerance: number
   floorplanRoofEntries: FloorplanRoofEntry[]
@@ -88,8 +102,10 @@ type UseFloorplanHitTestingArgs = {
 
 export function useFloorplanHitTesting({
   ceilingPolygons,
+  columnPolygons,
   displaySlabPolygons,
   displayWallPolygons,
+  floorplanElevatorEntries,
   floorplanItemEntries,
   floorplanOpeningHitTolerance,
   floorplanRoofEntries,
@@ -113,18 +129,22 @@ export function useFloorplanHitTesting({
         openings: openingsPolygons,
         roofs: floorplanRoofEntries,
         stairs: floorplanStairEntries,
+        elevators: floorplanElevatorEntries,
         walls: displayWallPolygons,
         slabs: displaySlabPolygons,
         openingHitTolerance: floorplanOpeningHitTolerance,
         wallHitTolerance: floorplanWallHitTolerance,
+        columns: columnPolygons,
         getOpeningCenterLine,
       })
     },
     [
       ceilingPolygons,
+      columnPolygons,
       displaySlabPolygons,
       displayWallPolygons,
       floorplanItemEntries,
+      floorplanElevatorEntries,
       floorplanOpeningHitTolerance,
       floorplanRoofEntries,
       floorplanStairEntries,
@@ -149,13 +169,17 @@ export function useFloorplanHitTesting({
         openings: openingsPolygons,
         roofs: floorplanRoofEntries,
         slabs: displaySlabPolygons,
+        columns: columnPolygons,
+        elevators: floorplanElevatorEntries,
         stairs: floorplanStairEntries,
       }),
     [
       ceilingPolygons,
+      columnPolygons,
       displaySlabPolygons,
       displayWallPolygons,
       floorplanItemEntries,
+      floorplanElevatorEntries,
       floorplanRoofEntries,
       floorplanStairEntries,
       isFloorplanItemContextActive,

package/src/components/editor/use-floorplan-scene-data.ts

@@ -12,6 +12,7 @@ import {
   type SiteNode,
   type SlabNode,
   type SpawnNode,
+  useLiveTransforms,
   useScene,
   type WallNode,
   type WindowNode,
@@ -35,7 +36,7 @@ function useLevelChildren<TNode extends AnyNode>(
       }
 
       const levelNode = state.nodes[levelId]
-      if (!levelNode || levelNode.type !== 'level') {
+      if (levelNode?.type !== 'level') {
         return [] as TNode[]
       }
 
@@ -59,13 +60,22 @@ export function useFloorplanSceneData({
       ? (levelNode.parentId as BuildingNode['id'])
       : buildingId
 
-  const buildingRotationY = useScene((state) => {
+  // Live transform override — when the building is mid-drag (the move
+  // tool publishes per-frame pose to useLiveTransforms), the floor-plan
+  // follows that pose so the dimmed reference floor tracks the cursor
+  // instead of snapping only on commit.
+  const buildingLiveTransform = useLiveTransforms((state) =>
+    currentBuildingId ? state.transforms.get(currentBuildingId) : undefined,
+  )
+
+  const committedBuildingRotationY = useScene((state) => {
     if (!currentBuildingId) return 0
     const node = state.nodes[currentBuildingId]
     return node?.type === 'building' ? (node.rotation[1] ?? 0) : 0
   })
+  const buildingRotationY = buildingLiveTransform?.rotation ?? committedBuildingRotationY
 
-  const buildingPosition = useScene((state) => {
+  const committedBuildingPosition = useScene((state) => {
     if (!currentBuildingId) {
       return DEFAULT_BUILDING_POSITION
     }
@@ -75,6 +85,7 @@ export function useFloorplanSceneData({
       ? (node.position as [number, number, number])
       : DEFAULT_BUILDING_POSITION
   })
+  const buildingPosition = buildingLiveTransform?.position ?? committedBuildingPosition
 
   const site = useScene((state) => {
     for (const rootNodeId of state.rootNodeIds) {
@@ -94,7 +105,7 @@ export function useFloorplanSceneData({
       }
 
       const buildingNode = state.nodes[currentBuildingId]
-      if (!buildingNode || buildingNode.type !== 'building') {
+      if (buildingNode?.type !== 'building') {
         return [] as LevelNode[]
       }
 
@@ -122,7 +133,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as RoofNode[]
       }
 
@@ -138,7 +149,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as OpeningNode[]
       }
 
@@ -160,7 +171,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as AnyNode[]
       }
 
@@ -170,6 +181,7 @@ export function useFloorplanSceneData({
 
   return {
     buildingPosition,
+    committedBuildingPosition,
     buildingRotationY,
     currentBuildingId,
     ceilings,

package/src/components/editor/use-mesh-settle-epoch.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Bumps after the 3D meshes have had a chance to settle following a scene
+ * change. `computeGroupBox` reads mesh WORLD bounds, but a scene commit
+ * (undo/redo included) reaches the meshes asynchronously — renderers
+ * reconcile on the next React commit and the geometry systems rebuild in the
+ * next frame — so anything that derives geometry from the meshes in the same
+ * render as the `nodes` change reads STALE positions. Depend on this epoch
+ * (alongside `nodes`) to recompute once more after two animation frames,
+ * when transforms and rebuilt geometry are in place.
+ */
+export function useMeshSettleEpoch(nodes: unknown): number {
+  const [epoch, setEpoch] = useState(0)
+  useEffect(() => {
+    let raf2 = 0
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setEpoch((e) => e + 1))
+    })
+    return () => {
+      cancelAnimationFrame(raf1)
+      cancelAnimationFrame(raf2)
+    }
+  }, [nodes])
+  return epoch
+}