@pie-element/hotspot 5.18.2-next.9 → 5.19.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.19.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@5.18.1...@pie-element/hotspot@5.19.0) (2023-11-07)
+
+
+### Features
+
+* **hotspot:** ability to delete an hospot pd-597 ([972c4c9](https://github.com/pie-framework/pie-elements/commit/972c4c90c41fe7dd447715e711883af4517bc2a5))
+* **hotspot:** add image component to delete button pd-597 ([17c64c5](https://github.com/pie-framework/pie-elements/commit/17c64c5984977299cdfdc1594438d53b775c57fe))
+* **hotspot:** add tests for delete functionality pd-597 ([772762e](https://github.com/pie-framework/pie-elements/commit/772762ee7760356c16ab74cef41ec73a3de0dc65))
+* **hotspot:** delete unused field from state pd-597 ([620b9a6](https://github.com/pie-framework/pie-elements/commit/620b9a693063de7cff5448ce95ff3026b5803ce9))
+* **hotspot:** get rid of undo pd-597 ([185f7d1](https://github.com/pie-framework/pie-elements/commit/185f7d1fde2f6af6ba9b3c4b82597066f267805d))
+* **hotspot:** refactor code where needed pd-597 ([b7640d2](https://github.com/pie-framework/pie-elements/commit/b7640d203accb908fd56a9d2dcae4bd4959fd130))
+* **hotspot:** update snapshot pd-597 ([7e81c25](https://github.com/pie-framework/pie-elements/commit/7e81c2589eecc0f2ce97a2873d468929241a05e8))
+
+
+
+
+
 ## [5.18.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@5.18.0...@pie-element/hotspot@5.18.1) (2023-10-26)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.15.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@5.14.1...@pie-element/hotspot-configure@5.15.0) (2023-11-07)
+
+
+### Features
+
+* **hotspot:** ability to delete an hospot pd-597 ([972c4c9](https://github.com/pie-framework/pie-elements/commit/972c4c90c41fe7dd447715e711883af4517bc2a5))
+* **hotspot:** add image component to delete button pd-597 ([17c64c5](https://github.com/pie-framework/pie-elements/commit/17c64c5984977299cdfdc1594438d53b775c57fe))
+* **hotspot:** add tests for delete functionality pd-597 ([772762e](https://github.com/pie-framework/pie-elements/commit/772762ee7760356c16ab74cef41ec73a3de0dc65))
+* **hotspot:** delete unused field from state pd-597 ([620b9a6](https://github.com/pie-framework/pie-elements/commit/620b9a693063de7cff5448ce95ff3026b5803ce9))
+* **hotspot:** get rid of undo pd-597 ([185f7d1](https://github.com/pie-framework/pie-elements/commit/185f7d1fde2f6af6ba9b3c4b82597066f267805d))
+* **hotspot:** refactor code where needed pd-597 ([b7640d2](https://github.com/pie-framework/pie-elements/commit/b7640d203accb908fd56a9d2dcae4bd4959fd130))
+* **hotspot:** update snapshot pd-597 ([7e81c25](https://github.com/pie-framework/pie-elements/commit/7e81c2589eecc0f2ce97a2873d468929241a05e8))
+
+
+
+
+
 ## [5.14.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@5.14.0...@pie-element/hotspot-configure@5.14.1) (2023-10-26)
 
 

package/configure/lib/DeleteWidget.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactKonva = require("react-konva");
+
+var _icons = require("./icons");
+
+var _image = _interopRequireDefault(require("./image"));
+
+var _utils = require("./utils");
+
+var DeleteWidget = function DeleteWidget(_ref) {
+  var height = _ref.height,
+      id = _ref.id,
+      width = _ref.width,
+      x = _ref.x,
+      y = _ref.y,
+      points = _ref.points,
+      outlineColor = _ref.outlineColor,
+      handleWidgetClick = _ref.handleWidgetClick;
+  var positionX, positionY; // if points exist we have an irregular form (polygon) and position should be computed
+
+  if (points) {
+    var _calculate = (0, _utils.calculate)(points),
+        _x = _calculate.x,
+        _y = _calculate.y;
+
+    positionX = _x;
+    positionY = _y;
+  } else {
+    positionX = x + width - 20; // 10 pixels to the left
+
+    positionY = y + height - 20; // 10 pixels above
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+    onClick: function onClick() {
+      return handleWidgetClick(id);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+    width: 20,
+    height: 20,
+    x: positionX,
+    y: positionY,
+    src: _icons.faDelete
+  }));
+};
+
+DeleteWidget.propTypes = {
+  id: _propTypes["default"].string.isRequired,
+  height: _propTypes["default"].number,
+  width: _propTypes["default"].number,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired,
+  handleWidgetClick: _propTypes["default"].func.isRequired,
+  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;
+//# sourceMappingURL=DeleteWidget.js.map

package/configure/lib/DeleteWidget.js.map

@@ -0,0 +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,iBAAD;AAAO,IAAA,KAAK,EAAE,EAAd;AAAkB,IAAA,MAAM,EAAE,EAA1B;AAA8B,IAAA,CAAC,EAAEO,SAAjC;AAA4C,IAAA,CAAC,EAAEC,SAA/C;AAA0D,IAAA,GAAG,EAAEC;AAA/D,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 Image from './image';\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      <Image 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"}

package/configure/lib/hotspot-container.js

@@ -151,15 +151,14 @@ var Container = /*#__PURE__*/function (_Component) {
         return onUpdateShapes((0, _utils.groupShapes)(newShapes));
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUndo", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDeleteShape", function (id) {
       var shapes = _this.state.shapes;
 
       if (shapes && shapes.length) {
-        // sort by index value
-        var newShapes = shapes.sort(function (a, b) {
-          return parseInt(a.index) - parseInt(b.index);
+        // filter the deleted shape out
+        var newShapes = shapes.filter(function (shape) {
+          return shape.id !== id;
         });
-        newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];
 
         _this.onUpdateShapes(newShapes);
       }
@@ -247,10 +246,6 @@ var Container = /*#__PURE__*/function (_Component) {
         setRef: function setRef(ref) {
           _this2.input = ref;
         }
-      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        disabled: !(shapes && shapes.length),
-        onClick: this.handleUndo,
-        label: "Undo"
       }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
         disabled: !(shapes && shapes.length),
         onClick: this.handleClearAll,
@@ -269,6 +264,7 @@ var Container = /*#__PURE__*/function (_Component) {
         multipleCorrect: multipleCorrect,
         onUpdateImageDimension: onUpdateImageDimension,
         onUpdateShapes: this.onUpdateShapes,
+        onDeleteShape: this.onDeleteShape,
         outlineColor: outlineColor,
         shapes: shapes,
         strokeWidth: strokeWidth,

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","length","sort","a","b","parseInt","index","slice","dragEnabled","showTooltip","cancel","done","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","replaceButton","replaceSection","handleInputClick","ref","input","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","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","shape","rectangles","array","polygons","number","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAU;AACxB,MAAMC,SAAS,GAAG,SAAlB;AAEA,SAAOD,IAAI,CAACE,IAAL,CAAUC,KAAV,CAAgBF,SAAhB,CAAP;AACD,CAJD;;IAMaG,S;;;;;AASX,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,uGAmBF,UAACL,IAAD,EAAU;AACzB,UAAIA,IAAI,YAAYM,IAApB,EAA0B;AACxB,0BAAuC,MAAKD,KAA5C;AAAA,YAAQE,aAAR,eAAQA,aAAR;AAAA,YAAuBC,WAAvB,eAAuBA,WAAvB;AACA,YAAMC,MAAM,GAAG,IAAIC,UAAJ,EAAf;;AAEAD,QAAAA,MAAM,CAACE,SAAP,GAAmB;AAAA,iBAAMJ,aAAa,CAACE,MAAM,CAACG,MAAR,CAAnB;AAAA,SAAnB;;AACAH,QAAAA,MAAM,CAACI,aAAP,CAAqBb,IAArB;;AAEA,YAAIQ,WAAJ,EAAiB;AACfA,UAAAA,WAAW,iCACN,MAAKM,gBADC;AAETC,YAAAA,aAAa,EAAE;AAAA,qBAAMf,IAAN;AAAA,aAFN;AAGTgB,YAAAA,QAAQ,EAAE;AAHD,aAAX;AAKD;AACF;AACF,KAnCkB;AAAA,uGAoCF;AAAA,aAAM,MAAKC,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KApCE;AAAA,wGAsCD;AAAA,aAAM,MAAKD,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KAtCC;AAAA,sGAwCH,UAACC,CAAD,EAAO;AACrB,UAAQC,KAAR,GAAkBD,CAAC,CAACE,aAApB,CAAQD,KAAR;;AAEA,UAAIA,KAAK,IAAIrB,OAAO,CAACqB,KAAK,CAAC,CAAD,CAAN,CAApB,EAAgC;AAC9B,cAAKE,cAAL,CAAoBF,KAAK,CAAC,CAAD,CAAzB;AACD;AACF,KA9CkB;AAAA,qGAgDJ,UAACD,CAAD,EAAO;AACpBA,MAAAA,CAAC,CAACI,cAAF;AAEA,4BAAyBJ,CAAC,CAACK,YAA3B;AAAA,UAAQC,KAAR,mBAAQA,KAAR;AAAA,UAAeL,KAAf,mBAAeA,KAAf;;AAEA,UAAIK,KAAK,IAAIA,KAAK,CAAC,CAAD,CAAL,CAASC,IAAT,KAAkB,MAA/B,EAAuC;AACrC,YAAM1B,IAAI,GAAGyB,KAAK,CAAC,CAAD,CAAL,CAASE,SAAT,EAAb;;AAEA,YAAI5B,OAAO,CAACC,IAAD,CAAX,EAAmB;AACjB,gBAAKsB,cAAL,CAAoBtB,IAApB;AACD;AACF,OAND,MAMO,IAAID,OAAO,CAACqB,KAAK,CAAC,CAAD,CAAN,CAAX,EAAuB;AAC5B,cAAKE,cAAL,CAAoBF,KAAK,CAAC,CAAD,CAAzB;AACD;;AAED,YAAKQ,eAAL;AACD,KAhEkB;AAAA,yGAkEA,UAACT,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACI,cAAF;AAEA,UAAQL,cAAR,GAA2B,MAAKW,KAAhC,CAAQX,cAAR;;AAEA,UAAI,CAACA,cAAL,EAAqB;AACnB,cAAKY,cAAL;AACD;AACF,KA1EkB;AAAA,yGA4EA,UAACX,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACI,cAAF;;AAEA,YAAKK,eAAL;AACD,KAhFkB;AAAA,uGAkFF,UAACG,SAAD,EAAe;AAC9B,UAAQC,cAAR,GAA2B,MAAK3B,KAAhC,CAAQ2B,cAAR;;AAEA,YAAKf,QAAL,CACE;AAAEgB,QAAAA,MAAM,EAAEF;AAAV,OADF,EAEE;AACA;AAAA,eAAMC,cAAc,CAAC,wBAAYD,SAAZ,CAAD,CAApB;AAAA,OAHF;AAKD,KA1FkB;AAAA,mGA4FN,YAAM;AACjB,UAAQE,MAAR,GAAmB,MAAKJ,KAAxB,CAAQI,MAAR;;AAEA,UAAIA,MAAM,IAAIA,MAAM,CAACC,MAArB,EAA6B;AAC3B;AACA,YAAIH,SAAS,GAAGE,MAAM,CAACE,IAAP,CAAY,UAACC,CAAD,EAAIC,CAAJ;AAAA,iBAAUC,QAAQ,CAACF,CAAC,CAACG,KAAH,CAAR,GAAoBD,QAAQ,CAACD,CAAC,CAACE,KAAH,CAAtC;AAAA,SAAZ,CAAhB;AAEAR,QAAAA,SAAS,GAAGA,SAAS,GAAGA,SAAS,CAACS,KAAV,CAAgB,CAAhB,EAAmBT,SAAS,CAACG,MAAV,GAAmB,CAAtC,CAAH,GAA8C,EAAnE;;AAEA,cAAKF,cAAL,CAAoBD,SAApB;AACD;AACF,KAvGkB;AAAA,uGAyGF;AAAA,aAAM,MAAKC,cAAL,CAAoB,EAApB,CAAN;AAAA,KAzGE;AAAA,yGA2GA;AAAA,aAAM,MAAKf,QAAL,CAAc;AAAEwB,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KA3GA;AAAA,0GA6GC;AAAA,aAAM,MAAKxB,QAAL,CAAc;AAAEwB,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KA7GD;AAAA,yGA+GA,YAAM;AACvB,UAAQjC,WAAR,GAAwB,MAAKH,KAA7B,CAAQG,WAAR;;AAEA,UAAIA,WAAJ,EAAiB;AACfA,QAAAA,WAAW,CAAC,MAAKM,gBAAN,CAAX;AACD;AACF,KArHkB;AAAA,sGAuHH;AAAA,aAAM,MAAKG,QAAL,CAAc;AAAEyB,QAAAA,WAAW,EAAE,CAAC,MAAKb,KAAL,CAAWa;AAA3B,OAAd,CAAN;AAAA,KAvHG;AAGjB,UAAKb,KAAL,GAAa;AACXY,MAAAA,WAAW,EAAE,IADF;AAEX;AACAR,MAAAA,MAAM,EAAE,yBAAa5B,KAAK,CAAC4B,MAAnB;AAHG,KAAb;AAKA,UAAKnB,gBAAL,GAAwB;AACtB6B,MAAAA,MAAM,EAAE,kBAAM,CACb,CAFqB;AAGtBC,MAAAA,IAAI,EAAE,cAACR,CAAD,EAAIS,GAAJ;AAAA,eAAY,MAAKxC,KAAL,CAAWE,aAAX,CAAyBsC,GAAzB,CAAZ;AAAA,OAHgB;AAItBC,MAAAA,UAAU,EAAE,sBAAM,CACjB,CALqB;AAMtBC,MAAAA,QAAQ,EAAE,oBAAM,CACf;AAPqB,KAAxB;AARiB;AAiBlB;;;;WAwGD,kBAAS;AAAA;AAAA;;AACP,yBAWI,KAAK1C,KAXT;AAAA,UACE2C,OADF,gBACEA,OADF;AAAA,UAEEC,UAFF,gBAEEA,UAFF;AAAA,UAGEC,SAHF,gBAGEA,SAHF;AAAA,UAIEC,YAJF,gBAIEA,YAJF;AAAA,UAKEC,QALF,gBAKEA,QALF;AAAA,UAMEC,eANF,gBAMEA,eANF;AAAA,UAOEC,sBAPF,gBAOEA,sBAPF;AAAA,UAQEC,YARF,gBAQEA,YARF;AAAA,UASEC,WATF,gBASEA,WATF;AAAA,UAUEC,0BAVF,gBAUEA,0BAVF;AAYA,wBAAqD,KAAK5B,KAA1D;AAAA,UAAQX,cAAR,eAAQA,cAAR;AAAA,UAAwBuB,WAAxB,eAAwBA,WAAxB;AAAA,UAAqCC,WAArC,eAAqCA,WAArC;AACA,UAAQT,MAAR,GAAmB,KAAKJ,KAAxB,CAAQI,MAAR;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEe,OAAO,CAACU;AAAxB,sBACE;AACE,QAAA,SAAS,EAAE,4BAAWV,OAAO,CAACW,GAAnB,mEACRX,OAAO,CAACY,QADA,EACWV,SAAS,IAAI,CAAChC,cADzB,iDAER8B,OAAO,CAACa,SAFA,EAEY3C,cAFZ;AADb,SAKOuB,WAAW,GACZ;AACAqB,QAAAA,UAAU,EAAE,KAAKC,gBADjB;AAEAC,QAAAA,WAAW,EAAE,KAAKD,gBAFlB;AAGAE,QAAAA,UAAU,EAAE,KAAKC,gBAHjB;AAIAC,QAAAA,MAAM,EAAE,KAAKC,YAJb;AAKAC,QAAAA,OAAO,EAAE,KAAKC;AALd,OADY,GAQZ,EAbN,gBAeE;AAAK,QAAA,SAAS,EAAEtB,OAAO,CAACuB;AAAxB,SACGnB,QAAQ,iBACP,gCAAC,yBAAD;AACE,QAAA,eAAe,EAAEJ,OAAO,CAACwB,aAD3B;AAEE,QAAA,gBAAgB,EAAExB,OAAO,CAACyB,cAF5B;AAGE,QAAA,KAAK,EAAC,eAHR;AAIE,QAAA,YAAY,EAAE,KAAKC,gBAJrB;AAKE,QAAA,MAAM,EAAE,gBAACC,GAAD,EAAS;AACf,UAAA,MAAI,CAACC,KAAL,GAAaD,GAAb;AACD;AAPH,QAFJ,eAaE,gCAAC,kBAAD;AAAQ,QAAA,QAAQ,EAAE,EAAE1C,MAAM,IAAIA,MAAM,CAACC,MAAnB,CAAlB;AAA8C,QAAA,OAAO,EAAE,KAAK2C,UAA5D;AAAwE,QAAA,KAAK,EAAC;AAA9E,QAbF,eAcE,gCAAC,kBAAD;AAAQ,QAAA,QAAQ,EAAE,EAAE5C,MAAM,IAAIA,MAAM,CAACC,MAAnB,CAAlB;AAA8C,QAAA,OAAO,EAAE,KAAK4C,cAA5D;AAA4E,QAAA,KAAK,EAAC;AAAlF,QAdF,CAfF,eAgCE;AACE,QAAA,GAAG,EAAE,aAACH,IAAD,EAAS;AACZ,UAAA,MAAI,CAACI,YAAL,GAAoBJ,IAApB;AACD,SAHH;AAIE,QAAA,SAAS,EAAE3B,OAAO,CAACgC;AAJrB,SAMG5B,QAAQ,gBACP,gCAAC,2BAAD;AACE,QAAA,UAAU,EAAEH,UADd;AAEE,QAAA,WAAW,EAAE,KAAKgC,iBAFpB;AAGE,QAAA,UAAU,EAAE,KAAKC,gBAHnB;AAIE,QAAA,QAAQ,EAAE9B,QAJZ;AAKE,QAAA,YAAY,EAAED,YALhB;AAME,QAAA,eAAe,EAAEE,eANnB;AAOE,QAAA,sBAAsB,EAAEC,sBAP1B;AAQE,QAAA,cAAc,EAAE,KAAKtB,cARvB;AASE,QAAA,YAAY,EAAEuB,YAThB;AAUE,QAAA,MAAM,EAAEtB,MAVV;AAWE,QAAA,WAAW,EAAEuB,WAXf;AAYE,QAAA,0BAA0B,EAAEC;AAZ9B,QADO,gBAgBP;AAAK,QAAA,SAAS,EAAE,4BAAWT,OAAO,CAACgC,cAAnB,EAAmChC,OAAO,CAACmC,QAA3C;AAAhB,sBACE,6FADF,eAEE,2CAFF,eAGE,gCAAC,yBAAD;AACE,QAAA,KAAK,EAAC,cADR;AAEE,QAAA,YAAY,EAAE,KAAKT,gBAFrB;AAGE,QAAA,MAAM,EAAE,gBAACC,GAAD,EAAS;AACf,UAAA,MAAI,CAACC,KAAL,GAAaD,GAAb;AACD;AALH,QAHF,CAtBJ,CAhCF,EAoEGvB,QAAQ,iBACP;AAAK,QAAA,SAAS,EAAEJ,OAAO,CAACoC;AAAxB,SACG1C,WAAW,iBACV;AAAK,QAAA,SAAS,EAAEM,OAAO,CAACqC;AAAxB,sBACE,+IADF,eAIE;AAAK,QAAA,SAAS,EAAErC,OAAO,CAACsC;AAAxB,QAJF,CAFJ,eAUE,gCAAC,gBAAD;AAAM,QAAA,SAAS,EAAEtC,OAAO,CAACuC,IAAzB;AAA+B,QAAA,UAAU,EAAE,KAAKC,aAAhD;AAA+D,QAAA,WAAW,EAAE,KAAKA;AAAjF,QAVF,CArEJ,CADF,CADF;AAuFD;;;WAxOD,kCAAgCC,SAAhC,EAA2CC,SAA3C,EAAsD;AACpD;AACA,6CACKA,SADL;AAEEzD,QAAAA,MAAM,EAAE,yBAAawD,SAAS,CAACxD,MAAvB;AAFV;AAID;;;EAP4B0D,gB;;;;AA4O/B,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBnC,IAAAA,IAAI,EAAE;AACJoC,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,GAD5B;AAEJC,MAAAA,YAAY,EAAEJ,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAF/B,KADmB;AAKzBrC,IAAAA,GAAG,EAAE;AACHuC,MAAAA,MAAM,EAAE,mBADL;AAEHC,MAAAA,YAAY,EAAE;AAFX,KALoB;AASzBtC,IAAAA,SAAS,EAAE;AACTqC,MAAAA,MAAM,EAAE;AADC,KATc;AAYzBtC,IAAAA,QAAQ,EAAE;AACRsC,MAAAA,MAAM,sBAAeL,KAAK,CAACO,OAAN,CAAcC,KAAd,CAAoBC,IAAnC;AADE,KAZe;AAezBnB,IAAAA,QAAQ,EAAE;AACRoB,MAAAA,UAAU,EAAE,QADJ;AAERC,MAAAA,OAAO,EAAE,MAFD;AAGRC,MAAAA,aAAa,EAAE,QAHP;AAIRC,MAAAA,cAAc,EAAE;AAJR,KAfe;AAqBzB1B,IAAAA,cAAc,EAAE;AACd2B,MAAAA,SAAS,EAAE,GADG;AAEdC,MAAAA,aAAa,EAAEf,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAFtB;AAGda,MAAAA,YAAY,EAAEhB,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAHrB,KArBS;AA0BzBT,IAAAA,IAAI,EAAE;AACJ,iBAAW;AACTuB,QAAAA,KAAK,EAAE,SADE;AAETC,QAAAA,MAAM,EAAE;AAFC,OADP;AAKJD,MAAAA,KAAK,EAAE;AALH,KA1BmB;AAiCzBtC,IAAAA,aAAa,EAAE;AACbwC,MAAAA,UAAU,EAAE;AADC,KAjCU;AAoCzBvC,IAAAA,cAAc,EAAE;AACdwC,MAAAA,WAAW,EAAE;AADC,KApCS;AAuCzB1C,IAAAA,OAAO,EAAE;AACP2C,MAAAA,eAAe,EAAE,SADV;AAEPC,MAAAA,YAAY,EAAE,mBAFP;AAGPC,MAAAA,mBAAmB,EAAE,KAHd;AAIPC,MAAAA,oBAAoB,EAAE,KAJf;AAKPb,MAAAA,OAAO,EAAE,MALF;AAMPE,MAAAA,cAAc,EAAE,UANT;AAOPY,MAAAA,OAAO,EAAEzB,KAAK,CAACE,OAAN,CAAcC;AAPhB,KAvCgB;AAgDzBZ,IAAAA,OAAO,EAAE;AACPmC,MAAAA,QAAQ,EAAE,UADH;AAEPC,MAAAA,SAAS,EAAE,OAFJ;AAGPF,MAAAA,OAAO,EAAEzB,KAAK,CAACE,OAAN,CAAcC;AAHhB,KAhDgB;AAqDzBX,IAAAA,cAAc,EAAE;AACdoC,MAAAA,UAAU,EAAE,SADE;AAEdtB,MAAAA,YAAY,EAAE,KAFA;AAGdW,MAAAA,KAAK,EAAEjB,KAAK,CAACO,OAAN,CAAcsB,MAAd,CAAqBC,KAHd;AAIdC,MAAAA,QAAQ,EAAE/B,KAAK,CAACgC,UAAN,CAAiBD,QAJb;AAKdE,MAAAA,UAAU,EAAE,MALE;AAMdhC,MAAAA,SAAS,EAAE,OANG;AAOdwB,MAAAA,OAAO,EAAEzB,KAAK,CAACE,OAAN,CAAcC,IAPT;AAQduB,MAAAA,QAAQ,EAAE,UARI;AASdQ,MAAAA,KAAK,EAAE,KATO;AAUdP,MAAAA,SAAS,EAAE,MAVG;AAWdQ,MAAAA,KAAK,EAAE;AAXO,KArDS;AAkEzB1C,IAAAA,YAAY,EAAE;AACZ0C,MAAAA,KAAK,EAAE,CADK;AAEZC,MAAAA,MAAM,EAAE,CAFI;AAGZC,MAAAA,UAAU,EAAE,wBAHA;AAIZC,MAAAA,WAAW,EAAE,wBAJD;AAKZC,MAAAA,SAAS,EAAE,oBALC;AAMZnC,MAAAA,YAAY,EAAE,CAAC,EANH;AAOZH,MAAAA,SAAS,EAAE,KAPC;AAQZyB,MAAAA,QAAQ,EAAE,UARE;AASZQ,MAAAA,KAAK,EAAE;AATK;AAlEW,GAAZ;AAAA,CAAf;;AA+EA3H,SAAS,CAACiI,SAAV,GAAsB;AACpBrF,EAAAA,OAAO,EAAEsF,sBAAUC,MAAV,CAAiBC,UADN;AAEpBvF,EAAAA,UAAU,EAAEqF,sBAAUC,MAAV,CAAiBC,UAFT;AAGpBpF,EAAAA,QAAQ,EAAEkF,sBAAUG,MAAV,CAAiBD,UAHP;AAIpBrF,EAAAA,YAAY,EAAEmF,sBAAUG,MAAV,CAAiBD,UAJX;AAKpBnF,EAAAA,eAAe,EAAEiF,sBAAUI,IAAV,CAAeF,UALZ;AAMpBjI,EAAAA,aAAa,EAAE+H,sBAAUK,IAAV,CAAeH,UANV;AAOpBlF,EAAAA,sBAAsB,EAAEgF,sBAAUK,IAAV,CAAeH,UAPnB;AAQpBhI,EAAAA,WAAW,EAAE8H,sBAAUK,IARH;AASpB3G,EAAAA,cAAc,EAAEsG,sBAAUK,IAAV,CAAeH,UATX;AAUpBjF,EAAAA,YAAY,EAAE+E,sBAAUG,MAAV,CAAiBD,UAVX;AAWpBvG,EAAAA,MAAM,EAAEqG,sBAAUM,KAAV,CAAgB;AACtBC,IAAAA,UAAU,EAAEP,sBAAUQ,KADA;AAEtBC,IAAAA,QAAQ,EAAET,sBAAUQ;AAFE,GAAhB,EAGLN,UAdiB;AAepBhF,EAAAA,WAAW,EAAE8E,sBAAUU,MAfH;AAgBpBvF,EAAAA,0BAA0B,EAAE6E,sBAAUI,IAhBlB;AAiBpBxF,EAAAA,SAAS,EAAEoF,sBAAUI;AAjBD,CAAtB;AAoBAtI,SAAS,CAAC6I,YAAV,GAAyB;AACvBzF,EAAAA,WAAW,EAAE;AADU,CAAzB;;eAIe,uBAAWoC,MAAX,EAAmBxF,SAAnB,C","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 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    };\n    this.fakeImageHandler = {\n      cancel: () => {\n      },\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {\n      },\n      progress: () => {\n      }\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\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  handleUndo = () => {\n    const { shapes } = this.state;\n\n    if (shapes && shapes.length) {\n      // sort by index value\n      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));\n\n      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\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  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 } = 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            {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\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label=\"Undo\"/>\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                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\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  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: '#ECEDF1',\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","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","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","onDeleteShape","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","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 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    };\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  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 } = 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            {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                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  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: '#ECEDF1',\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"}

package/configure/lib/hotspot-drawable.js

@@ -314,7 +314,8 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           hotspotColor = _this$props6.hotspotColor,
           outlineColor = _this$props6.outlineColor,
           shapes = _this$props6.shapes,
-          strokeWidth = _this$props6.strokeWidth;
+          strokeWidth = _this$props6.strokeWidth,
+          onDeleteShape = _this$props6.onDeleteShape;
       var _this$state4 = this.state,
           stateShapes = _this$state4.stateShapes,
           isDrawing = _this$state4.isDrawing,
@@ -350,7 +351,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         onMouseDown: this.handleOnMouseDown,
         onMouseUp: this.handleOnMouseUp,
         onMouseMove: this.handleMouseMove
-      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, shapesToUse.map(function (shape, index) {
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, shapesToUse.map(function (shape, i) {
         var Tag = shape.group === 'polygons' ? _hotspotPolygon["default"] : _hotspotRectangle["default"];
         return /*#__PURE__*/_react["default"].createElement(Tag, {
           correct: shape.correct,
@@ -358,11 +359,12 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           height: shape.height,
           hotspotColor: hotspotColor,
           id: shape.id,
-          key: index,
+          key: i,
           onClick: function onClick() {
             return _this2.handleOnSetAsCorrect(shape);
           },
           onDragEnd: _this2.handleOnDragEnd,
+          onDeleteShape: onDeleteShape,
           outlineColor: outlineColor,
           width: shape.width,
           x: shape.x,
@@ -435,6 +437,7 @@ Drawable.propTypes = {
   multipleCorrect: _propTypes["default"].bool.isRequired,
   onUpdateImageDimension: _propTypes["default"].func.isRequired,
   onUpdateShapes: _propTypes["default"].func.isRequired,
+  onDeleteShape: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,
   shapes: _propTypes["default"].array.isRequired,
   strokeWidth: _propTypes["default"].number,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport max from 'lodash/max';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    let dimensions = nextProps.dimensions;\n\n    if (prevState && prevState.resizing) {\n      dimensions = prevState.dimensions;\n    }\n\n    return {\n      ...prevState,\n      dimensions: dimensions,\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  /// start of handling HotSpots section\n  handleOnMouseDown = (e) => {\n    if (e.target === e.currentTarget) {\n      const { onUpdateShapes, shapes } = this.props;\n      // Add a new rectangle at the mouse position with 0 width and height\n      const newShapes = shapes.slice();\n      const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;\n\n      newShapes.push({\n        id: `${value + 1}`,\n        height: 0,\n        width: 0,\n        x: e.evt.layerX,\n        y: e.evt.layerY,\n        group: 'rectangles',\n        index: shapes.length,\n      });\n\n      this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n      onUpdateShapes(newShapes);\n    }\n  };\n\n  handleOnMouseUp = () => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, stateShapes } = this.state;\n    const { onUpdateShapes } = this.props;\n\n    // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n    if (isDrawing) {\n      this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n      if (stateShapes) {\n        onUpdateShapes(stateShapes);\n      }\n    }\n  };\n\n  handleMouseMove = (e) => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, isDrawingShapeId } = this.state;\n    const { shapes } = this.props;\n\n    if (isDrawing && isDrawingShapeId) {\n      const mouseX = e.evt.layerX;\n      const mouseY = e.evt.layerY;\n\n      const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);\n      const currShape = shapes[currShapeIndex];\n\n      if (currShape) {\n        const newWidth = mouseX - currShape.x;\n        const newHeight = mouseY - currShape.y;\n\n        const newShapesList = shapes.slice();\n\n        newShapesList[currShapeIndex] = {\n          ...newShapesList[currShapeIndex],\n          height: newHeight,\n          width: newWidth,\n          x: currShape.x,\n          y: currShape.y,\n        };\n\n        // On mouse move don't trigger any event. Put the shapes on this state instead.\n        this.setState({ stateShapes: newShapesList });\n      }\n    }\n  };\n\n  handleOnDragEnd = (id, updatedProps) => {\n    const { shapes, onUpdateShapes } = this.props;\n    const newShapes = shapes.map((shape) => {\n      if (shape.id === id) {\n        return {\n          ...shape,\n          ...updatedProps,\n        };\n      }\n      return shape;\n    });\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n\n  handleOnSetAsCorrect = (shape) => {\n    const { id } = shape;\n    const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n    let newShapes = [];\n\n    if (multipleCorrect) {\n      newShapes = shapes.map((shape) => {\n        if (shape.id === id) {\n          shape.correct = !shape.correct;\n        }\n        return shape;\n      });\n    } else {\n      newShapes = shapes.map((shape) => {\n        shape.correct = shape.id === id;\n        return shape;\n      });\n    }\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n  /// end of handling HotSpots section\n\n  /// start of handling Image section\n  handleOnImageLoad = ({ target }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n    const elementStyle = getComputedStyle(target);\n    const newHeight = parseFloat(elementStyle.height);\n    const newWidth = parseFloat(elementStyle.width);\n    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n    const dimensions =\n      newWidth > IMAGE_MAX_WIDTH\n        ? {\n            height: newHeight / aspectWidth,\n            width: IMAGE_MAX_WIDTH,\n          }\n        : {\n            height: newHeight,\n            width: newWidth,\n          };\n\n    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  checkIfResizeValid(x, y) {\n    const { shapes } = this.state;\n    let drawable = true;\n\n    // Do not allow resizing over the hotspots\n    shapes &&\n      shapes.forEach((shape) => {\n        const right = shape.x + shape.width + 5;\n        const bottom = shape.y + shape.height + 5;\n        if (x <= right || y <= bottom) {\n          drawable = false;\n        }\n      });\n    return drawable;\n  }\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.image;\n    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n    // todo previously we had state.dimensions, is it needed?\n    const { width, height } = updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      preserveAspectRatioEnabled,\n    );\n\n    const resizeValid = this.checkIfResizeValid(width, height);\n    const hasMinimumWidth = width > 150 && height > 150;\n\n    if (resizeValid && hasMinimumWidth && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        resizing: true,\n        dimensions: { height: height, width: width },\n        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n      });\n    }\n\n    disableDrag();\n  };\n\n  stopResizing = () => {\n    const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n    const { dimensions, stateShapes } = this.state;\n\n    enableDrag();\n\n    if (stateShapes) {\n      onUpdateShapes(cloneDeep(stateShapes));\n    }\n\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n\n    this.setState({ resizing: false, stateShapes: false });\n  };\n  /// end of handling Image section\n\n  render() {\n    const {\n      classes,\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\n    } = this.props;\n    const {\n      stateShapes,\n      isDrawing,\n      dimensions: { height: heightFromState, width: widthFromState },\n    } = this.state;\n    const shapesToUse = stateShapes || shapes;\n\n    return (\n      <div className={classes.base}>\n        {imageUrl && (\n          <div className={classes.imageContainer}>\n            <img\n              className={classes.image}\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <div\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n              className={classes.resize}\n            />\n          </div>\n        )}\n\n        <Stage\n          className={classes.stage}\n          height={heightFromState || height}\n          width={widthFromState || width}\n          onMouseDown={this.handleOnMouseDown}\n          onMouseUp={this.handleOnMouseUp}\n          onMouseMove={this.handleMouseMove}\n        >\n          <Layer>\n            {shapesToUse.map((shape, index) => {\n              const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={index}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  points={shape.points}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n});\n\nDrawable.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disableDrag: PropTypes.func.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  enableDrag: PropTypes.func.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.array.isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}
+{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","onDeleteShape","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","i","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","bool","array","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,eAAe,GAAG,GAAxB;;IAEaC,Q;;;;;AAcX,oBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,0GAeC,UAACC,CAAD,EAAO;AACzB,UAAIA,CAAC,CAACC,MAAF,KAAaD,CAAC,CAACE,aAAnB,EAAkC;AAChC,0BAAmC,MAAKH,KAAxC;AAAA,YAAQI,cAAR,eAAQA,cAAR;AAAA,YAAwBC,MAAxB,eAAwBA,MAAxB,CADgC,CAEhC;;AACA,YAAMC,SAAS,GAAGD,MAAM,CAACE,KAAP,EAAlB;AACA,YAAMC,KAAK,GAAG,qBAAIF,SAAS,CAACG,GAAV,CAAc,UAACC,CAAD;AAAA,iBAAOC,QAAQ,CAACD,CAAC,CAACE,EAAH,CAAf;AAAA,SAAd,EAAqCC,MAArC,CAA4C,UAACD,EAAD;AAAA,iBAAQ,CAACE,KAAK,CAACF,EAAD,CAAd;AAAA,SAA5C,CAAJ,KAAwE,CAAtF;AAEAN,QAAAA,SAAS,CAACS,IAAV,CAAe;AACbH,UAAAA,EAAE,YAAKJ,KAAK,GAAG,CAAb,CADW;AAEbQ,UAAAA,MAAM,EAAE,CAFK;AAGbC,UAAAA,KAAK,EAAE,CAHM;AAIbC,UAAAA,CAAC,EAAEjB,CAAC,CAACkB,GAAF,CAAMC,MAJI;AAKbC,UAAAA,CAAC,EAAEpB,CAAC,CAACkB,GAAF,CAAMG,MALI;AAMbC,UAAAA,KAAK,EAAE,YANM;AAObC,UAAAA,KAAK,EAAEnB,MAAM,CAACoB;AAPD,SAAf;;AAUA,cAAKC,QAAL,CAAc;AAAEC,UAAAA,SAAS,EAAE,IAAb;AAAmBC,UAAAA,gBAAgB,YAAKpB,KAAK,GAAG,CAAb;AAAnC,SAAd;;AACAJ,QAAAA,cAAc,CAACE,SAAD,CAAd;AACD;AACF,KAnCkB;AAAA,wGAqCD,YAAM;AACtB;AACA,wBAAmC,MAAKuB,KAAxC;AAAA,UAAQF,SAAR,eAAQA,SAAR;AAAA,UAAmBG,WAAnB,eAAmBA,WAAnB;AACA,UAAQ1B,cAAR,GAA2B,MAAKJ,KAAhC,CAAQI,cAAR,CAHsB,CAKtB;;AACA,UAAIuB,SAAJ,EAAe;AACb,cAAKD,QAAL,CAAc;AAAEC,UAAAA,SAAS,EAAE,CAACA,SAAd;AAAyBG,UAAAA,WAAW,EAAE,KAAtC;AAA6CF,UAAAA,gBAAgB,EAAEG;AAA/D,SAAd;;AAEA,YAAID,WAAJ,EAAiB;AACf1B,UAAAA,cAAc,CAAC0B,WAAD,CAAd;AACD;AACF;AACF,KAlDkB;AAAA,wGAoDD,UAAC7B,CAAD,EAAO;AACvB;AACA,yBAAwC,MAAK4B,KAA7C;AAAA,UAAQF,SAAR,gBAAQA,SAAR;AAAA,UAAmBC,gBAAnB,gBAAmBA,gBAAnB;AACA,UAAQvB,MAAR,GAAmB,MAAKL,KAAxB,CAAQK,MAAR;;AAEA,UAAIsB,SAAS,IAAIC,gBAAjB,EAAmC;AACjC,YAAMI,MAAM,GAAG/B,CAAC,CAACkB,GAAF,CAAMC,MAArB;AACA,YAAMa,MAAM,GAAGhC,CAAC,CAACkB,GAAF,CAAMG,MAArB;AAEA,YAAMY,cAAc,GAAG7B,MAAM,CAAC8B,SAAP,CAAiB,UAACC,KAAD;AAAA,iBAAWA,KAAK,CAACxB,EAAN,KAAagB,gBAAxB;AAAA,SAAjB,CAAvB;AACA,YAAMS,SAAS,GAAGhC,MAAM,CAAC6B,cAAD,CAAxB;;AAEA,YAAIG,SAAJ,EAAe;AACb,cAAMC,QAAQ,GAAGN,MAAM,GAAGK,SAAS,CAACnB,CAApC;AACA,cAAMqB,SAAS,GAAGN,MAAM,GAAGI,SAAS,CAAChB,CAArC;AAEA,cAAMmB,aAAa,GAAGnC,MAAM,CAACE,KAAP,EAAtB;AAEAiC,UAAAA,aAAa,CAACN,cAAD,CAAb,mCACKM,aAAa,CAACN,cAAD,CADlB;AAEElB,YAAAA,MAAM,EAAEuB,SAFV;AAGEtB,YAAAA,KAAK,EAAEqB,QAHT;AAIEpB,YAAAA,CAAC,EAAEmB,SAAS,CAACnB,CAJf;AAKEG,YAAAA,CAAC,EAAEgB,SAAS,CAAChB;AALf,aANa,CAab;;AACA,gBAAKK,QAAL,CAAc;AAAEI,YAAAA,WAAW,EAAEU;AAAf,WAAd;AACD;AACF;AACF,KAjFkB;AAAA,wGAmFD,UAAC5B,EAAD,EAAK6B,YAAL,EAAsB;AACtC,yBAAmC,MAAKzC,KAAxC;AAAA,UAAQK,MAAR,gBAAQA,MAAR;AAAA,UAAgBD,cAAhB,gBAAgBA,cAAhB;AACA,UAAME,SAAS,GAAGD,MAAM,CAACI,GAAP,CAAW,UAAC2B,KAAD,EAAW;AACtC,YAAIA,KAAK,CAACxB,EAAN,KAAaA,EAAjB,EAAqB;AACnB,iDACKwB,KADL,GAEKK,YAFL;AAID;;AACD,eAAOL,KAAP;AACD,OARiB,CAAlB;AAUAhC,MAAAA,cAAc,CAAC,2BAAUE,SAAV,CAAD,CAAd;AACD,KAhGkB;AAAA,6GAkGI,UAAC8B,KAAD,EAAW;AAChC,UAAQxB,EAAR,GAAewB,KAAf,CAAQxB,EAAR;AACA,yBAAoD,MAAKZ,KAAzD;AAAA,UAAQ0C,eAAR,gBAAQA,eAAR;AAAA,UAAyBrC,MAAzB,gBAAyBA,MAAzB;AAAA,UAAiCD,cAAjC,gBAAiCA,cAAjC;AAEA,UAAIE,SAAS,GAAG,EAAhB;;AAEA,UAAIoC,eAAJ,EAAqB;AACnBpC,QAAAA,SAAS,GAAGD,MAAM,CAACI,GAAP,CAAW,UAAC2B,KAAD,EAAW;AAChC,cAAIA,KAAK,CAACxB,EAAN,KAAaA,EAAjB,EAAqB;AACnBwB,YAAAA,KAAK,CAACO,OAAN,GAAgB,CAACP,KAAK,CAACO,OAAvB;AACD;;AACD,iBAAOP,KAAP;AACD,SALW,CAAZ;AAMD,OAPD,MAOO;AACL9B,QAAAA,SAAS,GAAGD,MAAM,CAACI,GAAP,CAAW,UAAC2B,KAAD,EAAW;AAChCA,UAAAA,KAAK,CAACO,OAAN,GAAgBP,KAAK,CAACxB,EAAN,KAAaA,EAA7B;AACA,iBAAOwB,KAAP;AACD,SAHW,CAAZ;AAID;;AAEDhC,MAAAA,cAAc,CAAC,2BAAUE,SAAV,CAAD,CAAd;AACD,KAvHkB;AAAA,0GA2HC,gBAAgB;AAAA,UAAbJ,MAAa,QAAbA,MAAa;AAClC,UAAQ0C,sBAAR,GAAmC,MAAK5C,KAAxC,CAAQ4C,sBAAR;AACA,UAAMC,YAAY,GAAG,MAAKC,MAA1B;AACA,UAAMC,YAAY,GAAGC,gBAAgB,CAAC9C,MAAD,CAArC;AACA,UAAMqC,SAAS,GAAGU,UAAU,CAACF,YAAY,CAAC/B,MAAd,CAA5B;AACA,UAAMsB,QAAQ,GAAGW,UAAU,CAACF,YAAY,CAAC9B,KAAd,CAA3B;AACA,UAAMiC,WAAW,GAAGZ,QAAQ,GAAGxC,eAA/B;AAEA,UAAMqD,UAAU,GACdb,QAAQ,GAAGxC,eAAX,GACI;AACEkB,QAAAA,MAAM,EAAEuB,SAAS,GAAGW,WADtB;AAEEjC,QAAAA,KAAK,EAAEnB;AAFT,OADJ,GAKI;AACEkB,QAAAA,MAAM,EAAEuB,SADV;AAEEtB,QAAAA,KAAK,EAAEqB;AAFT,OANN;;AAWA,YAAKZ,QAAL,CAAc;AAAEyB,QAAAA,UAAU,EAAVA;AAAF,OAAd,EAA8B;AAAA,eAAMP,sBAAsB,CAACO,UAAD,CAA5B;AAAA,OAA9B;;AAEAN,MAAAA,YAAY,CAACO,gBAAb,CAA8B,WAA9B,EAA2C,MAAKC,gBAAhD,EAAkE,KAAlE;AACD,KAjJkB;AAAA,yGAmJA,YAAM;AACvBC,MAAAA,MAAM,CAACF,gBAAP,CAAwB,WAAxB,EAAqC,MAAKG,aAA1C,EAAyD,KAAzD;AACAD,MAAAA,MAAM,CAACF,gBAAP,CAAwB,SAAxB,EAAmC,MAAKI,YAAxC,EAAsD,KAAtD;AACD,KAtJkB;AAAA,sGAwKH,UAACvD,CAAD,EAAO;AACrB,UAAMwD,MAAM,GAAGxD,CAAC,CAACC,MAAF,CAASwD,qBAAT,EAAf;AACA,UAAMC,GAAG,GAAG,MAAKC,KAAjB;AACA,yBAAwE,MAAK5D,KAA7E;AAAA,UAAQ6D,WAAR,gBAAQA,WAAR;AAAA,UAAqBC,0BAArB,gBAAqBA,0BAArB;AAAA,UAAiDX,UAAjD,gBAAiDA,UAAjD;AAAA,UAA6D9C,MAA7D,gBAA6DA,MAA7D,CAHqB,CAKrB;;AACA,kCAA0B,kCACxB8C,UADwB,EAExB;AACElC,QAAAA,KAAK,EAAEhB,CAAC,CAAC8D,OAAF,GAAYN,MAAM,CAACO,IAD5B;AAEEhD,QAAAA,MAAM,EAAEf,CAAC,CAACgE,OAAF,GAAYR,MAAM,CAACS;AAF7B,OAFwB,EAMxBJ,0BANwB,CAA1B;AAAA,UAAQ7C,KAAR,yBAAQA,KAAR;AAAA,UAAeD,MAAf,yBAAeA,MAAf;;AASA,UAAMmD,WAAW,GAAG,MAAKC,kBAAL,CAAwBnD,KAAxB,EAA+BD,MAA/B,CAApB;;AACA,UAAMqD,eAAe,GAAGpD,KAAK,GAAG,GAAR,IAAeD,MAAM,GAAG,GAAhD;;AAEA,UAAImD,WAAW,IAAIE,eAAf,IAAkCV,GAAtC,EAA2C;AACzCA,QAAAA,GAAG,CAACW,KAAJ,CAAUrD,KAAV,aAAqBA,KAArB;AACA0C,QAAAA,GAAG,CAACW,KAAJ,CAAUtD,MAAV,aAAsBA,MAAtB;;AAEA,cAAKU,QAAL,CAAc;AACZ6C,UAAAA,QAAQ,EAAE,IADE;AAEZpB,UAAAA,UAAU,EAAE;AAAEnC,YAAAA,MAAM,EAAEA,MAAV;AAAkBC,YAAAA,KAAK,EAAEA;AAAzB,WAFA;AAGZa,UAAAA,WAAW,EAAE,6BAAiBqB,UAAjB,EAA6B;AAAElC,YAAAA,KAAK,EAALA,KAAF;AAASD,YAAAA,MAAM,EAANA;AAAT,WAA7B,EAAgDX,MAAhD;AAHD,SAAd;AAKD;;AAEDwD,MAAAA,WAAW;AACZ,KAtMkB;AAAA,qGAwMJ,YAAM;AACnB,yBAA+D,MAAK7D,KAApE;AAAA,UAAQwE,UAAR,gBAAQA,UAAR;AAAA,UAAoB5B,sBAApB,gBAAoBA,sBAApB;AAAA,UAA4CxC,cAA5C,gBAA4CA,cAA5C;AACA,yBAAoC,MAAKyB,KAAzC;AAAA,UAAQsB,UAAR,gBAAQA,UAAR;AAAA,UAAoBrB,WAApB,gBAAoBA,WAApB;AAEA0C,MAAAA,UAAU;;AAEV,UAAI1C,WAAJ,EAAiB;AACf1B,QAAAA,cAAc,CAAC,2BAAU0B,WAAV,CAAD,CAAd;AACD;;AAEDc,MAAAA,sBAAsB,CAACO,UAAD,CAAtB;AAEAG,MAAAA,MAAM,CAACmB,mBAAP,CAA2B,WAA3B,EAAwC,MAAKlB,aAA7C,EAA4D,KAA5D;AACAD,MAAAA,MAAM,CAACmB,mBAAP,CAA2B,SAA3B,EAAsC,MAAKjB,YAA3C,EAAyD,KAAzD;;AAEA,YAAK9B,QAAL,CAAc;AAAE6C,QAAAA,QAAQ,EAAE,KAAZ;AAAmBzC,QAAAA,WAAW,EAAE;AAAhC,OAAd;AACD,KAxNkB;AAGjB,UAAKD,KAAL,GAAa;AACXF,MAAAA,SAAS,EAAE,KADA;AAEXG,MAAAA,WAAW,EAAE,KAFF;AAGXyC,MAAAA,QAAQ,EAAE,KAHC;AAIXpB,MAAAA,UAAU,EAAE;AACVnC,QAAAA,MAAM,EAAE,CADE;AAEVC,QAAAA,KAAK,EAAE;AAFG;AAJD,KAAb;AAHiB;AAYlB,G,CAED;;;;;WA0IA,4BAAmBC,CAAnB,EAAsBG,CAAtB,EAAyB;AACvB,UAAQhB,MAAR,GAAmB,KAAKwB,KAAxB,CAAQxB,MAAR;AACA,UAAIqE,QAAQ,GAAG,IAAf,CAFuB,CAIvB;;AACArE,MAAAA,MAAM,IACJA,MAAM,CAACsE,OAAP,CAAe,UAACvC,KAAD,EAAW;AACxB,YAAMwC,KAAK,GAAGxC,KAAK,CAAClB,CAAN,GAAUkB,KAAK,CAACnB,KAAhB,GAAwB,CAAtC;AACA,YAAM4D,MAAM,GAAGzC,KAAK,CAACf,CAAN,GAAUe,KAAK,CAACpB,MAAhB,GAAyB,CAAxC;;AACA,YAAIE,CAAC,IAAI0D,KAAL,IAAcvD,CAAC,IAAIwD,MAAvB,EAA+B;AAC7BH,UAAAA,QAAQ,GAAG,KAAX;AACD;AACF,OAND,CADF;AAQA,aAAOA,QAAP;AACD;;;WAmDD;AAEA,sBAAS;AAAA;;AACP,yBASI,KAAK1E,KATT;AAAA,UACE8E,OADF,gBACEA,OADF;AAAA,UAEEC,QAFF,gBAEEA,QAFF;AAAA,+CAGE5B,UAHF;AAAA,UAGgBnC,MAHhB,yBAGgBA,MAHhB;AAAA,UAGwBC,KAHxB,yBAGwBA,KAHxB;AAAA,UAIE+D,YAJF,gBAIEA,YAJF;AAAA,UAKEC,YALF,gBAKEA,YALF;AAAA,UAME5E,MANF,gBAMEA,MANF;AAAA,UAOE6E,WAPF,gBAOEA,WAPF;AAAA,UAQEC,aARF,gBAQEA,aARF;AAUA,yBAII,KAAKtD,KAJT;AAAA,UACEC,WADF,gBACEA,WADF;AAAA,UAEEH,SAFF,gBAEEA,SAFF;AAAA,+CAGEwB,UAHF;AAAA,UAGwBiC,eAHxB,yBAGgBpE,MAHhB;AAAA,UAGgDqE,cAHhD,yBAGyCpE,KAHzC;AAKA,UAAMqE,WAAW,GAAGxD,WAAW,IAAIzB,MAAnC;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEyE,OAAO,CAACS;AAAxB,SACGR,QAAQ,iBACP;AAAK,QAAA,SAAS,EAAED,OAAO,CAACU;AAAxB,sBACE;AACE,QAAA,SAAS,EAAEV,OAAO,CAAClB,KADrB;AAEE,QAAA,MAAM,EAAE,KAAK6B,iBAFf;AAGE,QAAA,GAAG,EAAE,aAACC,KAAD,EAAS;AACZ,UAAA,MAAI,CAAC9B,KAAL,GAAa8B,KAAb;AACD,SALH;AAME,QAAA,GAAG,EAAEX;AANP,SAOO/D,MAAM,IAAIC,KAAV,GAAkB;AAAEqD,QAAAA,KAAK,EAAE;AAAEtD,UAAAA,MAAM,EAANA,MAAF;AAAUC,UAAAA,KAAK,EAALA;AAAV;AAAT,OAAlB,GAAiD,EAPxD,EADF,eAUE;AACE,QAAA,GAAG,EAAE,aAACyE,KAAD,EAAS;AACZ,UAAA,MAAI,CAAC5C,MAAL,GAAc4C,KAAd;AACD,SAHH;AAIE,QAAA,SAAS,EAAEZ,OAAO,CAAChC;AAJrB,QAVF,CAFJ,eAqBE,gCAAC,iBAAD;AACE,QAAA,SAAS,EAAEgC,OAAO,CAACa,KADrB;AAEE,QAAA,MAAM,EAAEP,eAAe,IAAIpE,MAF7B;AAGE,QAAA,KAAK,EAAEqE,cAAc,IAAIpE,KAH3B;AAIE,QAAA,WAAW,EAAE,KAAK2E,iBAJpB;AAKE,QAAA,SAAS,EAAE,KAAKC,eALlB;AAME,QAAA,WAAW,EAAE,KAAKC;AANpB,sBAQE,gCAAC,iBAAD,QACGR,WAAW,CAAC7E,GAAZ,CAAgB,UAAC2B,KAAD,EAAQ2D,CAAR,EAAc;AAC7B,YAAMC,GAAG,GAAG5D,KAAK,CAACb,KAAN,KAAgB,UAAhB,GAA6B0E,0BAA7B,GAAuCC,4BAAnD;AACA,4BACE,gCAAC,GAAD;AACE,UAAA,OAAO,EAAE9D,KAAK,CAACO,OADjB;AAEE,UAAA,SAAS,EAAEhB,SAFb;AAGE,UAAA,MAAM,EAAES,KAAK,CAACpB,MAHhB;AAIE,UAAA,YAAY,EAAEgE,YAJhB;AAKE,UAAA,EAAE,EAAE5C,KAAK,CAACxB,EALZ;AAME,UAAA,GAAG,EAAEmF,CANP;AAOE,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACI,oBAAL,CAA0B/D,KAA1B,CAAN;AAAA,WAPX;AAQE,UAAA,SAAS,EAAE,MAAI,CAACgE,eARlB;AASE,UAAA,aAAa,EAAEjB,aATjB;AAUE,UAAA,YAAY,EAAEF,YAVhB;AAWE,UAAA,KAAK,EAAE7C,KAAK,CAACnB,KAXf;AAYE,UAAA,CAAC,EAAEmB,KAAK,CAAClB,CAZX;AAaE,UAAA,CAAC,EAAEkB,KAAK,CAACf,CAbX;AAcE,UAAA,MAAM,EAAEe,KAAK,CAACiE,MAdhB;AAeE,UAAA,WAAW,EAAEnB,WAff;AAgBE,UAAA,WAAW,EAAEE,eAAe,IAAIpE,MAhBlC;AAiBE,UAAA,UAAU,EAAEqE,cAAc,IAAIpE;AAjBhC,UADF;AAqBD,OAvBA,CADH,CARF,CArBF,CADF;AA2DD;;;WArTD,kCAAgCqF,SAAhC,EAA2CC,SAA3C,EAAsD;AACpD,UAAIpD,UAAU,GAAGmD,SAAS,CAACnD,UAA3B;;AAEA,UAAIoD,SAAS,IAAIA,SAAS,CAAChC,QAA3B,EAAqC;AACnCpB,QAAAA,UAAU,GAAGoD,SAAS,CAACpD,UAAvB;AACD;;AAED,6CACKoD,SADL;AAEEpD,QAAAA,UAAU,EAAEA;AAFd;AAID;;;EAZ2BqD,kBAAMC,S;;;;AAyTpC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBnB,IAAAA,IAAI,EAAE;AACJoB,MAAAA,QAAQ,EAAE;AADN,KADc;AAIpB/C,IAAAA,KAAK,EAAE;AACLgD,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KAJa;AASpBtB,IAAAA,cAAc,EAAE;AACdmB,MAAAA,QAAQ,EAAE,UADI;AAEd1F,MAAAA,KAAK,EAAE;AAFO,KATI;AAapB6B,IAAAA,MAAM,EAAE;AACNiE,MAAAA,YAAY,EAAE,mBADR;AAENC,MAAAA,WAAW,EAAE,mBAFP;AAGNnC,MAAAA,MAAM,EAAE,OAHF;AAINoC,MAAAA,MAAM,EAAE,WAJF;AAKNjG,MAAAA,MAAM,EAAE,MALF;AAMN2F,MAAAA,QAAQ,EAAE,UANJ;AAON/B,MAAAA,KAAK,EAAE,OAPD;AAQN3D,MAAAA,KAAK,EAAE;AARD,KAbY;AAuBpB0E,IAAAA,KAAK,EAAE;AACL3B,MAAAA,IAAI,EAAE,CADD;AAELE,MAAAA,GAAG,EAAE,CAFA;AAGLyC,MAAAA,QAAQ,EAAE;AAHL;AAvBa,GAAP;AAAA,CAAf;;AA8BA5G,QAAQ,CAACmH,SAAT,GAAqB;AACnBpC,EAAAA,OAAO,EAAEqC,sBAAUC,MAAV,CAAiBC,UADP;AAEnBxD,EAAAA,WAAW,EAAEsD,sBAAUG,IAAV,CAAeD,UAFT;AAGnBlE,EAAAA,UAAU,EAAEgE,sBAAUC,MAAV,CAAiBC,UAHV;AAInB7C,EAAAA,UAAU,EAAE2C,sBAAUG,IAAV,CAAeD,UAJR;AAKnBtC,EAAAA,QAAQ,EAAEoC,sBAAUI,MAAV,CAAiBF,UALR;AAMnBrC,EAAAA,YAAY,EAAEmC,sBAAUI,MAAV,CAAiBF,UANZ;AAOnB3E,EAAAA,eAAe,EAAEyE,sBAAUK,IAAV,CAAeH,UAPb;AAQnBzE,EAAAA,sBAAsB,EAAEuE,sBAAUG,IAAV,CAAeD,UARpB;AASnBjH,EAAAA,cAAc,EAAE+G,sBAAUG,IAAV,CAAeD,UATZ;AAUnBlC,EAAAA,aAAa,EAAEgC,sBAAUG,IAAV,CAAeD,UAVX;AAWnBpC,EAAAA,YAAY,EAAEkC,sBAAUI,MAAV,CAAiBF,UAXZ;AAYnBhH,EAAAA,MAAM,EAAE8G,sBAAUM,KAAV,CAAgBJ,UAZL;AAanBnC,EAAAA,WAAW,EAAEiC,sBAAUO,MAbJ;AAcnB5D,EAAAA,0BAA0B,EAAEqD,sBAAUK;AAdnB,CAArB;;eAiBe,uBAAWd,MAAX,EAAmB3G,QAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport max from 'lodash/max';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    let dimensions = nextProps.dimensions;\n\n    if (prevState && prevState.resizing) {\n      dimensions = prevState.dimensions;\n    }\n\n    return {\n      ...prevState,\n      dimensions: dimensions,\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  /// start of handling HotSpots section\n  handleOnMouseDown = (e) => {\n    if (e.target === e.currentTarget) {\n      const { onUpdateShapes, shapes } = this.props;\n      // Add a new rectangle at the mouse position with 0 width and height\n      const newShapes = shapes.slice();\n      const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;\n\n      newShapes.push({\n        id: `${value + 1}`,\n        height: 0,\n        width: 0,\n        x: e.evt.layerX,\n        y: e.evt.layerY,\n        group: 'rectangles',\n        index: shapes.length,\n      });\n\n      this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n      onUpdateShapes(newShapes);\n    }\n  };\n\n  handleOnMouseUp = () => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, stateShapes } = this.state;\n    const { onUpdateShapes } = this.props;\n\n    // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n    if (isDrawing) {\n      this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n      if (stateShapes) {\n        onUpdateShapes(stateShapes);\n      }\n    }\n  };\n\n  handleMouseMove = (e) => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, isDrawingShapeId } = this.state;\n    const { shapes } = this.props;\n\n    if (isDrawing && isDrawingShapeId) {\n      const mouseX = e.evt.layerX;\n      const mouseY = e.evt.layerY;\n\n      const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);\n      const currShape = shapes[currShapeIndex];\n\n      if (currShape) {\n        const newWidth = mouseX - currShape.x;\n        const newHeight = mouseY - currShape.y;\n\n        const newShapesList = shapes.slice();\n\n        newShapesList[currShapeIndex] = {\n          ...newShapesList[currShapeIndex],\n          height: newHeight,\n          width: newWidth,\n          x: currShape.x,\n          y: currShape.y,\n        };\n        // On mouse move don't trigger any event. Put the shapes on this state instead.\n        this.setState({ stateShapes: newShapesList });\n      }\n    }\n  };\n\n  handleOnDragEnd = (id, updatedProps) => {\n    const { shapes, onUpdateShapes } = this.props;\n    const newShapes = shapes.map((shape) => {\n      if (shape.id === id) {\n        return {\n          ...shape,\n          ...updatedProps,\n        };\n      }\n      return shape;\n    });\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n\n  handleOnSetAsCorrect = (shape) => {\n    const { id } = shape;\n    const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n    let newShapes = [];\n\n    if (multipleCorrect) {\n      newShapes = shapes.map((shape) => {\n        if (shape.id === id) {\n          shape.correct = !shape.correct;\n        }\n        return shape;\n      });\n    } else {\n      newShapes = shapes.map((shape) => {\n        shape.correct = shape.id === id;\n        return shape;\n      });\n    }\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n  /// end of handling HotSpots section\n\n  /// start of handling Image section\n  handleOnImageLoad = ({ target }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n    const elementStyle = getComputedStyle(target);\n    const newHeight = parseFloat(elementStyle.height);\n    const newWidth = parseFloat(elementStyle.width);\n    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n    const dimensions =\n      newWidth > IMAGE_MAX_WIDTH\n        ? {\n            height: newHeight / aspectWidth,\n            width: IMAGE_MAX_WIDTH,\n          }\n        : {\n            height: newHeight,\n            width: newWidth,\n          };\n\n    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  checkIfResizeValid(x, y) {\n    const { shapes } = this.state;\n    let drawable = true;\n\n    // Do not allow resizing over the hotspots\n    shapes &&\n      shapes.forEach((shape) => {\n        const right = shape.x + shape.width + 5;\n        const bottom = shape.y + shape.height + 5;\n        if (x <= right || y <= bottom) {\n          drawable = false;\n        }\n      });\n    return drawable;\n  }\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.image;\n    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n    // todo previously we had state.dimensions, is it needed?\n    const { width, height } = updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      preserveAspectRatioEnabled,\n    );\n\n    const resizeValid = this.checkIfResizeValid(width, height);\n    const hasMinimumWidth = width > 150 && height > 150;\n\n    if (resizeValid && hasMinimumWidth && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        resizing: true,\n        dimensions: { height: height, width: width },\n        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n      });\n    }\n\n    disableDrag();\n  };\n\n  stopResizing = () => {\n    const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n    const { dimensions, stateShapes } = this.state;\n\n    enableDrag();\n\n    if (stateShapes) {\n      onUpdateShapes(cloneDeep(stateShapes));\n    }\n\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n\n    this.setState({ resizing: false, stateShapes: false });\n  };\n  /// end of handling Image section\n\n  render() {\n    const {\n      classes,\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\n      onDeleteShape,\n    } = this.props;\n    const {\n      stateShapes,\n      isDrawing,\n      dimensions: { height: heightFromState, width: widthFromState },\n    } = this.state;\n    const shapesToUse = stateShapes || shapes;\n\n    return (\n      <div className={classes.base}>\n        {imageUrl && (\n          <div className={classes.imageContainer}>\n            <img\n              className={classes.image}\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <div\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n              className={classes.resize}\n            />\n          </div>\n        )}\n\n        <Stage\n          className={classes.stage}\n          height={heightFromState || height}\n          width={widthFromState || width}\n          onMouseDown={this.handleOnMouseDown}\n          onMouseUp={this.handleOnMouseUp}\n          onMouseMove={this.handleMouseMove}\n        >\n          <Layer>\n            {shapesToUse.map((shape, i) => {\n              const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={onDeleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  points={shape.points}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n});\n\nDrawable.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disableDrag: PropTypes.func.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  enableDrag: PropTypes.func.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.array.isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}

package/configure/lib/hotspot-palette.js

@@ -25,7 +25,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+var _configUi = require("@pie-lib/config-ui");
 
 var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-palette.jsx"],"names":["Palette","name","event","value","target","props","onHotspotColorChange","onOutlineColorChange","classes","hotspotColor","outlineColor","hotspotList","outlineList","base","input","select","onChange","map","hotspot","item","backgroundColor","outline","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","width","borderRadius","height","marginLeft","marginRight","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/pie-toolbox/config-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\nclass Palette extends React.Component {\n  onChange = (name) => (event) => {\n    const { value } = event.target;\n    const { onHotspotColorChange, onOutlineColorChange } = this.props;\n\n    if (name === 'hotspot') {\n      onHotspotColorChange(value);\n    } else {\n      onOutlineColorChange(value);\n    }\n  };\n\n  render() {\n    const { classes, hotspotColor, outlineColor, hotspotList, outlineList } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Hot Spot\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>\n            {hotspotList.map((hotspot) => (\n              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>\n                {hotspot}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Response Outline\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map((outline) => (\n              <MenuItem\n                key={outline}\n                value={outline}\n                className={classes.item}\n                style={{ border: `2px solid ${outline}` }}\n              >\n                {outline}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n  },\n  input: {\n    flex: 1,\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hotspotList: PropTypes.array.isRequired,\n  onHotspotColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"hotspot-palette.js"}
+{"version":3,"sources":["../src/hotspot-palette.jsx"],"names":["Palette","name","event","value","target","props","onHotspotColorChange","onOutlineColorChange","classes","hotspotColor","outlineColor","hotspotList","outlineList","base","input","select","onChange","map","hotspot","item","backgroundColor","outline","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","width","borderRadius","height","marginLeft","marginRight","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/config-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\nclass Palette extends React.Component {\n  onChange = (name) => (event) => {\n    const { value } = event.target;\n    const { onHotspotColorChange, onOutlineColorChange } = this.props;\n\n    if (name === 'hotspot') {\n      onHotspotColorChange(value);\n    } else {\n      onOutlineColorChange(value);\n    }\n  };\n\n  render() {\n    const { classes, hotspotColor, outlineColor, hotspotList, outlineList } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Hot Spot\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>\n            {hotspotList.map((hotspot) => (\n              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>\n                {hotspot}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Response Outline\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map((outline) => (\n              <MenuItem\n                key={outline}\n                value={outline}\n                className={classes.item}\n                style={{ border: `2px solid ${outline}` }}\n              >\n                {outline}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n  },\n  input: {\n    flex: 1,\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hotspotList: PropTypes.array.isRequired,\n  onHotspotColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"hotspot-palette.js"}