Feature/#287 image aspect ratio

src/common/components/front-basic-sapes/image-shape/components/no-image.component.tsx

@@ -1,4 +1,5 @@
-import { Group, Rect, Text } from 'react-konva';
+import { Group, Text, Image as KonvaImage } from 'react-konva';
+import useImage from 'use-image';
 
 interface Props {
   width: number;
@@ -7,18 +8,11 @@ interface Props {
 
 export const NoImageSelected: React.FC<Props> = props => {
   const { width, height } = props;
+  const [image] = useImage('/shapes/image.svg');
 
   return (
     <Group x={0} y={0} width={width} height={height}>
-      <Rect
-        x={0}
-        y={0}
-        width={width}
-        height={height}
-        strokeWidth={2}
-        stroke="black"
-        fill="white"
-      />
+      <KonvaImage x={0} y={0} width={width} height={height} image={image} />
       <Text
         x={0}
         y={0}
@@ -30,6 +24,7 @@ export const NoImageSelected: React.FC<Props> = props => {
         align="center"
         ellipsis={true}
         verticalAlign="middle"
+        textDecoration="underline"
       />
     </Group>
   );

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

@@ -13,8 +13,8 @@ const imageShapeRestrictions: ShapeSizeRestrictions = {
   minHeight: 10,
   maxWidth: -1,
   maxHeight: -1,
-  defaultWidth: 520,
-  defaultHeight: 520,
+  defaultWidth: 300,
+  defaultHeight: 300,
 };
 
 const shapeType: ShapeType = 'image';
@@ -42,7 +42,12 @@ export const ImageShape = forwardRef<any, ShapeProps>((props, ref) => {
       imageRef.current.filters([]); // Remove filter
       imageRef.current.getLayer()?.batchDraw(); // Redraw
     }
-  }, [image, otherProps?.imageBlackAndWhite]);
+  }, [
+    image,
+    otherProps?.imageBlackAndWhite,
+    restrictedWidth,
+    restrictedHeight,
+  ]);
 
   return (
     <Group

src/common/components/inline-edit/components/image-upload.widget.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useRef } from 'react';
 import classes from './image-upload.widget.module.css';
+import { useCanvasContext } from '@/core/providers';
 
 interface Props {
   onImageUploaded: (srcData: string) => void;
@@ -9,14 +10,37 @@ export const ImageUploadWidget = forwardRef<HTMLInputElement, Props>(
   (props, ref) => {
     const { onImageUploaded } = props;
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const { selectionInfo, updateShapeSizeAndPosition, shapes } =
+      useCanvasContext();
 
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
       if (file) {
         const reader = new FileReader();
         reader.onloadend = () => {
           if (reader.result) {
-            onImageUploaded(reader.result as string);
+            const img = new Image();
+            img.src = reader.result as string;
+
+            img.onload = () => {
+              const aspectRatio = img.width / img.height;
+              const imageSelected = shapes.find(
+                shape => shape.id === selectionInfo.selectedShapesIds[0]
+              );
+              if (imageSelected) {
+                updateShapeSizeAndPosition(
+                  imageSelected.id,
+                  { x: imageSelected.x, y: imageSelected.y },
+                  {
+                    width: imageSelected.width,
+                    height: imageSelected.width / aspectRatio,
+                  },
+                  false
+                );
+              }
+
+              onImageUploaded(reader.result as string);
+            };
           }
         };
         reader.readAsDataURL(file);

src/pods/canvas/use-drop-image-from-desktop.tsx

@@ -5,11 +5,13 @@ import {
   getScrollFromDiv,
 } from './canvas.util';
 import { calculateShapeOffsetToXDropCoordinate } from './use-monitor.business';
+import { getImageShapeSizeRestrictions } from '@/common/components/front-basic-sapes';
 
 export const useDropImageFromDesktop = (
   dropRef: React.MutableRefObject<HTMLDivElement>
 ) => {
-  const { addNewShape, stageRef } = useCanvasContext();
+  const { addNewShape, updateShapeSizeAndPosition, stageRef } =
+    useCanvasContext();
 
   // TODO: #231  move this to utils / business
   // https://github.com/Lemoncode/quickmock/issues/231
@@ -59,7 +61,19 @@ export const useDropImageFromDesktop = (
             calculateShapeOffsetToXDropCoordinate(konvaCoord.x, 'image');
           const positionY = konvaCoord.y;
 
-          addNewShape('image', positionX, positionY, { imageSrc: img.src });
+          const newImg = addNewShape('image', positionX, positionY, {
+            imageSrc: img.src,
+          });
+
+          // Preserves aspect ratio
+          const aspectRatio = img.width / img.height;
+          const defaultWidth = getImageShapeSizeRestrictions().defaultWidth;
+          updateShapeSizeAndPosition(
+            newImg,
+            { x: positionX, y: positionY },
+            { width: defaultWidth, height: defaultWidth / aspectRatio },
+            false
+          );
         };
       };
 

src/pods/properties/components/image-src/image-selector.component.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import classes from './image-selector.component.module.css';
+import { useCanvasContext } from '@/core/providers';
 
 interface Props {
   label: string;
@@ -9,6 +10,8 @@ interface Props {
 export const ImageSrc: React.FC<Props> = props => {
   const { label, onChange } = props;
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const { selectionInfo, updateShapeSizeAndPosition, shapes } =
+    useCanvasContext();
 
   const handleClick = () => {
     if (fileInputRef.current) {
@@ -22,7 +25,28 @@ export const ImageSrc: React.FC<Props> = props => {
       const reader = new FileReader();
       reader.onloadend = () => {
         if (reader.result) {
-          onChange(reader.result as string);
+          const img = new Image();
+          img.src = reader.result as string;
+
+          img.onload = () => {
+            const aspectRatio = img.width / img.height;
+            const imageSelected = shapes.find(
+              shape => shape.id === selectionInfo.selectedShapesIds[0]
+            );
+            if (imageSelected) {
+              updateShapeSizeAndPosition(
+                imageSelected.id,
+                { x: imageSelected.x, y: imageSelected.y },
+                {
+                  width: imageSelected.width,
+                  height: imageSelected.width / aspectRatio,
+                },
+                false
+              );
+            }
+
+            onChange(reader.result as string);
+          };
         }
       };
       reader.readAsDataURL(file);