Merge pull request #143 from Lemoncode/feature/#136-add-basic-shapes-…

…gallery

Adding Basic shape gallery

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

@@ -0,0 +1 @@
+export * from './rectangle-basic-shape';

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

@@ -0,0 +1,47 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect } from 'react-konva';
+
+const rectangleShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 60,
+  minHeight: 45,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 170,
+  defaultHeight: 45,
+};
+
+export const getRectangleShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  rectangleShapeRestrictions;
+
+export const RectangleShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(rectangleShapeRestrictions, width, height);
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'rectangle')}
+      >
+        <Rect
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          strokeWidth={2}
+          stroke="black"
+          fille={null}
+          cornerRadius={5}
+        />
+      </Group>
+    );
+  }
+);

src/core/model/index.ts

@@ -23,7 +23,8 @@ export type ShapeType =
   | 'tablet'
   | 'timepickerinput'
   | 'label'
-  | 'radiobutton';
+  | 'radiobutton'
+  | 'rectangle';
 /* | "text"| "button" |  "radio" | "image"*/
 
 export type ShapeRefs = {

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

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

src/pods/basic-shapes-gallery/basic-shapes-gallery.pod.tsx

@@ -0,0 +1,6 @@
+import { GalleryComponent } from '@/common/components/gallery/gallery-component';
+import { mockBasicShapesCollection } from '../basic-shapes-gallery/basic-gallery-data';
+
+export const BasicShapesGalleryPod = () => {
+  return <GalleryComponent itemCollection={mockBasicShapesCollection} />;
+};

src/pods/canvas/canvas.model.ts

@@ -18,6 +18,7 @@ import {
   getTabletShapeSizeRestrictions,
 } from '@/common/components/front-containers';
 import { getLabelSizeRestrictions } from '@/common/components/front-components/label-shape';
+import { getRectangleShapeSizeRestrictions } from '@/common/components/front-basic-sapes';
 
 const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
   switch (shapeType) {
@@ -87,7 +88,11 @@ const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
         width: getTimepickerInputShapeSizeRestrictions().defaultWidth,
         height: getTimepickerInputShapeSizeRestrictions().defaultHeight,
       };
-
+    case 'rectangle':
+      return {
+        width: getRectangleShapeSizeRestrictions().defaultWidth,
+        height: getRectangleShapeSizeRestrictions().defaultHeight,
+      };
     default:
       return { width: 200, height: 50 };
   }

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

@@ -20,6 +20,7 @@ import {
   renderMobilePhoneContainer,
   renderTablet,
 } from './simple-container';
+import { renderRectangle } from './simple-basic-shapes/rectangle.rerender';
 
 export const renderShapeComponent = (
   shape: ShapeModel,
@@ -56,6 +57,8 @@ export const renderShapeComponent = (
       return renderLabel(shape, shapeRenderedProps);
     case 'radiobutton':
       return renderRadioButton(shape, shapeRenderedProps);
+    case 'rectangle':
+      return renderRectangle(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

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

@@ -0,0 +1 @@
+export * from './rectangle.rerender';

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

@@ -0,0 +1,28 @@
+import { RectangleShape } from '@/common/components/front-basic-sapes';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderRectangle = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <RectangleShape
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      width={shape.width}
+      height={shape.height}
+      draggable
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+    />
+  );
+};

src/pods/index.ts

@@ -1,4 +1,5 @@
-export * from "./canvas/canvas.pod";
-export * from "./container-gallery/container-gallery.pod";
-export * from "./component-gallery/component-gallery.pod";
-export * from "./toolbar/toolbar.pod";
+export * from './canvas/canvas.pod';
+export * from './container-gallery/container-gallery.pod';
+export * from './component-gallery/component-gallery.pod';
+export * from './basic-shapes-gallery/basic-shapes-gallery.pod';
+export * from './toolbar/toolbar.pod';

src/scenes/main.scene.tsx

@@ -6,6 +6,7 @@ import {
   ToolbarPod,
   ContainerGalleryPod,
   ComponentGalleryPod,
+  BasicShapesGalleryPod,
 } from '@/pods';
 import { PropertiesPod } from '@/pods/properties';
 import { FooterPod } from '@/pods/footer/footer.pod';
@@ -23,6 +24,10 @@ export const MainScene = () => {
           <summary className={classes.title}>Components</summary>
           <ComponentGalleryPod />
         </details>
+        <details className={classes.container} name="toolsLeft">
+          <summary className={classes.title}>Basic Shapes</summary>
+          <BasicShapesGalleryPod />
+        </details>
       </div>
       <CanvasPod />
       <div className={classes.rightTools}>