@pie-element/hotspot 5.7.0 → 5.7.1-beta.1

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.
Files changed (51) hide show
  1. package/configure/package.json +3 -3
  2. package/configure/src/defaults.js +2 -2
  3. package/configure/src/root.jsx +1 -1
  4. package/controller/package.json +2 -2
  5. package/controller/src/defaults.js +2 -2
  6. package/docs/demo/generate.js +7 -2
  7. package/package.json +7 -6
  8. package/configure/lib/button.js +0 -61
  9. package/configure/lib/button.js.map +0 -1
  10. package/configure/lib/defaults.js +0 -82
  11. package/configure/lib/defaults.js.map +0 -1
  12. package/configure/lib/hotspot-container.js +0 -398
  13. package/configure/lib/hotspot-container.js.map +0 -1
  14. package/configure/lib/hotspot-drawable.js +0 -445
  15. package/configure/lib/hotspot-drawable.js.map +0 -1
  16. package/configure/lib/hotspot-palette.js +0 -154
  17. package/configure/lib/hotspot-palette.js.map +0 -1
  18. package/configure/lib/hotspot-polygon.js +0 -202
  19. package/configure/lib/hotspot-polygon.js.map +0 -1
  20. package/configure/lib/hotspot-rectangle.js +0 -150
  21. package/configure/lib/hotspot-rectangle.js.map +0 -1
  22. package/configure/lib/index.js +0 -212
  23. package/configure/lib/index.js.map +0 -1
  24. package/configure/lib/root.js +0 -401
  25. package/configure/lib/root.js.map +0 -1
  26. package/configure/lib/upload-control.js +0 -68
  27. package/configure/lib/upload-control.js.map +0 -1
  28. package/configure/lib/utils.js +0 -160
  29. package/configure/lib/utils.js.map +0 -1
  30. package/controller/lib/defaults.js +0 -26
  31. package/controller/lib/defaults.js.map +0 -1
  32. package/controller/lib/index.js +0 -263
  33. package/controller/lib/index.js.map +0 -1
  34. package/controller/lib/utils.js +0 -50
  35. package/controller/lib/utils.js.map +0 -1
  36. package/lib/hotspot/container.js +0 -246
  37. package/lib/hotspot/container.js.map +0 -1
  38. package/lib/hotspot/icons.js +0 -8
  39. package/lib/hotspot/icons.js.map +0 -1
  40. package/lib/hotspot/image.js +0 -133
  41. package/lib/hotspot/image.js.map +0 -1
  42. package/lib/hotspot/index.js +0 -207
  43. package/lib/hotspot/index.js.map +0 -1
  44. package/lib/hotspot/polygon.js +0 -225
  45. package/lib/hotspot/polygon.js.map +0 -1
  46. package/lib/hotspot/rectangle.js +0 -207
  47. package/lib/hotspot/rectangle.js.map +0 -1
  48. package/lib/index.js +0 -114
  49. package/lib/index.js.map +0 -1
  50. package/lib/session-updater.js +0 -30
  51. package/lib/session-updater.js.map +0 -1
