@pie-element/hotspot 6.0.2-next.3 → 6.1.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.0.1...@pie-element/hotspot@6.1.0) (2023-11-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-3271, PD-3261 ([7a795bf](https://github.com/pie-framework/pie-elements/commit/7a795bfd7e2fd865774828ad23b0a8cbbac98356))
+* update pie-lib/pie-toolbox PD-597 ([1ec84aa](https://github.com/pie-framework/pie-elements/commit/1ec84aadae515088ef65b99f780a5e5dca516f99))
+* update pie-lib/pie-toolbox to test build ([9750cdd](https://github.com/pie-framework/pie-elements/commit/9750cdd3ce3018ef8bb63bc2c6db6abba3dad0c4))
+* update pie-lib/pie-toolbox to test build ([4e04cef](https://github.com/pie-framework/pie-elements/commit/4e04cefc163d504d136c9e3b17dbb32d1e22326b))
+* update pie-libs PD-2996 ([cd092c6](https://github.com/pie-framework/pie-elements/commit/cd092c6b5c4db91645394cd23febc1f9a07f46f9))
+* update pie-libs PD-3011, PD-3130, PD-3271 ([7a36106](https://github.com/pie-framework/pie-elements/commit/7a36106efeac0448b7b825989c1eb0b29b6688d4))
+* update pie-toolbox version PD-3298 ([0c282d5](https://github.com/pie-framework/pie-elements/commit/0c282d540aba5b2bb7a8b515bcaa2dba8302d49a))
+* **hotspot:** add tests for new delete widget, refactor with the comp from pie-lib pd-597 ([6fd6a8f](https://github.com/pie-framework/pie-elements/commit/6fd6a8f96a3b59c7269310552122fce8f30579b7))
+* **hotspot:** delete console.logs pd-597 ([65ae002](https://github.com/pie-framework/pie-elements/commit/65ae00223f789dd2945d2538c1a25c69f4d265c2))
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-1886 ([4a978d0](https://github.com/pie-framework/pie-elements/commit/4a978d058b865cc21c1fc84d7d39224e0d7cc88d))
+
+
+
+
+
 ## [6.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.0.0...@pie-element/hotspot@6.0.1) (2023-11-09)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.0.1...@pie-element/hotspot-configure@6.1.0) (2023-11-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-3271, PD-3261 ([7a795bf](https://github.com/pie-framework/pie-elements/commit/7a795bfd7e2fd865774828ad23b0a8cbbac98356))
+* update pie-lib/pie-toolbox PD-597 ([1ec84aa](https://github.com/pie-framework/pie-elements/commit/1ec84aadae515088ef65b99f780a5e5dca516f99))
+* update pie-lib/pie-toolbox to test build ([9750cdd](https://github.com/pie-framework/pie-elements/commit/9750cdd3ce3018ef8bb63bc2c6db6abba3dad0c4))
+* update pie-lib/pie-toolbox to test build ([4e04cef](https://github.com/pie-framework/pie-elements/commit/4e04cefc163d504d136c9e3b17dbb32d1e22326b))
+* update pie-libs PD-2996 ([cd092c6](https://github.com/pie-framework/pie-elements/commit/cd092c6b5c4db91645394cd23febc1f9a07f46f9))
+* update pie-libs PD-3011, PD-3130, PD-3271 ([7a36106](https://github.com/pie-framework/pie-elements/commit/7a36106efeac0448b7b825989c1eb0b29b6688d4))
+* update pie-toolbox version PD-3298 ([0c282d5](https://github.com/pie-framework/pie-elements/commit/0c282d540aba5b2bb7a8b515bcaa2dba8302d49a))
+* **hotspot:** add tests for new delete widget, refactor with the comp from pie-lib pd-597 ([6fd6a8f](https://github.com/pie-framework/pie-elements/commit/6fd6a8f96a3b59c7269310552122fce8f30579b7))
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-1886 ([4a978d0](https://github.com/pie-framework/pie-elements/commit/4a978d058b865cc21c1fc84d7d39224e0d7cc88d))
+
+
+
+
+
 ## [6.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.0.0...@pie-element/hotspot-configure@6.0.1) (2023-11-09)
 
 

package/configure/lib/DeleteWidget.js

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

package/configure/lib/DeleteWidget.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DeleteWidget.jsx"],"names":["DeleteWidget","height","id","width","x","y","points","outlineColor","handleWidgetClick","positionX","positionY","faDelete","propTypes","PropTypes","string","isRequired","number","func","arrayOf","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA0E;AAAA,MAAvEC,MAAuE,QAAvEA,MAAuE;AAAA,MAA/DC,EAA+D,QAA/DA,EAA+D;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,CAAoD,QAApDA,CAAoD;AAAA,MAAjDC,CAAiD,QAAjDA,CAAiD;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;AAAA,MAAtCC,YAAsC,QAAtCA,YAAsC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AAC7F,MAAIC,SAAJ,EAAeC,SAAf,CAD6F,CAE7F;;AACA,MAAIJ,MAAJ,EAAY;AACV,qBAAiB,sBAAUA,MAAV,CAAjB;AAAA,QAAQF,EAAR,cAAQA,CAAR;AAAA,QAAWC,EAAX,cAAWA,CAAX;;AACAI,IAAAA,SAAS,GAAGL,EAAZ;AACAM,IAAAA,SAAS,GAAGL,EAAZ;AACD,GAJD,MAIO;AACLI,IAAAA,SAAS,GAAGL,CAAC,GAAGD,KAAJ,GAAY,EAAxB,CADK,CACuB;;AAC5BO,IAAAA,SAAS,GAAGL,CAAC,GAAGJ,MAAJ,GAAa,EAAzB,CAFK,CAEwB;AAC9B;;AAED,sBACE,gCAAC,iBAAD;AAAO,IAAA,OAAO,EAAE;AAAA,aAAMO,iBAAiB,CAACN,EAAD,CAAvB;AAAA;AAAhB,kBACE,gCAAC,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"}
+{"version":3,"sources":["../src/DeleteWidget.jsx"],"names":["DeleteWidget","height","id","width","x","y","points","outlineColor","handleWidgetClick","positionX","positionY","faDelete","propTypes","PropTypes","string","isRequired","number","func","arrayOf","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA0E;AAAA,MAAvEC,MAAuE,QAAvEA,MAAuE;AAAA,MAA/DC,EAA+D,QAA/DA,EAA+D;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,CAAoD,QAApDA,CAAoD;AAAA,MAAjDC,CAAiD,QAAjDA,CAAiD;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;AAAA,MAAtCC,YAAsC,QAAtCA,YAAsC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AAC7F,MAAIC,SAAJ,EAAeC,SAAf,CAD6F,CAE7F;;AACA,MAAIJ,MAAJ,EAAY;AACV,qBAAiB,sBAAUA,MAAV,CAAjB;AAAA,QAAQF,EAAR,cAAQA,CAAR;AAAA,QAAWC,EAAX,cAAWA,CAAX;;AACAI,IAAAA,SAAS,GAAGL,EAAZ;AACAM,IAAAA,SAAS,GAAGL,EAAZ;AACD,GAJD,MAIO;AACLI,IAAAA,SAAS,GAAGL,CAAC,GAAGD,KAAJ,GAAY,EAAxB,CADK,CACuB;;AAC5BO,IAAAA,SAAS,GAAGL,CAAC,GAAGJ,MAAJ,GAAa,EAAzB,CAFK,CAEwB;AAC9B;;AAED,sBACE,gCAAC,iBAAD;AAAO,IAAA,OAAO,EAAE;AAAA,aAAMO,iBAAiB,CAACN,EAAD,CAAvB;AAAA;AAAhB,kBACE,gCAAC,sBAAD;AAAgB,IAAA,KAAK,EAAE,EAAvB;AAA2B,IAAA,MAAM,EAAE,EAAnC;AAAuC,IAAA,CAAC,EAAEO,SAA1C;AAAqD,IAAA,CAAC,EAAEC,SAAxD;AAAmE,IAAA,GAAG,EAAEC;AAAxE,IADF,CADF;AAKD,CAjBD;;AAmBAX,YAAY,CAACY,SAAb,GAAyB;AACvBV,EAAAA,EAAE,EAAEW,sBAAUC,MAAV,CAAiBC,UADE;AAEvBd,EAAAA,MAAM,EAAEY,sBAAUG,MAFK;AAGvBb,EAAAA,KAAK,EAAEU,sBAAUG,MAHM;AAIvBZ,EAAAA,CAAC,EAAES,sBAAUG,MAAV,CAAiBD,UAJG;AAKvBV,EAAAA,CAAC,EAAEQ,sBAAUG,MAAV,CAAiBD,UALG;AAMvBP,EAAAA,iBAAiB,EAAEK,sBAAUI,IAAV,CAAeF,UANX;AAOvBT,EAAAA,MAAM,EAAEO,sBAAUK,OAAV,CACNL,sBAAUM,KAAV,CAAgB;AACdf,IAAAA,CAAC,EAAES,sBAAUG,MADC;AAEdX,IAAAA,CAAC,EAAEQ,sBAAUG;AAFC,GAAhB,CADM,CAPe;AAavBT,EAAAA,YAAY,EAAEM,sBAAUC,MAAV,CAAiBC;AAbR,CAAzB;eAgBef,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group } from 'react-konva';\nimport { faDelete } from './icons';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { calculate } from './utils';\n\nconst DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {\n  let positionX, positionY;\n  // if points exist we have an irregular form (polygon) and position should be computed\n  if (points) {\n    const { x, y } = calculate(points);\n    positionX = x;\n    positionY = y;\n  } else {\n    positionX = x + width - 20; // 10 pixels to the left\n    positionY = y + height - 20; // 10 pixels above\n  }\n\n  return (\n    <Group onClick={() => handleWidgetClick(id)}>\n      <ImageComponent width={20} height={20} x={positionX} y={positionY} src={faDelete} />\n    </Group>\n  );\n};\n\nDeleteWidget.propTypes = {\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number,\n  width: PropTypes.number,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  handleWidgetClick: PropTypes.func.isRequired,\n  points: PropTypes.arrayOf(\n    PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n  ),\n  outlineColor: PropTypes.string.isRequired,\n};\n\nexport default DeleteWidget;\n"],"file":"DeleteWidget.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "6.0.1",
+  "version": "6.1.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": "1.0.11",
+    "@pie-lib/pie-toolbox": "1.1.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 Image from './image';
+import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
 import { calculate } from './utils';
 
 const DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {
@@ -19,7 +19,7 @@ const DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWid
 
   return (
     <Group onClick={() => handleWidgetClick(id)}>
-      <Image width={20} height={20} x={positionX} y={positionY} src={faDelete} />
+      <ImageComponent width={20} height={20} x={positionX} y={positionY} src={faDelete} />
     </Group>
   );
 };

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

@@ -0,0 +1,64 @@
+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';
+
+describe('DeleteWidget', () => {
+    it('computes positionX and positionY correctly without points', () => {
+        const mockHandleWidgetClick = jest.fn();
+
+        const props = {
+            id: 'someId',
+            x: 5,
+            y: 10,
+            width: 30,
+            height: 40,
+            outlineColor: 'blue',
+            handleWidgetClick: mockHandleWidgetClick,
+        };
+
+        const wrapper = shallow(<DeleteWidget {...props} />);
+
+        // Assert that the computed positionX and positionY match the expected values
+        expect(wrapper.find(ImageComponent).prop('x')).toEqual(15);
+        expect(wrapper.find(ImageComponent).prop('y')).toEqual(30);
+
+        // Simulate a click event on the Group element
+        wrapper.find('Group').simulate('click');
+
+        // Assert that the handleWidgetClick function is called with the correct arguments
+        expect(mockHandleWidgetClick).toHaveBeenCalledWith('someId');
+    });
+
+    it('computes positionX and positionY correctly with points', () => {
+        const props = {
+            id: 'someId',
+            x: 5,
+            y: 10,
+            points: [
+                {
+                    "y": 151,
+                    "x": 141
+                },
+                {
+                    "y": 289,
+                    "x": 205
+                },
+                {
+                    "x": 269,
+                    "y": 151
+                }
+            ],
+            width: 30,
+            height: 40,
+            outlineColor: 'blue',
+        };
+
+        const wrapper = shallow(<DeleteWidget {...props} />);
+
+        // Assert that the computed positionX and positionY match the expected values
+        expect(wrapper.find(ImageComponent).prop('x')).toEqual(239);
+        expect(wrapper.find(ImageComponent).prop('y')).toEqual(194);
+
+    });
+});

package/controller/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@4.0.1...@pie-element/hotspot-controller@4.0.2) (2023-11-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-597 ([1ec84aa](https://github.com/pie-framework/pie-elements/commit/1ec84aadae515088ef65b99f780a5e5dca516f99))
+* update pie-libs PD-2996 ([cd092c6](https://github.com/pie-framework/pie-elements/commit/cd092c6b5c4db91645394cd23febc1f9a07f46f9))
+
+
+
+
+
 ## [4.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@4.0.0...@pie-element/hotspot-controller@4.0.1) (2023-11-09)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-controller",
   "private": true,
-  "version": "4.0.1",
+  "version": "4.0.2",
   "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": "1.0.11",
+    "@pie-lib/pie-toolbox": "1.1.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/lib/hotspot/polygon.js

@@ -29,9 +29,9 @@ var _reactKonva = require("react-konva");
 
 var _styles = require("@material-ui/core/styles");
 
-var _image = _interopRequireDefault(require("./image"));
+var _icons = require("@pie-lib/pie-toolbox/icons");
 
-var _icons = require("./icons");
+var _icons2 = 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); }; }
 
@@ -146,17 +146,17 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
 
       if (showCorrectEnabled) {
         if (selected && isCorrect || !selected && !isCorrect) {
-          iconSrc = _icons.faCorrect;
+          iconSrc = _icons2.faCorrect;
         }
       } else {
         if (selected) {
           if (isCorrect) {
-            iconSrc = _icons.faCorrect;
+            iconSrc = _icons2.faCorrect;
           } else {
-            iconSrc = _icons.faWrong;
+            iconSrc = _icons2.faWrong;
           }
         } else if (!isCorrect) {
-          iconSrc = _icons.faWrong;
+          iconSrc = _icons2.faWrong;
         }
       }
 
@@ -175,7 +175,7 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
         strokeWidth: outlineWidth,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter
-      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_image["default"], {
+      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
         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","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","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 } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Image from './image';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\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      outlineColor,\n      selected,\n      points,\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    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\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {isEvaluateMode && iconSrc ? <Image 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  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  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","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","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 } 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  }\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\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      outlineColor,\n      selected,\n      points,\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    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\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={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  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  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 _image = _interopRequireDefault(require("./image"));
+var _icons = require("@pie-lib/pie-toolbox/icons");
 
-var _icons = require("./icons");
+var _icons2 = 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); }; }
 
@@ -122,17 +122,17 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
 
       if (showCorrectEnabled) {
         if (selected && isCorrect || !selected && !isCorrect) {
-          iconSrc = _icons.faCorrect;
+          iconSrc = _icons2.faCorrect;
         }
       } else {
         if (selected) {
           if (isCorrect) {
-            iconSrc = _icons.faCorrect;
+            iconSrc = _icons2.faCorrect;
           } else {
-            iconSrc = _icons.faWrong;
+            iconSrc = _icons2.faWrong;
           }
         } else if (!isCorrect) {
-          iconSrc = _icons.faWrong;
+          iconSrc = _icons2.faWrong;
         }
       }
 
@@ -153,7 +153,7 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: this.handleMouseEnter,
         x: x,
         y: y
-      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_image["default"], {
+      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
         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","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","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';\n\nimport Image from './image';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\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      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    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <Image 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  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  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","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","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  }\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\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      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    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={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  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  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": "6.0.2-next.3+f8ed8e125",
+  "version": "6.1.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": "1.0.11",
+    "@pie-lib/pie-toolbox": "1.1.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": "f8ed8e125424ea16ea381aa8be2f0d8d12e3b592",
+  "gitHead": "3298877b4b7f8c2fc707677ab09142d07363e706",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/polygon.test.jsx

@@ -8,7 +8,7 @@ import { Line } from 'react-konva';
 import { shallowChild } from '@pie-lib/pie-toolbox/test-utils';
 
 import Polygon from '../hotspot/polygon';
-import Image from '../hotspot/image';
+import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
 import { faCorrect, faWrong } from '../hotspot/icons';
 
 Konva.isBrowser = false;
@@ -134,7 +134,7 @@ describe('Polygon', () => {
       });
 
       it('should have a green checkmark icon', () => {
-        const imgComponent = polygonComponent.find(Image);
+        const imgComponent = polygonComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(1);
         expect(imgComponent.prop('src')).toEqual(faCorrect);
       });
@@ -151,7 +151,7 @@ describe('Polygon', () => {
       });
 
       it('should have no icon', () => {
-        const imgComponent = polygonComponent.find(Image);
+        const imgComponent = polygonComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(0);
       });
     });
@@ -168,7 +168,7 @@ describe('Polygon', () => {
       });
 
       it('should have a red x icon', () => {
-        const imgComponent = polygonComponent.find(Image);
+        const imgComponent = polygonComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(1);
         expect(imgComponent.prop('src')).toEqual(faWrong);
       });
@@ -185,7 +185,7 @@ describe('Polygon', () => {
       });
 
       it('should have a red x icon', () => {
-        const imgComponent = polygonComponent.find(Image);
+        const imgComponent = polygonComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(1);
         expect(imgComponent.prop('src')).toEqual(faWrong);
       });
@@ -206,7 +206,7 @@ describe('Polygon', () => {
           showCorrectEnabled: true,
           markAsCorrect: true,
         });
-        const imgComponent = polygonComponent.find(Image);
+        const imgComponent = polygonComponent.find(ImageComponent);
         expect(imgComponent.prop('src')).toEqual(faCorrect);
       });
 
@@ -227,7 +227,7 @@ describe('Polygon', () => {
           selected: true,
           isCorrect: false,
         });
-        const imgComponent = polygonComponent.find(Image);
+        const imgComponent = polygonComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(0);
       });
     });

package/src/__tests__/rectangle.test.jsx

@@ -8,7 +8,7 @@ import { Rect } from 'react-konva';
 import { shallowChild } from '@pie-lib/pie-toolbox/test-utils';
 
 import Rectangle from '../hotspot/rectangle';
-import Image from '../hotspot/image';
+import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
 import { faCorrect, faWrong } from '../hotspot/icons';
 
 global.MutationObserver = class {
@@ -136,7 +136,7 @@ describe('Rectangle', () => {
       });
 
       it('should have a green checkmark icon', () => {
-        const imgComponent = rectangleComponent.find(Image);
+        const imgComponent = rectangleComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(1);
         expect(imgComponent.prop('src')).toEqual(faCorrect);
       });
@@ -153,7 +153,7 @@ describe('Rectangle', () => {
       });
 
       it('should have no icon', () => {
-        const imgComponent = rectangleComponent.find(Image);
+        const imgComponent = rectangleComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(0);
       });
     });
@@ -170,7 +170,7 @@ describe('Rectangle', () => {
       });
 
       it('should have a red x icon', () => {
-        const imgComponent = rectangleComponent.find(Image);
+        const imgComponent = rectangleComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(1);
         expect(imgComponent.prop('src')).toEqual(faWrong);
       });
@@ -187,7 +187,7 @@ describe('Rectangle', () => {
       });
 
       it('should have a red x icon', () => {
-        const imgComponent = rectangleComponent.find(Image);
+        const imgComponent = rectangleComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(1);
         expect(imgComponent.prop('src')).toEqual(faWrong);
       });
@@ -208,7 +208,7 @@ describe('Rectangle', () => {
           showCorrectEnabled: true,
           markAsCorrect: true,
         });
-        const imgComponent = rectangleComponent.find(Image);
+        const imgComponent = rectangleComponent.find(ImageComponent);
         expect(imgComponent.prop('src')).toEqual(faCorrect);
       });
 
@@ -229,7 +229,7 @@ describe('Rectangle', () => {
           selected: true,
           isCorrect: false,
         });
-        const imgComponent = rectangleComponent.find(Image);
+        const imgComponent = rectangleComponent.find(ImageComponent);
         expect(imgComponent.length).toEqual(0);
       });
     });

package/src/hotspot/polygon.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Line, Group } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles';
-
-import Image from './image';
+import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
 import { faCorrect, faWrong } from './icons';
 
 class PolygonComponent extends React.Component {
@@ -130,7 +129,7 @@ class PolygonComponent extends React.Component {
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
         />
-        {isEvaluateMode && iconSrc ? <Image src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
+        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
   }

package/src/hotspot/rectangle.jsx

@@ -2,8 +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 Image from './image';
+import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
 import { faCorrect, faWrong } from './icons';
 
 class RectComponent extends React.Component {
@@ -115,7 +114,7 @@ class RectComponent extends React.Component {
           x={x}
           y={y}
         />
-        {isEvaluateMode && iconSrc ? <Image src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
+        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
   }

package/configure/lib/image.js

@@ -1,133 +0,0 @@
-"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
-};
-var _default = ImageComponent;
-exports["default"] = _default;
-//# sourceMappingURL=image.js.map

package/configure/lib/image.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/image.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;AAJM,CAA3B;eAOerB,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,\n};\n\nexport default ImageComponent;\n"],"file":"image.js"}

package/configure/src/image.jsx

@@ -1,76 +0,0 @@
-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,
-};
-
-export default ImageComponent;

package/lib/hotspot/image.js

@@ -1,133 +0,0 @@
-"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
-};
-var _default = ImageComponent;
-exports["default"] = _default;
-//# sourceMappingURL=image.js.map

package/lib/hotspot/image.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hotspot/image.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;AAJM,CAA3B;eAOerB,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,\n};\n\nexport default ImageComponent;\n"],"file":"image.js"}

package/src/__tests__/__snapshots__/image.test.jsx.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image snapshots image renders 1`] = `
-<Group>
-  <Image
-    height={20}
-    image={null}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    width={20}
-    x={5}
-    y={5}
-  />
-</Group>
-`;
-
-exports[`Image snapshots tooltip renders 1`] = `
-<Group>
-  <Image
-    height={20}
-    image={null}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    width={20}
-    x={5}
-    y={5}
-  />
-</Group>
-`;
-
-exports[`Image snapshots x y position renders 1`] = `
-<Group>
-  <Image
-    height={20}
-    image={null}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    width={20}
-    x={10}
-    y={10}
-  />
-</Group>
-`;

package/src/__tests__/image.test.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import Konva from 'konva';
-
-import Image from '../hotspot/image';
-
-Konva.isBrowser = false;
-
-describe('Image', () => {
-  let wrapper;
-
-  const mkWrapper = (opts = {}) => {
-    opts = _.extend(
-      {
-        x: 5,
-        y: 5,
-        src: '',
-        tooltip: null,
-      },
-      opts,
-    );
-
-    return shallow(<Image {...opts} />);
-  };
-
-  beforeEach(() => {
-    wrapper = mkWrapper();
-  });
-
-  describe('snapshots', () => {
-    describe('x y position', () => {
-      it('renders', () => {
-        const wrapper = mkWrapper({ x: 10, y: 10 });
-        expect(toJson(wrapper)).toMatchSnapshot();
-      });
-    });
-
-    describe('image', () => {
-      it('renders', () => {
-        const wrapper = mkWrapper({ src: 'https://picsum.photos/id/102/200/300' });
-        expect(toJson(wrapper)).toMatchSnapshot();
-      });
-    });
-
-    describe('tooltip', () => {
-      it('renders', () => {
-        const wrapper = mkWrapper({ tooltip: 'Correctly\nselected' });
-        expect(toJson(wrapper)).toMatchSnapshot();
-      });
-    });
-  });
-});

package/src/hotspot/image.jsx

@@ -1,76 +0,0 @@
-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,
-};
-
-export default ImageComponent;