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

package/dist/author/hotspot-container.js

@@ -4,7 +4,7 @@ import { PolygonButton as n } from "./buttons/polygon.js";
 import { RectangleButton as r } from "./buttons/rectangle.js";
 import { SUPPORTED_SHAPES as i } from "./shapes/utils.js";
 import { getAllShapes as a, groupShapes as o } from "./utils.js";
-import s from "./hotspot-drawable.js";
+import { Drawable as s } from "./hotspot-drawable.js";
 import c from "./upload-control.js";
 import { Component as l } from "react";
 import u from "prop-types";
@@ -207,4 +207,4 @@ S.propTypes = {
 	hasErrors: u.bool
 }, S.defaultProps = { strokeWidth: 5 };
 //#endregion
-export { S as default };
+export { S as Container, S as default };

package/dist/author/hotspot-drawable.js

@@ -309,4 +309,4 @@ k.propTypes = {
 	preserveAspectRatioEnabled: f.bool
 };
 //#endregion
-export { k as default };
+export { k as Drawable, k as default };

package/dist/author/hotspot-polygon.js

@@ -87,7 +87,7 @@ var d = u(a, "Circle"), f = u(s, "Line"), p = u(o, "Group"), m = "#00BFFF", h =
 		this.setState({
 			points: a,
 			...this.getOffset(a),
-			isDragging: t ? !1 : this.state.isDragging
+			isDragging: !t && this.state.isDragging
 		}), t && n(r, { points: a });
 	};
 	handleOnDragVertex = (e, t, n) => {
@@ -98,7 +98,7 @@ var d = u(a, "Circle"), f = u(s, "Line"), p = u(o, "Group"), m = "#00BFFF", h =
 		this.setState({
 			points: o,
 			...this.getOffset(o),
-			isDragging: n ? !1 : this.state.isDragging
+			isDragging: !n && this.state.isDragging
 		}), n && r(i, { points: o });
 	};
 	onDragStart = () => {

package/dist/author/index.d.ts

@@ -48,5 +48,6 @@ export default class HotspotConfigure extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _render(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,4 +1,4 @@
-import e from "./root.js";
+import { Root as e } from "./root.js";
 import t from "./defaults.js";
 import n from "react";
 import { createRoot as r } from "react-dom/client";
@@ -135,8 +135,11 @@ var u = i("hotspot:configure"), d = class i extends HTMLElement {
 		});
 		this._root ||= r(this), this._root.render(t);
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

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

@@ -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 };