@pie-element/hotspot 9.3.4-next.3 → 10.0.0-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 (106) hide show
  1. package/CHANGELOG.md +0 -11
  2. package/configure/CHANGELOG.md +0 -11
  3. package/configure/lib/DeleteWidget.js +30 -43
  4. package/configure/lib/DeleteWidget.js.map +1 -1
  5. package/configure/lib/button.js +26 -45
  6. package/configure/lib/button.js.map +1 -1
  7. package/configure/lib/buttons/circle.js +20 -27
  8. package/configure/lib/buttons/circle.js.map +1 -1
  9. package/configure/lib/buttons/polygon.js +26 -33
  10. package/configure/lib/buttons/polygon.js.map +1 -1
  11. package/configure/lib/buttons/rectangle.js +26 -33
  12. package/configure/lib/buttons/rectangle.js.map +1 -1
  13. package/configure/lib/defaults.js +2 -3
  14. package/configure/lib/defaults.js.map +1 -1
  15. package/configure/lib/hotspot-circle.js +132 -198
  16. package/configure/lib/hotspot-circle.js.map +1 -1
  17. package/configure/lib/hotspot-container.js +250 -355
  18. package/configure/lib/hotspot-container.js.map +1 -1
  19. package/configure/lib/hotspot-drawable.js +360 -472
  20. package/configure/lib/hotspot-drawable.js.map +1 -1
  21. package/configure/lib/hotspot-palette.js +92 -139
  22. package/configure/lib/hotspot-palette.js.map +1 -1
  23. package/configure/lib/hotspot-polygon.js +212 -317
  24. package/configure/lib/hotspot-polygon.js.map +1 -1
  25. package/configure/lib/hotspot-rectangle.js +128 -192
  26. package/configure/lib/hotspot-rectangle.js.map +1 -1
  27. package/configure/lib/icons.js.map +1 -1
  28. package/configure/lib/image-konva.js +46 -86
  29. package/configure/lib/image-konva.js.map +1 -1
  30. package/configure/lib/index.js +162 -222
  31. package/configure/lib/index.js.map +1 -1
  32. package/configure/lib/root.js +302 -394
  33. package/configure/lib/root.js.map +1 -1
  34. package/configure/lib/shapes/circle.js +69 -101
  35. package/configure/lib/shapes/circle.js.map +1 -1
  36. package/configure/lib/shapes/index.js +4 -12
  37. package/configure/lib/shapes/index.js.map +1 -1
  38. package/configure/lib/shapes/polygon.js +64 -96
  39. package/configure/lib/shapes/polygon.js.map +1 -1
  40. package/configure/lib/shapes/rectagle.js +69 -101
  41. package/configure/lib/shapes/rectagle.js.map +1 -1
  42. package/configure/lib/shapes/utils.js +2 -8
  43. package/configure/lib/shapes/utils.js.map +1 -1
  44. package/configure/lib/upload-control.js +25 -52
  45. package/configure/lib/upload-control.js.map +1 -1
  46. package/configure/lib/utils.js +84 -137
  47. package/configure/lib/utils.js.map +1 -1
  48. package/configure/package.json +11 -10
  49. package/configure/src/__tests__/hotspot-container.test.js +50 -19
  50. package/configure/src/__tests__/hotspot-drawable.test.js +55 -34
  51. package/configure/src/__tests__/index.test.js +167 -5
  52. package/configure/src/__tests__/root.test.js +89 -63
  53. package/configure/src/button.jsx +12 -20
  54. package/configure/src/hotspot-circle.jsx +5 -18
  55. package/configure/src/hotspot-container.jsx +82 -98
  56. package/configure/src/hotspot-drawable.jsx +43 -45
  57. package/configure/src/hotspot-palette.jsx +45 -37
  58. package/configure/src/hotspot-polygon.jsx +4 -20
  59. package/configure/src/hotspot-rectangle.jsx +4 -17
  60. package/configure/src/index.js +12 -2
  61. package/configure/src/root.jsx +86 -80
  62. package/configure/src/upload-control.jsx +6 -16
  63. package/controller/CHANGELOG.md +0 -11
  64. package/controller/lib/defaults.js +2 -3
  65. package/controller/lib/defaults.js.map +1 -1
  66. package/controller/lib/index.js +151 -205
  67. package/controller/lib/index.js.map +1 -1
  68. package/controller/lib/utils.js +14 -34
  69. package/controller/lib/utils.js.map +1 -1
  70. package/controller/package.json +2 -2
  71. package/lib/hotspot/circle.js +110 -169
  72. package/lib/hotspot/circle.js.map +1 -1
  73. package/lib/hotspot/container.js +174 -260
  74. package/lib/hotspot/container.js.map +1 -1
  75. package/lib/hotspot/icons.js.map +1 -1
  76. package/lib/hotspot/image-konva-tooltip.js +65 -112
  77. package/lib/hotspot/image-konva-tooltip.js.map +1 -1
  78. package/lib/hotspot/index.js +135 -198
  79. package/lib/hotspot/index.js.map +1 -1
  80. package/lib/hotspot/polygon.js +150 -214
  81. package/lib/hotspot/polygon.js.map +1 -1
  82. package/lib/hotspot/rectangle.js +128 -185
  83. package/lib/hotspot/rectangle.js.map +1 -1
  84. package/lib/index.js +187 -256
  85. package/lib/index.js.map +1 -1
  86. package/lib/session-updater.js +12 -18
  87. package/lib/session-updater.js.map +1 -1
  88. package/package.json +14 -11
  89. package/src/__tests__/container.test.jsx +27 -175
  90. package/src/__tests__/index.test.js +70 -30
  91. package/src/hotspot/circle.jsx +2 -13
  92. package/src/hotspot/container.jsx +35 -50
  93. package/src/hotspot/index.jsx +16 -28
  94. package/src/hotspot/polygon.jsx +4 -13
  95. package/src/hotspot/rectangle.jsx +5 -15
  96. package/src/index.js +21 -12
  97. package/configure/src/__tests__/DeleteWidget.test.js +0 -64
  98. package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap +0 -192
  99. package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap +0 -562
  100. package/configure/src/__tests__/__snapshots__/root.test.js.snap +0 -469
  101. package/src/__tests__/__snapshots__/container.test.jsx.snap +0 -264
  102. package/src/__tests__/__snapshots__/index.test.js.snap +0 -81
  103. package/src/__tests__/__snapshots__/polygon.test.jsx.snap +0 -192
  104. package/src/__tests__/__snapshots__/rectangle.test.jsx.snap +0 -127
  105. package/src/__tests__/polygon.test.jsx +0 -230
  106. package/src/__tests__/rectangle.test.jsx +0 -232
