230628 - Bugfix & Improve DICOM viewer feature

[dusunax]

230628 - Bugfix & Improve DICOM viewer feature

• [prev_230627] #15
• [feat] Improve DICOM viewer
  • navigate through slices: using the keyboard (left, right, up, down) buttons.
  • organizing the tool box (annotate: on left click, other tools: on right click) + adding rotation and scale overlay.
• [bugfix] remove the three GUI when leave 3D route.

🗂 Works 작업내용

[feat] Improve DICOM viewer feature.

[bugfix] remove the three GUI when leave 3D route.

---

[feat] Improve DICOM viewer feature. 📌

Keyboard indexing

Key	Action
Left	Decrease by 1
Right	Increase by 1
Up	Decrease by limit
Down	Increase by limit

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === "ArrowLeft") {
    setImageIndex((prevIndex) => {
      const newIndex = prevIndex > 0 ? prevIndex - 1 : prevIndex;
      return newIndex;
    });
  } else if (event.key === "ArrowRight") {
    setImageIndex((prevIndex) => {
      const newIndex =
        prevIndex + 1 < itemSrcArray.length ? prevIndex + 1 : prevIndex;
      return newIndex;
    });
  } else if (event.key === "ArrowUp") {
    event.preventDefault();

    setImageIndex((prevIndex) => {
      const newIndex =
        prevIndex - rowLimit + 1 > 0 ? prevIndex - rowLimit : prevIndex;
      return newIndex;
    });
  } else if (event.key === "ArrowDown") {
    event.preventDefault();

    setImageIndex((prevIndex) => {
      const newIndex =
        prevIndex + rowLimit < itemSrcArray.length
          ? prevIndex + rowLimit
          : prevIndex;
      return newIndex;
    });
  }
};

Organizing Tools

• add roate tool, scale overlay
• and sort by

Tool	Action
Annotate	on left click
Other Tools	on right click
Overlay	Scale overlay

/** 도구 비활성화 */
const setDeactivateToolByIndex = (index: number, tools: Tool[]): void => {
  cornerstoneTools.setToolPassive(tools[index].name);
};

/** overlay 토글 */
const overlayToggleHandler = () => {
  if (overlayToggle) {
    setDeactivateToolByIndex(0, OVERLAY_TOOLS);
  } else {
    setToolsByIndex(0, OVERLAY_TOOLS, -1);
  }
  setOverlayToggle(!overlayToggle);
};

[bugfix] remove the three GUI when leave 3D route. 📌

• bugfix !
• store the GUI in a ref, and cleanup using destroy() method when unmount (leave 3D route).

  return () => {
  renderer && renderer.dispose();
  GUIRef.current?.destroy();
  };

[dusunax]

Close issue and move to the next documentation.

• [next_230628~29] #17