Merge pull request #171 from boostcampwm-2024/fix/client/#169

Fix/client/#169
boostcampwm-2024 · Dec 2, 2024 · b7b0640 · b7b0640
2 parents cc57775 + 2318cc2
commit b7b0640
Show file tree

Hide file tree

Showing 31 changed files with 697 additions and 341 deletions.
diff --git a/apps/client/mocks.ts b/apps/client/mocks.ts
@@ -1,5 +1,5 @@
-// import { Group, Node } from '@types';
-// import { nanoid } from 'nanoid';
+import { Group, Node } from '@types';
+import { nanoid } from 'nanoid';
 
 const CloudFunctionNode: Node = {
     id: `node-${nanoid()}`,

diff --git a/apps/client/src/CloudGraph.tsx b/apps/client/src/CloudGraph.tsx
@@ -7,12 +7,13 @@ import GridBackground from '@components/GridBackground';
 import Group from '@components/Group';
 import Node from '@components/Node';
 import { useEdgeContext } from '@contexts/EdgeContext';
+import { useGraphContext } from '@contexts/GraphConetxt';
 import { useGroupContext } from '@contexts/GroupContext';
 import { useNodeContext } from '@contexts/NodeContext';
 import useConnection from '@hooks/useConnection';
 import useGraph from '@hooks/useGraph';
 import useSelection from '@hooks/useSelection';
-import { useEffect, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 
 export default () => {
     const {
@@ -24,6 +25,11 @@ export default () => {
     const {
         state: { groups },
     } = useGroupContext();
+    const {
+        state: { viewBox },
+        dispatch: graphDispatch,
+    } = useGraphContext();
+
     const {
         selectedNodeId,
         selectedEdge,
@@ -36,14 +42,13 @@ export default () => {
 
     const {
         svgRef,
-        prevDimension,
         dimension,
         moveNode,
         addEdge,
         splitEdge,
-        updatedPointForDimension,
         moveBendingPointer,
         getGroupBounds,
+        updateNodePointForDimension,
         moveGroup,
         removeNode,
         removeEdge,
@@ -59,6 +64,9 @@ export default () => {
         updateEdgeFn: addEdge,
     });
 
+    const nodesRef = useRef(nodes);
+    const prevDimensionRef = useRef(dimension);
+
     useEffect(() => {
         const handleContextMenu = (e: MouseEvent) => e.preventDefault();
         const handleMouseDown = (e: MouseEvent) => {
@@ -75,11 +83,20 @@ export default () => {
         };
     }, []);
 
-    useLayoutEffect(() => {
-        if (dimension === prevDimension) return;
+    useEffect(() => {
+        prevDimensionRef.current = dimension;
+    }, [dimension]);
+    [];
+
+    useEffect(() => {
+        nodesRef.current = nodes;
+    }, [nodes]);
 
-        updatedPointForDimension();
+    useLayoutEffect(() => {
+        if (prevDimensionRef.current === dimension) return;
+        updateNodePointForDimension(dimension);
     }, [dimension]);
+
     return (
         <Graph>
             <GridBackground />

diff --git a/apps/client/src/components/Graph/index.tsx b/apps/client/src/components/Graph/index.tsx
@@ -15,14 +15,28 @@ export default ({ children }: PropsWithChildren) => {
     const isPanning = useRef(false);
     const startPoint = useRef<Point>({ x: 0, y: 0 });
     const spaceActiveKey = useKey('space');
+    const initialViewBox = {
+        x: 0,
+        y: 0,
+        width: svgRef.current?.clientWidth || 0,
+        height: svgRef.current?.clientHeight || 0,
+    };
 
+    const MIN_ZOOM = 0.2;
+    const MAX_ZOOM = 1;
     const zoom = (wheelY: number, point: Point) => {
         if (!svgRef.current) return;
 
         const zoomFactor = wheelY > 0 ? 1.1 : 0.9;
         const cursorSvgPoint = getSvgPoint(svgRef.current, point);
         if (!cursorSvgPoint) return;
 
+        const currentZoom = initialViewBox.width / viewBox.width;
+        const newZoom = currentZoom * (1 / zoomFactor);
+
+        if (newZoom < MIN_ZOOM || newZoom > MAX_ZOOM) {
+            return;
+        }
         dispatch({
             type: 'SET_VIEWBOX',
             payload: {

diff --git a/apps/client/src/components/Group/ncloud/Rect3D.tsx b/apps/client/src/components/Group/ncloud/Rect3D.tsx
@@ -0,0 +1,55 @@
+import { Bounds } from '@types';
+import { screenToGrid2d, gridToScreen3d } from '@utils';
+import { ReactNode } from 'react';
+
+type Props = {
+    children: ReactNode;
+    bounds: Bounds;
+    color: string;
+    [key: string]: any;
+};
+export default ({ bounds, properties, color, children }: Props) => {
+    const topLeftGrid = screenToGrid2d({ x: 0, y: 0 });
+    const topRightGrid = screenToGrid2d({ x: bounds.width, y: 0 });
+    const bottomRightGrid = screenToGrid2d({
+        x: bounds.width,
+        y: bounds.height,
+    });
+    const bottomLeftGrid = screenToGrid2d({ x: 0, y: bounds.height });
+
+    const point1 = gridToScreen3d({
+        col: topLeftGrid.col,
+        row: topLeftGrid.row,
+    });
+    const point2 = gridToScreen3d({
+        col: topRightGrid.col,
+        row: topRightGrid.row,
+    });
+    const point3 = gridToScreen3d({
+        col: bottomRightGrid.col,
+        row: bottomRightGrid.row,
+    });
+    const point4 = gridToScreen3d({
+        col: bottomLeftGrid.col,
+        row: bottomLeftGrid.row,
+    });
+
+    const points = `
+        ${point1.x} ${point1.y},
+        ${point2.x} ${point2.y},
+        ${point3.x} ${point3.y},
+        ${point4.x} ${point4.y}
+    `;
+
+    return (
+        <>
+            <polygon
+                points={points}
+                stroke={color}
+                strokeWidth="8"
+                fill="none"
+            ></polygon>
+            {children}
+        </>
+    );
+};
diff --git a/apps/client/src/components/Group/ncloud/RegionGroup.tsx b/apps/client/src/components/Group/ncloud/RegionGroup.tsx
@@ -1,61 +1,25 @@
 import Text from '@components/Group/ncloud/Title';
 import { useDimensionContext } from '@contexts/DimensionContext';
 import { Bounds, Group } from '@types';
-import { generateRandomRGB, gridToScreen3d, screenToGrid2d } from '@utils';
+import { generateRandomRGB } from '@utils';
 import { useMemo } from 'react';
+import Rect3D from './Rect3D';
 
 interface Props extends Partial<Group> {
     color: string;
     bounds: Bounds;
 }
 
 const Region3D = ({ bounds, properties, color }: Props) => {
-    const topLeftGrid = screenToGrid2d({ x: 0, y: 0 });
-    const topRightGrid = screenToGrid2d({ x: bounds.width, y: 0 });
-    const bottomRightGrid = screenToGrid2d({
-        x: bounds.width,
-        y: bounds.height,
-    });
-    const bottomLeftGrid = screenToGrid2d({ x: 0, y: bounds.height });
-
-    const point1 = gridToScreen3d({
-        col: topLeftGrid.col + 1,
-        row: topLeftGrid.row,
-    });
-    const point2 = gridToScreen3d({
-        col: topRightGrid.col + 1,
-        row: topRightGrid.row,
-    });
-    const point3 = gridToScreen3d({
-        col: bottomRightGrid.col + 1,
-        row: bottomRightGrid.row,
-    });
-    const point4 = gridToScreen3d({
-        col: bottomLeftGrid.col + 1,
-        row: bottomLeftGrid.row,
-    });
-
-    const points = `
-        ${point1.x} ${point1.y}, 
-        ${point2.x} ${point2.y}, 
-        ${point3.x} ${point3.y}, 
-        ${point4.x} ${point4.y}
-    `;
-
     return (
-        <>
-            <polygon
-                points={points}
-                stroke={color}
-                strokeWidth="8"
-                fill="none"
-            ></polygon>
+        <Rect3D bounds={bounds} properties={properties} color={color}>
             <Text bounds={bounds} color={color} text={properties?.name} />
-        </>
+        </Rect3D>
     );
 };
 
 const Region2D = ({ bounds, color, properties }: Props) => {
+    console.log(bounds);
     const points = `0 0, 0 ${bounds.height}, ${bounds.width} ${bounds.height}, ${bounds.width} 0`;
 
     return (

diff --git a/apps/client/src/components/Group/ncloud/SubnetGroup.tsx b/apps/client/src/components/Group/ncloud/SubnetGroup.tsx
@@ -1,61 +1,24 @@
 import Text from '@components/Group/ncloud/Title';
 import { useDimensionContext } from '@contexts/DimensionContext';
 import { Bounds, Group } from '@types';
-import { generateRandomRGB, gridToScreen3d, screenToGrid2d } from '@utils';
+import { calcIsoMatrixPoint, generateRandomRGB } from '@utils';
 import { useMemo } from 'react';
+import Rect3D from './Rect3D';
 
 interface Props extends Partial<Group> {
     color: string;
     bounds: Bounds;
 }
 
-const Region3D = ({ bounds, properties, color }: Props) => {
-    const topLeftGrid = screenToGrid2d({ x: 0, y: 0 });
-    const topRightGrid = screenToGrid2d({ x: bounds.width, y: 0 });
-    const bottomRightGrid = screenToGrid2d({
-        x: bounds.width,
-        y: bounds.height,
-    });
-    const bottomLeftGrid = screenToGrid2d({ x: 0, y: bounds.height });
-
-    const point1 = gridToScreen3d({
-        col: topLeftGrid.col + 1,
-        row: topLeftGrid.row,
-    });
-    const point2 = gridToScreen3d({
-        col: topRightGrid.col + 1,
-        row: topRightGrid.row,
-    });
-    const point3 = gridToScreen3d({
-        col: bottomRightGrid.col + 1,
-        row: bottomRightGrid.row,
-    });
-    const point4 = gridToScreen3d({
-        col: bottomLeftGrid.col + 1,
-        row: bottomLeftGrid.row,
-    });
-
-    const points = `
-        ${point1.x} ${point1.y}, 
-        ${point2.x} ${point2.y}, 
-        ${point3.x} ${point3.y}, 
-        ${point4.x} ${point4.y}
-    `;
-
+const Subnet3D = ({ bounds, properties, color }: Props) => {
     return (
-        <>
-            <polygon
-                points={points}
-                stroke={color}
-                strokeWidth="8"
-                fill="none"
-            ></polygon>
+        <Rect3D bounds={bounds} properties={properties} color={color}>
             <Text bounds={bounds} color={color} text={properties?.name} />
-        </>
+        </Rect3D>
     );
 };
 
-const Region2D = ({ bounds, color, properties }: Props) => {
+const Subnet2D = ({ bounds, color, properties }: Props) => {
     const points = `0 0, 0 ${bounds.height}, ${bounds.width} ${bounds.height}, ${bounds.width} 0`;
 
     return (
@@ -76,8 +39,8 @@ export default ({ bounds, properties }: Omit<Props, 'color'>) => {
     const color = useMemo(() => generateRandomRGB(), []);
 
     return dimension === '2d' ? (
-        <Region2D bounds={bounds} properties={properties} color={color} />
+        <Subnet2D bounds={bounds} properties={properties} color={color} />
     ) : (
-        <Region3D bounds={bounds} properties={properties} color={color} />
+        <Subnet3D bounds={bounds} properties={properties} color={color} />
     );
 };
diff --git a/apps/client/src/components/Group/ncloud/Title.tsx b/apps/client/src/components/Group/ncloud/Title.tsx
@@ -24,7 +24,7 @@ export default ({ bounds, color, text }: Props) => {
     const rectWidth = fontSize * textLength;
     const rectHeight = 50;
     const rectY = 10;
-    const rectX = dimension === '2d' ? 10 : 90;
+    const rectX = 10;
 
     const matrix = convertToIsoMatrix(bounds.x, bounds.y).toString();
     const centerX = rectWidth / 2 + rectX;