@@ -1,268 +1,204 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- exports["default"] = void 0;
9
-
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
-
12
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
-
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
-
16
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
17
-
18
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19
-
20
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
21
-
22
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
23
-
7
+ exports.default = void 0;
24
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
25
-
26
9
  var _react = _interopRequireDefault(require("react"));
27
-
28
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
29
-
30
11
  var _reactKonva = require("react-konva");
31
-
32
- var _styles = require("@material-ui/core/styles");
33
-
34
12
  var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
35
-
36
13
  var _icons = require("./icons");
37
-
38
- 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); }; }
39
-
40
- 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; } }
41
-
42
- var PolygonComponent = /*#__PURE__*/function (_React$Component) {
43
- (0, _inherits2["default"])(PolygonComponent, _React$Component);
44
-
45
- var _super = _createSuper(PolygonComponent);
46
-
47
- function PolygonComponent(props) {
48
- var _this;
49
-
50
- (0, _classCallCheck2["default"])(this, PolygonComponent);
51
- _this = _super.call(this, props);
52
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPolygonCenter", function (points) {
53
- var x = points.map(function (_ref) {
54
- var x = _ref.x;
55
- return x;
56
- });
57
- var y = points.map(function (_ref2) {
58
- var y = _ref2.y;
59
- return y;
60
- });
61
- var minX = Math.min.apply(null, x);
62
- var maxX = Math.max.apply(null, x);
63
- var minY = Math.min.apply(null, y);
64
- var maxY = Math.max.apply(null, y);
14
+ class PolygonComponent extends _react.default.Component {
15
+ constructor(props) {
16
+ super(props);
17
+ (0, _defineProperty2.default)(this, "getPolygonCenter", points => {
18
+ const x = points.map(({
19
+ x
20
+ }) => x);
21
+ const y = points.map(({
22
+ y
23
+ }) => y);
24
+ const minX = Math.min.apply(null, x);
25
+ const maxX = Math.max.apply(null, x);
26
+ const minY = Math.min.apply(null, y);
27
+ const maxY = Math.max.apply(null, y);
65
28
  return [(minX + maxX) / 2, (minY + maxY) / 2];
66
29
  });
67
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parsePointsForKonva", function (points) {
68
- var parsedPoints = [];
69
- points.forEach(function (_ref3) {
70
- var x = _ref3.x,
71
- y = _ref3.y;
30
+ (0, _defineProperty2.default)(this, "parsePointsForKonva", points => {
31
+ const parsedPoints = [];
32
+ points.forEach(({
33
+ x,
34
+ y
35
+ }) => {
72
36
  parsedPoints.push(x);
73
37
  parsedPoints.push(y);
74
38
  });
75
39
  return parsedPoints;
76
40
  });
77
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
78
- var _this$props = _this.props,
79
- onClick = _this$props.onClick,
80
- id = _this$props.id,
81
- selected = _this$props.selected,
82
- disabled = _this$props.disabled;
83
-
41
+ (0, _defineProperty2.default)(this, "handleClick", e => {
42
+ const {
43
+ onClick,
44
+ id,
45
+ selected,
46
+ disabled
47
+ } = this.props;
84
48
  if (!disabled) {
85
49
  e.cancelBubble = true;
86
50
  onClick({
87
- id: id,
51
+ id,
88
52
  selected: !selected,
89
53
  selector: 'Mouse'
90
54
  });
91
55
  }
92
56
  });
93
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
94
- var disabled = _this.props.disabled;
95
-
57
+ (0, _defineProperty2.default)(this, "handleMouseEnter", () => {
58
+ const {
59
+ disabled
60
+ } = this.props;
96
61
  if (!disabled) {
97
62
  document.body.style.cursor = 'pointer';
98
63
  }
99
-
100
- _this.setState({
64
+ this.setState({
101
65
  hovered: true
102
66
  });
103
67
  });
104
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
68
+ (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
105
69
  document.body.style.cursor = 'default';
106
-
107
- _this.setState({
70
+ this.setState({
108
71
  hovered: false
109
72
  });
110
73
  });
111
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
112
- return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
113
- });
114
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
115
- return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
116
- });
117
- _this.state = {
74
+ (0, _defineProperty2.default)(this, "getEvaluateOutlineColor", (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red');
75
+ (0, _defineProperty2.default)(this, "getOutlineWidth", (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0);
76
+ this.state = {
118
77
  hovered: false
119
78
  };
120
- return _this;
121
79
  }
122
-
123
- (0, _createClass2["default"])(PolygonComponent, [{
124
- key: "render",
125
- value: function render() {
126
- var _this$props2 = this.props,
127
- classes = _this$props2.classes,
128
- hotspotColor = _this$props2.hotspotColor,
129
- isCorrect = _this$props2.isCorrect,
130
- isEvaluateMode = _this$props2.isEvaluateMode,
131
- hoverOutlineColor = _this$props2.hoverOutlineColor,
132
- outlineColor = _this$props2.outlineColor,
133
- selected = _this$props2.selected,
134
- points = _this$props2.points,
135
- evaluateText = _this$props2.evaluateText,
136
- strokeWidth = _this$props2.strokeWidth,
137
- scale = _this$props2.scale,
138
- markAsCorrect = _this$props2.markAsCorrect,
139
- selectedHotspotColor = _this$props2.selectedHotspotColor,
140
- showCorrectEnabled = _this$props2.showCorrectEnabled;
141
- var hovered = this.state.hovered;
142
- var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
143
- var outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
144
- var pointsParsed = this.parsePointsForKonva(points);
145
- var center = this.getPolygonCenter(points);
146
- var iconX = center[0];
147
- var iconY = center[1]; // "Show Correct Answer" Enabled:
148
- // - Correctly Selected: white checkmark in green circle
149
- // - Correctly Not Selected: none
150
- // - Incorrectly Selected: none
151
- // - Incorrectly Not Selected: white checkmark in green circle
152
- // "Show Correct Answer" Disabled:
153
- // - Correctly Selected:
154
- // - white checkmark in green circle
155
- // - heavy outline, as on “Gather”
156
- // - Correctly Not Selected: none
157
- // - Incorrectly Selected:
158
- // - white "X" in red circle
159
- // - heavy outline around the selection should appear in red
160
- // - Incorrectly Not Selected: white "X" in red circle
161
-
162
- var iconSrc;
163
-
164
- if (showCorrectEnabled) {
165
- if (selected && isCorrect || !selected && !isCorrect) {
80
+ render() {
81
+ const {
82
+ hotspotColor,
83
+ isCorrect,
84
+ isEvaluateMode,
85
+ hoverOutlineColor,
86
+ outlineColor,
87
+ selected,
88
+ points,
89
+ evaluateText,
90
+ strokeWidth,
91
+ scale,
92
+ markAsCorrect,
93
+ selectedHotspotColor,
94
+ showCorrectEnabled
95
+ } = this.props;
96
+ const {
97
+ hovered
98
+ } = this.state;
99
+ const outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
100
+ const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
101
+ const pointsParsed = this.parsePointsForKonva(points);
102
+ const center = this.getPolygonCenter(points);
103
+ const iconX = center[0];
104
+ const iconY = center[1];
105
+
106
+ // "Show Correct Answer" Enabled:
107
+ // - Correctly Selected: white checkmark in green circle
108
+ // - Correctly Not Selected: none
109
+ // - Incorrectly Selected: none
110
+ // - Incorrectly Not Selected: white checkmark in green circle
111
+ // "Show Correct Answer" Disabled:
112
+ // - Correctly Selected:
113
+ // - white checkmark in green circle
114
+ // - heavy outline, as on “Gather”
115
+ // - Correctly Not Selected: none
116
+ // - Incorrectly Selected:
117
+ // - white "X" in red circle
118
+ // - heavy outline around the selection should appear in red
119
+ // - Incorrectly Not Selected: white "X" in red circle
120
+ let iconSrc;
121
+ if (showCorrectEnabled) {
122
+ if (selected && isCorrect || !selected && !isCorrect) {
123
+ iconSrc = _icons.faCorrect;
124
+ }
125
+ } else {
126
+ if (selected) {
127
+ if (isCorrect) {
166
128
  iconSrc = _icons.faCorrect;
167
- }
168
- } else {
169
- if (selected) {
170
- if (isCorrect) {
171
- iconSrc = _icons.faCorrect;
172
- } else {
173
- iconSrc = _icons.faWrong;
174
- }
175
- } else if (!isCorrect) {
129
+ } else {
176
130
  iconSrc = _icons.faWrong;
177
131
  }
132
+ } else if (!isCorrect) {
133
+ iconSrc = _icons.faWrong;
178
134
  }
179
-
180
- var useHoveredStyle = hovered && hoverOutlineColor;
181
- var xValues = pointsParsed.filter(function (_, index) {
182
- return index % 2 === 0;
183
- }); // Even indices are x-coordinates
184
-
185
- var yValues = pointsParsed.filter(function (_, index) {
186
- return index % 2 !== 0;
187
- }); // Odd indices are y-coordinates
188
-
189
- var minX = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xValues));
190
- var maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xValues));
191
- var minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yValues));
192
- var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yValues));
193
- var rectX = minX;
194
- var rectY = minY;
195
- var rectWidth = maxX - minX;
196
- var rectHeight = maxY - minY;
197
- return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
198
- scaleX: scale,
199
- scaleY: scale
200
- }, useHoveredStyle && /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
201
- x: rectX,
202
- y: rectY,
203
- width: rectWidth,
204
- height: rectHeight,
205
- stroke: selected ? 'transparent' : hoverOutlineColor,
206
- strokeWidth: strokeWidth
207
- }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
208
- points: pointsParsed,
209
- closed: true,
210
- classes: classes.base,
211
- fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
212
- onClick: this.handleClick,
213
- onTap: this.handleClick,
214
- draggable: false,
215
- stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
216
- strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
217
- onMouseLeave: this.handleMouseLeave,
218
- onMouseEnter: this.handleMouseEnter
219
- }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_imageKonvaTooltip["default"], {
220
- src: iconSrc,
221
- x: iconX,
222
- y: iconY,
223
- tooltip: evaluateText
224
- }) : null);
225
135
  }
226
- }]);
227
- return PolygonComponent;
228
- }(_react["default"].Component);
229
-
230
- var styles = function styles() {
231
- return {
232
- base: {
233
- cursor: 'pointer',
136
+ const useHoveredStyle = hovered && hoverOutlineColor;
137
+ const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates
138
+ const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates
139
+
140
+ const minX = Math.min(...xValues);
141
+ const maxX = Math.max(...xValues);
142
+ const minY = Math.min(...yValues);
143
+ const maxY = Math.max(...yValues);
144
+ const rectX = minX;
145
+ const rectY = minY;
146
+ const rectWidth = maxX - minX;
147
+ const rectHeight = maxY - minY;
148
+ return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
149
+ scaleX: scale,
150
+ scaleY: scale
151
+ }, useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
152
+ x: rectX,
153
+ y: rectY,
154
+ width: rectWidth,
155
+ height: rectHeight,
156
+ stroke: selected ? 'transparent' : hoverOutlineColor,
157
+ strokeWidth: strokeWidth
158
+ }), /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
159
+ points: pointsParsed,
160
+ closed: true,
161
+ fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
162
+ onClick: this.handleClick,
163
+ onTap: this.handleClick,
164
+ draggable: false,
165
+ stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
166
+ strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
167
+ onMouseLeave: this.handleMouseLeave,
168
+ onMouseEnter: this.handleMouseEnter,
234
169
  opacity: 0.5,
