@pie-element/hotspot 11.1.2-next.5 → 11.1.3

package/configure/src/shapes/polygon.js

@@ -0,0 +1,81 @@
+export class PolygonShape {
+  static name = 'polygon'
+
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const newPolygon = {
+      id: 'newPolygon',
+      points: [{ x: e.evt.layerX, y: e.evt.layerY }],
+      group: 'polygons',
+      index: newShapes.length,
+    };
+
+    newShapes.push(newPolygon);
+
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newPolygon.id,
+    };
+  }
+
+  static addPoint(state, e, onPolygonComplete) {
+    // Number of pixels allowed to determine if the first point was clicked
+    const clickDelta = 5;
+
+    const shapesCopy = JSON.parse(JSON.stringify(state.shapes));
+    const currentShapeIndex = shapesCopy.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (currentShapeIndex !== -1) {
+      const currentShape = shapesCopy[currentShapeIndex];
+      if (currentShape.points && Array.isArray(currentShape.points)) {
+        const firstPoint = currentShape.points[0];
+
+        // If click is close enough to the first point (within clickDelta pixels), close the polygon
+        if (
+          Math.abs(firstPoint.x - e.evt.layerX) <= clickDelta &&
+          Math.abs(firstPoint.y - e.evt.layerY) <= clickDelta
+        ) {
+          return PolygonShape.finalizeCreation(state, onPolygonComplete);
+        }
+
+        currentShape.points.push({ x: e.evt.layerX, y: e.evt.layerY });
+        shapesCopy[currentShapeIndex] = currentShape;
+
+        return {
+          shapes: shapesCopy,
+        };
+      }
+    }
+    return state;
+  }
+
+  static finalizeCreation(state, onPolygonComplete) {
+    const { shapes } = state;
+    const tempShapes = [...shapes];
+    const highestId = Math.max(...state.shapes.map((shape) => parseInt(shape.id) || 0), 0);
+
+    const polygonIndex = tempShapes.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (polygonIndex !== -1 && tempShapes[polygonIndex].points.length > 2) {
+      const completedPolygon = tempShapes[polygonIndex];
+
+      completedPolygon.id = `${highestId + 1}`;
+      onPolygonComplete(tempShapes);
+
+      return {
+        isDrawing: false,
+        shapes: tempShapes,
+        isDrawingShapeId: undefined,
+      };
+    }
+
+    return state;
+  }
+
+  // No need to update anything on mouse move,
+  // but it's here if we need to add any logic later.
+  static handleMouseMove(state, e) {
+    return state;
+  }
+}

package/configure/src/shapes/rectagle.js

@@ -0,0 +1,82 @@
+export class RectangleShape {
+  static name = 'rectangle'
+
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0) || 0;
+
+    const newRectangle = {
+      id: `${highestId + 1}`,
+      height: 0,
+      width: 0,
+      x: e.evt.layerX,
+      y: e.evt.layerY,
+      group: 'rectangles',
+      index: newShapes.length,
+    };
+
+    newShapes.push(newRectangle);
+
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newRectangle.id,
+    };
+  }
+
+  static finalizeCreation(state, props) {
+    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (currentShapeIndex !== -1) {
+      const currentShape = state.shapes[currentShapeIndex];
+
+      // Check if the shape is a valid rectangle (has more than 0 width and height) before finalizing
+      if (currentShape.width > 0 && currentShape.height > 0) {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+        };
+      } else {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),
+        };
+      }
+    }
+
+    // Return current state if not drawing a rectangle
+    return {
+      ...state,
+      isDrawing: false,
+      stateShapes: false,
+      isDrawingShapeId: undefined,
+    };
+  }
+
+  static handleMouseMove(state, e) {
+    const { isDrawing, isDrawingShapeId, shapes } = state;
+
+    if (isDrawing) {
+      const tempShapes = [...shapes];
+      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);
+
+      if (resizingShapeIndex !== -1) {
+        const resizingShape = tempShapes[resizingShapeIndex];
+
+        resizingShape.width = e.evt.layerX - resizingShape.x;
+        resizingShape.height = e.evt.layerY - resizingShape.y;
+
+        return {
+          shapes: tempShapes,
+        };
+      }
+    }
+
+    return state;
+  }
+}

package/configure/src/shapes/utils.js

@@ -0,0 +1,16 @@
+import { CircleShape } from './circle';
+import { PolygonShape } from './polygon';
+import { RectangleShape } from './rectagle';
+
+export const SUPPORTED_SHAPES = {
+  CIRCLE: CircleShape.name,
+  POLYGON: PolygonShape.name,
+  RECTANGLE: RectangleShape.name,
+  NONE: 'none',
+};
+
+export const SHAPE_GROUPS = {
+  CIRCLES: 'circles',
+  POLYGONS: 'polygons',
+  RECTANGLES: 'rectangles',
+};

package/configure/src/upload-control.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Button from './button';
+
+const UploadControl = ({ label, onInputClick, onUploadImage, setRef }) => (
+  <>
+    <Button label={label} onClick={onInputClick} />
+    <input
+      accept="image/*"
+      style={{ display: 'none' }}
+      onChange={onUploadImage}
+      ref={(ref) => {
+        setRef(ref);
+      }}
+      type="file"
+    />
+  </>
+);
+
+UploadControl.propTypes = {
+  label: PropTypes.string.isRequired,
+  onInputClick: PropTypes.func.isRequired,
+  onUploadImage: PropTypes.func.isRequired,
+  setRef: PropTypes.func.isRequired,
+};
+
+UploadControl.defaultProps = {
+  classNameButton: '',
+  classNameSection: '',
+};
+
+export default UploadControl;

