@pie-element/hotspot 7.9.10-next.8 → 7.10.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.10.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.9.9...@pie-element/hotspot@7.10.0) (2025-06-27)
+
+
+### Bug Fixes
+
+* test - update ImageComponent import path in DeleteWidget test ([8fc4dfd](https://github.com/pie-framework/pie-elements/commit/8fc4dfd6e275a258a995150430a91887e2fe588c))
+* tests. Update ImageComponent imports in DeleteWidget, Polygon, and Rectangle tests ([55080fc](https://github.com/pie-framework/pie-elements/commit/55080fc37644785a15710edf856a4a9611a7b888))
+* update pie-lib/pie-toolbox PD-5064 ([f61face](https://github.com/pie-framework/pie-elements/commit/f61face71312f0a4e46a16a646aa616b9d4ed8eb))
+
+
+### Features
+
+* **hotspot:** update ImageComponent imports and create new image-konva component PD-5064 ([2d25656](https://github.com/pie-framework/pie-elements/commit/2d25656ad3d543b2748587f8652f4062d3fdc050))
+
+
+
+
+
 ## [7.9.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.9.8...@pie-element/hotspot@7.9.9) (2025-06-25)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.4.9...@pie-element/hotspot-configure@7.5.0) (2025-06-27)
+
+
+### Bug Fixes
+
+* test - update ImageComponent import path in DeleteWidget test ([8fc4dfd](https://github.com/pie-framework/pie-elements/commit/8fc4dfd6e275a258a995150430a91887e2fe588c))
+* tests. Update ImageComponent imports in DeleteWidget, Polygon, and Rectangle tests ([55080fc](https://github.com/pie-framework/pie-elements/commit/55080fc37644785a15710edf856a4a9611a7b888))
+* update pie-lib/pie-toolbox PD-5064 ([f61face](https://github.com/pie-framework/pie-elements/commit/f61face71312f0a4e46a16a646aa616b9d4ed8eb))
+
+
+### Features
+
+* **hotspot:** update ImageComponent imports and create new image-konva component PD-5064 ([2d25656](https://github.com/pie-framework/pie-elements/commit/2d25656ad3d543b2748587f8652f4062d3fdc050))
+
+
+
+
+
 ## [7.4.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.4.8...@pie-element/hotspot-configure@7.4.9) (2025-06-25)
 
 

package/configure/lib/DeleteWidget.js

@@ -15,7 +15,7 @@ var _reactKonva = require("react-konva");
 
 var _icons = require("./icons");
 
-var _icons2 = require("@pie-lib/pie-toolbox/icons");
+var _imageKonva = _interopRequireDefault(require("./image-konva"));
 
 var _utils = require("./utils");
 
@@ -51,9 +51,7 @@ var DeleteWidget = function DeleteWidget(_ref) {
     onClick: function onClick() {
       return handleWidgetClick(id);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_icons2.ImageComponent, {
-    width: 20,
-    height: 20,
+  }, /*#__PURE__*/_react["default"].createElement(_imageKonva["default"], {
     x: positionX,
     y: positionY,
     src: _icons.faDelete

package/configure/lib/DeleteWidget.js.map

@@ -1 +1 @@
-{"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"}
+{"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,CAAC,EAAEQ,SAAnB;AAA8B,IAAA,CAAC,EAAEC,SAAjC;AAA4C,IAAA,GAAG,EAAEG;AAAjD,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 './image-konva';\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 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/image-konva.js

@@ -0,0 +1,106 @@
+"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");
+
+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 ImageComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(ImageComponent, _React$Component);
+
+  var _super = _createSuper(ImageComponent);
+
+  function ImageComponent(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ImageComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleLoad", function () {
+      _this.setState({
+        image: _this.image
+      });
+    });
+    _this.state = {
+      image: null
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ImageComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.loadImage();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      if (oldProps.src !== this.props.src) {
+        this.loadImage();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.image.removeEventListener('load', this.handleLoad);
+    }
+  }, {
+    key: "loadImage",
+    value: function loadImage() {
+      var src = this.props.src;
+      this.image = new window.Image();
+      this.image.src = src;
+      this.image.addEventListener('load', this.handleLoad);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          x = _this$props.x,
+          y = _this$props.y;
+      var image = this.state.image;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Image, {
+        width: 20,
+        height: 20,
+        x: x,
+        y: y,
+        image: image
+      });
+    }
+  }]);
+  return ImageComponent;
+}(_react["default"].Component);
+
+ImageComponent.propTypes = {
+  src: _propTypes["default"].string.isRequired,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired
+};
+var _default = ImageComponent;
+exports["default"] = _default;
+//# sourceMappingURL=image-konva.js.map

package/configure/lib/image-konva.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-konva.jsx"],"names":["ImageComponent","props","setState","image","state","loadImage","oldProps","src","removeEventListener","handleLoad","window","Image","addEventListener","x","y","React","Component","propTypes","PropTypes","string","isRequired","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,c;;;;;AACJ,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,mGA6BN,YAAM;AACjB,YAAKC,QAAL,CAAc;AACZC,QAAAA,KAAK,EAAE,MAAKA;AADA,OAAd;AAGD,KAjCkB;AAEjB,UAAKC,KAAL,GAAa;AACXD,MAAAA,KAAK,EAAE;AADI,KAAb;AAFiB;AAKlB;;;;WAED,6BAAoB;AAClB,WAAKE,SAAL;AACD;;;WAED,4BAAmBC,QAAnB,EAA6B;AAC3B,UAAIA,QAAQ,CAACC,GAAT,KAAiB,KAAKN,KAAL,CAAWM,GAAhC,EAAqC;AACnC,aAAKF,SAAL;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKF,KAAL,CAAWK,mBAAX,CAA+B,MAA/B,EAAuC,KAAKC,UAA5C;AACD;;;WAED,qBAAY;AACV,UAAQF,GAAR,GAAgB,KAAKN,KAArB,CAAQM,GAAR;AAEA,WAAKJ,KAAL,GAAa,IAAIO,MAAM,CAACC,KAAX,EAAb;AACA,WAAKR,KAAL,CAAWI,GAAX,GAAiBA,GAAjB;AACA,WAAKJ,KAAL,CAAWS,gBAAX,CAA4B,MAA5B,EAAoC,KAAKH,UAAzC;AACD;;;WAQD,kBAAS;AACP,wBAAiB,KAAKR,KAAtB;AAAA,UAAQY,CAAR,eAAQA,CAAR;AAAA,UAAWC,CAAX,eAAWA,CAAX;AACA,UAAQX,KAAR,GAAkB,KAAKC,KAAvB,CAAQD,KAAR;AAEA,0BACE,gCAAC,iBAAD;AACE,QAAA,KAAK,EAAE,EADT;AAEE,QAAA,MAAM,EAAE,EAFV;AAGE,QAAA,CAAC,EAAEU,CAHL;AAIE,QAAA,CAAC,EAAEC,CAJL;AAKE,QAAA,KAAK,EAAEX;AALT,QADF;AASD;;;EAjD0BY,kBAAMC,S;;AAoDnChB,cAAc,CAACiB,SAAf,GAA2B;AACzBV,EAAAA,GAAG,EAAEW,sBAAUC,MAAV,CAAiBC,UADG;AAEzBP,EAAAA,CAAC,EAAEK,sBAAUG,MAAV,CAAiBD,UAFK;AAGzBN,EAAAA,CAAC,EAAEI,sBAAUG,MAAV,CAAiBD;AAHK,CAA3B;eAMepB,c","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Image } from 'react-konva';\n\nclass ImageComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      image: null,\n    };\n  }\n\n  componentDidMount() {\n    this.loadImage();\n  }\n\n  componentDidUpdate(oldProps) {\n    if (oldProps.src !== this.props.src) {\n      this.loadImage();\n    }\n  }\n\n  componentWillUnmount() {\n    this.image.removeEventListener('load', this.handleLoad);\n  }\n\n  loadImage() {\n    const { src } = this.props;\n\n    this.image = new window.Image();\n    this.image.src = src;\n    this.image.addEventListener('load', this.handleLoad);\n  }\n\n  handleLoad = () => {\n    this.setState({\n      image: this.image,\n    });\n  };\n\n  render() {\n    const { x, y } = this.props;\n    const { image } = this.state;\n\n    return (\n      <Image\n        width={20}\n        height={20}\n        x={x}\n        y={y}\n        image={image}\n      />\n    );\n  }\n}\n\nImageComponent.propTypes = {\n  src: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n};\n\nexport default ImageComponent;\n"],"file":"image-konva.js"}

package/configure/package.json

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

package/configure/src/DeleteWidget.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Group } from 'react-konva';
 import { faDelete } from './icons';
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from './image-konva';
 import { calculate } from './utils';
 
 const DeleteWidget = ({ height, id, width, x, y, points, isCircle, radius, handleWidgetClick }) => {
@@ -26,7 +26,7 @@ const DeleteWidget = ({ height, id, width, x, y, points, isCircle, radius, handl
 
   return (
     <Group onClick={() => handleWidgetClick(id)}>
-      <ImageComponent width={20} height={20} x={positionX} y={positionY} src={faDelete} />
+      <ImageComponent x={positionX} y={positionY} src={faDelete} />
     </Group>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import DeleteWidget from '../DeleteWidget'; // Adjust the import path as needed
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from '../image-konva';
 
 describe('DeleteWidget', () => {
     it('computes positionX and positionY correctly without points', () => {

package/configure/src/image-konva.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Image } from 'react-konva';
+
+class ImageComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      image: null,
+    };
+  }
+
+  componentDidMount() {
+    this.loadImage();
+  }
+
+  componentDidUpdate(oldProps) {
+    if (oldProps.src !== this.props.src) {
+      this.loadImage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.image.removeEventListener('load', this.handleLoad);
+  }
+
+  loadImage() {
+    const { src } = this.props;
+
+    this.image = new window.Image();
+    this.image.src = src;
+    this.image.addEventListener('load', this.handleLoad);
+  }
+
+  handleLoad = () => {
+    this.setState({
+      image: this.image,
+    });
+  };
+
+  render() {
+    const { x, y } = this.props;
+    const { image } = this.state;
+
+    return (
+      <Image
+        width={20}
+        height={20}
+        x={x}
+        y={y}
+        image={image}
+      />
+    );
+  }
+}
+
+ImageComponent.propTypes = {
+  src: PropTypes.string.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+};
+
+export default ImageComponent;

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.5.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.5.9...@pie-element/hotspot-controller@5.5.10) (2025-06-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-5064 ([f61face](https://github.com/pie-framework/pie-elements/commit/f61face71312f0a4e46a16a646aa616b9d4ed8eb))
+
+
+
+
+
 ## [5.5.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.5.8...@pie-element/hotspot-controller@5.5.9) (2025-06-25)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-controller",
   "private": true,
-  "version": "5.5.9",
+  "version": "5.5.10",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.18.1",
+    "@pie-lib/pie-toolbox": "2.19.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/lib/hotspot/circle.js

@@ -29,9 +29,9 @@ var _reactKonva = require("react-konva");
 
 var _styles = require("@material-ui/core/styles");
 
-var _icons = require("@pie-lib/pie-toolbox/icons");
+var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
 
-var _icons2 = require("./icons");
+var _icons = require("./icons");
 
 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); }; }
 
@@ -123,17 +123,17 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
 
       if (showCorrectEnabled) {
         if (selected && isCorrect || !selected && !isCorrect) {
-          iconSrc = _icons2.faCorrect;
+          iconSrc = _icons.faCorrect;
         }
       } else {
         if (selected) {
           if (isCorrect) {
-            iconSrc = _icons2.faCorrect;
+            iconSrc = _icons.faCorrect;
           } else {
-            iconSrc = _icons2.faWrong;
+            iconSrc = _icons.faWrong;
           }
         } else if (!isCorrect) {
-          iconSrc = _icons2.faWrong;
+          iconSrc = _icons.faWrong;
         }
       }
 
@@ -161,7 +161,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: this.handleMouseEnter,
         x: x,
         y: y
-      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
+      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_imageKonvaTooltip["default"], {
         src: iconSrc,
         x: iconX,
         y: iconY,

package/lib/hotspot/circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/circle.jsx"],"names":["CircleComponent","props","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      radius,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x - 10;\n    const iconY = y - 10; // Adjust position for the icon\n\n    let iconSrc;\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={x - radius}\n            y={y - radius}\n            width={radius * 2}\n            height={radius * 2}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\n        )}\n        <Circle\n          classes={classes.base}\n          radius={radius}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nCircleComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"circle.js"}
+{"version":3,"sources":["../../src/hotspot/circle.jsx"],"names":["CircleComponent","props","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      radius,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x - 10;\n    const iconY = y - 10; // Adjust position for the icon\n\n    let iconSrc;\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={x - radius}\n            y={y - radius}\n            width={radius * 2}\n            height={radius * 2}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\n        )}\n        <Circle\n          classes={classes.base}\n          radius={radius}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nCircleComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"circle.js"}

package/lib/hotspot/image-konva-tooltip.js

@@ -0,0 +1,133 @@
+"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");
+
+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 ImageComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(ImageComponent, _React$Component);
+
+  var _super = _createSuper(ImageComponent);
+
+  function ImageComponent(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ImageComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleLoad", function () {
+      _this.setState({
+        image: _this.image
+      });
+    });
+    _this.state = {
+      image: null,
+      showTooltip: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ImageComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.loadImage();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      if (oldProps.src !== this.props.src) {
+        this.loadImage();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.image.removeEventListener('load', this.handleLoad);
+    }
+  }, {
+    key: "loadImage",
+    value: function loadImage() {
+      var src = this.props.src;
+      this.image = new window.Image();
+      this.image.src = src;
+      this.image.addEventListener('load', this.handleLoad);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          x = _this$props.x,
+          y = _this$props.y,
+          tooltip = _this$props.tooltip;
+      var _this$state = this.state,
+          image = _this$state.image,
+          showTooltip = _this$state.showTooltip;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Image, {
+        width: 20,
+        height: 20,
+        x: x,
+        y: y,
+        image: image,
+        onMouseEnter: function onMouseEnter() {
+          return _this2.setState({
+            showTooltip: true
+          });
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this2.setState({
+            showTooltip: false
+          });
+        }
+      }), showTooltip && tooltip && /*#__PURE__*/_react["default"].createElement(_reactKonva.Label, {
+        x: x - 30,
+        y: y + 25
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Tag, {
+        fill: "white",
+        cornerRadius: 5,
+        opacity: 0.9
+      }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Text, {
+        text: tooltip,
+        padding: 5
+      })));
+    }
+  }]);
+  return ImageComponent;
+}(_react["default"].Component);
+
+ImageComponent.propTypes = {
+  src: _propTypes["default"].string.isRequired,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired,
+  tooltip: _propTypes["default"].string.isRequired
+};
+var _default = ImageComponent;
+exports["default"] = _default;
+//# sourceMappingURL=image-konva-tooltip.js.map

package/lib/hotspot/image-konva-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hotspot/image-konva-tooltip.jsx"],"names":["ImageComponent","props","setState","image","state","showTooltip","loadImage","oldProps","src","removeEventListener","handleLoad","window","Image","addEventListener","x","y","tooltip","React","Component","propTypes","PropTypes","string","isRequired","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,c;;;;;AACJ,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,mGA8BN,YAAM;AACjB,YAAKC,QAAL,CAAc;AACZC,QAAAA,KAAK,EAAE,MAAKA;AADA,OAAd;AAGD,KAlCkB;AAEjB,UAAKC,KAAL,GAAa;AACXD,MAAAA,KAAK,EAAE,IADI;AAEXE,MAAAA,WAAW,EAAE;AAFF,KAAb;AAFiB;AAMlB;;;;WAED,6BAAoB;AAClB,WAAKC,SAAL;AACD;;;WAED,4BAAmBC,QAAnB,EAA6B;AAC3B,UAAIA,QAAQ,CAACC,GAAT,KAAiB,KAAKP,KAAL,CAAWO,GAAhC,EAAqC;AACnC,aAAKF,SAAL;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKH,KAAL,CAAWM,mBAAX,CAA+B,MAA/B,EAAuC,KAAKC,UAA5C;AACD;;;WAED,qBAAY;AACV,UAAQF,GAAR,GAAgB,KAAKP,KAArB,CAAQO,GAAR;AAEA,WAAKL,KAAL,GAAa,IAAIQ,MAAM,CAACC,KAAX,EAAb;AACA,WAAKT,KAAL,CAAWK,GAAX,GAAiBA,GAAjB;AACA,WAAKL,KAAL,CAAWU,gBAAX,CAA4B,MAA5B,EAAoC,KAAKH,UAAzC;AACD;;;WAQD,kBAAS;AAAA;;AACP,wBAA0B,KAAKT,KAA/B;AAAA,UAAQa,CAAR,eAAQA,CAAR;AAAA,UAAWC,CAAX,eAAWA,CAAX;AAAA,UAAcC,OAAd,eAAcA,OAAd;AACA,wBAA+B,KAAKZ,KAApC;AAAA,UAAQD,KAAR,eAAQA,KAAR;AAAA,UAAeE,WAAf,eAAeA,WAAf;AAEA,0BACE,gCAAC,iBAAD,qBACE,gCAAC,iBAAD;AACE,QAAA,KAAK,EAAE,EADT;AAEE,QAAA,MAAM,EAAE,EAFV;AAGE,QAAA,CAAC,EAAES,CAHL;AAIE,QAAA,CAAC,EAAEC,CAJL;AAKE,QAAA,KAAK,EAAEZ,KALT;AAME,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACD,QAAL,CAAc;AAAEG,YAAAA,WAAW,EAAE;AAAf,WAAd,CAAN;AAAA,SANhB;AAOE,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACH,QAAL,CAAc;AAAEG,YAAAA,WAAW,EAAE;AAAf,WAAd,CAAN;AAAA;AAPhB,QADF,EAWGA,WAAW,IAAIW,OAAf,iBACC,gCAAC,iBAAD;AAAO,QAAA,CAAC,EAAEF,CAAC,GAAG,EAAd;AAAkB,QAAA,CAAC,EAAEC,CAAC,GAAG;AAAzB,sBACE,gCAAC,eAAD;AAAK,QAAA,IAAI,EAAC,OAAV;AAAkB,QAAA,YAAY,EAAE,CAAhC;AAAmC,QAAA,OAAO,EAAE;AAA5C,QADF,eAEE,gCAAC,gBAAD;AAAM,QAAA,IAAI,EAAEC,OAAZ;AAAqB,QAAA,OAAO,EAAE;AAA9B,QAFF,CAZJ,CADF;AAoBD;;;EA7D0BC,kBAAMC,S;;AAgEnClB,cAAc,CAACmB,SAAf,GAA2B;AACzBX,EAAAA,GAAG,EAAEY,sBAAUC,MAAV,CAAiBC,UADG;AAEzBR,EAAAA,CAAC,EAAEM,sBAAUG,MAAV,CAAiBD,UAFK;AAGzBP,EAAAA,CAAC,EAAEK,sBAAUG,MAAV,CAAiBD,UAHK;AAIzBN,EAAAA,OAAO,EAAEI,sBAAUC,MAAV,CAAiBC;AAJD,CAA3B;eAOetB,c","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Image, Text, Tag, Label } from 'react-konva';\n\nclass ImageComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      image: null,\n      showTooltip: false,\n    };\n  }\n\n  componentDidMount() {\n    this.loadImage();\n  }\n\n  componentDidUpdate(oldProps) {\n    if (oldProps.src !== this.props.src) {\n      this.loadImage();\n    }\n  }\n\n  componentWillUnmount() {\n    this.image.removeEventListener('load', this.handleLoad);\n  }\n\n  loadImage() {\n    const { src } = this.props;\n\n    this.image = new window.Image();\n    this.image.src = src;\n    this.image.addEventListener('load', this.handleLoad);\n  }\n\n  handleLoad = () => {\n    this.setState({\n      image: this.image,\n    });\n  };\n\n  render() {\n    const { x, y, tooltip } = this.props;\n    const { image, showTooltip } = this.state;\n\n    return (\n      <Group>\n        <Image\n          width={20}\n          height={20}\n          x={x}\n          y={y}\n          image={image}\n          onMouseEnter={() => this.setState({ showTooltip: true })}\n          onMouseLeave={() => this.setState({ showTooltip: false })}\n        />\n\n        {showTooltip && tooltip && (\n          <Label x={x - 30} y={y + 25}>\n            <Tag fill=\"white\" cornerRadius={5} opacity={0.9} />\n            <Text text={tooltip} padding={5} />\n          </Label>\n        )}\n      </Group>\n    );\n  }\n}\n\nImageComponent.propTypes = {\n  src: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  tooltip: PropTypes.string.isRequired,\n};\n\nexport default ImageComponent;\n"],"file":"image-konva-tooltip.js"}

package/lib/hotspot/polygon.js

@@ -31,9 +31,9 @@ var _reactKonva = require("react-konva");
 
 var _styles = require("@material-ui/core/styles");
 
-var _icons = require("@pie-lib/pie-toolbox/icons");
+var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
 
-var _icons2 = require("./icons");
+var _icons = require("./icons");
 
 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); }; }
 
@@ -163,17 +163,17 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
 
       if (showCorrectEnabled) {
         if (selected && isCorrect || !selected && !isCorrect) {
-          iconSrc = _icons2.faCorrect;
+          iconSrc = _icons.faCorrect;
         }
       } else {
         if (selected) {
           if (isCorrect) {
-            iconSrc = _icons2.faCorrect;
+            iconSrc = _icons.faCorrect;
           } else {
-            iconSrc = _icons2.faWrong;
+            iconSrc = _icons.faWrong;
           }
         } else if (!isCorrect) {
-          iconSrc = _icons2.faWrong;
+          iconSrc = _icons.faWrong;
         }
       }
 
@@ -216,7 +216,7 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
         strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter
-      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
+      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_imageKonvaTooltip["default"], {
         src: iconSrc,
         x: iconX,
         y: iconY,

package/lib/hotspot/polygon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  getPolygonCenter = (points) => {\n    const x = points.map(({ x }) => x);\n    const y = points.map(({ y }) => y);\n    const minX = Math.min.apply(null, x);\n    const maxX = Math.max.apply(null, x);\n    const minY = Math.min.apply(null, y);\n    const maxY = Math.max.apply(null, y);\n    return [(minX + maxX) / 2, (minY + maxY) / 2];\n  };\n\n  parsePointsForKonva = (points) => {\n    const parsedPoints = [];\n    points.forEach(({ x, y }) => {\n      parsedPoints.push(x);\n      parsedPoints.push(y);\n    });\n    return parsedPoints;\n  };\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      points,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const pointsParsed = this.parsePointsForKonva(points);\n    const center = this.getPolygonCenter(points);\n    const iconX = center[0];\n    const iconY = center[1];\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n    const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n\n    const rectX = minX;\n    const rectY = minY;\n    const rectWidth = maxX - minX;\n    const rectHeight = maxY - minY;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\n        )}\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nPolygonComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  selectedHotspotColor: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
+{"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  getPolygonCenter = (points) => {\n    const x = points.map(({ x }) => x);\n    const y = points.map(({ y }) => y);\n    const minX = Math.min.apply(null, x);\n    const maxX = Math.max.apply(null, x);\n    const minY = Math.min.apply(null, y);\n    const maxY = Math.max.apply(null, y);\n    return [(minX + maxX) / 2, (minY + maxY) / 2];\n  };\n\n  parsePointsForKonva = (points) => {\n    const parsedPoints = [];\n    points.forEach(({ x, y }) => {\n      parsedPoints.push(x);\n      parsedPoints.push(y);\n    });\n    return parsedPoints;\n  };\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      points,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const pointsParsed = this.parsePointsForKonva(points);\n    const center = this.getPolygonCenter(points);\n    const iconX = center[0];\n    const iconY = center[1];\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n    const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n\n    const rectX = minX;\n    const rectY = minY;\n    const rectWidth = maxX - minX;\n    const rectHeight = maxY - minY;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\n        )}\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nPolygonComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  selectedHotspotColor: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}

package/lib/hotspot/rectangle.js

@@ -29,9 +29,9 @@ var _reactKonva = require("react-konva");
 
 var _styles = require("@material-ui/core/styles");
 
-var _icons = require("@pie-lib/pie-toolbox/icons");
+var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
 
-var _icons2 = require("./icons");
+var _icons = require("./icons");
 
 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); }; }
 
@@ -136,17 +136,17 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
 
       if (showCorrectEnabled) {
         if (selected && isCorrect || !selected && !isCorrect) {
-          iconSrc = _icons2.faCorrect;
+          iconSrc = _icons.faCorrect;
         }
       } else {
         if (selected) {
           if (isCorrect) {
-            iconSrc = _icons2.faCorrect;
+            iconSrc = _icons.faCorrect;
           } else {
-            iconSrc = _icons2.faWrong;
+            iconSrc = _icons.faWrong;
           }
         } else if (!isCorrect) {
-          iconSrc = _icons2.faWrong;
+          iconSrc = _icons.faWrong;
         }
       }
 
@@ -177,7 +177,7 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: this.handleMouseEnter,
         x: x,
         y: y
-      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
+      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_imageKonvaTooltip["default"], {
         src: iconSrc,
         x: iconX,
         y: iconY,

package/lib/hotspot/rectangle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      height,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x + width / 2 - 10;\n    const iconY = y + height / 2 - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const { hovered } = this.state;\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}
+{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      height,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x + width / 2 - 10;\n    const iconY = y + height / 2 - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const { hovered } = this.state;\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "7.9.10-next.8+1b882957d",
+  "version": "7.10.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.18.1",
+    "@pie-lib/pie-toolbox": "2.19.0",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "1b882957d8a58714cb1617f5145a970b04bd45e9",
+  "gitHead": "e54e56916867a5176bc13b46b21816164f4792ea",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/container.test.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import _ from 'lodash';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Konva from 'konva';
 
 import { shallowChild } from '@pie-lib/pie-toolbox/test-utils';
-import {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';
+import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
 
 import Container, { Container as ContainerComp } from '../hotspot/container';
 import HotspotComponent from '../hotspot/index';
@@ -129,28 +128,22 @@ describe('Container', () => {
   let onSelectChoice, wrapper;
 
   const mkWrapper = (opts = {}) => {
-    opts = _.extend(
-      {
-        classes: {
-          base: 'base',
-        },
-        dimensions: {
-          height: 0,
-          width: 0,
-        },
-        disabled: false,
-        hotspotColor: 'rgba(137, 183, 244, 0.65)',
-        imageUrl: '',
-        isEvaluateMode: false,
-        outlineColor: 'blue',
-        session: { answers: [] },
-        shapes: {
-          rectangles: [],
-          polygons: [],
-        },
+    opts =
+    {
+      classes: { base: 'base' },
+      dimensions: { height: 0, width: 0, },
+      disabled: false,
+      hotspotColor: 'rgba(137, 183, 244, 0.65)',
+      imageUrl: '',
+      isEvaluateMode: false,
+      outlineColor: 'blue',
+      session: { answers: [] },
+      shapes: {
+        rectangles: [],
+        polygons: [],
       },
-      opts,
-    );
+      ...opts,
+    }
 
     return shallow(<Container {...opts} onSelectChoice={onSelectChoice} />);
   };

package/src/__tests__/polygon.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Konva from 'konva';
@@ -8,7 +7,7 @@ import { Line } from 'react-konva';
 import { shallowChild } from '@pie-lib/pie-toolbox/test-utils';
 
 import Polygon from '../hotspot/polygon';
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from '../hotspot/image-konva-tooltip';
 import { faCorrect, faWrong } from '../hotspot/icons';
 
 Konva.isBrowser = false;
@@ -17,28 +16,24 @@ describe('Polygon', () => {
   let onClick, wrapper;
 
   const mkWrapper = (opts = {}) => {
-    opts = _.extend(
-      {
-        classes: {
-          base: 'base',
-        },
-        height: 200,
-        hotspotColor: 'rgba(137, 183, 244, 0.65)',
-        id: '1',
-        isCorrect: false,
-        isEvaluateMode: false,
-        evaluateText: null,
-        disabled: false,
-        outlineColor: 'blue',
-        selected: false,
-        points: [
-          { x: 94, y: 4 },
-          { x: 89, y: 4 },
-          { x: 36, y: 40 },
-        ],
-      },
-      opts,
-    );
+    opts = {
+      classes: { base: 'base' },
+      height: 200,
+      hotspotColor: 'rgba(137, 183, 244, 0.65)',
+      id: '1',
+      isCorrect: false,
+      isEvaluateMode: false,
+      evaluateText: null,
+      disabled: false,
+      outlineColor: 'blue',
+      selected: false,
+      points: [
+        { x: 94, y: 4 },
+        { x: 89, y: 4 },
+        { x: 36, y: 40 },
+      ],
+      ...opts,
+    };
 
     return shallow(<Polygon {...opts} onClick={onClick} />);
   };

package/src/__tests__/rectangle.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Konva from 'konva';
@@ -8,7 +7,7 @@ import { Rect } from 'react-konva';
 import { shallowChild } from '@pie-lib/pie-toolbox/test-utils';
 
 import Rectangle from '../hotspot/rectangle';
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from '../hotspot/image-konva-tooltip';
 import { faCorrect, faWrong } from '../hotspot/icons';
 
 global.MutationObserver = class {
@@ -23,26 +22,22 @@ describe('Rectangle', () => {
   let onClick, wrapper;
 
   const mkWrapper = (opts = {}) => {
-    opts = _.extend(
-      {
-        classes: {
-          base: 'base',
-        },
-        height: 200,
-        hotspotColor: 'rgba(137, 183, 244, 0.65)',
-        id: '1',
-        isCorrect: false,
-        isEvaluateMode: false,
-        evaluateText: null,
-        disabled: false,
-        outlineColor: 'blue',
-        selected: false,
-        width: 300,
-        x: 5,
-        y: 5,
-      },
-      opts,
-    );
+    opts = {
+      classes: { base: 'base' },
+      height: 200,
+      hotspotColor: 'rgba(137, 183, 244, 0.65)',
+      id: '1',
+      isCorrect: false,
+      isEvaluateMode: false,
+      evaluateText: null,
+      disabled: false,
+      outlineColor: 'blue',
+      selected: false,
+      width: 300,
+      x: 5,
+      y: 5,
+      ...opts,
+    };
 
     return shallow(<Rectangle {...opts} onClick={onClick} />);
   };

package/src/hotspot/circle.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Circle, Group, Rect } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles';
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
 class CircleComponent extends React.Component {

package/src/hotspot/image-konva-tooltip.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Group, Image, Text, Tag, Label } from 'react-konva';
+
+class ImageComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      image: null,
+      showTooltip: false,
+    };
+  }
+
+  componentDidMount() {
+    this.loadImage();
+  }
+
+  componentDidUpdate(oldProps) {
+    if (oldProps.src !== this.props.src) {
+      this.loadImage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.image.removeEventListener('load', this.handleLoad);
+  }
+
+  loadImage() {
+    const { src } = this.props;
+
+    this.image = new window.Image();
+    this.image.src = src;
+    this.image.addEventListener('load', this.handleLoad);
+  }
+
+  handleLoad = () => {
+    this.setState({
+      image: this.image,
+    });
+  };
+
+  render() {
+    const { x, y, tooltip } = this.props;
+    const { image, showTooltip } = this.state;
+
+    return (
+      <Group>
+        <Image
+          width={20}
+          height={20}
+          x={x}
+          y={y}
+          image={image}
+          onMouseEnter={() => this.setState({ showTooltip: true })}
+          onMouseLeave={() => this.setState({ showTooltip: false })}
+        />
+
+        {showTooltip && tooltip && (
+          <Label x={x - 30} y={y + 25}>
+            <Tag fill="white" cornerRadius={5} opacity={0.9} />
+            <Text text={tooltip} padding={5} />
+          </Label>
+        )}
+      </Group>
+    );
+  }
+}
+
+ImageComponent.propTypes = {
+  src: PropTypes.string.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  tooltip: PropTypes.string.isRequired,
+};
+
+export default ImageComponent;

package/src/hotspot/polygon.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Line, Group, Rect } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles';
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
 class PolygonComponent extends React.Component {

package/src/hotspot/rectangle.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Rect, Group } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles';
-import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
 class RectComponent extends React.Component {