@pie-element/hotspot 11.1.1-next.0 → 11.1.1-next.101

package/src/hotspot/index.jsx

@@ -0,0 +1,179 @@
+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';
+
+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);
+    this.state = {
+      showCorrect: false,
+      observer: null,
+      scale: 1,
+    };
+  }
+
+  componentDidMount() {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText;
+        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+        const zoomParsed = zoom?.replace(/\s/g, '');
+
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            });
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    const target = document.getElementById('question-container');
+
+    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() {
+    this.observer?.disconnect();
+  }
+
+  onToggle = () => {
+    const { showCorrect } = this.state;
+    this.setState({ showCorrect: !showCorrect });
+  };
+
+  render() {
+    const {
+      session,
+      model: {
+        disabled,
+        extraCSSRules,
+        imageUrl,
+        prompt,
+        mode,
+        multipleCorrect,
+        shapes,
+        outlineColor,
+        hotspotColor,
+        hoverOutlineColor,
+        selectedHotspotColor,
+        dimensions,
+        rationale,
+        teacherInstructions,
+        strokeWidth,
+        responseCorrect,
+        language,
+        fontSizeFactor,
+        autoplayAudioEnabled,
+        customAudioButton,
+      },
+      onSelectChoice,
+    } = this.props;
+    const { showCorrect } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const isGatherMode = mode === 'gather';
+    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
+    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));
+    const showTeacherInstructions =
+      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
+
+    return (
+      <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>
+        {showTeacherInstructions && (
+          <StyledCollapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>
+            <PreviewPrompt className="prompt" prompt={teacherInstructions} />
+          </StyledCollapsible>
+        )}
+
+        {prompt && (
+          <PreviewPrompt
+            className="prompt"
+            prompt={prompt}
+            autoplayAudioEnabled={autoplayAudioEnabled}
+            customAudioButton={customAudioButton}
+          />
+        )}
+
+        {showCorrectAnswerToggle && (
+          <CorrectAnswerToggle
+            show={showCorrectAnswerToggle}
+            toggled={showCorrect}
+            onToggle={this.onToggle.bind(this)}
+            language={language}
+          />
+        )}
+
+        {imageUrl ? (
+          <Container
+            isEvaluateMode={isEvaluateMode}
+            session={session}
+            dimensions={dimensions}
+            imageUrl={imageUrl}
+            hotspotColor={hotspotColor}
+            hoverOutlineColor={isGatherMode ? hoverOutlineColor : undefined}
+            selectedHotspotColor={selectedHotspotColor}
+            multipleCorrect={multipleCorrect}
+            outlineColor={outlineColor}
+            onSelectChoice={onSelectChoice}
+            shapes={shapes}
+            disabled={disabled}
+            strokeWidth={strokeWidth}
+            scale={this.state.scale}
+            showCorrect={showCorrect}
+          />
+        ) : null}
+
+        {showRationale && (
+          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>
+            <PreviewPrompt className="prompt" prompt={rationale} />
+          </Collapsible>
+        )}
+      </StyledUiLayout>
+    );
+  }
+}
+
+HotspotComponent.propTypes = {
+  model: PropTypes.object.isRequired,
+  onSelectChoice: PropTypes.func.isRequired,
+  session: PropTypes.object.isRequired,
+};
+
+export default HotspotComponent;

package/src/hotspot/polygon.jsx