235
- position: 'relative'
236
- }
237
- };
238
- };
239
-
170
+ cursor: "pointer",
171
+ position: "relative"
172
+ }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
173
+ src: iconSrc,
174
+ x: iconX,
175
+ y: iconY,
176
+ tooltip: evaluateText
177
+ }) : null);
178
+ }
179
+ }
240
180
  PolygonComponent.propTypes = {
241
- classes: _propTypes["default"].object.isRequired,
242
- hotspotColor: _propTypes["default"].string.isRequired,
243
- id: _propTypes["default"].string.isRequired,
244
- isCorrect: _propTypes["default"].bool.isRequired,
245
- isEvaluateMode: _propTypes["default"].bool.isRequired,
246
- hoverOutlineColor: _propTypes["default"].string,
247
- disabled: _propTypes["default"].bool.isRequired,
248
- onClick: _propTypes["default"].func.isRequired,
249
- outlineColor: _propTypes["default"].string.isRequired,
250
- points: _propTypes["default"].array.isRequired,
251
- selected: _propTypes["default"].bool.isRequired,
252
- evaluateText: _propTypes["default"].string,
253
- selectedHotspotColor: _propTypes["default"].string,
254
- strokeWidth: _propTypes["default"].number,
255
- scale: _propTypes["default"].number,
256
- markAsCorrect: _propTypes["default"].bool.isRequired,
257
- showCorrectEnabled: _propTypes["default"].bool.isRequired
181
+ hotspotColor: _propTypes.default.string.isRequired,
182
+ id: _propTypes.default.string.isRequired,
183
+ isCorrect: _propTypes.default.bool.isRequired,
184
+ isEvaluateMode: _propTypes.default.bool.isRequired,
185
+ hoverOutlineColor: _propTypes.default.string,
186
+ disabled: _propTypes.default.bool.isRequired,
187
+ onClick: _propTypes.default.func.isRequired,
188
+ outlineColor: _propTypes.default.string.isRequired,
189
+ points: _propTypes.default.array.isRequired,
190
+ selected: _propTypes.default.bool.isRequired,
191
+ evaluateText: _propTypes.default.string,
192
+ selectedHotspotColor: _propTypes.default.string,
193
+ strokeWidth: _propTypes.default.number,
194
+ scale: _propTypes.default.number,
195
+ markAsCorrect: _propTypes.default.bool.isRequired,
196
+ showCorrectEnabled: _propTypes.default.bool.isRequired
258
197
  };
