@pie-element/hotspot 4.9.1 → 4.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -0
- package/configure/CHANGELOG.md +35 -0
- package/configure/lib/hotspot-container.js +17 -5
- package/configure/lib/hotspot-container.js.map +1 -1
- package/configure/lib/hotspot-drawable.js +2 -2
- package/configure/lib/hotspot-drawable.js.map +1 -1
- package/configure/lib/hotspot-palette.js +1 -1
- package/configure/lib/hotspot-palette.js.map +1 -1
- package/configure/lib/hotspot-polygon.js +1 -1
- package/configure/lib/hotspot-polygon.js.map +1 -1
- package/configure/lib/hotspot-rectangle.js +1 -1
- package/configure/lib/hotspot-rectangle.js.map +1 -1
- package/configure/lib/index.js +2 -2
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/root.js +2 -2
- package/configure/lib/root.js.map +1 -1
- package/configure/lib/utils.js +4 -2
- package/configure/lib/utils.js.map +1 -1
- package/configure/package.json +3 -3
- package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap +1 -0
- package/configure/src/hotspot-container.jsx +10 -1
- package/controller/CHANGELOG.md +16 -0
- package/controller/lib/index.js +6 -3
- package/controller/lib/index.js.map +1 -1
- package/controller/lib/utils.js.map +1 -1
- package/controller/package.json +1 -1
- package/lib/hotspot/container.js +1 -1
- package/lib/hotspot/container.js.map +1 -1
- package/lib/hotspot/image.js +1 -1
- package/lib/hotspot/image.js.map +1 -1
- package/lib/hotspot/index.js +1 -1
- package/lib/hotspot/index.js.map +1 -1
- package/lib/hotspot/polygon.js +1 -1
- package/lib/hotspot/polygon.js.map +1 -1
- package/lib/hotspot/rectangle.js +1 -1
- package/lib/hotspot/rectangle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/session-updater.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,52 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.10.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.10.2...@pie-element/hotspot@4.10.3) (2021-11-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-element/hotspot
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [4.10.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.10.1...@pie-element/hotspot@4.10.2) (2021-11-11)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @pie-element/hotspot
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [4.10.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.10.0...@pie-element/hotspot@4.10.1) (2021-10-04)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @pie-element/hotspot
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [4.10.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.9.1...@pie-element/hotspot@4.10.0) (2021-09-20)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Bug Fixes
|
|
34
|
+
|
|
35
|
+
* pie-lib updates ([e521c2f](https://github.com/pie-framework/pie-elements/commit/e521c2f1a44aa7f3e14f82a1cee05ceb484ed0a6))
|
|
36
|
+
* Updated pie-lib versions ([2fe4c5d](https://github.com/pie-framework/pie-elements/commit/2fe4c5d0be2d40f5fdb34815855695a7f1087f56))
|
|
37
|
+
* Updated pie-lib versions ([1c23830](https://github.com/pie-framework/pie-elements/commit/1c23830fc75d1de5f7bb3bb16de3c665ae5fa350))
|
|
38
|
+
* **hotspot:** Added a max width when loading a new image PD-261 ([7fcbb8a](https://github.com/pie-framework/pie-elements/commit/7fcbb8a896f73024053a97075d8cb368b8bb6b71))
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Features
|
|
42
|
+
|
|
43
|
+
* **hotspot:** add the possibility to paste image in authoring PD-478 ([16f1198](https://github.com/pie-framework/pie-elements/commit/16f1198ea5a839759f626927f1b65b5483a9aa85))
|
|
44
|
+
* **hotspot:** Added option to set toolbar editor position ([a36faea](https://github.com/pie-framework/pie-elements/commit/a36faea1cc0cb9ed5574fcb860941eea298b1cd3))
|
|
45
|
+
* **hotspot:** Added tooltip annotations to the icons PD-625 ([354a41e](https://github.com/pie-framework/pie-elements/commit/354a41ea2738d35fc09b1d7ab4bc7f796eb31c65))
|
|
46
|
+
* **hotspot:** set toolbar editor position to bottom ([3f3db3a](https://github.com/pie-framework/pie-elements/commit/3f3db3accdb1469f8b52535081da0cc339e43a48))
|
|
47
|
+
* **hotspot:** toolbar editor position - change double quotes into single quotes ([722ec64](https://github.com/pie-framework/pie-elements/commit/722ec64c1f87f69f2c086e80923d0c137b4aad39))
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
6
52
|
## [4.9.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.9.0...@pie-element/hotspot@4.9.1) (2021-09-01)
|
|
7
53
|
|
|
8
54
|
**Note:** Version bump only for package @pie-element/hotspot
|
package/configure/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,41 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.6.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.6.1...@pie-element/hotspot-configure@4.6.2) (2021-11-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [4.6.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.6.0...@pie-element/hotspot-configure@4.6.1) (2021-10-04)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [4.6.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.5.1...@pie-element/hotspot-configure@4.6.0) (2021-09-20)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Bug Fixes
|
|
26
|
+
|
|
27
|
+
* pie-lib updates ([e521c2f](https://github.com/pie-framework/pie-elements/commit/e521c2f1a44aa7f3e14f82a1cee05ceb484ed0a6))
|
|
28
|
+
* Updated pie-lib versions ([2fe4c5d](https://github.com/pie-framework/pie-elements/commit/2fe4c5d0be2d40f5fdb34815855695a7f1087f56))
|
|
29
|
+
* Updated pie-lib versions ([1c23830](https://github.com/pie-framework/pie-elements/commit/1c23830fc75d1de5f7bb3bb16de3c665ae5fa350))
|
|
30
|
+
* **hotspot:** Added a max width when loading a new image PD-261 ([7fcbb8a](https://github.com/pie-framework/pie-elements/commit/7fcbb8a896f73024053a97075d8cb368b8bb6b71))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
* **hotspot:** add the possibility to paste image in authoring PD-478 ([16f1198](https://github.com/pie-framework/pie-elements/commit/16f1198ea5a839759f626927f1b65b5483a9aa85))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
6
41
|
## [4.5.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.5.0...@pie-element/hotspot-configure@4.5.1) (2021-09-01)
|
|
7
42
|
|
|
8
43
|
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -41,13 +41,17 @@ var _uploadControl = _interopRequireDefault(require("./upload-control"));
|
|
|
41
41
|
|
|
42
42
|
var _utils = require("./utils");
|
|
43
43
|
|
|
44
|
-
function
|
|
44
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
45
|
+
|
|
46
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
47
|
+
|
|
48
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
45
49
|
|
|
46
50
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
47
51
|
|
|
48
52
|
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); }; }
|
|
49
53
|
|
|
50
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
54
|
+
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; } }
|
|
51
55
|
|
|
52
56
|
var isImage = function isImage(file) {
|
|
53
57
|
var imageType = /image.*/;
|
|
@@ -89,6 +93,13 @@ var Container = /*#__PURE__*/function (_Component) {
|
|
|
89
93
|
dropzoneActive: false
|
|
90
94
|
});
|
|
91
95
|
});
|
|
96
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnPaste", function (e) {
|
|
97
|
+
var files = e.clipboardData.files;
|
|
98
|
+
|
|
99
|
+
if (files && isImage(files[0])) {
|
|
100
|
+
_this.handleFileRead(files[0]);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
92
103
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
|
|
93
104
|
e.preventDefault();
|
|
94
105
|
var _e$dataTransfer = e.dataTransfer,
|
|
@@ -200,7 +211,8 @@ var Container = /*#__PURE__*/function (_Component) {
|
|
|
200
211
|
onDragExit: this.handleOnDragExit,
|
|
201
212
|
onDragLeave: this.handleOnDragExit,
|
|
202
213
|
onDragOver: this.handleOnDragOver,
|
|
203
|
-
onDrop: this.handleOnDrop
|
|
214
|
+
onDrop: this.handleOnDrop,
|
|
215
|
+
onPaste: this.handleOnPaste
|
|
204
216
|
} : {}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
205
217
|
className: classes.toolbar
|
|
206
218
|
}, imageUrl && /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","handleFileRead","target","files","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","input","click","showTooltip","classes","dimensions","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","replaceButton","replaceSection","handleInputClick","handleUploadImage","ref","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","lineHeight","right","width","height","borderLeft","borderRight","borderTop","marginBottom","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAU;AACxB,MAAMC,SAAS,GAAG,SAAlB;AACA,SAAOD,IAAI,CAACE,IAAL,CAAUC,KAAV,CAAgBF,SAAhB,CAAP;AACD,CAHD;;IAKaG,S;;;;;AASX,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,uGAUF,UAACL,IAAD,EAAU;AAAA,UACjBM,aADiB,GACC,MAAKD,KADN,CACjBC,aADiB;AAEzB,UAAMC,MAAM,GAAG,IAAIC,UAAJ,EAAf;;AAEAD,MAAAA,MAAM,CAACE,SAAP,GAAmB;AAAA,eAAMH,aAAa,CAACC,MAAM,CAACG,MAAR,CAAnB;AAAA,OAAnB;;AACAH,MAAAA,MAAM,CAACI,aAAP,CAAqBX,IAArB;AACD,KAhBkB;AAAA,0GAkBC,UAACY,CAAD,EAAO;AACzBA,MAAAA,CAAC,CAACC,cAAF;;AAEA,YAAKC,cAAL,CAAoBF,CAAC,CAACG,MAAF,CAASC,KAAT,CAAe,CAAf,CAApB;AACD,KAtBkB;AAAA,uGAwBF;AAAA,aAAM,MAAKC,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KAxBE;AAAA,wGAyBD;AAAA,aAAM,MAAKD,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KAzBC;AAAA,qGA2BJ,UAACN,CAAD,EAAO;AACpBA,MAAAA,CAAC,CAACC,cAAF;AADoB,4BAGKD,CAAC,CAACO,YAHP;AAAA,UAGZC,KAHY,mBAGZA,KAHY;AAAA,UAGLJ,KAHK,mBAGLA,KAHK;;AAKpB,UAAII,KAAK,IAAIA,KAAK,CAAC,CAAD,CAAL,CAASC,IAAT,KAAkB,MAA/B,EAAuC;AACrC,YAAMrB,IAAI,GAAGoB,KAAK,CAAC,CAAD,CAAL,CAASE,SAAT,EAAb;;AAEA,YAAIvB,OAAO,CAACC,IAAD,CAAX,EAAmB;AACjB,gBAAKc,cAAL,CAAoBd,IAApB;AACD;AACF,OAND,MAMO,IAAID,OAAO,CAACiB,KAAK,CAAC,CAAD,CAAN,CAAX,EAAuB;AAC5B,cAAKF,cAAL,CAAoBE,KAAK,CAAC,CAAD,CAAzB;AACD;;AACD,YAAKO,eAAL;AACD,KA1CkB;AAAA,yGA4CA,UAACX,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACC,cAAF;AADwB,UAGhBK,cAHgB,GAGG,MAAKM,KAHR,CAGhBN,cAHgB;;AAKxB,UAAI,CAACA,cAAL,EAAqB;AACnB,cAAKO,cAAL;AACD;AACF,KApDkB;AAAA,yGAsDA,UAACb,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACC,cAAF;;AAEA,YAAKU,eAAL;AACD,KA1DkB;AAAA,uGA4DF,UAAAG,SAAS,EAAI;AAAA,UACpBC,cADoB,GACD,MAAKtB,KADJ,CACpBsB,cADoB;;AAG5B,YAAKV,QAAL,CACE;AAAEW,QAAAA,MAAM,EAAEF;AAAV,OADF,EAEE;AACA;AAAA,eAAMC,cAAc,CAAC,wBAAYD,SAAZ,CAAD,CAApB;AAAA,OAHF;AAKD,KApEkB;AAAA,mGAsEN,YAAM;AAAA,UACTE,MADS,GACE,MAAKJ,KADP,CACTI,MADS;;AAGjB,UAAIA,MAAM,IAAIA,MAAM,CAACC,MAArB,EAA6B;AAC3B;AACA,YAAIH,SAAS,GAAGE,MAAM,CAACE,IAAP,CAAY,UAACC,CAAD,EAAIC,CAAJ;AAAA,iBAAWC,QAAQ,CAACF,CAAC,CAACG,KAAH,CAAR,GAAoBD,QAAQ,CAACD,CAAC,CAACE,KAAH,CAAvC;AAAA,SAAZ,CAAhB;AAEAR,QAAAA,SAAS,GAAGA,SAAS,GAAGA,SAAS,CAACS,KAAV,CAAgB,CAAhB,EAAmBT,SAAS,CAACG,MAAV,GAAmB,CAAtC,CAAH,GAA8C,EAAnE;;AAEA,cAAKF,cAAL,CAAoBD,SAApB;AACD;AACF,KAjFkB;AAAA,uGAmFF;AAAA,aAAM,MAAKC,cAAL,CAAoB,EAApB,CAAN;AAAA,KAnFE;AAAA,yGAqFA;AAAA,aAAM,MAAKV,QAAL,CAAc;AAAEmB,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KArFA;AAAA,0GAsFC;AAAA,aAAM,MAAKnB,QAAL,CAAc;AAAEmB,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KAtFD;AAAA,yGAuFA;AAAA,aAAM,MAAKC,KAAL,CAAWC,KAAX,EAAN;AAAA,KAvFA;AAAA,sGAyFH;AAAA,aAAM,MAAKrB,QAAL,CAAc;AAAEsB,QAAAA,WAAW,EAAE,CAAC,MAAKf,KAAL,CAAWe;AAA3B,OAAd,CAAN;AAAA,KAzFG;AAGjB,UAAKf,KAAL,GAAa;AACXY,MAAAA,WAAW,EAAE,IADF;AAEX;AACAR,MAAAA,MAAM,EAAE,yBAAavB,KAAK,CAACuB,MAAnB;AAHG,KAAb;AAHiB;AAQlB;;;;WAmFD,kBAAS;AAAA;;AAAA,wBAWH,KAAKvB,KAXF;AAAA,UAELmC,OAFK,eAELA,OAFK;AAAA,UAGLC,UAHK,eAGLA,UAHK;AAAA,UAILC,YAJK,eAILA,YAJK;AAAA,UAKLC,QALK,eAKLA,QALK;AAAA,UAMLC,eANK,eAMLA,eANK;AAAA,UAOLC,sBAPK,eAOLA,sBAPK;AAAA,UAQLC,YARK,eAQLA,YARK;AAAA,UASLC,WATK,eASLA,WATK;AAAA,UAULC,0BAVK,eAULA,0BAVK;AAAA,wBAgBH,KAAKxB,KAhBF;AAAA,UAaLN,cAbK,eAaLA,cAbK;AAAA,UAcLkB,WAdK,eAcLA,WAdK;AAAA,UAeLG,WAfK,eAeLA,WAfK;AAAA,UAiBCX,MAjBD,GAiBY,KAAKJ,KAjBjB,CAiBCI,MAjBD;AAmBP,0BACE;AAAK,QAAA,SAAS,EAAEY,OAAO,CAACS;AAAxB,sBACE;AAAK,QAAA,SAAS,YAAKT,OAAO,CAACU,GAAb,cAAoBhC,cAAc,GAAGsB,OAAO,CAACW,SAAX,GAAuB,EAAzD;AAAd,SACSf,WAAW,GAAG;AAChBgB,QAAAA,UAAU,EAAE,KAAKC,gBADD;AAEhBC,QAAAA,WAAW,EAAE,KAAKD,gBAFF;AAGhBE,QAAAA,UAAU,EAAE,KAAKC,gBAHD;AAIhBC,QAAAA,MAAM,EAAE,KAAKC;AAJG,OAAH,GAKX,EANT,gBAQE;AAAK,QAAA,SAAS,EAAElB,OAAO,CAACmB;AAAxB,SACGhB,QAAQ,iBACP,gCAAC,yBAAD;AACE,QAAA,eAAe,EAAEH,OAAO,CAACoB,aAD3B;AAEE,QAAA,gBAAgB,EAAEpB,OAAO,CAACqB,cAF5B;AAGE,QAAA,KAAK,EAAC,eAHR;AAIE,QAAA,YAAY,EAAE,KAAKC,gBAJrB;AAKE,QAAA,aAAa,EAAE,KAAKC,iBALtB;AAME,QAAA,MAAM,EAAE,gBAACC,GAAD,EAAS;AACf,UAAA,MAAI,CAAC3B,KAAL,GAAa2B,GAAb;AACD;AARH,QAFJ,eAaE,gCAAC,kBAAD;AACE,QAAA,QAAQ,EAAE,EAAEpC,MAAM,IAAIA,MAAM,CAACC,MAAnB,CADZ;AAEE,QAAA,OAAO,EAAE,KAAKoC,UAFhB;AAGE,QAAA,KAAK,EAAC;AAHR,QAbF,eAkBE,gCAAC,kBAAD;AACE,QAAA,QAAQ,EAAE,EAAErC,MAAM,IAAIA,MAAM,CAACC,MAAnB,CADZ;AAEE,QAAA,OAAO,EAAE,KAAKqC,cAFhB;AAGE,QAAA,KAAK,EAAC;AAHR,QAlBF,CARF,eAiCE;AACE,QAAA,GAAG,EAAE,aAAAF,IAAG,EAAI;AACV,UAAA,MAAI,CAACG,YAAL,GAAoBH,IAApB;AACD,SAHH;AAIE,QAAA,SAAS,EAAExB,OAAO,CAAC4B;AAJrB,SAKGzB,QAAQ,gBAEL,gCAAC,2BAAD;AACE,QAAA,UAAU,EAAEF,UADd;AAEE,QAAA,WAAW,EAAE,KAAK4B,iBAFpB;AAGE,QAAA,UAAU,EAAE,KAAKC,gBAHnB;AAIE,QAAA,QAAQ,EAAE3B,QAJZ;AAKE,QAAA,YAAY,EAAED,YALhB;AAME,QAAA,eAAe,EAAEE,eANnB;AAOE,QAAA,sBAAsB,EAAEC,sBAP1B;AAQE,QAAA,cAAc,EAAE,KAAKlB,cARvB;AASE,QAAA,YAAY,EAAEmB,YAThB;AAUE,QAAA,MAAM,EAAElB,MAVV;AAWE,QAAA,WAAW,EAAEmB,WAXf;AAYE,QAAA,0BAA0B,EAAEC;AAZ9B,QAFK,gBAkBL;AAAK,QAAA,SAAS,YAAKR,OAAO,CAAC4B,cAAb,cAA+B5B,OAAO,CAAC+B,QAAvC;AAAd,sBACE,6FADF,eAEE,2CAFF,eAGE,gCAAC,yBAAD;AACE,QAAA,KAAK,EAAC,cADR;AAEE,QAAA,YAAY,EAAE,KAAKT,gBAFrB;AAGE,QAAA,aAAa,EAAE,KAAKC,iBAHtB;AAIE,QAAA,MAAM,EAAE,gBAACC,GAAD,EAAS;AACf,UAAA,MAAI,CAAC3B,KAAL,GAAa2B,GAAb;AACD;AANH,QAHF,CAvBN,CAjCF,EAuEGrB,QAAQ,iBACP;AAAK,QAAA,SAAS,EAAEH,OAAO,CAACgC;AAAxB,SACGjC,WAAW,iBACV;AAAK,QAAA,SAAS,EAAEC,OAAO,CAACiC;AAAxB,sBACE,+IADF,eAKE;AAAK,QAAA,SAAS,EAAEjC,OAAO,CAACkC;AAAxB,QALF,CAFJ,eAUE,gCAAC,gBAAD;AACE,QAAA,SAAS,EAAElC,OAAO,CAACmC,IADrB;AAEE,QAAA,UAAU,EAAE,KAAKC,aAFnB;AAGE,QAAA,WAAW,EAAE,KAAKA;AAHpB,QAVF,CAxEJ,CADF,CADF;AA+FD;;;WArND,kCAAgCC,SAAhC,EAA2CC,SAA3C,EAAsD;AACpD;AACA,6CACKA,SADL;AAEElD,QAAAA,MAAM,EAAE,yBAAaiD,SAAS,CAACjD,MAAvB;AAFV;AAID;;;EAP4BmD,gB;;;;AAyN/B,IAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBhC,IAAAA,IAAI,EAAE;AACJiC,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAD5B,KADiB;AAIvBlC,IAAAA,GAAG,EAAE;AACHmC,MAAAA,MAAM,EAAE,mBADL;AAEHC,MAAAA,YAAY,EAAE;AAFX,KAJkB;AAQvBnC,IAAAA,SAAS,EAAE;AACTkC,MAAAA,MAAM,EAAE;AADC,KARY;AAWvBd,IAAAA,QAAQ,EAAE;AACRgB,MAAAA,UAAU,EAAE,QADJ;AAERC,MAAAA,OAAO,EAAE,MAFD;AAGRC,MAAAA,aAAa,EAAE,QAHP;AAIRC,MAAAA,cAAc,EAAE;AAJR,KAXa;AAiBvBtB,IAAAA,cAAc,EAAE;AACduB,MAAAA,SAAS,EAAE,GADG;AAEdC,MAAAA,aAAa,EAAE,MAFD;AAGdC,MAAAA,YAAY,EAAE;AAHA,KAjBO;AAsBvBlB,IAAAA,IAAI,EAAE;AACJ,iBAAW;AACTmB,QAAAA,KAAK,EAAE,SADE;AAETC,QAAAA,MAAM,EAAE;AAFC,OADP;AAKJD,MAAAA,KAAK,EAAE;AALH,KAtBiB;AA6BvBlC,IAAAA,aAAa,EAAE;AACboC,MAAAA,UAAU,EAAE;AADC,KA7BQ;AAgCvBnC,IAAAA,cAAc,EAAE;AACdoC,MAAAA,WAAW,EAAE;AADC,KAhCO;AAmCvBtC,IAAAA,OAAO,EAAE;AACPuC,MAAAA,eAAe,EAAE,SADV;AAEPC,MAAAA,YAAY,EAAE,mBAFP;AAGPC,MAAAA,mBAAmB,EAAE,KAHd;AAIPC,MAAAA,oBAAoB,EAAE,KAJf;AAKPb,MAAAA,OAAO,EAAE,MALF;AAMPE,MAAAA,cAAc,EAAE,UANT;AAOPY,MAAAA,OAAO,EAAE;AAPF,KAnCc;AA4CvB9B,IAAAA,OAAO,EAAE;AACP+B,MAAAA,QAAQ,EAAE,UADH;AAEPC,MAAAA,SAAS,EAAE,OAFJ;AAGPF,MAAAA,OAAO,EAAE;AAHF,KA5Cc;AAiDvB7B,IAAAA,cAAc,EAAE;AACdgC,MAAAA,UAAU,EAAE,SADE;AAEdnB,MAAAA,YAAY,EAAE,KAFA;AAGdQ,MAAAA,KAAK,EAAE,SAHO;AAIdY,MAAAA,QAAQ,EAAE,MAJI;AAKdC,MAAAA,UAAU,EAAE,MALE;AAMdzB,MAAAA,SAAS,EAAE,OANG;AAOdoB,MAAAA,OAAO,EAAE,UAPK;AAQdC,MAAAA,QAAQ,EAAE,UARI;AASdK,MAAAA,KAAK,EAAE,KATO;AAUdJ,MAAAA,SAAS,EAAE,MAVG;AAWdK,MAAAA,KAAK,EAAE;AAXO,KAjDO;AA8DvBnC,IAAAA,YAAY,EAAE;AACZmC,MAAAA,KAAK,EAAE,CADK;AAEZC,MAAAA,MAAM,EAAE,CAFI;AAGZC,MAAAA,UAAU,EAAE,wBAHA;AAIZC,MAAAA,WAAW,EAAE,wBAJD;AAKZC,MAAAA,SAAS,EAAE,oBALC;AAMZC,MAAAA,YAAY,EAAE,CAAC,EANH;AAOZhC,MAAAA,SAAS,EAAE,KAPC;AAQZqB,MAAAA,QAAQ,EAAE,UARE;AASZK,MAAAA,KAAK,EAAE;AATK;AA9DS,GAAL;AAAA,CAApB;;AA2EAxG,SAAS,CAAC+G,SAAV,GAAsB;AACpB3E,EAAAA,OAAO,EAAE4E,sBAAUC,MAAV,CAAiBC,UADN;AAEpB7E,EAAAA,UAAU,EAAE2E,sBAAUC,MAAV,CAAiBC,UAFT;AAGpB3E,EAAAA,QAAQ,EAAEyE,sBAAUG,MAAV,CAAiBD,UAHP;AAIpB5E,EAAAA,YAAY,EAAE0E,sBAAUG,MAAV,CAAiBD,UAJX;AAKpB1E,EAAAA,eAAe,EAAEwE,sBAAUI,IAAV,CAAeF,UALZ;AAMpBhH,EAAAA,aAAa,EAAE8G,sBAAUK,IAAV,CAAeH,UANV;AAOpBzE,EAAAA,sBAAsB,EAAEuE,sBAAUK,IAAV,CAAeH,UAPnB;AAQpB3F,EAAAA,cAAc,EAAEyF,sBAAUK,IAAV,CAAeH,UARX;AASpBxE,EAAAA,YAAY,EAAEsE,sBAAUG,MAAV,CAAiBD,UATX;AAUpB1F,EAAAA,MAAM,EAAEwF,sBAAUM,KAAV,CAAgB;AACtBC,IAAAA,UAAU,EAAEP,sBAAUQ,KADA;AAEtBC,IAAAA,QAAQ,EAAET,sBAAUQ;AAFE,GAAhB,EAGLN,UAbiB;AAcpBvE,EAAAA,WAAW,EAAEqE,sBAAUU,MAdH;AAepB9E,EAAAA,0BAA0B,EAAEoE,sBAAUI;AAflB,CAAtB;AAiBApH,SAAS,CAAC2H,YAAV,GAAyB;AACvBhF,EAAAA,WAAW,EAAE;AADU,CAAzB;;eAKe,uBAAWiC,MAAX,EAAmB5E,SAAnB,C","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n const imageType = /image.*/;\n return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // always transform shapes map into shapes array at this level\n return {\n ...prevState,\n shapes: getAllShapes(nextProps.shapes),\n }\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragEnabled: true,\n // always transform shapes map into shapes array at this level\n shapes: getAllShapes(props.shapes)\n }\n }\n\n handleFileRead = (file) => {\n const { onImageUpload } = this.props;\n const reader = new FileReader();\n\n reader.onloadend = () => onImageUpload(reader.result);\n reader.readAsDataURL(file)\n };\n\n handleUploadImage = (e) => {\n e.preventDefault();\n\n this.handleFileRead(e.target.files[0]);\n };\n\n enableDropzone = () => this.setState({ dropzoneActive: true });\n disableDropzone = () => this.setState({ dropzoneActive: false });\n\n handleOnDrop = (e) => {\n e.preventDefault();\n\n const { items, files } = e.dataTransfer;\n\n if (items && items[0].kind === 'file') {\n const file = items[0].getAsFile();\n\n if (isImage(file)) {\n this.handleFileRead(file);\n }\n } else if (isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n this.disableDropzone();\n };\n\n handleOnDragOver = (e) => {\n e.preventDefault();\n\n const { dropzoneActive } = this.state;\n\n if (!dropzoneActive) {\n this.enableDropzone();\n }\n };\n\n handleOnDragExit = (e) => {\n e.preventDefault();\n\n this.disableDropzone();\n };\n\n onUpdateShapes = newShapes => {\n const { onUpdateShapes } = this.props;\n\n this.setState(\n { shapes: newShapes },\n // always transform shapes array back into shapes map when saving changes\n () => onUpdateShapes(groupShapes(newShapes))\n );\n };\n\n handleUndo = () => {\n const { shapes } = this.state;\n\n if (shapes && shapes.length) {\n // sort by index value\n let newShapes = shapes.sort((a, b) => (parseInt(a.index) - parseInt(b.index)));\n\n newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n this.onUpdateShapes(newShapes);\n }\n };\n\n handleClearAll = () => this.onUpdateShapes([]);\n\n handleEnableDrag = () => this.setState({ dragEnabled: true });\n handleDisableDrag = () => this.setState({ dragEnabled: false });\n handleInputClick = () => this.input.click();\n\n toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n render() {\n const {\n classes,\n dimensions,\n hotspotColor,\n imageUrl,\n multipleCorrect,\n onUpdateImageDimension,\n outlineColor,\n strokeWidth,\n preserveAspectRatioEnabled\n } = this.props;\n const {\n dropzoneActive,\n dragEnabled,\n showTooltip\n } = this.state;\n const { shapes } = this.state;\n\n return (\n <div className={classes.base}>\n <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n {...dragEnabled ? {\n onDragExit: this.handleOnDragExit,\n onDragLeave: this.handleOnDragExit,\n onDragOver: this.handleOnDragOver,\n onDrop: this.handleOnDrop\n } : {}}\n >\n <div className={classes.toolbar}>\n {imageUrl && (\n <UploadControl\n classNameButton={classes.replaceButton}\n classNameSection={classes.replaceSection}\n label=\"Replace Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n )}\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleUndo}\n label=\"Undo\"\n />\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleClearAll}\n label=\"Clear all\"\n />\n </div>\n\n <div\n ref={ref => {\n this.imageSection = ref;\n }}\n className={classes.drawableHeight}>\n {imageUrl\n ? (\n <Drawable\n dimensions={dimensions}\n disableDrag={this.handleDisableDrag}\n enableDrag={this.handleEnableDrag}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n multipleCorrect={multipleCorrect}\n onUpdateImageDimension={onUpdateImageDimension}\n onUpdateShapes={this.onUpdateShapes}\n outlineColor={outlineColor}\n shapes={shapes}\n strokeWidth={strokeWidth}\n preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n />\n )\n : (\n <div className={`${classes.drawableHeight} ${classes.centered}`}>\n <label>Drag and drop or upload image from computer</label>\n <br/>\n <UploadControl\n label=\"Upload Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n </div>\n )}\n </div>\n\n {imageUrl && (\n <div className={classes.tooltip}>\n {showTooltip && (\n <div className={classes.tooltipContent}>\n <label>\n Click and drag to create a hotspot. Click the hotspot to mark correct. Click\n again to unmark.\n </label>\n <div className={classes.tooltipArrow}/>\n </div>\n )}\n <Help\n className={classes.icon}\n onMouseOut={this.toggleTooltip}\n onMouseOver={this.toggleTooltip}\n />\n </div>\n )}\n </div>\n </div>\n\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 2\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px'\n },\n boxActive: {\n border: '1px solid #0032C2'\n },\n centered: {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center'\n },\n drawableHeight: {\n minHeight: 350,\n paddingBottom: '40px',\n paddingRight: '40px',\n },\n icon: {\n '&:hover': {\n color: '#333131',\n cursor: 'help'\n },\n color: '#C1C1C1'\n },\n replaceButton: {\n marginLeft: 0,\n },\n replaceSection: {\n marginRight: 'auto'\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '12px 8px'\n },\n tooltip: {\n position: 'relative',\n textAlign: 'right',\n padding: '5px 9px'\n },\n tooltipContent: {\n background: '#333131',\n borderRadius: '4px',\n color: '#FFFFFF',\n fontSize: '14px',\n lineHeight: '18px',\n marginTop: '-70px',\n padding: '7px 16px',\n position: 'absolute',\n right: '5px',\n textAlign: 'left',\n width: '300px'\n },\n tooltipArrow: {\n width: 0,\n height: 0,\n borderLeft: '10px solid transparent',\n borderRight: '10px solid transparent',\n borderTop: '10px solid #333131',\n marginBottom: -10,\n marginTop: '2px',\n position: 'absolute',\n right: '5px'\n }\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onImageUpload: PropTypes.func.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.shape({\n rectangles: PropTypes.array,\n polygons: PropTypes.array\n }).isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool\n};\nContainer.defaultProps = {\n strokeWidth: 5\n};\n\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
|
|
1
|
+
{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","handleFileRead","target","files","setState","dropzoneActive","clipboardData","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","input","click","showTooltip","classes","dimensions","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","handleUploadImage","ref","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","lineHeight","right","width","height","borderLeft","borderRight","borderTop","marginBottom","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n const imageType = /image.*/;\n return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // always transform shapes map into shapes array at this level\n return {\n ...prevState,\n shapes: getAllShapes(nextProps.shapes),\n }\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragEnabled: true,\n // always transform shapes map into shapes array at this level\n shapes: getAllShapes(props.shapes)\n }\n }\n\n handleFileRead = (file) => {\n const { onImageUpload } = this.props;\n const reader = new FileReader();\n\n reader.onloadend = () => onImageUpload(reader.result);\n reader.readAsDataURL(file)\n };\n\n handleUploadImage = (e) => {\n e.preventDefault();\n\n this.handleFileRead(e.target.files[0]);\n };\n\n enableDropzone = () => this.setState({ dropzoneActive: true });\n disableDropzone = () => this.setState({ dropzoneActive: false });\n\n handleOnPaste = (e) => {\n const { files } = e.clipboardData;\n\n if (files && isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n };\n\n handleOnDrop = (e) => {\n e.preventDefault();\n\n const { items, files } = e.dataTransfer;\n\n if (items && items[0].kind === 'file') {\n const file = items[0].getAsFile();\n\n if (isImage(file)) {\n this.handleFileRead(file);\n }\n } else if (isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n this.disableDropzone();\n };\n\n handleOnDragOver = (e) => {\n e.preventDefault();\n\n const { dropzoneActive } = this.state;\n\n if (!dropzoneActive) {\n this.enableDropzone();\n }\n };\n\n handleOnDragExit = (e) => {\n e.preventDefault();\n\n this.disableDropzone();\n };\n\n onUpdateShapes = newShapes => {\n const { onUpdateShapes } = this.props;\n\n this.setState(\n { shapes: newShapes },\n // always transform shapes array back into shapes map when saving changes\n () => onUpdateShapes(groupShapes(newShapes))\n );\n };\n\n handleUndo = () => {\n const { shapes } = this.state;\n\n if (shapes && shapes.length) {\n // sort by index value\n let newShapes = shapes.sort((a, b) => (parseInt(a.index) - parseInt(b.index)));\n\n newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n this.onUpdateShapes(newShapes);\n }\n };\n\n handleClearAll = () => this.onUpdateShapes([]);\n\n handleEnableDrag = () => this.setState({ dragEnabled: true });\n handleDisableDrag = () => this.setState({ dragEnabled: false });\n handleInputClick = () => this.input.click();\n\n toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n render() {\n const {\n classes,\n dimensions,\n hotspotColor,\n imageUrl,\n multipleCorrect,\n onUpdateImageDimension,\n outlineColor,\n strokeWidth,\n preserveAspectRatioEnabled\n } = this.props;\n const {\n dropzoneActive,\n dragEnabled,\n showTooltip\n } = this.state;\n const { shapes } = this.state;\n\n return (\n <div className={classes.base}>\n <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n {...dragEnabled ? {\n onDragExit: this.handleOnDragExit,\n onDragLeave: this.handleOnDragExit,\n onDragOver: this.handleOnDragOver,\n onDrop: this.handleOnDrop,\n onPaste: this.handleOnPaste\n } : {}}\n >\n <div className={classes.toolbar}>\n {imageUrl && (\n <UploadControl\n classNameButton={classes.replaceButton}\n classNameSection={classes.replaceSection}\n label=\"Replace Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n )}\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleUndo}\n label=\"Undo\"\n />\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleClearAll}\n label=\"Clear all\"\n />\n </div>\n\n <div\n ref={ref => {\n this.imageSection = ref;\n }}\n className={classes.drawableHeight}>\n {imageUrl\n ? (\n <Drawable\n dimensions={dimensions}\n disableDrag={this.handleDisableDrag}\n enableDrag={this.handleEnableDrag}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n multipleCorrect={multipleCorrect}\n onUpdateImageDimension={onUpdateImageDimension}\n onUpdateShapes={this.onUpdateShapes}\n outlineColor={outlineColor}\n shapes={shapes}\n strokeWidth={strokeWidth}\n preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n />\n )\n : (\n <div className={`${classes.drawableHeight} ${classes.centered}`}>\n <label>Drag and drop or upload image from computer</label>\n <br/>\n <UploadControl\n label=\"Upload Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n </div>\n )}\n </div>\n\n {imageUrl && (\n <div className={classes.tooltip}>\n {showTooltip && (\n <div className={classes.tooltipContent}>\n <label>\n Click and drag to create a hotspot. Click the hotspot to mark correct. Click\n again to unmark.\n </label>\n <div className={classes.tooltipArrow}/>\n </div>\n )}\n <Help\n className={classes.icon}\n onMouseOut={this.toggleTooltip}\n onMouseOver={this.toggleTooltip}\n />\n </div>\n )}\n </div>\n </div>\n\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 2\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px'\n },\n boxActive: {\n border: '1px solid #0032C2'\n },\n centered: {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center'\n },\n drawableHeight: {\n minHeight: 350,\n paddingBottom: '40px',\n paddingRight: '40px',\n },\n icon: {\n '&:hover': {\n color: '#333131',\n cursor: 'help'\n },\n color: '#C1C1C1'\n },\n replaceButton: {\n marginLeft: 0,\n },\n replaceSection: {\n marginRight: 'auto'\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '12px 8px'\n },\n tooltip: {\n position: 'relative',\n textAlign: 'right',\n padding: '5px 9px'\n },\n tooltipContent: {\n background: '#333131',\n borderRadius: '4px',\n color: '#FFFFFF',\n fontSize: '14px',\n lineHeight: '18px',\n marginTop: '-70px',\n padding: '7px 16px',\n position: 'absolute',\n right: '5px',\n textAlign: 'left',\n width: '300px'\n },\n tooltipArrow: {\n width: 0,\n height: 0,\n borderLeft: '10px solid transparent',\n borderRight: '10px solid transparent',\n borderTop: '10px solid #333131',\n marginBottom: -10,\n marginTop: '2px',\n position: 'absolute',\n right: '5px'\n }\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onImageUpload: PropTypes.func.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.shape({\n rectangles: PropTypes.array,\n polygons: PropTypes.array\n }).isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool\n};\nContainer.defaultProps = {\n strokeWidth: 5\n};\n\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
|
|
@@ -41,13 +41,13 @@ var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
|
|
|
41
41
|
|
|
42
42
|
var _utils = require("./utils");
|
|
43
43
|
|
|
44
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
44
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
45
45
|
|
|
46
46
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
47
47
|
|
|
48
48
|
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); }; }
|
|
49
49
|
|
|
50
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
50
|
+
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; } }
|
|
51
51
|
|
|
52
52
|
var IMAGE_MAX_WIDTH = 800;
|
|
53
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","bool","array","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,eAAe,GAAG,GAAxB;;IAEaC,Q;;;;;AAcX,oBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,0GAeC,UAACC,CAAD,EAAO;AACzB,UAAIA,CAAC,CAACC,MAAF,KAAaD,CAAC,CAACE,aAAnB,EAAkC;AAAA,0BACG,MAAKH,KADR;AAAA,YACxBI,cADwB,eACxBA,cADwB;AAAA,YACRC,MADQ,eACRA,MADQ,EAEhC;;AACA,YAAMC,SAAS,GAAGD,MAAM,CAACE,KAAP,EAAlB;AACA,YAAMC,KAAK,GAAG,qBAAIF,SAAS,CAACG,GAAV,CAAc,UAAAC,CAAC;AAAA,iBAAIC,QAAQ,CAACD,CAAC,CAACE,EAAH,CAAZ;AAAA,SAAf,EAAmCC,MAAnC,CAA0C,UAAAD,EAAE;AAAA,iBAAI,CAACE,KAAK,CAACF,EAAD,CAAV;AAAA,SAA5C,CAAJ,KAAoE,CAAlF;AAEAN,QAAAA,SAAS,CAACS,IAAV,CAAe;AACbH,UAAAA,EAAE,YAAKJ,KAAK,GAAG,CAAb,CADW;AAEbQ,UAAAA,MAAM,EAAE,CAFK;AAGbC,UAAAA,KAAK,EAAE,CAHM;AAIbC,UAAAA,CAAC,EAAEjB,CAAC,CAACkB,GAAF,CAAMC,MAJI;AAKbC,UAAAA,CAAC,EAAEpB,CAAC,CAACkB,GAAF,CAAMG,MALI;AAMbC,UAAAA,KAAK,EAAE,YANM;AAObC,UAAAA,KAAK,EAAEnB,MAAM,CAACoB;AAPD,SAAf;;AAUA,cAAKC,QAAL,CAAc;AAAEC,UAAAA,SAAS,EAAE,IAAb;AAAmBC,UAAAA,gBAAgB,YAAKpB,KAAK,GAAG,CAAb;AAAnC,SAAd;;AACAJ,QAAAA,cAAc,CAACE,SAAD,CAAd;AACD;AACF,KAnCkB;AAAA,wGAqCD,YAAM;AACtB;AADsB,wBAEa,MAAKuB,KAFlB;AAAA,UAEdF,SAFc,eAEdA,SAFc;AAAA,UAEHG,WAFG,eAEHA,WAFG;AAAA,UAGd1B,cAHc,GAGK,MAAKJ,KAHV,CAGdI,cAHc,EAKtB;;AACA,UAAIuB,SAAJ,EAAe;AACb,cAAKD,QAAL,CAAc;AAAEC,UAAAA,SAAS,EAAE,CAACA,SAAd;AAAyBG,UAAAA,WAAW,EAAE,KAAtC;AAA6CF,UAAAA,gBAAgB,EAAEG;AAA/D,SAAd;;AAEA,YAAID,WAAJ,EAAiB;AACf1B,UAAAA,cAAc,CAAC0B,WAAD,CAAd;AACD;AACF;AACF,KAlDkB;AAAA,wGAoDD,UAAC7B,CAAD,EAAO;AACvB;AADuB,yBAEiB,MAAK4B,KAFtB;AAAA,UAEfF,SAFe,gBAEfA,SAFe;AAAA,UAEJC,gBAFI,gBAEJA,gBAFI;AAAA,UAGfvB,MAHe,GAGJ,MAAKL,KAHD,CAGfK,MAHe;;AAKvB,UAAIsB,SAAS,IAAIC,gBAAjB,EAAmC;AACjC,YAAMI,MAAM,GAAG/B,CAAC,CAACkB,GAAF,CAAMC,MAArB;AACA,YAAMa,MAAM,GAAGhC,CAAC,CAACkB,GAAF,CAAMG,MAArB;AAEA,YAAMY,cAAc,GAAG7B,MAAM,CAAC8B,SAAP,CAAiB,UAAAC,KAAK;AAAA,iBAAIA,KAAK,CAACxB,EAAN,KAAagB,gBAAjB;AAAA,SAAtB,CAAvB;AACA,YAAMS,SAAS,GAAGhC,MAAM,CAAC6B,cAAD,CAAxB;;AAEA,YAAIG,SAAJ,EAAe;AACb,cAAMC,QAAQ,GAAGN,MAAM,GAAGK,SAAS,CAACnB,CAApC;AACA,cAAMqB,SAAS,GAAGN,MAAM,GAAGI,SAAS,CAAChB,CAArC;AAEA,cAAMmB,aAAa,GAAGnC,MAAM,CAACE,KAAP,EAAtB;AAEAiC,UAAAA,aAAa,CAACN,cAAD,CAAb,mCACKM,aAAa,CAACN,cAAD,CADlB;AAEElB,YAAAA,MAAM,EAAEuB,SAFV;AAGEtB,YAAAA,KAAK,EAAEqB,QAHT;AAIEpB,YAAAA,CAAC,EAAEmB,SAAS,CAACnB,CAJf;AAKEG,YAAAA,CAAC,EAAEgB,SAAS,CAAChB;AALf,aANa,CAcb;;AACA,gBAAKK,QAAL,CAAc;AAAEI,YAAAA,WAAW,EAAEU;AAAf,WAAd;AACD;AACF;AACF,KAlFkB;AAAA,wGAoFD,UAAC5B,EAAD,EAAK6B,YAAL,EAAsB;AAAA,yBACH,MAAKzC,KADF;AAAA,UAC9BK,MAD8B,gBAC9BA,MAD8B;AAAA,UACtBD,cADsB,gBACtBA,cADsB;AAEtC,UAAME,SAAS,GAAGD,MAAM,CAACI,GAAP,CAAW,UAAA2B,KAAK,EAAI;AACpC,YAAIA,KAAK,CAACxB,EAAN,KAAaA,EAAjB,EAAqB;AACnB,iDACKwB,KADL,GAEKK,YAFL;AAID;;AACD,eAAOL,KAAP;AACD,OARiB,CAAlB;AAUAhC,MAAAA,cAAc,CAAC,2BAAUE,SAAV,CAAD,CAAd;AACD,KAjGkB;AAAA,6GAmGI,UAAC8B,KAAD,EAAW;AAAA,UACxBxB,EADwB,GACjBwB,KADiB,CACxBxB,EADwB;AAAA,yBAEoB,MAAKZ,KAFzB;AAAA,UAExB0C,eAFwB,gBAExBA,eAFwB;AAAA,UAEPrC,MAFO,gBAEPA,MAFO;AAAA,UAECD,cAFD,gBAECA,cAFD;AAIhC,UAAIE,SAAS,GAAG,EAAhB;;AAEA,UAAIoC,eAAJ,EAAqB;AACnBpC,QAAAA,SAAS,GAAGD,MAAM,CAACI,GAAP,CAAW,UAAA2B,KAAK,EAAI;AAC9B,cAAIA,KAAK,CAACxB,EAAN,KAAaA,EAAjB,EAAqB;AACnBwB,YAAAA,KAAK,CAACO,OAAN,GAAgB,CAACP,KAAK,CAACO,OAAvB;AACD;;AACD,iBAAOP,KAAP;AACD,SALW,CAAZ;AAMD,OAPD,MAOO;AACL9B,QAAAA,SAAS,GAAGD,MAAM,CAACI,GAAP,CAAW,UAAA2B,KAAK,EAAI;AAC9BA,UAAAA,KAAK,CAACO,OAAN,GAAgBP,KAAK,CAACxB,EAAN,KAAaA,EAA7B;AACA,iBAAOwB,KAAP;AACD,SAHW,CAAZ;AAID;;AAEDhC,MAAAA,cAAc,CAAC,2BAAUE,SAAV,CAAD,CAAd;AACD,KAxHkB;AAAA,0GA4HC,gBAAgB;AAAA,UAAbJ,MAAa,QAAbA,MAAa;AAAA,UAC1B0C,sBAD0B,GACC,MAAK5C,KADN,CAC1B4C,sBAD0B;AAElC,UAAMC,YAAY,GAAG,MAAKC,MAA1B;AACA,UAAMC,YAAY,GAAGC,gBAAgB,CAAC9C,MAAD,CAArC;AACA,UAAMqC,SAAS,GAAGU,UAAU,CAACF,YAAY,CAAC/B,MAAd,CAA5B;AACA,UAAMsB,QAAQ,GAAGW,UAAU,CAACF,YAAY,CAAC9B,KAAd,CAA3B;AACA,UAAMiC,WAAW,GAAGZ,QAAQ,GAAGxC,eAA/B;AAEA,UAAMqD,UAAU,GAAGb,QAAQ,GAAGxC,eAAX,GAA6B;AAC9CkB,QAAAA,MAAM,EAAEuB,SAAS,GAAGW,WAD0B;AAE9CjC,QAAAA,KAAK,EAAEnB;AAFuC,OAA7B,GAGf;AACFkB,QAAAA,MAAM,EAAEuB,SADN;AAEFtB,QAAAA,KAAK,EAAEqB;AAFL,OAHJ;;AAQA,YAAKZ,QAAL,CACE;AAAEyB,QAAAA,UAAU,EAAVA;AAAF,OADF,EAEE;AAAA,eAAMP,sBAAsB,CAACO,UAAD,CAA5B;AAAA,OAFF;;AAIAN,MAAAA,YAAY,CAACO,gBAAb,CAA8B,WAA9B,EAA2C,MAAKC,gBAAhD,EAAkE,KAAlE;AACD,KAjJkB;AAAA,yGAmJA,YAAM;AACvBC,MAAAA,MAAM,CAACF,gBAAP,CAAwB,WAAxB,EAAqC,MAAKG,aAA1C,EAAyD,KAAzD;AACAD,MAAAA,MAAM,CAACF,gBAAP,CAAwB,SAAxB,EAAmC,MAAKI,YAAxC,EAAsD,KAAtD;AACD,KAtJkB;AAAA,sGAuKH,UAACvD,CAAD,EAAO;AACrB,UAAMwD,MAAM,GAAGxD,CAAC,CAACC,MAAF,CAASwD,qBAAT,EAAf;AACA,UAAMC,GAAG,GAAG,MAAKC,KAAjB;AAFqB,yBAQjB,MAAK5D,KARY;AAAA,UAInB6D,WAJmB,gBAInBA,WAJmB;AAAA,UAKnBC,0BALmB,gBAKnBA,0BALmB;AAAA,UAMnBX,UANmB,gBAMnBA,UANmB;AAAA,UAOnB9C,MAPmB,gBAOnBA,MAPmB,EAUrB;;AAVqB,kCAWK,kCACxB8C,UADwB,EAExB;AACElC,QAAAA,KAAK,EAAEhB,CAAC,CAAC8D,OAAF,GAAYN,MAAM,CAACO,IAD5B;AAEEhD,QAAAA,MAAM,EAAEf,CAAC,CAACgE,OAAF,GAAYR,MAAM,CAACS;AAF7B,OAFwB,EAMxBJ,0BANwB,CAXL;AAAA,UAWb7C,KAXa,yBAWbA,KAXa;AAAA,UAWND,MAXM,yBAWNA,MAXM;;AAoBrB,UAAMmD,WAAW,GAAG,MAAKC,kBAAL,CAAwBnD,KAAxB,EAA+BD,MAA/B,CAApB;;AACA,UAAMqD,eAAe,GAAGpD,KAAK,GAAG,GAAR,IAAeD,MAAM,GAAG,GAAhD;;AAEA,UAAImD,WAAW,IAAIE,eAAnB,EAAoC;AAClCV,QAAAA,GAAG,CAACW,KAAJ,CAAUrD,KAAV,aAAqBA,KAArB;AACA0C,QAAAA,GAAG,CAACW,KAAJ,CAAUtD,MAAV,aAAsBA,MAAtB;;AAEA,cAAKU,QAAL,CAAc;AACZ6C,UAAAA,QAAQ,EAAE,IADE;AAEZpB,UAAAA,UAAU,EAAE;AAAEnC,YAAAA,MAAM,EAAEA,MAAV;AAAkBC,YAAAA,KAAK,EAAEA;AAAzB,WAFA;AAGZa,UAAAA,WAAW,EAAE,6BAAiBqB,UAAjB,EAA6B;AAAElC,YAAAA,KAAK,EAALA,KAAF;AAASD,YAAAA,MAAM,EAANA;AAAT,WAA7B,EAAgDX,MAAhD;AAHD,SAAd;AAKD;;AAEDwD,MAAAA,WAAW;AACZ,KA1MkB;AAAA,qGA4MJ,YAAM;AAAA,yBAC4C,MAAK7D,KADjD;AAAA,UACXwE,UADW,gBACXA,UADW;AAAA,UACC5B,sBADD,gBACCA,sBADD;AAAA,UACyBxC,cADzB,gBACyBA,cADzB;AAAA,yBAEiB,MAAKyB,KAFtB;AAAA,UAEXsB,UAFW,gBAEXA,UAFW;AAAA,UAECrB,WAFD,gBAECA,WAFD;AAInB0C,MAAAA,UAAU;;AAEV,UAAI1C,WAAJ,EAAiB;AACf1B,QAAAA,cAAc,CAAC,2BAAU0B,WAAV,CAAD,CAAd;AACD;;AAEDc,MAAAA,sBAAsB,CAACO,UAAD,CAAtB;AAEAG,MAAAA,MAAM,CAACmB,mBAAP,CAA2B,WAA3B,EAAwC,MAAKlB,aAA7C,EAA4D,KAA5D;AACAD,MAAAA,MAAM,CAACmB,mBAAP,CAA2B,SAA3B,EAAsC,MAAKjB,YAA3C,EAAyD,KAAzD;;AAEA,YAAK9B,QAAL,CAAc;AAAE6C,QAAAA,QAAQ,EAAE,KAAZ;AAAmBzC,QAAAA,WAAW,EAAE;AAAhC,OAAd;AACD,KA5NkB;AAGjB,UAAKD,KAAL,GAAa;AACXF,MAAAA,SAAS,EAAE,KADA;AAEXG,MAAAA,WAAW,EAAE,KAFF;AAGXyC,MAAAA,QAAQ,EAAE,KAHC;AAIXpB,MAAAA,UAAU,EAAE;AACVnC,QAAAA,MAAM,EAAE,CADE;AAEVC,QAAAA,KAAK,EAAE;AAFG;AAJD,KAAb;AAHiB;AAYlB,G,CAED;;;;;WA0IA,4BAAmBC,CAAnB,EAAsBG,CAAtB,EAAyB;AAAA,UACfhB,MADe,GACJ,KAAKwB,KADD,CACfxB,MADe;AAEvB,UAAIqE,QAAQ,GAAG,IAAf,CAFuB,CAIvB;;AACArE,MAAAA,MAAM,IAAIA,MAAM,CAACsE,OAAP,CAAe,UAAAvC,KAAK,EAAI;AAChC,YAAMwC,KAAK,GAAGxC,KAAK,CAAClB,CAAN,GAAUkB,KAAK,CAACnB,KAAhB,GAAwB,CAAtC;AACA,YAAM4D,MAAM,GAAGzC,KAAK,CAACf,CAAN,GAAUe,KAAK,CAACpB,MAAhB,GAAyB,CAAxC;;AACA,YAAIE,CAAC,IAAI0D,KAAL,IAAcvD,CAAC,IAAIwD,MAAvB,EAA+B;AAC7BH,UAAAA,QAAQ,GAAG,KAAX;AACD;AACF,OANS,CAAV;AAOA,aAAOA,QAAP;AACD;;;WAwDD;AAEA,sBAAS;AAAA;;AAAA,yBASH,KAAK1E,KATF;AAAA,UAEL8E,OAFK,gBAELA,OAFK;AAAA,UAGLC,QAHK,gBAGLA,QAHK;AAAA,+CAIL5B,UAJK;AAAA,UAISnC,MAJT,yBAISA,MAJT;AAAA,UAIiBC,KAJjB,yBAIiBA,KAJjB;AAAA,UAKL+D,YALK,gBAKLA,YALK;AAAA,UAMLC,YANK,gBAMLA,YANK;AAAA,UAOL5E,MAPK,gBAOLA,MAPK;AAAA,UAQL6E,WARK,gBAQLA,WARK;AAAA,yBAcH,KAAKrD,KAdF;AAAA,UAWLC,WAXK,gBAWLA,WAXK;AAAA,UAYLH,SAZK,gBAYLA,SAZK;AAAA,+CAaLwB,UAbK;AAAA,UAaiBgC,eAbjB,yBAaSnE,MAbT;AAAA,UAayCoE,cAbzC,yBAakCnE,KAblC;AAeP,UAAMoE,WAAW,GAAGvD,WAAW,IAAIzB,MAAnC;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEyE,OAAO,CAACQ;AAAxB,SACGP,QAAQ,iBACP;AAAK,QAAA,SAAS,EAAED,OAAO,CAACS;AAAxB,sBACE;AACE,QAAA,SAAS,EAAET,OAAO,CAAClB,KADrB;AAEE,QAAA,MAAM,EAAE,KAAK4B,iBAFf;AAGE,QAAA,GAAG,EAAE,aAAAC,KAAG,EAAI;AACV,UAAA,MAAI,CAAC7B,KAAL,GAAa6B,KAAb;AACD,SALH;AAME,QAAA,GAAG,EAAEV;AANP,SAOM/D,MAAM,IAAIC,KAAV,GAAkB;AAAEqD,QAAAA,KAAK,EAAE;AAAEtD,UAAAA,MAAM,EAANA,MAAF;AAAUC,UAAAA,KAAK,EAALA;AAAV;AAAT,OAAlB,GAAiD,EAPvD,EADF,eAUE;AAAK,QAAA,GAAG,EAAE,aAAAwE,KAAG,EAAI;AACf,UAAA,MAAI,CAAC3C,MAAL,GAAc2C,KAAd;AACD,SAFD;AAEG,QAAA,SAAS,EAAEX,OAAO,CAAChC;AAFtB,QAVF,CAFJ,eAkBE,gCAAC,iBAAD;AACE,QAAA,SAAS,EAAEgC,OAAO,CAACY,KADrB;AAEE,QAAA,MAAM,EAAEP,eAAe,IAAInE,MAF7B;AAGE,QAAA,KAAK,EAAEoE,cAAc,IAAInE,KAH3B;AAIE,QAAA,WAAW,EAAE,KAAK0E,iBAJpB;AAKE,QAAA,SAAS,EAAE,KAAKC,eALlB;AAME,QAAA,WAAW,EAAE,KAAKC;AANpB,sBAQE,gCAAC,iBAAD,QACGR,WAAW,CAAC5E,GAAZ,CAAgB,UAAC2B,KAAD,EAAQZ,KAAR,EAAkB;AACjC,YAAMsE,GAAG,GAAG1D,KAAK,CAACb,KAAN,KAAgB,UAAhB,GAA6BwE,0BAA7B,GAAuCC,4BAAnD;AAEA,4BACE,gCAAC,GAAD;AACE,UAAA,OAAO,EAAE5D,KAAK,CAACO,OADjB;AAEE,UAAA,SAAS,EAAEhB,SAFb;AAGE,UAAA,MAAM,EAAES,KAAK,CAACpB,MAHhB;AAIE,UAAA,YAAY,EAAEgE,YAJhB;AAKE,UAAA,EAAE,EAAE5C,KAAK,CAACxB,EALZ;AAME,UAAA,GAAG,EAAEY,KANP;AAOE,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACyE,oBAAL,CAA0B7D,KAA1B,CAAN;AAAA,WAPX;AAQE,UAAA,SAAS,EAAE,MAAI,CAAC8D,eARlB;AASE,UAAA,YAAY,EAAEjB,YAThB;AAUE,UAAA,KAAK,EAAE7C,KAAK,CAACnB,KAVf;AAWE,UAAA,CAAC,EAAEmB,KAAK,CAAClB,CAXX;AAYE,UAAA,CAAC,EAAEkB,KAAK,CAACf,CAZX;AAaE,UAAA,MAAM,EAAEe,KAAK,CAAC+D,MAbhB;AAcE,UAAA,WAAW,EAAEjB;AAdf,UADF;AAkBD,OArBA,CADH,CARF,CAlBF,CADF;AAsDD;;;WAnTD,kCAAgCkB,SAAhC,EAA2CC,SAA3C,EAAsD;AACpD,UAAIlD,UAAU,GAAGiD,SAAS,CAACjD,UAA3B;;AAEA,UAAIkD,SAAS,IAAIA,SAAS,CAAC9B,QAA3B,EAAqC;AACnCpB,QAAAA,UAAU,GAAGkD,SAAS,CAAClD,UAAvB;AACD;;AAED,6CACKkD,SADL;AAEElD,QAAAA,UAAU,EAAEA;AAFd;AAID;;;EAZ2BmD,kBAAMC,S;;;;AAuTpC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBlB,IAAAA,IAAI,EAAE;AACJmB,MAAAA,QAAQ,EAAE;AADN,KADc;AAIpB7C,IAAAA,KAAK,EAAE;AACL8C,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KAJa;AASpBrB,IAAAA,cAAc,EAAE;AACdkB,MAAAA,QAAQ,EAAE,UADI;AAEdxF,MAAAA,KAAK,EAAE;AAFO,KATI;AAapB6B,IAAAA,MAAM,EAAE;AACN+D,MAAAA,YAAY,EAAE,mBADR;AAENC,MAAAA,WAAW,EAAE,mBAFP;AAGNjC,MAAAA,MAAM,EAAE,OAHF;AAINkC,MAAAA,MAAM,EAAE,WAJF;AAKN/F,MAAAA,MAAM,EAAE,MALF;AAMNyF,MAAAA,QAAQ,EAAE,UANJ;AAON7B,MAAAA,KAAK,EAAE,OAPD;AAQN3D,MAAAA,KAAK,EAAE;AARD,KAbY;AAuBpByE,IAAAA,KAAK,EAAE;AACL1B,MAAAA,IAAI,EAAE,CADD;AAELE,MAAAA,GAAG,EAAE,CAFA;AAGLuC,MAAAA,QAAQ,EAAE;AAHL;AAvBa,GAAP;AAAA,CAAf;;AA8BA1G,QAAQ,CAACiH,SAAT,GAAqB;AACnBlC,EAAAA,OAAO,EAAEmC,sBAAUC,MAAV,CAAiBC,UADP;AAEnBtD,EAAAA,WAAW,EAAEoD,sBAAUG,IAAV,CAAeD,UAFT;AAGnBhE,EAAAA,UAAU,EAAE8D,sBAAUC,MAAV,CAAiBC,UAHV;AAInB3C,EAAAA,UAAU,EAAEyC,sBAAUG,IAAV,CAAeD,UAJR;AAKnBpC,EAAAA,QAAQ,EAAEkC,sBAAUI,MAAV,CAAiBF,UALR;AAMnBnC,EAAAA,YAAY,EAAEiC,sBAAUI,MAAV,CAAiBF,UANZ;AAOnBzE,EAAAA,eAAe,EAAEuE,sBAAUK,IAAV,CAAeH,UAPb;AAQnBvE,EAAAA,sBAAsB,EAAEqE,sBAAUG,IAAV,CAAeD,UARpB;AASnB/G,EAAAA,cAAc,EAAE6G,sBAAUG,IAAV,CAAeD,UATZ;AAUnBlC,EAAAA,YAAY,EAAEgC,sBAAUI,MAAV,CAAiBF,UAVZ;AAWnB9G,EAAAA,MAAM,EAAE4G,sBAAUM,KAAV,CAAgBJ,UAXL;AAYnBjC,EAAAA,WAAW,EAAE+B,sBAAUO,MAZJ;AAanB1D,EAAAA,0BAA0B,EAAEmD,sBAAUK;AAbnB,CAArB;;eAgBe,uBAAWd,MAAX,EAAmBzG,QAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport max from 'lodash/max';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n let dimensions = nextProps.dimensions;\n\n if (prevState && prevState.resizing) {\n dimensions = prevState.dimensions;\n }\n\n return {\n ...prevState,\n dimensions: dimensions,\n }\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n isDrawing: false,\n stateShapes: false,\n resizing: false,\n dimensions: {\n height: 0,\n width: 0,\n },\n }\n }\n\n /// start of handling HotSpots section\n handleOnMouseDown = (e) => {\n if (e.target === e.currentTarget) {\n const { onUpdateShapes, shapes } = this.props;\n // Add a new rectangle at the mouse position with 0 width and height\n const newShapes = shapes.slice();\n const value = max(newShapes.map(c => parseInt(c.id)).filter(id => !isNaN(id))) || 0;\n\n newShapes.push({\n id: `${value + 1}`,\n height: 0,\n width: 0,\n x: e.evt.layerX,\n y: e.evt.layerY,\n group: 'rectangles',\n index: shapes.length\n });\n\n this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n onUpdateShapes(newShapes);\n }\n };\n\n handleOnMouseUp = () => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, stateShapes } = this.state;\n const { onUpdateShapes } = this.props;\n\n // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n if (isDrawing) {\n this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n if (stateShapes) {\n onUpdateShapes(stateShapes);\n }\n }\n };\n\n handleMouseMove = (e) => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, isDrawingShapeId } = this.state;\n const { shapes } = this.props;\n\n if (isDrawing && isDrawingShapeId) {\n const mouseX = e.evt.layerX;\n const mouseY = e.evt.layerY;\n\n const currShapeIndex = shapes.findIndex(shape => shape.id === isDrawingShapeId);\n const currShape = shapes[currShapeIndex];\n\n if (currShape) {\n const newWidth = mouseX - currShape.x;\n const newHeight = mouseY - currShape.y;\n\n const newShapesList = shapes.slice();\n\n newShapesList[currShapeIndex] = {\n ...newShapesList[currShapeIndex],\n height: newHeight,\n width: newWidth,\n x: currShape.x,\n y: currShape.y\n };\n\n // On mouse move don't trigger any event. Put the shapes on this state instead.\n this.setState({ stateShapes: newShapesList });\n }\n }\n };\n\n handleOnDragEnd = (id, updatedProps) => {\n const { shapes, onUpdateShapes } = this.props;\n const newShapes = shapes.map(shape => {\n if (shape.id === id) {\n return {\n ...shape,\n ...updatedProps\n }\n }\n return shape;\n });\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n\n handleOnSetAsCorrect = (shape) => {\n const { id } = shape;\n const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n let newShapes = [];\n\n if (multipleCorrect) {\n newShapes = shapes.map(shape => {\n if (shape.id === id) {\n shape.correct = !shape.correct;\n }\n return shape;\n })\n } else {\n newShapes = shapes.map(shape => {\n shape.correct = shape.id === id;\n return shape;\n })\n }\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n /// end of handling HotSpots section\n\n /// start of handling Image section\n handleOnImageLoad = ({ target }) => {\n const { onUpdateImageDimension } = this.props;\n const resizeHandle = this.resize;\n const elementStyle = getComputedStyle(target);\n const newHeight = parseFloat(elementStyle.height);\n const newWidth = parseFloat(elementStyle.width);\n const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n const dimensions = newWidth > IMAGE_MAX_WIDTH ? {\n height: newHeight / aspectWidth,\n width: IMAGE_MAX_WIDTH\n } : {\n height: newHeight,\n width: newWidth\n };\n\n this.setState(\n { dimensions },\n () => onUpdateImageDimension(dimensions));\n\n resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n };\n\n initialiseResize = () => {\n window.addEventListener('mousemove', this.startResizing, false);\n window.addEventListener('mouseup', this.stopResizing, false);\n };\n\n checkIfResizeValid(x, y) {\n const { shapes } = this.state;\n let drawable = true;\n\n // Do not allow resizing over the hotspots\n shapes && shapes.forEach(shape => {\n const right = shape.x + shape.width + 5;\n const bottom = shape.y + shape.height + 5;\n if (x <= right || y <= bottom) {\n drawable = false\n }\n });\n return drawable;\n }\n\n startResizing = (e) => {\n const bounds = e.target.getBoundingClientRect();\n const box = this.image;\n const {\n disableDrag,\n preserveAspectRatioEnabled,\n dimensions,\n shapes\n } = this.props;\n\n // todo previously we had state.dimensions, is it needed?\n const { width, height } = updateImageDimensions(\n dimensions,\n {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top\n },\n preserveAspectRatioEnabled\n );\n\n const resizeValid = this.checkIfResizeValid(width, height);\n const hasMinimumWidth = width > 150 && height > 150;\n\n if (resizeValid && hasMinimumWidth) {\n box.style.width = `${width}px`;\n box.style.height = `${height}px`;\n\n this.setState({\n resizing: true,\n dimensions: { height: height, width: width },\n stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes)\n });\n }\n\n disableDrag();\n };\n\n stopResizing = () => {\n const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n const { dimensions, stateShapes } = this.state;\n\n enableDrag();\n\n if (stateShapes) {\n onUpdateShapes(cloneDeep(stateShapes));\n }\n\n onUpdateImageDimension(dimensions);\n\n window.removeEventListener('mousemove', this.startResizing, false);\n window.removeEventListener('mouseup', this.stopResizing, false);\n\n this.setState({ resizing: false, stateShapes: false });\n };\n /// end of handling Image section\n\n render() {\n const {\n classes,\n imageUrl,\n dimensions: { height, width },\n hotspotColor,\n outlineColor,\n shapes,\n strokeWidth\n } = this.props;\n const {\n stateShapes,\n isDrawing,\n dimensions: { height: heightFromState, width: widthFromState }\n } = this.state;\n const shapesToUse = stateShapes || shapes;\n\n return (\n <div className={classes.base}>\n {imageUrl && (\n <div className={classes.imageContainer}>\n <img\n className={classes.image}\n onLoad={this.handleOnImageLoad}\n ref={ref => {\n this.image = ref;\n }}\n src={imageUrl}\n {...height && width ? { style: { height, width } } : {}}\n />\n <div ref={ref => {\n this.resize = ref;\n }} className={classes.resize}/>\n </div>\n )}\n\n <Stage\n className={classes.stage}\n height={heightFromState || height}\n width={widthFromState || width}\n onMouseDown={this.handleOnMouseDown }\n onMouseUp={this.handleOnMouseUp }\n onMouseMove={this.handleMouseMove }\n >\n <Layer>\n {shapesToUse.map((shape, index) => {\n const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n\n return (\n <Tag\n correct={shape.correct}\n isDrawing={isDrawing}\n height={shape.height}\n hotspotColor={hotspotColor}\n id={shape.id}\n key={index}\n onClick={() => this.handleOnSetAsCorrect(shape)}\n onDragEnd={this.handleOnDragEnd}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n points={shape.points}\n strokeWidth={strokeWidth}\n />\n );\n })}\n </Layer>\n </Stage>\n </div>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n position: 'relative'\n },\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content'\n },\n resize: {\n borderBottom: '1px solid #727272',\n borderRight: '1px solid #727272',\n bottom: '-10px',\n cursor: 'se-resize',\n height: '10px',\n position: 'absolute',\n right: '-10px',\n width: '10px'\n },\n stage: {\n left: 0,\n top: 0,\n position: 'absolute'\n }\n});\n\nDrawable.propTypes = {\n classes: PropTypes.object.isRequired,\n disableDrag: PropTypes.func.isRequired,\n dimensions: PropTypes.object.isRequired,\n enableDrag: PropTypes.func.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.array.isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}
|
|
1
|
+
{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport max from 'lodash/max';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n let dimensions = nextProps.dimensions;\n\n if (prevState && prevState.resizing) {\n dimensions = prevState.dimensions;\n }\n\n return {\n ...prevState,\n dimensions: dimensions,\n }\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n isDrawing: false,\n stateShapes: false,\n resizing: false,\n dimensions: {\n height: 0,\n width: 0,\n },\n }\n }\n\n /// start of handling HotSpots section\n handleOnMouseDown = (e) => {\n if (e.target === e.currentTarget) {\n const { onUpdateShapes, shapes } = this.props;\n // Add a new rectangle at the mouse position with 0 width and height\n const newShapes = shapes.slice();\n const value = max(newShapes.map(c => parseInt(c.id)).filter(id => !isNaN(id))) || 0;\n\n newShapes.push({\n id: `${value + 1}`,\n height: 0,\n width: 0,\n x: e.evt.layerX,\n y: e.evt.layerY,\n group: 'rectangles',\n index: shapes.length\n });\n\n this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n onUpdateShapes(newShapes);\n }\n };\n\n handleOnMouseUp = () => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, stateShapes } = this.state;\n const { onUpdateShapes } = this.props;\n\n // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n if (isDrawing) {\n this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n if (stateShapes) {\n onUpdateShapes(stateShapes);\n }\n }\n };\n\n handleMouseMove = (e) => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, isDrawingShapeId } = this.state;\n const { shapes } = this.props;\n\n if (isDrawing && isDrawingShapeId) {\n const mouseX = e.evt.layerX;\n const mouseY = e.evt.layerY;\n\n const currShapeIndex = shapes.findIndex(shape => shape.id === isDrawingShapeId);\n const currShape = shapes[currShapeIndex];\n\n if (currShape) {\n const newWidth = mouseX - currShape.x;\n const newHeight = mouseY - currShape.y;\n\n const newShapesList = shapes.slice();\n\n newShapesList[currShapeIndex] = {\n ...newShapesList[currShapeIndex],\n height: newHeight,\n width: newWidth,\n x: currShape.x,\n y: currShape.y\n };\n\n // On mouse move don't trigger any event. Put the shapes on this state instead.\n this.setState({ stateShapes: newShapesList });\n }\n }\n };\n\n handleOnDragEnd = (id, updatedProps) => {\n const { shapes, onUpdateShapes } = this.props;\n const newShapes = shapes.map(shape => {\n if (shape.id === id) {\n return {\n ...shape,\n ...updatedProps\n }\n }\n return shape;\n });\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n\n handleOnSetAsCorrect = (shape) => {\n const { id } = shape;\n const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n let newShapes = [];\n\n if (multipleCorrect) {\n newShapes = shapes.map(shape => {\n if (shape.id === id) {\n shape.correct = !shape.correct;\n }\n return shape;\n })\n } else {\n newShapes = shapes.map(shape => {\n shape.correct = shape.id === id;\n return shape;\n })\n }\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n /// end of handling HotSpots section\n\n /// start of handling Image section\n handleOnImageLoad = ({ target }) => {\n const { onUpdateImageDimension } = this.props;\n const resizeHandle = this.resize;\n const elementStyle = getComputedStyle(target);\n const newHeight = parseFloat(elementStyle.height);\n const newWidth = parseFloat(elementStyle.width);\n const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n const dimensions = newWidth > IMAGE_MAX_WIDTH ? {\n height: newHeight / aspectWidth,\n width: IMAGE_MAX_WIDTH\n } : {\n height: newHeight,\n width: newWidth\n };\n\n this.setState(\n { dimensions },\n () => onUpdateImageDimension(dimensions));\n\n resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n };\n\n initialiseResize = () => {\n window.addEventListener('mousemove', this.startResizing, false);\n window.addEventListener('mouseup', this.stopResizing, false);\n };\n\n checkIfResizeValid(x, y) {\n const { shapes } = this.state;\n let drawable = true;\n\n // Do not allow resizing over the hotspots\n shapes && shapes.forEach(shape => {\n const right = shape.x + shape.width + 5;\n const bottom = shape.y + shape.height + 5;\n if (x <= right || y <= bottom) {\n drawable = false\n }\n });\n return drawable;\n }\n\n startResizing = (e) => {\n const bounds = e.target.getBoundingClientRect();\n const box = this.image;\n const {\n disableDrag,\n preserveAspectRatioEnabled,\n dimensions,\n shapes\n } = this.props;\n\n // todo previously we had state.dimensions, is it needed?\n const { width, height } = updateImageDimensions(\n dimensions,\n {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top\n },\n preserveAspectRatioEnabled\n );\n\n const resizeValid = this.checkIfResizeValid(width, height);\n const hasMinimumWidth = width > 150 && height > 150;\n\n if (resizeValid && hasMinimumWidth) {\n box.style.width = `${width}px`;\n box.style.height = `${height}px`;\n\n this.setState({\n resizing: true,\n dimensions: { height: height, width: width },\n stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes)\n });\n }\n\n disableDrag();\n };\n\n stopResizing = () => {\n const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n const { dimensions, stateShapes } = this.state;\n\n enableDrag();\n\n if (stateShapes) {\n onUpdateShapes(cloneDeep(stateShapes));\n }\n\n onUpdateImageDimension(dimensions);\n\n window.removeEventListener('mousemove', this.startResizing, false);\n window.removeEventListener('mouseup', this.stopResizing, false);\n\n this.setState({ resizing: false, stateShapes: false });\n };\n /// end of handling Image section\n\n render() {\n const {\n classes,\n imageUrl,\n dimensions: { height, width },\n hotspotColor,\n outlineColor,\n shapes,\n strokeWidth\n } = this.props;\n const {\n stateShapes,\n isDrawing,\n dimensions: { height: heightFromState, width: widthFromState }\n } = this.state;\n const shapesToUse = stateShapes || shapes;\n\n return (\n <div className={classes.base}>\n {imageUrl && (\n <div className={classes.imageContainer}>\n <img\n className={classes.image}\n onLoad={this.handleOnImageLoad}\n ref={ref => {\n this.image = ref;\n }}\n src={imageUrl}\n {...height && width ? { style: { height, width } } : {}}\n />\n <div ref={ref => {\n this.resize = ref;\n }} className={classes.resize}/>\n </div>\n )}\n\n <Stage\n className={classes.stage}\n height={heightFromState || height}\n width={widthFromState || width}\n onMouseDown={this.handleOnMouseDown }\n onMouseUp={this.handleOnMouseUp }\n onMouseMove={this.handleMouseMove }\n >\n <Layer>\n {shapesToUse.map((shape, index) => {\n const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n\n return (\n <Tag\n correct={shape.correct}\n isDrawing={isDrawing}\n height={shape.height}\n hotspotColor={hotspotColor}\n id={shape.id}\n key={index}\n onClick={() => this.handleOnSetAsCorrect(shape)}\n onDragEnd={this.handleOnDragEnd}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n points={shape.points}\n strokeWidth={strokeWidth}\n />\n );\n })}\n </Layer>\n </Stage>\n </div>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n position: 'relative'\n },\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content'\n },\n resize: {\n borderBottom: '1px solid #727272',\n borderRight: '1px solid #727272',\n bottom: '-10px',\n cursor: 'se-resize',\n height: '10px',\n position: 'absolute',\n right: '-10px',\n width: '10px'\n },\n stage: {\n left: 0,\n top: 0,\n position: 'absolute'\n }\n});\n\nDrawable.propTypes = {\n classes: PropTypes.object.isRequired,\n disableDrag: PropTypes.func.isRequired,\n dimensions: PropTypes.object.isRequired,\n enableDrag: PropTypes.func.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.array.isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}
|
|
@@ -35,7 +35,7 @@ var _styles = require("@material-ui/core/styles");
|
|
|
35
35
|
|
|
36
36
|
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); }; }
|
|
37
37
|
|
|
38
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
38
|
+
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; } }
|
|
39
39
|
|
|
40
40
|
var Palette = /*#__PURE__*/function (_React$Component) {
|
|
41
41
|
(0, _inherits2["default"])(Palette, _React$Component);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hotspot-palette.jsx"],"names":["Palette","name","event","value","target","props","onHotspotColorChange","onOutlineColorChange","classes","hotspotColor","outlineColor","hotspotList","outlineList","base","input","select","onChange","map","hotspot","item","backgroundColor","outline","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","width","borderRadius","height","marginLeft","marginRight","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,O;;;;;;;;;;;;;;;iGACO,UAACC,IAAD;AAAA,aAAU,UAAAC,KAAK,EAAI;
|
|
1
|
+
{"version":3,"sources":["../src/hotspot-palette.jsx"],"names":["Palette","name","event","value","target","props","onHotspotColorChange","onOutlineColorChange","classes","hotspotColor","outlineColor","hotspotList","outlineList","base","input","select","onChange","map","hotspot","item","backgroundColor","outline","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","width","borderRadius","height","marginLeft","marginRight","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,O;;;;;;;;;;;;;;;iGACO,UAACC,IAAD;AAAA,aAAU,UAAAC,KAAK,EAAI;AAC5B,YAAQC,KAAR,GAAkBD,KAAK,CAACE,MAAxB,CAAQD,KAAR;AACA,0BAAuD,MAAKE,KAA5D;AAAA,YAAQC,oBAAR,eAAQA,oBAAR;AAAA,YAA8BC,oBAA9B,eAA8BA,oBAA9B;;AAEA,YAAIN,IAAI,KAAK,SAAb,EAAwB;AACtBK,UAAAA,oBAAoB,CAACH,KAAD,CAApB;AACD,SAFD,MAEO;AACLI,UAAAA,oBAAoB,CAACJ,KAAD,CAApB;AACD;AACF,OATU;AAAA,K;;;;;;WAWX,kBAAS;AACP,yBAA0E,KAAKE,KAA/E;AAAA,UAAQG,OAAR,gBAAQA,OAAR;AAAA,UAAiBC,YAAjB,gBAAiBA,YAAjB;AAAA,UAA+BC,YAA/B,gBAA+BA,YAA/B;AAAA,UAA6CC,WAA7C,gBAA6CA,WAA7C;AAAA,UAA0DC,WAA1D,gBAA0DA,WAA1D;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,sBACE,gCAAC,wBAAD;AAAgB,QAAA,KAAK,EAAC,UAAtB;AAAiC,QAAA,SAAS,EAAEL,OAAO,CAACM;AAApD,sBACE,gCAAC,kBAAD;AACE,QAAA,SAAS,EAAEN,OAAO,CAACO,MADrB;AAEE,QAAA,QAAQ,EAAE,KAAKC,QAAL,CAAc,SAAd,CAFZ;AAGE,QAAA,KAAK,EAAEP;AAHT,SAKGE,WAAW,CAACM,GAAZ,CAAgB,UAAAC,OAAO;AAAA,4BACtB,gCAAC,oBAAD;AACE,UAAA,GAAG,EAAEA,OADP;AAEE,UAAA,KAAK,EAAEA,OAFT;AAGE,UAAA,SAAS,EAAEV,OAAO,CAACW,IAHrB;AAIE,UAAA,KAAK,EAAE;AAAEC,YAAAA,eAAe,EAAEF;AAAnB;AAJT,WAMGA,OANH,CADsB;AAAA,OAAvB,CALH,CADF,CADF,eAoBE,gCAAC,wBAAD;AAAgB,QAAA,KAAK,EAAC,kBAAtB;AAAyC,QAAA,SAAS,EAAEV,OAAO,CAACM;AAA5D,sBACE,gCAAC,kBAAD;AACE,QAAA,SAAS,EAAEN,OAAO,CAACO,MADrB;AAEE,QAAA,QAAQ,EAAE,KAAKC,QAAL,CAAc,SAAd,CAFZ;AAGE,QAAA,KAAK,EAAEN;AAHT,SAKGE,WAAW,CAACK,GAAZ,CAAgB,UAAAI,OAAO;AAAA,4BACtB,gCAAC,oBAAD;AACE,UAAA,GAAG,EAAEA,OADP;AAEE,UAAA,KAAK,EAAEA,OAFT;AAGE,UAAA,SAAS,EAAEb,OAAO,CAACW,IAHrB;AAIE,UAAA,KAAK,EAAE;AAAEG,YAAAA,MAAM,sBAAeD,OAAf;AAAR;AAJT,WAMGA,OANH,CADsB;AAAA,OAAvB,CALH,CADF,CApBF,CADF;AAyCD;;;EAxDmBE,kBAAMC,S;;AA2D5B,IAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBb,IAAAA,IAAI,EAAE;AACJc,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAD5B;AAEJC,MAAAA,OAAO,EAAE;AAFL,KADiB;AAKvBhB,IAAAA,KAAK,EAAE;AACLiB,MAAAA,IAAI,EAAE,CADD;AAELC,MAAAA,KAAK,EAAE;AAFF,KALgB;AASvBb,IAAAA,IAAI,EAAE;AACJc,MAAAA,YAAY,EAAE,KADV;AAEJC,MAAAA,MAAM,EAAE,MAFJ;AAGJC,MAAAA,UAAU,EAAET,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAH7B;AAIJO,MAAAA,WAAW,EAAEV,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAJ9B;AAKJF,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAL5B;AATiB,GAAL;AAAA,CAApB;;AAkBA7B,OAAO,CAACqC,SAAR,GAAoB;AAClB7B,EAAAA,OAAO,EAAE8B,sBAAUC,MAAV,CAAiBC,UADR;AAElB/B,EAAAA,YAAY,EAAE6B,sBAAUG,MAAV,CAAiBD,UAFb;AAGlB7B,EAAAA,WAAW,EAAE2B,sBAAUI,KAAV,CAAgBF,UAHX;AAIlBlC,EAAAA,oBAAoB,EAAEgC,sBAAUK,IAAV,CAAeH,UAJnB;AAKlBjC,EAAAA,oBAAoB,EAAE+B,sBAAUK,IAAV,CAAeH,UALnB;AAMlB9B,EAAAA,YAAY,EAAE4B,sBAAUG,MAAV,CAAiBD,UANb;AAOlB5B,EAAAA,WAAW,EAAE0B,sBAAUI,KAAV,CAAgBF;AAPX,CAApB;;eAUe,wBAAWf,MAAX,EAAmBzB,OAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/config-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\nclass Palette extends React.Component {\n onChange = (name) => event => {\n const { value } = event.target;\n const { onHotspotColorChange, onOutlineColorChange } = this.props;\n\n if (name === 'hotspot') {\n onHotspotColorChange(value);\n } else {\n onOutlineColorChange(value)\n }\n };\n\n render() {\n const { classes, hotspotColor, outlineColor, hotspotList, outlineList } = this.props;\n\n return (\n <div className={classes.base}>\n <InputContainer label=\"Hot Spot\" className={classes.input}>\n <Select\n className={classes.select}\n onChange={this.onChange('hotspot')}\n value={hotspotColor}\n >\n {hotspotList.map(hotspot => (\n <MenuItem\n key={hotspot}\n value={hotspot}\n className={classes.item}\n style={{ backgroundColor: hotspot }}\n >\n {hotspot}\n </MenuItem>\n ))}\n </Select>\n </InputContainer>\n\n <InputContainer label=\"Response Outline\" className={classes.input}>\n <Select\n className={classes.select}\n onChange={this.onChange('outline')}\n value={outlineColor}\n >\n {outlineList.map(outline => (\n <MenuItem\n key={outline}\n value={outline}\n className={classes.item}\n style={{ border: `2px solid ${outline}` }}\n >\n {outline}\n </MenuItem>\n ))}\n </Select>\n </InputContainer>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 2,\n display: 'flex'\n },\n input: {\n flex: 1,\n width: '90%'\n },\n item: {\n borderRadius: '2px',\n height: '22px',\n marginLeft: theme.spacing.unit * 2,\n marginRight: theme.spacing.unit * 2,\n marginTop: theme.spacing.unit * 2\n },\n});\n\nPalette.propTypes = {\n classes: PropTypes.object.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n hotspotList: PropTypes.array.isRequired,\n onHotspotColorChange: PropTypes.func.isRequired,\n onOutlineColorChange: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n outlineList: PropTypes.array.isRequired\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"hotspot-palette.js"}
|
|
@@ -33,7 +33,7 @@ var _index = require("@material-ui/core/styles/index");
|
|
|
33
33
|
|
|
34
34
|
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); }; }
|
|
35
35
|
|
|
36
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
36
|
+
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; } }
|
|
37
37
|
|
|
38
38
|
var PolComponent = /*#__PURE__*/function (_React$Component) {
|
|
39
39
|
(0, _inherits2["default"])(PolComponent, _React$Component);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["PolComponent","e","points","props","xList","map","p","x","yList","y","width","Math","max","min","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","onDragEnd","target","state","newPoints","reduce","acc","currentPointCoordinate","index","length","push","classes","correct","hotspotColor","outlineColor","strokeWidth","base","handleClick","handleMouseLeave","handleMouseEnter","handleOnDragEnd","nextProps","xOffset","yOffset","point","concat","React","Component","styles","opacity","propTypes","PropTypes","object","isRequired","bool","string","func","arrayOf","shape","number","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;IAEMA,Y;;;;;;;;;;;;;;;8FAwBI,E;oGAEM,UAACC,CAAD,EAAO;
|
|
1
|
+
{"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["PolComponent","e","points","props","xList","map","p","x","yList","y","width","Math","max","min","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","onDragEnd","target","state","newPoints","reduce","acc","currentPointCoordinate","index","length","push","classes","correct","hotspotColor","outlineColor","strokeWidth","base","handleClick","handleMouseLeave","handleMouseEnter","handleOnDragEnd","nextProps","xOffset","yOffset","point","concat","React","Component","styles","opacity","propTypes","PropTypes","object","isRequired","bool","string","func","arrayOf","shape","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nclass PolComponent extends React.Component {\n static getDerivedStateFromProps(nextProps) {\n const { points } = nextProps;\n const xList = points.map(p => (p.x));\n const yList = points.map(p => (p.y));\n\n const xOffset = Math.min(...xList);\n const yOffset = Math.max(...yList);\n\n if (points.length) {\n return {\n x: xOffset,\n y: yOffset,\n points: points.reduce((acc, point) => { return acc.concat([point.x - xOffset, point.y - yOffset]) }, [])\n };\n }\n\n return {\n x: 0,\n y: 0,\n points: []\n };\n }\n\n state = {};\n\n handleClick = (e) => {\n const { points } = this.props;\n const xList = points.map(p => (p.x));\n const yList = points.map(p => (p.y));\n\n const width = Math.max(...xList) - Math.min(...xList);\n const height = Math.max(...yList) - Math.min(...yList);\n\n const { isDrawing, onClick, id } = this.props;\n\n if (width < 0 && height < 0 && isDrawing) {\n return;\n }\n\n e.cancelBubble = true;\n onClick(id);\n };\n\n handleMouseEnter = () => {\n document.body.style.cursor = 'pointer';\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n };\n\n handleOnDragEnd = (e) => {\n const { onDragEnd, id } = this.props;\n const points = e.target.points() || this.state.points;\n\n const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n if (index % 2 === 0 && index + 1 < points.length) {\n acc.push({\n x: currentPointCoordinate + e.target.x(),\n y: points[index + 1] + e.target.y()\n });\n\n return acc;\n } else {\n return acc;\n }\n }, []);\n\n onDragEnd(id, {\n points: newPoints\n })\n };\n\n render() {\n const {\n classes,\n correct,\n hotspotColor,\n outlineColor,\n strokeWidth = 5\n } = this.props;\n const { points, x, y } = this.state;\n\n return (\n <Group>\n <Line\n classes={classes.base}\n points={points}\n closed={true}\n fill={hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable\n stroke={outlineColor}\n strokeWidth={correct ? strokeWidth : 0}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n onDragEnd={this.handleOnDragEnd}\n x={x}\n y={y}\n />\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5\n },\n});\n\nPolComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n correct: PropTypes.bool,\n isDrawing: PropTypes.bool.isRequired,\n id: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.arrayOf(PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number\n })).isRequired,\n strokeWidth: PropTypes.number\n};\n\nPolComponent.defaultProps = {\n correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}
|
|
@@ -31,7 +31,7 @@ var _index = require("@material-ui/core/styles/index");
|
|
|
31
31
|
|
|
32
32
|
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); }; }
|
|
33
33
|
|
|
34
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
34
|
+
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; } }
|
|
35
35
|
|
|
36
36
|
var RectComponent = /*#__PURE__*/function (_React$Component) {
|
|
37
37
|
(0, _inherits2["default"])(RectComponent, _React$Component);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hotspot-rectangle.jsx"],"names":["RectComponent","e","props","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","onDragEnd","x","target","y","classes","correct","hotspotColor","outlineColor","strokeWidth","base","handleClick","handleMouseLeave","handleMouseEnter","handleOnDragEnd","React","Component","styles","opacity","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;IAEMA,a;;;;;;;;;;;;;;;oGACU,UAACC,CAAD,EAAO;
|
|
1
|
+
{"version":3,"sources":["../src/hotspot-rectangle.jsx"],"names":["RectComponent","e","props","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","onDragEnd","x","target","y","classes","correct","hotspotColor","outlineColor","strokeWidth","base","handleClick","handleMouseLeave","handleMouseEnter","handleOnDragEnd","React","Component","styles","opacity","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nclass RectComponent extends React.Component {\n handleClick = (e) => {\n const { width, height, isDrawing, onClick, id } = this.props;\n if (width < 0 && height < 0 && isDrawing) {\n return;\n }\n e.cancelBubble = true;\n onClick(id);\n };\n\n handleMouseEnter = () => {\n document.body.style.cursor = 'pointer';\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n };\n\n handleOnDragEnd = (e) => {\n const { onDragEnd, id } = this.props;\n\n onDragEnd(id, {\n x: e.target.x(),\n y: e.target.y()\n })\n };\n\n render() {\n const {\n classes,\n correct,\n height,\n hotspotColor,\n outlineColor,\n width,\n x,\n y,\n strokeWidth = 5\n } = this.props;\n\n return (\n <Group>\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\n stroke={outlineColor}\n strokeWidth={correct ? strokeWidth : 0}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n onDragEnd={this.handleOnDragEnd}\n x={x}\n y={y}\n />\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5\n },\n});\n\nRectComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n correct: PropTypes.bool,\n isDrawing: PropTypes.bool.isRequired,\n id: PropTypes.string.isRequired,\n height: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n width: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n strokeWidth: PropTypes.number\n};\n\nRectComponent.defaultProps = {\n correct: false,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"hotspot-rectangle.js"}
|
package/configure/lib/index.js
CHANGED
|
@@ -35,13 +35,13 @@ var _root = _interopRequireDefault(require("./root"));
|
|
|
35
35
|
|
|
36
36
|
var _defaults = _interopRequireDefault(require("./defaults"));
|
|
37
37
|
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
38
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
39
39
|
|
|
40
40
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
41
41
|
|
|
42
42
|
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); }; }
|
|
43
43
|
|
|
44
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
44
|
+
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; } }
|
|
45
45
|
|
|
46
46
|
var log = (0, _debug["default"])('hotspot:configure');
|
|
47
47
|
|