@pie-element/hotspot 6.3.2-next.18 → 6.3.2-next.22

package/configure/lib/DeleteWidget.js

@@ -26,21 +26,25 @@ var DeleteWidget = function DeleteWidget(_ref) {
       x = _ref.x,
       y = _ref.y,
       points = _ref.points,
-      outlineColor = _ref.outlineColor,
+      isCircle = _ref.isCircle,
+      radius = _ref.radius,
       handleWidgetClick = _ref.handleWidgetClick;
-  var positionX, positionY; // if points exist we have an irregular form (polygon) and position should be computed
+  var positionX, positionY;
+  var offset = 20;
 
-  if (points) {
-    var _calculate = (0, _utils.calculate)(points),
-        _x = _calculate.x,
-        _y = _calculate.y;
-
-    positionX = _x;
-    positionY = _y;
+  if (isCircle) {
+    // For circles, position the delete icon above the circle
+    positionX = x + radius - offset;
+    positionY = y;
+  } else if (points) {
+    // For polygons, compute position based on points
+    var calculated = (0, _utils.calculate)(points);
+    positionX = calculated.x;
+    positionY = calculated.y;
   } else {
-    positionX = x + width - 20; // 10 pixels to the left
-
-    positionY = y + height - 20; // 10 pixels above
+    // For rectangles
+    positionX = x + width - offset;
+    positionY = y + height - offset;
   }
 
   return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
@@ -63,11 +67,12 @@ DeleteWidget.propTypes = {
   x: _propTypes["default"].number.isRequired,
   y: _propTypes["default"].number.isRequired,
   handleWidgetClick: _propTypes["default"].func.isRequired,
+  radius: _propTypes["default"].number,
+  isCircle: _propTypes["default"].bool,
   points: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     x: _propTypes["default"].number,
     y: _propTypes["default"].number
-  })),
-  outlineColor: _propTypes["default"].string.isRequired
+  }))
 };
 var _default = DeleteWidget;
 exports["default"] = _default;

