Cull labels when not readable

src/consts.ts

@@ -4,3 +4,4 @@ export const DEFAULT_NODE_CONTAINER_NAME = 'node-container'
 export const DEFAULT_TIME_COLUMN_SPAN_SECONDS = 1
 export const DEFAULT_TIME_COLUMN_SIZE_PIXELS = 20
 export const DEFAULT_LINEAR_COLUMN_SIZE_PIXELS = 200
+export const DEFAULT_LABEL_CULLING_THRESHOLD = 0.2

src/factories/label.ts

@@ -1,14 +1,19 @@
 import { BitmapText } from 'pixi.js'
 import { RunGraphNode } from '@/models/RunGraph'
 import { waitForFonts } from '@/objects/fonts'
+import { waitForLabelCull } from '@/objects/labelCulling'
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export async function nodeLabelFactory() {
   const { inter } = await waitForFonts()
+  const cull = await waitForLabelCull()
+
   const label = inter('', {
     fontSize: 12,
   })
 
+  cull.add(label)
+
   async function render(node: RunGraphNode): Promise<BitmapText> {
     label.text = node.label
 

src/factories/nodeFlowRun.ts

@@ -59,8 +59,8 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
     ])
 
     nodesContainer.visible = true
+    nodesContainer.once('rendered', () => cull())
 
-    cull()
     resized()
   }
 

src/objects/culling.ts

@@ -11,6 +11,8 @@ export async function startCulling(): Promise<void> {
   const viewport = await waitForViewport()
   const application = await waitForApplication()
 
+  // this cull uses renderable so any other custom logic for showing or hiding must use
+  // the "visible" property or this will interfere
   cullInstance = new Cull({
     toggle: 'renderable',
   })

src/objects/events.ts

@@ -8,6 +8,7 @@ import { LayoutMode } from '@/models/layout'
 import { RequiredGraphConfig } from '@/models/RunGraph'
 import { ViewportDateRange } from '@/models/viewport'
 import { Fonts } from '@/objects/fonts'
+import { LabelCull } from '@/services/labelCull'
 
 type Events = {
   scaleCreated: HorizontalScale,
@@ -25,6 +26,7 @@ type Events = {
   containerCreated: Container,
   layoutUpdated: LayoutMode,
   cullCreated: Cull,
+  labelCullCreated: LabelCull,
 }
 
 export type EventKey = keyof Events

src/objects/index.ts

@@ -4,6 +4,7 @@ import { startConfig, stopConfig } from '@/objects/config'
 import { startCulling, stopCulling } from '@/objects/culling'
 import { emitter } from '@/objects/events'
 import { startFonts, stopFonts } from '@/objects/fonts'
+import { startLabelCulling, stopLabelCulling } from '@/objects/labelCulling'
 import { startNodes, stopNodes } from '@/objects/nodes'
 import { startScale, stopScale } from '@/objects/scale'
 import { startScope, stopScope } from '@/objects/scope'
@@ -29,6 +30,7 @@ export function start({ stage, props }: StartParameters): void {
   startStage(stage)
   startConfig(props)
   startCulling()
+  startLabelCulling()
 }
 
 export function stop(): void {
@@ -43,4 +45,5 @@ export function stop(): void {
   stopScope()
   stopFonts()
   stopCulling()
+  stopLabelCulling()
 }

src/objects/labelCulling.ts

@@ -0,0 +1,42 @@
+import { Ticker } from 'pixi.js'
+import { DEFAULT_LABEL_CULLING_THRESHOLD } from '@/consts'
+import { waitForEvent } from '@/objects/events'
+import { waitForViewport } from '@/objects/viewport'
+import { LabelCull } from '@/services/labelCull'
+
+let instance: LabelCull | null = null
+let callback: (() => void) | null = null
+
+export async function startLabelCulling(): Promise<void> {
+  const viewport = await waitForViewport()
+
+  instance = new LabelCull()
+
+  callback = (): void => {
+    if (viewport.dirty) {
+      const visible = viewport.scale.x > DEFAULT_LABEL_CULLING_THRESHOLD
+
+      instance?.toggle(visible)
+    }
+  }
+
+  Ticker.shared.add(callback)
+}
+
+export function stopLabelCulling(): void {
+  if (callback) {
+    Ticker.shared.remove(callback)
+  }
+
+  instance?.clear()
+  instance = null
+  callback = null
+}
+
+export async function waitForLabelCull(): Promise<LabelCull> {
+  if (instance) {
+    return instance
+  }
+
+  return await waitForEvent('labelCullCreated')
+}

src/services/labelCull.ts

@@ -0,0 +1,61 @@
+import { DisplayObject } from 'pixi.js'
+
+type LabelCullStatus = 'hidden' | 'visible'
+
+// This label culler intentionally uses the `visible` property to show and hide labels
+// this is because the viewport culling uses the `renderable` property and will interfere
+// if the same property is used
+export class LabelCull {
+  private status: LabelCullStatus = 'visible'
+  private readonly labels = new Set<DisplayObject>()
+
+  private get visible(): boolean {
+    return this.status === 'visible'
+  }
+
+  private get hidden(): boolean {
+    return this.status === 'hidden'
+  }
+
+  public show(): void {
+    if (this.status === 'visible') {
+      return
+    }
+
+    for (const label of this.labels) {
+      label.visible = true
+    }
+
+    this.status = 'visible'
+  }
+
+  public hide(): void {
+    if (this.status === 'hidden') {
+      return
+    }
+
+    for (const label of this.labels) {
+      label.visible = false
+    }
+
+    this.status = 'hidden'
+  }
+
+  public toggle(visible: boolean): void {
+    if (visible) {
+      this.show()
+    } else {
+      this.hide()
+    }
+  }
+
+  public add(label: DisplayObject): void {
+    this.labels.add(label)
+
+    label.visible = this.visible
+  }
+
+  public clear(): void {
+    this.labels.clear()
+  }
+}