@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (236) hide show
  1. package/author.js +2 -0
  2. package/configure.js +2 -0
  3. package/controller.js +1 -0
  4. package/dist/author/DeleteWidget.d.ts +38 -0
  5. package/dist/author/DeleteWidget.js +46 -0
  6. package/dist/author/button.d.ts +31 -0
  7. package/dist/author/button.js +27 -0
  8. package/dist/author/buttons/circle.d.ts +18 -0
  9. package/dist/author/buttons/circle.js +25 -0
  10. package/dist/author/buttons/polygon.d.ts +18 -0
  11. package/dist/author/buttons/polygon.js +36 -0
  12. package/dist/author/buttons/rectangle.d.ts +18 -0
  13. package/dist/author/buttons/rectangle.js +36 -0
  14. package/dist/author/defaults.d.ts +157 -0
  15. package/dist/author/defaults.js +119 -0
  16. package/dist/author/hotspot-circle.d.ts +21 -0
  17. package/dist/author/hotspot-circle.js +124 -0
  18. package/dist/author/hotspot-container.d.ts +29 -0
  19. package/dist/author/hotspot-container.js +210 -0
  20. package/dist/author/hotspot-drawable.d.ts +31 -0
  21. package/dist/author/hotspot-drawable.js +312 -0
  22. package/dist/author/hotspot-palette.d.ts +14 -0
  23. package/dist/author/hotspot-palette.js +72 -0
  24. package/dist/author/hotspot-polygon.d.ts +38 -0
  25. package/dist/author/hotspot-polygon.js +200 -0
  26. package/dist/author/hotspot-rectangle.d.ts +20 -0
  27. package/dist/author/hotspot-rectangle.js +119 -0
  28. package/dist/author/icons.d.ts +9 -0
  29. package/dist/author/icons.js +4 -0
  30. package/dist/author/image-konva.d.ts +19 -0
  31. package/dist/author/image-konva.js +49 -0
  32. package/dist/author/index.d.ts +53 -0
  33. package/dist/author/index.js +146 -0
  34. package/dist/author/root.d.ts +15 -0
  35. package/dist/author/root.js +215 -0
  36. package/dist/author/shapes/circle.d.ts +18 -0
  37. package/dist/author/shapes/circle.js +47 -0
  38. package/dist/author/shapes/index.d.ts +12 -0
  39. package/dist/author/shapes/polygon.d.ts +19 -0
  40. package/dist/author/shapes/polygon.js +51 -0
  41. package/dist/author/shapes/rectagle.d.ts +18 -0
  42. package/dist/author/shapes/rectagle.js +57 -0
  43. package/dist/author/shapes/utils.d.ts +19 -0
  44. package/dist/author/shapes/utils.js +16 -0
  45. package/dist/author/upload-control.d.ts +29 -0
  46. package/dist/author/upload-control.js +28 -0
  47. package/dist/author/utils.d.ts +24 -0
  48. package/dist/author/utils.js +83 -0
  49. package/dist/browser/ReactKonva-C_SewBog.js +19300 -0
  50. package/dist/browser/ReactKonva-C_SewBog.js.map +1 -0
  51. package/dist/browser/author/index.js +36984 -0
  52. package/dist/browser/author/index.js.map +1 -0
  53. package/dist/browser/browser-D4gLESxz.js +226 -0
  54. package/dist/browser/browser-D4gLESxz.js.map +1 -0
  55. package/dist/browser/controller/index.js +198 -0
  56. package/dist/browser/controller/index.js.map +1 -0
  57. package/dist/browser/delivery/index.js +2673 -0
  58. package/dist/browser/delivery/index.js.map +1 -0
  59. package/dist/browser/dist-CJeYAWp3.js +100 -0
  60. package/dist/browser/dist-CJeYAWp3.js.map +1 -0
  61. package/dist/browser/hotspot.css +2 -0
  62. package/dist/controller/defaults.d.ts +35 -0
  63. package/dist/controller/defaults.js +29 -0
  64. package/dist/controller/index.d.ts +22 -0
  65. package/dist/controller/index.js +154 -0
  66. package/dist/controller/utils.d.ts +10 -0
  67. package/dist/controller/utils.js +12 -0
  68. package/dist/delivery/hotspot/circle.d.ts +22 -0
  69. package/dist/delivery/hotspot/circle.js +113 -0
  70. package/dist/delivery/hotspot/container.d.ts +21 -0
  71. package/dist/delivery/hotspot/container.js +217 -0
  72. package/dist/delivery/hotspot/icons.d.ts +10 -0
  73. package/dist/delivery/hotspot/icons.js +4 -0
  74. package/dist/delivery/hotspot/image-konva-tooltip.d.ts +19 -0
  75. package/dist/delivery/hotspot/image-konva-tooltip.js +66 -0
  76. package/dist/delivery/hotspot/index.d.ts +18 -0
  77. package/dist/delivery/hotspot/index.js +119 -0
  78. package/dist/delivery/hotspot/polygon.d.ts +24 -0
  79. package/dist/delivery/hotspot/polygon.js +121 -0
  80. package/dist/delivery/hotspot/rectangle.d.ts +22 -0
  81. package/dist/delivery/hotspot/rectangle.js +116 -0
  82. package/dist/delivery/index.d.ts +20 -0
  83. package/dist/delivery/index.js +109 -0
  84. package/dist/delivery/session-updater.d.ts +10 -0
  85. package/dist/delivery/session-updater.js +14 -0
  86. package/dist/index.d.ts +1 -0
  87. package/dist/index.iife.d.ts +8 -0
  88. package/dist/index.iife.js +169 -0
  89. package/dist/index.js +2 -0
  90. package/dist/runtime-support.d.ts +12 -0
  91. package/dist/runtime-support.js +12 -0
  92. package/package.json +84 -18
  93. package/CHANGELOG.json +0 -997
  94. package/CHANGELOG.md +0 -2230
  95. package/LICENSE.md +0 -5
  96. package/README.md +0 -1
  97. package/configure/CHANGELOG.json +0 -682
  98. package/configure/CHANGELOG.md +0 -1964
  99. package/configure/lib/DeleteWidget.js +0 -64
  100. package/configure/lib/DeleteWidget.js.map +0 -1
  101. package/configure/lib/button.js +0 -42
  102. package/configure/lib/button.js.map +0 -1
  103. package/configure/lib/buttons/circle.js +0 -33
  104. package/configure/lib/buttons/circle.js.map +0 -1
  105. package/configure/lib/buttons/polygon.js +0 -39
  106. package/configure/lib/buttons/polygon.js.map +0 -1
  107. package/configure/lib/buttons/rectangle.js +0 -39
  108. package/configure/lib/buttons/rectangle.js.map +0 -1
  109. package/configure/lib/defaults.js +0 -155
  110. package/configure/lib/defaults.js.map +0 -1
  111. package/configure/lib/hotspot-circle.js +0 -192
  112. package/configure/lib/hotspot-circle.js.map +0 -1
  113. package/configure/lib/hotspot-container.js +0 -320
  114. package/configure/lib/hotspot-container.js.map +0 -1
  115. package/configure/lib/hotspot-drawable.js +0 -519
  116. package/configure/lib/hotspot-drawable.js.map +0 -1
  117. package/configure/lib/hotspot-palette.js +0 -107
  118. package/configure/lib/hotspot-palette.js.map +0 -1
  119. package/configure/lib/hotspot-polygon.js +0 -293
  120. package/configure/lib/hotspot-polygon.js.map +0 -1
  121. package/configure/lib/hotspot-rectangle.js +0 -190
  122. package/configure/lib/hotspot-rectangle.js.map +0 -1
  123. package/configure/lib/icons.js +0 -7
  124. package/configure/lib/icons.js.map +0 -1
  125. package/configure/lib/image-konva.js +0 -66
  126. package/configure/lib/image-konva.js.map +0 -1
  127. package/configure/lib/index.js +0 -198
  128. package/configure/lib/index.js.map +0 -1
  129. package/configure/lib/root.js +0 -331
  130. package/configure/lib/root.js.map +0 -1
  131. package/configure/lib/shapes/circle.js +0 -84
  132. package/configure/lib/shapes/circle.js.map +0 -1
  133. package/configure/lib/shapes/index.js +0 -50
  134. package/configure/lib/shapes/index.js.map +0 -1
  135. package/configure/lib/shapes/polygon.js +0 -82
  136. package/configure/lib/shapes/polygon.js.map +0 -1
  137. package/configure/lib/shapes/rectagle.js +0 -84
  138. package/configure/lib/shapes/rectagle.js.map +0 -1
  139. package/configure/lib/shapes/utils.js +0 -21
  140. package/configure/lib/shapes/utils.js.map +0 -1
  141. package/configure/lib/upload-control.js +0 -41
  142. package/configure/lib/upload-control.js.map +0 -1
  143. package/configure/lib/utils.js +0 -185
  144. package/configure/lib/utils.js.map +0 -1
  145. package/configure/package.json +0 -26
  146. package/configure/src/DeleteWidget.jsx +0 -51
  147. package/configure/src/__tests__/DeleteWidget.test.jsx +0 -366
  148. package/configure/src/__tests__/button.test.jsx +0 -198
  149. package/configure/src/__tests__/hotspot-circle.test.jsx +0 -259
  150. package/configure/src/__tests__/hotspot-container.test.js +0 -366
  151. package/configure/src/__tests__/hotspot-drawable.test.js +0 -271
  152. package/configure/src/__tests__/hotspot-palette.test.jsx +0 -71
  153. package/configure/src/__tests__/image-konva.test.jsx +0 -226
  154. package/configure/src/__tests__/index.test.js +0 -329
  155. package/configure/src/__tests__/root.test.js +0 -400
  156. package/configure/src/__tests__/utils.test.js +0 -241
  157. package/configure/src/button.jsx +0 -35
  158. package/configure/src/buttons/circle.jsx +0 -18
  159. package/configure/src/buttons/polygon.jsx +0 -29
  160. package/configure/src/buttons/rectangle.jsx +0 -29
  161. package/configure/src/defaults.js +0 -109
  162. package/configure/src/hotspot-circle.jsx +0 -183
  163. package/configure/src/hotspot-container.jsx +0 -330
  164. package/configure/src/hotspot-drawable.jsx +0 -527
  165. package/configure/src/hotspot-palette.jsx +0 -90
  166. package/configure/src/hotspot-polygon.jsx +0 -294
  167. package/configure/src/hotspot-rectangle.jsx +0 -169
  168. package/configure/src/icons.js +0 -5
  169. package/configure/src/image-konva.jsx +0 -63
  170. package/configure/src/index.js +0 -213
  171. package/configure/src/root.jsx +0 -342
  172. package/configure/src/shapes/circle.js +0 -81
  173. package/configure/src/shapes/index.js +0 -4
  174. package/configure/src/shapes/polygon.js +0 -81
  175. package/configure/src/shapes/rectagle.js +0 -82
  176. package/configure/src/shapes/utils.js +0 -16
  177. package/configure/src/upload-control.jsx +0 -33
  178. package/configure/src/utils.js +0 -210
  179. package/controller/CHANGELOG.json +0 -362
  180. package/controller/CHANGELOG.md +0 -1310
  181. package/controller/lib/defaults.js +0 -33
  182. package/controller/lib/defaults.js.map +0 -1
  183. package/controller/lib/index.js +0 -342
  184. package/controller/lib/index.js.map +0 -1
  185. package/controller/lib/utils.js +0 -32
  186. package/controller/lib/utils.js.map +0 -1
  187. package/controller/package.json +0 -18
  188. package/controller/src/__tests__/index.test.js +0 -419
  189. package/controller/src/__tests__/utils.test.js +0 -5
  190. package/controller/src/defaults.js +0 -19
  191. package/controller/src/index.js +0 -330
  192. package/controller/src/utils.js +0 -29
  193. package/docs/config-schema.json +0 -2023
  194. package/docs/config-schema.json.md +0 -1495
  195. package/docs/demo/config.js +0 -8
  196. package/docs/demo/generate.js +0 -122
  197. package/docs/demo/index.html +0 -1
  198. package/docs/demo/session.js +0 -11
  199. package/docs/pie-schema.json +0 -1204
  200. package/docs/pie-schema.json.md +0 -851
  201. package/lib/hotspot/circle.js +0 -160
  202. package/lib/hotspot/circle.js.map +0 -1
  203. package/lib/hotspot/container.js +0 -291
  204. package/lib/hotspot/container.js.map +0 -1
  205. package/lib/hotspot/icons.js +0 -8
  206. package/lib/hotspot/icons.js.map +0 -1
  207. package/lib/hotspot/image-konva-tooltip.js +0 -86
  208. package/lib/hotspot/image-konva-tooltip.js.map +0 -1
  209. package/lib/hotspot/index.js +0 -174
  210. package/lib/hotspot/index.js.map +0 -1
  211. package/lib/hotspot/polygon.js +0 -207
  212. package/lib/hotspot/polygon.js.map +0 -1
  213. package/lib/hotspot/rectangle.js +0 -178
  214. package/lib/hotspot/rectangle.js.map +0 -1
  215. package/lib/index.js +0 -214
  216. package/lib/index.js.map +0 -1
  217. package/lib/session-updater.js +0 -42
  218. package/lib/session-updater.js.map +0 -1
  219. package/src/__tests__/container.test.jsx +0 -58
  220. package/src/__tests__/index.test.js +0 -123
  221. package/src/__tests__/session-updater.test.jsx +0 -69
  222. package/src/hotspot/__tests__/circle.test.jsx +0 -464
  223. package/src/hotspot/__tests__/container.test.jsx +0 -546
  224. package/src/hotspot/__tests__/image-konva-tooltip.test.jsx +0 -510
  225. package/src/hotspot/__tests__/index.test.jsx +0 -64
  226. package/src/hotspot/__tests__/polygon.test.jsx +0 -502
  227. package/src/hotspot/__tests__/rectangle.test.jsx +0 -418
  228. package/src/hotspot/circle.jsx +0 -154
  229. package/src/hotspot/container.jsx +0 -297
  230. package/src/hotspot/icons.js +0 -7
  231. package/src/hotspot/image-konva-tooltip.jsx +0 -76
  232. package/src/hotspot/index.jsx +0 -179
  233. package/src/hotspot/polygon.jsx +0 -197
  234. package/src/hotspot/rectangle.jsx +0 -172
  235. package/src/index.js +0 -227
  236. package/src/session-updater.js +0 -29
