Function render

dashboard/graph/src/GraphCanvas.tsx:159–315

()

    }

    function render() {
      const sim = simRef.current;
      const theme = (themeRef.current ??= readTheme(canvas));
      const rect = sizeRef.current;
      const dpr = window.devicePixelRatio || 1;
      if (canvas.width !== Math.round(rect.width * dpr) || canvas.height !== Math.round(rect.height * dpr)) {
        canvas.width = Math.round(rect.width * dpr);
        canvas.height = Math.round(rect.height * dpr);
      }
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, rect.width, rect.height);
      if (!sim) return;

      const camera = cameraRef.current;
      ctx.translate(rect.width / 2, rect.height / 2);
      ctx.scale(camera.k, camera.k);
      ctx.translate(-camera.x, -camera.y);

      const { selectedId: selId, pathIds: path, focusId: focId } = propsRef.current;
      const hover = hoverRef.current;
      const highlight = neighborhood(hover);
      const pathSet = new Set(path);
      const pathPairs = new Set<string>();
      for (let i = 0; i + 1 < path.length; i++) {
        pathPairs.add(`${path[i]}>${path[i + 1]}`);
        pathPairs.add(`${path[i + 1]}>${path[i]}`);
      }

      // --- edges ---
      for (const edge of sim.edges) {
        const onPath = pathPairs.has(`${edge.source}>${edge.target}`);
        const inHighlight =
          !highlight || (highlight.has(edge.source) && highlight.has(edge.target));
        const style = edgeStyle(edge.kind, theme);
        ctx.globalAlpha = inHighlight || onPath ? 1 : DIM_ALPHA;
        ctx.strokeStyle = onPath ? theme.path : style.color;
        ctx.lineWidth = (onPath ? 2.4 : style.width) / Math.sqrt(camera.k);
        ctx.setLineDash(onPath ? [] : style.dash);
        ctx.beginPath();
        ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y);
        ctx.lineTo(edge.targetNode.x, edge.targetNode.y);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillStyle = onPath ? theme.path : style.color;
        drawArrow(edge, camera);
      }

      // --- nodes ---
      for (const node of sim.nodes) {
        const isSelected = node.id === selId;
        const isHovered = hover ? node.id === hover.id : false;
        const onPath = pathSet.has(node.id);
        const inHighlight = !highlight || highlight.has(node.id);
        ctx.globalAlpha = inHighlight || onPath ? 1 : DIM_ALPHA;

        ctx.beginPath();
        ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
        ctx.fillStyle = theme.family[kindFamily(node.kind)] || theme.family.other;