package/configure/src/utils.js

@@ -0,0 +1,210 @@
+import { cloneDeep } from 'lodash-es';
+import { SHAPE_GROUPS } from './shapes';
+
+const updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
+  // if we want to keep image aspect ratio
+  if (keepAspectRatio) {
+    const imageAspectRatio = initialDim.width / initialDim.height;
+
+    if (resizeType === 'height') {
+      // if we want to change image height => we update the width accordingly
+      return {
+        width: nextDim.height * imageAspectRatio,
+        height: nextDim.height,
+      };
+    }
+
+    // if we want to change image width => we update the height accordingly
+    return {
+      width: nextDim.width,
+      height: nextDim.width / imageAspectRatio,
+    };
+  }
+
+  // if we don't want to keep aspect ratio, we just update both values
+  return {
+    width: nextDim.width,
+    height: nextDim.height,
+  };
+};
+
+// referenceInitialValue = the initial value of the Stage
+// referenceNextValue = the next value of the Stage
+// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage
+const getDelta = (referenceInitialValue, referenceNextValue, currentValue) =>
+  (referenceNextValue / referenceInitialValue) * currentValue;
+
+const getUpdatedRectangle = (initialDim, nextDim, shape) => ({
+  ...shape,
+  width: getDelta(initialDim.width, nextDim.width, shape.width),
+  height: getDelta(initialDim.height, nextDim.height, shape.height),
+  x: getDelta(initialDim.width, nextDim.width, shape.x),
+  y: getDelta(initialDim.height, nextDim.height, shape.y),
+});
+
+const getUpdatedCircles = (initialDim, nextDim, shape) => ({
+  ...shape,
+  radius: getDelta(initialDim.width, nextDim.width, shape.radius),
+  x: getDelta(initialDim.width, nextDim.width, shape.x),
+  y: getDelta(initialDim.height, nextDim.height, shape.y),
+});
+
+const getUpdatedPolygon = (initialDim, nextDim, shape) => ({
+  ...shape,
+  points: shape.points.map((point) => ({
+    x: getDelta(initialDim.width, nextDim.width, point.x),
+    y: getDelta(initialDim.height, nextDim.height, point.y),
+  })),
+});
+
+// initialDim = the initial dimensions: { width, height } of the Stage
+// nextDim = the next dimensions: { width, height } of the Stage
+// shapes = array of shapes that have to be re-sized and re-positioned
+const getUpdatedShapes = (initialDim, nextDim, shapes) => {
+  return shapes.map((shape) => {
+    if (shape.group === SHAPE_GROUPS.RECTANGLES) {
+      return getUpdatedRectangle(initialDim, nextDim, shape);
+    }
+
+    if (shape.group === SHAPE_GROUPS.POLYGONS) {
+      return getUpdatedPolygon(initialDim, nextDim, shape);
+    }
+
+    if (shape.group === SHAPE_GROUPS.CIRCLES) {
+      return getUpdatedCircles(initialDim, nextDim, shape);
+    }
+  });
+};
+
+// converts shapes map to shapes array
+// example:
+// from: { rectangles: [r1], polygons: [p1, p2]}
+// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]
+// if a shape has index defined, keep it, otherwise initialize it
+// index is used for the UNDO function
+const getAllShapes = (shapesMap) => {
+  shapesMap = shapesMap || {};
+  const shapesArray = [];
+  const shapesKeys = Object.keys(shapesMap);
+
+  return shapesKeys.length
+    ? shapesKeys.reduce(
+        (acc, currentShapeKey) =>
+          acc.concat(
+            shapesMap[currentShapeKey]
+              ? shapesMap[currentShapeKey].map((shape, index) => ({
+                  ...shape,
+                  group: currentShapeKey,
+                  index: shape.index || acc.length + index,
+                }))
+              : [],
+          ),
+        shapesArray,
+      )
+    : shapesArray;
+};
+
+// converts shapes array to shapes map
+// is the reverse of getAllShapes function
+// example:
+// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]
+// to: { rectangles: [r1], polygons: [p1, p2]}
+const groupShapes = (shapesArray) => {
+  shapesArray = shapesArray || [];
+  const shapesMap = {
+    rectangles: [],
+    polygons: [],
+    circles: [],
+  };
+
+  if (shapesArray.length) {
+    return shapesArray.reduce((acc, { group, ...shapeProps }) => {
+      acc[group] = [...(acc[group] || []), shapeProps];
+      return acc;
+    }, shapesMap);
+  }
+
+  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;
+
+  const shapesMessage =
+    `\nThere should be at least ${minShapes} ` + (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';
+
+  const selectionsMessage =
+    '\nThere should be at least 1 ' +
+    (maxSelections ? `and at most ${maxSelections} ` : '') +
+    'shape' +
+    (maxSelections ? 's' : '') +
+    ' selected.';
+
+  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;
+
+  return message;
+};
+
+export {
+  calculate,
+  isPointInsidePolygon,
+  updateImageDimensions,
+  generateValidationMessage,
+  getUpdatedShapes,
+  getAllShapes,
+  groupShapes,
+  getUpdatedRectangle,
+  getUpdatedPolygon,
+};