@pie-element/hotspot 9.3.4-next.0 → 10.0.0-beta.0

package/src/hotspot/index.jsx

@@ -2,10 +2,20 @@ import React from 'react';
 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 { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import Container from './container';
 
+const StyledUiLayout = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  position: 'relative',
+});
+
+const StyledCollapsible = styled(Collapsible)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
 class HotspotComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -81,7 +91,6 @@ class HotspotComponent extends React.Component {
         customAudioButton,
       },
       onSelectChoice,
-      classes,
     } = this.props;
     const { showCorrect } = this.state;
     const isEvaluateMode = mode === 'evaluate';
@@ -91,19 +100,17 @@ class HotspotComponent extends React.Component {
       teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
 
     return (
-      <UiLayout
+      <StyledUiLayout
         extraCSSRules={extraCSSRules}
         id={'main-container'}
-        className={classes.main}
         fontSizeFactor={fontSizeFactor}
       >
         {showTeacherInstructions && (
-          <Collapsible
+          <StyledCollapsible
             labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
-            className={classes.collapsible}
           >
             <PreviewPrompt className="prompt" prompt={teacherInstructions} />
-          </Collapsible>
+          </StyledCollapsible>
         )}
 
         {prompt && (
@@ -149,34 +156,15 @@ class HotspotComponent extends React.Component {
             <PreviewPrompt className="prompt" prompt={rationale} />
           </Collapsible>
         )}
-      </UiLayout>
+      </StyledUiLayout>
     );
   }
 }
 
 HotspotComponent.propTypes = {
-  classes: PropTypes.object,
   model: PropTypes.object.isRequired,
   onSelectChoice: PropTypes.func.isRequired,
   session: PropTypes.object.isRequired,
 };
 
-HotspotComponent.defaultProps = {
-  classes: {},
-};
-
-const styles = (theme) => ({
-  main: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    position: 'relative',
-  },
-  collapsible: {
-    marginBottom: theme.spacing.unit * 2,
-  },
-  prompt: {
-    fontSize: 'inherit',
-  },
-});
-
-export default withStyles(styles)(HotspotComponent);
+export default HotspotComponent;

package/src/hotspot/polygon.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Line, Group, Rect } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
 import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
