@pie-element/hotspot 9.3.4-next.0 → 10.0.0-beta.0

package/configure/lib/utils.js

@@ -1,213 +1,162 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _shapes = require("./shapes");
-
-var _excluded = ["group"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var updateImageDimensions = function updateImageDimensions(initialDim, nextDim, keepAspectRatio, resizeType) {
+const updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
   // if we want to keep image aspect ratio
   if (keepAspectRatio) {
-    var imageAspectRatio = initialDim.width / initialDim.height;
-
+    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
-
+    }
 
+    // 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
-
+  }
 
+  // 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
+};
+
+// 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;
-
-var getDelta = function getDelta(referenceInitialValue, referenceNextValue, currentValue) {
-  return referenceNextValue / referenceInitialValue * currentValue;
-};
-
-var getUpdatedRectangle = function getUpdatedRectangle(initialDim, nextDim, shape) {
-  return _objectSpread(_objectSpread({}, 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 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)
+  }))
+});
 
-var getUpdatedCircles = function getUpdatedCircles(initialDim, nextDim, shape) {
-  return _objectSpread(_objectSpread({}, 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)
-  });
-};
-
-var getUpdatedPolygon = function getUpdatedPolygon(initialDim, nextDim, shape) {
-  return _objectSpread(_objectSpread({}, shape), {}, {
-    points: shape.points.map(function (point) {
-      return {
-        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
+// 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;
-
-var getUpdatedShapes = function getUpdatedShapes(initialDim, nextDim, shapes) {
-  return shapes.map(function (shape) {
+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
+};
+
+// 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;
-
-var getAllShapes = function getAllShapes(shapesMap) {
+const getAllShapes = shapesMap => {
   shapesMap = shapesMap || {};
-  var shapesArray = [];
-  var shapesKeys = Object.keys(shapesMap);
-  return shapesKeys.length ? shapesKeys.reduce(function (acc, currentShapeKey) {
-    return acc.concat(shapesMap[currentShapeKey] ? shapesMap[currentShapeKey].map(function (shape, index) {
-      return _objectSpread(_objectSpread({}, shape), {}, {
-        group: currentShapeKey,
-        index: shape.index || acc.length + index
-      });
-    }) : []);
-  }, shapesArray) : shapesArray;
-}; // converts shapes array to shapes map
+  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;
-
-var groupShapes = function groupShapes(shapesArray) {
+const groupShapes = shapesArray => {
   shapesArray = shapesArray || [];
-  var shapesMap = {
+  const shapesMap = {
     rectangles: [],
     polygons: [],
     circles: []
   };
-
   if (shapesArray.length) {
-    return shapesArray.reduce(function (acc, _ref) {
-      var group = _ref.group,
-          shapeProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-      acc[group] = [].concat((0, _toConsumableArray2["default"])(acc[group] || []), [shapeProps]);
+    return shapesArray.reduce((acc, {
+      group,
+      ...shapeProps
+    }) => {
+      acc[group] = [...(acc[group] || []), shapeProps];
       return acc;
     }, shapesMap);
   }
-
-  return (0, _cloneDeep["default"])(shapesMap);
+  return (0, _cloneDeep.default)(shapesMap);
 };
-
 exports.groupShapes = groupShapes;
-
-var isPointInsidePolygon = function isPointInsidePolygon(polygon, x, y) {
-  var inside = false;
-
+const isPointInsidePolygon = (polygon, x, y) => {
+  let inside = false;
   if (!polygon || polygon.length <= 0) {
     return inside;
   }
-
-  for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    var xi = polygon[i].x;
-    var yi = polygon[i].y;
-    var xj = polygon[j].x;
-    var yj = polygon[j].y;
-    var intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
-
+  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;
-
-var calculate = function calculate(polygonPoints) {
+const calculate = polygonPoints => {
   if (!polygonPoints || polygonPoints.length <= 0) {
     return {
       x: 0,
       y: 0
     };
   }
-
-  var xPoints = polygonPoints.map(function (point) {
-    return point.x;
-  });
-  var yPoints = polygonPoints.map(function (point) {
-    return point.y;
-  });
-  var minX = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xPoints));
-  var minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yPoints));
-  var maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xPoints));
-  var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yPoints)); // Find a suitable position for the text element within the polygon
-
-  var textX, textY;
-
-  for (var x = minX; x <= maxX - 20; x++) {
-    for (var y = maxY - 20; y > minY; y--) {
+  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;
@@ -216,24 +165,22 @@ var calculate = function calculate(polygonPoints) {
       }
     }
   }
-
   return {
     x: textX,
     y: textY
   };
 };
-
 exports.calculate = calculate;
-
-var generateValidationMessage = function generateValidationMessage(config) {
-  var minShapes = config.minShapes,
-      maxShapes = config.maxShapes,
-      maxSelections = config.maxSelections;
-  var shapesMessage = "\nThere should be at least ".concat(minShapes, " ") + (maxShapes ? "and at most ".concat(maxShapes, " ") : '') + 'shapes defined.';
-  var selectionsMessage = '\nThere should be at least 1 ' + (maxSelections ? "and at most ".concat(maxSelections, " ") : '') + 'shape' + (maxSelections ? 's' : '') + ' selected.';
-  var message = 'Validation requirements:' + shapesMessage + selectionsMessage;
+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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","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","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"],"mappings":"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","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\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"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["_cloneDeep","_interopRequireDefault","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/cloneDeep';\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

@@ -1,25 +1,26 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "8.3.3",
+  "version": "9.0.0-beta.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
+    "@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": "11.30.2",
-    "@pie-lib/editable-html": "11.21.2",
-    "classnames": "^2.2.6",
+    "@pie-lib/config-ui": "11.30.4-next.0",
+    "@pie-lib/editable-html": "11.21.4-next.0",
     "debug": "^3.1.0",
-    "konva": "^3.2.4",
+    "konva": "8.3.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-konva": "^16.9.0-0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-konva": "18.1.0"
   },
   "license": "ISC"
 }

package/configure/src/__tests__/hotspot-container.test.js

@@ -1,8 +1,21 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { Container } from '../hotspot-container';
 import { getAllShapes, groupShapes } from '../utils';
 
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Stage: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'stage', ...props }, children),
+    Layer: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'layer', ...props }, children),
+    Rect: (props) => React.createElement('div', { 'data-testid': 'rect', ...props }),
+    Circle: (props) => React.createElement('div', { 'data-testid': 'circle', ...props }),
+    Line: (props) => React.createElement('div', { 'data-testid': 'line', ...props }),
+    Group: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'group', ...props }, children),
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
 const model = () => ({
   imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
   shapes: groupShapes(
@@ -114,18 +127,36 @@ describe('HotspotContainer', () => {
         ...extras,
       };
 
-      return shallow(<Container {...props} />);
+      return render(<Container {...props} />);
     };
   });
 
-  describe('render', () => {
-    it('renders', () => {
-      expect(w()).toMatchSnapshot();
-    });
-  });
-
   describe('logic', () => {
-    let wrapper;
+    const createInstance = () => {
+      const props = {
+        classes: {},
+        dimensions: initialModel.dimensions,
+        imageUrl: initialModel.imageUrl,
+        multipleCorrect: initialModel.multipleCorrect,
+        hotspotColor: initialModel.hotspotColor,
+        outlineColor: initialModel.outlineColor,
+        onUpdateImageDimension: onUpdateImageDimension,
+        onUpdateShapes: onUpdateShapes,
+        onDeleteShape: onDeleteShape,
+        onImageUpload: onImageUpload,
+        shapes: initialModel.shapes,
+      };
+      const instance = new Container(props);
+
+      // Mock setState to execute callback immediately for testing
+      instance.setState = jest.fn((state, callback) => {
+        Object.assign(instance.state, typeof state === 'function' ? state(instance.state) : state);
+        if (callback) callback();
+      });
+
+      return instance;
+    };
+
     let formattedShapes = [
       {
         id: '0',
@@ -211,15 +242,13 @@ describe('HotspotContainer', () => {
       },
     ];
 
-    beforeEach(() => {
-      wrapper = w();
-    });
-
     it('state will contain formatted shapes', () => {
-      expect(wrapper.instance().state.shapes).toEqual(expect.arrayContaining(formattedShapes));
+      const instance = createInstance();
+      expect(instance.state.shapes).toEqual(expect.arrayContaining(formattedShapes));
     });
 
     it('onUpdateShapes with new added shape', () => {
+      const instance = createInstance();
       const newShape = {
         id: '8',
         height: 140,
@@ -229,7 +258,7 @@ describe('HotspotContainer', () => {
         group: 'rectangles',
       };
 
-      wrapper.instance().onUpdateShapes([...formattedShapes, newShape]);
+      instance.onUpdateShapes([...formattedShapes, newShape]);
 
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [
@@ -248,8 +277,8 @@ describe('HotspotContainer', () => {
     });
 
     it('onDeleteShape by id', () => {
-      console.log('wrapper', wrapper.instance());
-      wrapper.instance().onDeleteShape('8');
+      const instance = createInstance();
+      instance.onDeleteShape('8');
       expect(onUpdateShapes).toHaveBeenCalledWith(
         groupShapes([
           { correct: true, group: 'rectangles', height: 140, id: '0', index: 0, width: 130, x: 1, y: 1 },
@@ -314,7 +343,8 @@ describe('HotspotContainer', () => {
     });
 
     it('onUpdateShapes with no shapes', () => {
-      wrapper.instance().onUpdateShapes([]);
+      const instance = createInstance();
+      instance.onUpdateShapes([]);
 
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
@@ -324,7 +354,8 @@ describe('HotspotContainer', () => {
     });
 
     it('handleClearAll', () => {
-      wrapper.instance().handleClearAll();
+      const instance = createInstance();
+      instance.handleClearAll();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
         polygons: [],