@pie-element/hotspot 6.23.3-next.7 → 6.23.3

package/configure/lib/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateImageDimensions = exports.isPointInsidePolygon = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPlygon = exports.getAllShapes = exports.generateValidationMessage = exports.calculate = void 0;
+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"));
 
@@ -15,6 +15,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 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; }
@@ -70,13 +72,13 @@ exports.getUpdatedRectangle = getUpdatedRectangle;
 
 var getUpdatedCircles = function getUpdatedCircles(initialDim, nextDim, shape) {
   return _objectSpread(_objectSpread({}, shape), {}, {
-    radius: getDelta(initialDim.radius, nextDim.radius, shape.radius),
+    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 getUpdatedPlygon = function getUpdatedPlygon(initialDim, nextDim, shape) {
+var getUpdatedPolygon = function getUpdatedPolygon(initialDim, nextDim, shape) {
   return _objectSpread(_objectSpread({}, shape), {}, {
     points: shape.points.map(function (point) {
       return {
@@ -90,19 +92,19 @@ var getUpdatedPlygon = function getUpdatedPlygon(initialDim, nextDim, shape) {
 // shapes = array of shapes that have to be re-sized and re-positioned
 
 
-exports.getUpdatedPlygon = getUpdatedPlygon;
+exports.getUpdatedPolygon = getUpdatedPolygon;
 
 var getUpdatedShapes = function getUpdatedShapes(initialDim, nextDim, shapes) {
   return shapes.map(function (shape) {
-    if (shape.group === 'rectangles') {
+    if (shape.group === _shapes.SHAPE_GROUPS.RECTANGLES) {
       return getUpdatedRectangle(initialDim, nextDim, shape);
     }
 
-    if (shape.group === 'polygons') {
-      return getUpdatedPlygon(initialDim, nextDim, shape);
+    if (shape.group === _shapes.SHAPE_GROUPS.POLYGONS) {
+      return getUpdatedPolygon(initialDim, nextDim, shape);
     }
 
-    if (shape.group === 'circles') {
+    if (shape.group === _shapes.SHAPE_GROUPS.CIRCLES) {
       return getUpdatedCircles(initialDim, nextDim, shape);
     }
   });

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","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","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":";;;;;;;;;;;;;;;AAAA;;;;;;;;AAEA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,UAAD,EAAaC,OAAb,EAAsBC,eAAtB,EAAuCC,UAAvC,EAAsD;AAClF;AACA,MAAID,eAAJ,EAAqB;AACnB,QAAME,gBAAgB,GAAGJ,UAAU,CAACK,KAAX,GAAmBL,UAAU,CAACM,MAAvD;;AAEA,QAAIH,UAAU,KAAK,QAAnB,EAA6B;AAC3B;AACA,aAAO;AACLE,QAAAA,KAAK,EAAEJ,OAAO,CAACK,MAAR,GAAiBF,gBADnB;AAELE,QAAAA,MAAM,EAAEL,OAAO,CAACK;AAFX,OAAP;AAID,KATkB,CAWnB;;;AACA,WAAO;AACLD,MAAAA,KAAK,EAAEJ,OAAO,CAACI,KADV;AAELC,MAAAA,MAAM,EAAEL,OAAO,CAACI,KAAR,GAAgBD;AAFnB,KAAP;AAID,GAlBiF,CAoBlF;;;AACA,SAAO;AACLC,IAAAA,KAAK,EAAEJ,OAAO,CAACI,KADV;AAELC,IAAAA,MAAM,EAAEL,OAAO,CAACK;AAFX,GAAP;AAID,CAzBD,C,CA2BA;AACA;AACA;;;;;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,qBAAD,EAAwBC,kBAAxB,EAA4CC,YAA5C;AAAA,SACdD,kBAAkB,GAAGD,qBAAtB,GAA+CE,YADhC;AAAA,CAAjB;;AAGA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACX,UAAD,EAAaC,OAAb,EAAsBW,KAAtB;AAAA,yCACvBA,KADuB;AAE1BP,IAAAA,KAAK,EAAEE,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCO,KAAK,CAACP,KAAxC,CAFW;AAG1BC,IAAAA,MAAM,EAAEC,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCM,KAAK,CAACN,MAA1C,CAHU;AAI1BO,IAAAA,CAAC,EAAEN,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCO,KAAK,CAACC,CAAxC,CAJe;AAK1BC,IAAAA,CAAC,EAAEP,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCM,KAAK,CAACE,CAA1C;AALe;AAAA,CAA5B;;;;AAQA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACf,UAAD,EAAaC,OAAb,EAAsBW,KAAtB;AAAA,yCACrBA,KADqB;AAExBI,IAAAA,MAAM,EAAET,QAAQ,CAACP,UAAU,CAACgB,MAAZ,EAAoBf,OAAO,CAACe,MAA5B,EAAoCJ,KAAK,CAACI,MAA1C,CAFQ;AAGxBH,IAAAA,CAAC,EAAEN,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCO,KAAK,CAACC,CAAxC,CAHa;AAIxBC,IAAAA,CAAC,EAAEP,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCM,KAAK,CAACE,CAA1C;AAJa;AAAA,CAA1B;;AAOA,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACjB,UAAD,EAAaC,OAAb,EAAsBW,KAAtB;AAAA,yCACpBA,KADoB;AAEvBM,IAAAA,MAAM,EAAEN,KAAK,CAACM,MAAN,CAAaC,GAAb,CAAiB,UAACC,KAAD;AAAA,aAAY;AACnCP,QAAAA,CAAC,EAAEN,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCe,KAAK,CAACP,CAAxC,CADwB;AAEnCC,QAAAA,CAAC,EAAEP,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCc,KAAK,CAACN,CAA1C;AAFwB,OAAZ;AAAA,KAAjB;AAFe;AAAA,CAAzB,C,CAQA;AACA;AACA;;;;;AACA,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACrB,UAAD,EAAaC,OAAb,EAAsBqB,MAAtB,EAAiC;AACxD,SAAOA,MAAM,CAACH,GAAP,CAAW,UAACP,KAAD,EAAW;AAC3B,QAAIA,KAAK,CAACW,KAAN,KAAgB,YAApB,EAAkC;AAChC,aAAOZ,mBAAmB,CAACX,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAA1B;AACD;;AAED,QAAIA,KAAK,CAACW,KAAN,KAAgB,UAApB,EAAgC;AAC9B,aAAON,gBAAgB,CAACjB,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAAvB;AACD;;AAED,QAAIA,KAAK,CAACW,KAAN,KAAgB,SAApB,EAA+B;AAC7B,aAAOR,iBAAiB,CAACf,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAAxB;AACD;AACF,GAZM,CAAP;AAaD,CAdD,C,CAgBA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,IAAMY,YAAY,GAAG,SAAfA,YAAe,CAACC,SAAD,EAAe;AAClCA,EAAAA,SAAS,GAAGA,SAAS,IAAI,EAAzB;AACA,MAAMC,WAAW,GAAG,EAApB;AACA,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAP,CAAYJ,SAAZ,CAAnB;AAEA,SAAOE,UAAU,CAACG,MAAX,GACHH,UAAU,CAACI,MAAX,CACE,UAACC,GAAD,EAAMC,eAAN;AAAA,WACED,GAAG,CAACE,MAAJ,CACET,SAAS,CAACQ,eAAD,CAAT,GACIR,SAAS,CAACQ,eAAD,CAAT,CAA2Bd,GAA3B,CAA+B,UAACP,KAAD,EAAQuB,KAAR;AAAA,6CAC1BvB,KAD0B;AAE7BW,QAAAA,KAAK,EAAEU,eAFsB;AAG7BE,QAAAA,KAAK,EAAEvB,KAAK,CAACuB,KAAN,IAAeH,GAAG,CAACF,MAAJ,GAAaK;AAHN;AAAA,KAA/B,CADJ,GAMI,EAPN,CADF;AAAA,GADF,EAWET,WAXF,CADG,GAcHA,WAdJ;AAeD,CApBD,C,CAsBA;AACA;AACA;AACA;AACA;;;;;AACA,IAAMU,WAAW,GAAG,SAAdA,WAAc,CAACV,WAAD,EAAiB;AACnCA,EAAAA,WAAW,GAAGA,WAAW,IAAI,EAA7B;AACA,MAAMD,SAAS,GAAG;AAChBY,IAAAA,UAAU,EAAE,EADI;AAEhBC,IAAAA,QAAQ,EAAE,EAFM;AAGhBC,IAAAA,OAAO,EAAE;AAHO,GAAlB;;AAMA,MAAIb,WAAW,CAACI,MAAhB,EAAwB;AACtB,WAAOJ,WAAW,CAACK,MAAZ,CAAmB,UAACC,GAAD,QAAmC;AAAA,UAA3BT,KAA2B,QAA3BA,KAA2B;AAAA,UAAjBiB,UAAiB;AAC3DR,MAAAA,GAAG,CAACT,KAAD,CAAH,iDAAkBS,GAAG,CAACT,KAAD,CAAH,IAAc,EAAhC,IAAqCiB,UAArC;AACA,aAAOR,GAAP;AACD,KAHM,EAGJP,SAHI,CAAP;AAID;;AAED,SAAO,2BAAUA,SAAV,CAAP;AACD,CAhBD;;;;AAkBA,IAAMgB,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,OAAD,EAAU7B,CAAV,EAAaC,CAAb,EAAmB;AAC9C,MAAI6B,MAAM,GAAG,KAAb;;AAEA,MAAI,CAACD,OAAD,IAAYA,OAAO,CAACZ,MAAR,IAAkB,CAAlC,EAAqC;AACnC,WAAOa,MAAP;AACD;;AAED,OAAK,IAAIC,CAAC,GAAG,CAAR,EAAWC,CAAC,GAAGH,OAAO,CAACZ,MAAR,GAAiB,CAArC,EAAwCc,CAAC,GAAGF,OAAO,CAACZ,MAApD,EAA4De,CAAC,GAAGD,CAAC,EAAjE,EAAqE;AACnE,QAAME,EAAE,GAAGJ,OAAO,CAACE,CAAD,CAAP,CAAW/B,CAAtB;AACA,QAAMkC,EAAE,GAAGL,OAAO,CAACE,CAAD,CAAP,CAAW9B,CAAtB;AACA,QAAMkC,EAAE,GAAGN,OAAO,CAACG,CAAD,CAAP,CAAWhC,CAAtB;AACA,QAAMoC,EAAE,GAAGP,OAAO,CAACG,CAAD,CAAP,CAAW/B,CAAtB;AAEA,QAAMoC,SAAS,GAAGH,EAAE,GAAGjC,CAAL,KAAWmC,EAAE,GAAGnC,CAAhB,IAAqBD,CAAC,GAAI,CAACmC,EAAE,GAAGF,EAAN,KAAahC,CAAC,GAAGiC,EAAjB,CAAD,IAA0BE,EAAE,GAAGF,EAA/B,IAAqCD,EAAhF;;AAEA,QAAII,SAAJ,EAAe;AACbP,MAAAA,MAAM,GAAG,CAACA,MAAV;AACD;AACF;;AAED,SAAOA,MAAP;AACD,CArBD;;;;AAuBA,IAAMQ,SAAS,GAAG,SAAZA,SAAY,CAACC,aAAD,EAAmB;AACnC,MAAI,CAACA,aAAD,IAAkBA,aAAa,CAACtB,MAAd,IAAwB,CAA9C,EAAiD;AAC/C,WAAO;AAAEjB,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KAAP;AACD;;AAED,MAAMuC,OAAO,GAAGD,aAAa,CAACjC,GAAd,CAAkB,UAACC,KAAD;AAAA,WAAWA,KAAK,CAACP,CAAjB;AAAA,GAAlB,CAAhB;AACA,MAAMyC,OAAO,GAAGF,aAAa,CAACjC,GAAd,CAAkB,UAACC,KAAD;AAAA,WAAWA,KAAK,CAACN,CAAjB;AAAA,GAAlB,CAAhB;AACA,MAAMyC,IAAI,GAAGC,IAAI,CAACC,GAAL,OAAAD,IAAI,sCAAQH,OAAR,EAAjB;AACA,MAAMK,IAAI,GAAGF,IAAI,CAACC,GAAL,OAAAD,IAAI,sCAAQF,OAAR,EAAjB;AACA,MAAMK,IAAI,GAAGH,IAAI,CAACI,GAAL,OAAAJ,IAAI,sCAAQH,OAAR,EAAjB;AACA,MAAMQ,IAAI,GAAGL,IAAI,CAACI,GAAL,OAAAJ,IAAI,sCAAQF,OAAR,EAAjB,CAVmC,CAYnC;;AACA,MAAIQ,KAAJ,EAAWC,KAAX;;AAEA,OAAK,IAAIlD,CAAC,GAAG0C,IAAb,EAAmB1C,CAAC,IAAI8C,IAAI,GAAG,EAA/B,EAAmC9C,CAAC,EAApC,EAAwC;AACtC,SAAK,IAAIC,CAAC,GAAG+C,IAAI,GAAG,EAApB,EAAwB/C,CAAC,GAAG4C,IAA5B,EAAkC5C,CAAC,EAAnC,EAAuC;AACrC;AACA,UAAI2B,oBAAoB,CAACW,aAAD,EAAgBvC,CAAhB,EAAmBC,CAAnB,CAAxB,EAA+C;AAC7CgD,QAAAA,KAAK,GAAGjD,CAAC,GAAG,EAAZ;AACAkD,QAAAA,KAAK,GAAGjD,CAAR;AACA;AACD;AACF;AACF;;AAED,SAAO;AAAED,IAAAA,CAAC,EAAEiD,KAAL;AAAYhD,IAAAA,CAAC,EAAEiD;AAAf,GAAP;AACD,CA3BD;;;;AA6BA,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,CAACC,MAAD,EAAY;AAC5C,MAAQC,SAAR,GAAgDD,MAAhD,CAAQC,SAAR;AAAA,MAAmBC,SAAnB,GAAgDF,MAAhD,CAAmBE,SAAnB;AAAA,MAA8BC,aAA9B,GAAgDH,MAAhD,CAA8BG,aAA9B;AAEA,MAAMC,aAAa,GACjB,qCAA8BH,SAA9B,UAA8CC,SAAS,yBAAkBA,SAAlB,SAAiC,EAAxF,IAA8F,iBADhG;AAGA,MAAMG,iBAAiB,GACrB,mCACCF,aAAa,yBAAkBA,aAAlB,SAAqC,EADnD,IAEA,OAFA,IAGCA,aAAa,GAAG,GAAH,GAAS,EAHvB,IAIA,YALF;AAOA,MAAMG,OAAO,GAAG,6BAA6BF,aAA7B,GAA6CC,iBAA7D;AAEA,SAAOC,OAAP;AACD,CAhBD","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\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.radius, nextDim.radius, shape.radius),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (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 === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === '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  getUpdatedPlygon,\n};\n"],"file":"utils.js"}
+{"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"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "6.22.2",
+  "version": "6.22.3",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "1.25.1",
+    "@pie-lib/pie-toolbox": "1.25.3",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/__tests__/utils.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { updateImageDimensions, getUpdatedRectangle, getUpdatedPlygon, getAllShapes, groupShapes } from '../utils';
+import { updateImageDimensions, getUpdatedRectangle, getUpdatedPolygon, getAllShapes, groupShapes } from '../utils';
 
 const width = 200;
 const height = 100;
@@ -116,7 +116,7 @@ describe('getUpdatedPolygon', () => {
   `(
     'initialDimensions = $initialDimensions, nextDimensions = $nextDimensions, shape = $shape => $expected',
     async ({ initialDimensions, nextDimensions, shape, expected }) => {
-      const result = getUpdatedPlygon(initialDimensions, nextDimensions, shape);
+      const result = getUpdatedPolygon(initialDimensions, nextDimensions, shape);
 
       expect(result).toEqual(expected);
     },

package/configure/src/hotspot-circle.jsx

@@ -78,12 +78,15 @@ class CircleComponent extends React.Component {
   render() {
     const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;
 
+    // Ensure radius is valid
+    const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;
+
     return (
       <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Circle
           classes={classes.base}
           ref={this.shapeRef}
-          radius={radius}
+          radius={validRadius}
           fill={hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
@@ -98,7 +101,7 @@ class CircleComponent extends React.Component {
           y={y}
         />
         {!this.state.isDragging && this.state.hovered && (
-          <DeleteWidget id={id} radius={radius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />
+          <DeleteWidget id={id} radius={validRadius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />
         )}
         {this.state.hovered && (
           <Transformer

package/configure/src/hotspot-container.jsx

@@ -1,5 +1,6 @@
 import { withStyles } from '@material-ui/core/styles/index';
 import classNames from 'classnames';
+import { SUPPORTED_SHAPES } from './shapes';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Button from './button';
@@ -33,7 +34,7 @@ export class Container extends Component {
       dragEnabled: true,
       // always transform shapes map into shapes array at this level
       shapes: getAllShapes(props.shapes),
-      selectedShape: 'none',
+      selectedShape: SUPPORTED_SHAPES.NONE,
     };
     this.fakeImageHandler = {
       cancel: () => {},
@@ -141,7 +142,7 @@ export class Container extends Component {
   handleFinishDrawing = () => {
     // Explicitly end the current shape drawing session
     // This would cause the finalizeCreation method to be called in the HotspotDrawable component
-    this.setState({ selectedShape: 'none' });
+    this.setState({ selectedShape: SUPPORTED_SHAPES.NONE });
   };
 
   render() {
@@ -179,22 +180,22 @@ export class Container extends Component {
         >
           <div className={classes.toolbar}>
             <div
-              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}
+              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.RECTANGLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.RECTANGLE })}
               className={classes.buttonShape}
             >
-              <RectangleButton isActive={selectedShape === 'rectangle'} />
+              <RectangleButton isActive={selectedShape === SUPPORTED_SHAPES.RECTANGLE} />
             </div>
             <div
-              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}
+              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.POLYGON ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.POLYGON })}
               className={classes.buttonShape}
             >
-              <PolygonButton isActive={selectedShape === 'polygon'} />
+              <PolygonButton isActive={selectedShape === SUPPORTED_SHAPES.POLYGON} />
             </div>
             <div
-              onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}
+              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.CIRCLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.CIRCLE })}
               className={classes.buttonShape}
             >
-              <CircleButton isActive={selectedShape === 'circle'} />
+              <CircleButton isActive={selectedShape === SUPPORTED_SHAPES.CIRCLE} />
             </div>
 
             {imageUrl && (

package/configure/src/hotspot-drawable.jsx

@@ -7,10 +7,8 @@ import { withStyles } from '@material-ui/core/styles/index';
 import Rectangle from './hotspot-rectangle';
 import Polygon from './hotspot-polygon';
 import Circle from './hotspot-circle';
-import { updateImageDimensions, getUpdatedShapes } from './utils';
-import RectangleShape from './shapes/rectagle';
-import CircleShape from './shapes/circle';
-import PolygonShape from './shapes/polygon';
+import { getUpdatedShapes, updateImageDimensions } from './utils';
+import { RectangleShape, CircleShape, PolygonShape, SUPPORTED_SHAPES, SHAPE_GROUPS } from './shapes';
 const IMAGE_MAX_WIDTH = 800;
 
 export class Drawable extends React.Component {
@@ -48,14 +46,18 @@ export class Drawable extends React.Component {
       return;
     }
 
+    if (!Object.values(SUPPORTED_SHAPES).includes(shapeType)) {
+      return;
+    }
+
     switch (shapeType) {
-      case 'rectangle':
+      case SUPPORTED_SHAPES.RECTANGLE:
         newState = RectangleShape.create(shapes, e);
         break;
-      case 'circle':
+      case SUPPORTED_SHAPES.CIRCLE:
         newState = CircleShape.create(shapes, e);
         break;
-      case 'polygon':
+      case SUPPORTED_SHAPES.POLYGON:
         newShapeId = this.state.isDrawingShapeId;
 
         if (newShapeId) {
@@ -73,7 +75,6 @@ export class Drawable extends React.Component {
         }
         break;
       default:
-        console.error(`Unsupported shape type: ${shapeType}`);
         return;
     }
 
@@ -102,19 +103,18 @@ export class Drawable extends React.Component {
     const { shapeType, onUpdateShapes } = this.props;
     let newState;
 
-    if (shapeType === 'polygon') {
+    if (shapeType === SUPPORTED_SHAPES.POLYGON) {
       return;
     }
 
     switch (shapeType) {
-      case 'rectangle':
+      case SUPPORTED_SHAPES.RECTANGLE:
         newState = RectangleShape.finalizeCreation(this.state, this.props);
         break;
-      case 'circle':
+      case SUPPORTED_SHAPES.CIRCLE:
         newState = CircleShape.finalizeCreation(this.state, this.props);
         break;
       default:
-        console.error(`Unsupported shape type: ${shapeType}`);
         return;
     }
 
@@ -127,28 +127,29 @@ export class Drawable extends React.Component {
   };
 
   handleMouseMove = (e) => {
-    const { shapeType, onUpdateShapes, shapes } = this.props;
+    const { shapeType, onUpdateShapes } = this.props;
     let newState;
 
-    if (this.state.isDrawing) {
-      switch (shapeType) {
-        case 'rectangle':
-          newState = RectangleShape.handleMouseMove(this.state, e);
-          break;
-        case 'circle':
-          newState = CircleShape.handleMouseMove(this.state, e);
-          break;
-        case 'polygon':
-          newState = PolygonShape.handleMouseMove(this.state, e);
-          break;
-        default:
-          console.error(`Unsupported shape type: ${shapeType}`);
-          return;
-      }
+    if (!this.state.isDrawing || !Object.values(SUPPORTED_SHAPES).includes(shapeType)) {
+      return;
+    }
 
-      this.setState(newState);
-      onUpdateShapes(newState.shapes);
+    switch (shapeType) {
+      case SUPPORTED_SHAPES.RECTANGLE:
+        newState = RectangleShape.handleMouseMove(this.state, e);
+        break;
+      case SUPPORTED_SHAPES.CIRCLE:
+        newState = CircleShape.handleMouseMove(this.state, e);
+        break;
+      case SUPPORTED_SHAPES.POLYGON:
+        newState = PolygonShape.handleMouseMove(this.state, e);
+        break;
+      default:
+        return;
     }
+
+    this.setState(newState);
+    onUpdateShapes(newState.shapes);
   };
 
   handleOnMouseOutOrLeave = (e) => {
@@ -158,13 +159,65 @@ export class Drawable extends React.Component {
   };
 
   handleOnDragEnd = (id, updatedProps) => {
-    const { shapes, onUpdateShapes } = this.props;
+    const { shapes, onUpdateShapes, dimensions } = this.props;
+    const { width: canvasWidth, height: canvasHeight } = dimensions;
+
+    // when a shape is moved completely outside the canvas
+    // remove that shape
     const newShapes = shapes.map((shape) => {
-      if (shape.id === id) {
+      if (shape.id !== id) {
+        return shape;
+      }
+
+      let newX = updatedProps.x;
+      let newY = updatedProps.y;
+
+      if (shape.group === 'rectangles') {
+        if (newX + shape.width < 0 || newX > canvasWidth || newY + shape.height < 0 || newY > canvasHeight) {
+          return null;
+        }
+
+        return { ...shape, ...updatedProps };
+      }
+
+
+      if (shape.group === 'circles') {
+        const radius = shape.radius;
+        if (newX + radius < 0 || newX - radius > canvasWidth || newY + radius < 0 || newY - radius > canvasHeight) {
+          return null;
+        }
+
+        return { ...shape,...updatedProps};
+      }
+
+      if (shape.group === 'polygons') {
+        const points = shape.points;
+        const xValues = points.map(point => point.x);
+        const yValues = points.map(point => point.y);
+
+        let minX = Math.min(...xValues);
+        let minY = Math.min(...yValues);
+        let maxX = Math.max(...xValues);
+        let maxY = Math.max(...yValues);
+
+        // Calculate deltas based on the first point as a reference
+        const deltaX = updatedProps['points'][0].x - points[0].x;
+        const deltaY = updatedProps['points'][0].y - points[0].y;
+
+        minX = minX + deltaX;
+        maxX = maxX + deltaX;
+        minY = minY + deltaY;
+        maxY = maxY + deltaY;
+
+        if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {
+          return null;
+        }
+
         return { ...shape, ...updatedProps };
       }
+
       return shape;
-    });
+    }).filter(shape => shape !== null);
 
     onUpdateShapes(cloneDeep(newShapes));
   };
@@ -173,7 +226,7 @@ export class Drawable extends React.Component {
     const { id } = shape;
     const { multipleCorrect, shapes, onUpdateShapes } = this.props;
 
-    let newShapes = [];
+    let newShapes;
 
     if (multipleCorrect) {
       newShapes = shapes.map((shape) => {
@@ -244,7 +297,6 @@ export class Drawable extends React.Component {
     const box = this.image;
     const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;
 
-    // todo previously we had state.dimensions, is it needed?
     const { width, height } = updateImageDimensions(
       dimensions,
       {
@@ -307,8 +359,8 @@ export class Drawable extends React.Component {
       outlineColor,
       shapes,
       strokeWidth,
-      onDeleteShape,
     } = this.props;
+
     const {
       stateShapes,
       isDrawing,
@@ -352,13 +404,13 @@ export class Drawable extends React.Component {
             {shapesToUse.map((shape, i) => {
               let Tag;
               switch (shape.group) {
-                case 'rectangles':
+                case SHAPE_GROUPS.RECTANGLES:
                   Tag = Rectangle;
                   break;
-                case 'circles':
+                case SHAPE_GROUPS.CIRCLES:
                   Tag = Circle;
                   break;
-                case 'polygons':
+                case SHAPE_GROUPS.POLYGONS:
                   Tag = Polygon;
                   break;
                 default:
@@ -367,11 +419,11 @@ export class Drawable extends React.Component {
 
               return (
                 <Tag
+                  {...(shape.group === SHAPE_GROUPS.CIRCLES ? { radius: shape.radius } : {})}
+                  {...(shape.group === SHAPE_GROUPS.RECTANGLES ? { height: shape.height, width: shape.width } : {})}
+                  {...(shape.group === SHAPE_GROUPS.POLYGONS ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}
                   correct={shape.correct}
                   isDrawing={isDrawing}
-                  {...(shape.group === 'circles'
-                    ? { radius: shape.radius }
-                    : { height: shape.height, width: shape.width })}
                   hotspotColor={hotspotColor}
                   id={shape.id}
                   key={i}
@@ -382,7 +434,6 @@ export class Drawable extends React.Component {
                   width={shape.width}
                   x={shape.x}
                   y={shape.y}
-                  {...(shape.group === 'polygons' ? { points: shape.points } : {})}
                   strokeWidth={strokeWidth}
                   imageHeight={heightFromState || height}
                   imageWidth={widthFromState || width}
@@ -432,7 +483,7 @@ Drawable.propTypes = {
   disableDrag: PropTypes.func.isRequired,
   dimensions: PropTypes.object.isRequired,
   enableDrag: PropTypes.func.isRequired,
-  shapeType: PropTypes.oneOf(['rectangle', 'circle', 'polygon']),
+  shapeType: PropTypes.oneOf(Object.values(SUPPORTED_SHAPES)),
   imageUrl: PropTypes.string.isRequired,
   handleFinishDrawing: PropTypes.func.isRequired,
   hotspotColor: PropTypes.string.isRequired,

package/configure/src/hotspot-polygon.jsx

@@ -11,39 +11,28 @@ class PolComponent extends React.Component {
     const { id, points, imageHeight, imageWidth } = nextProps;
     // we execute this code only if image dimensions changed or an hotspot was added/deleted
     if (
-      prevState.imageHeight !== nextProps.imageHeight ||
-      prevState.imageWidth !== nextProps.imageWidth ||
+      prevState.imageHeight !== imageHeight ||
+      prevState.imageWidth !== imageWidth ||
       prevState.id !== nextProps.id ||
-      prevState.points.length !== points.length
+      JSON.stringify(prevState.points) !== JSON.stringify(points)
     ) {
-      if (points.length) {
-        const xList = points.map((p) => p.x);
-        const yList = points.map((p) => p.y);
-
-        const x = Math.min(...xList);
-        const y = Math.max(...yList);
-
-        return {
-          id,
-          x,
-          y,
-          points,
-          imageHeight,
-          imageWidth,
-        };
-      }
+      const xList = points.map((p) => p.x);
+      const yList = points.map((p) => p.y);
+
+      const x = Math.min(...xList);
+      const y = Math.max(...yList);
 
       return {
-        id: '',
-        x: 0,
-        y: 0,
-        points: [],
+        id,
+        x,
+        y,
+        points,
         imageHeight,
         imageWidth,
       };
-    } else {
-      return null;
     }
+
+    return null;
   }
 
   getOffset = (points) => {
@@ -143,6 +132,10 @@ class PolComponent extends React.Component {
       ...this.getOffset(newPoints),
       isDragging: updateModel ? false : this.state.isDragging,
     });
+
+    if (updateModel) {
+      onDragEnd(id, { points: newPoints });
+    }
   };
 
   handleOnDragVertex = (e, changedIndex, updateModel) => {

package/configure/src/shapes/circle.js

@@ -1,4 +1,6 @@
-export default class CircleShape {
+export class CircleShape {
+  static name = 'circle'
+
   static create(shapes, e) {
     const newShapes = [...shapes];
     const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);

package/configure/src/shapes/index.js

@@ -0,0 +1,4 @@
+export * from './circle';
+export * from './rectagle';
+export * from './polygon';
+export * from './utils';

package/configure/src/shapes/polygon.js

@@ -1,4 +1,6 @@
-export default class PolygonShape {
+export class PolygonShape {
+  static name = 'polygon'
+
   static create(shapes, e) {
     const newShapes = [...shapes];
     const newPolygon = {

package/configure/src/shapes/rectagle.js

@@ -1,4 +1,6 @@
-export default class RectangleShape {
+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;

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/utils.js

@@ -1,4 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
+import { SHAPE_GROUPS } from './shapes';
 
 const updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
   // if we want to keep image aspect ratio
@@ -43,12 +44,12 @@ const getUpdatedRectangle = (initialDim, nextDim, shape) => ({
 
 const getUpdatedCircles = (initialDim, nextDim, shape) => ({
   ...shape,
-  radius: getDelta(initialDim.radius, nextDim.radius, shape.radius),
+  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 getUpdatedPlygon = (initialDim, nextDim, shape) => ({
+const getUpdatedPolygon = (initialDim, nextDim, shape) => ({
   ...shape,
   points: shape.points.map((point) => ({
     x: getDelta(initialDim.width, nextDim.width, point.x),
@@ -61,15 +62,15 @@ const getUpdatedPlygon = (initialDim, nextDim, shape) => ({
 // 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 === 'rectangles') {
+    if (shape.group === SHAPE_GROUPS.RECTANGLES) {
       return getUpdatedRectangle(initialDim, nextDim, shape);
     }
 
-    if (shape.group === 'polygons') {
-      return getUpdatedPlygon(initialDim, nextDim, shape);
+    if (shape.group === SHAPE_GROUPS.POLYGONS) {
+      return getUpdatedPolygon(initialDim, nextDim, shape);
     }
 
-    if (shape.group === 'circles') {
+    if (shape.group === SHAPE_GROUPS.CIRCLES) {
       return getUpdatedCircles(initialDim, nextDim, shape);
     }
   });
@@ -205,5 +206,5 @@ export {
   getAllShapes,
   groupShapes,
   getUpdatedRectangle,
-  getUpdatedPlygon,
+  getUpdatedPolygon,
 };