From 3a0c9999df5b0ae531b938f2450ea90ed98370b5 Mon Sep 17 00:00:00 2001 From: Jorge Miranda Date: Tue, 29 Oct 2024 11:08:37 +0100 Subject: [PATCH 1/2] feature/#473-Create-a-gray-semitransparent-Rectangle-Component --- .../modal/modal-cover.tsx | 16 ++++++++++++++++ .../front-rich-components/modal/modal.tsx | 18 +++++++++++++++++- 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx diff --git a/src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx b/src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx new file mode 100644 index 00000000..54300dbb --- /dev/null +++ b/src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx @@ -0,0 +1,16 @@ +import { Rect } from 'react-konva'; + +export const modalCover = () => ( + +); diff --git a/src/common/components/mock-components/front-rich-components/modal/modal.tsx b/src/common/components/mock-components/front-rich-components/modal/modal.tsx index a4e265f4..0597a335 100644 --- a/src/common/components/mock-components/front-rich-components/modal/modal.tsx +++ b/src/common/components/mock-components/front-rich-components/modal/modal.tsx @@ -7,6 +7,7 @@ import { darkenColor, getModalPartsText } from './modal.utils'; import { useShapeProps } from '../../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../../front-components/shape.const'; import { useGroupShapeProps } from '../../mock-components.utils'; +import { modalCover } from './modal-cover'; const modalShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 235, @@ -69,7 +70,22 @@ export const Modal = forwardRef((props, ref) => { ); return ( - + + {/*Grey-rectangle*/} + + {/* Background */} Date: Thu, 31 Oct 2024 10:03:32 +0100 Subject: [PATCH 2/2] feature/#473-Create-a-gray-semitransparent-Rectangle-Component --- public/shapes/modalCover.svg | 3 + .../front-basic-shapes/index.ts | 1 + .../front-basic-shapes/modal-cover-shape.tsx | 65 +++++++++++++++++++ .../modal/modal-cover.tsx | 16 ----- .../front-rich-components/modal/modal.tsx | 18 +---- src/core/model/index.ts | 2 + src/pods/canvas/model/shape-size.mapper.ts | 2 + src/pods/canvas/shape-renderer/index.tsx | 3 + .../simple-basic-shapes/index.ts | 1 + .../modal-cover.rerender.tsx | 30 +++++++++ .../basic-gallery-data/index.ts | 1 + 11 files changed, 109 insertions(+), 33 deletions(-) create mode 100644 public/shapes/modalCover.svg create mode 100644 src/common/components/mock-components/front-basic-shapes/modal-cover-shape.tsx delete mode 100644 src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx create mode 100644 src/pods/canvas/shape-renderer/simple-basic-shapes/modal-cover.rerender.tsx diff --git a/public/shapes/modalCover.svg b/public/shapes/modalCover.svg new file mode 100644 index 00000000..a471d138 --- /dev/null +++ b/public/shapes/modalCover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/components/mock-components/front-basic-shapes/index.ts b/src/common/components/mock-components/front-basic-shapes/index.ts index 8a8940da..0303d694 100644 --- a/src/common/components/mock-components/front-basic-shapes/index.ts +++ b/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'; diff --git a/src/common/components/mock-components/front-basic-shapes/modal-cover-shape.tsx b/src/common/components/mock-components/front-basic-shapes/modal-cover-shape.tsx new file mode 100644 index 00000000..d40094f4 --- /dev/null +++ b/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((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 ( + + + + ); +}); diff --git a/src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx b/src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx deleted file mode 100644 index 54300dbb..00000000 --- a/src/common/components/mock-components/front-rich-components/modal/modal-cover.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Rect } from 'react-konva'; - -export const modalCover = () => ( - -); diff --git a/src/common/components/mock-components/front-rich-components/modal/modal.tsx b/src/common/components/mock-components/front-rich-components/modal/modal.tsx index 0597a335..a4e265f4 100644 --- a/src/common/components/mock-components/front-rich-components/modal/modal.tsx +++ b/src/common/components/mock-components/front-rich-components/modal/modal.tsx @@ -7,7 +7,6 @@ import { darkenColor, getModalPartsText } from './modal.utils'; import { useShapeProps } from '../../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../../front-components/shape.const'; import { useGroupShapeProps } from '../../mock-components.utils'; -import { modalCover } from './modal-cover'; const modalShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 235, @@ -70,22 +69,7 @@ export const Modal = forwardRef((props, ref) => { ); return ( - - {/*Grey-rectangle*/} - - + {/* Background */} = { calendar: 'Calendar', verticalScrollBar: 'Vertical Scroll Bar', modal: 'Modal', + modalCover: 'Modal Cover', tabsBar: 'Tabs Bar', appBar: 'AppBar', buttonBar: 'Button Bar', diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts index 57a03ace..4bd036ab 100644 --- a/src/pods/canvas/model/shape-size.mapper.ts +++ b/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 ShapeSizeRestrictions> = { calendar: getCalendarShapeSizeRestrictions, verticalScrollBar: getVerticalScrollBarShapeSizeRestrictions, modal: getModalShapeSizeRestrictions, + modalCover: getModalCoverShapeSizeRestrictions, tabsBar: getTabsBarShapeSizeRestrictions, appBar: getAppBarShapeSizeRestrictions, buttonBar: getButtonBarShapeSizeRestrictions, diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index d9005801..79d64cd0 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/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': diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts b/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts index a676e622..85121f0f 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts +++ b/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'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/modal-cover.rerender.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/modal-cover.rerender.tsx new file mode 100644 index 00000000..99f0ddcd --- /dev/null +++ b/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 ( + + ); +}; diff --git a/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts b/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts index 7a2991af..62c9d6bf 100644 --- a/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts +++ b/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' },