@pie-element/hotspot 5.4.3-next.5 → 5.4.3-next.57

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","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps","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,SAA8DD,kBAAkB,GAAGD,qBAAtB,GAA+CE,YAA5G;AAAA,CAAjB;;AAEA,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,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACf,UAAD,EAAaC,OAAb,EAAsBW,KAAtB;AAAA,yCACpBA,KADoB;AAEvBI,IAAAA,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC,GAAb,CAAiB,UAAAC,KAAK;AAAA,aAAK;AACjCL,QAAAA,CAAC,EAAEN,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCa,KAAK,CAACL,CAAxC,CADsB;AAEjCC,QAAAA,CAAC,EAAEP,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCY,KAAK,CAACJ,CAA1C;AAFsB,OAAL;AAAA,KAAtB;AAFe;AAAA,CAAzB,C,CAQA;AACA;AACA;;;;;AACA,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACnB,UAAD,EAAaC,OAAb,EAAsBmB,MAAtB,EAAiC;AACxD,SAAOA,MAAM,CAACH,GAAP,CAAW,UAAAL,KAAK,EAAI;AACzB,QAAIA,KAAK,CAACS,KAAN,KAAgB,YAApB,EAAkC;AAChC,aAAOV,mBAAmB,CAACX,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAA1B;AACD;;AAED,QAAIA,KAAK,CAACS,KAAN,KAAgB,UAApB,EAAgC;AAC9B,aAAON,gBAAgB,CAACf,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAAvB;AACD;AACF,GARM,CAAP;AASD,CAVD,C,CAYA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,IAAMU,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,CAAkB,UAACC,GAAD,EAAMC,eAAN;AAAA,WAChBD,GAAG,CAACE,MAAJ,CACET,SAAS,CAACQ,eAAD,CAAT,GACIR,SAAS,CAACQ,eAAD,CAAT,CAA2Bd,GAA3B,CAA+B,UAACL,KAAD,EAAQqB,KAAR;AAAA,6CAC5BrB,KAD4B;AAE/BS,QAAAA,KAAK,EAAEU,eAFwB;AAG/BE,QAAAA,KAAK,EAAErB,KAAK,CAACqB,KAAN,IAAeH,GAAG,CAACF,MAAJ,GAAaK;AAHJ;AAAA,KAA/B,CADJ,GAMI,EAPN,CADgB;AAAA,GAAlB,EASAT,WATA,CADG,GAWHA,WAXJ;AAYD,CAjBD,C,CAmBA;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;AAFM,GAAlB;;AAKA,MAAIZ,WAAW,CAACI,MAAhB,EAAwB;AACtB,WAAOJ,WAAW,CAACK,MAAZ,CAAmB,UAACC,GAAD,QAAmC;AAAA,UAA3BT,KAA2B,QAA3BA,KAA2B;AAAA,UAAjBgB,UAAiB;AAC3DP,MAAAA,GAAG,CAACT,KAAD,CAAH,iDAAkBS,GAAG,CAACT,KAAD,CAAH,IAAc,EAAhC,IAAqCgB,UAArC;AACA,aAAOP,GAAP;AACD,KAHM,EAGJP,SAHI,CAAP;AAID;;AAED,SAAO,2BAAUA,SAAV,CAAP;AACD,CAfD;;;;AAiBA,IAAMe,yBAAyB,GAAG,SAA5BA,yBAA4B,CAAAC,MAAM,EAAI;AAC1C,MAAQC,SAAR,GAAgDD,MAAhD,CAAQC,SAAR;AAAA,MAAmBC,SAAnB,GAAgDF,MAAhD,CAAmBE,SAAnB;AAAA,MAA8BC,aAA9B,GAAgDH,MAAhD,CAA8BG,aAA9B;AAEA,MAAMC,aAAa,GAAG,qCAA8BH,SAA9B,UACnBC,SAAS,yBAAkBA,SAAlB,SAAiC,EADvB,IAC6B,iBADnD;AAGA,MAAMG,iBAAiB,GAAG,mCACvBF,aAAa,yBAAkBA,aAAlB,SAAqC,EAD3B,IACiC,OADjC,IAEvBA,aAAa,GAAG,GAAH,GAAS,EAFC,IAEM,YAFhC;AAIA,MAAMG,OAAO,GAAG,6BAA6BF,aAA7B,GAA6CC,iBAA7D;AAEA,SAAOC,OAAP;AACD,CAbD","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) => (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 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};\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((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      shapesArray)\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  };\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 generateValidationMessage = config => {\n  const { minShapes, maxShapes, maxSelections } = config;\n\n  const shapesMessage = `\\nThere should be at least ${minShapes} ` +\n    (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';\n\n  const selectionsMessage = `\\nThere should be at least 1 ` +\n    (maxSelections ? `and at most ${maxSelections} ` : '') + 'shape' +\n    (maxSelections ? 's' : '') +  ' selected.';\n\n  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;\n\n  return message;\n};\n\nexport {\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","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps","generateValidationMessage","config","minShapes","maxShapes","maxSelections","shapesMessage","selectionsMessage","message"],"mappings":"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","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 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};\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  };\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 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  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes,\n  getUpdatedRectangle,\n  getUpdatedPlygon,\n};\n"],"file":"utils.js"}

package/configure/package.json

@@ -10,8 +10,8 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "^11.0.23",
-    "@pie-lib/editable-html": "^9.2.5",
+    "@pie-lib/config-ui": "^11.0.26",
+    "@pie-lib/editable-html": "^9.2.8",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

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

@@ -5,50 +5,73 @@ import { getAllShapes, groupShapes } from '../utils';
 
 const model = () => ({
   imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
-  shapes: groupShapes(getAllShapes({
-    rectangles: [
-      {
-        id: '0',
-        height: 140,
-        width: 130,
-        x: 1,
-        y: 1,
-        correct: true
-      }, {
-        id: '1',
-        height: 140,
-        width: 130,
-        x: 140,
-        y: 1
-      }, {
-        id: '2',
-        height: 140,
-        width: 130,
-        x: 280,
-        y: 1
-      }
-    ],
-    polygons: [
-      {
-        id: '3',
-        points: [{ x: 1, y: 148 }, { x: 1, y: 288 }, { y: 288, x: 129 }, { y: 148, x: 129 }],
-        correct: true
-      }, {
-        id: '4',
-        points: [{ y: 151, x: 141 }, { y: 289, x: 141 }, { y: 289, x: 269 }, { x: 269, y: 151 }],
-        correct: false
-      }, {
-        id: '5',
-        points: [{ x: 279, y: 150 }, { x: 279, y: 289 }, { x: 407, y: 289 }, { x: 407, y: 150 }],
-        correct: false
-      }]
-  })),
+  shapes: groupShapes(
+    getAllShapes({
+      rectangles: [
+        {
+          id: '0',
+          height: 140,
+          width: 130,
+          x: 1,
+          y: 1,
+          correct: true,
+        },
+        {
+          id: '1',
+          height: 140,
+          width: 130,
+          x: 140,
+          y: 1,
+        },
+        {
+          id: '2',
+          height: 140,
+          width: 130,
+          x: 280,
+          y: 1,
+        },
+      ],
+      polygons: [
+        {
+          id: '3',
+          points: [
+            { x: 1, y: 148 },
+            { x: 1, y: 288 },
+            { y: 288, x: 129 },
+            { y: 148, x: 129 },
+          ],
+          correct: true,
+        },
+        {
+          id: '4',
+          points: [
+            { y: 151, x: 141 },
+            { y: 289, x: 141 },
+            { y: 289, x: 269 },
+            { x: 269, y: 151 },
+          ],
+          correct: false,
+        },
+        {
+          id: '5',
+          points: [
+            { x: 279, y: 150 },
+            { x: 279, y: 289 },
+            { x: 407, y: 289 },
+            { x: 407, y: 150 },
+          ],
+          correct: false,
+        },
+      ],
+    }),
+  ),
   dimensions: {
-    height: 291, width: 410
+    height: 291,
+    width: 410,
   },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
   outlineColor: 'blue',
-  multipleCorrect: true
+  multipleCorrect: true,
 });
 
 describe('HotspotContainer', () => {
@@ -56,11 +79,9 @@ describe('HotspotContainer', () => {
     onImageUpload = jest.fn(),
     onUpdateImageDimension = jest.fn(),
     onUpdateShapes = jest.fn(),
-    initialModel = model()
-  ;
-
+    initialModel = model();
   beforeEach(() => {
-    w = extras => {
+    w = (extras) => {
       const props = {
         classes: {},
         dimensions: initialModel.dimensions,
@@ -72,17 +93,17 @@ describe('HotspotContainer', () => {
         onUpdateShapes: onUpdateShapes,
         onImageUpload: onImageUpload,
         shapes: initialModel.shapes,
-        ...extras
+        ...extras,
       };
 
       return shallow(<Container {...props} />);
-    }
+    };
   });
 
   describe('render', () => {
     it('renders', () => {
       expect(w()).toMatchSnapshot();
-    })
+    });
   });
 
   describe('logic', () => {
@@ -96,23 +117,25 @@ describe('HotspotContainer', () => {
         y: 1,
         correct: true,
         group: 'rectangles',
-        index: 0
-      }, {
+        index: 0,
+      },
+      {
         id: '1',
         height: 140,
         width: 130,
         x: 140,
         y: 1,
         group: 'rectangles',
-        index: 1
-      }, {
+        index: 1,
+      },
+      {
         id: '2',
         height: 140,
         width: 130,
         x: 280,
         y: 1,
         group: 'rectangles',
-        index: 2
+        index: 2,
       },
       {
         id: '3',
@@ -120,32 +143,36 @@ describe('HotspotContainer', () => {
           { x: 1, y: 148 },
           { x: 1, y: 288 },
           { y: 288, x: 129 },
-          { y: 148, x: 129 }],
+          { y: 148, x: 129 },
+        ],
         correct: true,
         group: 'polygons',
-        index: 3
-      }, {
+        index: 3,
+      },
+      {
         id: '4',
         points: [
           { y: 151, x: 141 },
           { y: 289, x: 141 },
           { y: 289, x: 269 },
-          { x: 269, y: 151 }],
+          { x: 269, y: 151 },
+        ],
         correct: false,
         group: 'polygons',
-        index: 4
-      }, {
+        index: 4,
+      },
+      {
         id: '5',
         points: [
           { x: 279, y: 150 },
           { x: 279, y: 289 },
           { x: 407, y: 289 },
-          { x: 407, y: 150 }
+          { x: 407, y: 150 },
         ],
         correct: false,
         group: 'polygons',
-        index: 5
-      }
+        index: 5,
+      },
     ];
 
     beforeEach(() => {
@@ -163,7 +190,7 @@ describe('HotspotContainer', () => {
         width: 130,
         x: 280,
         y: 1,
-        group: 'rectangles'
+        group: 'rectangles',
       };
 
       wrapper.instance().onUpdateShapes([...formattedShapes, newShape]);
@@ -177,10 +204,10 @@ describe('HotspotContainer', () => {
             width: 130,
             x: 280,
             y: 1,
-          }
+          },
         ],
-        polygons: initialModel.shapes.polygons
-      })
+        polygons: initialModel.shapes.polygons,
+      });
     });
 
     it('onUpdateShapes with no shapes', () => {
@@ -188,15 +215,15 @@ describe('HotspotContainer', () => {
 
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
-        polygons: []
-      })
+        polygons: [],
+      });
     });
 
     it('handleUndo if no new shape was added', () => {
       wrapper.instance().handleUndo();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         ...initialModel.shapes,
-        polygons: initialModel.shapes.polygons.slice(0, -1)
+        polygons: initialModel.shapes.polygons.slice(0, -1),
       });
     });
 
