@pie-element/hotspot 11.1.6 → 11.2.0

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

@@ -71,7 +71,7 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       expect(mainRect).toHaveAttribute('x', '10');
       expect(mainRect).toHaveAttribute('y', '20');
       expect(mainRect).toHaveAttribute('width', '100');
@@ -82,7 +82,7 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       expect(mainRect).toHaveAttribute('fill', '#FF0000');
     });
 
@@ -90,14 +90,14 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} selected={true} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       expect(mainRect).toHaveAttribute('fill', '#00FF00');
     });
 
     it('should apply scale transform', () => {
       const { getByTestId } = render(<RectComponent {...defaultProps} scale={1.5} />);
       const group = getByTestId('group');
-      
+
       expect(group).toHaveAttribute('scaleX', '1.5');
       expect(group).toHaveAttribute('scaleY', '1.5');
     });
@@ -105,7 +105,7 @@ describe('RectComponent', () => {
     it('should render with default scale of 1', () => {
       const { getByTestId } = render(<RectComponent {...defaultProps} />);
       const group = getByTestId('group');
-      
+
       expect(group).toHaveAttribute('scaleX', '1');
       expect(group).toHaveAttribute('scaleY', '1');
     });
@@ -117,9 +117,9 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} onClick={onClick} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.click(mainRect);
-      
+
       expect(onClick).toHaveBeenCalledWith({
         id: 'rect1',
         selected: true,
@@ -132,21 +132,21 @@ describe('RectComponent', () => {
       const { container, rerender } = render(<RectComponent {...defaultProps} onClick={onClick} selected={false} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.click(mainRect);
-      
+
       expect(onClick).toHaveBeenCalledWith({
         id: 'rect1',
         selected: true,
         selector: 'Mouse',
       });
-      
+
       rerender(<RectComponent {...defaultProps} onClick={onClick} selected={true} />);
-      
+
       const rectsAfter = container.querySelectorAll('[data-testid="rect"]');
       const mainRectAfter = rectsAfter[rectsAfter.length - 1];
       fireEvent.click(mainRectAfter);
-      
+
       expect(onClick).toHaveBeenCalledWith({
         id: 'rect1',
         selected: false,
@@ -159,9 +159,9 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} onClick={onClick} disabled={true} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.click(mainRect);
-      
+
       expect(onClick).not.toHaveBeenCalled();
     });
 
@@ -169,9 +169,9 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.mouseEnter(mainRect);
-      
+
       expect(document.body.style.cursor).toBe('pointer');
     });
 
@@ -179,9 +179,9 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} disabled={true} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.mouseEnter(mainRect);
-      
+
       expect(document.body.style.cursor).toBe('default');
     });
 
@@ -189,10 +189,10 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.mouseEnter(mainRect);
       fireEvent.mouseLeave(mainRect);
-      
+
       expect(document.body.style.cursor).toBe('default');
     });
   });
@@ -202,9 +202,9 @@ describe('RectComponent', () => {
       const { container } = render(<RectComponent {...defaultProps} hoverOutlineColor="#FFFF00" />);
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.mouseEnter(mainRect);
-      
+
       const rectsAfterHover = container.querySelectorAll('[data-testid="rect"]');
       expect(rectsAfterHover.length).toBeGreaterThan(1);
     });
@@ -215,12 +215,12 @@ describe('RectComponent', () => {
       );
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
-      
+
       fireEvent.mouseEnter(mainRect);
-      
+
       const hoverRect = container.querySelector('[stroke="#FFFF00"]');
       if (hoverRect) {
-        expect(hoverRect).toHaveAttribute('stroke', 'transparent');
+        expect(hoverRect).toHaveAttribute('stroke', '#FFFF00');
       }
     });
   });
@@ -236,7 +236,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={false}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       expect(icon).toBeInTheDocument();
       expect(icon).toHaveAttribute('data-src');
@@ -252,7 +252,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={false}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       expect(icon).toBeInTheDocument();
     });
@@ -267,7 +267,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={false}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       expect(icon).toBeInTheDocument();
     });
@@ -282,7 +282,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={false}
         />
       );
-      
+
       const icon = queryByTestId('icon-image');
       expect(icon).not.toBeInTheDocument();
     });
@@ -297,7 +297,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={true}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       expect(icon).toBeInTheDocument();
     });
@@ -312,7 +312,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={true}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       expect(icon).toBeInTheDocument();
     });
@@ -327,7 +327,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={true}
         />
       );
-      
+
       const icon = queryByTestId('icon-image');
       expect(icon).not.toBeInTheDocument();
     });
@@ -342,7 +342,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={true}
         />
       );
