Function handleStageWheel

components/CanvasComponent.tsx:182–209

(e: KonvaEventObject<WheelEvent>)

  };

  const handleStageWheel = (e: KonvaEventObject<WheelEvent>) => {
    e.evt.preventDefault();

    const stage = stageRef.current;
    if (!stage) return;

    const pointer = stage.getPointerPosition();
    if (!pointer) return;

    const oldScale = stageScale;
    const direction = e.evt.deltaY > 0 ? -1 : 1;
    const newScaleRaw =
      direction > 0 ? oldScale * SCALE_BY : oldScale / SCALE_BY;
    const newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScaleRaw));

    const mousePointTo = {
      x: (pointer.x - stagePosition.x) / oldScale,
      y: (pointer.y - stagePosition.y) / oldScale,
    };

    const newPos = {
      x: pointer.x - mousePointTo.x * newScale,
      y: pointer.y - mousePointTo.y * newScale,
    };

    setStageScale(newScale);
    setStagePosition(newPos);
  };

  const handleStageDragMove = (e: KonvaEventObject<DragEvent>) => {
    const stage = e.target as Konva.Stage;