@@ -207,13 +234,13 @@ describe('HotspotContainer', () => {
         width: 130,
         x: 280,
         y: 1,
-        index: 6
+        index: 6,
       };
 
       // first, add a new shape
       wrapper.instance().state.shapes = getAllShapes({
         ...initialModel.shapes,
-        rectangles: [ ...initialModel.shapes.rectangles, newShape],
+        rectangles: [...initialModel.shapes.rectangles, newShape],
       });
       wrapper.instance().handleUndo();
       expect(onUpdateShapes).toBeCalledWith(initialModel.shapes);
@@ -223,7 +250,7 @@ describe('HotspotContainer', () => {
       wrapper.instance().handleClearAll();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
-        polygons: []
+        polygons: [],
       });
     });
   });

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

@@ -12,21 +12,23 @@ const model = () => ({
       x: 1,
       y: 1,
       correct: true,
-      group: 'rectangles'
-    }, {
+      group: 'rectangles',
+    },
+    {
       id: '1',
       height: 140,
       width: 130,
       x: 140,
       y: 1,
-      group: 'rectangles'
-    }, {
+      group: 'rectangles',
+    },
+    {
       id: '2',
       height: 140,
       width: 130,
       x: 280,
       y: 1,
-      group: 'rectangles'
+      group: 'rectangles',
     },
     {
       id: '3',
@@ -34,32 +36,37 @@ const model = () => ({
         { x: 1, y: 148 },
         { x: 1, y: 288 },
         { y: 288, x: 129 },
-        { y: 148, x: 129 }],
+        { y: 148, x: 129 },
+      ],
       correct: true,
-      group: 'polygons'
-    }, {
+      group: 'polygons',
+    },
+    {
       id: '4',
       points: [
         { y: 151, x: 141 },
         { y: 289, x: 141 },
         { y: 289, x: 269 },
-        { x: 269, y: 151 }],
+        { x: 269, y: 151 },
+      ],
       correct: false,
-      group: 'polygons'
-    }, {
+      group: 'polygons',
+    },
+    {
       id: '5',
       points: [
         { x: 279, y: 150 },
         { x: 279, y: 289 },
         { x: 407, y: 289 },
-        { x: 407, y: 150 }
+        { x: 407, y: 150 },
       ],
       correct: false,
-      group: 'polygons'
-    }
+      group: 'polygons',
+    },
   ],
   dimensions: {
-    height: 291, width: 410
+    height: 291,
+    width: 410,
   },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
   outlineColor: 'blue',
