feat(hotspot): refactor code where needed pd-597

Author: arimieandreea

packages/hotspot/configure/src/DeleteWidget.jsx

@@ -3,58 +3,11 @@ import PropTypes from 'prop-types';
 import { Group } from 'react-konva';
 import { faDelete } from './icons';
 import Image from './image';
-
-function calculate(polygonPoints) {
-  let minX = polygonPoints[0].x;
-  let minY = polygonPoints[0].y;
-  let maxX = polygonPoints[0].x;
-  let maxY = polygonPoints[0].y;
-
-  polygonPoints.forEach((point) => {
-    if (point.x < minX) minX = point.x;
-    if (point.x > maxX) maxX = point.x;
-    if (point.y < minY) minY = point.y;
-    if (point.y > maxY) maxY = point.y;
-  });
-
-  // Find a suitable position for the text element within the polygon
-  let textX, textY;
-
-  for (let x = minX; x <= maxX - 20; x++) {
-    for (let y = maxY - 20; y > minY; y--) {
-      // Check if the text element's position (x, y) is within the polygon
-      if (isPointInsidePolygon(polygonPoints, x, y)) {
-        textX = x - 10;
-        textY = y;
-        break;
-      }
-    }
-  }
-
-  return { x: textX, y: textY };
-}
-
-function isPointInsidePolygon(polygon, x, y) {
-  let inside = false;
-
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i].x;
-    const yi = polygon[i].y;
-    const xj = polygon[j].x;
-    const yj = polygon[j].y;
-
-    const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-
-    if (intersect) {
-      inside = !inside;
-    }
-  }
-
-  return inside;
-}
+import { calculate } from './utils';
 
 const DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {
   let positionX, positionY;
+  // if points exist we have an irregular form (polygon) and position should be computed
   if (points) {
     const { x, y } = calculate(points);
     positionX = x;

packages/hotspot/configure/src/hotspot-polygon.jsx

@@ -132,12 +132,11 @@ class PolComponent extends React.Component {
       return acc;
     }, []);
 
-    if (updateModel) {
-      this.setState({ points: newPoints, ...this.getOffset(newPoints), isDragging: false });
-      onDragEnd(id, { points: newPoints });
-    } else {
-      this.setState({ points: newPoints, ...this.getOffset(newPoints) });
-    }
+    this.setState({
+      points: newPoints,
+      ...this.getOffset(newPoints),
+      isDragging: updateModel ? false : this.state.isDragging,
+    });
   };
 
   handleOnDragVertex = (e, changedIndex, updateModel) => {
@@ -148,11 +147,14 @@ class PolComponent extends React.Component {
       index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,
     );
 
+    this.setState({
+      points: newPoints,
+      ...this.getOffset(newPoints),
+      isDragging: updateModel ? false : this.state.isDragging,
+    });
+
     if (updateModel) {
       onDragEnd(id, { points: newPoints });
-      this.setState({ points: newPoints, ...this.getOffset(newPoints), isDragging: false });
-    } else {
-      this.setState({ points: newPoints, ...this.getOffset(newPoints) });
     }
   };
 

packages/hotspot/configure/src/utils.js

@@ -114,6 +114,58 @@ const groupShapes = (shapesArray) => {
   return cloneDeep(shapesMap);
 };
 
+const isPointInsidePolygon = (polygon, x, y) => {
+  let inside = false;
+
+  if (!polygon || polygon.length <= 0) {
+    return inside;
+  }
+
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+
+    const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+
+    if (intersect) {
+      inside = !inside;
+    }
+  }
+
+  return inside;
+};
+
+const calculate = (polygonPoints) => {
+  if (!polygonPoints || polygonPoints.length <= 0) {
+    return { x: 0, y: 0 };
+  }
+
+  const xPoints = polygonPoints.map((point) => point.x);
+  const yPoints = polygonPoints.map((point) => point.y);
+  const minX = Math.min(...xPoints);
+  const minY = Math.min(...yPoints);
+  const maxX = Math.max(...xPoints);
+  const maxY = Math.max(...yPoints);
+
+  // Find a suitable position for the text element within the polygon
+  let textX, textY;
+
+  for (let x = minX; x <= maxX - 20; x++) {
+    for (let y = maxY - 20; y > minY; y--) {
+      // Check if the text element's position (x, y) is within the polygon
+      if (isPointInsidePolygon(polygonPoints, x, y)) {
+        textX = x - 10;
+        textY = y;
+        break;
+      }
+    }
+  }
+
+  return { x: textX, y: textY };
+};
+
 const generateValidationMessage = (config) => {
   const { minShapes, maxShapes, maxSelections } = config;
 
@@ -133,6 +185,8 @@ const generateValidationMessage = (config) => {
 };
 
 export {
+  calculate,
+  isPointInsidePolygon,
   updateImageDimensions,
   generateValidationMessage,
   getUpdatedShapes,