Externalize paragraph paths calculation to business file

Author: gustedeveloper

src/common/components/mock-components/front-low-wireframes-components/paragraph-scribbled-shape/paragraph-scribbled-shape.tsx

@@ -5,10 +5,9 @@ import { ShapeProps } from '../../shape.model';
 import { useShapeProps } from '../../../shapes/use-shape-props.hook';
 import { BASIC_SHAPE } from '../../front-components/shape.const';
 import { useGroupShapeProps } from '../../mock-components.utils';
-import { calculatePath } from '../text-scribbled-shape/text-scribbled.business';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
-
-const MIN_LINE_HEIGHT = 25;
+import { MIN_LINE_HEIGHT } from './paragraph-scribbled.const';
+import { calculateParagraphPaths } from './paragraph-scribbled.business';
 
 const paragraphScribbledShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 100,
@@ -43,35 +42,8 @@ export const ParagraphScribbled = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  // Calculate how many lines fit based on the height
-  const numLines = Math.max(1, Math.trunc(restrictedHeight / MIN_LINE_HEIGHT));
-
-  // Generate one path per line
   const paths = useMemo(() => {
-    return Array.from({ length: numLines }).map((_, i) => {
-      const lineY = i * MIN_LINE_HEIGHT;
-      const lineId = `${id}-${i}`;
-      const rawPath = calculatePath(restrictedWidth, MIN_LINE_HEIGHT, lineId);
-
-      // Adjust the path to shift Y coordinate for each line
-      // 🔍 Step by step:
-      // The path assumes the text is vertically centered in a block of given height (e.g., 25px).
-      // If you just drew this path multiple times, all lines would overlap.
-      // To fix that, we shift the Y coordinate for each point in the path.
-      //
-      // Regular expression: /\d+,\d+/g
-      // Finds all x,y coordinates in the path string (e.g., "10,12", "15,11").
-      // We split each coordinate, convert y to number, add vertical offset (lineY),
-      // then reassemble the coordinate string.
-      const shiftedPath = rawPath.replace(/\d+,\d+/g, match => {
-        const [xStr, yStr] = match.split(',');
-        const x = parseFloat(xStr);
-        const y = parseFloat(yStr) + lineY;
-        return `${x},${y}`;
-      });
-
-      return shiftedPath;
-    });
+    return calculateParagraphPaths(restrictedWidth, restrictedHeight, id);
   }, [restrictedWidth, restrictedHeight, id]);
 
   return (

src/common/components/mock-components/front-low-wireframes-components/paragraph-scribbled-shape/paragraph-scribbled.business.ts

@@ -0,0 +1,36 @@
+import { calculatePath } from '../text-scribbled-shape/text-scribbled.business';
+import { MIN_LINE_HEIGHT } from './paragraph-scribbled.const';
+
+export const calculateParagraphPaths = (
+  restrictedWidth: number,
+  restrictedHeight: number,
+  id: string
+): string[] => {
+  // Calculate how many lines fit based on the height
+  const numLines = Math.max(1, Math.trunc(restrictedHeight / MIN_LINE_HEIGHT));
+
+  return Array.from({ length: numLines }).map((_, i) => {
+    const lineY = i * MIN_LINE_HEIGHT;
+    const lineId = `${id}-${i}`;
+    const rawPath = calculatePath(restrictedWidth, MIN_LINE_HEIGHT, lineId);
+
+    // Adjust the path to shift Y coordinate for each line
+    // 🔍 Step by step:
+    // The path assumes the text is vertically centered in a block of given height (e.g., 25px).
+    // If you just drew this path multiple times, all lines would overlap.
+    // To fix that, we shift the Y coordinate for each point in the path.
+    //
+    // Regular expression: /\d+,\d+/g
+    // Finds all x,y coordinates in the path string (e.g., "10,12", "15,11").
+    // We split each coordinate, convert y to number, add vertical offset (lineY),
+    // then reassemble the coordinate string.
+    const shiftedPath = rawPath.replace(/\d+,\d+/g, match => {
+      const [xStr, yStr] = match.split(',');
+      const x = parseFloat(xStr);
+      const y = parseFloat(yStr) + lineY;
+      return `${x},${y}`;
+    });
+
+    return shiftedPath;
+  });
+};