refactor: removes non-useful hooks

src/components/DragAndDrop/DragAndDrop.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box } from '@mui/material';
 import { Coords, TileOriginEnum, IconInput } from 'src/types';
-import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
+import { getTilePosition } from 'src/utils';
 import { useIcon } from 'src/hooks/useIcon';
 
 interface Props {
@@ -10,12 +10,11 @@ interface Props {
 }
 
 export const DragAndDrop = ({ icon, tile }: Props) => {
-  const { getTilePosition } = useGetTilePosition();
   const { iconComponent } = useIcon(icon.id);
 
   const tilePosition = useMemo(() => {
     return getTilePosition({ tile, origin: TileOriginEnum.BOTTOM });
-  }, [tile, getTilePosition]);
+  }, [tile]);
 
   return (
     <Box

src/components/SceneLayers/ConnectorLabels/ConnectorLabel.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box, Typography } from '@mui/material';
 import { Connector } from 'src/types';
-import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
-import { connectorPathTileToGlobal } from 'src/utils';
+import { connectorPathTileToGlobal, getTilePosition } from 'src/utils';
 import { PROJECTED_TILE_SIZE } from 'src/config';
 import { useUiStateStore } from 'src/stores/uiStateStore';
 
@@ -11,7 +10,6 @@ interface Props {
 }
 
 export const ConnectorLabel = ({ connector }: Props) => {
-  const { getTilePosition } = useGetTilePosition();
   const zoom = useUiStateStore((state) => {
     return state.zoom;
   });
@@ -23,7 +21,7 @@ export const ConnectorLabel = ({ connector }: Props) => {
     return getTilePosition({
       tile: connectorPathTileToGlobal(tile, connector.path.rectangle.from)
     });
-  }, [connector.path, getTilePosition]);
+  }, [connector.path]);
 
   return (
     <Box

src/components/SceneLayers/Nodes/Node/Node.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Box, Typography, useTheme } from '@mui/material';
 import { Node as NodeI, TileOriginEnum } from 'src/types';
 import { PROJECTED_TILE_SIZE } from 'src/config';
-import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
+import { getTilePosition } from 'src/utils';
 import { useIcon } from 'src/hooks/useIcon';
 import { MarkdownEditor } from 'src/components/MarkdownEditor/MarkdownEditor';
 import { LabelContainer } from './LabelContainer';
