Figma 스타일 Infinite canvas 구현하기

...
export function useCanvas(){
...
  const render = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    const { width, height } = canvas;
    // Buffer 시작
    // Canvas 전체 초기화
    ctx.fillStyle = '#1a1a2e';
    ctx.fillRect(0, 0, width, height);
    ctx.beginPath();
    ctx.moveTo(30, 50);
    ctx.lineTo(150, 100);
    ctx.stroke(); // MDN의 선 그리기 코드

    // draw anything
    animationFrameRef.current = requestAnimationFrame(render);
  }, [drawGrid]);

  useEffect(() => {
    // RAF 호출 주기는 모니터 주사율과 같음 60fps.
    animationFrameRef.current = requestAnimationFrame(render);
    return () => {
      if (animationFrameRef.current !== null) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, [render]);
  return [canvasRef];

}

'use client';
...
export const CanvasView = () => {
  const [canvasRef] = useInfiniteCanvas();
  return (
    <div className="relative w-full h-full overflow-hidden">
      <canvas
        tabIndex={0} // focus 이벤트를 수신하기 위한
        ref={canvasRef}
        className="block w-full h-full outline-0 cursor-default"
      />
    </div>
  );
};

...
const useCanvas = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const animationFrameRef = useRef<number | null>(null);
  const { drawRectangle, drawBlocks } = useShapes();
  
  const handleResize = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const rect = canvas.getBoundingClientRect();
    // TODO: scale 줌인 줌아웃
    const dpr = window.devicePixelRatio || 1;
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.scale(dpr, dpr);
    }
  }, []);

  const render = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    // Buffer 시작
    // Canvas 전체 초기화
    ctx.fillStyle = '#1a1a2e';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // draw anything
    drawRectangle(ctx, 0, 0, 100, 100);
    drawBlocks(ctx);
    animationFrameRef.current = requestAnimationFrame(render);
  }, [drawRectangle, drawBlocks]);

  

  useEffect(() => {
    // 모니터 가로세로비와 canvas의 크기를 맞춤
    const canvas = canvasRef.current;
    if (canvas) {
    // Resize observer
    const resizeObserver = new ResizeObserver(handleResize);
    const container = canvas.parentElement;
    if (container) {
      resizeObserver.observe(container);
    }
      handleResize();
      render();
    }
  }, [render, handleResize]);
  return { canvasRef };
};

export default useCanvas;

const initialCamera = {
  x: 0, // 시작 위치 x:0 y:0 캔버스의 중앙
  y: 0, 
  z: 1, // 시작 zoom level.(카메라의 높이)
};

// 
export function worldToScreen(
  worldPoint: Point, // 월드 좌표에서 원하는 위치
  camera: CameraState, // 카메라 월드 좌표
  canvasWidth: number, // 캔버스 로컬 크기
  canvasHeight: number,
): Point {
  const centerX = canvasWidth / 2; // 캔버스의 중앙점
  const centerY = canvasHeight / 2;
  return {
    x: (worldPoint.x - camera.x) * camera.z + centerX,
    y: (worldPoint.y - camera.y) * camera.z + centerY,
  };
  // (월드 전역 좌표 - 현재 카메라 위치) * 줌 레벨 + 캔버스 중앙 값
}

const useCanvas = () => {
...
  const [camera, setCameraState] = useState<CameraState>(initialCamera);
  // camera ref. useEffect와 useCallback에 포함시키지 않기 위해 펑션에서는 ref 의 밸류를 가져다 사용한다.
  const cameraRef = useRef(camera);
  cameraRef.current = camera;
...

   /**
   * Pan으로 인한 캔버스 카메라 이동.
   */
  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const rect = canvas.getBoundingClientRect();
      const currentPos = {
        // 클라이언트 좌표 - 캔버스 좌표 = 스크린 스페이스 좌표
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      };
      if (isSpacePressedRef.current && !isPanningRef.current) {
        canvas.style.cursor = 'grab';
      }
      if (isPanningRef.current) {
      // 현재 캔버스 좌표 - 이전 캔버스 좌표 = 유저가 월드 좌표에서 이동한 거리 값
        const deltaX = currentPos.x - lastMousePosRef.current.x; 
        const deltaY = currentPos.y - lastMousePosRef.current.y;
        const cam = cameraRef.current;
        setCamera({
          ...cam,
          x: cam.x - deltaX / cam.z, // 월드 좌표 - 월드 거리 값 / 카메라의 z 레벨
          y: cam.y - deltaY / cam.z,
        });
        lastMousePosRef.current = currentPos;
      }
    },
    // Client Space → Screen Space → World Space
    [setCamera],
  );
 ...
  // 실제 캔버스 렌더러
  const render = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    const { width, height } = canvas;
    // Clear canvas with background color
    ctx.fillStyle = '#1a1a2e'; // --color-bg-primary
    ctx.fillRect(0, 0, width, height);
    const cam = cameraRef.current;
    // 캔버스 컨텍스트 포인터(정사각형 그리기)
    ctx.save();
    // 중요: 월드 좌표가 아니라 스크린 좌표에서 계산되어야 함
    const origin = worldToScreen({ x: 0, y: 0 }, cam, width, height);
    ctx.translate(origin.x, origin.y); // 최상위
    ctx.scale(cam.z, cam.z);
    ctx.fillStyle = 'tomato';
    ctx.fillRect(-50, -50, 100, 100); // 최상위
    ctx.restore();
    //debug info
    drawDebugInfo(ctx, cameraRef.current);
    animationFrameRef.current = requestAnimationFrame(render);
  }, [drawDebugInfo]);

