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

package/dist/author/root.js

@@ -1,6 +1,6 @@
 import e from "./hotspot-palette.js";
 import { generateValidationMessage as t, getAllShapes as n, getUpdatedShapes as r, groupShapes as i, updateImageDimensions as a } from "./utils.js";
-import o from "./hotspot-container.js";
+import { Container as o } from "./hotspot-container.js";
 import s from "react";
 import c from "prop-types";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
@@ -8,10 +8,10 @@ import { styled as d } from "@mui/material/styles";
 import { InputContainer as f, NumberTextField as p, layout as m, settings as h } from "@pie-lib/config-ui";
 import g from "@pie-lib/editable-html-tip-tap";
 import _ from "@mui/material/Typography";
-import v from "@mui/icons-material/Info";
-import y from "@mui/material/Tooltip";
+import ee from "@mui/icons-material/Info";
+import v from "@mui/material/Tooltip";
 //#region src/author/root.tsx
-var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) => ({
+var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("div")(({ theme: e }) => ({
 	display: "flex",
 	marginBottom: e.spacing(1.5)
 })), x = d("div")({
@@ -22,18 +22,18 @@ var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) =>
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(2),
 	width: "100%"
-})), C = d(_)(({ theme: e }) => ({ marginRight: e.spacing(1) })), re = d("div")({
+})), ie = d(_)(({ theme: e }) => ({ marginRight: e.spacing(1) })), ae = d("div")({
 	display: "flex",
 	alignItems: "center"
-}), ie = d(y)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+}), oe = d(v)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), w = d("div")(({ theme: e }) => ({
+} })), C = d("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), T = class extends s.Component {
+})), w = class extends s.Component {
 	handleColorChange = (e, t) => {
 		let { onColorChanged: n } = this.props;
 		n(`${e}Color`, t);
@@ -46,56 +46,56 @@ var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) =>
 		u(i(r(o, d, n(s)))), l(d);
 	};
 	render() {
-		let { configuration: n, model: r, imageSupport: i, uploadSoundSupport: a, onConfigurationChanged: c, onImageUpload: d, onModelChangedByConfig: f, onPromptChanged: h, onRationaleChanged: y, onUpdateImageDimension: T, onTeacherInstructionsChanged: ae, onUpdateShapes: E } = this.props, { baseInputConfiguration: oe = {}, contentDimensions: se = {}, maxImageWidth: D = {}, maxImageHeight: O = {}, multipleCorrect: k = {}, partialScoring: A = {}, preserveAspectRatio: j = {}, prompt: M = {}, rationale: N = {}, settingsPanelDisabled: ce, spellCheck: P = {}, teacherInstructions: F = {}, withRubric: I = {}, mathMlOptions: L = {}, language: R = {}, languageChoices: z = {} } = n || {}, { errors: B, extraCSSRules: V, promptEnabled: H, rationaleEnabled: U, spellCheckEnabled: W, teacherInstructionsEnabled: le, toolbarEditorPosition: ue } = r || {}, { prompt: G, rationale: K, shapes: q, selections: J, teacherInstructions: Y } = B || {}, de = t(n), X = D && D.prompt, Z = O && O.prompt, Q = { position: ue === "top" ? "top" : "bottom" }, fe = {
-			multipleCorrect: k.settings && b(k.label),
-			partialScoring: A.settings && b(A.label),
-			promptEnabled: M.settings && b(M.label),
-			"language.enabled": R.settings && b(R.label, !0),
-			language: R.settings && R.enabled && te(z.label, z.options)
-		}, pe = {
-			teacherInstructionsEnabled: F.settings && b(F.label),
-			rationaleEnabled: N.settings && b(N.label),
-			spellCheckEnabled: P.settings && b(P.label),
-			rubricEnabled: I?.settings && b(I?.label)
+		let { configuration: n, model: r, imageSupport: i, uploadSoundSupport: a, onConfigurationChanged: c, onImageUpload: d, onModelChangedByConfig: f, onPromptChanged: h, onRationaleChanged: v, onUpdateImageDimension: w, onTeacherInstructionsChanged: se, onUpdateShapes: ce } = this.props, { baseInputConfiguration: le = {}, contentDimensions: T = {}, maxImageWidth: E = {}, maxImageHeight: D = {}, multipleCorrect: O = {}, partialScoring: k = {}, preserveAspectRatio: A = {}, prompt: j = {}, rationale: M = {}, settingsPanelDisabled: N, spellCheck: P = {}, teacherInstructions: F = {}, withRubric: I = {}, mathMlOptions: L = {}, language: R = {}, languageChoices: z = {} } = n || {}, { errors: B, extraCSSRules: V, promptEnabled: H, rationaleEnabled: U, spellCheckEnabled: W, teacherInstructionsEnabled: ue, toolbarEditorPosition: de } = r || {}, { prompt: G, rationale: K, shapes: q, selections: J, teacherInstructions: Y } = B || {}, fe = t(n), X = E && E.prompt, Z = D && D.prompt, Q = { position: de === "top" ? "top" : "bottom" }, pe = {
+			multipleCorrect: O.settings && y(O.label),
+			partialScoring: k.settings && y(k.label),
+			promptEnabled: j.settings && y(j.label),
+			"language.enabled": R.settings && y(R.label, !0),
+			language: R.settings && R.enabled && b(z.label, z.options)
+		}, me = {
+			teacherInstructionsEnabled: F.settings && y(F.label),
+			rationaleEnabled: M.settings && y(M.label),
+			spellCheckEnabled: P.settings && y(P.label),
+			rubricEnabled: I?.settings && y(I?.label)
 		}, $ = (e = {}) => ({
-			...oe,
+			...le,
 			...e
 		});
 		return /* @__PURE__ */ u(m.ConfigLayout, {
 			extraCSSRules: V,
-			dimensions: se,
-			hideSettings: ce,
-			settings: /* @__PURE__ */ l(ee, {
+			dimensions: T,
+			hideSettings: N,
+			settings: /* @__PURE__ */ l(te, {
 				model: r,
 				onChangeModel: f,
 				configuration: n,
 				onChangeConfiguration: c,
 				groups: {
-					Settings: fe,
-					Properties: pe
+					Settings: pe,
+					Properties: me
 				}
 			}),
 			children: [
-				le && /* @__PURE__ */ u(S, {
+				ue && /* @__PURE__ */ u(S, {
 					label: F.label,
 					children: [/* @__PURE__ */ l(g, {
 						markup: r.teacherInstructions || "",
-						onChange: ae,
+						onChange: se,
 						imageSupport: i,
 						nonEmpty: !1,
 						error: Y,
 						toolbarOpts: Q,
 						pluginProps: $(F?.inputConfiguration),
 						spellCheck: W,
-						maxImageWidth: D && D.teacherInstructions || X,
-						maxImageHeight: O && O.teacherInstructions || Z,
+						maxImageWidth: E && E.teacherInstructions || X,
+						maxImageHeight: D && D.teacherInstructions || Z,
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: L
-					}), Y && /* @__PURE__ */ l(w, { children: Y })]
+					}), Y && /* @__PURE__ */ l(C, { children: Y })]
 				}),
 				H && /* @__PURE__ */ u(S, {
-					label: M.label,
+					label: j.label,
 					children: [/* @__PURE__ */ l(g, {
 						markup: r.prompt || "",
 						onChange: h,
@@ -103,24 +103,24 @@ var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) =>
 						nonEmpty: !1,
 						error: G,
 						toolbarOpts: Q,
-						pluginProps: $(M?.inputConfiguration),
+						pluginProps: $(j?.inputConfiguration),
 						spellCheck: W,
 						maxImageWidth: X,
 						maxImageHeight: Z,
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: L
-					}), G && /* @__PURE__ */ l(w, { children: G })]
+					}), G && /* @__PURE__ */ l(C, { children: G })]
 				}),
-				/* @__PURE__ */ u(re, { children: [/* @__PURE__ */ l(C, {
+				/* @__PURE__ */ u(ae, { children: [/* @__PURE__ */ l(ie, {
 					variant: "h6",
 					children: "Define Hotspot"
-				}), /* @__PURE__ */ l(ie, {
+				}), /* @__PURE__ */ l(oe, {
 					disableFocusListener: !0,
 					disableTouchListener: !0,
 					placement: "left",
-					title: de,
-					children: /* @__PURE__ */ l(v, {
+					title: fe,
+					children: /* @__PURE__ */ l(ee, {
 						fontSize: "small",
 						color: "primary",
 						style: { float: "right" }
@@ -142,21 +142,21 @@ var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) =>
 					hotspotColor: r.hotspotColor,
 					outlineColor: r.outlineColor,
 					selectedHotspotColor: r.selectedHotspotColor,
-					hoverOutlineColor: r.hoverOutlineColor,
-					onUpdateImageDimension: T,
-					onUpdateShapes: E,
+					hoverOutlineColor: ne(r.hoverOutlineColor) ? r.hoverOutlineColor : "black",
+					onUpdateImageDimension: w,
+					onUpdateShapes: ce,
 					onImageUpload: d,
 					shapes: r.shapes,
 					strokeWidth: r.strokeWidth,
-					preserveAspectRatioEnabled: j.enabled,
+					preserveAspectRatioEnabled: A.enabled,
 					insertImage: i && i.add
 				}),
-				q && /* @__PURE__ */ l(w, { children: q }),
-				J && /* @__PURE__ */ l(w, { children: J }),
+				q && /* @__PURE__ */ l(C, { children: q }),
+				J && /* @__PURE__ */ l(C, { children: J }),
 				r.imageUrl && /* @__PURE__ */ u(s.Fragment, { children: [/* @__PURE__ */ l(_, {
 					variant: "h6",
 					children: "Image Dimensions"
-				}), /* @__PURE__ */ u(ne, { children: [/* @__PURE__ */ l(x, { children: /* @__PURE__ */ l(p, {
+				}), /* @__PURE__ */ u(re, { children: [/* @__PURE__ */ l(x, { children: /* @__PURE__ */ l(p, {
 					label: "Width",
 					value: r.dimensions.width,
 					min: 0,
@@ -170,27 +170,27 @@ var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) =>
 					showErrorWhenOutsideRange: !0
 				}, "hotspot-manual-height") })] })] }),
 				U && /* @__PURE__ */ u(S, {
-					label: N.label,
+					label: M.label,
 					children: [/* @__PURE__ */ l(g, {
 						markup: r.rationale || "",
-						onChange: y,
+						onChange: v,
 						imageSupport: i,
 						error: K,
 						toolbarOpts: Q,
-						pluginProps: $(N?.inputConfiguration),
+						pluginProps: $(M?.inputConfiguration),
 						spellCheck: W,
-						maxImageWidth: D && D.rationale || X,
-						maxImageHeight: O && O.rationale || Z,
+						maxImageWidth: E && E.rationale || X,
+						maxImageHeight: D && D.rationale || Z,
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: L
-					}), K && /* @__PURE__ */ l(w, { children: K })]
+					}), K && /* @__PURE__ */ l(C, { children: K })]
 				})
 			]
 		});
 	}
 };
-T.propTypes = {
+w.propTypes = {
 	configuration: c.object,
 	model: c.object.isRequired,
 	imageSupport: c.shape({
@@ -212,4 +212,4 @@ T.propTypes = {
 	onTeacherInstructionsChanged: c.func.isRequired
 };
 //#endregion
-export { T as default };
+export { w as Root, w as default };

package/dist/author/utils.js

@@ -1,5 +1,5 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import { SHAPE_GROUPS as t } from "./shapes/utils.js";
+import { SHAPE_GROUPS as e } from "./shapes/utils.js";
+import { cloneDeep as t } from "@pie-element/shared-lodash";
 //#region src/author/utils.ts
 var n = (e, t, n, r) => {
 	if (n) {
@@ -33,10 +33,10 @@ var n = (e, t, n, r) => {
 		x: r(e.width, t.width, n.x),
 		y: r(e.height, t.height, n.y)
 	}))
-}), s = (e, n, r) => r.map((r) => {
-	if (r.group === t.RECTANGLES) return i(e, n, r);
-	if (r.group === t.POLYGONS) return o(e, n, r);
-	if (r.group === t.CIRCLES) return a(e, n, r);
+}), s = (t, n, r) => r.map((r) => {
+	if (r.group === e.RECTANGLES) return i(t, n, r);
+	if (r.group === e.POLYGONS) return o(t, n, r);
+	if (r.group === e.CIRCLES) return a(t, n, r);
 }), c = (e) => {
 	e ||= {};
 	let t = [], n = Object.keys(e);
@@ -45,14 +45,14 @@ var n = (e, t, n, r) => {
 		group: n,
 		index: e.index || t.length + r
 	})) : []), t) : t;
-}, l = (t) => {
-	t ||= [];
+}, l = (e) => {
+	e ||= [];
 	let n = {
 		rectangles: [],
 		polygons: [],
 		circles: []
 	};
-	return t.length ? t.reduce((e, { group: t, ...n }) => (e[t] = [...e[t] || [], n], e), n) : e(n);
+	return e.length ? e.reduce((e, { group: t, ...n }) => (e[t] = [...e[t] || [], n], e), n) : t(n);
 }, u = (e, t, n) => {
 	let r = !1;
 	if (!e || e.length <= 0) return r;
@@ -80,4 +80,4 @@ var n = (e, t, n, r) => {
 	return "Validation requirements:" + i + a;
 };
 //#endregion
-export { d as calculate, f as generateValidationMessage, c as getAllShapes, s as getUpdatedShapes, l as groupShapes, n as updateImageDimensions };
+export { d as calculate, f as generateValidationMessage, c as getAllShapes, o as getUpdatedPolygon, i as getUpdatedRectangle, s as getUpdatedShapes, l as groupShapes, u as isPointInsidePolygon, n as updateImageDimensions };