bumps!

src/objects/nodes.ts

@@ -1,12 +1,13 @@
 import { BitmapText, Container, Graphics, IPointData } from 'pixi.js'
-import { GraphPreLayout, NodePreLayout } from '@/models/layout'
+import { GraphPreLayout, NodePostLayout, NodePreLayout } from '@/models/layout'
 import { RunGraphNode, RunGraphNodes } from '@/models/RunGraph'
 import { waitForConfig } from '@/objects/config'
 import { emitter } from '@/objects/events'
 import { waitForFonts } from '@/objects/fonts'
 import { waitForNodesContainer } from '@/objects/nodesContainer'
 import { waitForScales } from '@/objects/scales'
 import { centerViewport } from '@/objects/viewport'
+import { axisBumpFactory } from '@/utilities/axisBumpFactory'
 import { exhaustive } from '@/utilities/exhaustive'
 import { graphDataFactory } from '@/utilities/graphDataFactory'
 import { WorkerLayoutMessage, WorkerMessage, getLayoutWorker } from '@/workers/runGraph'
@@ -22,6 +23,10 @@ type NodeObjects = {
 
 const graphObjects = new Map<string, NodeObjects>()
 const graphPreLayout: GraphPreLayout = new Map()
+const bumps = axisBumpFactory()
+
+// fake bump just to prove this works
+bumps.set({ axis: 5, nodeId: 'foo', offset: 100 })
 
 const worker = getLayoutWorker(onMessage)
 
@@ -37,20 +42,16 @@ function onMessage({ data }: MessageEvent<WorkerMessage>): void {
   }
 }
 
-async function handleLayoutMessage({ layout }: WorkerLayoutMessage): Promise<void> {
-  const config = await waitForConfig()
-
-  layout.forEach((layout, nodeId) => {
+function handleLayoutMessage({ layout }: WorkerLayoutMessage): void {
+  layout.forEach(async (layout, nodeId) => {
     const objects = graphObjects.get(nodeId)
 
     if (!objects) {
       console.warn(`Count not find ${nodeId} from layout in graph`)
       return
     }
 
-    const { x, y } = layout
-
-    objects.container.position = { x, y: config.styles.nodeHeight * y }
+    objects.container.position = await getActualPositionFromLayout(layout)
     objects.container.visible = true
   })
 
@@ -71,6 +72,7 @@ export async function startNodes(): Promise<void> {
 export function stopNodes(): void {
   graphObjects.clear()
   graphPreLayout.clear()
+  bumps.clear()
   stopData()
 }
 
@@ -232,3 +234,14 @@ async function createNodePreLayout(node: RunGraphNode, { container }: NodeObject
     children,
   }
 }
+
+async function getActualPositionFromLayout({ x, y }: NodePostLayout): Promise<IPointData> {
+  const config = await waitForConfig()
+  const yValue = y * config.styles.nodeHeight
+  const bump = bumps.bump(y)
+
+  return {
+    x,
+    y: yValue + bump,
+  }
+}

src/utilities/axisBumpFactory.ts

@@ -0,0 +1,68 @@
+// Map<YAxis, Map<NodeId, offset>>
+type AxisBumps = Map<number, Map<string, number> | undefined>
+
+type SetBumpParameters = {
+  axis: number,
+  nodeId: string,
+  offset: number,
+}
+
+type RemoveBumpParameters = {
+  axis: number,
+  nodeId: string,
+}
+
+type BumpFactory = {
+  get: (axis: number) => number,
+  set: (value: SetBumpParameters) => void,
+  delete: (value: RemoveBumpParameters) => void,
+  bump: (axis: number) => number,
+  clear: () => void,
+}
+
+export function axisBumpFactory(): BumpFactory {
+  const bumps: AxisBumps = new Map()
+
+  const get: BumpFactory['get'] = (axis) => {
+    const values = bumps.get(axis)
+
+    if (!values) {
+      return 0
+    }
+
+    return Math.max(...values.values())
+  }
+
+  const set: BumpFactory['set'] = ({ axis, nodeId, offset }) => {
+    const value = bumps.get(axis) ?? new Map<string, number>()
+
+    value.set(nodeId, offset)
+    bumps.set(axis, value)
+  }
+
+  const remove: BumpFactory['delete'] = ({ axis, nodeId }) => {
+    bumps.get(axis)?.delete(nodeId)
+  }
+
+  const bump: BumpFactory['bump'] = (axis) => {
+    let value = 0
+
+    for (let index = 1; index <= axis; index++) {
+      value += get(index)
+    }
+
+    return value
+  }
+
+  const clear: BumpFactory['clear'] = () => {
+    bumps.clear()
+  }
+
+  return {
+    get,
+    set,
+    delete: remove,
+    bump,
+    clear,
+  }
+}