small refinements

src/common/components/front-rich-components/video-player.tsx

@@ -9,8 +9,8 @@ const videoPlayerShapeSizeRestrictions: ShapeSizeRestrictions = {
   minHeight: 150,
   maxWidth: -1,
   maxHeight: -1,
-  defaultWidth: 800,
-  defaultHeight: 600,
+  defaultWidth: 600,
+  defaultHeight: 400,
 };
 
 export const getVideoPlayerShapeSizeRestrictions = (): ShapeSizeRestrictions =>

src/pods/canvas/canvas.model.ts

@@ -21,7 +21,7 @@ import { getLabelSizeRestrictions } from '@/common/components/front-components/l
 import { getRectangleShapeSizeRestrictions } from '@/common/components/front-basic-sapes';
 import { getVideoPlayerShapeSizeRestrictions } from '@/common/components/front-rich-components';
 
-const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
+export const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
   switch (shapeType) {
     case 'label':
       return {

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

@@ -16,6 +16,7 @@ export const renderRectangle = (
       ref={shapeRefs.current[shape.id]}
       x={shape.x}
       y={shape.y}
+      name="shape"
       width={shape.width}
       height={shape.height}
       draggable

src/pods/canvas/shape-renderer/simple-rich-components/video-player.renderer.tsx

@@ -16,6 +16,7 @@ export const renderVideoPlayer = (
       ref={shapeRefs.current[shape.id]}
       x={shape.x}
       y={shape.y}
+      name="shape"
       width={shape.width}
       height={shape.height}
       draggable

src/pods/canvas/use-monitor-shape.hook.ts

@@ -8,6 +8,7 @@ import {
 } from './canvas.util';
 import Konva from 'konva';
 import { ShapeType } from '@/core/model';
+import { calculateShapeOffsetToXDropCoordinate } from './use-monitor.business';
 
 export const useMonitorShape = (
   dropRef: React.MutableRefObject<null>,
@@ -23,6 +24,7 @@ export const useMonitorShape = (
         invariant(destination);
 
         const type = source.data.type as ShapeType;
+
         const screenPosition =
           extractScreenCoordinatesFromPragmaticLocation(location);
 
@@ -47,7 +49,9 @@ export const useMonitorShape = (
             }
           );
 
-          positionX = konvaCoord.x;
+          positionX =
+            konvaCoord.x -
+            calculateShapeOffsetToXDropCoordinate(konvaCoord.x, type);
           positionY = konvaCoord.y;
         }
         addNewShape(type, positionX, positionY);

src/pods/canvas/use-monitor.business.ts

@@ -0,0 +1,13 @@
+import { ShapeType } from '@/core/model';
+import { getDefaultSizeFromShape } from './canvas.model';
+
+// TODO: #156 Add unit tests to this funcion
+export const calculateShapeOffsetToXDropCoordinate = (
+  cordinateX: number,
+  shapeType: ShapeType
+): number => {
+  const defaultShapeSize = getDefaultSizeFromShape(shapeType);
+  const offset = defaultShapeSize.width / 2;
+
+  return cordinateX - offset > 0 ? offset : 0;
+};