Merge pull request #517 from Lemoncode/feature/#473-Create-a-gray-sem…

…itransparent-Rectangle-Component

Feature/#473 create a gray semitransparent rectangle component

src/common/components/mock-components/front-basic-shapes/index.ts

@@ -8,3 +8,4 @@ export * from './circle-basic-shape';
 export * from './star-shape';
 export * from './large-arrow-shape';
 export * from './image-shape';
+export * from './modal-cover-shape';

src/common/components/mock-components/front-basic-shapes/modal-cover-shape.tsx

@@ -0,0 +1,65 @@
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { Group, Rect } from 'react-konva';
+import { useGroupShapeProps } from '../mock-components.utils';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+
+const modalCoverShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 200,
+  defaultHeight: 200,
+};
+
+export const getModalCoverShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  modalCoverShapeSizeRestrictions;
+
+const shapeType = 'modalCover';
+
+export const ModalCoverShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    modalCoverShapeSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        fill={'gray'}
+        strokeWidth={2}
+        dash={[1]}
+        opacity={0.7}
+        listening={true}
+      />
+    </Group>
+  );
+});

src/core/model/index.ts

@@ -61,6 +61,7 @@ export type ShapeType =
   | 'verticalScrollBar'
   | 'horizontalScrollBar'
   | 'modal'
+  | 'modalCover'
   | 'tabsBar'
   | 'appBar'
   | 'appBar'
@@ -118,6 +119,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   calendar: 'Calendar',
   verticalScrollBar: 'Vertical Scroll Bar',
   modal: 'Modal',
+  modalCover: 'Modal Cover',
   tabsBar: 'Tabs Bar',
   appBar: 'AppBar',
   buttonBar: 'Button Bar',

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

@@ -38,6 +38,7 @@ import {
   getPostItShapeSizeRestrictions,
   getRectangleShapeSizeRestrictions,
   getStarShapeSizeRestrictions,
+  getModalCoverShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-basic-shapes';
 import {
@@ -128,6 +129,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   calendar: getCalendarShapeSizeRestrictions,
   verticalScrollBar: getVerticalScrollBarShapeSizeRestrictions,
   modal: getModalShapeSizeRestrictions,
+  modalCover: getModalCoverShapeSizeRestrictions,
   tabsBar: getTabsBarShapeSizeRestrictions,
   appBar: getAppBarShapeSizeRestrictions,
   buttonBar: getButtonBarShapeSizeRestrictions,

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

@@ -49,6 +49,7 @@ import {
   renderHorizontalLine,
   renderVerticalLine,
   renderCircle,
+  renderModalCover,
   renderStar,
   renderPostit,
   renderLargeArrowShape,
@@ -166,6 +167,8 @@ export const renderShapeComponent = (
       return renderVerticalScrollBar(shape, shapeRenderedProps);
     case 'modal':
       return renderModal(shape, shapeRenderedProps);
+    case 'modalCover':
+      return renderModalCover(shape, shapeRenderedProps);
     case 'tabsBar':
       return renderTabsBar(shape, shapeRenderedProps);
     case 'appBar':

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

@@ -7,3 +7,4 @@ export * from './vertical-line.renderer';
 export * from './circle.renderer';
 export * from './star.renderer';
 export * from './large-arrow.renderer';
+export * from './modal-cover.rerender';

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

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

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

@@ -6,6 +6,7 @@ export const mockBasicShapesCollection: ItemInfo[] = [
   { thumbnailSrc: '/shapes/horizontalLine.svg', type: 'horizontalLine' },
   { thumbnailSrc: '/shapes/image.svg', type: 'image' },
   { thumbnailSrc: '/shapes/largeArrow.svg', type: 'largeArrow' },
+  { thumbnailSrc: '/shapes/modalCover.svg', type: 'modalCover' },
   { thumbnailSrc: '/shapes/postit.svg', type: 'postit' },
   { thumbnailSrc: '/shapes/rectangle.svg', type: 'rectangle' },
   { thumbnailSrc: '/shapes/star.svg', type: 'star' },