package/configure/lib/DeleteWidget.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DeleteWidget.jsx"],"names":["DeleteWidget","height","id","width","x","y","points","outlineColor","handleWidgetClick","positionX","positionY","faDelete","propTypes","PropTypes","string","isRequired","number","func","arrayOf","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA0E;AAAA,MAAvEC,MAAuE,QAAvEA,MAAuE;AAAA,MAA/DC,EAA+D,QAA/DA,EAA+D;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,CAAoD,QAApDA,CAAoD;AAAA,MAAjDC,CAAiD,QAAjDA,CAAiD;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;AAAA,MAAtCC,YAAsC,QAAtCA,YAAsC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AAC7F,MAAIC,SAAJ,EAAeC,SAAf,CAD6F,CAE7F;;AACA,MAAIJ,MAAJ,EAAY;AACV,qBAAiB,sBAAUA,MAAV,CAAjB;AAAA,QAAQF,EAAR,cAAQA,CAAR;AAAA,QAAWC,EAAX,cAAWA,CAAX;;AACAI,IAAAA,SAAS,GAAGL,EAAZ;AACAM,IAAAA,SAAS,GAAGL,EAAZ;AACD,GAJD,MAIO;AACLI,IAAAA,SAAS,GAAGL,CAAC,GAAGD,KAAJ,GAAY,EAAxB,CADK,CACuB;;AAC5BO,IAAAA,SAAS,GAAGL,CAAC,GAAGJ,MAAJ,GAAa,EAAzB,CAFK,CAEwB;AAC9B;;AAED,sBACE,gCAAC,iBAAD;AAAO,IAAA,OAAO,EAAE;AAAA,aAAMO,iBAAiB,CAACN,EAAD,CAAvB;AAAA;AAAhB,kBACE,gCAAC,sBAAD;AAAgB,IAAA,KAAK,EAAE,EAAvB;AAA2B,IAAA,MAAM,EAAE,EAAnC;AAAuC,IAAA,CAAC,EAAEO,SAA1C;AAAqD,IAAA,CAAC,EAAEC,SAAxD;AAAmE,IAAA,GAAG,EAAEC;AAAxE,IADF,CADF;AAKD,CAjBD;;AAmBAX,YAAY,CAACY,SAAb,GAAyB;AACvBV,EAAAA,EAAE,EAAEW,sBAAUC,MAAV,CAAiBC,UADE;AAEvBd,EAAAA,MAAM,EAAEY,sBAAUG,MAFK;AAGvBb,EAAAA,KAAK,EAAEU,sBAAUG,MAHM;AAIvBZ,EAAAA,CAAC,EAAES,sBAAUG,MAAV,CAAiBD,UAJG;AAKvBV,EAAAA,CAAC,EAAEQ,sBAAUG,MAAV,CAAiBD,UALG;AAMvBP,EAAAA,iBAAiB,EAAEK,sBAAUI,IAAV,CAAeF,UANX;AAOvBT,EAAAA,MAAM,EAAEO,sBAAUK,OAAV,CACNL,sBAAUM,KAAV,CAAgB;AACdf,IAAAA,CAAC,EAAES,sBAAUG,MADC;AAEdX,IAAAA,CAAC,EAAEQ,sBAAUG;AAFC,GAAhB,CADM,CAPe;AAavBT,EAAAA,YAAY,EAAEM,sBAAUC,MAAV,CAAiBC;AAbR,CAAzB;eAgBef,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group } from 'react-konva';\nimport { faDelete } from './icons';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { calculate } from './utils';\n\nconst DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {\n  let positionX, positionY;\n  // if points exist we have an irregular form (polygon) and position should be computed\n  if (points) {\n    const { x, y } = calculate(points);\n    positionX = x;\n    positionY = y;\n  } else {\n    positionX = x + width - 20; // 10 pixels to the left\n    positionY = y + height - 20; // 10 pixels above\n  }\n\n  return (\n    <Group onClick={() => handleWidgetClick(id)}>\n      <ImageComponent width={20} height={20} x={positionX} y={positionY} src={faDelete} />\n    </Group>\n  );\n};\n\nDeleteWidget.propTypes = {\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number,\n  width: PropTypes.number,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  handleWidgetClick: PropTypes.func.isRequired,\n  points: PropTypes.arrayOf(\n    PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n  ),\n  outlineColor: PropTypes.string.isRequired,\n};\n\nexport default DeleteWidget;\n"],"file":"DeleteWidget.js"}
+{"version":3,"sources":["../src/DeleteWidget.jsx"],"names":["DeleteWidget","height","id","width","x","y","points","isCircle","radius","handleWidgetClick","positionX","positionY","offset","calculated","faDelete","propTypes","PropTypes","string","isRequired","number","func","bool","arrayOf","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,EAAmE,QAAnEA,EAAmE;AAAA,MAA/DC,KAA+D,QAA/DA,KAA+D;AAAA,MAAxDC,CAAwD,QAAxDA,CAAwD;AAAA,MAArDC,CAAqD,QAArDA,CAAqD;AAAA,MAAlDC,MAAkD,QAAlDA,MAAkD;AAAA,MAA1CC,QAA0C,QAA1CA,QAA0C;AAAA,MAAhCC,MAAgC,QAAhCA,MAAgC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AACjG,MAAIC,SAAJ,EAAeC,SAAf;AACA,MAAMC,MAAM,GAAG,EAAf;;AAEA,MAAIL,QAAJ,EAAc;AACZ;AACAG,IAAAA,SAAS,GAAGN,CAAC,GAAGI,MAAJ,GAAaI,MAAzB;AACAD,IAAAA,SAAS,GAAGN,CAAZ;AACD,GAJD,MAIO,IAAIC,MAAJ,EAAY;AACjB;AACA,QAAMO,UAAU,GAAG,sBAAUP,MAAV,CAAnB;AACAI,IAAAA,SAAS,GAAGG,UAAU,CAACT,CAAvB;AACAO,IAAAA,SAAS,GAAGE,UAAU,CAACR,CAAvB;AACD,GALM,MAKA;AACL;AACAK,IAAAA,SAAS,GAAGN,CAAC,GAAGD,KAAJ,GAAYS,MAAxB;AACAD,IAAAA,SAAS,GAAGN,CAAC,GAAGJ,MAAJ,GAAaW,MAAzB;AACD;;AAED,sBACE,gCAAC,iBAAD;AAAO,IAAA,OAAO,EAAE;AAAA,aAAMH,iBAAiB,CAACP,EAAD,CAAvB;AAAA;AAAhB,kBACE,gCAAC,sBAAD;AAAgB,IAAA,KAAK,EAAE,EAAvB;AAA2B,IAAA,MAAM,EAAE,EAAnC;AAAuC,IAAA,CAAC,EAAEQ,SAA1C;AAAqD,IAAA,CAAC,EAAEC,SAAxD;AAAmE,IAAA,GAAG,EAAEG;AAAxE,IADF,CADF;AAKD,CAxBD;;AA0BAd,YAAY,CAACe,SAAb,GAAyB;AACvBb,EAAAA,EAAE,EAAEc,sBAAUC,MAAV,CAAiBC,UADE;AAEvBjB,EAAAA,MAAM,EAAEe,sBAAUG,MAFK;AAGvBhB,EAAAA,KAAK,EAAEa,sBAAUG,MAHM;AAIvBf,EAAAA,CAAC,EAAEY,sBAAUG,MAAV,CAAiBD,UAJG;AAKvBb,EAAAA,CAAC,EAAEW,sBAAUG,MAAV,CAAiBD,UALG;AAMvBT,EAAAA,iBAAiB,EAAEO,sBAAUI,IAAV,CAAeF,UANX;AAOvBV,EAAAA,MAAM,EAAEQ,sBAAUG,MAPK;AAQvBZ,EAAAA,QAAQ,EAAES,sBAAUK,IARG;AASvBf,EAAAA,MAAM,EAAEU,sBAAUM,OAAV,CACNN,sBAAUO,KAAV,CAAgB;AACdnB,IAAAA,CAAC,EAAEY,sBAAUG,MADC;AAEdd,IAAAA,CAAC,EAAEW,sBAAUG;AAFC,GAAhB,CADM;AATe,CAAzB;eAiBenB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group } from 'react-konva';\nimport { faDelete } from './icons';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { calculate } from './utils';\n\nconst DeleteWidget = ({ height, id, width, x, y, points, isCircle, radius, handleWidgetClick }) => {\n  let positionX, positionY;\n  const offset = 20;\n\n  if (isCircle) {\n    // For circles, position the delete icon above the circle\n    positionX = x + radius - offset;\n    positionY = y;\n  } else if (points) {\n    // For polygons, compute position based on points\n    const calculated = calculate(points);\n    positionX = calculated.x;\n    positionY = calculated.y;\n  } else {\n    // For rectangles\n    positionX = x + width - offset;\n    positionY = y + height - offset;\n  }\n\n  return (\n    <Group onClick={() => handleWidgetClick(id)}>\n      <ImageComponent width={20} height={20} x={positionX} y={positionY} src={faDelete} />\n    </Group>\n  );\n};\n\nDeleteWidget.propTypes = {\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number,\n  width: PropTypes.number,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  handleWidgetClick: PropTypes.func.isRequired,\n  radius: PropTypes.number,\n  isCircle: PropTypes.bool,\n  points: PropTypes.arrayOf(\n    PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n  ),\n};\n\nexport default DeleteWidget;\n"],"file":"DeleteWidget.js"}

package/configure/lib/buttons/circle.js

@@ -18,7 +18,7 @@ var CircleButton = function CircleButton(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: "48",
     height: "32",
-    viewBox: "0 0 48 32",
+    viewBox: "56 0 48 32",
     fill: "none"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     fillRule: "evenodd",

package/configure/lib/buttons/circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/buttons/circle.jsx"],"names":["CircleButton","isActive","propTypes","PropTypes","bool"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,YAAY,GAAG,SAAfA,YAAe;AAAA,2BAAGC,QAAH;AAAA,MAAGA,QAAH,8BAAc,KAAd;AAAA,sBAC1B;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,IAAA,KAAK,EAAC,IAA9C;AAAmD,IAAA,MAAM,EAAC,IAA1D;AAA+D,IAAA,OAAO,EAAC,WAAvE;AAAmF,IAAA,IAAI,EAAC;AAAxF,kBACE;AACE,IAAA,QAAQ,EAAC,SADX;AAEE,IAAA,QAAQ,EAAC,SAFX;AAGE,IAAA,CAAC,EAAC,2JAHJ;AAIE,IAAA,IAAI,EAAEA,QAAQ,GAAG,SAAH,GAAe;AAJ/B,IADF,eAOE;AAAQ,IAAA,EAAE,EAAC,IAAX;AAAgB,IAAA,EAAE,EAAC,IAAnB;AAAwB,IAAA,CAAC,EAAC,KAA1B;AAAgC,IAAA,MAAM,EAAC;AAAvC,IAPF,CAD0B;AAAA,CAArB;;;AAYPD,YAAY,CAACE,SAAb,GAAyB;AACvBD,EAAAA,QAAQ,EAAEE,sBAAUC;AADG,CAAzB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nexport const CircleButton = ({ isActive = false }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"32\" viewBox=\"0 0 48 32\" fill=\"none\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M56 4C56 1.79086 57.7909 0 60 0H99C101.209 0 103 1.79086 103 4V28.0001C103 30.2093 101.209 32.0001 99 32.0001H60C57.7909 32.0001 56 30.2093 56 28.0001V4Z\"\n      fill={isActive ? '#D3D4D9' : '#ECEDF1'}\n    />\n    <circle cx=\"79\" cy=\"16\" r=\"7.5\" stroke=\"black\" />\n  </svg>\n);\n\nCircleButton.propTypes = {\n  isActive: PropTypes.bool,\n};\n"],"file":"circle.js"}
+{"version":3,"sources":["../../src/buttons/circle.jsx"],"names":["CircleButton","isActive","propTypes","PropTypes","bool"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,YAAY,GAAG,SAAfA,YAAe;AAAA,2BAAGC,QAAH;AAAA,MAAGA,QAAH,8BAAc,KAAd;AAAA,sBAC1B;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,IAAA,KAAK,EAAC,IAA9C;AAAmD,IAAA,MAAM,EAAC,IAA1D;AAA+D,IAAA,OAAO,EAAC,YAAvE;AAAoF,IAAA,IAAI,EAAC;AAAzF,kBACE;AACE,IAAA,QAAQ,EAAC,SADX;AAEE,IAAA,QAAQ,EAAC,SAFX;AAGE,IAAA,CAAC,EAAC,2JAHJ;AAIE,IAAA,IAAI,EAAEA,QAAQ,GAAG,SAAH,GAAe;AAJ/B,IADF,eAOE;AAAQ,IAAA,EAAE,EAAC,IAAX;AAAgB,IAAA,EAAE,EAAC,IAAnB;AAAwB,IAAA,CAAC,EAAC,KAA1B;AAAgC,IAAA,MAAM,EAAC;AAAvC,IAPF,CAD0B;AAAA,CAArB;;;AAYPD,YAAY,CAACE,SAAb,GAAyB;AACvBD,EAAAA,QAAQ,EAAEE,sBAAUC;AADG,CAAzB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nexport const CircleButton = ({ isActive = false }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"32\" viewBox=\"56 0 48 32\" fill=\"none\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M56 4C56 1.79086 57.7909 0 60 0H99C101.209 0 103 1.79086 103 4V28.0001C103 30.2093 101.209 32.0001 99 32.0001H60C57.7909 32.0001 56 30.2093 56 28.0001V4Z\"\n      fill={isActive ? '#D3D4D9' : '#ECEDF1'}\n    />\n    <circle cx=\"79\" cy=\"16\" r=\"7.5\" stroke=\"black\" />\n  </svg>\n);\n\nCircleButton.propTypes = {\n  isActive: PropTypes.bool,\n};\n"],"file":"circle.js"}

package/configure/lib/defaults.js

@@ -11,7 +11,8 @@ var _default = {
     imageUrl: '',
     shapes: {
       rectangles: [],
-      polygons: []
+      polygons: [],
+      circles: []
     },
     multipleCorrect: true,
     partialScoring: false,

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","toolbarEditorPosition","imageUrl","shapes","rectangles","polygons","multipleCorrect","partialScoring","dimensions","height","width","hotspotColor","hotspotList","outlineColor","outlineList","promptEnabled","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","configuration","settings","label","rationale","settingsPanelDisabled","spellCheck","enabled","teacherInstructions","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,EADH;AAELC,IAAAA,qBAAqB,EAAE,QAFlB;AAGLC,IAAAA,QAAQ,EAAE,EAHL;AAILC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,EADN;AAENC,MAAAA,QAAQ,EAAE;AAFJ,KAJH;AAQLC,IAAAA,eAAe,EAAE,IARZ;AASLC,IAAAA,cAAc,EAAE,KATX;AAULC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,CADE;AAEVC,MAAAA,KAAK,EAAE;AAFG,KAVP;AAcLC,IAAAA,YAAY,EAAE,2BAdT;AAeLC,IAAAA,WAAW,EAAE,CAAC,2BAAD,CAfR;AAgBLC,IAAAA,YAAY,EAAE,MAhBT;AAiBLC,IAAAA,WAAW,EAAE,CAAC,MAAD,CAjBR;AAkBLC,IAAAA,aAAa,EAAE,IAlBV;AAmBLC,IAAAA,gBAAgB,EAAE,IAnBb;AAoBLC,IAAAA,0BAA0B,EAAE,IApBvB;AAqBLC,IAAAA,0BAA0B,EAAE,IArBvB;AAsBLC,IAAAA,WAAW,EAAE;AAtBR,GADM;AAyBbC,EAAAA,aAAa,EAAE;AACbd,IAAAA,eAAe,EAAE;AACfe,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbf,IAAAA,cAAc,EAAE;AACdc,MAAAA,QAAQ,EAAE,KADI;AAEdC,MAAAA,KAAK,EAAE;AAFO,KALH;AASbC,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETC,MAAAA,KAAK,EAAE;AAFE,KATE;AAabtB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KAbK;AAiBbE,IAAAA,qBAAqB,EAAE,KAjBV;AAkBbC,IAAAA,UAAU,EAAE;AACVH,MAAAA,KAAK,EAAE,YADG;AAEVD,MAAAA,QAAQ,EAAE,KAFA;AAGVK,MAAAA,OAAO,EAAE;AAHC,KAlBC;AAuBbC,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAvBR;AA2BbM,IAAAA,mBAAmB,EAAE;AACnBP,MAAAA,QAAQ,EAAE,KADS;AAEnBK,MAAAA,OAAO,EAAE,IAFU;AAGnBJ,MAAAA,KAAK,EAAE;AAHY,KA3BR;AAgCbO,IAAAA,SAAS,EAAE,CAhCE;AAiCbC,IAAAA,aAAa,EAAE;AACbH,MAAAA,mBAAmB,EAAE,GADR;AAEb3B,MAAAA,MAAM,EAAE,GAFK;AAGbuB,MAAAA,SAAS,EAAE;AAHE,KAjCF;AAsCbQ,IAAAA,cAAc,EAAE;AACdJ,MAAAA,mBAAmB,EAAE,GADP;AAEd3B,MAAAA,MAAM,EAAE,GAFM;AAGduB,MAAAA,SAAS,EAAE;AAHG,KAtCH;AA2CbS,IAAAA,UAAU,EAAE;AACVX,MAAAA,QAAQ,EAAE,KADA;AAEVC,MAAAA,KAAK,EAAE;AAFG,KA3CC;AA+CbW,IAAAA,aAAa,EAAE;AACbC,MAAAA,SAAS,EAAE,KADE;AAEbC,MAAAA,UAAU,EAAE;AAFC,KA/CF;AAmDbC,IAAAA,QAAQ,EAAE;AACRf,MAAAA,QAAQ,EAAE,KADF;AAERC,MAAAA,KAAK,EAAE,kBAFC;AAGRI,MAAAA,OAAO,EAAE;AAHD,KAnDG;AAwDbW,IAAAA,eAAe,EAAE;AACff,MAAAA,KAAK,EAAE,kBADQ;AAEfgB,MAAAA,OAAO,EAAE;AAFM;AAxDJ;AAzBF,C","sourcesContent":["export default {\n  model: {\n    prompt: '',\n    toolbarEditorPosition: 'bottom',\n    imageUrl: '',\n    shapes: {\n      rectangles: [],\n      polygons: [],\n    },\n    multipleCorrect: true,\n    partialScoring: false,\n    dimensions: {\n      height: 0,\n      width: 0,\n    },\n    hotspotColor: 'rgba(137, 183, 244, 0.25)',\n    hotspotList: ['rgba(137, 183, 244, 0.25)'],\n    outlineColor: 'blue',\n    outlineList: ['blue'],\n    promptEnabled: true,\n    rationaleEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    strokeWidth: 5,\n  },\n  configuration: {\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio',\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","toolbarEditorPosition","imageUrl","shapes","rectangles","polygons","circles","multipleCorrect","partialScoring","dimensions","height","width","hotspotColor","hotspotList","outlineColor","outlineList","promptEnabled","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","configuration","settings","label","rationale","settingsPanelDisabled","spellCheck","enabled","teacherInstructions","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,EADH;AAELC,IAAAA,qBAAqB,EAAE,QAFlB;AAGLC,IAAAA,QAAQ,EAAE,EAHL;AAILC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,EADN;AAENC,MAAAA,QAAQ,EAAE,EAFJ;AAGNC,MAAAA,OAAO,EAAE;AAHH,KAJH;AASLC,IAAAA,eAAe,EAAE,IATZ;AAULC,IAAAA,cAAc,EAAE,KAVX;AAWLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,CADE;AAEVC,MAAAA,KAAK,EAAE;AAFG,KAXP;AAeLC,IAAAA,YAAY,EAAE,2BAfT;AAgBLC,IAAAA,WAAW,EAAE,CAAC,2BAAD,CAhBR;AAiBLC,IAAAA,YAAY,EAAE,MAjBT;AAkBLC,IAAAA,WAAW,EAAE,CAAC,MAAD,CAlBR;AAmBLC,IAAAA,aAAa,EAAE,IAnBV;AAoBLC,IAAAA,gBAAgB,EAAE,IApBb;AAqBLC,IAAAA,0BAA0B,EAAE,IArBvB;AAsBLC,IAAAA,0BAA0B,EAAE,IAtBvB;AAuBLC,IAAAA,WAAW,EAAE;AAvBR,GADM;AA0BbC,EAAAA,aAAa,EAAE;AACbd,IAAAA,eAAe,EAAE;AACfe,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbf,IAAAA,cAAc,EAAE;AACdc,MAAAA,QAAQ,EAAE,KADI;AAEdC,MAAAA,KAAK,EAAE;AAFO,KALH;AASbC,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETC,MAAAA,KAAK,EAAE;AAFE,KATE;AAabvB,IAAAA,MAAM,EAAE;AACNsB,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KAbK;AAiBbE,IAAAA,qBAAqB,EAAE,KAjBV;AAkBbC,IAAAA,UAAU,EAAE;AACVH,MAAAA,KAAK,EAAE,YADG;AAEVD,MAAAA,QAAQ,EAAE,KAFA;AAGVK,MAAAA,OAAO,EAAE;AAHC,KAlBC;AAuBbC,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAvBR;AA2BbM,IAAAA,mBAAmB,EAAE;AACnBP,MAAAA,QAAQ,EAAE,KADS;AAEnBK,MAAAA,OAAO,EAAE,IAFU;AAGnBJ,MAAAA,KAAK,EAAE;AAHY,KA3BR;AAgCbO,IAAAA,SAAS,EAAE,CAhCE;AAiCbC,IAAAA,aAAa,EAAE;AACbH,MAAAA,mBAAmB,EAAE,GADR;AAEb5B,MAAAA,MAAM,EAAE,GAFK;AAGbwB,MAAAA,SAAS,EAAE;AAHE,KAjCF;AAsCbQ,IAAAA,cAAc,EAAE;AACdJ,MAAAA,mBAAmB,EAAE,GADP;AAEd5B,MAAAA,MAAM,EAAE,GAFM;AAGdwB,MAAAA,SAAS,EAAE;AAHG,KAtCH;AA2CbS,IAAAA,UAAU,EAAE;AACVX,MAAAA,QAAQ,EAAE,KADA;AAEVC,MAAAA,KAAK,EAAE;AAFG,KA3CC;AA+CbW,IAAAA,aAAa,EAAE;AACbC,MAAAA,SAAS,EAAE,KADE;AAEbC,MAAAA,UAAU,EAAE;AAFC,KA/CF;AAmDbC,IAAAA,QAAQ,EAAE;AACRf,MAAAA,QAAQ,EAAE,KADF;AAERC,MAAAA,KAAK,EAAE,kBAFC;AAGRI,MAAAA,OAAO,EAAE;AAHD,KAnDG;AAwDbW,IAAAA,eAAe,EAAE;AACff,MAAAA,KAAK,EAAE,kBADQ;AAEfgB,MAAAA,OAAO,EAAE;AAFM;AAxDJ;AA1BF,C","sourcesContent":["export default {\n  model: {\n    prompt: '',\n    toolbarEditorPosition: 'bottom',\n    imageUrl: '',\n    shapes: {\n      rectangles: [],\n      polygons: [],\n      circles: [],\n    },\n    multipleCorrect: true,\n    partialScoring: false,\n    dimensions: {\n      height: 0,\n      width: 0,\n    },\n    hotspotColor: 'rgba(137, 183, 244, 0.25)',\n    hotspotList: ['rgba(137, 183, 244, 0.25)'],\n    outlineColor: 'blue',\n    outlineList: ['blue'],\n    promptEnabled: true,\n    rationaleEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    strokeWidth: 5,\n  },\n  configuration: {\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio',\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"file":"defaults.js"}

package/configure/lib/hotspot-circle.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactKonva = require("react-konva");
+
+var _styles = require("@material-ui/core/styles");
+
+var _DeleteWidget = _interopRequireDefault(require("./DeleteWidget"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var CircleComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(CircleComponent, _React$Component);
+
+  var _super = _createSuper(CircleComponent);
+
+  function CircleComponent(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, CircleComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
+      var _this$props = _this.props,
+          radius = _this$props.radius,
+          isDrawing = _this$props.isDrawing,
+          onClick = _this$props.onClick,
+          id = _this$props.id;
+
+      if (radius <= 0 && isDrawing) {
+        return;
+      }
+
+      e.cancelBubble = true;
+      onClick(id);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      document.body.style.cursor = 'pointer';
+
+      _this.setState({
+        hovered: true
+      });
+
+      _this.trRef.current.setNode(_this.shapeRef.current);
+
+      _this.trRef.current.getLayer().batchDraw();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        hovered: false
+      });
+
+      document.body.style.cursor = 'default';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragEnd", function (e) {
+      var _this$props2 = _this.props,
+          onDragEnd = _this$props2.onDragEnd,
+          id = _this$props2.id;
+
+      _this.setState({
+        isDragging: false
+      });
+
+      onDragEnd(id, {
+        x: e.target.x(),
+        y: e.target.y()
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResizeEnd", function () {
+      var _this$props3 = _this.props,
+          onDragEnd = _this$props3.onDragEnd,
+          id = _this$props3.id;
+      var node = _this.shapeRef.current;
+      var newRadius = Math.max(node.radius() * node.scaleX(), 5);
+
+      _this.setState({
+        isDragging: false
+      });
+
+      onDragEnd(id, {
+        x: node.x(),
+        y: node.y(),
+        radius: newRadius
+      });
+      node.scaleX(1);
+      node.scaleY(1);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDelete", function (id) {
+      var onDeleteShape = _this.props.onDeleteShape;
+      onDeleteShape(id);
+    });
+    _this.state = {
+      hovered: false,
+      isDragging: false
+    };
+    _this.shapeRef = /*#__PURE__*/_react["default"].createRef();
+    _this.trRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(CircleComponent, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          correct = _this$props4.correct,
+          radius = _this$props4.radius,
+          hotspotColor = _this$props4.hotspotColor,
+          id = _this$props4.id,
+          outlineColor = _this$props4.outlineColor,
+          x = _this$props4.x,
+          y = _this$props4.y,
+          _this$props4$strokeWi = _this$props4.strokeWidth,
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        classes: classes.group,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseEnter: this.handleMouseEnter
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
+        classes: classes.base,
+        ref: this.shapeRef,
+        radius: radius,
+        fill: hotspotColor,
+        onClick: this.handleClick,
+        onTap: this.handleClick,
+        draggable: true,
+        stroke: outlineColor,
+        strokeWidth: correct ? strokeWidth : 0,
+        onDragStart: function onDragStart() {
+          return _this2.setState({
+            isDragging: true
+          });
+        },
+        onDragEnd: this.handleOnDragEnd,
+        onTransformStart: function onTransformStart() {
+          return _this2.setState({
+            isDragging: true
+          });
+        },
+        onTransformEnd: this.onResizeEnd,
+        x: x,
+        y: y
+      }), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react["default"].createElement(_DeleteWidget["default"], {
+        id: id,
+        radius: radius,
+        x: x,
+        y: y,
+        handleWidgetClick: this.handleDelete,
+        isCircle: true
+      }), this.state.hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Transformer, {
+        ref: this.trRef,
+        rotateEnabled: false,
+        keepRatio: true,
+        boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
+          // Constraint to prevent resizing too small
+          if (newBox.width < 10 || newBox.height < 10) {
+            return oldBox;
+          }
+
+          return newBox;
+        }
+      }));
+    }
+  }]);
+  return CircleComponent;
+}(_react["default"].Component);
+
+var styles = function styles() {
+  return {
+    base: {
+      cursor: 'pointer',
+      opacity: 0.5
+    },
+    group: {
+      padding: '12px'
+    }
+  };
+};
+
+CircleComponent.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  correct: _propTypes["default"].bool,
+  isDrawing: _propTypes["default"].bool.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  radius: _propTypes["default"].number.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  onDeleteShape: _propTypes["default"].func.isRequired,
+  onDragEnd: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired,
+  strokeWidth: _propTypes["default"].number
+};
+CircleComponent.defaultProps = {
+  correct: false
+};
+
+var _default = (0, _styles.withStyles)(styles)(CircleComponent);
+
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-circle.js.map

