@pie-element/hotspot 11.1.2-next.5 → 11.1.2-next.7

package/dist/delivery/hotspot/index.js

@@ -1,23 +1,25 @@
-import e from "./container.js";
+import { Container as e } from "./container.js";
 import t from "react";
-import * as n from "@pie-lib/render-ui";
-import { Collapsible as r, PreviewPrompt as i, UiLayout as a, color as o, hasMedia as s, hasText as c } from "@pie-lib/render-ui";
-import l from "prop-types";
-import u from "@pie-lib/correct-answer-toggle";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { styled as p } from "@mui/material/styles";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, UiLayout as o, color as s, hasMedia as c, hasText as l } from "@pie-lib/render-ui";
+import u from "react-dom";
+import d from "prop-types";
+import f from "@pie-lib/correct-answer-toggle";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { styled as h } from "@mui/material/styles";
 //#region src/delivery/hotspot/index.tsx
-function m(e) {
+function g(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function h(e, t) {
-	return !e || m(e) ? e : m(e.default) ? e.default : t && m(e[t]) ? e[t] : t && m(e[t]?.default) ? e[t].default : e;
+function _(e, t) {
+	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
 }
-var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt") || h(x.PreviewPrompt, "PreviewPrompt"), v = h(r, "Collapsible") || h(x.Collapsible, "Collapsible"), y = n, b = y.default, x = b && typeof b == "object" ? b : y, S = p(g)({
-	color: o.text(),
-	backgroundColor: o.background(),
+var v = _(o, "UiLayout") || _(C.UiLayout, "UiLayout"), y = _(a, "PreviewPrompt") || _(C.PreviewPrompt, "PreviewPrompt"), b = _(i, "Collapsible") || _(C.Collapsible, "Collapsible"), x = r, S = x.default, C = S && typeof S == "object" ? S : x, w = h(v)({
+	color: s.text(),
+	backgroundColor: s.background(),
 	position: "relative"
-}), C = p(v)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), w = class extends t.Component {
+}), T = h(b)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), E = class extends t.Component {
 	constructor(e) {
 		super(e), this.state = {
 			showCorrect: !1,
@@ -36,7 +38,10 @@ var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt")
 		e && this.observer.observe(e, {
 			attributes: !0,
 			attributeFilter: ["style"]
-		});
+		}), n(u.findDOMNode(this));
+	}
+	componentDidUpdate() {
+		n(u.findDOMNode(this));
 	}
 	componentWillUnmount() {
 		this.observer?.disconnect();
@@ -46,57 +51,57 @@ var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt")
 		this.setState({ showCorrect: !e });
 	};
 	render() {
-		let { session: t, model: { disabled: n, extraCSSRules: r, imageUrl: i, prompt: a, mode: o, multipleCorrect: l, shapes: p, outlineColor: m, hotspotColor: h, hoverOutlineColor: g, selectedHotspotColor: y, dimensions: b, rationale: x, teacherInstructions: w, strokeWidth: T, responseCorrect: E, language: D, fontSizeFactor: O, autoplayAudioEnabled: k, customAudioButton: A }, onSelectChoice: j } = this.props, { showCorrect: M } = this.state, N = o === "evaluate", P = o === "gather", F = N && !E, I = x && (c(x) || s(x));
-		return /* @__PURE__ */ f(S, {
+		let { session: t, model: { disabled: n, extraCSSRules: r, imageUrl: i, prompt: a, mode: o, multipleCorrect: s, shapes: u, outlineColor: d, hotspotColor: h, hoverOutlineColor: g, selectedHotspotColor: _, dimensions: v, rationale: x, teacherInstructions: S, strokeWidth: C, responseCorrect: E, language: D, fontSizeFactor: O, autoplayAudioEnabled: k, customAudioButton: A }, onSelectChoice: j } = this.props, { showCorrect: M } = this.state, N = o === "evaluate", P = o === "gather", F = N && !E, I = x && (l(x) || c(x));
+		return /* @__PURE__ */ m(w, {
 			extraCSSRules: r,
 			id: "main-container",
 			fontSizeFactor: O,
 			children: [
-				w && (c(w) || s(w)) && /* @__PURE__ */ d(C, {
+				S && (l(S) || c(S)) && /* @__PURE__ */ p(T, {
 					labels: {
 						hidden: "Show Teacher Instructions",
 						visible: "Hide Teacher Instructions"
 					},
-					children: /* @__PURE__ */ d(_, {
+					children: /* @__PURE__ */ p(y, {
 						className: "prompt",
-						prompt: w
+						prompt: S
 					})
 				}),
-				a && /* @__PURE__ */ d(_, {
+				a && /* @__PURE__ */ p(y, {
 					className: "prompt",
 					prompt: a,
 					autoplayAudioEnabled: k,
 					customAudioButton: A
 				}),
-				F && /* @__PURE__ */ d(u, {
+				F && /* @__PURE__ */ p(f, {
 					show: F,
 					toggled: M,
 					onToggle: this.onToggle.bind(this),
 					language: D
 				}),
-				i ? /* @__PURE__ */ d(e, {
+				i ? /* @__PURE__ */ p(e, {
 					isEvaluateMode: N,
 					session: t,
-					dimensions: b,
+					dimensions: v,
 					imageUrl: i,
 					hotspotColor: h,
 					hoverOutlineColor: P ? g : void 0,
-					selectedHotspotColor: y,
-					multipleCorrect: l,
-					outlineColor: m,
+					selectedHotspotColor: _,
+					multipleCorrect: s,
+					outlineColor: d,
 					onSelectChoice: j,
-					shapes: p,
+					shapes: u,
 					disabled: n,
-					strokeWidth: T,
+					strokeWidth: C,
 					scale: this.state.scale,
 					showCorrect: M
 				}) : null,
-				I && /* @__PURE__ */ d(v, {
+				I && /* @__PURE__ */ p(b, {
 					labels: {
 						hidden: "Show Rationale",
 						visible: "Hide Rationale"
 					},
-					children: /* @__PURE__ */ d(_, {
+					children: /* @__PURE__ */ p(y, {
 						className: "prompt",
 						prompt: x
 					})
@@ -105,10 +110,10 @@ var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt")
 		});
 	}
 };
-w.propTypes = {
-	model: l.object.isRequired,
-	onSelectChoice: l.func.isRequired,
-	session: l.object.isRequired
+E.propTypes = {
+	model: d.object.isRequired,
+	onSelectChoice: d.func.isRequired,
+	session: d.object.isRequired
 };
 //#endregion
-export { w as default };
+export { E as default };

package/dist/delivery/hotspot/polygon.d.ts

@@ -9,6 +9,9 @@
 import React from 'react';
 declare class PolygonComponent extends React.Component {
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    moveGroupToTop: any;
     getPolygonCenter: any;
     parsePointsForKonva: any;
     handleClick: any;

package/dist/delivery/hotspot/polygon.js

@@ -13,8 +13,17 @@ function d(e, t) {
 }
 var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.Component {
 	constructor(e) {
-		super(e), this.state = { hovered: !1 };
+		super(e), this.state = { hovered: !1 }, this.groupRef = r.createRef();
 	}
+	componentDidMount() {
+		this.props.focused && this.moveGroupToTop();
+	}
+	componentDidUpdate(e) {
+		!e.focused && this.props.focused && this.moveGroupToTop();
+	}
+	moveGroupToTop = () => {
+		this.groupRef.current && this.groupRef.current.moveToTop();
+	};
 	getPolygonCenter = (e) => {
 		let t = e.map(({ x: e }) => e), n = e.map(({ y: e }) => e), r = Math.min.apply(null, t), i = Math.max.apply(null, t), a = Math.min.apply(null, n), o = Math.max.apply(null, n);
 		return [(r + i) / 2, (a + o) / 2];
@@ -35,7 +44,7 @@ var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.C
 	};
 	handleMouseEnter = () => {
 		let { disabled: e } = this.props;
-		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 });
+		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 }), this.moveGroupToTop();
 	};
 	handleMouseLeave = () => {
 		document.body.style.cursor = "default", this.setState({ hovered: !1 });
@@ -43,40 +52,42 @@ var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.C
 	getEvaluateOutlineColor = (e, t, n) => t ? "green" : e ? n : "red";
 	getOutlineWidth = (e, t, n, r) => n || !n && !e && t ? r : 0;
 	render() {
-		let { hotspotColor: r, isCorrect: i, isEvaluateMode: s, hoverOutlineColor: c, outlineColor: l, selected: u, points: d, evaluateText: h, strokeWidth: g, scale: _, markAsCorrect: v, selectedHotspotColor: y, showCorrectEnabled: b } = this.props, { hovered: x } = this.state, S = s ? this.getEvaluateOutlineColor(i, v, l) : l, C = this.getOutlineWidth(b, u, v, g), w = this.parsePointsForKonva(d), T = this.getPolygonCenter(d), E = T[0], D = T[1], O;
-		b ? (u && i || !u && !i) && (O = t) : u ? O = i ? t : n : i || (O = n);
-		let k = x && c, A = w.filter((e, t) => t % 2 == 0), j = w.filter((e, t) => t % 2 != 0), M = Math.min(...A), N = Math.max(...A), P = Math.min(...j), F = Math.max(...j), I = M, L = P, R = N - M, z = F - P;
+		let { hotspotColor: r, isCorrect: i, isEvaluateMode: s, hoverOutlineColor: c, outlineColor: l, selected: u, focused: d, points: h, evaluateText: g, strokeWidth: _, scale: v, markAsCorrect: y, selectedHotspotColor: b, showCorrectEnabled: x } = this.props, { hovered: S } = this.state, C = s ? this.getEvaluateOutlineColor(i, y, l) : l, w = this.getOutlineWidth(x, u, y, _), T = this.parsePointsForKonva(h), E = this.getPolygonCenter(h), D = E[0], O = E[1], k;
+		x ? (u && i || !u && !i) && (k = t) : u ? k = i ? t : n : i || (k = n);
+		let A = (S || d) && c, j = T.filter((e, t) => t % 2 == 0), M = T.filter((e, t) => t % 2 != 0), N = Math.min(...j), P = Math.max(...j), F = Math.min(...M), I = Math.max(...M), L = N, R = F, z = P - N, B = I - F;
 		return /* @__PURE__ */ o(p, {
-			scaleX: _,
-			scaleY: _,
+			ref: this.groupRef,
+			scaleX: v,
+			scaleY: v,
+			onMouseEnter: this.handleMouseEnter,
+			onMouseLeave: this.handleMouseLeave,
 			children: [
-				k && /* @__PURE__ */ a(f, {
-					x: I,
-					y: L,
-					width: R,
-					height: z,
-					stroke: u ? "transparent" : c,
-					strokeWidth: g
-				}),
 				/* @__PURE__ */ a(m, {
-					points: w,
+					points: T,
 					closed: !0,
-					fill: u && y ? y : r,
+					fill: u && b ? b : r,
 					onClick: this.handleClick,
 					onTap: this.handleClick,
 					draggable: !1,
-					stroke: k && !u ? "transparent" : S,
-					strokeWidth: k && !u ? 0 : C,
-					onMouseLeave: this.handleMouseLeave,
-					onMouseEnter: this.handleMouseEnter,
+					stroke: A && !u ? "transparent" : C,
+					strokeWidth: A && !u ? 0 : w,
 					cursor: "pointer",
 					position: "relative"
 				}),
-				s && O ? /* @__PURE__ */ a(e, {
-					src: O,
-					x: E,
-					y: D,
-					tooltip: h
+				A && /* @__PURE__ */ a(f, {
+					x: L,
+					y: R,
+					width: z,
+					height: B,
+					stroke: c,
+					strokeWidth: _,
+					listening: !1
+				}),
+				s && k ? /* @__PURE__ */ a(e, {
+					src: k,
+					x: D,
+					y: O,
+					tooltip: g
 				}) : null
 			]
 		});
@@ -89,6 +100,7 @@ h.propTypes = {
 	isEvaluateMode: i.bool.isRequired,
 	hoverOutlineColor: i.string,
 	disabled: i.bool.isRequired,
+	focused: i.bool,
 	onClick: i.func.isRequired,
 	outlineColor: i.string.isRequired,
 	points: i.array.isRequired,
@@ -101,6 +113,7 @@ h.propTypes = {
 	showCorrectEnabled: i.bool.isRequired
 }, h.defaultProps = {
 	evaluateText: null,
+	focused: !1,
 	strokeWidth: 5,
 	scale: 1
 };

package/dist/delivery/hotspot/rectangle.d.ts

@@ -9,6 +9,9 @@
 import React from 'react';
 declare class RectComponent extends React.Component {
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    moveGroupToTop: any;
     handleClick: any;
     handleMouseEnter: any;
     handleMouseLeave: any;

package/dist/delivery/hotspot/rectangle.js

@@ -13,8 +13,17 @@ function u(e, t) {
 }
 var d = u(s, "Group"), f = u(c, "Rect"), p = class extends r.Component {
 	constructor(e) {
-		super(e), this.state = { hovered: !1 };
+		super(e), this.state = { hovered: !1 }, this.groupRef = r.createRef();
 	}
+	componentDidMount() {
+		this.props.focused && this.moveGroupToTop();
+	}
+	componentDidUpdate(e) {
+		!e.focused && this.props.focused && this.moveGroupToTop();
+	}
+	moveGroupToTop = () => {
+		this.groupRef.current && this.groupRef.current.moveToTop();
+	};
 	handleClick = (e) => {
 		let { onClick: t, id: n, selected: r, disabled: i } = this.props;
 		i || (e.cancelBubble = !0, t({
@@ -25,7 +34,7 @@ var d = u(s, "Group"), f = u(c, "Rect"), p = class extends r.Component {
 	};
 	handleMouseEnter = () => {
 		let { disabled: e } = this.props;
-		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 });
+		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 }), this.moveGroupToTop();
 	};
 	handleMouseLeave = () => {
 		document.body.style.cursor = "default", this.setState({ hovered: !1 });
@@ -33,42 +42,43 @@ var d = u(s, "Group"), f = u(c, "Rect"), p = class extends r.Component {
 	getEvaluateOutlineColor = (e, t, n) => t ? "green" : e ? n : "red";
 	getOutlineWidth = (e, t, n, r) => n || !n && !e && t ? r : 0;
 	render() {
-		let { height: r, hotspotColor: i, hoverOutlineColor: s, selectedHotspotColor: c, isCorrect: l, isEvaluateMode: u, outlineColor: p, selected: m, width: h, x: g, y: _, evaluateText: v, strokeWidth: y, scale: b, markAsCorrect: x, showCorrectEnabled: S } = this.props, C = u ? this.getEvaluateOutlineColor(l, x, p) : p, w = this.getOutlineWidth(S, m, x, y), T = g + h / 2 - 10, E = _ + r / 2 - 10, D;
-		S ? (m && l || !m && !l) && (D = t) : m ? D = l ? t : n : l || (D = n);
-		let { hovered: O } = this.state, k = O && s;
+		let { height: r, hotspotColor: i, hoverOutlineColor: s, selectedHotspotColor: c, isCorrect: l, isEvaluateMode: u, outlineColor: p, selected: m, focused: h, width: g, x: _, y: v, evaluateText: y, strokeWidth: b, scale: x, markAsCorrect: S, showCorrectEnabled: C } = this.props, { hovered: w } = this.state, T = u ? this.getEvaluateOutlineColor(l, S, p) : p, E = this.getOutlineWidth(C, m, S, b), D = _ + g / 2 - 10, O = v + r / 2 - 10, k;
+		C ? (m && l || !m && !l) && (k = t) : m ? k = l ? t : n : l || (k = n);
+		let A = (w || h) && s;
 		return /* @__PURE__ */ o(d, {
-			scaleX: b,
-			scaleY: b,
+			ref: this.groupRef,
+			scaleX: x,
+			scaleY: x,
+			onMouseLeave: this.handleMouseLeave,
+			onMouseEnter: this.handleMouseEnter,
 			children: [
-				k && /* @__PURE__ */ a(f, {
-					x: g,
-					y: _,
-					width: h,
-					height: r,
-					stroke: m ? "transparent" : s,
-					strokeWidth: y,
-					listening: !1
-				}),
 				/* @__PURE__ */ a(f, {
-					x: g,
-					y: _,
-					width: h,
+					x: _,
+					y: v,
+					width: g,
 					height: r,
 					fill: m && c ? c : i,
 					onClick: this.handleClick,
 					onTap: this.handleClick,
 					draggable: !1,
-					stroke: k && !m ? "transparent" : C,
-					strokeWidth: k && !m ? 0 : w,
-					onMouseLeave: this.handleMouseLeave,
-					onMouseEnter: this.handleMouseEnter,
+					stroke: A && !m ? "transparent" : T,
+					strokeWidth: A && !m ? 0 : E,
 					cursor: "pointer"
 				}),
-				u && D ? /* @__PURE__ */ a(e, {
-					src: D,
-					x: T,
-					y: E,
-					tooltip: v
+				A && /* @__PURE__ */ a(f, {
+					x: _,
+					y: v,
+					width: g,
+					height: r,
+					stroke: s,
+					strokeWidth: b,
+					listening: !1
+				}),
+				u && k ? /* @__PURE__ */ a(e, {
+					src: k,
+					x: D,
+					y: O,
+					tooltip: y
 				}) : null
 			]
 		});
@@ -82,6 +92,7 @@ p.propTypes = {
 	isEvaluateMode: i.bool.isRequired,
 	hoverOutlineColor: i.string,
 	disabled: i.bool.isRequired,
+	focused: i.bool,
 	onClick: i.func.isRequired,
 	outlineColor: i.string.isRequired,
 	selected: i.bool.isRequired,
@@ -97,6 +108,7 @@ p.propTypes = {
 }, p.defaultProps = {
 	isCorrect: !1,
 	evaluateText: null,
+	focused: !1,
 	strokeWidth: 5,
 	scale: 1
 };

package/dist/delivery/index.js

@@ -24,7 +24,7 @@ var f = d(s, "EnableAudioAutoplayImage") || d(h.EnableAudioAutoplayImage, "Enabl
 		if (!this._session || !this._session.answers) return !1;
 		let { autoplayAudioEnabled: e, completeAudioEnabled: t } = this._model || {}, n = this;
 		if (e && t && !this.audioComplete && n) {
-			let e = n.querySelector("audio"), t = e && e.closest("#preview-prompt");
+			let e = n.querySelector("audio"), t = e && e.closest(".preview-prompt");
 			if (e && t) return !1;
 		}
 		return Array.isArray(this._session.answers) ? this._session.answers.length > 0 : !1;
@@ -60,7 +60,7 @@ var f = d(s, "EnableAudioAutoplayImage") || d(h.EnableAudioAutoplayImage, "Enabl
 			e.forEach((e) => {
 				if (e.type === "childList") {
 					if (this._audioInitialized) return;
-					let e = this.querySelector("audio"), r = e && e.closest("#preview-prompt");
+					let e = this.querySelector("audio"), r = e && e.closest(".preview-prompt");
 					if (!this._model || !this._model.autoplayAudioEnabled || e && !r || !e) return;
 					let i = this._createAudioInfoToast(), a = this.querySelector("#main-container"), o = () => {
 						this.querySelector("#play-audio-info") && (e.play(), a.removeChild(i)), document.removeEventListener("click", o);
@@ -100,7 +100,7 @@ var f = d(s, "EnableAudioAutoplayImage") || d(h.EnableAudioAutoplayImage, "Enabl
 		}
 	}
 	disconnectedCallback() {
-		document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root && this._root.unmount();
+		document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion