Merge pull request #173 from Lemoncode/feature/#150-create-line-shape…

…-under-basic-shapes

#150 line shape created

src/common/components/front-basic-sapes/index.ts

@@ -1,2 +1,3 @@
 export * from './rectangle-basic-shape';
 export * from './diamond-shape';
+export * from './line-basic-shape';

src/common/components/front-basic-sapes/line-basic-shape.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { Group, Line, Rect } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { ShapeProps } from '../front-components/shape.model';
+
+const lineShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: 10,
+  defaultWidth: 200,
+  defaultHeight: 10,
+};
+
+export const getlineShapeRestrictions = (): ShapeSizeRestrictions =>
+  lineShapeRestrictions;
+
+export const LineShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(lineShapeRestrictions, width, height);
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'line')}
+      >
+        {/* Transparent rectangle for applying margin */}
+        <Rect
+          width={restrictedWidth}
+          height={restrictedHeight}
+          fill="transparent"
+        />
+
+        <Line
+          x={0}
+          y={restrictedHeight / 2}
+          points={[0, 0, restrictedWidth, 0]}
+          stroke="black"
+          strokeWidth={2}
+        />
+      </Group>
+    );
+  }
+);

src/core/model/index.ts

@@ -27,6 +27,7 @@ export type ShapeType =
   | 'rectangle'
   | 'videoPlayer'
   | 'diamond'
+  | 'line';
   | 'accordion';
 /* | "text"| "button" |  "radio" | "image"*/
 
@@ -54,6 +55,7 @@ export interface ShapeModel {
   height: number;
   type: ShapeType;
   allowsInlineEdition: boolean;
+  hasLateralTransformer: boolean;
   editType?: EditType;
   text?: string;
 }

src/pods/basic-shapes-gallery/basic-gallery-data/index.ts

@@ -3,4 +3,5 @@ import { ItemInfo } from '@/common/components/gallery/components/model';
 export const mockBasicShapesCollection: ItemInfo[] = [
   { thumbnailSrc: '/shapes/rectangle.svg', type: 'rectangle' },
   { thumbnailSrc: '/shapes/diamond.svg', type: 'diamond' },
+  { thumbnailSrc: '/shapes/line.svg', type: 'line' },
 ];

src/pods/canvas/canvas.model.ts

@@ -21,6 +21,7 @@ import { getLabelSizeRestrictions } from '@/common/components/front-components/l
 import {
   getDiamondShapeSizeRestrictions,
   getRectangleShapeSizeRestrictions,
+  getlineShapeRestrictions,
 } from '@/common/components/front-basic-sapes';
 import {
   getAccordionShapeSizeRestrictions,
@@ -110,6 +111,11 @@ export const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
         width: getDiamondShapeSizeRestrictions().defaultWidth,
         height: getDiamondShapeSizeRestrictions().defaultHeight,
       };
+    case 'line':
+      return {
+        width: getlineShapeRestrictions().defaultWidth,
+        height: getlineShapeRestrictions().defaultHeight,
+      };
     case 'accordion':
       return {
         width: getAccordionShapeSizeRestrictions().defaultWidth,
@@ -139,6 +145,15 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
   }
 };
 
+const doesShapeHaveLateralTransformer = (shapeType: ShapeType): boolean => {
+  switch (shapeType) {
+    case 'line':
+      return true;
+    default:
+      return false;
+  }
+};
+
 const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
   switch (shapeType) {
     case 'input':
@@ -189,6 +204,7 @@ export const createShape = (coord: Coord, shapeType: ShapeType): ShapeModel => {
     height,
     type: shapeType,
     allowsInlineEdition: doesShapeAllowInlineEdition(shapeType),
+    hasLateralTransformer: doesShapeHaveLateralTransformer(shapeType),
     text: generateDefaultTextValue(shapeType),
     editType: getShapeEditInlineType(shapeType),
   };

src/pods/canvas/canvas.pod.tsx

@@ -72,12 +72,7 @@ export const CanvasPod = () => {
   } = useSnapIn(transformerRef, selectedShapeKonvaId);
 
   const { handleTransform, handleTransformerBoundBoxFunc } = useTransform(
-    updateShapeSizeAndPosition,
-    {
-      selectedShapeRef,
-      selectedShapeId,
-      selectedShapeType,
-    }
+    updateShapeSizeAndPosition
   );
 
   const handleDragEnd =

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

@@ -20,11 +20,15 @@ import {
   renderMobilePhoneContainer,
   renderTablet,
 } from './simple-container';
-import { renderRectangle } from './simple-basic-shapes/rectangle.rerender';
 import { renderVideoPlayer } from './simple-rich-components';
-import { renderDiamond } from './simple-basic-shapes';
+import {
+  renderDiamond,
+  renderRectangle,
+  renderLine,
+} from './simple-basic-shapes';
 import { renderAccordion } from './simple-rich-components/accordion.renderer';
 
+
 export const renderShapeComponent = (
   shape: ShapeModel,
   shapeRenderedProps: ShapeRendererProps
@@ -66,6 +70,8 @@ export const renderShapeComponent = (
       return renderVideoPlayer(shape, shapeRenderedProps);
     case 'diamond':
       return renderDiamond(shape, shapeRenderedProps);
+    case 'line':
+      return renderLine(shape, shapeRenderedProps);
     case 'accordion':
       return renderAccordion(shape, shapeRenderedProps);
     default:

src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts

@@ -1,2 +1,3 @@
 export * from './rectangle.rerender';
 export * from './diamond.renderer';
+export * from './line.renderer';

src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx

@@ -0,0 +1,30 @@
+import { LineShape } from '@/common/components/front-basic-sapes';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderLine = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <LineShape
+      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
+      hasLateralTransformer={shape.hasLateralTransformer}
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+    />
+  );
+};

src/pods/canvas/use-transform.hook.ts

@@ -1,18 +1,35 @@
-import { Node, NodeConfig } from 'konva/lib/Node';
 import { Box } from 'konva/lib/shapes/Transformer';
-import { Coord, ShapeType, Size } from '@/core/model';
-
-interface TransFormSelectedInfo {
-  selectedShapeRef: React.MutableRefObject<Node<NodeConfig> | null>;
-  selectedShapeId: string;
-  selectedShapeType: ShapeType | null;
-}
+import { Coord, Size } from '@/core/model';
+import { useEffect } from 'react';
+import { useCanvasContext } from '@/core/providers';
 
 export const useTransform = (
-  updateShapeSizeAndPosition: (id: string, position: Coord, size: Size) => void,
-  transformSelectedInfo: TransFormSelectedInfo
+  updateShapeSizeAndPosition: (id: string, position: Coord, size: Size) => void
 ) => {
-  const { selectedShapeId, selectedShapeRef } = transformSelectedInfo;
+  const { selectedShapeId, selectedShapeRef, transformerRef } =
+    useCanvasContext().selectionInfo;
+
+  useEffect(() => {
+    const selectedShape = selectedShapeRef.current;
+    const transformer = transformerRef.current;
+    if (selectedShape && transformer) {
+      const hasLateralTransformer = selectedShape.attrs.hasLateralTransformer;
+      if (hasLateralTransformer) {
+        transformerRef.current.enabledAnchors(['middle-left', 'middle-right']);
+      } else {
+        transformerRef.current.enabledAnchors([
+          'top-left',
+          'top-center',
+          'top-right',
+          'middle-left',
+          'middle-right',
+          'bottom-left',
+          'bottom-center',
+          'bottom-right',
+        ]);
+      }
+    }
+  }, [selectedShapeId]);
 
   const handleTransform = () => {
     const node = selectedShapeRef.current;