@pie-element/hotspot 11.1.2-next.2 → 11.1.2

package/configure/lib/shapes/rectagle.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RectangleShape = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+class RectangleShape {
+  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;
+  }
+}
+exports.RectangleShape = RectangleShape;
+(0, _defineProperty2.default)(RectangleShape, "name", 'rectangle');
+//# sourceMappingURL=rectagle.js.map

package/configure/lib/shapes/rectagle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectagle.js","names":["RectangleShape","create","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newRectangle","height","width","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","finalizeCreation","state","props","currentShapeIndex","findIndex","currentShape","stateShapes","undefined","filter","handleMouseMove","tempShapes","resizingShapeIndex","resizingShape","exports","_defineProperty2","default"],"sources":["../../src/shapes/rectagle.js"],"sourcesContent":["export class RectangleShape {\n  static name = 'rectangle'\n\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0) || 0;\n\n    const newRectangle = {\n      id: `${highestId + 1}`,\n      height: 0,\n      width: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'rectangles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newRectangle);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newRectangle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n\n      // Check if the shape is a valid rectangle (has more than 0 width and height) before finalizing\n      if (currentShape.width > 0 && currentShape.height > 0) {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n        };\n      } else {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),\n        };\n      }\n    }\n\n    // Return current state if not drawing a rectangle\n    return {\n      ...state,\n      isDrawing: false,\n      stateShapes: false,\n      isDrawingShapeId: undefined,\n    };\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        resizingShape.width = e.evt.layerX - resizingShape.x;\n        resizingShape.height = e.evt.layerY - resizingShape.y;\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/shapes/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SUPPORTED_SHAPES = exports.SHAPE_GROUPS = void 0;
+var _circle = require("./circle");
+var _polygon = require("./polygon");
+var _rectagle = require("./rectagle");
+const SUPPORTED_SHAPES = exports.SUPPORTED_SHAPES = {
+  CIRCLE: _circle.CircleShape.name,
+  POLYGON: _polygon.PolygonShape.name,
+  RECTANGLE: _rectagle.RectangleShape.name,
+  NONE: 'none'
+};
+const SHAPE_GROUPS = exports.SHAPE_GROUPS = {
+  CIRCLES: 'circles',
+  POLYGONS: 'polygons',
+  RECTANGLES: 'rectangles'
+};
+//# sourceMappingURL=utils.js.map

package/configure/lib/shapes/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["_circle","require","_polygon","_rectagle","SUPPORTED_SHAPES","exports","CIRCLE","CircleShape","name","POLYGON","PolygonShape","RECTANGLE","RectangleShape","NONE","SHAPE_GROUPS","CIRCLES","POLYGONS","RECTANGLES"],"sources":["../../src/shapes/utils.js"],"sourcesContent":["import { CircleShape } from './circle';\nimport { PolygonShape } from './polygon';\nimport { RectangleShape } from './rectagle';\n\nexport const SUPPORTED_SHAPES = {\n  CIRCLE: CircleShape.name,\n  POLYGON: PolygonShape.name,\n  RECTANGLE: RectangleShape.name,\n  NONE: 'none',\n};\n\nexport const SHAPE_GROUPS = {\n  CIRCLES: 'circles',\n  POLYGONS: 'polygons',\n  RECTANGLES: 'rectangles',\n};\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEO,MAAMG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAC9BE,MAAM,EAAEC,mBAAW,CAACC,IAAI;EACxBC,OAAO,EAAEC,qBAAY,CAACF,IAAI;EAC1BG,SAAS,EAAEC,wBAAc,CAACJ,IAAI;EAC9BK,IAAI,EAAE;AACR,CAAC;AAEM,MAAMC,YAAY,GAAAT,OAAA,CAAAS,YAAA,GAAG;EAC1BC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE;AACd,CAAC","ignoreList":[]}

package/configure/lib/upload-control.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _button = _interopRequireDefault(require("./button"));
+const UploadControl = ({
+  label,
+  onInputClick,
+  onUploadImage,
+  setRef
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  label: label,
+  onClick: onInputClick
+}), /*#__PURE__*/_react.default.createElement("input", {
+  accept: "image/*",
+  style: {
+    display: 'none'
+  },
+  onChange: onUploadImage,
+  ref: ref => {
+    setRef(ref);
+  },
+  type: "file"
+}));
+UploadControl.propTypes = {
+  label: _propTypes.default.string.isRequired,
+  onInputClick: _propTypes.default.func.isRequired,
+  onUploadImage: _propTypes.default.func.isRequired,
+  setRef: _propTypes.default.func.isRequired
+};
+UploadControl.defaultProps = {
+  classNameButton: '',
+  classNameSection: ''
+};
+var _default = exports.default = UploadControl;
+//# sourceMappingURL=upload-control.js.map

