@andespindola/brainlink 1.6.1 → 1.6.3

package/dist/application/frontend/client/graph-renderer.js

@@ -0,0 +1,690 @@
+// Renderer WebGL do grafo, escrito como factory dirigida por um "host" para
+// poder rodar em dois lugares sem duplicar código:
+//   - dentro do Web Worker (host liga em self.postMessage / self.requestAnimationFrame);
+//   - na própria thread principal, quando o caminho do worker não está
+//     disponível ou falha (host liga em callbacks diretos + window.requestAnimationFrame).
+// O contrato de mensagens (init/resize/camera/chunk/highlight/focus/select/
+// move-node/pick/pointer de entrada; ready/fatal/frame-stats/pick-result de
+// saída) é idêntico ao antigo worker, então os dois modos são intercambiáveis.
+export const createGraphRendererJs = () => `
+function createGraphRenderer(host) {
+  let canvas = null
+  let gl = null
+  let viewportWidth = 320
+  let viewportHeight = 320
+  let devicePixelRatio = 1
+  const camera = { x: 0, y: 0, scale: 1 }
+  const state = {
+    nodeCount: 0,
+    edgeCount: 0,
+    ids: [],
+    titles: [],
+    kinds: [],
+    x: new Float32Array(0),
+    y: new Float32Array(0),
+    relevance: new Float32Array(0),
+    radius: new Float32Array(0),
+    colorIndex: new Uint8Array(0),
+    visible: new Uint8Array(0),
+    highlighted: new Uint8Array(0),
+    focused: new Uint8Array(0),
+    selected: new Uint8Array(0),
+    edgeSource: new Uint32Array(0),
+    edgeTarget: new Uint32Array(0),
+    edgeWeight: new Float32Array(0)
+  }
+  const nodeIndexById = new Map()
+  const highlightedIds = new Set()
+  const focusedIds = new Set()
+  let selectedNodeId = null
+  let dirty = true
+  let renderScheduled = false
+  let hoverX = null
+  let hoverY = null
+  let lastFrameAt = 0
+  let lastVisibleEdges = 0
+  let interactionUntil = 0
+  let settledRenderTimer = null
+  let edgePositionsBuffer = new Float32Array(0)
+  let pointPositionsBuffer = new Float32Array(0)
+  let pointSizesBuffer = new Float32Array(0)
+
+  const defaultTheme = {
+    node: [0.30, 0.56, 0.85, 1],
+    nodeCluster: [0.18, 0.44, 0.71, 1],
+    nodeHighlight: [0.95, 0.70, 0.25, 1],
+    nodeSelected: [0.09, 0.13, 0.20, 1],
+    nodePalette: [
+      [0.30, 0.56, 0.85, 1],
+      [0.40, 0.73, 0.43, 1],
+      [0.94, 0.64, 0.23, 1],
+      [0.85, 0.37, 0.55, 1],
+      [0.55, 0.45, 0.85, 1],
+      [0.33, 0.75, 0.77, 1],
+      [0.93, 0.42, 0.34, 1],
+      [0.60, 0.65, 0.70, 1],
+      [0.72, 0.51, 0.33, 1],
+      [0.44, 0.62, 0.85, 1]
+    ],
+    edge: [0.36, 0.46, 0.60, 0.26],
+    edgeHeavy: [0.40, 0.52, 0.68, 0.5],
+    clear: [0.031, 0.075, 0.114, 1]
+  }
+
+  const theme = { ...defaultTheme }
+
+  const createShader = (type, source) => {
+    const shader = gl.createShader(type)
+    if (!shader) return null
+    gl.shaderSource(shader, source)
+    gl.compileShader(shader)
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      gl.deleteShader(shader)
+      return null
+    }
+    return shader
+  }
+
+  const createProgram = (vertexSource, fragmentSource) => {
+    const vertexShader = createShader(gl.VERTEX_SHADER, vertexSource)
+    const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentSource)
+    if (!vertexShader || !fragmentShader) return null
+    const program = gl.createProgram()
+    if (!program) return null
+    gl.attachShader(program, vertexShader)
+    gl.attachShader(program, fragmentShader)
+    gl.linkProgram(program)
+    gl.deleteShader(vertexShader)
+    gl.deleteShader(fragmentShader)
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      gl.deleteProgram(program)
+      return null
+    }
+    return program
+  }
+
+  let lineProgram = null
+  let pointProgram = null
+  let lineBuffer = null
+  let pointPositionBuffer = null
+  let pointSizeBuffer = null
+  let linePositionLocation = -1
+  let lineResolutionLocation = null
+  let lineColorLocation = null
+  let pointPositionLocation = -1
+  let pointSizeLocation = -1
+  let pointResolutionLocation = null
+  let pointColorLocation = null
+
+  const initWebGl = () => {
+    if (!canvas) {
+      return false
+    }
+
+    gl = canvas.getContext('webgl2', { alpha: false, antialias: true, depth: false, stencil: false }) ||
+      canvas.getContext('webgl', { alpha: false, antialias: true, depth: false, stencil: false })
+
+    if (!gl) {
+      return false
+    }
+
+    lineProgram = createProgram(
+      'attribute vec2 a_position; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); }',
+      'precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }'
+    )
+
+    pointProgram = createProgram(
+      'attribute vec2 a_position; attribute float a_size; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); gl_PointSize = a_size; }',
+      'precision mediump float; uniform vec4 u_color; void main() { vec2 center = gl_PointCoord - vec2(0.5); float distanceFromCenter = length(center); if (distanceFromCenter > 0.5) discard; float alpha = smoothstep(0.5, 0.38, distanceFromCenter); gl_FragColor = vec4(u_color.rgb, u_color.a * alpha); }'
+    )
+
+    if (!lineProgram || !pointProgram) {
+      return false
+    }
+
+    lineBuffer = gl.createBuffer()
+    pointPositionBuffer = gl.createBuffer()
+    pointSizeBuffer = gl.createBuffer()
+    if (!lineBuffer || !pointPositionBuffer || !pointSizeBuffer) {
+      return false
+    }
+
+    linePositionLocation = gl.getAttribLocation(lineProgram, 'a_position')
+    lineResolutionLocation = gl.getUniformLocation(lineProgram, 'u_resolution')
+    lineColorLocation = gl.getUniformLocation(lineProgram, 'u_color')
+    pointPositionLocation = gl.getAttribLocation(pointProgram, 'a_position')
+    pointSizeLocation = gl.getAttribLocation(pointProgram, 'a_size')
+    pointResolutionLocation = gl.getUniformLocation(pointProgram, 'u_resolution')
+    pointColorLocation = gl.getUniformLocation(pointProgram, 'u_color')
+
+    gl.enable(gl.BLEND)
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+    gl.disable(gl.DEPTH_TEST)
+
+    return true
+  }
+
+  const ensureFloat32Capacity = (buffer, neededLength) => {
+    if (buffer.length >= neededLength) {
+      return buffer
+    }
+    const next = Math.max(neededLength, Math.ceil(buffer.length * 1.6), 1024)
+    return new Float32Array(next)
+  }
+
+  const resizeCanvas = (width, height, ratio) => {
+    viewportWidth = Math.max(320, Number.isFinite(width) ? width : viewportWidth)
+    viewportHeight = Math.max(320, Number.isFinite(height) ? height : viewportHeight)
+    devicePixelRatio = Math.max(1, Number.isFinite(ratio) ? ratio : devicePixelRatio)
+
+    if (!canvas) return
+
+    canvas.width = Math.floor(viewportWidth * devicePixelRatio)
+    canvas.height = Math.floor(viewportHeight * devicePixelRatio)
+    if (gl) {
+      gl.viewport(0, 0, canvas.width, canvas.height)
+    }
+    dirty = true
+    requestRender()
+  }
+
+  const toScreenPoint = (x, y) => {
+    const sx = (x * camera.scale + camera.x) * devicePixelRatio
+    const sy = (y * camera.scale + camera.y) * devicePixelRatio
+    return [sx, sy]
+  }
+
+  const ensureNodeCapacity = (count) => {
+    if (state.x.length >= count) {
+      return
+    }
+
+    const nextCapacity = Math.max(count, Math.ceil(state.x.length * 1.5), 512)
+    state.x = new Float32Array(nextCapacity)
+    state.y = new Float32Array(nextCapacity)
+    state.relevance = new Float32Array(nextCapacity)
+    state.radius = new Float32Array(nextCapacity)
+    state.colorIndex = new Uint8Array(nextCapacity)
+    state.visible = new Uint8Array(nextCapacity)
+    state.highlighted = new Uint8Array(nextCapacity)
+    state.focused = new Uint8Array(nextCapacity)
+    state.selected = new Uint8Array(nextCapacity)
+  }
+
+  const ensureEdgeCapacity = (count) => {
+    if (state.edgeSource.length >= count) {
+      return
+    }
+
+    const nextCapacity = Math.max(count, Math.ceil(state.edgeSource.length * 1.5), 1024)
+    state.edgeSource = new Uint32Array(nextCapacity)
+    state.edgeTarget = new Uint32Array(nextCapacity)
+    state.edgeWeight = new Float32Array(nextCapacity)
+  }
+
+  const nodeRadius = (relevance, kind) => {
+    const base = kind === 'cluster' ? 11.2 : 7.2
+    const modifier = Math.min(7.6, Math.max(0, relevance * 0.78))
+    return base + modifier
+  }
+
+  const segmentColorIndex = (segment) => {
+    const value = String(segment || '')
+    let hash = 0
+    for (let index = 0; index < value.length; index += 1) {
+      hash = ((hash << 5) - hash + value.charCodeAt(index)) | 0
+    }
+    const palette = Array.isArray(theme.nodePalette) && theme.nodePalette.length > 0 ? theme.nodePalette : [theme.node]
+    return Math.abs(hash) % palette.length
+  }
+
+  const loadChunk = (chunk) => {
+    const nodes = Array.isArray(chunk?.nodes) ? chunk.nodes : []
+    const edges = Array.isArray(chunk?.edges) ? chunk.edges : []
+
+    ensureNodeCapacity(nodes.length)
+    nodeIndexById.clear()
+    state.ids = new Array(nodes.length)
+    state.titles = new Array(nodes.length)
+    state.kinds = new Array(nodes.length)
+
+    for (let index = 0; index < nodes.length; index += 1) {
+      const row = nodes[index]
+      const id = typeof row?.[0] === 'string' ? row[0] : ''
+      if (!id) {
+        continue
+      }
+      const title = typeof row?.[1] === 'string' ? row[1] : id
+      const x = Number.isFinite(row?.[2]) ? Number(row[2]) : 0
+      const y = Number.isFinite(row?.[3]) ? Number(row[3]) : 0
+      const segment = typeof row?.[5] === 'string' ? row[5] : ''
+      const kind = row?.[6] === 'cluster' ? 'cluster' : 'node'
+      const relevance = Number.isFinite(row?.[7]) ? Number(row[7]) : 0
+
+      state.ids[index] = id
+      state.titles[index] = title
+      state.kinds[index] = kind
+      state.x[index] = x
+      state.y[index] = y
+      state.relevance[index] = relevance
+      state.radius[index] = nodeRadius(relevance, kind)
+      state.colorIndex[index] = segmentColorIndex(segment || title)
+      state.visible[index] = 0
+      state.highlighted[index] = highlightedIds.has(id) ? 1 : 0
+      state.focused[index] = focusedIds.has(id) ? 1 : 0
+      state.selected[index] = selectedNodeId === id ? 1 : 0
+      nodeIndexById.set(id, index)
+    }
+
+    state.nodeCount = nodes.length
+
+    ensureEdgeCapacity(edges.length)
+    let edgeCount = 0
+    for (let index = 0; index < edges.length; index += 1) {
+      const row = edges[index]
+      const sourceId = typeof row?.[0] === 'string' ? row[0] : ''
+      const targetId = typeof row?.[1] === 'string' ? row[1] : ''
+      const source = nodeIndexById.get(sourceId)
+      const target = nodeIndexById.get(targetId)
+      if (source === undefined || target === undefined || source === target) {
+        continue
+      }
+      state.edgeSource[edgeCount] = source
+      state.edgeTarget[edgeCount] = target
+      state.edgeWeight[edgeCount] = Number.isFinite(row?.[2]) ? Number(row[2]) : 1
+      edgeCount += 1
+    }
+
+    state.edgeCount = edgeCount
+    dirty = true
+  }
+
+  const cullVisibleNodes = () => {
+    const minX = -280
+    const minY = -280
+    const maxX = viewportWidth + 280
+    const maxY = viewportHeight + 280
+
+    for (let index = 0; index < state.nodeCount; index += 1) {
+      const radius = state.radius[index] * camera.scale
+      const [sx, sy] = toScreenPoint(state.x[index], state.y[index])
+      const screenX = sx / devicePixelRatio
+      const screenY = sy / devicePixelRatio
+      state.visible[index] = screenX + radius >= minX && screenX - radius <= maxX && screenY + radius >= minY && screenY - radius <= maxY ? 1 : 0
+    }
+  }
+
+  const drawEdges = () => {
+    if (!gl || state.edgeCount === 0) return
+
+    edgePositionsBuffer = ensureFloat32Capacity(edgePositionsBuffer, state.edgeCount * 4)
+    let cursor = 0
+    let visibleEdges = 0
+    for (let index = 0; index < state.edgeCount; index += 1) {
+      const source = state.edgeSource[index]
+      const target = state.edgeTarget[index]
+      if (state.visible[source] === 0 && state.visible[target] === 0) {
+        continue
+      }
+      const [sx, sy] = toScreenPoint(state.x[source], state.y[source])
+      const [tx, ty] = toScreenPoint(state.x[target], state.y[target])
+      edgePositionsBuffer[cursor] = sx
+      edgePositionsBuffer[cursor + 1] = sy
+      edgePositionsBuffer[cursor + 2] = tx
+      edgePositionsBuffer[cursor + 3] = ty
+      cursor += 4
+      visibleEdges += 1
+    }
+
+    lastVisibleEdges = visibleEdges
+    if (cursor === 0) return
+
+    gl.useProgram(lineProgram)
+    gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, edgePositionsBuffer.subarray(0, cursor), gl.STREAM_DRAW)
+    gl.enableVertexAttribArray(linePositionLocation)
+    gl.vertexAttribPointer(linePositionLocation, 2, gl.FLOAT, false, 0, 0)
+    gl.uniform2f(lineResolutionLocation, canvas.width, canvas.height)
+    gl.uniform4fv(lineColorLocation, state.nodeCount > 4000 ? theme.edge : theme.edgeHeavy)
+    gl.lineWidth(1)
+    gl.drawArrays(gl.LINES, 0, cursor / 2)
+  }
+
+  const drawNodeLayer = (predicate, color, radiusBoost = 1) => {
+    if (!gl || state.nodeCount === 0) return
+
+    pointPositionsBuffer = ensureFloat32Capacity(pointPositionsBuffer, state.nodeCount * 2)
+    pointSizesBuffer = ensureFloat32Capacity(pointSizesBuffer, state.nodeCount)
+    let positionCursor = 0
+    let sizeCursor = 0
+    for (let index = 0; index < state.nodeCount; index += 1) {
+      if (!predicate(index)) continue
+      const [sx, sy] = toScreenPoint(state.x[index], state.y[index])
+      pointPositionsBuffer[positionCursor] = sx
+      pointPositionsBuffer[positionCursor + 1] = sy
+      // Screen-space floor so every node stays a visible dot at any zoom (a low
+      // floor made nodes sub-pixel until zoomed in). Scaled by devicePixelRatio.
+      pointSizesBuffer[sizeCursor] = Math.max(3.0 * devicePixelRatio, state.radius[index] * camera.scale * devicePixelRatio * radiusBoost)
+      positionCursor += 2
+      sizeCursor += 1
+    }
+
+    if (positionCursor === 0) return
+
+    gl.useProgram(pointProgram)
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointPositionBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, pointPositionsBuffer.subarray(0, positionCursor), gl.STREAM_DRAW)
+    gl.enableVertexAttribArray(pointPositionLocation)
+    gl.vertexAttribPointer(pointPositionLocation, 2, gl.FLOAT, false, 0, 0)
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, pointSizesBuffer.subarray(0, sizeCursor), gl.STREAM_DRAW)
+    gl.enableVertexAttribArray(pointSizeLocation)
+    gl.vertexAttribPointer(pointSizeLocation, 1, gl.FLOAT, false, 0, 0)
+
+    gl.uniform2f(pointResolutionLocation, canvas.width, canvas.height)
+    gl.uniform4fv(pointColorLocation, color)
+    gl.drawArrays(gl.POINTS, 0, positionCursor / 2)
+  }
+
+  const drawColoredNodeLayer = (predicate, radiusBoost = 1) => {
+    const palette = Array.isArray(theme.nodePalette) && theme.nodePalette.length > 0 ? theme.nodePalette : [theme.node]
+    for (let colorIndex = 0; colorIndex < palette.length; colorIndex += 1) {
+      drawNodeLayer((index) => predicate(index) && state.colorIndex[index] === colorIndex, palette[colorIndex], radiusBoost)
+    }
+  }
+
+  const clear = () => {
+    if (!gl || !canvas) return
+    gl.viewport(0, 0, canvas.width, canvas.height)
+    gl.clearColor(theme.clear[0], theme.clear[1], theme.clear[2], theme.clear[3])
+    gl.clear(gl.COLOR_BUFFER_BIT)
+  }
+
+  const isCameraInteracting = (now) => now < interactionUntil
+
+  const scheduleSettledRender = (now) => {
+    if (settledRenderTimer) {
+      return
+    }
+    const delay = Math.max(32, interactionUntil - now + 16)
+    settledRenderTimer = setTimeout(() => {
+      settledRenderTimer = null
+      dirty = true
+      requestRender()
+    }, delay)
+  }
+
+  const renderFrame = (now) => {
+    renderScheduled = false
+    if (!dirty) {
+      return
+    }
+
+    const delta = now - lastFrameAt
+    const minInterval = state.nodeCount > 20000 ? 22 : 16
+    if (delta < minInterval) {
+      requestRender()
+      return
+    }
+    lastFrameAt = now
+
+    if (!gl) {
+      return
+    }
+
+    cullVisibleNodes()
+    clear()
+    const cameraInteracting = isCameraInteracting(now)
+    if (!cameraInteracting || state.edgeCount < 1200) {
+      drawEdges()
+    } else {
+      lastVisibleEdges = 0
+      scheduleSettledRender(now)
+    }
+
+    drawColoredNodeLayer(
+      (index) => state.visible[index] === 1 && state.kinds[index] !== 'cluster' && state.selected[index] === 0 && state.highlighted[index] === 0 && state.focused[index] === 0,
+      1
+    )
+
+    drawColoredNodeLayer(
+      (index) => state.visible[index] === 1 && state.kinds[index] === 'cluster' && state.selected[index] === 0,
+      1.15
+    )
+
+    drawNodeLayer(
+      (index) => state.visible[index] === 1 && state.highlighted[index] === 1,
+      theme.nodeHighlight,
+      1.22
+    )
+
+    drawNodeLayer(
+      (index) => state.visible[index] === 1 && state.focused[index] === 1,
+      theme.nodeHighlight,
+      1.12
+    )
+
+    drawNodeLayer(
+      (index) => state.visible[index] === 1 && state.selected[index] === 1,
+      theme.nodeSelected,
+      1.32
+    )
+
+    if (dirty) {
+      host.postMessage({
+        type: 'frame-stats',
+        visibleNodes: (() => {
+          let count = 0
+          for (let index = 0; index < state.nodeCount; index += 1) {
+            if (state.visible[index] === 1) count += 1
+          }
+          return count
+        })(),
+        visibleEdges: lastVisibleEdges
+      })
+      dirty = false
+    }
+  }
+
+  const requestRender = () => {
+    if (renderScheduled) {
+      return
+    }
+    renderScheduled = true
+    const raf = host.requestAnimationFrame
+    if (typeof raf === 'function') {
+      raf(renderFrame)
+      return
+    }
+    setTimeout(() => renderFrame(performance.now()), 16)
+  }
+
+  const setCamera = (nextCamera) => {
+    if (!nextCamera || typeof nextCamera !== 'object') {
+      return
+    }
+    camera.x = Number.isFinite(nextCamera.x) ? Number(nextCamera.x) : camera.x
+    camera.y = Number.isFinite(nextCamera.y) ? Number(nextCamera.y) : camera.y
+    camera.scale = Number.isFinite(nextCamera.scale) ? Math.max(0.0002, Math.min(8, Number(nextCamera.scale))) : camera.scale
+    interactionUntil = performance.now() + 140
+    dirty = true
+    requestRender()
+  }
+
+  const worldAtScreen = (screenX, screenY) => {
+    const x = (screenX - camera.x) / camera.scale
+    const y = (screenY - camera.y) / camera.scale
+    return [x, y]
+  }
+
+  const pickNode = (screenX, screenY) => {
+    const [worldX, worldY] = worldAtScreen(screenX, screenY)
+    let bestIndex = -1
+    let bestDistance = Infinity
+
+    for (let index = 0; index < state.nodeCount; index += 1) {
+      if (state.visible[index] === 0) continue
+      const dx = state.x[index] - worldX
+      const dy = state.y[index] - worldY
+      const distance = Math.hypot(dx, dy)
+      const maxDistance = state.radius[index] * 1.2
+      if (distance <= maxDistance && distance < bestDistance) {
+        bestDistance = distance
+        bestIndex = index
+      }
+    }
+
+    if (bestIndex < 0) {
+      return null
+    }
+
+    return {
+      id: state.ids[bestIndex],
+      title: state.titles[bestIndex],
+      kind: state.kinds[bestIndex],
+      x: state.x[bestIndex],
+      y: state.y[bestIndex]
+    }
+  }
+
+  const setHighlights = (ids) => {
+    highlightedIds.clear()
+    const list = Array.isArray(ids) ? ids : []
+    for (let index = 0; index < list.length; index += 1) {
+      const id = list[index]
+      if (typeof id === 'string' && id.length > 0) {
+        highlightedIds.add(id)
+      }
+    }
+
+    for (let index = 0; index < state.nodeCount; index += 1) {
+      state.highlighted[index] = highlightedIds.has(state.ids[index]) ? 1 : 0
+    }
+    dirty = true
+    requestRender()
+  }
+
+  const setFocus = (ids) => {
+    focusedIds.clear()
+    const list = Array.isArray(ids) ? ids : []
+    for (let index = 0; index < list.length; index += 1) {
+      const id = list[index]
+      if (typeof id === 'string' && id.length > 0) {
+        focusedIds.add(id)
+      }
+    }
+
+    for (let index = 0; index < state.nodeCount; index += 1) {
+      state.focused[index] = focusedIds.has(state.ids[index]) ? 1 : 0
+    }
+    dirty = true
+    requestRender()
+  }
+
+  const setSelected = (id) => {
+    selectedNodeId = typeof id === 'string' && id.length > 0 ? id : null
+    for (let index = 0; index < state.nodeCount; index += 1) {
+      state.selected[index] = selectedNodeId === state.ids[index] ? 1 : 0
+    }
+    dirty = true
+    requestRender()
+  }
+
+  const moveNode = (id, x, y) => {
+    if (typeof id !== 'string' || !Number.isFinite(x) || !Number.isFinite(y)) {
+      return
+    }
+
+    const index = nodeIndexById.get(id)
+    if (index === undefined) {
+      return
+    }
+
+    state.x[index] = x
+    state.y[index] = y
+    dirty = true
+    requestRender()
+  }
+
+  const handleMessage = (payload) => {
+    if (!payload || typeof payload !== 'object') {
+      return
+    }
+
+    if (payload.type === 'init') {
+      canvas = payload.canvas
+      if (payload.theme && typeof payload.theme === 'object') {
+        Object.assign(theme, payload.theme)
+      }
+      const initialized = initWebGl()
+      if (!initialized) {
+        host.postMessage({ type: 'fatal', message: 'WebGL is not available in render worker.' })
+        return
+      }
+      resizeCanvas(payload.width, payload.height, payload.devicePixelRatio)
+      setCamera(payload.camera)
+      requestRender()
+      host.postMessage({ type: 'ready' })
+      return
+    }
+
+    if (payload.type === 'resize') {
+      resizeCanvas(payload.width, payload.height, payload.devicePixelRatio)
+      return
+    }
+
+    if (payload.type === 'camera') {
+      setCamera(payload.camera)
+      return
+    }
+
+    if (payload.type === 'chunk') {
+      loadChunk(payload.chunk)
+      requestRender()
+      return
+    }
+
+    if (payload.type === 'highlight') {
+      setHighlights(payload.ids)
+      return
+    }
+
+    if (payload.type === 'focus') {
+      setFocus(payload.ids)
+      return
+    }
+
+    if (payload.type === 'select') {
+      setSelected(payload.id)
+      return
+    }
+
+    if (payload.type === 'move-node') {
+      moveNode(payload.id, Number(payload.x), Number(payload.y))
+      return
+    }
+
+    if (payload.type === 'pick') {
+      const node = pickNode(
+        Number.isFinite(payload.x) ? Number(payload.x) : 0,
+        Number.isFinite(payload.y) ? Number(payload.y) : 0
+      )
+      host.postMessage({
+        type: 'pick-result',
+        requestId: payload.requestId,
+        node
+      })
+      return
+    }
+
+    if (payload.type === 'pointer') {
+      hoverX = Number.isFinite(payload.x) ? Number(payload.x) : null
+      hoverY = Number.isFinite(payload.y) ? Number(payload.y) : null
+      return
+    }
+  }
+
+  return { handleMessage }
+}
+`;