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

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

@@ -1,21 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/src/hotspot/polygon.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';
-declare class PolygonComponent extends React.Component {
-    constructor(props: any);
-    getPolygonCenter: any;
-    parsePointsForKonva: any;
-    handleClick: any;
-    handleMouseEnter: any;
-    handleMouseLeave: any;
-    getEvaluateOutlineColor: (isCorrect: any, markAsCorrect: any, outlineColor: any) => any;
-    getOutlineWidth: (showCorrectEnabled: any, selected: any, markAsCorrect: any, strokeWidth: any) => any;
-    render(): React.JSX.Element;
-}
-export default PolygonComponent;

package/dist/delivery/hotspot/polygon.js

@@ -1,108 +0,0 @@
-import e from "./image-konva-tooltip.js";
-import { faCorrect as t, faWrong as n } from "./icons.js";
-import r from "react";
-import i from "prop-types";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Group as s, Line as c, Rect as l } from "react-konva";
-//#region src/delivery/hotspot/polygon.tsx
-function u(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function d(e, t) {
-	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
-}
-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 };
-	}
-	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];
-	};
-	parsePointsForKonva = (e) => {
-		let t = [];
-		return e.forEach(({ x: e, y: n }) => {
-			t.push(e), t.push(n);
-		}), t;
-	};
-	handleClick = (e) => {
-		let { onClick: t, id: n, selected: r, disabled: i } = this.props;
-		i || (e.cancelBubble = !0, t({
-			id: n,
-			selected: !r,
-			selector: "Mouse"
-		}));
-	};
-	handleMouseEnter = () => {
-		let { disabled: e } = this.props;
-		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 });
-	};
-	handleMouseLeave = () => {
-		document.body.style.cursor = "default", this.setState({ hovered: !1 });
-	};
-	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;
-		return /* @__PURE__ */ o(p, {
-			scaleX: _,
-			scaleY: _,
-			children: [
-				k && /* @__PURE__ */ a(f, {
-					x: I,
-					y: L,
-					width: R,
-					height: z,
-					stroke: u ? "transparent" : c,
-					strokeWidth: g
-				}),
-				/* @__PURE__ */ a(m, {
-					points: w,
-					closed: !0,
-					fill: u && y ? y : 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,
-					cursor: "pointer",
-					position: "relative"
-				}),
-				s && O ? /* @__PURE__ */ a(e, {
-					src: O,
-					x: E,
-					y: D,
-					tooltip: h
-				}) : null
-			]
-		});
-	}
-};
-h.propTypes = {
-	hotspotColor: i.string.isRequired,
-	id: i.string.isRequired,
-	isCorrect: i.bool.isRequired,
-	isEvaluateMode: i.bool.isRequired,
-	hoverOutlineColor: i.string,
-	disabled: i.bool.isRequired,
-	onClick: i.func.isRequired,
-	outlineColor: i.string.isRequired,
-	points: i.array.isRequired,
-	selected: i.bool.isRequired,
-	evaluateText: i.string,
-	selectedHotspotColor: i.string,
-	strokeWidth: i.number,
-	scale: i.number,
-	markAsCorrect: i.bool.isRequired,
-	showCorrectEnabled: i.bool.isRequired
-}, h.defaultProps = {
-	evaluateText: null,
-	strokeWidth: 5,
-	scale: 1
-};
-//#endregion
-export { h as default };

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

@@ -1,19 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/src/hotspot/rectangle.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';
-declare class RectComponent extends React.Component {
-    constructor(props: any);
-    handleClick: any;
-    handleMouseEnter: any;
-    handleMouseLeave: any;
-    getEvaluateOutlineColor: (isCorrect: any, markAsCorrect: any, outlineColor: any) => any;
-    getOutlineWidth: (showCorrectEnabled: any, selected: any, markAsCorrect: any, strokeWidth: any) => any;
-    render(): React.JSX.Element;
-}
-export default RectComponent;

package/dist/delivery/hotspot/rectangle.js

