@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.
- package/CHANGELOG.md +0 -11
- package/configure/CHANGELOG.md +0 -11
- package/configure/lib/DeleteWidget.js +30 -43
- package/configure/lib/DeleteWidget.js.map +1 -1
- package/configure/lib/button.js +26 -45
- package/configure/lib/button.js.map +1 -1
- package/configure/lib/buttons/circle.js +20 -27
- package/configure/lib/buttons/circle.js.map +1 -1
- package/configure/lib/buttons/polygon.js +26 -33
- package/configure/lib/buttons/polygon.js.map +1 -1
- package/configure/lib/buttons/rectangle.js +26 -33
- package/configure/lib/buttons/rectangle.js.map +1 -1
- package/configure/lib/defaults.js +2 -3
- package/configure/lib/defaults.js.map +1 -1
- package/configure/lib/hotspot-circle.js +132 -198
- package/configure/lib/hotspot-circle.js.map +1 -1
- package/configure/lib/hotspot-container.js +250 -355
- package/configure/lib/hotspot-container.js.map +1 -1
- package/configure/lib/hotspot-drawable.js +360 -472
- package/configure/lib/hotspot-drawable.js.map +1 -1
- package/configure/lib/hotspot-palette.js +92 -139
- package/configure/lib/hotspot-palette.js.map +1 -1
- package/configure/lib/hotspot-polygon.js +212 -317
- package/configure/lib/hotspot-polygon.js.map +1 -1
- package/configure/lib/hotspot-rectangle.js +128 -192
- package/configure/lib/hotspot-rectangle.js.map +1 -1
- package/configure/lib/icons.js.map +1 -1
- package/configure/lib/image-konva.js +46 -86
- package/configure/lib/image-konva.js.map +1 -1
- package/configure/lib/index.js +162 -222
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/root.js +302 -394
- package/configure/lib/root.js.map +1 -1
- package/configure/lib/shapes/circle.js +69 -101
- package/configure/lib/shapes/circle.js.map +1 -1
- package/configure/lib/shapes/index.js +4 -12
- package/configure/lib/shapes/index.js.map +1 -1
- package/configure/lib/shapes/polygon.js +64 -96
- package/configure/lib/shapes/polygon.js.map +1 -1
- package/configure/lib/shapes/rectagle.js +69 -101
- package/configure/lib/shapes/rectagle.js.map +1 -1
- package/configure/lib/shapes/utils.js +2 -8
- package/configure/lib/shapes/utils.js.map +1 -1
- package/configure/lib/upload-control.js +25 -52
- package/configure/lib/upload-control.js.map +1 -1
- package/configure/lib/utils.js +84 -137
- package/configure/lib/utils.js.map +1 -1
- package/configure/package.json +11 -10
- package/configure/src/__tests__/hotspot-container.test.js +50 -19
- package/configure/src/__tests__/hotspot-drawable.test.js +55 -34
- package/configure/src/__tests__/index.test.js +167 -5
- package/configure/src/__tests__/root.test.js +89 -63
- package/configure/src/button.jsx +12 -20
- package/configure/src/hotspot-circle.jsx +5 -18
- package/configure/src/hotspot-container.jsx +82 -98
- package/configure/src/hotspot-drawable.jsx +43 -45
- package/configure/src/hotspot-palette.jsx +45 -37
- package/configure/src/hotspot-polygon.jsx +4 -20
- package/configure/src/hotspot-rectangle.jsx +4 -17
- package/configure/src/index.js +12 -2
- package/configure/src/root.jsx +86 -80
- package/configure/src/upload-control.jsx +6 -16
- package/controller/CHANGELOG.md +0 -11
- package/controller/lib/defaults.js +2 -3
- package/controller/lib/defaults.js.map +1 -1
- package/controller/lib/index.js +151 -205
- package/controller/lib/index.js.map +1 -1
- package/controller/lib/utils.js +14 -34
- package/controller/lib/utils.js.map +1 -1
- package/controller/package.json +2 -2
- package/lib/hotspot/circle.js +110 -169
- package/lib/hotspot/circle.js.map +1 -1
- package/lib/hotspot/container.js +174 -260
- package/lib/hotspot/container.js.map +1 -1
- package/lib/hotspot/icons.js.map +1 -1
- package/lib/hotspot/image-konva-tooltip.js +65 -112
- package/lib/hotspot/image-konva-tooltip.js.map +1 -1
- package/lib/hotspot/index.js +135 -198
- package/lib/hotspot/index.js.map +1 -1
- package/lib/hotspot/polygon.js +150 -214
- package/lib/hotspot/polygon.js.map +1 -1
- package/lib/hotspot/rectangle.js +128 -185
- package/lib/hotspot/rectangle.js.map +1 -1
- package/lib/index.js +187 -256
- package/lib/index.js.map +1 -1
- package/lib/session-updater.js +12 -18
- package/lib/session-updater.js.map +1 -1
- package/package.json +14 -11
- package/src/__tests__/container.test.jsx +27 -175
- package/src/__tests__/index.test.js +70 -30
- package/src/hotspot/circle.jsx +2 -13
- package/src/hotspot/container.jsx +35 -50
- package/src/hotspot/index.jsx +16 -28
- package/src/hotspot/polygon.jsx +4 -13
- package/src/hotspot/rectangle.jsx +5 -15
- package/src/index.js +21 -12
- package/configure/src/__tests__/DeleteWidget.test.js +0 -64
- package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap +0 -192
- package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap +0 -562
- package/configure/src/__tests__/__snapshots__/root.test.js.snap +0 -469
- package/src/__tests__/__snapshots__/container.test.jsx.snap +0 -264
- package/src/__tests__/__snapshots__/index.test.js.snap +0 -81
- package/src/__tests__/__snapshots__/polygon.test.jsx.snap +0 -192
- package/src/__tests__/__snapshots__/rectangle.test.jsx.snap +0 -127
- package/src/__tests__/polygon.test.jsx +0 -230
- package/src/__tests__/rectangle.test.jsx +0 -232
package/lib/hotspot/polygon.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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
|
|
68
|
-
|
|
69
|
-
points.forEach(
|
|
70
|
-
|
|
71
|
-
|
|
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
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
|
51
|
+
id,
|
|
88
52
|
selected: !selected,
|
|
89
53
|
selector: 'Mouse'
|
|
90
54
|
});
|
|
91
55
|
}
|
|
92
56
|
});
|
|
93
|
-
(0, _defineProperty2
|
|
94
|
-
|
|
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
|
|
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
|
|
112
|
-
|
|
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
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
if (
|
|
165
|
-
|
|
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
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
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
|
-
|
|
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
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
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":[]}
|