Merge pull request #763 from Lemoncode/feature/#754-create-scribble-paragraph-under-low-mock

Feature/#754 create scribble paragraph under low mock

Author: brauliodiez

public/low-wireframes/paragraphScribbled.svg

@@ -0,0 +1 @@
+export * from './paragraph-scribbled-shape';

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

@@ -0,0 +1,69 @@
+import { forwardRef, useMemo } from 'react';
+import { Group, Path, Rect } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+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 { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { MIN_LINE_HEIGHT } from './paragraph-scribbled.const';
+import { calculateParagraphPaths } from './paragraph-scribbled.business';
+
+const paragraphScribbledShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
+  minHeight: MIN_LINE_HEIGHT,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 300,
+  defaultHeight: 150,
+};
+
+export const getParagraphScribbledShapeRestrictions =
+  (): ShapeSizeRestrictions => paragraphScribbledShapeRestrictions;
+
+const shapeType: ShapeType = 'paragraphScribbled';
+
+export const ParagraphScribbled = forwardRef<any, ShapeProps>((props, ref) => {
+  const { width, height, id, otherProps, ...shapeProps } = props;
+
+  const { stroke } = useShapeProps(otherProps, BASIC_SHAPE);
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    { width, height },
+    shapeType,
+    ref
+  );
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    paragraphScribbledShapeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const paths = useMemo(() => {
+    return calculateParagraphPaths(restrictedWidth, restrictedHeight, id);
+  }, [restrictedWidth, restrictedHeight, id]);
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      {paths.map((path, idx) => (
+        <Path
+          key={idx}
+          data={path}
+          stroke={stroke}
+          strokeWidth={3}
+          lineCap="round"
+          lineJoin="round"
+        />
+      ))}
+      <Rect
+        width={restrictedSize.width}
+        height={restrictedSize.height}
+        stroke={stroke}
+        strokeWidth={0}
+      />
+    </Group>
+  );
+});

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

@@ -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;
+  });
+};

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

@@ -0,0 +1 @@
+export const MIN_LINE_HEIGHT = 25;

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

@@ -83,7 +83,8 @@ export type ShapeType =
   | 'ellipseLow'
   | 'rectangleLow'
   | 'circleLow'
-  | 'textScribbled';
+  | 'textScribbled'
+  | 'paragraphScribbled';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -156,6 +157,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   rectangleLow: 'Rectangle Placeholder',
   circleLow: 'Circle',
   textScribbled: 'Text Scribbled',
+  paragraphScribbled: 'Paragraph Scribbled',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/core/model/index.ts

@@ -87,6 +87,7 @@ import {
   getCircleLowShapeSizeRestrictions,
   getTextScribbledShapeRestrictions,
 } from '@/common/components/mock-components/front-low-wireframes-components';
+import { getParagraphScribbledShapeRestrictions } from '@/common/components/mock-components/front-low-wireframes-components/paragraph-scribbled-shape';
 
 const getMultipleNodeSizeRestrictions = (): ShapeSizeRestrictions => ({
   minWidth: 0,
@@ -169,6 +170,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   rectangleLow: getRectangleLowShapeRestrictions,
   circleLow: getCircleLowShapeSizeRestrictions,
   textScribbled: getTextScribbledShapeRestrictions,
+  paragraphScribbled: getParagraphScribbledShapeRestrictions,
 };
 
 export default shapeSizeMap;

src/pods/canvas/model/shape-size.mapper.ts

@@ -81,6 +81,7 @@ import {
   renderEllipseLow,
   renderRectangleLow,
   renderTextScribbled,
+  renderParagraphScribbled,
 } from './simple-low-wireframes-components';
 
 export const renderShapeComponent = (
@@ -226,6 +227,8 @@ export const renderShapeComponent = (
       return renderCircleLow(shape, shapeRenderedProps);
     case 'textScribbled':
       return renderTextScribbled(shape, shapeRenderedProps);
+    case 'paragraphScribbled':
+      return renderParagraphScribbled(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

src/pods/canvas/shape-renderer/index.tsx

@@ -5,3 +5,4 @@ export * from './low-vertical-line.renderer';
 export * from './rectangle-low.renderer';
 export * from './circle-low.renderer';
 export * from './text-scribbled.renderer';
+export * from './paragraph-scribbled.renderer';

src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts

@@ -0,0 +1,32 @@
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+import { ParagraphScribbled } from '@/common/components/mock-components/front-low-wireframes-components/paragraph-scribbled-shape';
+
+export const renderParagraphScribbled = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <ParagraphScribbled
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      name="shape"
+      width={shape.width}
+      height={shape.height}
+      draggable
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      text={shape.text || 'Scribbled Paragraph'}
+      otherProps={shape.otherProps}
+    />
+  );
+};

src/pods/canvas/shape-renderer/simple-low-wireframes-components/paragraph-scribbled.renderer.tsx

@@ -29,4 +29,8 @@ export const mockLowWireframeCollection: ItemInfo[] = [
     thumbnailSrc: '/low-wireframes/textScribbled.svg',
     type: 'textScribbled',
   },
+  {
+    thumbnailSrc: '/low-wireframes/paragraphScribbled.svg',
+    type: 'paragraphScribbled',
+  },
 ];