@@ -1,104 +0,0 @@
-import e from "./image-konva-tooltip.js";
-import { faCorrect as t, faWrong as n } from "./icons.js";
-import r from "react";
-import i from "prop-types";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Group as s, Rect as c } from "react-konva";
-//#region src/delivery/hotspot/rectangle.tsx
-function l(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function u(e, t) {
-	return !e || l(e) ? e : l(e.default) ? e.default : t && l(e[t]) ? e[t] : t && l(e[t]?.default) ? e[t].default : e;
-}
-var d = u(s, "Group"), f = u(c, "Rect"), p = class extends r.Component {
-	constructor(e) {
-		super(e), this.state = { hovered: !1 };
-	}
-	handleClick = (e) => {
-		let { onClick: t, id: n, selected: r, disabled: i } = this.props;
-		i || (e.cancelBubble = !0, t({
-			id: n,
-			selected: !r,
-			selector: "Mouse"
-		}));
-	};
-	handleMouseEnter = () => {
-		let { disabled: e } = this.props;
-		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 });
-	};
-	handleMouseLeave = () => {
-		document.body.style.cursor = "default", this.setState({ hovered: !1 });
-	};
-	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;
-		return /* @__PURE__ */ o(d, {
-			scaleX: b,
-			scaleY: b,
-			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,
-					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,
-					cursor: "pointer"
-				}),
-				u && D ? /* @__PURE__ */ a(e, {
-					src: D,
-					x: T,
-					y: E,
-					tooltip: v
-				}) : null
-			]
-		});
-	}
-};
-p.propTypes = {
-	height: i.number.isRequired,
-	hotspotColor: i.string.isRequired,
-	id: i.string.isRequired,
-	isCorrect: i.oneOfType([i.bool, i.string]),
-	isEvaluateMode: i.bool.isRequired,
-	hoverOutlineColor: i.string,
-	disabled: i.bool.isRequired,
-	onClick: i.func.isRequired,
-	outlineColor: i.string.isRequired,
-	selected: i.bool.isRequired,
-	width: i.number.isRequired,
-	x: i.number.isRequired,
-	y: i.number.isRequired,
-	evaluateText: i.string,
-	strokeWidth: i.number,
-	scale: i.number,
-	selectedHotspotColor: i.string,
-	markAsCorrect: i.bool.isRequired,
-	showCorrectEnabled: i.bool.isRequired
-}, p.defaultProps = {
-	isCorrect: !1,
-	evaluateText: null,
-	strokeWidth: 5,
-	scale: 1
-};
-//#endregion
-export { p as default };

package/dist/delivery/index.d.ts

@@ -1,20 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/src/index.js
- * @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.
- */
-export default class Hotspot extends HTMLElement {
-    constructor();
-    set model(m: any);
-    isComplete(): boolean;
-    set session(s: any);
-    get session(): any;
-    onSelectChoice(data: any): void;
-    _createAudioInfoToast(): HTMLDivElement;
-    connectedCallback(): void;
-    _render(): void;
-    disconnectedCallback(): void;
-}

package/dist/delivery/index.js

