refactor selection in canvas provider

src/core/providers/canvas/canvas.model.ts

@@ -2,12 +2,7 @@ import { ShapeModel, ShapeRefs, ShapeType } from '@/core/model';
 import Konva from 'konva';
 import { Node, NodeConfig } from 'konva/lib/Node';
 
-export interface CanvasContextModel {
-  shapes: ShapeModel[];
-  setShapes: React.Dispatch<React.SetStateAction<ShapeModel[]>>;
-  scale: number;
-  setScale: React.Dispatch<React.SetStateAction<number>>;
-
+export interface SelectionInfo {
   transformerRef: React.RefObject<Konva.Transformer>;
   shapeRefs: React.MutableRefObject<ShapeRefs>;
   handleSelected: (id: string, type: ShapeType) => void;
@@ -20,3 +15,12 @@ export interface CanvasContextModel {
   selectedShapeId: string;
   selectedShapeType: ShapeType | null;
 }
+
+export interface CanvasContextModel {
+  shapes: ShapeModel[];
+  setShapes: React.Dispatch<React.SetStateAction<ShapeModel[]>>;
+  scale: number;
+  setScale: React.Dispatch<React.SetStateAction<number>>;
+
+  selectionInfo: SelectionInfo;
+}

src/core/providers/canvas/canvas.provider.tsx

@@ -12,15 +12,7 @@ export const CanvasProvider: React.FC<Props> = props => {
   const [shapes, setShapes] = React.useState<ShapeModel[]>([]);
   const [scale, setScale] = React.useState(1);
 
-  const {
-    shapeRefs,
-    transformerRef,
-    handleSelected,
-    handleClearSelection,
-    selectedShapeRef,
-    selectedShapeId,
-    selectedShapeType,
-  } = useSelection(shapes);
+  const selectionInfo = useSelection(shapes);
 
   return (
     <CanvasContext.Provider
@@ -29,13 +21,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         setShapes,
         scale,
         setScale,
-        shapeRefs,
-        transformerRef,
-        handleSelected,
-        handleClearSelection,
-        selectedShapeRef,
-        selectedShapeId,
-        selectedShapeType,
+        selectionInfo,
       }}
     >
       {children}

src/core/providers/canvas/use-selection.hook.ts

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import Konva from 'konva';
 import { ShapeModel, ShapeRefs, ShapeType } from '@/core/model';
+import { SelectionInfo } from './canvas.model';
 
-export const useSelection = (shapes: ShapeModel[]) => {
+export const useSelection = (shapes: ShapeModel[]): SelectionInfo => {
   const transformerRef = useRef<Konva.Transformer>(null);
   const shapeRefs = useRef<ShapeRefs>({});
   const selectedShapeRef = useRef<Konva.Node | null>(null);

src/pods/canvas/canvas.pod.tsx

@@ -16,18 +16,17 @@ import {
 import { ShapeModel } from '@/core/model';
 
 export const CanvasPod = () => {
+  const { shapes, setShapes, scale, selectionInfo } = useCanvasContext();
+
   const {
-    shapes,
-    setShapes,
-    scale,
     shapeRefs,
     transformerRef,
     handleSelected,
     handleClearSelection,
     selectedShapeRef,
     selectedShapeId,
     selectedShapeType,
-  } = useCanvasContext();
+  } = selectionInfo;
 
   const { isDraggedOver, dropRef } = useDropShape();
   const { stageRef } = useMonitorShape(dropRef, setShapes);