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

package/dist/controller/defaults.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/controller/src/defaults.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.
+ */
+declare const _default: {
+    dimensions: {
+        height: number;
+        width: number;
+    };
+    hotspotColor: string;
+    hotspotList: string[];
+    imageUrl: string;
+    multipleCorrect: boolean;
+    outlineColor: string;
+    outlineList: string[];
+    partialScoring: boolean;
+    prompt: string;
+    promptEnabled: boolean;
+    rationaleEnabled: boolean;
+    shapes: {
+        rectangles: never[];
+        polygons: never[];
+        circles: never[];
+    };
+    strokeWidth: number;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    toolbarEditorPosition: string;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,29 @@
+//#region src/controller/defaults.ts
+var e = {
+	dimensions: {
+		height: 0,
+		width: 0
+	},
+	hotspotColor: "rgba(137, 183, 244, 0.25)",
+	hotspotList: ["rgba(137, 183, 244, 0.25)"],
+	imageUrl: "",
+	multipleCorrect: !0,
+	outlineColor: "blue",
+	outlineList: ["blue"],
+	partialScoring: !1,
+	prompt: "",
+	promptEnabled: !0,
+	rationaleEnabled: !0,
+	shapes: {
+		rectangles: [],
+		polygons: [],
+		circles: []
+	},
+	strokeWidth: 5,
+	studentInstructionsEnabled: !0,
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	toolbarEditorPosition: "bottom"
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/controller/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 declare const normalize: (question: any) => any;
+export declare function model(question: any, session: any, env: any): Promise<unknown>;
+export declare const createDefaultModel: (model?: {}) => Promise<unknown>;
+/**
+* Generates detailed trace log for scoring evaluation
+* @param {Object} model - the question model
+* @param {Object} session - the student session
+* @param {Object} env - the environment
+* @returns {Array} traceLog - array of trace messages
+*/
+export declare const getLogTrace: (model: any, session: any, env: any) => string[];
+export declare function outcome(config: any, session: any, env?: {}): Promise<unknown>;
+export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,154 @@
+import { isResponseCorrect as e } from "./utils.js";
+import t from "./defaults.js";
+import n from "debug";
+import { isEmpty as r } from "@pie-element/shared-lodash";
+import { partialScoring as i } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var a = n("pie-elements:hotspot:controller"), o = (e) => ({
+	...t,
+	...e
+});
+function s(t, n, r) {
+	let i = o(t), { imageUrl: a, dimensions: s, hotspotColor: c, hoverOutlineColor: l, selectedHotspotColor: u, multipleCorrect: d, outlineColor: f, partialScoring: p, prompt: m, shapes: h, language: g, fontSizeFactor: _, autoplayAudioEnabled: v, completeAudioEnabled: y, customAudioButton: b } = i, { rectangles: x, polygons: S, circles: C } = h || {}, w = r.mode === "evaluate" || r.role === "instructor" && r.mode === "view";
+	return new Promise((t) => {
+		let o = {
+			disabled: r.mode !== "gather",
+			mode: r.mode,
+			dimensions: s,
+			imageUrl: a,
+			outlineColor: f,
+			hotspotColor: c,
+			hoverOutlineColor: l,
+			selectedHotspotColor: u,
+			multipleCorrect: d,
+			partialScoring: p,
+			language: g,
+			fontSizeFactor: _,
+			autoplayAudioEnabled: v,
+			completeAudioEnabled: y,
+			customAudioButton: b,
+			shapes: {
+				...h,
+				rectangles: (x || []).map(({ index: e, correct: t, ...n }) => w ? {
+					correct: t,
+					...n
+				} : { ...n }),
+				polygons: (S || []).map(({ index: e, correct: t, ...n }) => w ? {
+					correct: t,
+					...n
+				} : { ...n }),
+				circles: (C || []).map(({ index: e, correct: t, ...n }) => w ? {
+					correct: t,
+					...n
+				} : { ...n })
+			},
+			responseCorrect: r.mode === "evaluate" ? e(i, n) : void 0,
+			extraCSSRules: i.extraCSSRules
+		};
+		r.role === "instructor" && (r.mode === "view" || r.mode === "evaluate") ? (o.rationale = i.rationaleEnabled ? i.rationale : null, o.teacherInstructions = i.teacherInstructionsEnabled ? i.teacherInstructions : null) : (o.rationale = null, o.teacherInstructions = null), o.prompt = i.promptEnabled ? m : null, o.strokeWidth = i.strokeWidth, t(o);
+	});
+}
+var c = (e = {}) => new Promise((n) => {
+	n({
+		...t,
+		...e
+	});
+}), l = (t, n, r = {}) => {
+	let { answers: a } = n || {};
+	if (!t.shapes || !t.shapes.rectangles && !t.shapes.polygons && !t.shapes.circles) return 0;
+	let { shapes: { rectangles: o = [], polygons: s = [], circles: c = [] } = {} } = t;
+	if (!i.enabled(t, r)) return +!!e(t, n);
+	let l = 0, u = 0, d = [
+		...o,
+		...s,
+		...c
+	], f = d.filter((e) => e.correct);
+	d.forEach((e) => {
+		let t = a && a.filter((t) => t.id === e.id)[0], n = e.correct && t;
+		t && (u += 1), n && (l += 1);
+	});
+	let p = u > f.length ? u - f.length : 0, m = f.length === 0 ? 1 : f.length, h = ((l - p) / m).toFixed(2);
+	return h < 0 ? 0 : parseFloat(h);
+}, u = (e, t, n) => {
+	let r = [], { answers: a } = t || {}, { shapes: o } = e || {}, s = [];
+	o && (o.rectangles && s.push(...o.rectangles), o.polygons && s.push(...o.polygons), o.circles && s.push(...o.circles));
+	let c = s.filter((e) => e.correct), u = s.length;
+	if (r.push(`Total of ${u} hotspot(s) defined, ${c.length} correct.`), a && a.length > 0) {
+		r.push(`Student selected ${a.length} hotspot(s).`);
+		let e = 0, t = 0;
+		a.forEach((n) => {
+			let r = s.find((e) => e.id === n.id);
+			r && r.correct ? e++ : t++;
+		});
+		let n = c.filter((e) => !a.some((t) => t.id === e.id)).length;
+		e > 0 && r.push(`${e} correct hotspot(s) selected.`), t > 0 && r.push(`${t} incorrect hotspot(s) selected.`), n > 0 && r.push(`${n} correct hotspot(s) missed.`);
+	} else r.push("No hotspots selected.");
+	if (i.enabled(e, n)) {
+		if (r.push("Score calculated using partial scoring."), a && a.length > 0) {
+			let e = 0, t = 0;
+			a.forEach((n) => {
+				let r = s.find((e) => e.id === n.id);
+				r && r.correct ? e++ : t++;
+			});
+			let n = c.length;
+			if (r.push(`Partial scoring calculation: ${e} correct selections out of ${n} available.`), t > n) {
+				let i = t - (n - e);
+				r.push(`${i} extra incorrect selection(s) beyond required amount are deducted from score.`);
+			}
+		}
+	} else r.push("Score calculated using all-or-nothing scoring.");
+	let d = l(e, t, n);
+	return r.push(`Score: ${d}.`), r;
+};
+function d(e, t, n = {}) {
+	return new Promise((i) => {
+		if (a("outcome..."), (!t || r(t)) && i({
+			score: 0,
+			empty: !0,
+			traceLog: ["No hotspots selected. Score: 0."]
+		}), t.answers) {
+			let r = u(e, t, n);
+			i({
+				score: l(e, t, n),
+				empty: !1,
+				traceLog: r
+			});
+		} else i({
+			score: 0,
+			empty: !0,
+			traceLog: ["No hotspots selected. Score: 0."]
+		});
+	});
+}
+var f = (e) => {
+	let t = [];
+	return e.forEach((e) => {
+		let { correct: n, id: r } = e;
+		n && t.push({ id: r });
+	}), t;
+}, p = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { shapes: { rectangles: t = [], circles: r = [], polygons: i = {} } = {} } = e, a = f(t), o = f(i), s = f(r);
+		n({
+			answers: [
+				...a,
+				...o,
+				...s
+			],
+			id: "1"
+		});
+	} else n(null);
+}), m = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), h = (e = {}, t = {}) => {
+	let { shapes: n } = e, { minShapes: r = 2, maxShapes: i, maxSelections: a } = t, o = {};
+	[
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((n) => {
+		t[n]?.required && !m(e[n]) && (o[n] = "This field is required.");
+	});
+	let s = Object.values(n || {}).reduce((e, t) => [...e, ...t], []), c = (s || []).reduce((e, t) => t.correct ? e + 1 : e, 0), l = (s || []).length;
+	return l < r ? o.shapes = `There should be at least ${r} shapes defined.` : l > i && (o.shapes = `No more than ${i} shapes should be defined.`), c < 1 ? o.selections = "There should be at least 1 shape selected." : c > a && (o.selections = `No more than ${a} shapes should be selected.`), o;
+};
+//#endregion
+export { p as createCorrectResponseSession, c as createDefaultModel, u as getLogTrace, s as model, o as normalize, d as outcome, h as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/controller/src/utils.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 const getCorrectResponse: (choices: any) => any;
+export declare const isResponseCorrect: (question: any, session: any) => boolean;

package/dist/controller/utils.js

@@ -0,0 +1,12 @@
+import { isEmpty as e, isEqual as t } from "@pie-element/shared-lodash";
+//#region src/controller/utils.ts
+var n = (e) => e.filter((e) => e.correct).map((e) => e.id).sort(), r = (r, i) => {
+	let { shapes: { rectangles: a = [], polygons: o = [], circles: s = [] } } = r, c = n([
+		...a,
+		...o,
+		...s
+	]);
+	return !i || e(i) ? !1 : i.answers && i.answers.length ? t((i.answers || []).map((e) => e.id).sort(), c) : !(c && c.length);
+};
+//#endregion
+export { r as isResponseCorrect };

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

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/hotspot/circle.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 CircleComponent 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 CircleComponent;

package/dist/delivery/hotspot/circle.js

@@ -0,0 +1,100 @@
+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 { Circle as s, Group as c, Rect as l } from "react-konva";
+//#region src/delivery/hotspot/circle.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(c, "Group"), m = d(s, "Circle"), h = 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 { radius: r, hotspotColor: i, isCorrect: s, isEvaluateMode: c, hoverOutlineColor: l, outlineColor: u, selected: d, x: h, y: g, evaluateText: _, strokeWidth: v, scale: y, markAsCorrect: b, selectedHotspotColor: x, showCorrectEnabled: S } = this.props, { hovered: C } = this.state, w = c ? this.getEvaluateOutlineColor(s, b, u) : u, T = this.getOutlineWidth(S, d, b, v), E = h - 10, D = g - 10, O;
+		S ? (d && s || !d && !s) && (O = t) : d ? O = s ? t : n : s || (O = n);
+		let k = C && l;
+		return /* @__PURE__ */ o(p, {
+			scaleX: y,
+			scaleY: y,
+			children: [
+				k && /* @__PURE__ */ a(f, {
+					x: h - r,
+					y: g - r,
+					width: r * 2,
+					height: r * 2,
+					stroke: d ? "transparent" : l,
+					strokeWidth: v
+				}),
+				/* @__PURE__ */ a(m, {
+					radius: r,
+					fill: d && x ? x : i,
+					onClick: this.handleClick,
+					onTap: this.handleClick,
+					draggable: !1,
+					stroke: k && !d ? "transparent" : w,
+					strokeWidth: k && !d ? 0 : T,
+					onMouseLeave: this.handleMouseLeave,
+					onMouseEnter: this.handleMouseEnter,
+					x: h,
+					y: g
+				}),
+				c && O ? /* @__PURE__ */ a(e, {
+					src: O,
+					x: E,
+					y: D,
+					tooltip: _
+				}) : null
+			]
+		});
+	}
+};
+h.propTypes = {
+	radius: i.number.isRequired,
+	hotspotColor: i.string.isRequired,
+	id: i.string.isRequired,
+	isCorrect: i.oneOfType([i.bool, i.string]),
+	isEvaluateMode: i.bool.isRequired,
+	disabled: i.bool.isRequired,
+	hoverOutlineColor: i.string,
+	onClick: i.func.isRequired,
+	outlineColor: i.string.isRequired,
+	selected: i.bool.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
+}, h.defaultProps = {
+	isCorrect: !1,
+	evaluateText: null,
+	strokeWidth: 5,
+	scale: 1
+};
+//#endregion
+export { h as default };

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

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/hotspot/container.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';
+export declare class Container extends React.Component {
+    isSelected(shape: any): boolean;
+    correctness: (isCorrect: any, isChecked: any) => any;
+    getEvaluateText: any;
+    render(): React.JSX.Element;
+}
+export default Container;