@@ -1,107 +0,0 @@
-import e from "./hotspot/index.js";
-import { updateSessionMetadata as t, updateSessionValue as n } from "./session-updater.js";
-import r from "react";
-import { createRoot as i } from "react-dom/client";
-import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
-import * as o from "@pie-lib/render-ui";
-import { EnableAudioAutoplayImage as s } from "@pie-lib/render-ui";
-import { ModelSetEvent as c, SessionChangedEvent as l } from "@pie-element/shared-player-events";
-//#region src/delivery/index.ts
-function u(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function d(e, t) {
-	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
-}
-var f = d(s, "EnableAudioAutoplayImage") || d(h.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), p = o, m = p.default, h = m && typeof m == "object" ? m : p, g = class extends HTMLElement {
-	constructor() {
-		super(), this._model = null, this._session = null, this._audioInitialized = !1, this.audioComplete = !1, this._root = null;
-	}
-	set model(e) {
-		this._model = e, this.dispatchEvent(new c(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._audioInitialized = !1, this._render();
-	}
-	isComplete() {
-		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");
-			if (e && t) return !1;
-		}
-		return Array.isArray(this._session.answers) ? this._session.answers.length > 0 : !1;
-	}
-	set session(e) {
-		e && !e.answers && (e.answers = []), this._session = e, this._render();
-	}
-	get session() {
-		return this._session;
-	}
-	onSelectChoice(e) {
-		n(this._session, this._model, e), this.dispatchEvent(new l(this.tagName.toLowerCase(), this.isComplete())), this._render();
-	}
-	_createAudioInfoToast() {
-		let e = document.createElement("div");
-		e.id = "play-audio-info", Object.assign(e.style, {
-			position: "absolute",
-			top: 0,
-			width: "100%",
-			height: "100%",
-			display: "flex",
-			justifyContent: "center",
-			alignItems: "center",
-			background: "white",
-			zIndex: "1000",
-			cursor: "pointer"
-		});
-		let t = document.createElement("img");
-		return t.src = f, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
-	}
-	connectedCallback() {
-		this._render(), new MutationObserver((e, n) => {
-			e.forEach((e) => {
-				if (e.type === "childList") {
-					if (this._audioInitialized) return;
-					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);
-					};
-					setTimeout(() => {
-						e.paused && !this.querySelector("#play-audio-info") ? (a.appendChild(i), document.addEventListener("click", o)) : document.removeEventListener("click", o);
-					}, 500);
-					let s = () => {
-						t(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
-						let n = this.querySelector("#play-audio-info");
-						n && a.removeChild(n), e.removeEventListener("playing", s);
-					};
-					e.addEventListener("playing", s);
-					let c = () => {
-						t(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() });
-						let { audioStartTime: n, audioEndTime: r, waitTime: i } = this._session;
-						!i && n && r && (this._session.waitTime = r - n), this.audioComplete = !0, this.dispatchEvent(new l(this.tagName.toLowerCase(), this.isComplete())), e.removeEventListener("ended", c);
-					};
-					e.addEventListener("ended", c), this._audio = e, this._handlePlaying = s, this._handleEnded = c, this._enableAudio = o, this._audioInitialized = !0, n.disconnect();
-				}
-			});
-		}).observe(this, {
-			childList: !0,
-			subtree: !0
-		});
-	}
-	_render() {
-		if (this._model && this._session) {
-			let t = r.createElement(e, {
-				model: this._model,
-				session: this._session,
-				onSelectChoice: this.onSelectChoice.bind(this)
-			});
-			this._root ||= i(this), this._root.render(t), queueMicrotask(() => {
-				a(this);
-			});
-		}
-	}
-	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();
-	}
-};
-//#endregion
-export { g as default };

package/dist/delivery/session-updater.d.ts

@@ -1,10 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/src/session-updater.js
- * @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.
- */
-export declare function updateSessionValue(session: any, model: any, data: any): void;
-export declare function updateSessionMetadata(session: any, metadata: any): void;

package/dist/delivery/session-updater.js

@@ -1,14 +0,0 @@
-//#region src/delivery/session-updater.ts
-function e(e, t, n) {
-	let { id: r, selected: i } = n, { multipleCorrect: a } = t || {};
-	if (e.answers = e.answers || [], !i) e.answers = e.answers.filter((e) => e.id !== r);
-	else {
-		let t = { id: r };
-		a ? e.answers.push(t) : e.answers = [t], e.selector = n.selector;
-	}
-}
-function t(e, t) {
-	e.audioStartTime = e.audioStartTime || t.audioStartTime, e.audioEndTime = e.audioEndTime || t.audioEndTime, !e.waitTime && e.audioStartTime && e.audioEndTime && (e.waitTime = e.audioEndTime - e.audioStartTime);
-}
-//#endregion
-export { t as updateSessionMetadata, e as updateSessionValue };

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -1,8 +0,0 @@
-/**
- * IIFE entry point for hotspot element
- * This file is only used for IIFE builds and includes auto-registration
- *
- * @sync-generated - Auto-generated during sync from pie-elements
- */
-import Element from './index.js';
-export default Element;