All files / web/src/components/toys/number-line/constants renderConstants.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { RenderConstant } from '../types'

const MARKER_LINE_WIDTH = 1.5

/** Gap between the top of the tallest tick and where the DOM symbol sits */
export const SYMBOL_GAP_ABOVE_TICKS = 6

const COLOR_LIGHT = '#4338ca' // deep indigo
const COLOR_DARK = '#f59e0b' // bright amber

export { COLOR_LIGHT as CONSTANT_COLOR_LIGHT, COLOR_DARK as CONSTANT_COLOR_DARK }

/**
 * Render dashed drop lines from constant symbol positions down to the axis.
 *
 * The symbols themselves are rendered as MathML DOM elements (see updateConstantMarkerDOM).
 * This canvas pass draws only the connecting lines.
 */
export function renderConstantDropLines(
  ctx: CanvasRenderingContext2D,
  constants: RenderConstant[],
  centerY: number,
  isDark: boolean,
  maxTickHeight: number
): void {
  if (constants.length === 0) return

  const color = isDark ? COLOR_DARK : COLOR_LIGHT
  const symbolBottomY = centerY - maxTickHeight - SYMBOL_GAP_ABOVE_TICKS

  for (const c of constants) {
    if (c.opacity <= 0) continue

    ctx.globalAlpha = c.opacity
    ctx.beginPath()
    ctx.moveTo(c.screenX, symbolBottomY)
    ctx.lineTo(c.screenX, centerY)
    ctx.strokeStyle = color
    ctx.lineWidth = MARKER_LINE_WIDTH
    ctx.setLineDash([3, 3])
    ctx.stroke()
    ctx.setLineDash([])
    ctx.globalAlpha = 1
  }
}