@pie-element/hotspot 6.15.1 → 6.15.2-next.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/configure/package.json +1 -1
- package/controller/package.json +1 -1
- package/package.json +3 -3
- package/configure/lib/DeleteWidget.js +0 -79
- package/configure/lib/DeleteWidget.js.map +0 -1
- package/configure/lib/button.js +0 -61
- package/configure/lib/button.js.map +0 -1
- package/configure/lib/buttons/circle.js +0 -40
- package/configure/lib/buttons/circle.js.map +0 -1
- package/configure/lib/buttons/polygon.js +0 -46
- package/configure/lib/buttons/polygon.js.map +0 -1
- package/configure/lib/buttons/rectangle.js +0 -46
- package/configure/lib/buttons/rectangle.js.map +0 -1
- package/configure/lib/defaults.js +0 -143
- package/configure/lib/defaults.js.map +0 -1
- package/configure/lib/hotspot-circle.js +0 -246
- package/configure/lib/hotspot-circle.js.map +0 -1
- package/configure/lib/hotspot-container.js +0 -417
- package/configure/lib/hotspot-container.js.map +0 -1
- package/configure/lib/hotspot-drawable.js +0 -548
- package/configure/lib/hotspot-drawable.js.map +0 -1
- package/configure/lib/hotspot-palette.js +0 -154
- package/configure/lib/hotspot-palette.js.map +0 -1
- package/configure/lib/hotspot-polygon.js +0 -364
- package/configure/lib/hotspot-polygon.js.map +0 -1
- package/configure/lib/hotspot-rectangle.js +0 -240
- package/configure/lib/hotspot-rectangle.js.map +0 -1
- package/configure/lib/icons.js +0 -7
- package/configure/lib/icons.js.map +0 -1
- package/configure/lib/index.js +0 -254
- package/configure/lib/index.js.map +0 -1
- package/configure/lib/root.js +0 -418
- package/configure/lib/root.js.map +0 -1
- package/configure/lib/shapes/circle.js +0 -115
- package/configure/lib/shapes/circle.js.map +0 -1
- package/configure/lib/shapes/polygon.js +0 -111
- package/configure/lib/shapes/polygon.js.map +0 -1
- package/configure/lib/shapes/rectagle.js +0 -115
- package/configure/lib/shapes/rectagle.js.map +0 -1
- package/configure/lib/upload-control.js +0 -68
- package/configure/lib/upload-control.js.map +0 -1
- package/configure/lib/utils.js +0 -237
- package/configure/lib/utils.js.map +0 -1
- package/controller/lib/defaults.js +0 -33
- package/controller/lib/defaults.js.map +0 -1
- package/controller/lib/index.js +0 -289
- package/controller/lib/index.js.map +0 -1
- package/controller/lib/utils.js +0 -54
- package/controller/lib/utils.js.map +0 -1
- package/lib/hotspot/circle.js +0 -191
- package/lib/hotspot/circle.js.map +0 -1
- package/lib/hotspot/container.js +0 -282
- package/lib/hotspot/container.js.map +0 -1
- package/lib/hotspot/icons.js +0 -8
- package/lib/hotspot/icons.js.map +0 -1
- package/lib/hotspot/index.js +0 -209
- package/lib/hotspot/index.js.map +0 -1
- package/lib/hotspot/polygon.js +0 -225
- package/lib/hotspot/polygon.js.map +0 -1
- package/lib/hotspot/rectangle.js +0 -207
- package/lib/hotspot/rectangle.js.map +0 -1
- package/lib/index.js +0 -114
- package/lib/index.js.map +0 -1
- package/lib/session-updater.js +0 -30
- package/lib/session-updater.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
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","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","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 } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\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 });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\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 outlineColor,\n selected,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\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\n return (\n <Group scaleX={scale} scaleY={scale}>\n <Line\n points={pointsParsed}\n closed={true}\n classes={classes.base}\n fill={hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={outlineColorParsed}\n strokeWidth={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 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 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"}
|
package/lib/hotspot/rectangle.js
DELETED
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
|
|
14
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
-
|
|
16
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
23
|
-
|
|
24
|
-
var _react = _interopRequireDefault(require("react"));
|
|
25
|
-
|
|
26
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
|
-
|
|
28
|
-
var _reactKonva = require("react-konva");
|
|
29
|
-
|
|
30
|
-
var _styles = require("@material-ui/core/styles");
|
|
31
|
-
|
|
32
|
-
var _icons = require("@pie-lib/pie-toolbox/icons");
|
|
33
|
-
|
|
34
|
-
var _icons2 = require("./icons");
|
|
35
|
-
|
|
36
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
37
|
-
|
|
38
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
39
|
-
|
|
40
|
-
var RectComponent = /*#__PURE__*/function (_React$Component) {
|
|
41
|
-
(0, _inherits2["default"])(RectComponent, _React$Component);
|
|
42
|
-
|
|
43
|
-
var _super = _createSuper(RectComponent);
|
|
44
|
-
|
|
45
|
-
function RectComponent(props) {
|
|
46
|
-
var _this;
|
|
47
|
-
|
|
48
|
-
(0, _classCallCheck2["default"])(this, RectComponent);
|
|
49
|
-
_this = _super.call(this, props);
|
|
50
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
|
|
51
|
-
var _this$props = _this.props,
|
|
52
|
-
onClick = _this$props.onClick,
|
|
53
|
-
id = _this$props.id,
|
|
54
|
-
selected = _this$props.selected,
|
|
55
|
-
disabled = _this$props.disabled;
|
|
56
|
-
|
|
57
|
-
if (!disabled) {
|
|
58
|
-
e.cancelBubble = true;
|
|
59
|
-
onClick({
|
|
60
|
-
id: id,
|
|
61
|
-
selected: !selected
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
|
|
66
|
-
var disabled = _this.props.disabled;
|
|
67
|
-
|
|
68
|
-
if (!disabled) {
|
|
69
|
-
document.body.style.cursor = 'pointer';
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
|
|
73
|
-
document.body.style.cursor = 'default';
|
|
74
|
-
});
|
|
75
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
|
|
76
|
-
return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
|
|
77
|
-
});
|
|
78
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
|
|
79
|
-
return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
|
|
80
|
-
});
|
|
81
|
-
return _this;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
(0, _createClass2["default"])(RectComponent, [{
|
|
85
|
-
key: "render",
|
|
86
|
-
value: function render() {
|
|
87
|
-
var _this$props2 = this.props,
|
|
88
|
-
classes = _this$props2.classes,
|
|
89
|
-
height = _this$props2.height,
|
|
90
|
-
hotspotColor = _this$props2.hotspotColor,
|
|
91
|
-
isCorrect = _this$props2.isCorrect,
|
|
92
|
-
isEvaluateMode = _this$props2.isEvaluateMode,
|
|
93
|
-
outlineColor = _this$props2.outlineColor,
|
|
94
|
-
selected = _this$props2.selected,
|
|
95
|
-
width = _this$props2.width,
|
|
96
|
-
x = _this$props2.x,
|
|
97
|
-
y = _this$props2.y,
|
|
98
|
-
evaluateText = _this$props2.evaluateText,
|
|
99
|
-
strokeWidth = _this$props2.strokeWidth,
|
|
100
|
-
scale = _this$props2.scale,
|
|
101
|
-
markAsCorrect = _this$props2.markAsCorrect,
|
|
102
|
-
showCorrectEnabled = _this$props2.showCorrectEnabled;
|
|
103
|
-
var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
|
|
104
|
-
var outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
|
|
105
|
-
var iconX = x + width / 2 - 10;
|
|
106
|
-
var iconY = y + height / 2 - 10; // "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
|
-
|
|
121
|
-
var iconSrc;
|
|
122
|
-
|
|
123
|
-
if (showCorrectEnabled) {
|
|
124
|
-
if (selected && isCorrect || !selected && !isCorrect) {
|
|
125
|
-
iconSrc = _icons2.faCorrect;
|
|
126
|
-
}
|
|
127
|
-
} else {
|
|
128
|
-
if (selected) {
|
|
129
|
-
if (isCorrect) {
|
|
130
|
-
iconSrc = _icons2.faCorrect;
|
|
131
|
-
} else {
|
|
132
|
-
iconSrc = _icons2.faWrong;
|
|
133
|
-
}
|
|
134
|
-
} else if (!isCorrect) {
|
|
135
|
-
iconSrc = _icons2.faWrong;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
|
|
140
|
-
scaleX: scale,
|
|
141
|
-
scaleY: scale
|
|
142
|
-
}, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
|
|
143
|
-
classes: classes.base,
|
|
144
|
-
width: width,
|
|
145
|
-
height: height,
|
|
146
|
-
fill: hotspotColor,
|
|
147
|
-
onClick: this.handleClick,
|
|
148
|
-
onTap: this.handleClick,
|
|
149
|
-
draggable: false,
|
|
150
|
-
stroke: outlineColorParsed,
|
|
151
|
-
strokeWidth: outlineWidth,
|
|
152
|
-
onMouseLeave: this.handleMouseLeave,
|
|
153
|
-
onMouseEnter: this.handleMouseEnter,
|
|
154
|
-
x: x,
|
|
155
|
-
y: y
|
|
156
|
-
}), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
|
|
157
|
-
src: iconSrc,
|
|
158
|
-
x: iconX,
|
|
159
|
-
y: iconY,
|
|
160
|
-
tooltip: evaluateText
|
|
161
|
-
}) : null);
|
|
162
|
-
}
|
|
163
|
-
}]);
|
|
164
|
-
return RectComponent;
|
|
165
|
-
}(_react["default"].Component);
|
|
166
|
-
|
|
167
|
-
var styles = function styles() {
|
|
168
|
-
return {
|
|
169
|
-
base: {
|
|
170
|
-
cursor: 'pointer',
|
|
171
|
-
opacity: 0.5,
|
|
172
|
-
position: 'relative'
|
|
173
|
-
}
|
|
174
|
-
};
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
RectComponent.propTypes = {
|
|
178
|
-
classes: _propTypes["default"].object.isRequired,
|
|
179
|
-
height: _propTypes["default"].number.isRequired,
|
|
180
|
-
hotspotColor: _propTypes["default"].string.isRequired,
|
|
181
|
-
id: _propTypes["default"].string.isRequired,
|
|
182
|
-
isCorrect: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
|
|
183
|
-
isEvaluateMode: _propTypes["default"].bool.isRequired,
|
|
184
|
-
disabled: _propTypes["default"].bool.isRequired,
|
|
185
|
-
onClick: _propTypes["default"].func.isRequired,
|
|
186
|
-
outlineColor: _propTypes["default"].string.isRequired,
|
|
187
|
-
selected: _propTypes["default"].bool.isRequired,
|
|
188
|
-
width: _propTypes["default"].number.isRequired,
|
|
189
|
-
x: _propTypes["default"].number.isRequired,
|
|
190
|
-
y: _propTypes["default"].number.isRequired,
|
|
191
|
-
evaluateText: _propTypes["default"].string,
|
|
192
|
-
strokeWidth: _propTypes["default"].number,
|
|
193
|
-
scale: _propTypes["default"].number,
|
|
194
|
-
markAsCorrect: _propTypes["default"].bool.isRequired,
|
|
195
|
-
showCorrectEnabled: _propTypes["default"].bool.isRequired
|
|
196
|
-
};
|
|
197
|
-
RectComponent.defaultProps = {
|
|
198
|
-
isCorrect: false,
|
|
199
|
-
evaluateText: null,
|
|
200
|
-
strokeWidth: 5,
|
|
201
|
-
scale: 1
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
var _default = (0, _styles.withStyles)(styles)(RectComponent);
|
|
205
|
-
|
|
206
|
-
exports["default"] = _default;
|
|
207
|
-
//# sourceMappingURL=rectangle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n constructor(props) {\n super(props);\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 });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\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 height,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const iconX = x + width / 2 - 10;\n const iconY = y + height / 2 - 10;\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\n return (\n <Group scaleX={scale} scaleY={scale}>\n <Rect\n classes={classes.base}\n width={width}\n height={height}\n fill={hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={outlineColorParsed}\n strokeWidth={outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n x={x}\n y={y}\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\nRectComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n height: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n isEvaluateMode: PropTypes.bool.isRequired,\n disabled: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n width: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n evaluateText: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}
|
package/lib/index.js
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
|
|
14
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
-
|
|
16
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
17
|
-
|
|
18
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
19
|
-
|
|
20
|
-
var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
|
|
21
|
-
|
|
22
|
-
var _react = _interopRequireDefault(require("react"));
|
|
23
|
-
|
|
24
|
-
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
25
|
-
|
|
26
|
-
var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
|
|
27
|
-
|
|
28
|
-
var _piePlayerEvents = require("@pie-framework/pie-player-events");
|
|
29
|
-
|
|
30
|
-
var _hotspot = _interopRequireDefault(require("./hotspot"));
|
|
31
|
-
|
|
32
|
-
var _sessionUpdater = require("./session-updater");
|
|
33
|
-
|
|
34
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
35
|
-
|
|
36
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
37
|
-
|
|
38
|
-
var Hotspot = /*#__PURE__*/function (_HTMLElement) {
|
|
39
|
-
(0, _inherits2["default"])(Hotspot, _HTMLElement);
|
|
40
|
-
|
|
41
|
-
var _super = _createSuper(Hotspot);
|
|
42
|
-
|
|
43
|
-
function Hotspot() {
|
|
44
|
-
(0, _classCallCheck2["default"])(this, Hotspot);
|
|
45
|
-
return _super.apply(this, arguments);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
(0, _createClass2["default"])(Hotspot, [{
|
|
49
|
-
key: "model",
|
|
50
|
-
set: function set(m) {
|
|
51
|
-
this._model = m;
|
|
52
|
-
this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
|
|
53
|
-
|
|
54
|
-
this._render();
|
|
55
|
-
}
|
|
56
|
-
}, {
|
|
57
|
-
key: "isComplete",
|
|
58
|
-
value: function isComplete() {
|
|
59
|
-
if (!this._session) {
|
|
60
|
-
return false;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return Array.isArray(this._session.answers) && this._session.answers.length > 0;
|
|
64
|
-
}
|
|
65
|
-
}, {
|
|
66
|
-
key: "session",
|
|
67
|
-
get: function get() {
|
|
68
|
-
return this._session;
|
|
69
|
-
},
|
|
70
|
-
set: function set(s) {
|
|
71
|
-
if (s && !s.answers) {
|
|
72
|
-
s.answers = [];
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
this._session = s;
|
|
76
|
-
|
|
77
|
-
this._render();
|
|
78
|
-
}
|
|
79
|
-
}, {
|
|
80
|
-
key: "onSelectChoice",
|
|
81
|
-
value: function onSelectChoice(data) {
|
|
82
|
-
(0, _sessionUpdater.updateSessionValue)(this._session, this._model, data);
|
|
83
|
-
this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
|
|
84
|
-
|
|
85
|
-
this._render();
|
|
86
|
-
}
|
|
87
|
-
}, {
|
|
88
|
-
key: "connectedCallback",
|
|
89
|
-
value: function connectedCallback() {
|
|
90
|
-
this._render();
|
|
91
|
-
}
|
|
92
|
-
}, {
|
|
93
|
-
key: "_render",
|
|
94
|
-
value: function _render() {
|
|
95
|
-
var _this = this;
|
|
96
|
-
|
|
97
|
-
if (this._model && this._session) {
|
|
98
|
-
var el = /*#__PURE__*/_react["default"].createElement(_hotspot["default"], {
|
|
99
|
-
model: this._model,
|
|
100
|
-
session: this._session,
|
|
101
|
-
onSelectChoice: this.onSelectChoice.bind(this)
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
_reactDom["default"].render(el, this, function () {
|
|
105
|
-
(0, _mathRenderingAccessible.renderMath)(_this);
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}]);
|
|
110
|
-
return Hotspot;
|
|
111
|
-
}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
|
|
112
|
-
|
|
113
|
-
exports["default"] = Hotspot;
|
|
114
|
-
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.js"],"names":["Hotspot","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CAAmB,IAAIC,8BAAJ,CAAkB,KAAKC,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,UAAL,EAA9C,EAAiE,CAAC,CAAC,KAAKL,MAAxE,CAAnB;;AACA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aAAOC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CAA9E;AACD;;;SAWD,eAAc;AACZ,aAAO,KAAKJ,QAAZ;AACD,K;SAXD,aAAYK,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAMD,wBAAeO,IAAf,EAAqB;AACnB,8CAAmB,KAAKN,QAAxB,EAAkC,KAAKP,MAAvC,EAA+Ca,IAA/C;AAEA,WAAKZ,aAAL,CAAmB,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CAAnB;;AAEA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,mBAApB,EAAsC;AAC/CC,UAAAA,KAAK,EAAE,KAAKnB,MADmC;AAE/CoB,UAAAA,OAAO,EAAE,KAAKb,QAFiC;AAG/Cc,UAAAA,cAAc,EAAE,KAAKA,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAH+B,SAAtC,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,mDAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDArDkCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._render();\n }\n\n isComplete() {\n if (!this._session) {\n return false;\n }\n\n return Array.isArray(this._session.answers) && this._session.answers.length > 0;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n onSelectChoice(data) {\n updateSessionValue(this._session, this._model, data);\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n connectedCallback() {\n this._render();\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(HotspotComponent, {\n model: this._model,\n session: this._session,\n onSelectChoice: this.onSelectChoice.bind(this),\n });\n\n ReactDOM.render(el, this, () => {\n renderMath(this);\n });\n }\n }\n}\n"],"file":"index.js"}
|
package/lib/session-updater.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.updateSessionValue = updateSessionValue;
|
|
7
|
-
|
|
8
|
-
function updateSessionValue(session, model, data) {
|
|
9
|
-
var id = data.id,
|
|
10
|
-
selected = data.selected;
|
|
11
|
-
var multipleCorrect = model.multipleCorrect;
|
|
12
|
-
session.answers = session.answers || [];
|
|
13
|
-
|
|
14
|
-
if (!selected) {
|
|
15
|
-
session.answers = session.answers.filter(function (answer) {
|
|
16
|
-
return answer.id !== id;
|
|
17
|
-
});
|
|
18
|
-
} else {
|
|
19
|
-
var item = {
|
|
20
|
-
id: id
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
if (multipleCorrect) {
|
|
24
|
-
session.answers.push(item);
|
|
25
|
-
} else {
|
|
26
|
-
session.answers = [item];
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=session-updater.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push"],"mappings":";;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AACvD,MAAQC,EAAR,GAAyBD,IAAzB,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAyBF,IAAzB,CAAYE,QAAZ;AACA,MAAQC,eAAR,GAA4BJ,KAA5B,CAAQI,eAAR;AACAL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACL,EAAP,KAAcA,EAA1B;AAAA,KAAvB,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD;AACF;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n const { id, selected } = data;\n const { multipleCorrect } = model;\n session.answers = session.answers || [];\n\n if (!selected) {\n session.answers = session.answers.filter((answer) => answer.id !== id);\n } else {\n const item = { id };\n if (multipleCorrect) {\n session.answers.push(item);\n } else {\n session.answers = [item];\n }\n }\n}\n"],"file":"session-updater.js"}
|