259
198
  PolygonComponent.defaultProps = {
260
199
  evaluateText: null,
261
200
  strokeWidth: 5,
262
201
  scale: 1
263
202
  };
264
-
265
- var _default = (0, _styles.withStyles)(styles)(PolygonComponent);
266
-
267
- exports["default"] = _default;
203
+ var _default = exports.default = PolygonComponent;
268
204
  //# sourceMappingURL=polygon.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,gB;;;;;AACJ,4BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,yGAOA,UAACC,MAAD,EAAY;AAC7B,UAAMC,CAAC,GAAGD,MAAM,CAACE,GAAP,CAAW;AAAA,YAAGD,CAAH,QAAGA,CAAH;AAAA,eAAWA,CAAX;AAAA,OAAX,CAAV;AACA,UAAME,CAAC,GAAGH,MAAM,CAACE,GAAP,CAAW;AAAA,YAAGC,CAAH,SAAGA,CAAH;AAAA,eAAWA,CAAX;AAAA,OAAX,CAAV;AACA,UAAMC,IAAI,GAAGC,IAAI,CAACC,GAAL,CAASC,KAAT,CAAe,IAAf,EAAqBN,CAArB,CAAb;AACA,UAAMO,IAAI,GAAGH,IAAI,CAACI,GAAL,CAASF,KAAT,CAAe,IAAf,EAAqBN,CAArB,CAAb;AACA,UAAMS,IAAI,GAAGL,IAAI,CAACC,GAAL,CAASC,KAAT,CAAe,IAAf,EAAqBJ,CAArB,CAAb;AACA,UAAMQ,IAAI,GAAGN,IAAI,CAACI,GAAL,CAASF,KAAT,CAAe,IAAf,EAAqBJ,CAArB,CAAb;AACA,aAAO,CAAC,CAACC,IAAI,GAAGI,IAAR,IAAgB,CAAjB,EAAoB,CAACE,IAAI,GAAGC,IAAR,IAAgB,CAApC,CAAP;AACD,KAfkB;AAAA,4GAiBG,UAACX,MAAD,EAAY;AAChC,UAAMY,YAAY,GAAG,EAArB;AACAZ,MAAAA,MAAM,CAACa,OAAP,CAAe,iBAAc;AAAA,YAAXZ,CAAW,SAAXA,CAAW;AAAA,YAARE,CAAQ,SAARA,CAAQ;AAC3BS,QAAAA,YAAY,CAACE,IAAb,CAAkBb,CAAlB;AACAW,QAAAA,YAAY,CAACE,IAAb,CAAkBX,CAAlB;AACD,OAHD;AAIA,aAAOS,YAAP;AACD,KAxBkB;AAAA,oGA0BL,UAACG,CAAD,EAAO;AACnB,wBAA4C,MAAKhB,KAAjD;AAAA,UAAQiB,OAAR,eAAQA,OAAR;AAAA,UAAiBC,EAAjB,eAAiBA,EAAjB;AAAA,UAAqBC,QAArB,eAAqBA,QAArB;AAAA,UAA+BC,QAA/B,eAA+BA,QAA/B;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,CAAC,CAACK,YAAF,GAAiB,IAAjB;AACAJ,QAAAA,OAAO,CAAC;AAAEC,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,QAAQ,EAAE,CAACA,QAAjB;AAA2BG,UAAAA,QAAQ,EAAE;AAArC,SAAD,CAAP;AACD;AACF,KAjCkB;AAAA,yGAmCA,YAAM;AACvB,UAAQF,QAAR,GAAqB,MAAKpB,KAA1B,CAAQoB,QAAR;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbG,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD;;AACD,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KA1CkB;AAAA,yGA4CA,YAAM;AACvBL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;;AACA,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KA/CkB;AAAA,gHAiDO,UAACC,SAAD,EAAYC,aAAZ,EAA2BC,YAA3B;AAAA,aACxBD,aAAa,GAAG,OAAH,GAAaD,SAAS,GAAGE,YAAH,GAAkB,KAD7B;AAAA,KAjDP;AAAA,wGAoDD,UAACC,kBAAD,EAAqBb,QAArB,EAA+BW,aAA/B,EAA8CG,WAA9C;AAAA,aAChBH,aAAa,IAAK,CAACA,aAAD,IAAkB,CAACE,kBAAnB,IAAyCb,QAA3D,GAAuEc,WAAvE,GAAqF,CADrE;AAAA,KApDC;AAEjB,UAAKC,KAAL,GAAa;AACXN,MAAAA,OAAO,EAAE;AADE,KAAb;AAFiB;AAKlB;;;;WAkDD,kBAAS;AACP,yBAeI,KAAK5B,KAfT;AAAA,UACEmC,OADF,gBACEA,OADF;AAAA,UAEEC,YAFF,gBAEEA,YAFF;AAAA,UAGEP,SAHF,gBAGEA,SAHF;AAAA,UAIEQ,cAJF,gBAIEA,cAJF;AAAA,UAKEC,iBALF,gBAKEA,iBALF;AAAA,UAMEP,YANF,gBAMEA,YANF;AAAA,UAOEZ,QAPF,gBAOEA,QAPF;AAAA,UAQElB,MARF,gBAQEA,MARF;AAAA,UASEsC,YATF,gBASEA,YATF;AAAA,UAUEN,WAVF,gBAUEA,WAVF;AAAA,UAWEO,KAXF,gBAWEA,KAXF;AAAA,UAYEV,aAZF,gBAYEA,aAZF;AAAA,UAaEW,oBAbF,gBAaEA,oBAbF;AAAA,UAcET,kBAdF,gBAcEA,kBAdF;AAiBA,UAAQJ,OAAR,GAAoB,KAAKM,KAAzB,CAAQN,OAAR;AAEA,UAAMc,kBAAkB,GAAGL,cAAc,GACrC,KAAKM,uBAAL,CAA6Bd,SAA7B,EAAwCC,aAAxC,EAAuDC,YAAvD,CADqC,GAErCA,YAFJ;AAGA,UAAMa,YAAY,GAAG,KAAKC,eAAL,CAAqBb,kBAArB,EAAyCb,QAAzC,EAAmDW,aAAnD,EAAkEG,WAAlE,CAArB;AAEA,UAAMa,YAAY,GAAG,KAAKC,mBAAL,CAAyB9C,MAAzB,CAArB;AACA,UAAM+C,MAAM,GAAG,KAAKC,gBAAL,CAAsBhD,MAAtB,CAAf;AACA,UAAMiD,KAAK,GAAGF,MAAM,CAAC,CAAD,CAApB;AACA,UAAMG,KAAK,GAAGH,MAAM,CAAC,CAAD,CAApB,CA5BO,CA8BP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,UAAII,OAAJ;;AAEA,UAAIpB,kBAAJ,EAAwB;AACtB,YAAKb,QAAQ,IAAIU,SAAb,IAA4B,CAACV,QAAD,IAAa,CAACU,SAA9C,EAA0D;AACxDuB,UAAAA,OAAO,GAAGC,gBAAV;AACD;AACF,OAJD,MAIO;AACL,YAAIlC,QAAJ,EAAc;AACZ,cAAIU,SAAJ,EAAe;AACbuB,YAAAA,OAAO,GAAGC,gBAAV;AACD,WAFD,MAEO;AACLD,YAAAA,OAAO,GAAGE,cAAV;AACD;AACF,SAND,MAMO,IAAI,CAACzB,SAAL,EAAgB;AACrBuB,UAAAA,OAAO,GAAGE,cAAV;AACD;AACF;;AACD,UAAMC,eAAe,GAAG3B,OAAO,IAAIU,iBAAnC;AAEA,UAAMkB,OAAO,GAAGV,YAAY,CAACW,MAAb,CAAoB,UAACC,CAAD,EAAIC,KAAJ;AAAA,eAAcA,KAAK,GAAG,CAAR,KAAc,CAA5B;AAAA,OAApB,CAAhB,CA/DO,CA+D6D;;AACpE,UAAMC,OAAO,GAAGd,YAAY,CAACW,MAAb,CAAoB,UAACC,CAAD,EAAIC,KAAJ;AAAA,eAAcA,KAAK,GAAG,CAAR,KAAc,CAA5B;AAAA,OAApB,CAAhB,CAhEO,CAgE6D;;AAEpE,UAAMtD,IAAI,GAAGC,IAAI,CAACC,GAAL,OAAAD,IAAI,sCAAQkD,OAAR,EAAjB;AACA,UAAM/C,IAAI,GAAGH,IAAI,CAACI,GAAL,OAAAJ,IAAI,sCAAQkD,OAAR,EAAjB;AACA,UAAM7C,IAAI,GAAGL,IAAI,CAACC,GAAL,OAAAD,IAAI,sCAAQsD,OAAR,EAAjB;AACA,UAAMhD,IAAI,GAAGN,IAAI,CAACI,GAAL,OAAAJ,IAAI,sCAAQsD,OAAR,EAAjB;AAEA,UAAMC,KAAK,GAAGxD,IAAd;AACA,UAAMyD,KAAK,GAAGnD,IAAd;AACA,UAAMoD,SAAS,GAAGtD,IAAI,GAAGJ,IAAzB;AACA,UAAM2D,UAAU,GAAGpD,IAAI,GAAGD,IAA1B;AAEA,0BACE,gCAAC,iBAAD;AAAO,QAAA,MAAM,EAAE6B,KAAf;AAAsB,QAAA,MAAM,EAAEA;AAA9B,SACGe,eAAe,iBACd,gCAAC,gBAAD;AACE,QAAA,CAAC,EAAEM,KADL;AAEE,QAAA,CAAC,EAAEC,KAFL;AAGE,QAAA,KAAK,EAAEC,SAHT;AAIE,QAAA,MAAM,EAAEC,UAJV;AAKE,QAAA,MAAM,EAAE7C,QAAQ,GAAG,aAAH,GAAmBmB,iBALrC;AAME,QAAA,WAAW,EAAEL;AANf,QAFJ,eAWE,gCAAC,gBAAD;AACE,QAAA,MAAM,EAAEa,YADV;AAEE,QAAA,MAAM,EAAE,IAFV;AAGE,QAAA,OAAO,EAAEX,OAAO,CAAC8B,IAHnB;AAIE,QAAA,IAAI,EAAE9C,QAAQ,IAAIsB,oBAAZ,GAAkCA,oBAAlC,GAAyDL,YAJjE;AAKE,QAAA,OAAO,EAAE,KAAK8B,WALhB;AAME,QAAA,KAAK,EAAE,KAAKA,WANd;AAOE,QAAA,SAAS,EAAE,KAPb;AAQE,QAAA,MAAM,EAAEX,eAAe,IAAI,CAACpC,QAApB,GAA+B,aAA/B,GAA+CuB,kBARzD;AASE,QAAA,WAAW,EAAEa,eAAe,IAAI,CAACpC,QAApB,GAA+B,CAA/B,GAAmCyB,YATlD;AAUE,QAAA,YAAY,EAAE,KAAKuB,gBAVrB;AAWE,QAAA,YAAY,EAAE,KAAKC;AAXrB,QAXF,EAwBG/B,cAAc,IAAIe,OAAlB,gBAA4B,gCAAC,6BAAD;AAAgB,QAAA,GAAG,EAAEA,OAArB;AAA8B,QAAA,CAAC,EAAEF,KAAjC;AAAwC,QAAA,CAAC,EAAEC,KAA3C;AAAkD,QAAA,OAAO,EAAEZ;AAA3D,QAA5B,GAA0G,IAxB7G,CADF;AA4BD;;;EAhK4B8B,kBAAMC,S;;AAmKrC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBN,IAAAA,IAAI,EAAE;AACJvC,MAAAA,MAAM,EAAE,SADJ;AAEJ8C,MAAAA,OAAO,EAAE,GAFL;AAGJC,MAAAA,QAAQ,EAAE;AAHN;AADc,GAAP;AAAA,CAAf;;AAQA1E,gBAAgB,CAAC2E,SAAjB,GAA6B;AAC3BvC,EAAAA,OAAO,EAAEwC,sBAAUC,MAAV,CAAiBC,UADC;AAE3BzC,EAAAA,YAAY,EAAEuC,sBAAUG,MAAV,CAAiBD,UAFJ;AAG3B3D,EAAAA,EAAE,EAAEyD,sBAAUG,MAAV,CAAiBD,UAHM;AAI3BhD,EAAAA,SAAS,EAAE8C,sBAAUI,IAAV,CAAeF,UAJC;AAK3BxC,EAAAA,cAAc,EAAEsC,sBAAUI,IAAV,CAAeF,UALJ;AAM3BvC,EAAAA,iBAAiB,EAAEqC,sBAAUG,MANF;AAO3B1D,EAAAA,QAAQ,EAAEuD,sBAAUI,IAAV,CAAeF,UAPE;AAQ3B5D,EAAAA,OAAO,EAAE0D,sBAAUK,IAAV,CAAeH,UARG;AAS3B9C,EAAAA,YAAY,EAAE4C,sBAAUG,MAAV,CAAiBD,UATJ;AAU3B5E,EAAAA,MAAM,EAAE0E,sBAAUM,KAAV,CAAgBJ,UAVG;AAW3B1D,EAAAA,QAAQ,EAAEwD,sBAAUI,IAAV,CAAeF,UAXE;AAY3BtC,EAAAA,YAAY,EAAEoC,sBAAUG,MAZG;AAa3BrC,EAAAA,oBAAoB,EAAEkC,sBAAUG,MAbL;AAc3B7C,EAAAA,WAAW,EAAE0C,sBAAUO,MAdI;AAe3B1C,EAAAA,KAAK,EAAEmC,sBAAUO,MAfU;AAgB3BpD,EAAAA,aAAa,EAAE6C,sBAAUI,IAAV,CAAeF,UAhBH;AAiB3B7C,EAAAA,kBAAkB,EAAE2C,sBAAUI,IAAV,CAAeF;AAjBR,CAA7B;AAoBA9E,gBAAgB,CAACoF,YAAjB,GAAgC;AAC9B5C,EAAAA,YAAY,EAAE,IADgB;AAE9BN,EAAAA,WAAW,EAAE,CAFiB;AAG9BO,EAAAA,KAAK,EAAE;AAHuB,CAAhC;;eAMe,wBAAW+B,MAAX,EAAmBxE,gBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n getPolygonCenter = (points) => {\n const x = points.map(({ x }) => x);\n const y = points.map(({ y }) => y);\n const minX = Math.min.apply(null, x);\n const maxX = Math.max.apply(null, x);\n const minY = Math.min.apply(null, y);\n const maxY = Math.max.apply(null, y);\n return [(minX + maxX) / 2, (minY + maxY) / 2];\n };\n\n parsePointsForKonva = (points) => {\n const parsedPoints = [];\n points.forEach(({ x, y }) => {\n parsedPoints.push(x);\n parsedPoints.push(y);\n });\n return parsedPoints;\n };\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n classes,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const pointsParsed = this.parsePointsForKonva(points);\n const center = this.getPolygonCenter(points);\n const iconX = center[0];\n const iconY = center[1];\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n const useHoveredStyle = hovered && hoverOutlineColor;\n\n const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n const minX = Math.min(...xValues);\n const maxX = Math.max(...xValues);\n const minY = Math.min(...yValues);\n const maxY = Math.max(...yValues);\n\n const rectX = minX;\n const rectY = minY;\n const rectWidth = maxX - minX;\n const rectHeight = maxY - minY;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={selected ? 'transparent' : hoverOutlineColor}\n strokeWidth={strokeWidth}\n />\n )}\n <Line\n points={pointsParsed}\n closed={true}\n classes={classes.base}\n fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nPolygonComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.bool.isRequired,\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.array.isRequired,\n selected: PropTypes.bool.isRequired,\n evaluateText: PropTypes.string,\n selectedHotspotColor: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n evaluateText: null,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
