Function applyZoomAtClientPoint

packages/client/src/app/AppShell.tsx:2376–2418

(
    nextScale: number,
    clientX: number,
    clientY: number,
  )

  }

  function applyZoomAtClientPoint(
    nextScale: number,
    clientX: number,
    clientY: number,
  ) {
    const canvasRect = outerCanvasRef.current?.getBoundingClientRect();
    if (!canvasRect) {
      applyZoom(
        nextScale,
        {
          x: panRef.current.x,
          y: panRef.current.y + autoViewportOffsetY,
        },
        false,
      );
      return;
    }

    const currentZoom = effectiveZoomRef.current;
    const currentPan = panRef.current;
    const clampedScale = clampZoom(nextScale, fitScale);
    const ratio = clampedScale / Math.max(currentZoom, 0.001);
    const cursor = {
      x: clientX - (canvasRect.left + canvasRect.width / 2),
      y: clientY - (canvasRect.top + canvasRect.height / 2),
    };
    const currentVisualPan = {
      x: currentPan.x,
      y: currentPan.y + autoViewportOffsetY,
    };
    const nextVisualPan = {
      x: cursor.x - (cursor.x - currentVisualPan.x) * ratio,
      y: cursor.y - (cursor.y - currentVisualPan.y) * ratio,
    };
    applyZoom(
      clampedScale,
      {
        x: nextVisualPan.x,
        y: nextVisualPan.y,
      },
      false,
    );
  }

  useEffect(() => {
    applyZoomAtClientPointRef.current = applyZoomAtClientPoint;