@@ -1,174 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _reactDom = _interopRequireDefault(require("react-dom"));
11
- var _propTypes = _interopRequireDefault(require("prop-types"));
12
- var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
13
- var _renderUi = require("@pie-lib/render-ui");
14
- var _mathRendering = require("@pie-lib/math-rendering");
15
- var _styles = require("@mui/material/styles");
16
- var _container = _interopRequireDefault(require("./container"));
17
- const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
18
- color: _renderUi.color.text(),
19
- backgroundColor: _renderUi.color.background(),
20
- position: 'relative'
21
- });
22
- const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
23
- theme
24
- }) => ({
25
- marginBottom: theme.spacing(2)
26
- }));
27
- class HotspotComponent extends _react.default.Component {
28
- constructor(props) {
29
- super(props);
30
- (0, _defineProperty2.default)(this, "onToggle", () => {
31
- const {
32
- showCorrect
33
- } = this.state;
34
- this.setState({
35
- showCorrect: !showCorrect
36
- });
37
- });
38
- this.state = {
39
- showCorrect: false,
40
- observer: null,
41
- scale: 1
42
- };
43
- }
44
- componentDidMount() {
45
- this.observer = new MutationObserver(mutations => {
46
- mutations.forEach(() => {
47
- const target = document.getElementById('question-container')?.style?.cssText;
48
- const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
49
- const zoomParsed = zoom?.replace(/\s/g, '');
50
- if (zoomParsed) {
51
- const newScale = parseFloat(zoomParsed) / 100;
52
- if (newScale !== this.state.scale) {
53
- this.setState({
54
- scale: parseFloat(zoomParsed) / 100
55
- });
56
- }
57
- } else if (!zoomParsed && this.state.scale !== 1) {
58
- this.setState({
59
- scale: 1
60
- });
61
- }
62
- });
63
- });
64
- const target = document.getElementById('question-container');
65
- if (target) {
66
- this.observer.observe(target, {
67
- attributes: true,
68
- attributeFilter: ['style']
69
- });
70
- }
71
-
72
- // eslint-disable-next-line react/no-find-dom-node
73
- const domNode = _reactDom.default.findDOMNode(this);
74
- (0, _mathRendering.renderMath)(domNode);
75
- }
76
- componentDidUpdate() {
77
- // eslint-disable-next-line react/no-find-dom-node
78
- const domNode = _reactDom.default.findDOMNode(this);
79
- (0, _mathRendering.renderMath)(domNode);
80
- }
81
- componentWillUnmount() {
82
- this.observer?.disconnect();
83
- }
84
- render() {
85
- const {
86
- session,
87
- model: {
88
- disabled,
89
- extraCSSRules,
90
- imageUrl,
91
- prompt,
92
- mode,
93
- multipleCorrect,
94
- shapes,
95
- outlineColor,
96
- hotspotColor,
97
- hoverOutlineColor,
98
- selectedHotspotColor,
99
- dimensions,
100
- rationale,
101
- teacherInstructions,
102
- strokeWidth,
103
- responseCorrect,
104
- language,
105
- fontSizeFactor,
106
- autoplayAudioEnabled,
107
- customAudioButton
108
- },
109
- onSelectChoice
110
- } = this.props;
111
- const {
112
- showCorrect
113
- } = this.state;
114
- const isEvaluateMode = mode === 'evaluate';
115
- const isGatherMode = mode === 'gather';
116
- const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
117
- const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
118
- const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
119
- return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
120
- extraCSSRules: extraCSSRules,
121
- id: 'main-container',
122
- fontSizeFactor: fontSizeFactor
123
- }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
124
- labels: {
125
- hidden: 'Show Teacher Instructions',
126
- visible: 'Hide Teacher Instructions'
127
- }
128
- }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
129
- className: "prompt",
130
- prompt: teacherInstructions
131
- })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
132
- className: "prompt",
133
- prompt: prompt,
134
- autoplayAudioEnabled: autoplayAudioEnabled,
135
- customAudioButton: customAudioButton
136
- }), showCorrectAnswerToggle && /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
137
- show: showCorrectAnswerToggle,
138
- toggled: showCorrect,
139
- onToggle: this.onToggle.bind(this),
140
- language: language
141
- }), imageUrl ? /*#__PURE__*/_react.default.createElement(_container.default, {
142
- isEvaluateMode: isEvaluateMode,
143
- session: session,
144
- dimensions: dimensions,
145
- imageUrl: imageUrl,
146
- hotspotColor: hotspotColor,
147
- hoverOutlineColor: isGatherMode ? hoverOutlineColor : undefined,
148
- selectedHotspotColor: selectedHotspotColor,
149
- multipleCorrect: multipleCorrect,
150
- outlineColor: outlineColor,
151
- onSelectChoice: onSelectChoice,
152
- shapes: shapes,
153
- disabled: disabled,
154
- strokeWidth: strokeWidth,
155
- scale: this.state.scale,
156
- showCorrect: showCorrect
157
- }) : null, showRationale && /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
158
- labels: {
159
- hidden: 'Show Rationale',
160
- visible: 'Hide Rationale'
161
- }
162
- }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
163
- className: "prompt",
164
- prompt: rationale
165
- })));
166
- }
167
- }
168
- HotspotComponent.propTypes = {
169
- model: _propTypes.default.object.isRequired,
170
- onSelectChoice: _propTypes.default.func.isRequired,
171
- session: _propTypes.default.object.isRequired
172
- };
173
- var _default = exports.default = HotspotComponent;
174
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_correctAnswerToggle","_renderUi","_mathRendering","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","HotspotComponent","React","Component","constructor","props","_defineProperty2","default","showCorrect","state","setState","observer","scale","componentDidMount","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","domNode","ReactDOM","findDOMNode","renderMath","componentDidUpdate","componentWillUnmount","disconnect","render","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","isEvaluateMode","isGatherMode","showCorrectAnswerToggle","showRationale","hasText","hasMedia","showTeacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","bind","undefined","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/hotspot/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\n\nconst StyledUiLayout = styled(UiLayout)({\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n}));\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(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n\n // eslint-disable-next-line react/no-find-dom-node\n const domNode = ReactDOM.findDOMNode(this);\n\n renderMath(domNode);\n }\n\n componentDidUpdate() {\n // eslint-disable-next-line react/no-find-dom-node\n const domNode = ReactDOM.findDOMNode(this);\n\n renderMath(domNode);\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 extraCSSRules,\n imageUrl,\n prompt,\n mode,\n multipleCorrect,\n shapes,\n outlineColor,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n dimensions,\n rationale,\n teacherInstructions,\n strokeWidth,\n responseCorrect,\n language,\n fontSizeFactor,\n autoplayAudioEnabled,\n customAudioButton,\n },\n onSelectChoice,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const isGatherMode = mode === 'gather';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n const showTeacherInstructions =\n teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n return (\n <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>\n {showTeacherInstructions && (\n <StyledCollapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n </StyledCollapsible>\n )}\n\n {prompt && (\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n )}\n\n {showCorrectAnswerToggle && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n language={language}\n />\n )}\n\n {imageUrl ? (\n <Container\n isEvaluateMode={isEvaluateMode}\n session={session}\n dimensions={dimensions}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n hoverOutlineColor={isGatherMode ? hoverOutlineColor : undefined}\n selectedHotspotColor={selectedHotspotColor}\n multipleCorrect={multipleCorrect}\n outlineColor={outlineColor}\n onSelectChoice={onSelectChoice}\n shapes={shapes}\n disabled={disabled}\n strokeWidth={strokeWidth}\n scale={this.state.scale}\n showCorrect={showCorrect}\n />\n ) : null}\n\n {showRationale && (\n <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n <PreviewPrompt className=\"prompt\" prompt={rationale} />\n </Collapsible>\n )}\n </StyledUiLayout>\n );\n }\n}\n\nHotspotComponent.propTypes = {\n model: PropTypes.object.isRequired,\n onSelectChoice: PropTypes.func.isRequired,\n session: PropTypes.object.isRequired,\n};\n\nexport default HotspotComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,oBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAEA,IAAAO,UAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEA,MAAMQ,cAAc,GAAG,IAAAC,cAAM,EAACC,kBAAQ,CAAC,CAAC;EACtCC,KAAK,EAAEA,eAAK,CAACC,IAAI,CAAC,CAAC;EACnBC,eAAe,EAAEF,eAAK,CAACG,UAAU,CAAC,CAAC;EACnCC,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMC,iBAAiB,GAAG,IAAAP,cAAM,EAACQ,qBAAW,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5DC,YAAY,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,MAAMC,gBAAgB,SAASC,cAAK,CAACC,SAAS,CAAC;EAC7CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,oBAsDJ,MAAM;MACf,MAAM;QAAEC;MAAY,CAAC,GAAG,IAAI,CAACC,KAAK;MAClC,IAAI,CAACC,QAAQ,CAAC;QAAEF,WAAW,EAAE,CAACA;MAAY,CAAC,CAAC;IAC9C,CAAC;IAxDC,IAAI,CAACC,KAAK,GAAG;MACXD,WAAW,EAAE,KAAK;MAClBG,QAAQ,EAAE,IAAI;MACdC,KAAK,EAAE;IACT,CAAC;EACH;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACF,QAAQ,GAAG,IAAIG,gBAAgB,CAAEC,SAAS,IAAK;MAClDA,SAAS,CAACC,OAAO,CAAC,MAAM;QACtB,MAAMC,MAAM,GAAGC,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC,EAAEC,KAAK,EAAEC,OAAO;QAC5E,MAAMC,IAAI,GAAGL,MAAM,EAAEM,SAAS,CAACN,MAAM,CAACO,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,EAAEP,MAAM,CAACQ,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1F,MAAMC,UAAU,GAAGJ,IAAI,EAAEK,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;QAE3C,IAAID,UAAU,EAAE;UACd,MAAME,QAAQ,GAAGC,UAAU,CAACH,UAAU,CAAC,GAAG,GAAG;UAE7C,IAAIE,QAAQ,KAAK,IAAI,CAACnB,KAAK,CAACG,KAAK,EAAE;YACjC,IAAI,CAACF,QAAQ,CAAC;cACZE,KAAK,EAAEiB,UAAU,CAACH,UAAU,CAAC,GAAG;YAClC,CAAC,CAAC;UACJ;QACF,CAAC,MAAM,IAAI,CAACA,UAAU,IAAI,IAAI,CAACjB,KAAK,CAACG,KAAK,KAAK,CAAC,EAAE;UAChD,IAAI,CAACF,QAAQ,CAAC;YACZE,KAAK,EAAE;UACT,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAMK,MAAM,GAAGC,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC;IAE5D,IAAIF,MAAM,EAAE;MACV,IAAI,CAACN,QAAQ,CAACmB,OAAO,CAACb,MAAM,EAAE;QAAEc,UAAU,EAAE,IAAI;QAAEC,eAAe,EAAE,CAAC,OAAO;MAAE,CAAC,CAAC;IACjF;;IAEA;IACA,MAAMC,OAAO,GAAGC,iBAAQ,CAACC,WAAW,CAAC,IAAI,CAAC;IAE1C,IAAAC,yBAAU,EAACH,OAAO,CAAC;EACrB;EAEAI,kBAAkBA,CAAA,EAAG;IACnB;IACA,MAAMJ,OAAO,GAAGC,iBAAQ,CAACC,WAAW,CAAC,IAAI,CAAC;IAE1C,IAAAC,yBAAU,EAACH,OAAO,CAAC;EACrB;EAEAK,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAAC3B,QAAQ,EAAE4B,UAAU,CAAC,CAAC;EAC7B;EAOAC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACPC,KAAK,EAAE;QACLC,QAAQ;QACRC,aAAa;QACbC,QAAQ;QACRC,MAAM;QACNC,IAAI;QACJC,eAAe;QACfC,MAAM;QACNC,YAAY;QACZC,YAAY;QACZC,iBAAiB;QACjBC,oBAAoB;QACpBC,UAAU;QACVC,SAAS;QACTC,mBAAmB;QACnBC,WAAW;QACXC,eAAe;QACfC,QAAQ;QACRC,cAAc;QACdC,oBAAoB;QACpBC;MACF,CAAC;MACDC;IACF,CAAC,GAAG,IAAI,CAAC1D,KAAK;IACd,MAAM;MAAEG;IAAY,CAAC,GAAG,IAAI,CAACC,KAAK;IAClC,MAAMuD,cAAc,GAAGjB,IAAI,KAAK,UAAU;IAC1C,MAAMkB,YAAY,GAAGlB,IAAI,KAAK,QAAQ;IACtC,MAAMmB,uBAAuB,GAAGF,cAAc,IAAI,CAACN,eAAe;IAClE,MAAMS,aAAa,GAAGZ,SAAS,KAAK,IAAAa,iBAAO,EAACb,SAAS,CAAC,IAAI,IAAAc,kBAAQ,EAACd,SAAS,CAAC,CAAC;IAC9E,MAAMe,uBAAuB,GAC3Bd,mBAAmB,KAAK,IAAAY,iBAAO,EAACZ,mBAAmB,CAAC,IAAI,IAAAa,kBAAQ,EAACb,mBAAmB,CAAC,CAAC;IAExF,oBACE9E,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACnF,cAAc;MAACwD,aAAa,EAAEA,aAAc;MAAC4B,EAAE,EAAE,gBAAiB;MAACZ,cAAc,EAAEA;IAAe,GAChGU,uBAAuB,iBACtB5F,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAAC3E,iBAAiB;MAAC6E,MAAM,EAAE;QAAEC,MAAM,EAAE,2BAA2B;QAAEC,OAAO,EAAE;MAA4B;IAAE,gBACvGjG,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACvF,SAAA,CAAA4F,aAAa;MAACC,SAAS,EAAC,QAAQ;MAAC/B,MAAM,EAAEU;IAAoB,CAAE,CAC/C,CACpB,EAEAV,MAAM,iBACLpE,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACvF,SAAA,CAAA4F,aAAa;MACZC,SAAS,EAAC,QAAQ;MAClB/B,MAAM,EAAEA,MAAO;MACfe,oBAAoB,EAAEA,oBAAqB;MAC3CC,iBAAiB,EAAEA;IAAkB,CACtC,CACF,EAEAI,uBAAuB,iBACtBxF,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACxF,oBAAA,CAAAwB,OAAmB;MAClBuE,IAAI,EAAEZ,uBAAwB;MAC9Ba,OAAO,EAAEvE,WAAY;MACrBwE,QAAQ,EAAE,IAAI,CAACA,QAAQ,CAACC,IAAI,CAAC,IAAI,CAAE;MACnCtB,QAAQ,EAAEA;IAAS,CACpB,CACF,EAEAd,QAAQ,gBACPnE,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACpF,UAAA,CAAAoB,OAAS;MACRyD,cAAc,EAAEA,cAAe;MAC/BvB,OAAO,EAAEA,OAAQ;MACjBa,UAAU,EAAEA,UAAW;MACvBT,QAAQ,EAAEA,QAAS;MACnBM,YAAY,EAAEA,YAAa;MAC3BC,iBAAiB,EAAEa,YAAY,GAAGb,iBAAiB,GAAG8B,SAAU;MAChE7B,oBAAoB,EAAEA,oBAAqB;MAC3CL,eAAe,EAAEA,eAAgB;MACjCE,YAAY,EAAEA,YAAa;MAC3Ba,cAAc,EAAEA,cAAe;MAC/Bd,MAAM,EAAEA,MAAO;MACfN,QAAQ,EAAEA,QAAS;MACnBc,WAAW,EAAEA,WAAY;MACzB7C,KAAK,EAAE,IAAI,CAACH,KAAK,CAACG,KAAM;MACxBJ,WAAW,EAAEA;IAAY,CAC1B,CAAC,GACA,IAAI,EAEP2D,aAAa,iBACZzF,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACvF,SAAA,CAAAa,WAAW;MAAC4E,MAAM,EAAE;QAAEC,MAAM,EAAE,gBAAgB;QAAEC,OAAO,EAAE;MAAiB;IAAE,gBAC3EjG,MAAA,CAAA6B,OAAA,CAAAgE,aAAA,CAACvF,SAAA,CAAA4F,aAAa;MAACC,SAAS,EAAC,QAAQ;MAAC/B,MAAM,EAAES;IAAU,CAAE,CAC3C,CAED,CAAC;EAErB;AACF;AAEAtD,gBAAgB,CAACkF,SAAS,GAAG;EAC3BzC,KAAK,EAAE0C,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClCvB,cAAc,EAAEqB,kBAAS,CAACG,IAAI,CAACD,UAAU;EACzC7C,OAAO,EAAE2C,kBAAS,CAACC,MAAM,CAACC;AAC5B,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAlF,OAAA,GAEaN,gBAAgB","ignoreList":[]}
@@ -1,207 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
- var _reactKonva = require("react-konva");
12
- var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
13
- var _icons = require("./icons");
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);
28
- return [(minX + maxX) / 2, (minY + maxY) / 2];
29
- });
30
- (0, _defineProperty2.default)(this, "parsePointsForKonva", points => {
31
- const parsedPoints = [];
32
- points.forEach(({
33
- x,
34
- y
35
- }) => {
36
- parsedPoints.push(x);
37
- parsedPoints.push(y);
38
- });
39
- return parsedPoints;
40
- });
41
- (0, _defineProperty2.default)(this, "handleClick", e => {
42
- const {
43
- onClick,
44
- id,
45
- selected,
46
- disabled
47
- } = this.props;
48
- if (!disabled) {
49
- e.cancelBubble = true;
50
- onClick({
51
- id,
52
- selected: !selected,
53
- selector: 'Mouse'
54
- });
55
- }
56
- });
57
- (0, _defineProperty2.default)(this, "handleMouseEnter", () => {
58
- const {
59
- disabled
60
- } = this.props;
61
- if (!disabled) {
62
- document.body.style.cursor = 'pointer';
63
- }
64
- this.setState({
65
- hovered: true
66
- });
67
- });
68
- (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
69
- document.body.style.cursor = 'default';
70
- this.setState({
71
- hovered: false
72
- });
73
- });
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 = {
77
- hovered: false
78
- };
79
- }
80
- render() {
81
- const {
82
- hotspotColor,
83
- isCorrect,
84
- isEvaluateMode,
85
- hoverOutlineColor,
86
- outlineColor,
87
- selected,
88
- focused,
89
- points,
90
- evaluateText,
91
- strokeWidth,
92
- scale,
93
- markAsCorrect,
94
- selectedHotspotColor,
95
- showCorrectEnabled
96
- } = this.props;
97
- const {
98
- hovered
99
- } = this.state;
100
- const outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
101
- const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
102
- const pointsParsed = this.parsePointsForKonva(points);
103
- const center = this.getPolygonCenter(points);
104
- const iconX = center[0];
105
- const iconY = center[1];
106
-
107
- // "Show Correct Answer" Enabled:
108
- // - Correctly Selected: white checkmark in green circle
109
- // - Correctly Not Selected: none
110
- // - Incorrectly Selected: none
111
- // - Incorrectly Not Selected: white checkmark in green circle
112
- // "Show Correct Answer" Disabled:
113
- // - Correctly Selected:
114
- // - white checkmark in green circle
115
- // - heavy outline, as on “Gather”
116
- // - Correctly Not Selected: none
117
- // - Incorrectly Selected:
118
- // - white "X" in red circle
119
- // - heavy outline around the selection should appear in red
120
- // - Incorrectly Not Selected: white "X" in red circle
121
- let iconSrc;
122
- if (showCorrectEnabled) {
123
- if (selected && isCorrect || !selected && !isCorrect) {
124
- iconSrc = _icons.faCorrect;
125
- }
126
- } else {
127
- if (selected) {
128
- if (isCorrect) {
129
- iconSrc = _icons.faCorrect;
130
- } else {
131
- iconSrc = _icons.faWrong;
132
- }
133
- } else if (!isCorrect) {
134
- iconSrc = _icons.faWrong;
135
- }
136
- }
137
- const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
138
- const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates
139
- const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates
140
-
141
- const minX = Math.min(...xValues);
142
- const maxX = Math.max(...xValues);
143
- const minY = Math.min(...yValues);
144
- const maxY = Math.max(...yValues);
145
- const rectX = minX;
146
- const rectY = minY;
147
- const rectWidth = maxX - minX;
148
- const rectHeight = maxY - minY;
149
- return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
150
- scaleX: scale,
151
- scaleY: scale,
152
- onMouseEnter: this.handleMouseEnter,
153
- onMouseLeave: this.handleMouseLeave
154
- }, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
155
- points: pointsParsed,
156
- closed: true,
157
- fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
158
- onClick: this.handleClick,
159
- onTap: this.handleClick,
160
- draggable: false,
161
- stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
162
- strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
163
- cursor: "pointer",
164
- position: "relative"
165
- }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
166
- x: rectX,
167
- y: rectY,
168
- width: rectWidth,
169
- height: rectHeight,
170
- stroke: hoverOutlineColor,
171
- strokeWidth: strokeWidth,
172
- listening: false
173
- }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
174
- src: iconSrc,
175
- x: iconX,
176
- y: iconY,
177
- tooltip: evaluateText
178
- }) : null);
179
- }
180
- }
181
- PolygonComponent.propTypes = {
182
- hotspotColor: _propTypes.default.string.isRequired,
183
- id: _propTypes.default.string.isRequired,
184
- isCorrect: _propTypes.default.bool.isRequired,
185
- isEvaluateMode: _propTypes.default.bool.isRequired,
186
- hoverOutlineColor: _propTypes.default.string,
187
- disabled: _propTypes.default.bool.isRequired,
188
- focused: _propTypes.default.bool,
189
- onClick: _propTypes.default.func.isRequired,
190
- outlineColor: _propTypes.default.string.isRequired,
191
- points: _propTypes.default.array.isRequired,
192
- selected: _propTypes.default.bool.isRequired,
193
- evaluateText: _propTypes.default.string,
194
- selectedHotspotColor: _propTypes.default.string,
195
- strokeWidth: _propTypes.default.number,
196
- scale: _propTypes.default.number,
197
- markAsCorrect: _propTypes.default.bool.isRequired,
198
- showCorrectEnabled: _propTypes.default.bool.isRequired
199
- };
200
- PolygonComponent.defaultProps = {
201
- evaluateText: null,
202
- focused: false,
203
- strokeWidth: 5,
204
- scale: 1
205
- };
206
- var _default = exports.default = PolygonComponent;
207
- //# sourceMappingURL=polygon.js.map
@@ -1 +0,0 @@
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","focused","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","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","Line","closed","fill","handleClick","onTap","draggable","stroke","position","Rect","width","height","listening","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 focused,\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 || focused) && 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} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\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 cursor=\"pointer\"\n position=\"relative\"\n />\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\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 focused: PropTypes.bool,\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 focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}
@@ -1,178 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
- var _reactKonva = require("react-konva");
12
- var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
13
- var _icons = require("./icons");
14
- class RectComponent extends _react.default.Component {
15
- constructor(props) {
16
- super(props);
17
- (0, _defineProperty2.default)(this, "handleClick", e => {
18
- const {
19
- onClick,
20
- id,
21
- selected,
22
- disabled
23
- } = this.props;
24
- if (!disabled) {
25
- e.cancelBubble = true;
26
- onClick({
27
- id,
28
- selected: !selected,
29
- selector: 'Mouse'
30
- });
31
- }
32
- });
33
- (0, _defineProperty2.default)(this, "handleMouseEnter", () => {
34
- const {
35
- disabled
36
- } = this.props;
37
- if (!disabled) {
38
- document.body.style.cursor = 'pointer';
39
- }
40
- this.setState({
41
- hovered: true
42
- });
43
- });
44
- (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
45
- document.body.style.cursor = 'default';
46
- this.setState({
47
- hovered: false
48
- });
49
- });
50
- (0, _defineProperty2.default)(this, "getEvaluateOutlineColor", (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red');
51
- (0, _defineProperty2.default)(this, "getOutlineWidth", (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0);
52
- this.state = {
53
- hovered: false
54
- };
55
- }
56
- render() {
57
- const {
58
- height,
59
- hotspotColor,
60
- hoverOutlineColor,
61
- selectedHotspotColor,
62
- isCorrect,
63
- isEvaluateMode,
64
- outlineColor,
65
- selected,
66
- focused,
67
- width,
68
- x,
69
- y,
70
- evaluateText,
71
- strokeWidth,
72
- scale,
73
- markAsCorrect,
74
- showCorrectEnabled
75
- } = this.props;
76
- const {
77
- hovered
78
- } = this.state;
79
- const outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
80
- const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
81
- const iconX = x + width / 2 - 10;
82
- const iconY = y + height / 2 - 10;
83
-
84
- // "Show Correct Answer" Enabled:
85
- // - Correctly Selected: white checkmark in green circle
86
- // - Correctly Not Selected: none
87
- // - Incorrectly Selected: none
88
- // - Incorrectly Not Selected: white checkmark in green circle
89
- // "Show Correct Answer" Disabled:
90
- // - Correctly Selected:
91
- // - white checkmark in green circle
92
- // - heavy outline, as on “Gather”
93
- // - Correctly Not Selected: none
94
- // - Incorrectly Selected:
95
- // - white "X" in red circle
96
- // - heavy outline around the selection should appear in red
97
- // - Incorrectly Not Selected: white "X" in red circle
98
- let iconSrc;
99
- if (showCorrectEnabled) {
100
- if (selected && isCorrect || !selected && !isCorrect) {
101
- iconSrc = _icons.faCorrect;
102
- }
103
- } else {
104
- if (selected) {
105
- if (isCorrect) {
106
- iconSrc = _icons.faCorrect;
107
- } else {
108
- iconSrc = _icons.faWrong;
109
- }
110
- } else if (!isCorrect) {
111
- iconSrc = _icons.faWrong;
112
- }
113
- }
114
- const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
115
- return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
116
- scaleX: scale,
117
- scaleY: scale,
118
- onMouseLeave: this.handleMouseLeave,
119
- onMouseEnter: this.handleMouseEnter
120
- }, /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
121
- x: x,
122
- y: y,
123
- width: width,
124
- height: height,
125
- fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
126
- onClick: this.handleClick,
127
- onTap: this.handleClick,
128
- draggable: false,
129
- stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
130
- strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
131
- cursor: "pointer"
132
- }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
133
- x: x,
134
- y: y,
135
- width: width,
136
- height: height,
137
- stroke: hoverOutlineColor,
138
- strokeWidth: strokeWidth,
139
- listening: false
140
- }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
141
- src: iconSrc,
142
- x: iconX,
143
- y: iconY,
144
- tooltip: evaluateText
145
- }) : null);
146
- }
147
- }
148
- RectComponent.propTypes = {
149
- height: _propTypes.default.number.isRequired,
150
- hotspotColor: _propTypes.default.string.isRequired,
151
- id: _propTypes.default.string.isRequired,
152
- isCorrect: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
153
- isEvaluateMode: _propTypes.default.bool.isRequired,
154
- hoverOutlineColor: _propTypes.default.string,
155
- disabled: _propTypes.default.bool.isRequired,
156
- focused: _propTypes.default.bool,
157
- onClick: _propTypes.default.func.isRequired,
158
- outlineColor: _propTypes.default.string.isRequired,
159
- selected: _propTypes.default.bool.isRequired,
160
- width: _propTypes.default.number.isRequired,
161
- x: _propTypes.default.number.isRequired,
162
- y: _propTypes.default.number.isRequired,
163
- evaluateText: _propTypes.default.string,
164
- strokeWidth: _propTypes.default.number,
165
- scale: _propTypes.default.number,
166
- selectedHotspotColor: _propTypes.default.string,
167
- markAsCorrect: _propTypes.default.bool.isRequired,
168
- showCorrectEnabled: _propTypes.default.bool.isRequired
169
- };
170
- RectComponent.defaultProps = {
171
- isCorrect: false,
172
- evaluateText: null,
173
- focused: false,
174
- strokeWidth: 5,
175
- scale: 1
176
- };
177
- var _default = exports.default = RectComponent;
178
- //# sourceMappingURL=rectangle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","focused","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","fill","handleClick","onTap","draggable","stroke","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\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 height,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n focused,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\n const { hovered } = this.state;\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 const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n return (\n <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\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 cursor=\"pointer\"\n />\n {useHoveredStyle && (\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nRectComponent.propTypes = {\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 hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\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 selectedHotspotColor: PropTypes.string,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}