1
+ {"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","scaleX","scaleY","Rect","width","height","stroke","Line","closed","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","opacity","position","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n getPolygonCenter = (points) => {\n const x = points.map(({ x }) => x);\n const y = points.map(({ y }) => y);\n const minX = Math.min.apply(null, x);\n const maxX = Math.max.apply(null, x);\n const minY = Math.min.apply(null, y);\n const maxY = Math.max.apply(null, y);\n return [(minX + maxX) / 2, (minY + maxY) / 2];\n };\n\n parsePointsForKonva = (points) => {\n const parsedPoints = [];\n points.forEach(({ x, y }) => {\n parsedPoints.push(x);\n parsedPoints.push(y);\n });\n return parsedPoints;\n };\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const pointsParsed = this.parsePointsForKonva(points);\n const center = this.getPolygonCenter(points);\n const iconX = center[0];\n const iconY = center[1];\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n const useHoveredStyle = hovered && hoverOutlineColor;\n\n const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n const minX = Math.min(...xValues);\n const maxX = Math.max(...xValues);\n const minY = Math.min(...yValues);\n const maxY = Math.max(...yValues);\n\n const rectX = minX;\n const rectY = minY;\n const rectWidth = maxX - minX;\n const rectHeight = maxY - minY;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={selected ? 'transparent' : hoverOutlineColor}\n strokeWidth={strokeWidth}\n />\n )}\n <Line\n points={pointsParsed}\n closed={true}\n fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n opacity={0.5}\n cursor='pointer'\n position='relative'\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nPolygonComponent.propTypes = {\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.bool.isRequired,\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.array.isRequired,\n selected: PropTypes.bool.isRequired,\n evaluateText: PropTypes.string,\n selectedHotspotColor: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n evaluateText: null,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}