package/configure/lib/upload-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-control.js","names":["_react","_interopRequireDefault","require","_propTypes","_button","UploadControl","label","onInputClick","onUploadImage","setRef","default","createElement","Fragment","onClick","accept","style","display","onChange","ref","type","propTypes","PropTypes","string","isRequired","func","defaultProps","classNameButton","classNameSection","_default","exports"],"sources":["../src/upload-control.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from './button';\n\nconst UploadControl = ({ label, onInputClick, onUploadImage, setRef }) => (\n  <>\n    <Button label={label} onClick={onInputClick} />\n    <input\n      accept=\"image/*\"\n      style={{ display: 'none' }}\n      onChange={onUploadImage}\n      ref={(ref) => {\n        setRef(ref);\n      }}\n      type=\"file\"\n    />\n  </>\n);\n\nUploadControl.propTypes = {\n  label: PropTypes.string.isRequired,\n  onInputClick: PropTypes.func.isRequired,\n  onUploadImage: PropTypes.func.isRequired,\n  setRef: PropTypes.func.isRequired,\n};\n\nUploadControl.defaultProps = {\n  classNameButton: '',\n  classNameSection: '',\n};\n\nexport default UploadControl;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,MAAMG,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC,YAAY;EAAEC,aAAa;EAAEC;AAAO,CAAC,kBACnET,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAAAX,MAAA,CAAAU,OAAA,CAAAE,QAAA,qBACEZ,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,OAAA,CAAAM,OAAM;EAACJ,KAAK,EAAEA,KAAM;EAACO,OAAO,EAAEN;AAAa,CAAE,CAAC,eAC/CP,MAAA,CAAAU,OAAA,CAAAC,aAAA;EACEG,MAAM,EAAC,SAAS;EAChBC,KAAK,EAAE;IAAEC,OAAO,EAAE;EAAO,CAAE;EAC3BC,QAAQ,EAAET,aAAc;EACxBU,GAAG,EAAGA,GAAG,IAAK;IACZT,MAAM,CAACS,GAAG,CAAC;EACb,CAAE;EACFC,IAAI,EAAC;AAAM,CACZ,CACD,CACH;AAEDd,aAAa,CAACe,SAAS,GAAG;EACxBd,KAAK,EAAEe,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClChB,YAAY,EAAEc,kBAAS,CAACG,IAAI,CAACD,UAAU;EACvCf,aAAa,EAAEa,kBAAS,CAACG,IAAI,CAACD,UAAU;EACxCd,MAAM,EAAEY,kBAAS,CAACG,IAAI,CAACD;AACzB,CAAC;AAEDlB,aAAa,CAACoB,YAAY,GAAG;EAC3BC,eAAe,EAAE,EAAE;EACnBC,gBAAgB,EAAE;AACpB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnB,OAAA,GAEaL,aAAa","ignoreList":[]}

package/configure/lib/utils.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateImageDimensions = exports.isPointInsidePolygon = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPolygon = exports.getAllShapes = exports.generateValidationMessage = exports.calculate = void 0;
+var _lodashEs = require("lodash-es");
+var _shapes = require("./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
+exports.updateImageDimensions = updateImageDimensions;
+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)
+});
+exports.getUpdatedRectangle = getUpdatedRectangle;
+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
+exports.getUpdatedPolygon = getUpdatedPolygon;
+const getUpdatedShapes = (initialDim, nextDim, shapes) => {
+  return shapes.map(shape => {
+    if (shape.group === _shapes.SHAPE_GROUPS.RECTANGLES) {
+      return getUpdatedRectangle(initialDim, nextDim, shape);
+    }
+    if (shape.group === _shapes.SHAPE_GROUPS.POLYGONS) {
+      return getUpdatedPolygon(initialDim, nextDim, shape);
+    }
+    if (shape.group === _shapes.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
+exports.getUpdatedShapes = getUpdatedShapes;
+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]}
+exports.getAllShapes = getAllShapes;
+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 (0, _lodashEs.cloneDeep)(shapesMap);
+};
+exports.groupShapes = groupShapes;
+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;
+};
+exports.isPointInsidePolygon = isPointInsidePolygon;
+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
+  };
+};
+exports.calculate = calculate;
+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;
+};
+exports.generateValidationMessage = generateValidationMessage;
+//# sourceMappingURL=utils.js.map

