@pie-element/hotspot 11.1.6 → 11.1.7

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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/configure/CHANGELOG.md +6 -0
  3. package/configure/package.json +3 -3
  4. package/lib/hotspot/index.js +11 -0
  5. package/lib/hotspot/index.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/hotspot/__tests__/index.test.jsx +64 -0
  8. package/src/hotspot/index.jsx +14 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [11.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.6...@pie-element/hotspot@11.1.7) (2026-07-08)
7
+
8
+ ### Bug Fixes
9
+
10
+ - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
11
+ - made sure math is rendered on mount and on updates in hotspot and text-select [PIE-718 ([fc55638](https://github.com/pie-framework/pie-elements/commit/fc55638a3b2cd7692c5f7212952d1d7baf36ff98))
12
+
6
13
  ## [11.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.5...@pie-element/hotspot@11.1.6) (2026-07-02)
7
14
 
8
15
  ### Bug Fixes
package/configure/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.6...@pie-element/hotspot-configure@10.1.7) (2026-07-08)
7
+
8
+ ### Bug Fixes
9
+
10
+ - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
11
+
6
12
  ## [10.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.5...@pie-element/hotspot-configure@10.1.6) (2026-07-02)
7
13
 
8
14
  ### Bug Fixes
package/configure/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot-configure",
3
3
  "private": true,
4
- "version": "10.1.6",
4
+ "version": "10.1.7",
5
5
  "description": "",
6
6
  "main": "lib/index.js",
7
7
  "module": "src/index.js",
@@ -12,8 +12,8 @@
12
12
  "@mui/icons-material": "^7.3.4",
13
13
  "@mui/material": "^7.3.4",
14
14
  "@pie-framework/pie-configure-events": "^1.3.0",
15
- "@pie-lib/config-ui": "13.0.11",
16
- "@pie-lib/editable-html-tip-tap": "2.1.9",
15
+ "@pie-lib/config-ui": "13.0.12",
16
+ "@pie-lib/editable-html-tip-tap": "2.1.10",
17
17
  "debug": "^4.1.1",
18
18
  "konva": "8.3.0",
19
19
  "lodash-es": "^4.17.23",
package/lib/hotspot/index.js CHANGED
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
+ var _reactDom = _interopRequireDefault(require("react-dom"));
10
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
12
  var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
12
13
  var _renderUi = require("@pie-lib/render-ui");
14
+ var _mathRendering = require("@pie-lib/math-rendering");
13
15
  var _styles = require("@mui/material/styles");
14
16
  var _container = _interopRequireDefault(require("./container"));
15
17
  const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
@@ -66,6 +68,15 @@ class HotspotComponent extends _react.default.Component {
66
68
  attributeFilter: ['style']
67
69
  });
68
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);
69
80
  }
70
81
  componentWillUnmount() {
71
82
  this.observer?.disconnect();
package/lib/hotspot/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_renderUi","_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","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 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 { 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\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":"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","ignoreList":[]}
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":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot",
3
3
  "repository": "pie-framework/pie-elements",
4
- "version": "11.1.6",
4
+ "version": "11.1.7",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "author": "pie framework developers",
26
26
  "license": "ISC",
27
- "gitHead": "c022c438107df16842a810eefc9a0fe52664be49",
27
+ "gitHead": "15b95b0767ae81eec579967743dbc954450acf7a",
28
28
  "scripts": {
29
29
  "postpublish": "../../scripts/postpublish"
30
30
  },
package/src/hotspot/__tests__/index.test.jsx ADDED
@@ -0,0 +1,64 @@
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+ import { renderMath } from '@pie-lib/math-rendering';
4
+ import HotspotComponent from '../index';
5
+
6
+ jest.mock('@pie-lib/math-rendering', () => ({
7
+ renderMath: jest.fn(),
8
+ }));
9
+
10
+ jest.mock('../container', () => (props) => <div data-testid="container" {...props} />);
11
+
12
+ describe('HotspotComponent', () => {
13
+ const defaultModel = {
14
+ disabled: false,
15
+ imageUrl: 'http://example.com/image.png',
16
+ prompt: 'prompt',
17
+ mode: 'gather',
18
+ multipleCorrect: false,
19
+ shapes: { rectangles: [], polygons: [], circles: [] },
20
+ dimensions: { width: 800, height: 600 },
21
+ strokeWidth: 5,
22
+ };
23
+
24
+ const getWrapper = (props) =>
25
+ render(
26
+ <HotspotComponent
27
+ onSelectChoice={jest.fn()}
28
+ session={{ answers: [] }}
29
+ model={defaultModel}
30
+ {...props}
31
+ />,
32
+ );
33
+
34
+ beforeEach(() => {
35
+ renderMath.mockClear();
36
+ });
37
+
38
+ describe('math rendering', () => {
39
+ it('calls renderMath on mount', () => {
40
+ getWrapper();
41
+ expect(renderMath).toHaveBeenCalled();
42
+ });
43
+
44
+ it('passes the rendered dom node to renderMath on mount', () => {
45
+ getWrapper();
46
+ expect(renderMath).toHaveBeenCalledWith(expect.any(HTMLElement));
47
+ });
48
+
49
+ it('calls renderMath again on update', () => {
50
+ const { rerender } = getWrapper();
51
+ renderMath.mockClear();
52
+
53
+ rerender(
54
+ <HotspotComponent
55
+ onSelectChoice={jest.fn()}
56
+ session={{ answers: [] }}
57
+ model={{ ...defaultModel, prompt: 'updated prompt' }}
58
+ />,
59
+ );
60
+
61
+ expect(renderMath).toHaveBeenCalled();
62
+ });
63
+ });
64
+ });
package/src/hotspot/index.jsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
+ import ReactDOM from 'react-dom';
2
3
  import PropTypes from 'prop-types';
3
4
  import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
4
5
  import { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';
6
+ import { renderMath } from '@pie-lib/math-rendering';
5
7
  import { styled } from '@mui/material/styles';
6
8
 
7
9
  import Container from './container';
@@ -54,6 +56,18 @@ class HotspotComponent extends React.Component {
54
56
  if (target) {
55
57
  this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
56
58
  }
59
+
60
+ // eslint-disable-next-line react/no-find-dom-node
61
+ const domNode = ReactDOM.findDOMNode(this);
62
+
63
+ renderMath(domNode);
64
+ }
65
+
66
+ componentDidUpdate() {
67
+ // eslint-disable-next-line react/no-find-dom-node
68
+ const domNode = ReactDOM.findDOMNode(this);
69
+
70
+ renderMath(domNode);
57
71
  }
58
72
 
59
73
  componentWillUnmount() {