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

package/src/hotspot/polygon.jsx

@@ -1,195 +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,
-      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 && 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}>
-        {useHoveredStyle && (
-          <Rect
-            x={rectX}
-            y={rectY}
-            width={rectWidth}
-            height={rectHeight}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-          />
-        )}
-        <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}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
-          cursor='pointer'
-          position='relative'
-        />
-        {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,
-  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,
-  strokeWidth: 5,
-  scale: 1,
-};
-
-export default PolygonComponent;

package/src/hotspot/rectangle.jsx

@@ -1,171 +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,
-      width,
-      x,
-      y,
-      evaluateText,
-      strokeWidth,
-      scale,
-      markAsCorrect,
-      showCorrectEnabled,
-    } = this.props;
-
-    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 { hovered } = this.state;
-    const useHoveredStyle = hovered && 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}
-          />
-        )}
-        <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}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
-          cursor="pointer"
-        />
-        {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,
-  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,
-  strokeWidth: 5,
-  scale: 1,
-};
-
-export default RectComponent;

package/src/index.js

@@ -1,226 +0,0 @@
-import React from 'react';
-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';
-
-import HotspotComponent from './hotspot';
-import { updateSessionValue, updateSessionMetadata } from './session-updater';
-
-export default class Hotspot extends HTMLElement {
-  constructor() {
-    super();
-    this._model = null;
-    this._session = null;
-    this._audioInitialized = false;
-    this.audioComplete = false;
-    this._root = null;
-  }
-
-  set model(m) {
-    this._model = m;
-
-    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._audioInitialized = false;
-    this._render();
-  }
-
-  isComplete() {
-    if (!this._session || !this._session.answers) {
-      return false;
-    }
-
-    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};
-    const elementContext = this;
-
-    // check audio completion if audio settings are enabled and audio actually exists
-    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-      if (elementContext) {
-        const audio = elementContext.querySelector('audio');
-        const isInsidePrompt = audio && audio.closest('#preview-prompt');
-
-        // only require audio completion if audio exists and is inside the prompt
-        if (audio && isInsidePrompt) {
-          return false;
-        }
-      }
-    }
-
-    if (!Array.isArray(this._session.answers)) {
-      return false;
-    }
-
-    return this._session.answers.length > 0;
-  }
-
-  set session(s) {
-    if (s && !s.answers) {
-      s.answers = [];
-    }
-
-    this._session = s;
-    this._render();
-  }
-
-  get session() {
-    return this._session;
-  }
-
-  onSelectChoice(data) {
-    updateSessionValue(this._session, this._model, data);
-
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-
-    this._render();
-  }
-
-  _createAudioInfoToast() {
-    const info = document.createElement('div');
-    info.id = 'play-audio-info';
-
-    Object.assign(info.style, {
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      background: 'white',
-      zIndex: '1000',
-      cursor: 'pointer',
-    });
-
-    const img = document.createElement('img');
-    img.src = EnableAudioAutoplayImage;
-    img.alt = 'Click anywhere to enable audio autoplay';
-    img.width = 500;
-    img.height = 300;
-
-    info.appendChild(img);
-    return info;
-  }
-
-  connectedCallback() {
-    this._render();
-
-    // Observation:  audio in Chrome will have the autoplay attribute,
-    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
-    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
-    const observer = new MutationObserver((mutationsList, observer) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          if (this._audioInitialized) return;
-          const audio = this.querySelector('audio');
-          const isInsidePrompt = audio && audio.closest('#preview-prompt');
-
-          if (!this._model) return;
-          if (!this._model.autoplayAudioEnabled) return;
-          if (audio && !isInsidePrompt) return;
-          if (!audio) return;
-
-          const info = this._createAudioInfoToast();
-          const container = this.querySelector('#main-container');
-          const enableAudio = () => {
-            if (this.querySelector('#play-audio-info')) {
-              audio.play();
-              container.removeChild(info);
-            }
-
-            document.removeEventListener('click', enableAudio);
-          };
-
-          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
-          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
-          setTimeout(() => {
-            if (audio.paused && !this.querySelector('#play-audio-info')) {
-              // add info message as a toast to enable audio playback
-              container.appendChild(info);
-              document.addEventListener('click', enableAudio);
-            } else {
-              document.removeEventListener('click', enableAudio);
-            }
-          }, 500);
-
-          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
-          const handlePlaying = () => {
-            //timestamp when auto-played audio started playing
-            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });
-
-            const info = this.querySelector('#play-audio-info');
-            if (info) {
-              container.removeChild(info);
-            }
-
-            audio.removeEventListener('playing', handlePlaying);
-          };
-
-          audio.addEventListener('playing', handlePlaying);
-
-          // we need to listen for the ended event to update the isComplete state
-          const handleEnded = () => {
-            //timestamp when auto-played audio completed playing
-            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });
-
-            let { audioStartTime, audioEndTime, waitTime } = this._session;
-            if (!waitTime && audioStartTime && audioEndTime) {
-              // waitTime is elapsed time the user waited for auto-played audio to finish
-              this._session.waitTime = audioEndTime - audioStartTime;
-            }
-
-            this.audioComplete = true;
-            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-
-            audio.removeEventListener('ended', handleEnded);
-          };
-
-          audio.addEventListener('ended', handleEnded);
-
-          // store references to remove later
-          this._audio = audio;
-          this._handlePlaying = handlePlaying;
-          this._handleEnded = handleEnded;
-          this._enableAudio = enableAudio;
-          // set to true to prevent multiple initializations
-          this._audioInitialized = true;
-
-          observer.disconnect();
-        }
-      });
-    });
-
-    observer.observe(this, { childList: true, subtree: true });
-  }
-
-  _render() {
-    if (this._model && this._session) {
-      const el = React.createElement(HotspotComponent, {
-        model: this._model,
-        session: this._session,
-        onSelectChoice: this.onSelectChoice.bind(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/src/session-updater.js

@@ -1,29 +0,0 @@
-export function updateSessionValue(session, model, data) {
-  const { id, selected } = data;
-  const { multipleCorrect } = model || {};
-  session.answers = session.answers || [];
-
-  if (!selected) {
-    session.answers = session.answers.filter((answer) => answer.id !== id);
-  } else {
-    const item = { id };
-    if (multipleCorrect) {
-      session.answers.push(item);
-    } else {
-      session.answers = [item];
-    }
-
-    //update session metadata
-    session.selector = data.selector;
-  }
-}
-
-export function updateSessionMetadata(session, metadata) {
-  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
-  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
-
-  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
-    // waitTime is elapsed time the user waited for auto-played audio to finish
-    session.waitTime = session.audioEndTime - session.audioStartTime;
-  }
-}