230603 - Refactor Components and Hook, Finish Tool Selection Box

[dusunax]

230603 - Refactor Components and Hook, Finish Tool Selection Box

• [prev_230530] https://github.com/dusunax/dicom-viewer/issues/1#issuecomment-1568791938
• [Refactor] refactor component & custom hook
• [Feature] finish tool select box

---

🗂 Works 작업내용

1. Refactor Example Component & Custom Hook.

• src\example\ExampleComponent.tsx
  • src\example\components\CurrentTabComponent.tsx
  • src\example\components\TabNavigation.tsx
• src\example\hooks\useCornerstone.ts

  2. Finish to build tools select box.

• src\example\render\StackOfImagesWithToolsBox.tsx

---

1. Refactor Example Component & useCornerstone Custom Hook. ✨

📌 Refactor Example Component

src\example\ExampleComponent.tsx

• Separate the component into CurrentTabComponent.tsx and TabNavigation.tsx components

  export default function ExampleComponent() {
  const [tabIndex, setTabIndex] = useState(0);
  
  useEffect(() => {
  addCornerstoneExternals();
  }, []);
  
  return (
  <div className="text-center">
    <h1 className="py-2">with Cornerstone.js</h1>
  
    {/* 탭 리스트, tab list */}
    <TabNavigation setTabIndex={setTabIndex} />
  
    {/* 각 탭 컴포넌트 */}
    <CurrentTabComponent tabIndex={tabIndex} />
  </div>
  );
  }

• TabNavigation.tsx : examples tab nav
• CurrentTabComponent.tsx

  
  import StackOfImages from "../render/StackOfImages";
  import StackOfImagesWithChangeIndex from "../render/StackOfImagesWithChangeIndex";
  import StackOfImagesWithPanAndRotate from "../render/StackOfImagesWithPanAndRotate";
  import StackOfImagesWithToolsBox from "../render/StackOfImagesWithToolsBox";

export default function CurrentTabComponent({ tabIndex, }: { tabIndex: number; }) { const exampleComponents = [ {component: }, ... ];

return <>{exampleComponents[tabIndex].component}</>; }

### 📌 Refactor `useCornerstone.ts` Custom Hook.

src\example\hooks\useCornerstone.ts

- check out rest of the tools from [cornerstone document](https://www.cornerstonejs.org/docs/examples/)
  - add to `LEFT_MOUSE_TOOLS`,  `RIGHT_MOUSE_TOOLS`
- refactor types from `src\example\models\cornerstone.ts`
- current custom hook's return type
  - todo: After implementing the functionality, move the constants to the `/constants` folder. 
```tsx
function useCornerstone () : {
    imageIndex: number;
    setImageIndex: React.Dispatch<React.SetStateAction<number>>;
    itemSrcArray: string[];

    ITEM_LENGTH: number;
    EXAMPLE_OPTION: ExampleOption[];
    LEFT_MOUSE_TOOLS: ExampleOption[];
    RIGHT_MOUSE_TOOLS: ExampleOption[];
    OVERLAY_TOOLS: ExampleOption[];

    itemLayers: Layer[];
    colorMapList: {
        id: any;
        key: any;
    }[]
}

📌 [UI] add loading state & spinner

• use useAsync from react-use package, show text and spiner at loading

{loadImageOptionState.loading && (
  <div className="my-4 flex items-center justify-center">
    loading...
    <Spinner />
  </div>
)}

---

2. Finish to build tools select box. ✨

📌 from documentation

https://tools.cornerstonejs.org/api/#Tools.EraserTool https://tools.cornerstonejs.org/examples/

📌 keep the tools that are functioning properly in the menu.

• Zoom, Wwwc

  

• Pan, Magnify, Angle

  

• Probe, ArrowAnnotation

  

• TextMarker, FreehandRoi

  

• Length

  

📌 refactor setToolsByIndex function

• to handle different tools array.

• to setting both mouse button.

  /** set tools: 도구를 설정합니다.
  * @method setToolsByIndex
  *
  * @param  {number} index  target index of the tools list.
  * @param  {Tool} tools  tools list. ex) LEFT_MOUSE_TOOLS, RIGHT_MOUSE_TOOLS...
  * @param  {number} mouseButtonMask 1: left mouse button, 2: right mouse button
  */
  const setToolsByIndex = (
  index: number,
  tools: Tool[],
  mouseButtonMask: number
  ) => {
  const element = elementRef.current;
  if (!element) return;
  
  const toolStateManager =
    cornerstoneTools.getElementToolStateManager(element);
  toolStateManager.clear(element);
  
  cornerstoneTools.addTool(tools[index].func, {
    configuration: tools[index].config,
  });
  cornerstoneTools.setToolActive(tools[index].name, {
    mouseButtonMask: mouseButtonMask,
  });
  };

  • cornerstoneTools.getElementToolStateManager
• add toolStateManager.clear() function for prevent to adding tools multiple times.

  const toolStateManager = cornerstoneTools.getElementToolStateManager(element);
  toolStateManager.clear(element);

---

todo 👩‍💻

1. change `setImageIndex` function from `src\example\render\StackOfImages.tsx` to Stack Scroll MouseWheel Tool.
2. fix `element not enabled` error at first loading.

[dusunax]

⛔ had Issue on SharedArrayBuffer

ERROR: SharedArrayBuffer is NOT supported in your browser. #3

and my goal is implement the level 2 by this weekend. so skip 3D volume part and proceed directly to Level 2. => Instead of using calculated 3D volume data, use an exported .ply file.

---

~Todo~

• [ ] ~Print 3D volume.~
• [ ] ~Implement tool group.~