@pie-element/hotspot 11.1.1-next.61 → 11.1.1-next.89

package/configure/package.json

@@ -12,8 +12,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.10",
-    "@pie-lib/editable-html-tip-tap": "2.1.8",
+    "@pie-lib/config-ui": "13.0.12",
+    "@pie-lib/editable-html-tip-tap": "2.1.10",
     "debug": "^4.1.1",
     "konva": "8.3.0",
     "lodash-es": "^4.17.23",

package/lib/hotspot/index.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
 var _styles = require("@mui/material/styles");
 var _container = _interopRequireDefault(require("./container"));
 const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
@@ -66,6 +68,15 @@ class HotspotComponent extends _react.default.Component {
         attributeFilter: ['style']
       });
     }
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
   }
   componentWillUnmount() {
     this.observer?.disconnect();

package/lib/hotspot/index.js.map

@@ -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":[]}
+{"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

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot",
   "repository": "pie-framework/pie-elements",
-  "version": "11.1.1-next.61+561ce0d6a",
+  "version": "11.1.1-next.89+620d65469",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,9 +12,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "4.0.4",
-    "@pie-lib/math-rendering": "5.0.2",
-    "@pie-lib/render-ui": "6.1.2",
+    "@pie-lib/correct-answer-toggle": "4.0.5",
+    "@pie-lib/math-rendering": "5.1.0",
+    "@pie-lib/render-ui": "6.1.3",
     "@pie-lib/test-utils": "2.0.2",
     "konva": "8.3.0",
     "prop-types": "^15.8.1",
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "561ce0d6a418ad4a7944c1815135c2be4c8e2507",
+  "gitHead": "620d65469534b5110ac40573660b1c0cf6aae35b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/__tests__/index.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { renderMath } from '@pie-lib/math-rendering';
+import HotspotComponent from '../index';
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
+jest.mock('../container', () => (props) => <div data-testid="container" {...props} />);
+
+describe('HotspotComponent', () => {
+  const defaultModel = {
+    disabled: false,
+    imageUrl: 'http://example.com/image.png',
+    prompt: 'prompt',
+    mode: 'gather',
+    multipleCorrect: false,
+    shapes: { rectangles: [], polygons: [], circles: [] },
+    dimensions: { width: 800, height: 600 },
+    strokeWidth: 5,
+  };
+
+  const getWrapper = (props) =>
+    render(
+      <HotspotComponent
+        onSelectChoice={jest.fn()}
+        session={{ answers: [] }}
+        model={defaultModel}
+        {...props}
+      />,
+    );
+
+  beforeEach(() => {
+    renderMath.mockClear();
+  });
+
+  describe('math rendering', () => {
+    it('calls renderMath on mount', () => {
+      getWrapper();
+      expect(renderMath).toHaveBeenCalled();
+    });
+
+    it('passes the rendered dom node to renderMath on mount', () => {
+      getWrapper();
+      expect(renderMath).toHaveBeenCalledWith(expect.any(HTMLElement));
+    });
+
+    it('calls renderMath again on update', () => {
+      const { rerender } = getWrapper();
+      renderMath.mockClear();
+
+      rerender(
+        <HotspotComponent
+          onSelectChoice={jest.fn()}
+          session={{ answers: [] }}
+          model={{ ...defaultModel, prompt: 'updated prompt' }}
+        />,
+      );
+
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+});

package/src/hotspot/index.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 import { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
 import { styled } from '@mui/material/styles';
 
 import Container from './container';
@@ -54,6 +56,18 @@ class HotspotComponent extends React.Component {
     if (target) {
       this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
     }
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
   }
 
   componentWillUnmount() {