All files / web/src/components/toys/number-line/constants updateConstantMarkerDOM.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { RenderConstant } from '../types'
import type { MathConstant } from './constantsData'
import {
  SYMBOL_GAP_ABOVE_TICKS,
  CONSTANT_COLOR_LIGHT,
  CONSTANT_COLOR_DARK,
} from './renderConstants'

/** Pre-built lookup from constant ID → MathConstant (populated on first call) */
let constantLookup: Map<string, MathConstant> | null = null

function getConstantLookup(allConstants: MathConstant[]): Map<string, MathConstant> {
  if (!constantLookup) {
    constantLookup = new Map(allConstants.map((c) => [c.id, c]))
  }
  return constantLookup
}

/**
 * Sync DOM MathML symbol elements with the current set of visible constants.
 *
 * Called directly from the draw() rAF loop — avoids React re-renders for
 * smooth 60fps position tracking during pan/zoom.
 *
 * Each constant gets an absolutely positioned div containing its MathML markup,
 * placed so the bottom of the symbol sits above the tallest tick.
 */
export function updateConstantMarkerDOM(
  container: HTMLDivElement,
  constants: RenderConstant[],
  allConstants: MathConstant[],
  centerY: number,
  maxTickHeight: number,
  isDark: boolean
): void {
  const lookup = getConstantLookup(allConstants)
  const color = isDark ? CONSTANT_COLOR_DARK : CONSTANT_COLOR_LIGHT
  const symbolBottomY = centerY - maxTickHeight - SYMBOL_GAP_ABOVE_TICKS

  // Build set of IDs that should be present
  const activeIds = new Set<string>()

  // Index existing children by constant ID
  const existing = new Map<string, HTMLElement>()
  for (let i = 0; i < container.children.length; i++) {
    const el = container.children[i] as HTMLElement
    const id = el.dataset.constantId
    if (id) existing.set(id, el)
  }

  for (const rc of constants) {
    if (rc.opacity <= 0) continue
    activeIds.add(rc.id)

    const data = lookup.get(rc.id)
    if (!data) continue

    let el = existing.get(rc.id)
    if (!el) {
      el = document.createElement('div')
      el.dataset.constantId = rc.id
      el.style.position = 'absolute'
      el.style.pointerEvents = 'none'
      el.style.transform = 'translate(-50%, -100%)'
      el.style.fontWeight = '700'
      el.style.lineHeight = '1'
      el.style.whiteSpace = 'nowrap'
      el.innerHTML = data.mathml
      container.appendChild(el)
    }

    // Update position, opacity, and color every frame
    el.style.left = `${rc.screenX}px`
    el.style.top = `${symbolBottomY}px`
    el.style.opacity = String(rc.opacity)
    el.style.color = color
    el.style.fontSize = rc.discovered ? '20px' : '18px'
  }

  // Remove elements for constants no longer visible
  for (const [id, el] of existing) {
    if (!activeIds.has(id)) {
      container.removeChild(el)
    }
  }
}