@@ -1,398 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = exports.Container = void 0;
11
-
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
15
-
16
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
17
-
18
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
19
-
20
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
21
-
22
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
23
-
24
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
25
-
26
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
27
-
28
- var _react = _interopRequireWildcard(require("react"));
29
-
30
- var _propTypes = _interopRequireDefault(require("prop-types"));
31
-
32
- var _classnames = _interopRequireDefault(require("classnames"));
33
-
34
- var _index = require("@material-ui/core/styles/index");
35
-
36
- var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
37
-
38
- var _hotspotDrawable = _interopRequireDefault(require("./hotspot-drawable"));
39
-
40
- var _button = _interopRequireDefault(require("./button"));
41
-
42
- var _uploadControl = _interopRequireDefault(require("./upload-control"));
43
-
44
- var _utils = require("./utils");
45
-
46
- 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); }
47
-
48
- 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; }
49
-
50
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
51
-
52
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
53
-
54
- 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); }; }
55
-
56
- 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; } }
57
-
58
- var isImage = function isImage(file) {
59
- var imageType = /image.*/;
60
- return file.type.match(imageType);
61
- };
62
-
63
- var Container = /*#__PURE__*/function (_Component) {
64
- (0, _inherits2["default"])(Container, _Component);
65
-
66
- var _super = _createSuper(Container);
67
-
68
- function Container(props) {
69
- var _this;
70
-
71
- (0, _classCallCheck2["default"])(this, Container);
72
- _this = _super.call(this, props);
73
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFileRead", function (file) {
74
- if (file instanceof Blob) {
75
- var onImageUpload = _this.props.onImageUpload;
76
- var reader = new FileReader();
77
-
78
- reader.onloadend = function () {
79
- return onImageUpload(reader.result);
80
- };
81
-
82
- reader.readAsDataURL(file);
83
- }
84
- });
85
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadImage", function (e) {
86
- e.preventDefault();
87
-
88
- _this.handleFileRead(e.target.files[0]);
89
- });
90
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "enableDropzone", function () {
91
- return _this.setState({
92
- dropzoneActive: true
93
- });
94
- });
95
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "disableDropzone", function () {
96
- return _this.setState({
97
- dropzoneActive: false
98
- });
99
- });
100
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnPaste", function (e) {
101
- var files = e.clipboardData.files;
102
-
103
- if (files && isImage(files[0])) {
104
- _this.handleFileRead(files[0]);
105
- }
106
- });
107
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
108
- e.preventDefault();
109
- var _e$dataTransfer = e.dataTransfer,
110
- items = _e$dataTransfer.items,
111
- files = _e$dataTransfer.files;
112
-
113
- if (items && items[0].kind === 'file') {
114
- var file = items[0].getAsFile();
115
-
116
- if (isImage(file)) {
117
- _this.handleFileRead(file);
118
- }
119
- } else if (isImage(files[0])) {
120
- _this.handleFileRead(files[0]);
121
- }
122
-
123
- _this.disableDropzone();
124
- });
125
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragOver", function (e) {
126
- e.preventDefault();
127
- var dropzoneActive = _this.state.dropzoneActive;
128
-
129
- if (!dropzoneActive) {
130
- _this.enableDropzone();
131
- }
132
- });
133
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragExit", function (e) {
134
- e.preventDefault();
135
-
136
- _this.disableDropzone();
137
- });
138
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onUpdateShapes", function (newShapes) {
139
- var onUpdateShapes = _this.props.onUpdateShapes;
140
-
141
- _this.setState({
142
- shapes: newShapes
143
- }, // always transform shapes array back into shapes map when saving changes
144
- function () {
145
- return onUpdateShapes((0, _utils.groupShapes)(newShapes));
146
- });
147
- });
148
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUndo", function () {
149
- var shapes = _this.state.shapes;
150
-
151
- if (shapes && shapes.length) {
152
- // sort by index value
153
- var newShapes = shapes.sort(function (a, b) {
154
- return parseInt(a.index) - parseInt(b.index);
155
- });
156
- newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];
157
-
158
- _this.onUpdateShapes(newShapes);
159
- }
160
- });
161
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClearAll", function () {
162
- return _this.onUpdateShapes([]);
163
- });
164
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleEnableDrag", function () {
165
- return _this.setState({
166
- dragEnabled: true
167
- });
168
- });
169
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDisableDrag", function () {
170
- return _this.setState({
171
- dragEnabled: false
172
- });
173
- });
174
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputClick", function () {
175
- return _this.input.click();
176
- });
177
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleTooltip", function () {
178
- return _this.setState({
179
- showTooltip: !_this.state.showTooltip
180
- });
181
- });
182
- _this.state = {
183
- dragEnabled: true,
184
- // always transform shapes map into shapes array at this level
185
- shapes: (0, _utils.getAllShapes)(props.shapes)
186
- };
187
- return _this;
188
- }
189
-
190
- (0, _createClass2["default"])(Container, [{
191
- key: "render",
192
- value: function render() {
193
- var _classNames,
194
- _this2 = this;
195
-
196
- var _this$props = this.props,
197
- classes = _this$props.classes,
198
- dimensions = _this$props.dimensions,
199
- hasErrors = _this$props.hasErrors,
200
- hotspotColor = _this$props.hotspotColor,
201
- imageUrl = _this$props.imageUrl,
202
- multipleCorrect = _this$props.multipleCorrect,
203
- onUpdateImageDimension = _this$props.onUpdateImageDimension,
204
- outlineColor = _this$props.outlineColor,
205
- strokeWidth = _this$props.strokeWidth,
206
- preserveAspectRatioEnabled = _this$props.preserveAspectRatioEnabled;
207
- var _this$state = this.state,
208
- dropzoneActive = _this$state.dropzoneActive,
209
- dragEnabled = _this$state.dragEnabled,
210
- showTooltip = _this$state.showTooltip;
211
- var shapes = this.state.shapes;
212
- return /*#__PURE__*/_react["default"].createElement("div", {
213
- className: classes.base
214
- }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
215
- className: (0, _classnames["default"])(classes.box, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.boxError, hasErrors && !dropzoneActive), (0, _defineProperty2["default"])(_classNames, classes.boxActive, dropzoneActive), _classNames))
216
- }, dragEnabled ? {
217
- onDragExit: this.handleOnDragExit,
218
- onDragLeave: this.handleOnDragExit,
219
- onDragOver: this.handleOnDragOver,
220
- onDrop: this.handleOnDrop,
221
- onPaste: this.handleOnPaste
222
- } : {}), /*#__PURE__*/_react["default"].createElement("div", {
223
- className: classes.toolbar
224
- }, imageUrl && /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
225
- classNameButton: classes.replaceButton,
226
- classNameSection: classes.replaceSection,
227
- label: "Replace Image",
228
- onInputClick: this.handleInputClick,
229
- onUploadImage: this.handleUploadImage,
230
- setRef: function setRef(ref) {
231
- _this2.input = ref;
232
- }
233
- }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
234
- disabled: !(shapes && shapes.length),
235
- onClick: this.handleUndo,
236
- label: "Undo"
237
- }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
238
- disabled: !(shapes && shapes.length),
239
- onClick: this.handleClearAll,
240
- label: "Clear all"
241
- })), /*#__PURE__*/_react["default"].createElement("div", {
242
- ref: function ref(_ref) {
243
- _this2.imageSection = _ref;
244
- },
245
- className: classes.drawableHeight
246
- }, imageUrl ? /*#__PURE__*/_react["default"].createElement(_hotspotDrawable["default"], {
247
- dimensions: dimensions,
248
- disableDrag: this.handleDisableDrag,
249
- enableDrag: this.handleEnableDrag,
250
- imageUrl: imageUrl,
251
- hotspotColor: hotspotColor,
252
- multipleCorrect: multipleCorrect,
253
- onUpdateImageDimension: onUpdateImageDimension,
254
- onUpdateShapes: this.onUpdateShapes,
255
- outlineColor: outlineColor,
256
- shapes: shapes,
257
- strokeWidth: strokeWidth,
258
- preserveAspectRatioEnabled: preserveAspectRatioEnabled
259
- }) : /*#__PURE__*/_react["default"].createElement("div", {
260
- className: (0, _classnames["default"])(classes.drawableHeight, classes.centered)
261
- }, /*#__PURE__*/_react["default"].createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
262
- label: "Upload Image",
263
- onInputClick: this.handleInputClick,
264
- onUploadImage: this.handleUploadImage,
265
- setRef: function setRef(ref) {
266
- _this2.input = ref;
267
- }
268
- }))), imageUrl && /*#__PURE__*/_react["default"].createElement("div", {
269
- className: classes.tooltip
270
- }, showTooltip && /*#__PURE__*/_react["default"].createElement("div", {
271
- className: classes.tooltipContent
272
- }, /*#__PURE__*/_react["default"].createElement("label", null, "Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark."), /*#__PURE__*/_react["default"].createElement("div", {
273
- className: classes.tooltipArrow
274
- })), /*#__PURE__*/_react["default"].createElement(_Help["default"], {
275
- className: classes.icon,
276
- onMouseOut: this.toggleTooltip,
277
- onMouseOver: this.toggleTooltip
278
- }))));
279
- }
280
- }], [{
281
- key: "getDerivedStateFromProps",
282
- value: function getDerivedStateFromProps(nextProps, prevState) {
283
- // always transform shapes map into shapes array at this level
284
- return _objectSpread(_objectSpread({}, prevState), {}, {
285
- shapes: (0, _utils.getAllShapes)(nextProps.shapes)
286
- });
287
- }
288
- }]);
289
- return Container;
290
- }(_react.Component);
291
-
292
- exports.Container = Container;
293
-
294
- var styles = function styles(theme) {
295
- return {
296
- base: {
297
- marginTop: theme.spacing.unit * 2
298
- },
299
- box: {
300
- border: '1px solid #E0E1E6',
301
- borderRadius: '5px'
302
- },
303
- boxActive: {
304
- border: '1px solid #0032C2'
305
- },
306
- boxError: {
307
- border: '1px solid red'
308
- },
309
- centered: {
310
- alignItems: 'center',
311
- display: 'flex',
312
- flexDirection: 'column',
313
- justifyContent: 'center'
314
- },
315
- drawableHeight: {
316
- minHeight: 350,
317
- paddingBottom: theme.spacing.unit * 5,
318
- paddingRight: theme.spacing.unit * 5
319
- },
320
- icon: {
321
- '&:hover': {
322
- color: '#333131',
323
- cursor: 'help'
324
- },
325
- color: '#C1C1C1'
326
- },
327
- replaceButton: {
328
- marginLeft: 0
329
- },
330
- replaceSection: {
331
- marginRight: 'auto'
332
- },
333
- toolbar: {
334
- backgroundColor: '#ECEDF1',
335
- borderBottom: '1px solid #E0E1E6',
336
- borderTopLeftRadius: '5px',
337
- borderTopRightRadius: '5px',
338
- display: 'flex',
339
- justifyContent: 'flex-end',
340
- padding: theme.spacing.unit
341
- },
342
- tooltip: {
343
- position: 'relative',
344
- textAlign: 'right',
345
- padding: theme.spacing.unit
346
- },
347
- tooltipContent: {
348
- background: '#333131',
349
- borderRadius: '4px',
350
- color: '#FFFFFF',
351
- fontSize: theme.typography.fontSize,
352
- lineHeight: '18px',
353
- marginTop: '-60px',
354
- padding: theme.spacing.unit,
355
- position: 'absolute',
356
- right: '5px',
357
- textAlign: 'left',
358
- width: '300px'
359
- },
360
- tooltipArrow: {
361
- width: 0,
362
- height: 0,
363
- borderLeft: '10px solid transparent',
364
- borderRight: '10px solid transparent',
365
- borderTop: '10px solid #333131',
366
- marginBottom: -10,
367
- marginTop: '4px',
368
- position: 'absolute',
369
- right: '5px'
370
- }
371
- };
372
- };
373
-
374
- Container.propTypes = {
375
- classes: _propTypes["default"].object.isRequired,
376
- dimensions: _propTypes["default"].object.isRequired,
377
- imageUrl: _propTypes["default"].string.isRequired,
378
- hotspotColor: _propTypes["default"].string.isRequired,
379
- multipleCorrect: _propTypes["default"].bool.isRequired,
380
- onImageUpload: _propTypes["default"].func.isRequired,
381
- onUpdateImageDimension: _propTypes["default"].func.isRequired,
382
- onUpdateShapes: _propTypes["default"].func.isRequired,
383
- outlineColor: _propTypes["default"].string.isRequired,
384
- shapes: _propTypes["default"].shape({
385
- rectangles: _propTypes["default"].array,
386
- polygons: _propTypes["default"].array
387
- }).isRequired,
388
- strokeWidth: _propTypes["default"].number,
389
- preserveAspectRatioEnabled: _propTypes["default"].bool
390
- };
391
- Container.defaultProps = {
392
- strokeWidth: 5
393
- };
394
-
395
- var _default = (0, _index.withStyles)(styles)(Container);
396
-
397
- exports["default"] = _default;
398
- //# sourceMappingURL=hotspot-container.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","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","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","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","typography","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 classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n const imageType = /image.*/;\n\n return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // always transform shapes map into shapes array at this level\n return {\n ...prevState,\n shapes: getAllShapes(nextProps.shapes),\n };\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragEnabled: true,\n // always transform shapes map into shapes array at this level\n shapes: getAllShapes(props.shapes),\n };\n }\n\n handleFileRead = (file) => {\n if (file instanceof Blob) {\n const { onImageUpload } = this.props;\n const reader = new FileReader();\n\n reader.onloadend = () => onImageUpload(reader.result);\n reader.readAsDataURL(file);\n }\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\n disableDropzone = () => this.setState({ dropzoneActive: false });\n\n handleOnPaste = (e) => {\n const { files } = e.clipboardData;\n\n if (files && isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n };\n\n handleOnDrop = (e) => {\n e.preventDefault();\n\n const { items, files } = e.dataTransfer;\n\n if (items && items[0].kind === 'file') {\n const file = items[0].getAsFile();\n\n if (isImage(file)) {\n this.handleFileRead(file);\n }\n } else if (isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n\n this.disableDropzone();\n };\n\n handleOnDragOver = (e) => {\n e.preventDefault();\n\n const { dropzoneActive } = this.state;\n\n if (!dropzoneActive) {\n this.enableDropzone();\n }\n };\n\n handleOnDragExit = (e) => {\n e.preventDefault();\n\n this.disableDropzone();\n };\n\n onUpdateShapes = (newShapes) => {\n const { onUpdateShapes } = this.props;\n\n this.setState(\n { shapes: newShapes },\n // always transform shapes array back into shapes map when saving changes\n () => onUpdateShapes(groupShapes(newShapes)),\n );\n };\n\n handleUndo = () => {\n const { shapes } = this.state;\n\n if (shapes && shapes.length) {\n // sort by index value\n let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));\n\n newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n this.onUpdateShapes(newShapes);\n }\n };\n\n handleClearAll = () => this.onUpdateShapes([]);\n\n handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n handleInputClick = () => this.input.click();\n\n toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n render() {\n const {\n classes,\n dimensions,\n hasErrors,\n hotspotColor,\n imageUrl,\n multipleCorrect,\n onUpdateImageDimension,\n outlineColor,\n strokeWidth,\n preserveAspectRatioEnabled,\n } = this.props;\n const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n const { shapes } = this.state;\n\n return (\n <div className={classes.base}>\n <div\n className={classNames(classes.box, {\n [classes.boxError]: hasErrors && !dropzoneActive,\n [classes.boxActive]: dropzoneActive,\n })}\n {...(dragEnabled\n ? {\n onDragExit: this.handleOnDragExit,\n onDragLeave: this.handleOnDragExit,\n onDragOver: this.handleOnDragOver,\n onDrop: this.handleOnDrop,\n onPaste: this.handleOnPaste,\n }\n : {})}\n >\n <div className={classes.toolbar}>\n {imageUrl && (\n <UploadControl\n classNameButton={classes.replaceButton}\n classNameSection={classes.replaceSection}\n label=\"Replace Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n )}\n\n <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label=\"Undo\" />\n <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n </div>\n\n <div\n ref={(ref) => {\n this.imageSection = ref;\n }}\n className={classes.drawableHeight}\n >\n {imageUrl ? (\n <Drawable\n dimensions={dimensions}\n disableDrag={this.handleDisableDrag}\n enableDrag={this.handleEnableDrag}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n multipleCorrect={multipleCorrect}\n onUpdateImageDimension={onUpdateImageDimension}\n onUpdateShapes={this.onUpdateShapes}\n outlineColor={outlineColor}\n shapes={shapes}\n strokeWidth={strokeWidth}\n preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n />\n ) : (\n <div className={classNames(classes.drawableHeight, classes.centered)}>\n <label>Drag and drop or upload image from computer</label>\n <br />\n <UploadControl\n label=\"Upload Image\"\n onInputClick={this.handleInputClick}\n 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 again to unmark.\n </label>\n <div className={classes.tooltipArrow} />\n </div>\n )}\n\n <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n base: {\n marginTop: theme.spacing.unit * 2,\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px',\n },\n boxActive: {\n border: '1px solid #0032C2',\n },\n boxError: {\n border: '1px solid red',\n },\n centered: {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n drawableHeight: {\n minHeight: 350,\n paddingBottom: theme.spacing.unit * 5,\n paddingRight: theme.spacing.unit * 5,\n },\n icon: {\n '&:hover': {\n color: '#333131',\n cursor: 'help',\n },\n color: '#C1C1C1',\n },\n replaceButton: {\n marginLeft: 0,\n },\n replaceSection: {\n marginRight: 'auto',\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'flex-end',\n padding: theme.spacing.unit,\n },\n tooltip: {\n position: 'relative',\n textAlign: 'right',\n padding: theme.spacing.unit,\n },\n tooltipContent: {\n background: '#333131',\n borderRadius: '4px',\n color: '#FFFFFF',\n fontSize: theme.typography.fontSize,\n lineHeight: '18px',\n marginTop: '-60px',\n padding: theme.spacing.unit,\n position: 'absolute',\n right: '5px',\n textAlign: 'left',\n width: '300px',\n },\n tooltipArrow: {\n width: 0,\n height: 0,\n borderLeft: '10px solid transparent',\n borderRight: '10px solid transparent',\n borderTop: '10px solid #333131',\n marginBottom: -10,\n marginTop: '4px',\n position: 'absolute',\n right: '5px',\n },\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onImageUpload: PropTypes.func.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n 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};\n\nContainer.defaultProps = {\n strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}