Figma와 Konva의 캔버스 렌더링 방식 비교

[C++ 렌더러] → [Emscripten] → [WebAssembly] → [WebGL API] → [GPU]

interface Camera {
  x: number;   // 팬 오프셋 X
  y: number;   // 팬 오프셋 Y
  z: number;   // 줌 레벨 (1 = 100%, 2 = 200%)
}

// 화면 클릭 위치 → 문서 내 위치
function screenToCanvas(screenPoint: Point, camera: Camera): Point {
  return {
    x: screenPoint.x / camera.z - camera.x,
    y: screenPoint.y / camera.z - camera.y,
  };
}

// 문서 내 위치 → 화면에 그릴 위치
function canvasToScreen(canvasPoint: Point, camera: Camera): Point {
  return {
    x: (canvasPoint.x + camera.x) * camera.z,
    y: (canvasPoint.y + camera.y) * camera.z,
  };
}

캔버스 좌표 (1500, 2000)
    ↓ Camera Transform
View 좌표
    ↓ Projection
Clip Space (-0.3, 0.5)  ← WebGL이 이해하는 좌표
    ↓ Viewport Transform
Screen 픽셀 (672, 270)

Stage (컨테이너)
└── Layer (캔버스)
    ├── Group
    │   ├── Rect
    │   └── Text
    └── Circle

<div class="konvajs-content">
  <!-- 보이는 캔버스 -->
  <canvas width="800" height="600"></canvas>
  <!-- 숨겨진 캔버스 -->
  <canvas width="800" height="600" style="display:none"></canvas>
</div>

function getIntersection(x: number, y: number) {
  // Hit Canvas에서 픽셀 색상 읽기
  const pixel = hitCanvasContext.getImageData(x, y, 1, 1).data;
  const colorKey = rgbToHex(pixel[0], pixel[1], pixel[2]);

  // 색상으로 Shape 찾기
  return shapeRegistry[colorKey];
}

const backgroundLayer = new Konva.Layer();
const animationLayer = new Konva.Layer();

// 애니메이션할 때 animationLayer만 다시 그림
function animate() {
  movingShape.x(movingShape.x() + 1);
  animationLayer.batchDraw();  // backgroundLayer는 건드리지 않음
  requestAnimationFrame(animate);
}

const layer1 = new Konva.Layer();
const layer2 = new Konva.Layer();

const rect = new Konva.Rect({ ... });
const circle = new Konva.Circle({ ... });

layer1.add(rect);
layer2.add(circle);

// Transformer는 어느 Layer에?
const transformer = new Konva.Transformer();
layer1.add(transformer);  // layer1에 추가

// rect는 선택 가능, circle은?
transformer.nodes([rect, circle]);  // 문제 발생

function selectNodes(nodes: Konva.Node[]) {
  nodes.forEach(node => {
    node._originalParent = node.getParent();
    node.moveTo(selectionLayer);
  });
  transformer.nodes(nodes);
}

function deselectNodes(nodes: Konva.Node[]) {
  nodes.forEach(node => {
    node.moveTo(node._originalParent);
  });
}

const layer = new Konva.Layer();

const backgroundGroup = new Konva.Group();
const shapesGroup = new Konva.Group();
const textGroup = new Konva.Group();

layer.add(backgroundGroup, shapesGroup, textGroup);

// 같은 Layer 안이니까 Transformer가 잘 동작
const transformer = new Konva.Transformer();
layer.add(transformer);

void main() {
  float dist = distance(gl_FragCoord.xy, u_center);
  float edge = fwidth(dist);
  float alpha = 1.0 - smoothstep(u_radius - edge, u_radius + edge, dist);
  gl_FragColor = vec4(u_color.rgb, u_color.a * alpha);
}

// 1. Hit Testing - 클릭한 게 뭔지 판별
function hitTest(mouseX: number, mouseY: number, shapes: Shape[]): Shape | null {
  for (let i = shapes.length - 1; i >= 0; i--) {
    const shape = shapes[i];
    if (shape.type === 'rect') {
      if (mouseX >= shape.x && mouseX <= shape.x + shape.width &&
          mouseY >= shape.y && mouseY <= shape.y + shape.height) {
        return shape;
      }
    }
    // 원, 회전된 도형 등 케이스별로 추가...
  }
  return null;
}

// 2. 다중 선택
// 3. 드래그 이동
// 4. 리사이즈 핸들 8개 (nw, n, ne, e, se, s, sw, w)
// 5. 회전
// 6. Undo/Redo
// 7. 스냅핑, 가이드라인
// ...

WebGL 직접 구현:
├── 렌더링 (Shader, Buffer)     ~500줄
├── Hit Testing                 ~200줄
├── Selection Manager           ~300줄
├── Drag/Move                   ~200줄
├── Resize                      ~400줄
├── Rotate                      ~200줄
└── Undo/Redo, 기타             ~800줄
                         총 ~2,600줄 이상

Konva 사용:
const tr = new Konva.Transformer();
tr.nodes([shape1, shape2]);
                         총 ~50줄

const rect = new PIXI.Graphics();
rect.beginFill(0xff0000);
rect.drawRect(0, 0, 100, 100);
rect.eventMode = 'static';

// 이벤트는 됨
rect.on('pointerdown', () => console.log('클릭!'));

// 이런 건 없음
rect.draggable = true;           // ❌
new PIXI.Transformer([rect]);    // ❌

순수 WebGL:  렌더링 + 이벤트 + 에디터 로직 전부 직접
PixiJS:      렌더링 + 이벤트는 해결, 에디터 로직은 직접
Konva:       렌더링 + 이벤트 + Transformer까지 제공