From 1eb579e7a8704ecc6902bc4c48de0e9014d117c3 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 19:29:20 +0100
Subject: [PATCH 1/8] Creating rectangle low wireframe shape
---
public/low-wireframes/rectangleLow.svg | 3 +
.../front-low-wireframes-components/index.ts | 1 +
.../rectangle-low-shape.tsx | 61 +++++++++++++++++++
src/core/model/index.ts | 4 +-
src/pods/canvas/model/shape-size.mapper.ts | 2 +
src/pods/canvas/shape-renderer/index.tsx | 3 +
.../simple-low-wireframes-components/index.ts | 1 +
.../rectangle-low.renderer.tsx | 31 ++++++++++
.../low-wireframe-gallery-data/index.ts | 4 ++
9 files changed, 109 insertions(+), 1 deletion(-)
create mode 100644 public/low-wireframes/rectangleLow.svg
create mode 100644 src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
create mode 100644 src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx
diff --git a/public/low-wireframes/rectangleLow.svg b/public/low-wireframes/rectangleLow.svg
new file mode 100644
index 00000000..642807a7
--- /dev/null
+++ b/public/low-wireframes/rectangleLow.svg
@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="6">
+ <rect width="200" height="200" stroke="black" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/src/common/components/mock-components/front-low-wireframes-components/index.ts b/src/common/components/mock-components/front-low-wireframes-components/index.ts
index b06f4678..02bcc7e4 100644
--- a/src/common/components/mock-components/front-low-wireframes-components/index.ts
+++ b/src/common/components/mock-components/front-low-wireframes-components/index.ts
@@ -2,3 +2,4 @@ export * from './ellipse-low-shape';
export * from './horizontal-line-low-shape';
export * from './image-placeholder-shape';
export * from './vertical-line-low-shape';
+export * from './rectangle-low-shape';
diff --git a/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx b/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
new file mode 100644
index 00000000..f9f0082a
--- /dev/null
+++ b/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
@@ -0,0 +1,61 @@
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { Group, Rect } from 'react-konva';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const rectangleLowShapeRestriction: ShapeSizeRestrictions = {
+ minWidth: 10,
+ minHeight: 10,
+ maxWidth: -1,
+ maxHeight: -1,
+ defaultWidth: 160,
+ defaultHeight: 160,
+};
+
+export const getRectangleLowShapeRestrictions = (): ShapeSizeRestrictions =>
+ rectangleLowShapeRestriction;
+
+const shapeType: ShapeType = 'rectangleLow';
+
+export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
+ const {
+ x,
+ y,
+ width,
+ height,
+ id,
+ onSelected,
+ text,
+ otherProps,
+ ...shapeProps
+ } = props;
+
+ const restrictedSize = fitSizeToShapeSizeRestrictions(
+ rectangleLowShapeRestriction,
+ width,
+ height
+ );
+
+ const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+ const commonGroupProps = useGroupShapeProps(
+ props,
+ restrictedSize,
+ shapeType,
+ ref
+ );
+
+ return (
+ <Group {...commonGroupProps} {...shapeProps}>
+ <Rect
+ width={restrictedWidth}
+ height={restrictedHeight}
+ stroke="black"
+ strokeWidth={6}
+ fill="white"
+ />
+ </Group>
+ );
+});
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 3d7c4ef0..826eabcc 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -80,7 +80,8 @@ export type ShapeType =
| 'imagePlaceholder'
| 'horizontalLineLow'
| 'verticalLineLow'
- | 'ellipseLow';
+ | 'ellipseLow'
+ | 'rectangleLow';
export const ShapeDisplayName: Record<ShapeType, string> = {
multiple: 'multiple',
@@ -150,6 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
horizontalLineLow: 'Horizontal Divider',
verticalLineLow: 'Vertical Divider',
ellipseLow: 'Ellipse',
+ rectangleLow: 'Rectangle Placeholder',
};
export type EditType = 'input' | 'textarea' | 'imageupload';
diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts
index 7f634020..40cab0a5 100644
--- a/src/pods/canvas/model/shape-size.mapper.ts
+++ b/src/pods/canvas/model/shape-size.mapper.ts
@@ -83,6 +83,7 @@ import {
getHorizontalLineLowShapeRestrictions,
getImagePlaceholderShapeSizeRestrictions,
getVerticalLineLowShapeRestrictions,
+ getRectangleLowShapeRestrictions,
} from '@/common/components/mock-components/front-low-wireframes-components';
const getMultipleNodeSizeRestrictions = (): ShapeSizeRestrictions => ({
@@ -163,6 +164,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
horizontalLineLow: getHorizontalLineLowShapeRestrictions,
verticalLineLow: getVerticalLineLowShapeRestrictions,
ellipseLow: getEllipseLowShapeRestrictions,
+ rectangleLow: getRectangleLowShapeRestrictions,
};
export default shapeSizeMap;
diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx
index c761ab9e..94d115fa 100644
--- a/src/pods/canvas/shape-renderer/index.tsx
+++ b/src/pods/canvas/shape-renderer/index.tsx
@@ -78,6 +78,7 @@ import {
renderImagePlaceHolder,
renderVerticalLowLine,
renderEllipseLow,
+ renderRectangleLow,
} from './simple-low-wireframes-components';
export const renderShapeComponent = (
@@ -217,6 +218,8 @@ export const renderShapeComponent = (
return renderVerticalLowLine(shape, shapeRenderedProps);
case 'ellipseLow':
return renderEllipseLow(shape, shapeRenderedProps);
+ case 'rectangleLow':
+ return renderRectangleLow(shape, shapeRenderedProps);
default:
return renderNotFound(shape, shapeRenderedProps);
}
diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts
index 3687a514..124da30b 100644
--- a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts
+++ b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts
@@ -2,3 +2,4 @@ export * from './ellipse-low.renderer';
export * from './image-placeholder.renderer';
export * from './low-horizontal-line.renderer';
export * from './low-vertical-line.renderer';
+export * from './rectangle-low.renderer';
diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx
new file mode 100644
index 00000000..9fe27c44
--- /dev/null
+++ b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/rectangle-low.renderer.tsx
@@ -0,0 +1,31 @@
+import { ShapeModel } from '@/core/model';
+import { ShapeRendererProps } from '../model';
+import { RectangleLowShape } from '@/common/components/mock-components/front-low-wireframes-components';
+
+export const renderRectangleLow = (
+ shape: ShapeModel,
+ shapeRenderedProps: ShapeRendererProps
+) => {
+ const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+ shapeRenderedProps;
+
+ return (
+ <RectangleLowShape
+ 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}
+ otherProps={shape.otherProps}
+ />
+ );
+};
diff --git a/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts b/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts
index 2da8c34f..038d725f 100644
--- a/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts
+++ b/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts
@@ -17,4 +17,8 @@ export const mockLowWireframeCollection: ItemInfo[] = [
thumbnailSrc: '/low-wireframes/ellipseLow.svg',
type: 'ellipseLow',
},
+ {
+ thumbnailSrc: '/low-wireframes/rectangleLow.svg',
+ type: 'rectangleLow',
+ },
];
From 7a7b47a5aa7d30208940a5c6280e6d22ff69cb80 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 19:41:28 +0100
Subject: [PATCH 2/8] adding other props
---
.../rectangle-low-shape.tsx | 7 ++++++-
src/pods/canvas/model/shape-other-props.utils.ts | 1 +
2 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx b/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
index f9f0082a..80f560c8 100644
--- a/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
+++ b/src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx
@@ -4,6 +4,8 @@ import { ShapeProps } from '../shape.model';
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
import { Group, Rect } from 'react-konva';
import { useGroupShapeProps } from '../mock-components.utils';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
const rectangleLowShapeRestriction: ShapeSizeRestrictions = {
minWidth: 10,
@@ -40,6 +42,8 @@ export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+ const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+
const commonGroupProps = useGroupShapeProps(
props,
restrictedSize,
@@ -52,7 +56,8 @@ export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
<Rect
width={restrictedWidth}
height={restrictedHeight}
- stroke="black"
+ stroke={stroke}
+ dash={strokeStyle}
strokeWidth={6}
fill="white"
/>
diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
index a319a05e..a5dd36ae 100644
--- a/src/pods/canvas/model/shape-other-props.utils.ts
+++ b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -123,6 +123,7 @@ export const generateDefaultOtherProps = (
};
case 'horizontalLine':
case 'horizontalLineLow':
+ case 'rectangleLow':
case 'verticalLineLow':
case 'ellipseLow':
return {
From a64b554904fef1023c014d621e426ab1e161ac16 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 19:46:40 +0100
Subject: [PATCH 3/8] change ShapeDisplayName
---
src/core/model/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 826eabcc..6d86c6b8 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -151,7 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
horizontalLineLow: 'Horizontal Divider',
verticalLineLow: 'Vertical Divider',
ellipseLow: 'Ellipse',
- rectangleLow: 'Rectangle Placeholder',
+ rectangleLow: 'Rectangle',
};
export type EditType = 'input' | 'textarea' | 'imageupload';
From 7871f4305355fd8f13665034e2e2fb46f5dd50c9 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 20:07:56 +0100
Subject: [PATCH 4/8] rectangle getByAlt
---
src/core/model/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 6d86c6b8..9d811e70 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -151,7 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
horizontalLineLow: 'Horizontal Divider',
verticalLineLow: 'Vertical Divider',
ellipseLow: 'Ellipse',
- rectangleLow: 'Rectangle',
+ rectangleLow: 'Low rectangle',
};
export type EditType = 'input' | 'textarea' | 'imageupload';
From 8918af0598dcfe843cbf46dd3cc89e8fc0e55299 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 20:18:22 +0100
Subject: [PATCH 5/8] fixing rectangle issue
---
src/core/model/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 9d811e70..378ae59e 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -151,7 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
horizontalLineLow: 'Horizontal Divider',
verticalLineLow: 'Vertical Divider',
ellipseLow: 'Ellipse',
- rectangleLow: 'Low rectangle',
+ rectangleLow: 'Low square',
};
export type EditType = 'input' | 'textarea' | 'imageupload';
From 40917626681aae1bffe75e7cb95064b2282e64cd Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 20:25:03 +0100
Subject: [PATCH 6/8] Changing AltText from Rectangle to Square
---
src/core/model/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 378ae59e..5b55794d 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -151,7 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
horizontalLineLow: 'Horizontal Divider',
verticalLineLow: 'Vertical Divider',
ellipseLow: 'Ellipse',
- rectangleLow: 'Low square',
+ rectangleLow: 'Square Placeholder',
};
export type EditType = 'input' | 'textarea' | 'imageupload';
From a61775f694268083a465afab100fae3ca95f3083 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 20:34:19 +0100
Subject: [PATCH 7/8] fix e2e rectangle test
---
e2e/rectangle-shape.spec.ts | 4 ++--
src/core/model/index.ts | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/e2e/rectangle-shape.spec.ts b/e2e/rectangle-shape.spec.ts
index be35ae18..3e56bf85 100644
--- a/e2e/rectangle-shape.spec.ts
+++ b/e2e/rectangle-shape.spec.ts
@@ -12,13 +12,13 @@ test('has rectangle component', async ({ page }) => {
await page.goto('');
await page.getByText('Basic Shapes').click();
- await expect(page.getByAltText('Rectangle')).toBeVisible();
+ await expect(page.getByAltText(/^Rectangle$/)).toBeVisible();
});
test('can add rectangle component to canvas', async ({ page }) => {
await page.goto('');
await page.getByText('Basic Shapes').click();
- const component = page.getByAltText('Rectangle');
+ const component = page.getByAltText(/^Rectangle$/);
const position = await getLocatorPosition(component);
await dragAndDrop(page, position, {
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 5b55794d..826eabcc 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -151,7 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
horizontalLineLow: 'Horizontal Divider',
verticalLineLow: 'Vertical Divider',
ellipseLow: 'Ellipse',
- rectangleLow: 'Square Placeholder',
+ rectangleLow: 'Rectangle Placeholder',
};
export type EditType = 'input' | 'textarea' | 'imageupload';
From e0d8dabab66781735219d65ce52a3f0bb5bd436b Mon Sep 17 00:00:00 2001
From: Braulio <braulio.diez@gmail.com>
Date: Sat, 29 Mar 2025 18:42:51 +0100
Subject: [PATCH 8/8] update rectangle thumbnail
---
public/low-wireframes/rectangleLow.svg | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/public/low-wireframes/rectangleLow.svg b/public/low-wireframes/rectangleLow.svg
index 642807a7..bfe76d05 100644
--- a/public/low-wireframes/rectangleLow.svg
+++ b/public/low-wireframes/rectangleLow.svg
@@ -1,3 +1,3 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="6">
- <rect width="200" height="200" stroke="black" fill="none"/>
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+ <rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="4" fill="none"/>
</svg>
\ No newline at end of file