package/dist/delivery/hotspot/container.js

@@ -0,0 +1,150 @@
+import e from "./rectangle.js";
+import t from "./polygon.js";
+import n from "./circle.js";
+import r from "react";
+import i from "prop-types";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { styled as s } from "@mui/material/styles";
+import { Layer as c, Stage as l } from "react-konva";
+//#region src/delivery/hotspot/container.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, "Stage"), p = d(c, "Layer"), m = s("div")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	position: "relative",
+	background: e.palette.common.white,
+	border: `${e.spacing(1)} solid ${e.palette.common.white}`,
+	width: "fit-content"
+})), h = s("div")({
+	position: "relative",
+	width: "fit-content"
+}), g = s("img")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center"
+}), _ = s(f)({
+	left: 0,
+	top: 0,
+	position: "absolute"
+}), v = class extends r.Component {
+	isSelected(e) {
+		return !!this.props.session.answers.filter((t) => t.id === e.id)[0];
+	}
+	correctness = (e, t) => e ? t : !t;
+	getEvaluateText = (e, t) => t && e ? "Correctly\nselected" : t && !e ? "Should not have\nbeen selected" : !t && e ? "Should have\nbeen selected" : null;
+	render() {
+		let { dimensions: { width: r, height: i }, disabled: s, hotspotColor: c, hoverOutlineColor: l, selectedHotspotColor: u, imageUrl: d, isEvaluateMode: f, outlineColor: v, onSelectChoice: y, shapes: { rectangles: b = [], polygons: x = [], circles: S = [] }, scale: C, strokeWidth: w, showCorrect: T } = this.props, E = r * C, D = i * C;
+		return /* @__PURE__ */ o(m, {
+			style: { padding: w / 2 },
+			children: [d ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(g, {
+				alt: "hotspot-image",
+				height: "auto",
+				src: d,
+				style: {
+					width: E,
+					height: D,
+					maxWidth: E,
+					maxHeight: D
+				}
+			}) }) : null, /* @__PURE__ */ a(_, {
+				height: D + w,
+				width: E + w,
+				x: w / 2,
+				y: w / 2,
+				children: /* @__PURE__ */ o(p, { children: [
+					b.map((t) => {
+						let n = this.isSelected(t), r = f ? this.correctness(t.correct, n) : void 0, i = f ? this.getEvaluateText(t.correct, n) : null, o = !!(f && T && t.correct);
+						return /* @__PURE__ */ a(e, {
+							scale: C,
+							isEvaluateMode: f,
+							isCorrect: r,
+							evaluateText: i,
+							disabled: s,
+							selected: n,
+							height: t.height,
+							hotspotColor: c,
+							hoverOutlineColor: l,
+							selectedHotspotColor: u,
+							id: t.id,
+							onClick: y,
+							outlineColor: v,
+							width: t.width,
+							x: t.x,
+							y: t.y,
+							strokeWidth: w,
+							markAsCorrect: o,
+							showCorrectEnabled: T
+						}, t.id);
+					}),
+					x.map((e) => {
+						let n = this.isSelected(e), r = f ? this.correctness(e.correct, n) : void 0, i = f ? this.getEvaluateText(e.correct, n) : null, o = !!(f && T && e.correct);
+						return /* @__PURE__ */ a(t, {
+							scale: C,
+							isEvaluateMode: f,
+							isCorrect: !!r,
+							evaluateText: i,
+							disabled: s,
+							selected: n,
+							hotspotColor: c,
+							id: e.id,
+							onClick: y,
+							outlineColor: v,
+							points: e.points,
+							strokeWidth: w,
+							markAsCorrect: o,
+							selectedHotspotColor: u,
+							hoverOutlineColor: l,
+							showCorrectEnabled: T
+						}, e.id);
+					}),
+					S.map((e) => {
+						let t = this.isSelected(e), r = f ? this.correctness(e.correct, t) : void 0, i = f ? this.getEvaluateText(e.correct, t) : null, o = !!(f && T && e.correct);
+						return /* @__PURE__ */ a(n, {
+							scale: C,
+							isEvaluateMode: f,
+							isCorrect: r,
+							evaluateText: i,
+							disabled: s,
+							selected: t,
+							radius: e.radius,
+							hotspotColor: c,
+							id: e.id,
+							onClick: y,
+							outlineColor: v,
+							x: e.x,
+							y: e.y,
+							strokeWidth: w,
+							markAsCorrect: o,
+							selectedHotspotColor: u,
+							hoverOutlineColor: l,
+							showCorrectEnabled: T
+						}, e.id);
+					})
+				] })
+			})]
+		});
+	}
+};
+v.propTypes = {
+	dimensions: i.object.isRequired,
+	disabled: i.bool.isRequired,
+	hotspotColor: i.string.isRequired,
+	hoverOutlineColor: i.string,
+	imageUrl: i.string.isRequired,
+	isEvaluateMode: i.bool.isRequired,
+	onSelectChoice: i.func.isRequired,
+	outlineColor: i.string.isRequired,
+	selectedHotspotColor: i.string,
+	session: i.object.isRequired,
+	shapes: i.object.isRequired,
+	strokeWidth: i.number,
+	scale: i.number,
+	showCorrect: i.bool
+}, v.defaultProps = { scale: 1 };
+//#endregion
+export { v as default };