@@ -14,7 +14,6 @@ interface Props {
 
 export const Node = ({ node, order }: Props) => {
   const theme = useTheme();
-  const { getTilePosition } = useGetTilePosition();
   const { iconComponent } = useIcon(node.icon);
 
   const position = useMemo(() => {
@@ -22,7 +21,7 @@ export const Node = ({ node, order }: Props) => {
       tile: node.tile,
       origin: TileOriginEnum.BOTTOM
     });
-  }, [node.tile, getTilePosition]);
+  }, [node.tile]);
 
   const description = useMemo(() => {
     if (node.description === undefined || node.description === '<p><br></p>')

src/components/SceneLayers/Rectangles/Rectangle.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Coords } from 'src/types';
 import { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';
-import { useUiStateStore } from 'src/stores/uiStateStore';
 import { getColorVariant } from 'src/utils';
 
 interface Props {
@@ -11,19 +10,15 @@ interface Props {
 }
 
 export const Rectangle = ({ from, to, color }: Props) => {
-  const zoom = useUiStateStore((state) => {
-    return state.zoom;
-  });
-
   return (
     <IsoTileArea
       from={from}
       to={to}
       fill={color}
-      cornerRadius={22 * zoom}
+      cornerRadius={22}
       stroke={{
         color: getColorVariant(color, 'dark', { grade: 2 }),
-        width: 1 * zoom
+        width: 1
       }}
     />
   );

src/components/TransformControlsManager/TransformControls.tsx

@@ -3,8 +3,11 @@ import { Coords } from 'src/types';
 import { Svg } from 'src/components/Svg/Svg';
 import { TRANSFORM_CONTROLS_COLOR } from 'src/config';
 import { useIsoProjection } from 'src/hooks/useIsoProjection';
-import { getBoundingBox, outermostCornerPositions } from 'src/utils';
-import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
+import {
+  getBoundingBox,
+  outermostCornerPositions,
+  getTilePosition
+} from 'src/utils';
 import { TransformAnchor } from './TransformAnchor';
 
 interface Props {
@@ -26,7 +29,6 @@ export const TransformControls = ({
     from,
     to
   });
-  const { getTilePosition } = useGetTilePosition();
 
   const anchorPositions = useMemo<Coords[]>(() => {
     if (!showCornerAnchors) return [];
@@ -40,7 +42,7 @@ export const TransformControls = ({
     });
 
     return cornerPositions;
-  }, [showCornerAnchors, from, to, getTilePosition]);
+  }, [showCornerAnchors, from, to]);
 
   return (
     <>

src/hooks/useDiagramUtils.ts

@@ -8,9 +8,9 @@ import {
   sortByPosition,
   clamp,
   getAnchorTile,
-  getAllAnchors
+  getAllAnchors,
+  getTilePosition
 } from 'src/utils';
-import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
 import { useScroll } from 'src/hooks/useScroll';
 import { MAX_ZOOM } from 'src/config';
 
@@ -32,7 +32,6 @@ export const useDiagramUtils = () => {
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
-  const { getTilePosition } = useGetTilePosition();
 
   const getProjectBounds = useCallback(
     (items: (Node | Rectangle | Connector)[]): Coords[] => {
@@ -90,7 +89,7 @@ export const useDiagramUtils = () => {
       x: topLeft.x,
       y: topLeft.y
     };
-  }, [scene, getTilePosition, getProjectBounds]);
+  }, [scene, getProjectBounds]);
 
   const fitProjectToScreen = useCallback(() => {
     const boundingBox = getProjectBounds(scene.nodes);

src/hooks/useGetTilePosition.ts

@@ -1,17 +0,0 @@
-import { useCallback } from 'react';
-import { Coords, TileOriginEnum } from 'src/types';
-import { getTilePosition as getTilePositionUtil } from 'src/utils';
-
-export const useGetTilePosition = () => {
-  const getTilePosition = useCallback(
-    ({ tile, origin }: { tile: Coords; origin?: TileOriginEnum }) => {
-      return getTilePositionUtil({
-        tile,
-        origin
-      });
-    },
-    []
-  );
-
-  return { getTilePosition };
-};

src/hooks/useIsoProjection.ts

@@ -5,9 +5,12 @@ import {
   Size,
   ProjectionOrientationEnum
 } from 'src/types';
-import { getBoundingBox, getIsoProjectionCss } from 'src/utils';
+import {
+  getBoundingBox,
+  getIsoProjectionCss,
+  getTilePosition
+} from 'src/utils';
 import { UNPROJECTED_TILE_SIZE } from 'src/config';
-import { useGetTilePosition } from './useGetTilePosition';
 
 interface Props {
   from: Coords;
@@ -27,8 +30,6 @@ export const useIsoProjection = ({
   gridSize: Size;
   pxSize: Size;
 } => {
-  const { getTilePosition } = useGetTilePosition();
-
   const gridSize = useMemo(() => {
     return {
       width: Math.abs(from.x - to.x) + 1,
@@ -51,7 +52,7 @@ export const useIsoProjection = ({
     });
 
     return pos;
-  }, [origin, getTilePosition, orientation]);
+  }, [origin, orientation]);
 
   const pxSize = useMemo(() => {
     return {

src/hooks/useScroll.ts

@@ -1,11 +1,9 @@
 import { useCallback } from 'react';
-import { CoordsUtils } from 'src/utils';
+import { CoordsUtils, getTilePosition } from 'src/utils';
 import { Coords, TileOriginEnum } from 'src/types';
-import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
 import { useUiStateStore } from 'src/stores/uiStateStore';
 
 export const useScroll = () => {
-  const { getTilePosition } = useGetTilePosition();
   const scroll = useUiStateStore((state) => {
     return state.scroll;
   });
@@ -29,7 +27,7 @@ export const useScroll = () => {
         position: scrollTo
       });
     },
-    [getTilePosition, scroll.position, uiStateActions, rendererSize]
+    [scroll.position, uiStateActions, rendererSize]
   );
 
   return {