@@ -63,7 +62,6 @@ class PolygonComponent extends React.Component {
 
   render() {
     const {
-      classes,
       hotspotColor,
       isCorrect,
       isEvaluateMode,
@@ -152,7 +150,6 @@ class PolygonComponent extends React.Component {
         <Line
           points={pointsParsed}
           closed={true}
-          classes={classes.base}
           fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
@@ -161,6 +158,9 @@ class PolygonComponent extends React.Component {
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
+          opacity={0.5}
+          cursor='pointer'
+          position='relative'
         />
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
@@ -168,16 +168,7 @@ class PolygonComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-    position: 'relative',
-  },
-});
-
 PolygonComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   isCorrect: PropTypes.bool.isRequired,
@@ -202,4 +193,4 @@ PolygonComponent.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(PolygonComponent);
+export default PolygonComponent;

package/src/hotspot/rectangle.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Rect, Group } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
 import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
@@ -44,7 +43,6 @@ class RectComponent extends React.Component {
 
   render() {
     const {
-      classes,
       height,
       hotspotColor,
       hoverOutlineColor,
@@ -121,7 +119,8 @@ class RectComponent extends React.Component {
           />
         )}
         <Rect
-          classes={classes.base}
+          x={x}
+          y={y}
           width={width}
           height={height}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
@@ -132,8 +131,8 @@ class RectComponent extends React.Component {
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
-          x={x}
-          y={y}
+          opacity={0.5}
+          cursor="pointer"
         />
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
@@ -141,16 +140,7 @@ class RectComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-    position: 'relative',
-  },
-});
-
 RectComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   height: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -179,4 +169,4 @@ RectComponent.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(RectComponent);
+export default RectComponent;

package/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { renderMath } from '@pie-lib/math-rendering';
 import { EnableAudioAutoplayImage } from '@pie-lib/render-ui';
 import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
@@ -14,6 +14,7 @@ export default class Hotspot extends HTMLElement {
     this._session = null;
     this._audioInitialized = false;
     this.audioComplete = false;
+    this._root = null;
   }
 
   set model(m) {
@@ -191,16 +192,6 @@ export default class Hotspot extends HTMLElement {
     observer.observe(this, { childList: true, subtree: true });
   }
 
-  disconnectedCallback() {
-    document.removeEventListener('click', this._enableAudio);
-
-    if (this._audio) {
-      this._audio.removeEventListener('playing', this._handlePlaying);
-      this._audio.removeEventListener('ended', this._handleEnded);
-      this._audio = null;
-    }
-  }
-
   _render() {
     if (this._model && this._session) {
       const el = React.createElement(HotspotComponent, {
@@ -209,9 +200,27 @@ export default class Hotspot extends HTMLElement {
         onSelectChoice: this.onSelectChoice.bind(this),
       });
 
-      ReactDOM.render(el, this, () => {
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
         renderMath(this);
       });
     }
   }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
 }

package/configure/src/__tests__/DeleteWidget.test.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import DeleteWidget from '../DeleteWidget'; // Adjust the import path as needed
-import ImageComponent from '../image-konva';
-
-describe('DeleteWidget', () => {
-    it('computes positionX and positionY correctly without points', () => {
-        const mockHandleWidgetClick = jest.fn();
-
-        const props = {
-            id: 'someId',
-            x: 5,
-            y: 10,
-            width: 30,
-            height: 40,
-            outlineColor: 'blue',
-            handleWidgetClick: mockHandleWidgetClick,
-        };
-
-        const wrapper = shallow(<DeleteWidget {...props} />);
-
-        // Assert that the computed positionX and positionY match the expected values
-        expect(wrapper.find(ImageComponent).prop('x')).toEqual(15);
-        expect(wrapper.find(ImageComponent).prop('y')).toEqual(30);
-
-        // Simulate a click event on the Group element
-        wrapper.find('Group').simulate('click');
-
-        // Assert that the handleWidgetClick function is called with the correct arguments
-        expect(mockHandleWidgetClick).toHaveBeenCalledWith('someId');
-    });
-
-    it('computes positionX and positionY correctly with points', () => {
-        const props = {
-            id: 'someId',
-            x: 5,
-            y: 10,
-            points: [
-                {
-                    "y": 151,
-                    "x": 141
-                },
-                {
-                    "y": 289,
-                    "x": 205
-                },
-                {
-                    "x": 269,
-                    "y": 151
-                }
-            ],
-            width: 30,
-            height: 40,
-            outlineColor: 'blue',
-        };
-
-        const wrapper = shallow(<DeleteWidget {...props} />);
-
-        // Assert that the computed positionX and positionY match the expected values
-        expect(wrapper.find(ImageComponent).prop('x')).toEqual(239);
-        expect(wrapper.find(ImageComponent).prop('y')).toEqual(194);
-
-    });
-});

package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -1,192 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HotspotContainer render renders 1`] = `
-<div>
-  <div
-    className=""
-    onDragExit={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDrop={[Function]}
-    onPaste={[Function]}
-  >
-    <div>
-      <div
-        onClick={[Function]}
-      >
-        <RectangleButton
-          isActive={false}
-        />
-      </div>
-      <div
-        onClick={[Function]}
-      >
-        <PolygonButton
-          isActive={false}
-        />
-      </div>
-      <div
-        onClick={[Function]}
-      >
-        <CircleButton
-          isActive={false}
-        />
-      </div>
-      <WithStyles(UploadControl)
-        label="Replace Image"
-        onInputClick={[Function]}
-        setRef={[Function]}
-      />
-      <WithStyles(RawButton)
-        disabled={false}
-        label="Clear all"
-        onClick={[Function]}
-      />
-    </div>
-    <div>
-      <WithStyles(Drawable)
-        dimensions={
-          Object {
-            "height": 291,
-            "width": 410,
-          }
-        }
-        disableDrag={[Function]}
-        enableDrag={[Function]}
-        handleFinishDrawing={[Function]}
-        hotspotColor="rgba(137, 183, 244, 0.65)"
-        imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
-        multipleCorrect={true}
-        onDeleteShape={[Function]}
-        onUpdateImageDimension={[MockFunction]}
-        onUpdateShapes={[Function]}
-        outlineColor="blue"
-        shapeType="none"
-        shapes={
-          Array [
-            Object {
-              "correct": true,
-              "group": "rectangles",
-              "height": 140,
-              "id": "0",
-              "index": 0,
-              "width": 130,
-              "x": 1,
-              "y": 1,
-            },
-            Object {
-              "group": "rectangles",
-              "height": 140,
-              "id": "1",
-              "index": 1,
-              "width": 130,
-              "x": 140,
-              "y": 1,
-            },
-            Object {
-              "group": "rectangles",
-              "height": 140,
-              "id": "2",
-              "index": 2,
-              "width": 130,
-              "x": 280,
-              "y": 1,
-            },
-            Object {
-              "correct": true,
-              "group": "polygons",
-              "id": "3",
-              "index": 3,
-              "points": Array [
-                Object {
-                  "x": 1,
-                  "y": 148,
-                },
-                Object {
-                  "x": 1,
-                  "y": 288,
-                },
-                Object {
-                  "x": 129,
-                  "y": 288,
-                },
-                Object {
-                  "x": 129,
-                  "y": 148,
-                },
-              ],
-            },
-            Object {
-              "correct": false,
-              "group": "polygons",
-              "id": "4",
-              "index": 4,
-              "points": Array [
-                Object {
-                  "x": 141,
-                  "y": 151,
-                },
-                Object {
-                  "x": 141,
-                  "y": 289,
-                },
-                Object {
-                  "x": 269,
-                  "y": 289,
-                },
-                Object {
-                  "x": 269,
-                  "y": 151,
-                },
-              ],
-            },
-            Object {
-              "correct": false,
-              "group": "polygons",
-              "id": "5",
-              "index": 5,
-              "points": Array [
-                Object {
-                  "x": 279,
-                  "y": 150,
-                },
-                Object {
-                  "x": 279,
-                  "y": 289,
-                },
-                Object {
-                  "x": 407,
-                  "y": 289,
-                },
-                Object {
-                  "x": 407,
-                  "y": 150,
-                },
-              ],
-            },
-            Object {
-              "correct": false,
-              "group": "circles",
-              "id": "6",
-              "index": 6,
-              "radius": 70,
-              "x": 100,
-              "y": 100,
-            },
-            Object {
-              "correct": true,
-              "group": "circles",
-              "id": "7",
-              "index": 7,
-              "radius": 30,
-              "x": 200,
-              "y": 150,
-            },
-          ]
-        }
-        strokeWidth={5}
-      />
-    </div>
-  </div>
-</div>
-`;