@pie-element/hotspot 4.8.4-next.642 → 4.8.4-next.648
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 +2 -2
- package/lib/hotspot/container.js +13 -3
- package/lib/hotspot/container.js.map +1 -1
- package/lib/hotspot/index.js +47 -4
- package/lib/hotspot/index.js.map +1 -1
- package/lib/hotspot/polygon.js +10 -4
- package/lib/hotspot/polygon.js.map +1 -1
- package/lib/hotspot/rectangle.js +10 -4
- package/lib/hotspot/rectangle.js.map +1 -1
- package/package.json +2 -2
- package/src/hotspot/container.jsx +14 -2
- package/src/hotspot/index.jsx +37 -2
- package/src/hotspot/polygon.jsx +7 -4
- package/src/hotspot/rectangle.jsx +7 -4
package/configure/package.json
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"@material-ui/core": "^3.9.2",
|
|
11
11
|
"@material-ui/icons": "^3.0.2",
|
|
12
12
|
"@pie-framework/pie-configure-events": "^1.2.0",
|
|
13
|
-
"@pie-lib/config-ui": "^10.10.
|
|
14
|
-
"@pie-lib/editable-html": "^7.
|
|
13
|
+
"@pie-lib/config-ui": "^10.10.22",
|
|
14
|
+
"@pie-lib/editable-html": "^7.19.1",
|
|
15
15
|
"classnames": "^2.2.6",
|
|
16
16
|
"debug": "^3.1.0",
|
|
17
17
|
"konva": "^3.2.4",
|
package/lib/hotspot/container.js
CHANGED
|
@@ -91,8 +91,8 @@ var Container = /*#__PURE__*/function (_React$Component) {
|
|
|
91
91
|
var _this$props = this.props,
|
|
92
92
|
classes = _this$props.classes,
|
|
93
93
|
_this$props$dimension = _this$props.dimensions,
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
withProp = _this$props$dimension.width,
|
|
95
|
+
heightProp = _this$props$dimension.height,
|
|
96
96
|
disabled = _this$props.disabled,
|
|
97
97
|
hotspotColor = _this$props.hotspotColor,
|
|
98
98
|
imageUrl = _this$props.imageUrl,
|
|
@@ -102,7 +102,10 @@ var Container = /*#__PURE__*/function (_React$Component) {
|
|
|
102
102
|
_this$props$shapes = _this$props.shapes,
|
|
103
103
|
rectangles = _this$props$shapes.rectangles,
|
|
104
104
|
polygons = _this$props$shapes.polygons,
|
|
105
|
+
SCALE = _this$props.scale,
|
|
105
106
|
strokeWidth = _this$props.strokeWidth;
|
|
107
|
+
var width = withProp * SCALE;
|
|
108
|
+
var height = heightProp * SCALE;
|
|
106
109
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
107
110
|
className: classes.base,
|
|
108
111
|
style: {
|
|
@@ -111,6 +114,7 @@ var Container = /*#__PURE__*/function (_React$Component) {
|
|
|
111
114
|
}, imageUrl ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
112
115
|
className: classes.imageContainer
|
|
113
116
|
}, /*#__PURE__*/_react["default"].createElement("img", {
|
|
117
|
+
alt: "hotspot-image",
|
|
114
118
|
className: classes.image,
|
|
115
119
|
height: "auto",
|
|
116
120
|
src: imageUrl,
|
|
@@ -132,6 +136,7 @@ var Container = /*#__PURE__*/function (_React$Component) {
|
|
|
132
136
|
var isCorrect = isEvaluateMode ? _this2.correctness(shape.correct, selected) : undefined;
|
|
133
137
|
var evaluateText = isEvaluateMode ? _this2.getEvaluateText(shape.correct, selected) : null;
|
|
134
138
|
return /*#__PURE__*/_react["default"].createElement(_rectangle["default"], {
|
|
139
|
+
scale: SCALE,
|
|
135
140
|
isEvaluateMode: isEvaluateMode,
|
|
136
141
|
isCorrect: isCorrect,
|
|
137
142
|
evaluateText: evaluateText,
|
|
@@ -154,6 +159,7 @@ var Container = /*#__PURE__*/function (_React$Component) {
|
|
|
154
159
|
var isCorrect = isEvaluateMode ? _this2.correctness(polygon.correct, selected) : undefined;
|
|
155
160
|
var evaluateText = isEvaluateMode ? _this2.getEvaluateText(polygon.correct, selected) : null;
|
|
156
161
|
return /*#__PURE__*/_react["default"].createElement(_polygon["default"], {
|
|
162
|
+
scale: SCALE,
|
|
157
163
|
isEvaluateMode: isEvaluateMode,
|
|
158
164
|
isCorrect: !!isCorrect,
|
|
159
165
|
evaluateText: evaluateText,
|
|
@@ -219,7 +225,11 @@ Container.propTypes = {
|
|
|
219
225
|
outlineColor: _propTypes["default"].string.isRequired,
|
|
220
226
|
session: _propTypes["default"].object.isRequired,
|
|
221
227
|
shapes: _propTypes["default"].object.isRequired,
|
|
222
|
-
strokeWidth: _propTypes["default"].number
|
|
228
|
+
strokeWidth: _propTypes["default"].number,
|
|
229
|
+
scale: _propTypes["default"].number
|
|
230
|
+
};
|
|
231
|
+
Container.defaultProps = {
|
|
232
|
+
scale: 1
|
|
223
233
|
};
|
|
224
234
|
|
|
225
235
|
var _default = (0, _styles.withStyles)(styles)(Container);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","width","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","strokeWidth","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","position","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\n\nexport class Container extends React.Component {\n isSelected(shape) {\n const selectedShape = this.props.session.answers.filter(answer => answer.id === shape.id)[0];\n return !!selectedShape;\n }\n\n correctness = (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked;\n\n getEvaluateText = (isCorrect, selected) => {\n if (selected && isCorrect) {\n return 'Correctly\\nselected';\n }\n\n if (selected && !isCorrect) {\n return 'Should not have\\nbeen selected';\n }\n\n if (!selected && isCorrect) {\n return 'Should have\\nbeen selected';\n }\n\n return null;\n };\n\n render() {\n const {\n classes,\n dimensions: { width, height },\n disabled,\n hotspotColor,\n imageUrl,\n isEvaluateMode,\n outlineColor,\n onSelectChoice,\n shapes: { rectangles, polygons },\n strokeWidth\n } = this.props;\n\n return (\n <div\n className={classes.base}\n style={{ padding: strokeWidth / 2 }}\n >\n {imageUrl ? (\n <div className={classes.imageContainer}>\n <img\n className={classes.image}\n height=\"auto\"\n src={imageUrl}\n style={{ width, height, maxWidth: width, maxHeight: height }}\n />\n </div>\n ) : null}\n\n <Stage\n className={classes.stage}\n height={height + strokeWidth}\n width={width + strokeWidth}\n x={strokeWidth / 2}\n y={strokeWidth / 2}\n >\n <Layer>\n {rectangles.map((shape) => {\n const selected = this.isSelected(shape);\n const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n\n return (\n <Rectangle\n isEvaluateMode={isEvaluateMode}\n isCorrect={isCorrect}\n evaluateText={evaluateText}\n disabled={disabled}\n selected={selected}\n height={shape.height}\n hotspotColor={hotspotColor}\n id={shape.id}\n key={shape.id}\n onClick={onSelectChoice}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n strokeWidth={strokeWidth}\n />\n )\n })}\n {polygons.map((polygon) => {\n const selected = this.isSelected(polygon);\n const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n\n return (\n <Polygon\n isEvaluateMode={isEvaluateMode}\n isCorrect={!!isCorrect}\n evaluateText={evaluateText}\n disabled={disabled}\n selected={selected}\n hotspotColor={hotspotColor}\n id={polygon.id}\n key={polygon.id}\n onClick={onSelectChoice}\n outlineColor={outlineColor}\n points={polygon.points}\n strokeWidth={strokeWidth}\n />\n )\n })}\n </Layer>\n </Stage>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 3,\n position: 'relative'\n },\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content'\n },\n stage: {\n left: 0,\n top: 0,\n position: 'absolute'\n },\n resize: {\n borderBottom: `1px solid ${color.disabled()}`,\n borderRight: `1px solid ${color.disabled()}`,\n bottom: '-10px',\n cursor: 'se-resize',\n height: '10px',\n position: 'absolute',\n right: '-10px',\n width: '10px',\n }\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n disabled: PropTypes.bool.isRequired,\n hotspotColor:PropTypes.string.isRequired,\n imageUrl:PropTypes.string.isRequired,\n isEvaluateMode:PropTypes.bool.isRequired,\n onSelectChoice:PropTypes.func.isRequired,\n outlineColor:PropTypes.string.isRequired,\n session:PropTypes.object.isRequired,\n shapes:PropTypes.object.isRequired,\n strokeWidth: PropTypes.number\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","SCALE","scale","strokeWidth","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","position","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\n\nexport class Container extends React.Component {\n isSelected(shape) {\n const selectedShape = this.props.session.answers.filter(answer => answer.id === shape.id)[0];\n return !!selectedShape;\n }\n\n correctness = (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked;\n\n getEvaluateText = (isCorrect, selected) => {\n if (selected && isCorrect) {\n return 'Correctly\\nselected';\n }\n\n if (selected && !isCorrect) {\n return 'Should not have\\nbeen selected';\n }\n\n if (!selected && isCorrect) {\n return 'Should have\\nbeen selected';\n }\n\n return null;\n };\n\n render() {\n const {\n classes,\n dimensions: { width: withProp, height: heightProp },\n disabled,\n hotspotColor,\n imageUrl,\n isEvaluateMode,\n outlineColor,\n onSelectChoice,\n shapes: { rectangles, polygons },\n scale: SCALE,\n strokeWidth\n } = this.props;\n\n const width = withProp * SCALE;\n const height = heightProp * SCALE;\n\n return (\n <div\n className={classes.base}\n style={{ padding: strokeWidth / 2 }}\n >\n {imageUrl ? (\n <div className={classes.imageContainer}>\n <img\n alt=\"hotspot-image\"\n className={classes.image}\n height=\"auto\"\n src={imageUrl}\n style={{ width, height, maxWidth: width, maxHeight: height }}\n />\n </div>\n ) : null}\n\n <Stage\n className={classes.stage}\n height={height + strokeWidth}\n width={width + strokeWidth}\n x={strokeWidth / 2}\n y={strokeWidth / 2}\n >\n <Layer>\n {rectangles.map((shape) => {\n const selected = this.isSelected(shape);\n const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n\n return (\n <Rectangle\n scale={SCALE}\n isEvaluateMode={isEvaluateMode}\n isCorrect={isCorrect}\n evaluateText={evaluateText}\n disabled={disabled}\n selected={selected}\n height={shape.height}\n hotspotColor={hotspotColor}\n id={shape.id}\n key={shape.id}\n onClick={onSelectChoice}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n strokeWidth={strokeWidth}\n />\n )\n })}\n {polygons.map((polygon) => {\n const selected = this.isSelected(polygon);\n const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n\n return (\n <Polygon\n scale={SCALE}\n isEvaluateMode={isEvaluateMode}\n isCorrect={!!isCorrect}\n evaluateText={evaluateText}\n disabled={disabled}\n selected={selected}\n hotspotColor={hotspotColor}\n id={polygon.id}\n key={polygon.id}\n onClick={onSelectChoice}\n outlineColor={outlineColor}\n points={polygon.points}\n strokeWidth={strokeWidth}\n />\n )\n })}\n </Layer>\n </Stage>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 3,\n position: 'relative'\n },\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content'\n },\n stage: {\n left: 0,\n top: 0,\n position: 'absolute'\n },\n resize: {\n borderBottom: `1px solid ${color.disabled()}`,\n borderRight: `1px solid ${color.disabled()}`,\n bottom: '-10px',\n cursor: 'se-resize',\n height: '10px',\n position: 'absolute',\n right: '-10px',\n width: '10px',\n }\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n disabled: PropTypes.bool.isRequired,\n hotspotColor:PropTypes.string.isRequired,\n imageUrl:PropTypes.string.isRequired,\n isEvaluateMode:PropTypes.bool.isRequired,\n onSelectChoice:PropTypes.func.isRequired,\n outlineColor:PropTypes.string.isRequired,\n session:PropTypes.object.isRequired,\n shapes:PropTypes.object.isRequired,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number\n};\n\nContainer.defaultProps = {\n scale: 1\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
|
package/lib/hotspot/index.js
CHANGED
|
@@ -29,10 +29,10 @@ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
|
|
|
29
29
|
|
|
30
30
|
var _renderUi = require("@pie-lib/render-ui");
|
|
31
31
|
|
|
32
|
-
var _container = _interopRequireDefault(require("./container"));
|
|
33
|
-
|
|
34
32
|
var _styles = require("@material-ui/core/styles");
|
|
35
33
|
|
|
34
|
+
var _container = _interopRequireDefault(require("./container"));
|
|
35
|
+
|
|
36
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
37
|
|
|
38
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; } }
|
|
@@ -55,12 +55,54 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
55
55
|
});
|
|
56
56
|
});
|
|
57
57
|
_this.state = {
|
|
58
|
-
showCorrect: false
|
|
58
|
+
showCorrect: false,
|
|
59
|
+
observer: null,
|
|
60
|
+
scale: 1
|
|
59
61
|
};
|
|
60
62
|
return _this;
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
(0, _createClass2["default"])(HotspotComponent, [{
|
|
66
|
+
key: "componentDidMount",
|
|
67
|
+
value: function componentDidMount() {
|
|
68
|
+
var _this2 = this;
|
|
69
|
+
|
|
70
|
+
this.observer = new MutationObserver(function (mutations) {
|
|
71
|
+
mutations.forEach(function () {
|
|
72
|
+
var _document$getElementB, _document$getElementB2;
|
|
73
|
+
|
|
74
|
+
var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.style) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.cssText;
|
|
75
|
+
var zoom = target === null || target === void 0 ? void 0 : target.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
|
|
76
|
+
var zoomParsed = zoom === null || zoom === void 0 ? void 0 : zoom.replace(/\s/g, '');
|
|
77
|
+
|
|
78
|
+
if (zoomParsed) {
|
|
79
|
+
var newScale = parseFloat(zoomParsed) / 100;
|
|
80
|
+
|
|
81
|
+
if (newScale !== _this2.state.scale) {
|
|
82
|
+
_this2.setState({
|
|
83
|
+
scale: parseFloat(zoomParsed) / 100
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
var target = document.getElementById('question-container');
|
|
90
|
+
|
|
91
|
+
if (target) {
|
|
92
|
+
this.observer.observe(target, {
|
|
93
|
+
attributes: true,
|
|
94
|
+
attributeFilter: ['style']
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
99
|
+
key: "componentWillUnmount",
|
|
100
|
+
value: function componentWillUnmount() {
|
|
101
|
+
var _this$observer;
|
|
102
|
+
|
|
103
|
+
(_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
|
|
104
|
+
}
|
|
105
|
+
}, {
|
|
64
106
|
key: "render",
|
|
65
107
|
value: function render() {
|
|
66
108
|
var _this$props = this.props,
|
|
@@ -106,7 +148,8 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
106
148
|
onSelectChoice: onSelectChoice,
|
|
107
149
|
shapes: shapes,
|
|
108
150
|
disabled: disabled,
|
|
109
|
-
strokeWidth: strokeWidth
|
|
151
|
+
strokeWidth: strokeWidth,
|
|
152
|
+
scale: this.state.scale
|
|
110
153
|
}) : null, rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
|
|
111
154
|
labels: {
|
|
112
155
|
hidden: 'Show Rationale',
|
package/lib/hotspot/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","onSelectChoice","classes","isEvaluateMode","hidden","visible","collapsible","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","paddingTop","spacing","unit","paddingBottom","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","onSelectChoice","classes","isEvaluateMode","hidden","visible","collapsible","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","paddingTop","spacing","unit","paddingBottom","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport {Collapsible, hasText, PreviewPrompt} from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showCorrect: false,\n observer: null,\n scale: 1\n };\n }\n\n componentDidMount() {\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText\n const zoom = target?.substring(\n target.indexOf('--pie-zoom') + 11,\n target.lastIndexOf('%')\n );\n\n const zoomParsed = zoom?.replace(/\\s/g, '');\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n })\n }\n }\n });\n });\n\n const target = document.getElementById('question-container');\n if (target) {\n this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })\n }\n }\n\n componentWillUnmount() {\n this.observer?.disconnect();\n }\n\n onToggle = () => {\n const { showCorrect } = this.state;\n this.setState({ showCorrect: !showCorrect });\n };\n\n render() {\n const {\n session,\n model: {\n disabled,\n imageUrl,\n prompt,\n mode,\n multipleCorrect,\n shapes,\n outlineColor,\n hotspotColor,\n dimensions,\n rationale,\n teacherInstructions,\n strokeWidth\n },\n onSelectChoice,\n classes\n } = this.props;\n\n const isEvaluateMode = mode === 'evaluate';\n\n return (\n <div>\n {\n teacherInstructions && hasText(teacherInstructions) && (\n <Collapsible\n labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n className={classes.collapsible}\n >\n <PreviewPrompt\n className=\"prompt\"\n prompt={teacherInstructions}\n />\n </Collapsible>\n )\n }\n\n <Typography className={classes.prompt}>\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n />\n </Typography>\n\n {imageUrl ? (\n <Container\n isEvaluateMode={isEvaluateMode}\n session={session}\n dimensions={dimensions}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n multipleCorrect={multipleCorrect}\n outlineColor={outlineColor}\n onSelectChoice={onSelectChoice}\n shapes={shapes}\n disabled={disabled}\n strokeWidth={strokeWidth}\n scale={this.state.scale}\n />\n ) : null}\n\n {\n rationale && hasText(rationale) && (\n <Collapsible\n labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n className={classes.collapsible}\n >\n <PreviewPrompt\n className=\"prompt\"\n prompt={rationale}\n />\n </Collapsible>\n )\n }\n\n </div>\n );\n }\n}\n\nHotspotComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n onSelectChoice: PropTypes.func.isRequired,\n session: PropTypes.object.isRequired\n};\n\nHotspotComponent.defaultProps = {\n classes: {}\n};\n\nconst styles = theme => ({\n collapsible: {\n paddingTop: theme.spacing.unit * 2,\n paddingBottom: theme.spacing.unit * 2,\n },\n prompt: {\n fontSize: 'inherit'\n }\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
|
package/lib/hotspot/polygon.js
CHANGED
|
@@ -118,7 +118,8 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
118
118
|
selected = _this$props2.selected,
|
|
119
119
|
points = _this$props2.points,
|
|
120
120
|
evaluateText = _this$props2.evaluateText,
|
|
121
|
-
strokeWidth = _this$props2.strokeWidth
|
|
121
|
+
strokeWidth = _this$props2.strokeWidth,
|
|
122
|
+
scale = _this$props2.scale;
|
|
122
123
|
var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, outlineColor) : outlineColor;
|
|
123
124
|
var outlineWidth = this.getOutlineWidth(selected, strokeWidth);
|
|
124
125
|
var pointsParsed = this.parsePointsForKonva(points);
|
|
@@ -141,7 +142,10 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
141
142
|
iconSrc = _icons.faWrong;
|
|
142
143
|
}
|
|
143
144
|
|
|
144
|
-
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group,
|
|
145
|
+
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
|
|
146
|
+
scaleX: scale,
|
|
147
|
+
scaleY: scale
|
|
148
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
|
|
145
149
|
points: pointsParsed,
|
|
146
150
|
closed: true,
|
|
147
151
|
classes: classes.base,
|
|
@@ -186,11 +190,13 @@ PolygonComponent.propTypes = {
|
|
|
186
190
|
points: _propTypes["default"].array.isRequired,
|
|
187
191
|
selected: _propTypes["default"].bool.isRequired,
|
|
188
192
|
evaluateText: _propTypes["default"].string,
|
|
189
|
-
strokeWidth: _propTypes["default"].number
|
|
193
|
+
strokeWidth: _propTypes["default"].number,
|
|
194
|
+
scale: _propTypes["default"].number
|
|
190
195
|
};
|
|
191
196
|
PolygonComponent.defaultProps = {
|
|
192
197
|
evaluateText: null,
|
|
193
|
-
strokeWidth: 5
|
|
198
|
+
strokeWidth: 5,
|
|
199
|
+
scale: 1
|
|
194
200
|
};
|
|
195
201
|
|
|
196
202
|
var _default = (0, _styles.withStyles)(styles)(PolygonComponent);
|
|
@@ -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","document","body","style","cursor","isCorrect","outlineColor","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAEMA,gB;;;;;AACJ,4BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,yGAIA,UAACC,MAAD,EAAY;AAC7B,UAAMC,CAAC,GAAGD,MAAM,CAACE,GAAP,CAAW;AAAA,YAAGD,CAAH,QAAGA,CAAH;AAAA,eAAWA,CAAX;AAAA,OAAX,CAAV;AACA,UAAME,CAAC,GAAGH,MAAM,CAACE,GAAP,CAAW;AAAA,YAAGC,CAAH,SAAGA,CAAH;AAAA,eAAWA,CAAX;AAAA,OAAX,CAAV;AACA,UAAMC,IAAI,GAAGC,IAAI,CAACC,GAAL,CAASC,KAAT,CAAgB,IAAhB,EAAsBN,CAAtB,CAAb;AACA,UAAMO,IAAI,GAAGH,IAAI,CAACI,GAAL,CAASF,KAAT,CAAgB,IAAhB,EAAsBN,CAAtB,CAAb;AACA,UAAMS,IAAI,GAAGL,IAAI,CAACC,GAAL,CAASC,KAAT,CAAgB,IAAhB,EAAsBJ,CAAtB,CAAb;AACA,UAAMQ,IAAI,GAAGN,IAAI,CAACI,GAAL,CAASF,KAAT,CAAgB,IAAhB,EAAsBJ,CAAtB,CAAb;AACA,aAAO,CAAC,CAACC,IAAI,GAAGI,IAAR,IAAgB,CAAjB,EAAoB,CAACE,IAAI,GAAGC,IAAR,IAAgB,CAApC,CAAP;AACD,KAZkB;AAAA,4GAcG,UAACX,MAAD,EAAY;AAChC,UAAMY,YAAY,GAAG,EAArB;AACAZ,MAAAA,MAAM,CAACa,OAAP,CAAe,iBAAc;AAAA,YAAXZ,CAAW,SAAXA,CAAW;AAAA,YAARE,CAAQ,SAARA,CAAQ;AAC3BS,QAAAA,YAAY,CAACE,IAAb,CAAkBb,CAAlB;AACAW,QAAAA,YAAY,CAACE,IAAb,CAAkBX,CAAlB;AACD,OAHD;AAIA,aAAOS,YAAP;AACD,KArBkB;AAAA,oGAuBL,UAACG,CAAD,EAAO;AACnB,wBAA4C,MAAKhB,KAAjD;AAAA,UAAQiB,OAAR,eAAQA,OAAR;AAAA,UAAiBC,EAAjB,eAAiBA,EAAjB;AAAA,UAAqBC,QAArB,eAAqBA,QAArB;AAAA,UAA+BC,QAA/B,eAA+BA,QAA/B;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,CAAC,CAACK,YAAF,GAAiB,IAAjB;AACAJ,QAAAA,OAAO,CAAC;AAAEC,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,QAAQ,EAAE,CAACA;AAAjB,SAAD,CAAP;AACD;AACF,KA9BkB;AAAA,yGAgCA,YAAM;AACvB,UAAQC,QAAR,GAAqB,MAAKpB,KAA1B,CAAQoB,QAAR;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD;AACF,KAtCkB;AAAA,yGAwCA,YAAM;AACvBH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD,KA1CkB;AAAA,gHA4CO,UAACC,SAAD,EAAYC,YAAZ;AAAA,aAA6BD,SAAS,GAAGC,YAAH,GAAkB,KAAxD;AAAA,KA5CP;AAAA,wGA8CD,UAACR,QAAD,EAAWS,WAAX;AAAA,aAA2BT,QAAQ,GAAGS,WAAH,GAAiB,CAApD;AAAA,KA9CC;AAAA;AAElB;;;;WA8CD,kBAAS;AACP,
|
|
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","outlineColor","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';\n\nimport Image from './image';\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, outlineColor) => isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (selected, strokeWidth) => 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 } = this.props;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(selected, 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 // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)\n // Correctly not selected hotspot: none\n // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red\n // Incorrectly not selected hotspot: white “X” in red circle\n let iconSrc;\n\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 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) ? (\n <Image\n src={iconSrc}\n x={iconX}\n y={iconY}\n tooltip={evaluateText}\n />\n ): 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};\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
CHANGED
|
@@ -96,7 +96,8 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
96
96
|
x = _this$props2.x,
|
|
97
97
|
y = _this$props2.y,
|
|
98
98
|
evaluateText = _this$props2.evaluateText,
|
|
99
|
-
strokeWidth = _this$props2.strokeWidth
|
|
99
|
+
strokeWidth = _this$props2.strokeWidth,
|
|
100
|
+
scale = _this$props2.scale;
|
|
100
101
|
var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, outlineColor) : outlineColor;
|
|
101
102
|
var outlineWidth = this.getOutlineWidth(selected, strokeWidth);
|
|
102
103
|
var iconX = x + width / 2 - 10;
|
|
@@ -117,7 +118,10 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
117
118
|
iconSrc = _icons.faWrong;
|
|
118
119
|
}
|
|
119
120
|
|
|
120
|
-
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group,
|
|
121
|
+
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
|
|
122
|
+
scaleX: scale,
|
|
123
|
+
scaleY: scale
|
|
124
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
|
|
121
125
|
classes: classes.base,
|
|
122
126
|
width: width,
|
|
123
127
|
height: height,
|
|
@@ -167,12 +171,14 @@ RectComponent.propTypes = {
|
|
|
167
171
|
x: _propTypes["default"].number.isRequired,
|
|
168
172
|
y: _propTypes["default"].number.isRequired,
|
|
169
173
|
evaluateText: _propTypes["default"].string,
|
|
170
|
-
strokeWidth: _propTypes["default"].number
|
|
174
|
+
strokeWidth: _propTypes["default"].number,
|
|
175
|
+
scale: _propTypes["default"].number
|
|
171
176
|
};
|
|
172
177
|
RectComponent.defaultProps = {
|
|
173
178
|
isCorrect: false,
|
|
174
179
|
evaluateText: null,
|
|
175
|
-
strokeWidth: 5
|
|
180
|
+
strokeWidth: 5,
|
|
181
|
+
scale: 1
|
|
176
182
|
};
|
|
177
183
|
|
|
178
184
|
var _default = (0, _styles.withStyles)(styles)(RectComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","outlineColor","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAEMA,a;;;;;AACJ,yBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,oGAIL,UAACC,CAAD,EAAO;AACnB,wBAA4C,MAAKD,KAAjD;AAAA,UAAQE,OAAR,eAAQA,OAAR;AAAA,UAAiBC,EAAjB,eAAiBA,EAAjB;AAAA,UAAqBC,QAArB,eAAqBA,QAArB;AAAA,UAA+BC,QAA/B,eAA+BA,QAA/B;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,CAAC,CAACK,YAAF,GAAiB,IAAjB;AACAJ,QAAAA,OAAO,CAAC;AAAEC,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,QAAQ,EAAE,CAACA;AAAjB,SAAD,CAAP;AACD;AACF,KAXkB;AAAA,yGAaA,YAAM;AACvB,UAAQC,QAAR,GAAqB,MAAKL,KAA1B,CAAQK,QAAR;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD;AACF,KAnBkB;AAAA,yGAqBA,YAAM;AACvBH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD,KAvBkB;AAAA,gHAyBO,UAACC,SAAD,EAAYC,YAAZ;AAAA,aAA6BD,SAAS,GAAGC,YAAH,GAAkB,KAAxD;AAAA,KAzBP;AAAA,wGA2BD,UAACR,QAAD,EAAWS,WAAX;AAAA,aAA2BT,QAAQ,GAAGS,WAAH,GAAiB,CAApD;AAAA,KA3BC;AAAA;AAElB;;;;WA2BD,kBAAS;AACP,
|
|
1
|
+
{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","outlineColor","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';\n\nimport Image from './image';\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, outlineColor) => isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (selected, strokeWidth) => 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 } = this.props;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(selected, strokeWidth);\n\n const iconX = (x + (width / 2)) - 10;\n const iconY = (y + (height / 2)) - 10;\n\n // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)\n // Correctly not selected hotspot: none\n // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red\n // Incorrectly not selected hotspot: white “X” in red circle\n let iconSrc;\n\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 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) ? (\n <Image\n src={iconSrc}\n x={iconX}\n y={iconY}\n tooltip={evaluateText}\n />\n ): 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};\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/hotspot",
|
|
3
|
-
"version": "4.8.4-next.
|
|
3
|
+
"version": "4.8.4-next.648+1ead7a991",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": "pie-framework/pie-elements",
|
|
6
6
|
"publishConfig": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"author": "pie framework developers",
|
|
21
21
|
"license": "ISC",
|
|
22
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "1ead7a991b743ff4ddeca713c0b35e49b7d56456",
|
|
23
23
|
"scripts": {
|
|
24
24
|
"postpublish": "../../scripts/postpublish"
|
|
25
25
|
},
|
|
@@ -34,7 +34,7 @@ export class Container extends React.Component {
|
|
|
34
34
|
render() {
|
|
35
35
|
const {
|
|
36
36
|
classes,
|
|
37
|
-
dimensions: { width, height },
|
|
37
|
+
dimensions: { width: withProp, height: heightProp },
|
|
38
38
|
disabled,
|
|
39
39
|
hotspotColor,
|
|
40
40
|
imageUrl,
|
|
@@ -42,9 +42,13 @@ export class Container extends React.Component {
|
|
|
42
42
|
outlineColor,
|
|
43
43
|
onSelectChoice,
|
|
44
44
|
shapes: { rectangles, polygons },
|
|
45
|
+
scale: SCALE,
|
|
45
46
|
strokeWidth
|
|
46
47
|
} = this.props;
|
|
47
48
|
|
|
49
|
+
const width = withProp * SCALE;
|
|
50
|
+
const height = heightProp * SCALE;
|
|
51
|
+
|
|
48
52
|
return (
|
|
49
53
|
<div
|
|
50
54
|
className={classes.base}
|
|
@@ -53,6 +57,7 @@ export class Container extends React.Component {
|
|
|
53
57
|
{imageUrl ? (
|
|
54
58
|
<div className={classes.imageContainer}>
|
|
55
59
|
<img
|
|
60
|
+
alt="hotspot-image"
|
|
56
61
|
className={classes.image}
|
|
57
62
|
height="auto"
|
|
58
63
|
src={imageUrl}
|
|
@@ -76,6 +81,7 @@ export class Container extends React.Component {
|
|
|
76
81
|
|
|
77
82
|
return (
|
|
78
83
|
<Rectangle
|
|
84
|
+
scale={SCALE}
|
|
79
85
|
isEvaluateMode={isEvaluateMode}
|
|
80
86
|
isCorrect={isCorrect}
|
|
81
87
|
evaluateText={evaluateText}
|
|
@@ -101,6 +107,7 @@ export class Container extends React.Component {
|
|
|
101
107
|
|
|
102
108
|
return (
|
|
103
109
|
<Polygon
|
|
110
|
+
scale={SCALE}
|
|
104
111
|
isEvaluateMode={isEvaluateMode}
|
|
105
112
|
isCorrect={!!isCorrect}
|
|
106
113
|
evaluateText={evaluateText}
|
|
@@ -165,7 +172,12 @@ Container.propTypes = {
|
|
|
165
172
|
outlineColor:PropTypes.string.isRequired,
|
|
166
173
|
session:PropTypes.object.isRequired,
|
|
167
174
|
shapes:PropTypes.object.isRequired,
|
|
168
|
-
strokeWidth: PropTypes.number
|
|
175
|
+
strokeWidth: PropTypes.number,
|
|
176
|
+
scale: PropTypes.number
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
Container.defaultProps = {
|
|
180
|
+
scale: 1
|
|
169
181
|
};
|
|
170
182
|
|
|
171
183
|
export default withStyles(styles)(Container);
|
package/src/hotspot/index.jsx
CHANGED
|
@@ -2,17 +2,51 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import Typography from '@material-ui/core/Typography';
|
|
4
4
|
import {Collapsible, hasText, PreviewPrompt} from '@pie-lib/render-ui';
|
|
5
|
-
import Container from './container';
|
|
6
5
|
import { withStyles } from '@material-ui/core/styles';
|
|
7
6
|
|
|
7
|
+
import Container from './container';
|
|
8
|
+
|
|
8
9
|
class HotspotComponent extends React.Component {
|
|
9
10
|
constructor(props) {
|
|
10
11
|
super(props);
|
|
11
12
|
this.state = {
|
|
12
|
-
showCorrect: false
|
|
13
|
+
showCorrect: false,
|
|
14
|
+
observer: null,
|
|
15
|
+
scale: 1
|
|
13
16
|
};
|
|
14
17
|
}
|
|
15
18
|
|
|
19
|
+
componentDidMount() {
|
|
20
|
+
this.observer = new MutationObserver((mutations) => {
|
|
21
|
+
mutations.forEach(() => {
|
|
22
|
+
const target = document.getElementById('question-container')?.style?.cssText
|
|
23
|
+
const zoom = target?.substring(
|
|
24
|
+
target.indexOf('--pie-zoom') + 11,
|
|
25
|
+
target.lastIndexOf('%')
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
const zoomParsed = zoom?.replace(/\s/g, '');
|
|
29
|
+
if (zoomParsed) {
|
|
30
|
+
const newScale = parseFloat(zoomParsed) / 100;
|
|
31
|
+
if (newScale !== this.state.scale) {
|
|
32
|
+
this.setState({
|
|
33
|
+
scale: parseFloat(zoomParsed) / 100,
|
|
34
|
+
})
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const target = document.getElementById('question-container');
|
|
41
|
+
if (target) {
|
|
42
|
+
this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
componentWillUnmount() {
|
|
47
|
+
this.observer?.disconnect();
|
|
48
|
+
}
|
|
49
|
+
|
|
16
50
|
onToggle = () => {
|
|
17
51
|
const { showCorrect } = this.state;
|
|
18
52
|
this.setState({ showCorrect: !showCorrect });
|
|
@@ -77,6 +111,7 @@ class HotspotComponent extends React.Component {
|
|
|
77
111
|
shapes={shapes}
|
|
78
112
|
disabled={disabled}
|
|
79
113
|
strokeWidth={strokeWidth}
|
|
114
|
+
scale={this.state.scale}
|
|
80
115
|
/>
|
|
81
116
|
) : null}
|
|
82
117
|
|
package/src/hotspot/polygon.jsx
CHANGED
|
@@ -65,7 +65,8 @@ class PolygonComponent extends React.Component {
|
|
|
65
65
|
selected,
|
|
66
66
|
points,
|
|
67
67
|
evaluateText,
|
|
68
|
-
strokeWidth
|
|
68
|
+
strokeWidth,
|
|
69
|
+
scale
|
|
69
70
|
} = this.props;
|
|
70
71
|
|
|
71
72
|
const outlineColorParsed = isEvaluateMode
|
|
@@ -95,7 +96,7 @@ class PolygonComponent extends React.Component {
|
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
return (
|
|
98
|
-
<Group>
|
|
99
|
+
<Group scaleX={scale} scaleY={scale}>
|
|
99
100
|
<Line
|
|
100
101
|
points={pointsParsed}
|
|
101
102
|
closed={true}
|
|
@@ -142,12 +143,14 @@ PolygonComponent.propTypes = {
|
|
|
142
143
|
points: PropTypes.array.isRequired,
|
|
143
144
|
selected: PropTypes.bool.isRequired,
|
|
144
145
|
evaluateText: PropTypes.string,
|
|
145
|
-
strokeWidth: PropTypes.number
|
|
146
|
+
strokeWidth: PropTypes.number,
|
|
147
|
+
scale: PropTypes.number
|
|
146
148
|
};
|
|
147
149
|
|
|
148
150
|
PolygonComponent.defaultProps = {
|
|
149
151
|
evaluateText: null,
|
|
150
|
-
strokeWidth: 5
|
|
152
|
+
strokeWidth: 5,
|
|
153
|
+
scale: 1
|
|
151
154
|
};
|
|
152
155
|
|
|
153
156
|
export default withStyles(styles)(PolygonComponent);
|
|
@@ -49,7 +49,8 @@ class RectComponent extends React.Component {
|
|
|
49
49
|
x,
|
|
50
50
|
y,
|
|
51
51
|
evaluateText,
|
|
52
|
-
strokeWidth
|
|
52
|
+
strokeWidth,
|
|
53
|
+
scale
|
|
53
54
|
} = this.props;
|
|
54
55
|
|
|
55
56
|
const outlineColorParsed = isEvaluateMode
|
|
@@ -78,7 +79,7 @@ class RectComponent extends React.Component {
|
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
return (
|
|
81
|
-
<Group>
|
|
82
|
+
<Group scaleX={scale} scaleY={scale}>
|
|
82
83
|
<Rect
|
|
83
84
|
classes={classes.base}
|
|
84
85
|
width={width}
|
|
@@ -130,13 +131,15 @@ RectComponent.propTypes = {
|
|
|
130
131
|
x: PropTypes.number.isRequired,
|
|
131
132
|
y: PropTypes.number.isRequired,
|
|
132
133
|
evaluateText: PropTypes.string,
|
|
133
|
-
strokeWidth: PropTypes.number
|
|
134
|
+
strokeWidth: PropTypes.number,
|
|
135
|
+
scale: PropTypes.number
|
|
134
136
|
};
|
|
135
137
|
|
|
136
138
|
RectComponent.defaultProps = {
|
|
137
139
|
isCorrect: false,
|
|
138
140
|
evaluateText: null,
|
|
139
|
-
strokeWidth: 5
|
|
141
|
+
strokeWidth: 5,
|
|
142
|
+
scale: 1
|
|
140
143
|
};
|
|
141
144
|
|
|
142
145
|
export default withStyles(styles)(RectComponent);
|