@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.17

package/configure/src/shapes/polygon.js

@@ -1,81 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,210 +0,0 @@
-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,
-};