-      
+
       const icon = queryByTestId('icon-image');
       expect(icon).not.toBeInTheDocument();
     });
@@ -355,7 +355,7 @@ describe('RectComponent', () => {
           markAsCorrect={true}
         />
       );
-      
+
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
       expect(mainRect).toHaveAttribute('stroke', 'green');
@@ -370,7 +370,7 @@ describe('RectComponent', () => {
           markAsCorrect={false}
         />
       );
-      
+
       const rects = container.querySelectorAll('[data-testid="rect"]');
       const mainRect = rects[rects.length - 1];
       expect(mainRect).toHaveAttribute('stroke', 'red');
@@ -387,7 +387,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={false}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       expect(icon).toHaveAttribute('data-tooltip', 'Correct answer!');
     });
@@ -408,7 +408,7 @@ describe('RectComponent', () => {
           showCorrectEnabled={false}
         />
       );
-      
+
       const icon = getByTestId('icon-image');
       // Icon should be centered: x + width/2 - 10, y + height/2 - 10
       expect(icon).toHaveAttribute('data-x', '50'); // 10 + 100/2 - 10

package/src/hotspot/circle.jsx

@@ -50,6 +50,7 @@ class CircleComponent extends React.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       x,
       y,
       evaluateText,
@@ -88,20 +89,10 @@ class CircleComponent extends React.Component {
       }
     }
 
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale}>
-        {useHoveredStyle && (
-          <Rect
-            x={x - radius}
-            y={y - radius}
-            width={radius * 2}
-            height={radius * 2}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-          />
-        )}
+      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Circle
           radius={radius}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
@@ -110,11 +101,20 @@ class CircleComponent extends React.Component {
           draggable={false}
           stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
           x={x}
           y={y}
         />
+        {useHoveredStyle && (
+          <Rect
+            x={x - radius}
+            y={y - radius}
+            width={radius * 2}
+            height={radius * 2}
+            stroke={hoverOutlineColor}
+            strokeWidth={strokeWidth}
+            listening={false}
+          />
+        )}
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
@@ -128,6 +128,7 @@ CircleComponent.propTypes = {
   isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   isEvaluateMode: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
@@ -145,6 +146,7 @@ CircleComponent.propTypes = {
 CircleComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };

package/src/hotspot/container.jsx

@@ -14,8 +14,19 @@ const BaseContainer = styled('div')(({ theme }) => ({
   background: theme.palette.common.white,
   border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
   width: 'fit-content',
+  maxWidth: '100%',
+  overflowX: 'auto',
 }));
 
+const HiddenFocusable = styled('span')({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+});
+
 const ImageContainer = styled('div')({
   position: 'relative',
   width: 'fit-content',
@@ -34,6 +45,13 @@ const StyledStage = styled(Stage)({
 });
 
 export class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focusedShapeId: null,
+    };
+  }
+
   isSelected(shape) {
     const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];
     return !!selectedShape;
@@ -57,6 +75,44 @@ export class Container extends React.Component {
     return null;
   };
 
+  getAllShapesSorted = () => {
+    const { shapes: { rectangles = [], polygons = [], circles = [] } } = this.props;
+    const allShapes = [
+      ...rectangles.map((s) => ({ ...s, type: 'rectangle' })),
+      ...polygons.map((s) => ({ ...s, type: 'polygon' })),
+      ...circles.map((s) => ({ ...s, type: 'circle' })),
+    ];
+    allShapes.sort((a, b) => String(a.id).localeCompare(String(b.id), undefined, { numeric: true }));
+
+    return allShapes;
+  };
+
+  handleShapeFocus = (shapeId) => {
+    this.setState({ focusedShapeId: shapeId });
+  };
+
+  handleShapeBlur = () => {
+    this.setState({ focusedShapeId: null });
+  };
+
+  handleShapeKeyDown = (e, shapeId) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+
+      const { onSelectChoice, disabled } = this.props;
+
+      if (!disabled) {
+        const shape = this.getAllShapesSorted().find((s) => s.id === shapeId);
+
+        if (shape) {
+          const selected = this.isSelected(shape);
+
+          onSelectChoice({ id: shapeId, selected: !selected, selector: 'Keyboard' });
+        }
+      }
+    }
+  };
+
   render() {
     const {
       dimensions: { width: withProp, height: heightProp },
@@ -74,9 +130,13 @@ export class Container extends React.Component {
       showCorrect,
     } = this.props;
 
+    const { focusedShapeId } = this.state;
+
     const width = withProp * SCALE;
     const height = heightProp * SCALE;
 
+    const sortedShapes = this.getAllShapesSorted();
+
     return (
       <BaseContainer style={{ padding: strokeWidth / 2 }}>
         {imageUrl ? (
@@ -125,6 +185,7 @@ export class Container extends React.Component {
                   strokeWidth={strokeWidth}
                   markAsCorrect={markAsCorrect}
                   showCorrectEnabled={showCorrect}
+                  focused={focusedShapeId === shape.id}
                 />
               );
             })}
@@ -153,6 +214,7 @@ export class Container extends React.Component {
                   selectedHotspotColor={selectedHotspotColor}
                   hoverOutlineColor={hoverOutlineColor}
                   showCorrectEnabled={showCorrect}
+                  focused={focusedShapeId === polygon.id}
                 />
               );
             })}