...
}

/**
 * 스크린 좌표를 월드 좌표로 변환
 */
export function screenToWorld(
  screenPoint: Point,
  camera: CameraState,
  canvasWidth: number,
  canvasHeight: number,
): Point {
  const centerX = canvasWidth / 2;
  const centerY = canvasHeight / 2;
  return {
    x: (screenPoint.x - centerX) / camera.z + camera.x,
    y: (screenPoint.y - centerY) / camera.z + camera.y,
  };
}
  ...
  /**
   * 마우스 휠 리스너
   */
  const handleWheel = useCallback(
    (e: WheelEvent) => {
      e.preventDefault();
      const canvas = canvasRef.current;
      if (!canvas) return;
      const rect = canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left; // 클라이언트 기준 마우스 x - 캔버스 기준 시작점 = canvas 좌표 마우스 위치
      const mouseY = e.clientY - rect.top;
      const cssWidth = canvas.clientWidth;
      const cssHeight = canvas.clientHeight;
      // 로컬 좌표 -> 월드 변수
      const worldBefore = screenToWorld(
        { x: mouseX, y: mouseY },
        cameraRef.current,
        cssWidth,
        cssHeight,
      );
      // 새 스케일 계산
      const delta = -e.deltaY * ZOOM_SENSITIVITY;
      const newScale = clamp(cameraRef.current.z * (1 + delta), MIN_SCALE, MAX_SCALE);
      // 월드 카메라 좌표 새롭게 계산
      const tempCamera = { ...cameraRef.current, z: newScale };
      const worldAfter = screenToWorld(
        { x: mouseX, y: mouseY },
        tempCamera,
        cssWidth,
        cssHeight,
      );
      // 마지막 월드 카메라 좌표
      const newCamera: CameraState = {
        x: cameraRef.current.x + (worldBefore.x - worldAfter.x),
        y: cameraRef.current.y + (worldBefore.y - worldAfter.y),
        z: newScale,
      };
      setCamera(newCamera);
    },
    [setCamera],
  );

  /**
   * 그리드 라인
   */
  const drawGrid = useCallback(
    (ctx: CanvasRenderingContext2D, currentCamera: CameraState, width: number, height: number) => {
      const canvas = canvasRef.current;
      if (!ctx || !canvas) return;
      // 중앙점 camera로부터 월드의 시작점과 끝점을 구함.
      const bounds = {
        // 카메라 x(중앙점) - (스케일 없는 캔버스 width / 2 = 왼쪽 혹은 오른쪽 너비) / 줌 레벨
        minX: currentCamera.x - width / 2 / currentCamera.z,
        maxX: currentCamera.x + width / 2 / currentCamera.z,
        minY: currentCamera.y - height / 2 / currentCamera.z,
        maxY: currentCamera.y + height / 2 / currentCamera.z,
      };
      // 그리드가 월드 절대 좌표에 고정되도록 시작점 정렬 (Snapping) - unity 예시? 필요하면 참조할것!
      const startX = Math.floor(bounds.minX / GRID_BASE_SIZE) * GRID_BASE_SIZE;
      const startY = Math.floor(bounds.minY / GRID_BASE_SIZE) * GRID_BASE_SIZE;

      ctx.beginPath();
      ctx.strokeStyle = 'yellow';
      ctx.lineWidth = 1;
      
      // 세로선
      for (let x = startX; x <= bounds.maxX; x += GRID_BASE_SIZE) {
        // (시작점 - 카메라 좌표 = 캔버스 상의 거리) * 카메라 줌 레벨+ (css 너비 / 2) = 맨 처음 뺐던 카메라 시야 값을 다시 더해줌
        const screenX = (x - currentCamera.x) * currentCamera.z + width / 2;
        ctx.moveTo(screenX, 0);
        ctx.lineTo(screenX, height);
      }
      // 가로선
      for (let y = startY; y <= bounds.maxY; y += GRID_BASE_SIZE) {
        const screenY = (y - currentCamera.y) * currentCamera.z + height / 2;
        ctx.moveTo(0, screenY);
        ctx.lineTo(width, screenY);
      }
      ctx.stroke();
    },
    [],

  );
...
  // 실제 캔버스 렌더러
  const render = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    // [mdn](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays) 에 따르면 고해상도 모니터에서는 그에 맞춰서 캔버스 자체의 스케일을 늘려 주어야만 한다!
    // canvas.width와 canvas.height는 이렇게 스케일이 된 스크린 좌표가 반영되기 때문에, 그냥 width가 아니라 clientWidth값으로 위치를 계산해야 함!
    const { clientWidth, clientHeight } = canvas;

    // 리렌더를 위한 전체 클리어
    ctx.fillStyle = '#1a1a2e'; // --color-bg-primary
    ctx.fillRect(0, 0, clientWidth, clientHeight);
    // 그리드
    drawGrid(ctx, camera, clientWidth, clientHeight);
    // 중앙 정사각형
    drawSquare(ctx, { x: 0, y: 0 }, GRID_BASE_SIZE * 4, camera, clientWidth, clientHeight);
    //debug info
    drawDebugInfo(ctx, camera);

    animationFrameRef.current = requestAnimationFrame(render);

  }, [drawDebugInfo, camera, drawGrid, drawSquare]);