@@ -0,0 +1,197 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Line, Group, Rect } from 'react-konva';
+import ImageComponent from './image-konva-tooltip';
+import { faCorrect, faWrong } from './icons';
+
+class PolygonComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovered: false,
+    };
+  }
+
+  getPolygonCenter = (points) => {
+    const x = points.map(({ x }) => x);
+    const y = points.map(({ y }) => y);
+    const minX = Math.min.apply(null, x);
+    const maxX = Math.max.apply(null, x);
+    const minY = Math.min.apply(null, y);
+    const maxY = Math.max.apply(null, y);
+    return [(minX + maxX) / 2, (minY + maxY) / 2];
+  };
+
+  parsePointsForKonva = (points) => {
+    const parsedPoints = [];
+    points.forEach(({ x, y }) => {
+      parsedPoints.push(x);
+      parsedPoints.push(y);
+    });
+    return parsedPoints;
+  };
+
+  handleClick = (e) => {
+    const { onClick, id, selected, disabled } = this.props;
+
+    if (!disabled) {
+      e.cancelBubble = true;
+      onClick({ id, selected: !selected, selector: 'Mouse' });
+    }
+  };
+
+  handleMouseEnter = () => {
+    const { disabled } = this.props;
+
+    if (!disabled) {
+      document.body.style.cursor = 'pointer';
+    }
+    this.setState({ hovered: true });
+  };
+
+  handleMouseLeave = () => {
+    document.body.style.cursor = 'default';
+    this.setState({ hovered: false });
+  };
+
+  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>
+    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
+
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>
+    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
+
+  render() {
+    const {
+      hotspotColor,
+      isCorrect,
+      isEvaluateMode,
+      hoverOutlineColor,
+      outlineColor,
+      selected,
+      focused,
+      points,
+      evaluateText,
+      strokeWidth,
+      scale,
+      markAsCorrect,
+      selectedHotspotColor,
+      showCorrectEnabled,
+    } = this.props;
+
+    const { hovered } = this.state;
+
+    const outlineColorParsed = isEvaluateMode
+      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
+      : outlineColor;
+    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
+
+    const pointsParsed = this.parsePointsForKonva(points);
+    const center = this.getPolygonCenter(points);
+    const iconX = center[0];
+    const iconY = center[1];
+
+    // "Show Correct Answer" Enabled:
+    //   - Correctly Selected: white checkmark in green circle
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected: none
+    //   - Incorrectly Not Selected: white checkmark in green circle
+    // "Show Correct Answer" Disabled:
+    //   - Correctly Selected:
+    //     - white checkmark in green circle
+    //     - heavy outline, as on “Gather”
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected:
+    //     - white "X" in red circle
+    //     - heavy outline around the selection should appear in red
+    //   - Incorrectly Not Selected: white "X" in red circle
+    let iconSrc;
+
+    if (showCorrectEnabled) {
+      if ((selected && isCorrect) || (!selected && !isCorrect)) {
+        iconSrc = faCorrect;
+      }
+    } else {
+      if (selected) {
+        if (isCorrect) {
+          iconSrc = faCorrect;
+        } else {
+          iconSrc = faWrong;
+        }
+      } else if (!isCorrect) {
+        iconSrc = faWrong;
+      }
+    }
+    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
+
+    const minX = Math.min(...xValues);
+    const maxX = Math.max(...xValues);
+    const minY = Math.min(...yValues);
+    const maxY = Math.max(...yValues);
+
+    const rectX = minX;
+    const rectY = minY;
+    const rectWidth = maxX - minX;
+    const rectHeight = maxY - minY;
+
+    return (
+      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <Line
+          points={pointsParsed}
+          closed={true}
+          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
+          onClick={this.handleClick}
+          onTap={this.handleClick}
+          draggable={false}
+          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
+          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
+          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>
+    );
+  }
+}
+
+PolygonComponent.propTypes = {
+  hotspotColor: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  isCorrect: PropTypes.bool.isRequired,
+  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,
+  selected: PropTypes.bool.isRequired,
+  evaluateText: PropTypes.string,
+  selectedHotspotColor: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired,
+};
+
+PolygonComponent.defaultProps = {
+  evaluateText: null,
+  focused: false,
+  strokeWidth: 5,
+  scale: 1,
+};
+
+export default PolygonComponent;

package/src/hotspot/rectangle.jsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Rect, Group } from 'react-konva';
+import ImageComponent from './image-konva-tooltip';
+import { faCorrect, faWrong } from './icons';
+
+class RectComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovered: false,
+    };
+  }
+
+  handleClick = (e) => {
+    const { onClick, id, selected, disabled } = this.props;
+
+    if (!disabled) {
+      e.cancelBubble = true;
+      onClick({ id, selected: !selected, selector: 'Mouse' });
+    }
+  };
+
+  handleMouseEnter = () => {
+    const { disabled } = this.props;
+
+    if (!disabled) {
+      document.body.style.cursor = 'pointer';
+    }
+    this.setState({ hovered: true });
+  };
+
+  handleMouseLeave = () => {
+    document.body.style.cursor = 'default';
+    this.setState({ hovered: false });
+  };
+
+  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>
+    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
+
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>
+    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
+
+  render() {
+    const {
+      height,
+      hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
+      isCorrect,
+      isEvaluateMode,
+      outlineColor,
+      selected,
+      focused,
+      width,
+      x,
+      y,
+      evaluateText,
+      strokeWidth,
+      scale,
+      markAsCorrect,
+      showCorrectEnabled,
+    } = this.props;
+    const { hovered } = this.state;
+
+    const outlineColorParsed = isEvaluateMode
+      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
+      : outlineColor;
+
+    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
+
+    const iconX = x + width / 2 - 10;
+    const iconY = y + height / 2 - 10;
+
+    // "Show Correct Answer" Enabled:
+    //   - Correctly Selected: white checkmark in green circle
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected: none
+    //   - Incorrectly Not Selected: white checkmark in green circle
+    // "Show Correct Answer" Disabled:
+    //   - Correctly Selected:
+    //     - white checkmark in green circle
+    //     - heavy outline, as on “Gather”
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected:
+    //     - white "X" in red circle
+    //     - heavy outline around the selection should appear in red
+    //   - Incorrectly Not Selected: white "X" in red circle
+    let iconSrc;
+
+    if (showCorrectEnabled) {
+      if ((selected && isCorrect) || (!selected && !isCorrect)) {
+        iconSrc = faCorrect;
+      }
+    } else {
+      if (selected) {
+        if (isCorrect) {
+          iconSrc = faCorrect;
+        } else {
+          iconSrc = faWrong;
+        }
+      } else if (!isCorrect) {
+        iconSrc = faWrong;
+      }
+    }
+
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
+
+    return (
+      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+        <Rect
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
+          onClick={this.handleClick}
+          onTap={this.handleClick}
+          draggable={false}
+          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
+          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
+          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>
+    );
+  }
+}
+
+RectComponent.propTypes = {
+  height: PropTypes.number.isRequired,
+  hotspotColor: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  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,
+  width: PropTypes.number.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  evaluateText: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  selectedHotspotColor: PropTypes.string,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired,
+};
+
+RectComponent.defaultProps = {
+  isCorrect: false,
+  evaluateText: null,
+  focused: false,
+  strokeWidth: 5,
+  scale: 1,
+};
+
+export default RectComponent;