@@ -183,11 +245,29 @@ export class Container extends React.Component {
                   selectedHotspotColor={selectedHotspotColor}
                   hoverOutlineColor={hoverOutlineColor}
                   showCorrectEnabled={showCorrect}
+                  focused={focusedShapeId === shape.id}
                 />
               );
             })}
           </Layer>
         </StyledStage>
+
+        {sortedShapes.map((shape) => {
+          const selected = this.isSelected(shape);
+
+          return (
+            <HiddenFocusable
+              key={`focus-${shape.id}`}
+              tabIndex={disabled ? -1 : 0}
+              role="button"
+              aria-label={shape.ariaLabel || ''}
+              aria-pressed={selected}
+              onFocus={() => this.handleShapeFocus(shape.id)}
+              onBlur={this.handleShapeBlur}
+              onKeyDown={(e) => this.handleShapeKeyDown(e, shape.id)}
+            />
+          );
+        })}
       </BaseContainer>
     );
   }

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() {

package/src/hotspot/polygon.jsx

@@ -68,6 +68,7 @@ class PolygonComponent extends React.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       points,
       evaluateText,
       strokeWidth,
@@ -120,7 +121,7 @@ class PolygonComponent extends React.Component {
         iconSrc = faWrong;
       }
     }
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates
     const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates
@@ -136,31 +137,30 @@ class PolygonComponent extends React.Component {
     const rectHeight = maxY - minY;
 
     return (
-      <Group scaleX={scale} scaleY={scale}>
-        {useHoveredStyle && (
-          <Rect
-            x={rectX}
-            y={rectY}
-            width={rectWidth}
-            height={rectHeight}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-          />
-        )}
+      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         <Line
           points={pointsParsed}
           closed={true}
-          fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}
+          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable={false}
           stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
-          cursor='pointer'
-          position='relative'
+          cursor="pointer"
+          position="relative"
         />
+        {useHoveredStyle && (
+          <Rect
+            x={rectX}
+            y={rectY}
+            width={rectWidth}
+            height={rectHeight}
+            stroke={hoverOutlineColor}
+            strokeWidth={strokeWidth}
+            listening={false}
+          />
+        )}
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
@@ -174,6 +174,7 @@ PolygonComponent.propTypes = {
   isEvaluateMode: PropTypes.bool.isRequired,
   hoverOutlineColor: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   points: PropTypes.array.isRequired,
@@ -188,6 +189,7 @@ PolygonComponent.propTypes = {
 
 PolygonComponent.defaultProps = {
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };

package/src/hotspot/rectangle.jsx

@@ -51,6 +51,7 @@ class RectComponent extends React.Component {
       isEvaluateMode,
       outlineColor,
       selected,
+      focused,
       width,
       x,
       y,
@@ -60,6 +61,7 @@ class RectComponent extends React.Component {
       markAsCorrect,
       showCorrectEnabled,
     } = this.props;
+    const { hovered } = this.state;
 
     const outlineColorParsed = isEvaluateMode
       ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
@@ -102,22 +104,10 @@ class RectComponent extends React.Component {
       }
     }
 
-    const { hovered } = this.state;
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale}>
-        {useHoveredStyle && (
-          <Rect
-            x={x}
-            y={y}
-            width={width}
-            height={height}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-            listening={false}
-          />
-        )}
+      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Rect
           x={x}
           y={y}
@@ -129,10 +119,19 @@ class RectComponent extends React.Component {
           draggable={false}
           stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
           cursor="pointer"
         />
+        {useHoveredStyle && (
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            stroke={hoverOutlineColor}
+            strokeWidth={strokeWidth}
+            listening={false}
+          />
+        )}
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
@@ -147,6 +146,7 @@ RectComponent.propTypes = {
   isEvaluateMode: PropTypes.bool.isRequired,
   hoverOutlineColor: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   selected: PropTypes.bool.isRequired,
@@ -164,6 +164,7 @@ RectComponent.propTypes = {
 RectComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };