@pie-element/hotspot 11.1.1-next.1 → 11.1.1-next.29

package/src/hotspot/polygon.jsx

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

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

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

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

package/dist/author/DeleteWidget.d.ts

@@ -1,38 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/DeleteWidget.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-declare const DeleteWidget: {
-    ({ height, id, width, x, y, points, isCircle, radius, handleWidgetClick }: {
-        height: any;
-        id: any;
-        width: any;
-        x: any;
-        y: any;
-        points: any;
-        isCircle: any;
-        radius: any;
-        handleWidgetClick: any;
-    }): React.JSX.Element;
-    propTypes: {
-        id: PropTypes.Validator<string>;
-        height: PropTypes.Requireable<number>;
-        width: PropTypes.Requireable<number>;
-        x: PropTypes.Validator<number>;
-        y: PropTypes.Validator<number>;
-        handleWidgetClick: PropTypes.Validator<(...args: any[]) => any>;
-        radius: PropTypes.Requireable<number>;
-        isCircle: PropTypes.Requireable<boolean>;
-        points: PropTypes.Requireable<(PropTypes.InferProps<{
-            x: PropTypes.Requireable<number>;
-            y: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-    };
-};
-export default DeleteWidget;

package/dist/author/DeleteWidget.js

@@ -1,46 +0,0 @@
-import { faDelete as e } from "./icons.js";
-import t from "./image-konva.js";
-import { calculate as n } from "./utils.js";
-import "react";
-import r from "prop-types";
-import { jsx as i } from "react/jsx-runtime";
-import { Group as a } from "react-konva";
-//#region src/author/DeleteWidget.tsx
-function o(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function s(e, t) {
-	return !e || o(e) ? e : o(e.default) ? e.default : t && o(e[t]) ? e[t] : t && o(e[t]?.default) ? e[t].default : e;
-}
-var c = s(a, "Group"), l = ({ height: r, id: a, width: o, x: s, y: l, points: u, isCircle: d, radius: f, handleWidgetClick: p }) => {
-	let m, h;
-	if (d) m = s + f - 20, h = l;
-	else if (u) {
-		let e = n(u);
-		m = e.x, h = e.y;
-	} else m = s + o - 20, h = l + r - 20;
-	return /* @__PURE__ */ i(c, {
-		onClick: () => p(a),
-		children: /* @__PURE__ */ i(t, {
-			x: m,
-			y: h,
-			src: e
-		})
-	});
-};
-l.propTypes = {
-	id: r.string.isRequired,
-	height: r.number,
-	width: r.number,
-	x: r.number.isRequired,
-	y: r.number.isRequired,
-	handleWidgetClick: r.func.isRequired,
-	radius: r.number,
-	isCircle: r.bool,
-	points: r.arrayOf(r.shape({
-		x: r.number,
-		y: r.number
-	}))
-};
-//#endregion
-export { l as default };