@@ -72,11 +79,9 @@ describe('HotspotDrawable', () => {
     handleEnableDrag = jest.fn(),
     onUpdateImageDimension = jest.fn(),
     onUpdateShapes = jest.fn(),
-    initialModel = model()
-  ;
-
+    initialModel = model();
   beforeEach(() => {
-    w = extras => {
+    w = (extras) => {
       const props = {
         classes: {},
         dimensions: initialModel.dimensions,
@@ -90,11 +95,11 @@ describe('HotspotDrawable', () => {
         outlineColor: initialModel.outlineColor,
         shapes: initialModel.shapes,
         strokeWidth: 5,
-        ...extras
+        ...extras,
       };
 
       return shallow(<Drawable {...props} />);
-    }
+    };
   });
 
   describe('render', () => {
@@ -126,8 +131,8 @@ describe('HotspotDrawable', () => {
         currentTarget: 'Stage',
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       };
 
       wrapper.instance().handleOnMouseDown(event);
@@ -141,8 +146,8 @@ describe('HotspotDrawable', () => {
         currentTarget: 'Stage',
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       };
 
       wrapper.instance().handleOnMouseDown(event);
@@ -156,8 +161,8 @@ describe('HotspotDrawable', () => {
           x: 20,
           y: 30,
           group: 'rectangles',
-          index: 6
-        }
+          index: 6,
+        },
       ]);
     });
 
@@ -168,8 +173,8 @@ describe('HotspotDrawable', () => {
       wrapper.instance().handleOnMouseUp({
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([...initialModel.shapes.slice(0, 2)]);
@@ -180,48 +185,43 @@ describe('HotspotDrawable', () => {
       wrapper.instance().handleOnMouseUp({
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       });
 
       expect(onUpdateShapes).not.toBeCalledWith(false);
 
-
       wrapper.instance().handleOnMouseUp({});
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes.slice(0, 2));
     });
 
     it('handleOnSetAsCorrect correct', () => {
-      wrapper.instance().handleOnSetAsCorrect(
-        {
-          id: '1'
-        }
-      );
+      wrapper.instance().handleOnSetAsCorrect({
+        id: '1',
+      });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         initialModel.shapes[0],
         {
           ...initialModel.shapes[1],
-          correct: true
+          correct: true,
         },
-        ...initialModel.shapes.slice(2)
+        ...initialModel.shapes.slice(2),
       ]);
     });
 
     it('handleOnSetAsCorrect incorrect', () => {
-      wrapper.instance().handleOnSetAsCorrect(
-        {
-          id: '0'
-        }
-      );
+      wrapper.instance().handleOnSetAsCorrect({
+        id: '0',
+      });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         {
           ...initialModel.shapes[0],
-          correct: false
+          correct: false,
         },
-        ...initialModel.shapes.slice(1)
+        ...initialModel.shapes.slice(1),
       ]);
     });
 
@@ -232,9 +232,9 @@ describe('HotspotDrawable', () => {
         {
           ...initialModel.shapes[0],
           x: 1,
-          y: 1
+          y: 1,
         },
-        ...initialModel.shapes.slice(1)
+        ...initialModel.shapes.slice(1),
       ]);
     });
 
@@ -243,6 +243,5 @@ describe('HotspotDrawable', () => {
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes);
     });
-
   });
 });