@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.18

package/src/hotspot/index.jsx

@@ -1,179 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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;