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

package/dist/controller/defaults.d.ts

@@ -1,35 +0,0 @@
-/**
- * @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

@@ -1,29 +0,0 @@
-//#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

@@ -1,22 +0,0 @@
-/**
- * @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

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

@@ -1,10 +0,0 @@
-/**
- * @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

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

@@ -1,19 +0,0 @@
-/**
- * @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

@@ -1,100 +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 { 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

@@ -1,16 +0,0 @@
-/**
- * @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

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