[React로 화이트보드] Canvas Color Picking + 선택된 요소 변형 동시에 적용하기

현재 두가지의 picking 기능을 구현해야 하는 상황이다. 대략적인 HTML코드를 살펴보자.

<div className="board">
	{drawElements.map(element) => {
    	return <DrawElementCanvas el={element}
    }}
	<div className="canvas_container">
    	<canvas className="picking_draw_canvas" />
        <canvas className="main_canvas" />
        <canvas className="picking_canvas" />
    </div>
</div>

 

가장 앞쪽에 있는 Picking_Canvas에 drawElement의 image 데이터를 그려주고, 실제 화면에 보여지는 element들은 각각의 Canvas를 가지며 drawElements로 관리된다.

 

현재 drawElement에 대한 Transform을 처리해야 하는 상황인데 선택되는 부분에 따라서 translate, rotate, scale을 구현해야 하는 상황이다.

DrawElementCanvas Component 내부에서 edit UI를 생성하는 것은 간단하나 문제는 가장 앞쪽에 존재하는 picking_canvas때문에 edit UI에서 마우스 이벤트를 받기 어려운 상황이다.

 

이를 해결하기 위해 picking_canvas 앞쪽에 edit ui 하나를 생성하고 edit ui의 layout에 대한 데이터를 전역상태로 관리하기로 결정했다.

 

// board.tsx

<div className="board">
        {drawElements.map((element) => {
          return <DrawElementCanvas el={element} />;
        })}
        <div className="canvas_container">
          <canvas className="picking_draw_canvas" ref={pickingDrawCanvas} />
          <canvas className="main_canvas" ref={mainCanvas} />
          <canvas className="picking_canvas" ref={pickingCanvas} />
          <div className="selection_layout" ref={selectionLayoutRef}>
            <div className="transform_tool_container">
              <div className="scale_tool_1" />
              <div className="scale_tool_2" />
              <div className="scale_tool_3" />
              <div className="scale_tool_4" />
              <div className="scale_tool_5" />
              <div className="scale_tool_6" />
              <div className="scale_tool_7" />
              <div className="scale_tool_8" />
              <div
                className="rotate_tool"
                onMouseDown={() => setTransformTool(TransformToolType.ROTATE)}
                onMouseUp={() => setTransformTool(TransformToolType.NONE)}
              />
            </div>
          </div>
        </div>
</div>

 

zustand를 사용했으며 현재 선택된 drawElementCanvas Component에서 selection layout에 대한 정보를 전달해줬다.

 

// store.ts

type TransformTool = {
  tool: TransformToolType;
};

type TransformToolActions = {
  setTransformTool: (tool: TransformToolType) => void;
  getTransformTool: () => TransformToolType;
};

export const useTransformToolStore = create<
  TransformTool & TransformToolActions
>((set, get) => ({
  tool: TransformToolType.MOVE,
  setTransformTool: (tool: TransformToolType) => set({ tool: tool }),
  getTransformTool: () => get().tool,
}));