package/configure/lib/hotspot-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hotspot-circle.jsx"],"names":["CircleComponent","props","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","newRadius","Math","max","scaleX","scaleY","onDeleteShape","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","oldBox","newBox","width","height","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport DeleteWidget from './DeleteWidget';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { radius, isDrawing, onClick, id } = this.props;\n    if (radius <= 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    const node = this.shapeRef.current;\n\n    const newRadius = Math.max(node.radius() * node.scaleX(), 5);\n\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      radius: newRadius,\n    });\n\n    node.scaleX(1);\n    node.scaleY(1);\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={radius}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} radius={radius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            boundBoxFunc={(oldBox, newBox) => {\n              // Constraint to prevent resizing too small\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nCircleComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"hotspot-circle.js"}

package/configure/lib/hotspot-container.js

@@ -25,23 +25,25 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _index = require("@material-ui/core/styles/index");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _index = require("@material-ui/core/styles/index");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _hotspotDrawable = _interopRequireDefault(require("./hotspot-drawable"));
+var _button = _interopRequireDefault(require("./button"));
 
-var _rectangle = require("./buttons/rectangle");
+var _circle = require("./buttons/circle");
 
 var _polygon = require("./buttons/polygon");
 
-var _button = _interopRequireDefault(require("./button"));
+var _rectangle = require("./buttons/rectangle");
+
+var _hotspotDrawable = _interopRequireDefault(require("./hotspot-drawable"));
 
 var _uploadControl = _interopRequireDefault(require("./upload-control"));
 
@@ -270,6 +272,15 @@ var Container = /*#__PURE__*/function (_Component) {
         className: classes.buttonShape
       }, /*#__PURE__*/_react["default"].createElement(_polygon.PolygonButton, {
         isActive: selectedShape === 'polygon'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: function onClick() {
+          return _this2.setState({
+            selectedShape: selectedShape === 'circle' ? 'none' : 'circle'
+          });
+        },
+        className: classes.buttonShape
+      }, /*#__PURE__*/_react["default"].createElement(_circle.CircleButton, {
+        isActive: selectedShape === 'circle'
       })), imageUrl && /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
         classNameButton: classes.replaceButton,
         classNameSection: classes.replaceSection,

package/configure/lib/hotspot-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","showTooltip","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","buttonShape","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","common","white","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport { RectangleButton } from './buttons/rectangle';\nimport { PolygonButton } from './buttons/polygon';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: 'none',\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: 'none' });\n  };\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === 'rectangle'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === 'polygon'} />\n            </div>\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow} />\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: theme.palette.common.white,\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
+{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","showTooltip","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","buttonShape","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","common","white","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport Button from './button';\nimport { CircleButton } from './buttons/circle';\nimport { PolygonButton } from './buttons/polygon';\nimport { RectangleButton } from './buttons/rectangle';\n\nimport Drawable from './hotspot-drawable';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: 'none',\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: 'none' });\n  };\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === 'rectangle'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === 'polygon'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}\n              className={classes.buttonShape}\n            >\n              <CircleButton isActive={selectedShape === 'circle'} />\n            </div>\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow} />\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: theme.palette.common.white,\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}