package/configure/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["_lodashEs","require","_shapes","updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","exports","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedCircles","radius","getUpdatedPolygon","points","map","point","getUpdatedShapes","shapes","group","SHAPE_GROUPS","RECTANGLES","POLYGONS","CIRCLES","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","circles","shapeProps","cloneDeep","isPointInsidePolygon","polygon","inside","i","j","xi","yi","xj","yj","intersect","calculate","polygonPoints","xPoints","yPoints","minX","Math","min","minY","maxX","max","maxY","textX","textY","generateValidationMessage","config","minShapes","maxShapes","maxSelections","shapesMessage","selectionsMessage","message"],"sources":["../src/utils.js"],"sourcesContent":["import { cloneDeep } from 'lodash-es';\nimport { SHAPE_GROUPS } from './shapes';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height,\n      };\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio,\n    };\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height,\n  };\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) =>\n  (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedCircles = (initialDim, nextDim, shape) => ({\n  ...shape,\n  radius: getDelta(initialDim.width, nextDim.width, shape.radius),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPolygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map((point) => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  })),\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map((shape) => {\n    if (shape.group === SHAPE_GROUPS.RECTANGLES) {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === SHAPE_GROUPS.POLYGONS) {\n      return getUpdatedPolygon(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === SHAPE_GROUPS.CIRCLES) {\n      return getUpdatedCircles(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce(\n        (acc, currentShapeKey) =>\n          acc.concat(\n            shapesMap[currentShapeKey]\n              ? shapesMap[currentShapeKey].map((shape, index) => ({\n                  ...shape,\n                  group: currentShapeKey,\n                  index: shape.index || acc.length + index,\n                }))\n              : [],\n          ),\n        shapesArray,\n      )\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: [],\n    circles: [],\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\nconst isPointInsidePolygon = (polygon, x, y) => {\n  let inside = false;\n\n  if (!polygon || polygon.length <= 0) {\n    return inside;\n  }\n\n  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n    const xi = polygon[i].x;\n    const yi = polygon[i].y;\n    const xj = polygon[j].x;\n    const yj = polygon[j].y;\n\n    const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;\n\n    if (intersect) {\n      inside = !inside;\n    }\n  }\n\n  return inside;\n};\n\nconst calculate = (polygonPoints) => {\n  if (!polygonPoints || polygonPoints.length <= 0) {\n    return { x: 0, y: 0 };\n  }\n\n  const xPoints = polygonPoints.map((point) => point.x);\n  const yPoints = polygonPoints.map((point) => point.y);\n  const minX = Math.min(...xPoints);\n  const minY = Math.min(...yPoints);\n  const maxX = Math.max(...xPoints);\n  const maxY = Math.max(...yPoints);\n\n  // Find a suitable position for the text element within the polygon\n  let textX, textY;\n\n  for (let x = minX; x <= maxX - 20; x++) {\n    for (let y = maxY - 20; y > minY; y--) {\n      // Check if the text element's position (x, y) is within the polygon\n      if (isPointInsidePolygon(polygonPoints, x, y)) {\n        textX = x - 10;\n        textY = y;\n        break;\n      }\n    }\n  }\n\n  return { x: textX, y: textY };\n};\n\nconst generateValidationMessage = (config) => {\n  const { minShapes, maxShapes, maxSelections } = config;\n\n  const shapesMessage =\n    `\\nThere should be at least ${minShapes} ` + (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';\n\n  const selectionsMessage =\n    '\\nThere should be at least 1 ' +\n    (maxSelections ? `and at most ${maxSelections} ` : '') +\n    'shape' +\n    (maxSelections ? 's' : '') +\n    ' selected.';\n\n  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;\n\n  return message;\n};\n\nexport {\n  calculate,\n  isPointInsidePolygon,\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes,\n  getUpdatedRectangle,\n  getUpdatedPolygon,\n};\n"],"mappings":"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","ignoreList":[]}

package/configure/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@pie-element/hotspot-configure",
+  "private": true,
+  "version": "10.1.2",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "author": "",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-framework/pie-configure-events": "^1.3.0",
+    "@pie-lib/config-ui": "13.0.6",
+    "@pie-lib/editable-html-tip-tap": "2.1.4",
+    "debug": "^4.1.1",
+    "konva": "8.3.0",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-konva": "^18.2.14"
+  },
+  "license": "ISC"
+}

package/configure/src/DeleteWidget.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Group } from 'react-konva';
+import { faDelete } from './icons';
+import ImageComponent from './image-konva';
+import { calculate } from './utils';
+
+const DeleteWidget = ({ height, id, width, x, y, points, isCircle, radius, handleWidgetClick }) => {
+  let positionX, positionY;
+  const offset = 20;
+
+  if (isCircle) {
+    // For circles, position the delete icon above the circle
+    positionX = x + radius - offset;
+    positionY = y;
+  } else if (points) {
+    // For polygons, compute position based on points
+    const calculated = calculate(points);
+    positionX = calculated.x;
+    positionY = calculated.y;
+  } else {
+    // For rectangles
+    positionX = x + width - offset;
+    positionY = y + height - offset;
+  }
+
+  return (
+    <Group onClick={() => handleWidgetClick(id)}>
+      <ImageComponent x={positionX} y={positionY} src={faDelete} />
+    </Group>
+  );
+};
+
+DeleteWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  handleWidgetClick: PropTypes.func.isRequired,
+  radius: PropTypes.number,
+  isCircle: PropTypes.bool,
+  points: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+  ),
+};
+
+export default DeleteWidget;