@pie-element/hotspot 9.3.4-next.3 → 10.0.0-beta.0

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 (103) hide show
  1. package/configure/lib/DeleteWidget.js +30 -43
  2. package/configure/lib/DeleteWidget.js.map +1 -1
  3. package/configure/lib/button.js +26 -45
  4. package/configure/lib/button.js.map +1 -1
  5. package/configure/lib/buttons/circle.js +20 -27
  6. package/configure/lib/buttons/circle.js.map +1 -1
  7. package/configure/lib/buttons/polygon.js +26 -33
  8. package/configure/lib/buttons/polygon.js.map +1 -1
  9. package/configure/lib/buttons/rectangle.js +26 -33
  10. package/configure/lib/buttons/rectangle.js.map +1 -1
  11. package/configure/lib/defaults.js +2 -3
  12. package/configure/lib/defaults.js.map +1 -1
  13. package/configure/lib/hotspot-circle.js +132 -198
  14. package/configure/lib/hotspot-circle.js.map +1 -1
  15. package/configure/lib/hotspot-container.js +250 -355
  16. package/configure/lib/hotspot-container.js.map +1 -1
  17. package/configure/lib/hotspot-drawable.js +360 -472
  18. package/configure/lib/hotspot-drawable.js.map +1 -1
  19. package/configure/lib/hotspot-palette.js +92 -139
  20. package/configure/lib/hotspot-palette.js.map +1 -1
  21. package/configure/lib/hotspot-polygon.js +212 -317
  22. package/configure/lib/hotspot-polygon.js.map +1 -1
  23. package/configure/lib/hotspot-rectangle.js +128 -192
  24. package/configure/lib/hotspot-rectangle.js.map +1 -1
  25. package/configure/lib/icons.js.map +1 -1
  26. package/configure/lib/image-konva.js +46 -86
  27. package/configure/lib/image-konva.js.map +1 -1
  28. package/configure/lib/index.js +162 -222
  29. package/configure/lib/index.js.map +1 -1
  30. package/configure/lib/root.js +301 -393
  31. package/configure/lib/root.js.map +1 -1
  32. package/configure/lib/shapes/circle.js +69 -101
  33. package/configure/lib/shapes/circle.js.map +1 -1
  34. package/configure/lib/shapes/index.js +4 -12
  35. package/configure/lib/shapes/index.js.map +1 -1
  36. package/configure/lib/shapes/polygon.js +64 -96
  37. package/configure/lib/shapes/polygon.js.map +1 -1
  38. package/configure/lib/shapes/rectagle.js +69 -101
  39. package/configure/lib/shapes/rectagle.js.map +1 -1
  40. package/configure/lib/shapes/utils.js +2 -8
  41. package/configure/lib/shapes/utils.js.map +1 -1
  42. package/configure/lib/upload-control.js +25 -52
  43. package/configure/lib/upload-control.js.map +1 -1
  44. package/configure/lib/utils.js +84 -137
  45. package/configure/lib/utils.js.map +1 -1
  46. package/configure/package.json +11 -10
  47. package/configure/src/__tests__/hotspot-container.test.js +50 -19
  48. package/configure/src/__tests__/hotspot-drawable.test.js +55 -34
  49. package/configure/src/__tests__/index.test.js +167 -5
  50. package/configure/src/__tests__/root.test.js +89 -63
  51. package/configure/src/button.jsx +12 -20
  52. package/configure/src/hotspot-circle.jsx +5 -18
  53. package/configure/src/hotspot-container.jsx +82 -98
  54. package/configure/src/hotspot-drawable.jsx +43 -45
  55. package/configure/src/hotspot-palette.jsx +45 -37
  56. package/configure/src/hotspot-polygon.jsx +4 -20
  57. package/configure/src/hotspot-rectangle.jsx +4 -17
  58. package/configure/src/index.js +12 -2
  59. package/configure/src/root.jsx +85 -79
  60. package/configure/src/upload-control.jsx +6 -16
  61. package/controller/lib/defaults.js +2 -3
  62. package/controller/lib/defaults.js.map +1 -1
  63. package/controller/lib/index.js +151 -205
  64. package/controller/lib/index.js.map +1 -1
  65. package/controller/lib/utils.js +14 -34
  66. package/controller/lib/utils.js.map +1 -1
  67. package/controller/package.json +2 -2
  68. package/lib/hotspot/circle.js +110 -169
  69. package/lib/hotspot/circle.js.map +1 -1
  70. package/lib/hotspot/container.js +174 -260
  71. package/lib/hotspot/container.js.map +1 -1
  72. package/lib/hotspot/icons.js.map +1 -1
  73. package/lib/hotspot/image-konva-tooltip.js +65 -112
  74. package/lib/hotspot/image-konva-tooltip.js.map +1 -1
  75. package/lib/hotspot/index.js +135 -198
  76. package/lib/hotspot/index.js.map +1 -1
  77. package/lib/hotspot/polygon.js +150 -214
  78. package/lib/hotspot/polygon.js.map +1 -1
  79. package/lib/hotspot/rectangle.js +128 -185
  80. package/lib/hotspot/rectangle.js.map +1 -1
  81. package/lib/index.js +187 -256
  82. package/lib/index.js.map +1 -1
  83. package/lib/session-updater.js +12 -18
  84. package/lib/session-updater.js.map +1 -1
  85. package/package.json +14 -11
  86. package/src/__tests__/container.test.jsx +27 -175
  87. package/src/__tests__/index.test.js +70 -30
  88. package/src/hotspot/circle.jsx +2 -13
  89. package/src/hotspot/container.jsx +35 -50
  90. package/src/hotspot/index.jsx +16 -28
  91. package/src/hotspot/polygon.jsx +4 -13
  92. package/src/hotspot/rectangle.jsx +5 -15
  93. package/src/index.js +21 -12
  94. package/configure/src/__tests__/DeleteWidget.test.js +0 -64
  95. package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap +0 -192
  96. package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap +0 -562
  97. package/configure/src/__tests__/__snapshots__/root.test.js.snap +0 -469
  98. package/src/__tests__/__snapshots__/container.test.jsx.snap +0 -264
  99. package/src/__tests__/__snapshots__/index.test.js.snap +0 -81
  100. package/src/__tests__/__snapshots__/polygon.test.jsx.snap +0 -192
  101. package/src/__tests__/__snapshots__/rectangle.test.jsx.snap +0 -127
  102. package/src/__tests__/polygon.test.jsx +0 -230
  103. 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":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n getPolygonCenter = (points) => {\n const x = points.map(({ x }) => x);\n const y = points.map(({ y }) => y);\n const minX = Math.min.apply(null, x);\n const maxX = Math.max.apply(null, x);\n const minY = Math.min.apply(null, y);\n const maxY = Math.max.apply(null, y);\n return [(minX + maxX) / 2, (minY + maxY) / 2];\n };\n\n parsePointsForKonva = (points) => {\n const parsedPoints = [];\n points.forEach(({ x, y }) => {\n parsedPoints.push(x);\n parsedPoints.push(y);\n });\n return parsedPoints;\n };\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n classes,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const pointsParsed = this.parsePointsForKonva(points);\n const center = this.getPolygonCenter(points);\n const iconX = center[0];\n const iconY = center[1];\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n const useHoveredStyle = hovered && hoverOutlineColor;\n\n const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n const minX = Math.min(...xValues);\n const maxX = Math.max(...xValues);\n const minY = Math.min(...yValues);\n const maxY = Math.max(...yValues);\n\n const rectX = minX;\n const rectY = minY;\n const rectWidth = maxX - minX;\n const rectHeight = maxY - minY;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={selected ? 'transparent' : hoverOutlineColor}\n strokeWidth={strokeWidth}\n />\n )}\n <Line\n points={pointsParsed}\n closed={true}\n classes={classes.base}\n fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nPolygonComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.bool.isRequired,\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.array.isRequired,\n selected: PropTypes.bool.isRequired,\n evaluateText: PropTypes.string,\n selectedHotspotColor: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n evaluateText: null,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
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":[]}