PPT-style Multi-selection, Group Move, and Batch Deletion for Cornerstone Annotations

const handleMouseDown = (e) => {
  if (e.button !== 0) return; // 좌클릭만 허용
  if (choiceTool !== 'default') return; // 선택/기본 모드일 때만 드래그 박스 허용

  // 사용자가 특정 객체를 잡고 개별적으로 옮기려는 의도라면, 드래그 박스 생성을 차단
  let isClickingOnAnnotation = false;
  const tools = cornerstoneTools.store.state.tools;
  
  tools.forEach((tool) => {
    const toolState = cornerstoneTools.getToolState(element, tool.name);
    if (toolState && toolState.data) {
      if (toolState.data.find(anno => anno.active)) isClickingOnAnnotation = true;
    }
  });

  if (isClickingOnAnnotation) return; 
  isMouseDownRef.current = true; 
};

if (isFullyContained) {
  anno.selected = true; // active 대신 selected 사용
  anno.color = '#00FF00'; 
  needsUpdate = true;
} else {
  if (!isMultiSelect && anno.selected) {
    anno.selected = false;
    delete anno.color;
    needsUpdate = true;
  }
}

// mousedown 핸들러 내부
// 조건: 이미 선택된 그룹 위를 클릭했고, 핸들을 직접 누른 게 아닐 때
if (clickedAnnotation?.selected && allSelectedAnnos.length > 1 && !isMultiSelect && !isHandleClicked) {
  e.stopImmediatePropagation();
  e.preventDefault();

  const startImagePt = cornerstone.pageToPixel(element, e.pageX, e.pageY);
  let hasMoved = false;

  // [핵심] 이동 전 원본 좌표를 딥카피로 보존
  const initialStates = allSelectedAnnos.map(anno => ({
    anno,
    origHandles: JSON.parse(JSON.stringify(anno.handles))
  }));

  // 핸들 구조를 재귀적으로 순회하며 좌표를 이동시키는 함수
  // Freehand처럼 점이 배열인 경우와 start/end처럼 단일 객체인 경우를 모두 처리
  const shiftHandles = (orig, target, dx, dy) => {
    Object.keys(orig).forEach(key => {
      if (key === 'boundingBox') return;
      if (Array.isArray(orig[key])) {
        orig[key].forEach((pt, i) => {
          if (typeof pt.x === 'number') {
            target[key][i].x = pt.x + dx;
            target[key][i].y = pt.y + dy;
          }
        });
      } else if (orig[key] && typeof orig[key] === 'object') {
        if (typeof orig[key].x === 'number') {
          target[key].x = orig[key].x + dx;
          target[key].y = orig[key].y + dy;
        }
        shiftHandles(orig[key], target[key], dx, dy);
      }
    });
  };

  const handleGroupMove = (moveEvent) => {
    hasMoved = true;
    const currentImagePt = cornerstone.pageToPixel(element, moveEvent.pageX, moveEvent.pageY);
    const dx = currentImagePt.x - startImagePt.x;
    const dy = currentImagePt.y - startImagePt.y;

    // 원본 좌표(origHandles) 기준으로 delta를 더해 현재 위치를 갱신
    initialStates.forEach(({ anno, origHandles }) => {
      shiftHandles(origHandles, anno.handles, dx, dy);
    });
    cornerstone.updateImage(element);
  };

  const handleGroupUp = () => {
    window.removeEventListener('mousemove', handleGroupMove);
    window.removeEventListener('mouseup', handleGroupUp);

    // 실제로 움직이지 않았다면 → 클릭으로 간주하여 다른 어노테이션의 선택을 해제
    if (!hasMoved) {
      allSelectedAnnos.forEach(anno => {
        if (anno !== clickedAnnotation) {
          anno.selected = false;
          delete anno.color;
        }
      });
      cornerstone.updateImage(element);
    }
  };

  window.addEventListener('mousemove', handleGroupMove);
  window.addEventListener('mouseup', handleGroupUp);
  return; // 이후 단일 선택 로직이 실행되지 않도록 차단
}

const deletedSelectedAnnotation = () => {
  const wadoElements = _getWadoElements();

  wadoElements.forEach((value) => {
    const element = value.element;
    const tools = cornerstoneTools.store.state.tools;
    let isDeleted = false;

    tools.forEach((tool) => {
      const toolState = cornerstoneTools.getToolState(element, tool.name);
      if (toolState && toolState.data) {
        // 인덱스 밀림을 방지하기 위해 배열을 뒤에서부터 순회하며 삭제
        for (let i = toolState.data.length - 1; i >= 0; i--) {
          if (toolState.data[i].selected) {
            toolState.data.splice(i, 1);
            isDeleted = true;
          }
        }
      }
    });

    if (isDeleted) cornerstone.updateImage(element);
  });
};

// 이 함수를 전역 keydown 이벤트의 'Delete' 키에 바인딩하여 사용합니다.