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

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