@pie-element/graphing-solution-set 6.1.2-next.0 → 6.1.2-next.10

package/dist/author/configure.js

@@ -1,5 +1,5 @@
-import e from "./graphing-config.js";
-import t from "./correct-response.js";
+import { GraphingConfig as e } from "./graphing-config.js";
+import { CorrectResponse as t } from "./correct-response.js";
 import n from "react";
 import r from "prop-types";
 import { styled as i } from "@mui/material/styles";
@@ -187,4 +187,4 @@ var y = i(s)(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { x as default };
+export { x as Configure, x as default };

package/dist/author/correct-response.js

@@ -1,46 +1,46 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/set.js";
-import { checkIfLinesAreAdded as t, findSectionsInSolutionSet as n, pointInsidePolygon as r } from "./utils.js";
-import * as i from "react";
-import a from "prop-types";
-import { styled as o } from "@mui/material/styles";
-import { GraphContainer as s } from "@pie-lib/graphing-solution-set";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { AlertDialog as u } from "@pie-lib/config-ui";
+import { checkIfLinesAreAdded as e, findSectionsInSolutionSet as t, pointInsidePolygon as n } from "./utils.js";
+import * as r from "react";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { GraphContainer as o } from "@pie-lib/graphing-solution-set";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AlertDialog as l } from "@pie-lib/config-ui";
+import { set as u } from "@pie-element/shared-lodash";
 import { RadioGroup as d, Typography as f } from "@mui/material";
 import p from "@mui/material/Radio";
 import m from "@mui/material/FormControlLabel";
 //#region src/author/correct-response.tsx
-var h = o(f)(({ theme: e }) => ({
+var h = a(f)(({ theme: e }) => ({
 	marginTop: e.spacing(1.5),
 	marginBottom: e.spacing(1)
-})), g = o(m)({
+})), g = a(m)({
 	height: "20px",
 	width: "fit-content",
 	padding: ".5rem 0"
-}), _ = o(p)({ color: "#000000 !important" }), v = o("div")(({ theme: e }) => ({
+}), _ = a(p)({ color: "#000000 !important" }), v = a("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), y = class extends i.Component {
+})), y = class extends r.Component {
 	static propTypes = {
-		errors: a.object,
-		model: a.object.isRequired,
-		onChange: a.func.isRequired
+		errors: i.object,
+		model: i.object.isRequired,
+		onChange: i.func.isRequired
 	};
 	state = { dialog: { open: !1 } };
 	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
-	changeMarks = (t) => {
-		let { model: n, onChange: r } = this.props, { gssLineData: i } = n;
-		i.selectedTool === "lineA" && t.length > 0 && (t[0].fill = i.lineA.lineType), i.selectedTool === "lineB" && t.length > 1 && (t[1].fill = i.lineB.lineType), t.length === 0 && (i.selectedTool = "lineA", e(n, "gssLineData", i)), e(n, "answers.correctAnswer.marks", t), r(n);
+	changeMarks = (e) => {
+		let { model: t, onChange: n } = this.props, { gssLineData: r } = t;
+		r.selectedTool === "lineA" && e.length > 0 && (e[0].fill = r.lineA.lineType), r.selectedTool === "lineB" && e.length > 1 && (e[1].fill = r.lineB.lineType), e.length === 0 && (r.selectedTool = "lineA", u(t, "gssLineData", r)), u(t, "answers.correctAnswer.marks", e), n(t);
 	};
 	onResetClick = () => {
-		let { model: t, onChange: n } = this.props, { gssLineData: r, answers: i } = t;
+		let { model: e, onChange: t } = this.props, { gssLineData: n, answers: r } = e;
 		this.setState({ dialog: {
 			open: !0,
 			title: "Warning",
 			text: "This will remove all the elements added on the graph and reset graph to original state. Are you sure you want to continue?",
 			onConfirm: () => {
-				i.correctAnswer.marks = [], r.selectedTool = "lineA", r.lineA.lineType = "Solid", r.lineB && (r.lineB.lineType = "Solid"), e(t, "answers", i), e(t, "gssLineData", r), n(t), this.handleAlertDialog(!1);
+				r.correctAnswer.marks = [], n.selectedTool = "lineA", n.lineA.lineType = "Solid", n.lineB && (n.lineB.lineType = "Solid"), u(e, "answers", r), u(e, "gssLineData", n), t(e), this.handleAlertDialog(!1);
 			},
 			onClose: () => this.handleAlertDialog(!1)
 		} });
@@ -57,69 +57,69 @@ var h = o(f)(({ theme: e }) => ({
 			onClose: () => this.handleAlertDialog(!1)
 		} }) : this.changeLine(e, t);
 	};
-	changeLine = (t, n) => {
-		let { model: r, onChange: i } = this.props, { answers: a } = r, o = r.gssLineData;
-		a.correctAnswer.marks = a.correctAnswer.marks.filter((e) => e.type !== "polygon"), Number.parseInt(n) === 1 ? (delete o.lineB, a.correctAnswer.marks.length > 1 && a.correctAnswer.marks.pop(), o.numberOfLines = 1, o.selectedTool = "lineA") : (o.numberOfLines = 2, a.correctAnswer.marks.length > 0 && (o.selectedTool = "lineB"), o.lineB = { lineType: "Solid" }), e(r, "answers", a), e(r, "gssLineData", o), i(r);
+	changeLine = (e, t) => {
+		let { model: n, onChange: r } = this.props, { answers: i } = n, a = n.gssLineData;
+		i.correctAnswer.marks = i.correctAnswer.marks.filter((e) => e.type !== "polygon"), Number.parseInt(t) === 1 ? (delete a.lineB, i.correctAnswer.marks.length > 1 && i.correctAnswer.marks.pop(), a.numberOfLines = 1, a.selectedTool = "lineA") : (a.numberOfLines = 2, i.correctAnswer.marks.length > 0 && (a.selectedTool = "lineB"), a.lineB = { lineType: "Solid" }), u(n, "answers", i), u(n, "gssLineData", a), r(n);
 	};
-	onSolutionSetSelected = (t) => {
-		let { model: n, onChange: i } = this.props, { answers: a, gssLineData: o } = n;
-		for (let e of o.sections) if (r(t, e)) {
-			let t = {
-				points: e,
+	onSolutionSetSelected = (e) => {
+		let { model: t, onChange: r } = this.props, { answers: i, gssLineData: a } = t;
+		for (let t of a.sections) if (n(e, t)) {
+			let e = {
+				points: t,
 				building: !1,
 				type: "polygon",
 				closed: !0,
 				isSolution: !0
 			};
-			a.correctAnswer.marks = a.correctAnswer.marks.filter((e) => e.type !== "polygon"), a.correctAnswer.marks.push(t);
+			i.correctAnswer.marks = i.correctAnswer.marks.filter((e) => e.type !== "polygon"), i.correctAnswer.marks.push(e);
 			break;
 		}
-		e(n, "answers", a), i(n);
+		u(t, "answers", i), r(t);
 	};
-	onChangeGssLineData = (e, r) => {
+	onChangeGssLineData = (n, r) => {
 		let { model: i } = this.props, { answers: a, domain: o, range: s } = i;
-		if (e.selectedTool === "solutionSet") {
+		if (n.selectedTool === "solutionSet") {
 			let i = a.correctAnswer.marks.filter((e) => e.type !== "polygon");
-			if (!t(e, i)) e.selectedTool = r, this.setState({ dialog: {
+			if (!e(n, i)) n.selectedTool = r, this.setState({ dialog: {
 				open: !0,
 				title: "Warning",
 				text: "Please define the line(s) and then select a solution set for the item.",
 				onConfirm: () => this.handleAlertDialog(!1)
 			} });
 			else {
-				let t = a.correctAnswer.marks.filter((e) => e.type !== "polygon");
-				e = n(e, t, o, s);
+				let e = a.correctAnswer.marks.filter((e) => e.type !== "polygon");
+				n = t(n, e, o, s);
 			}
-			this.handleGssLineDataChange(e, a);
+			this.handleGssLineDataChange(n, a);
 		} else {
-			let t = a.correctAnswer.marks.filter((e) => e.type === "polygon");
-			r === "solutionSet" && t.length > 0 ? this.setState({ dialog: {
+			let e = a.correctAnswer.marks.filter((e) => e.type === "polygon");
+			r === "solutionSet" && e.length > 0 ? this.setState({ dialog: {
 				open: !0,
 				title: "Warning",
 				text: "Changing a line after adding a solution set will clear your selected solution set. Click 'Clear Solution Set' to change the line. Otherwise, click 'Cancel'.",
 				onConfirm: () => {
-					a.correctAnswer.marks = a.correctAnswer.marks.filter((e) => e.type !== "polygon"), this.handleGssLineDataChange(e, a), this.handleAlertDialog(!1);
+					a.correctAnswer.marks = a.correctAnswer.marks.filter((e) => e.type !== "polygon"), this.handleGssLineDataChange(n, a), this.handleAlertDialog(!1);
 				},
 				onConfirmText: "CLEAR SOLUTION SET",
 				onClose: () => {
-					e.selectedTool = r, this.handleGssLineDataChange(e, a), this.handleAlertDialog(!1);
+					n.selectedTool = r, this.handleGssLineDataChange(n, a), this.handleAlertDialog(!1);
 				}
-			} }) : this.handleGssLineDataChange(e, a);
+			} }) : this.handleGssLineDataChange(n, a);
 		}
 	};
-	handleGssLineDataChange = (t, n) => {
-		let { model: r, onChange: i } = this.props;
-		n.correctAnswer.marks.length > 0 && n.correctAnswer.marks[0] && t.lineA && (n.correctAnswer.marks[0].fill = t.lineA.lineType), n.correctAnswer.marks.length > 1 && n.correctAnswer.marks[1] && t.lineB && (n.correctAnswer.marks[1].fill = t.lineB.lineType), (t.selectedTool === "lineB" && n.correctAnswer.marks.length === 0 || t.selectedTool === "lineB" && n.correctAnswer.marks[0].building) && (this.setState({ dialog: {
+	handleGssLineDataChange = (e, t) => {
+		let { model: n, onChange: r } = this.props;
+		t.correctAnswer.marks.length > 0 && t.correctAnswer.marks[0] && e.lineA && (t.correctAnswer.marks[0].fill = e.lineA.lineType), t.correctAnswer.marks.length > 1 && t.correctAnswer.marks[1] && e.lineB && (t.correctAnswer.marks[1].fill = e.lineB.lineType), (e.selectedTool === "lineB" && t.correctAnswer.marks.length === 0 || e.selectedTool === "lineB" && t.correctAnswer.marks[0].building) && (this.setState({ dialog: {
 			open: !0,
 			title: "Warning",
 			text: "Please add Line A to the graph before adding Line B",
 			onConfirm: () => this.handleAlertDialog(!1)
-		} }), t.selectedTool = "lineA"), t.selectedTool === "lineA" && n.correctAnswer.marks.length > 1 && n.correctAnswer.marks[1].building && (this.setState({ dialog: {
+		} }), e.selectedTool = "lineA"), e.selectedTool === "lineA" && t.correctAnswer.marks.length > 1 && t.correctAnswer.marks[1].building && (this.setState({ dialog: {
 			open: !0,
 			title: "Warning",
 			text: "Please add Line B to the graph before switching to Line A",
 			onConfirm: () => this.handleAlertDialog(!1)
-		} }), t.selectedTool = "lineB"), e(r, "gssLineData", t), e(r, "answers", n), i(r);
+		} }), e.selectedTool = "lineB"), u(n, "gssLineData", e), u(n, "answers", t), r(n);
 	};
 	updateModel = (e) => {
 		let { model: t, onChange: n } = this.props;
@@ -129,44 +129,44 @@ var h = o(f)(({ theme: e }) => ({
 		});
 	};
 	render() {
-		let { errors: e, model: t, mathMlOptions: n = {} } = this.props, { dialog: r } = this.state, { gssLineData: a = {
+		let { errors: e, model: t, mathMlOptions: n = {} } = this.props, { dialog: i } = this.state, { gssLineData: a = {
 			numberOfLines: 1,
 			selectedTool: "lineA",
 			lineA: { lineType: "Solid" }
-		}, arrows: o, coordinatesOnHover: p, domain: m, graph: y = {}, labels: b, labelsEnabled: x, range: S, title: C, titleEnabled: w, answers: T } = t || {}, { correctAnswerErrors: E = "" } = e || {};
-		return /* @__PURE__ */ l("div", { children: [
-			/* @__PURE__ */ c(f, {
+		}, arrows: u, coordinatesOnHover: p, domain: m, graph: y = {}, labels: b, labelsEnabled: x, range: S, title: C, titleEnabled: w, answers: T } = t || {}, { correctAnswerErrors: E = "" } = e || {};
+		return /* @__PURE__ */ c("div", { children: [
+			/* @__PURE__ */ s(f, {
 				component: "div",
 				variant: "h6",
 				children: "Define Line Type(s) and Correct Response"
 			}),
-			/* @__PURE__ */ c(h, {
+			/* @__PURE__ */ s(h, {
 				component: "div",
 				variant: "body1",
 				children: "Use this interface to choose how many lines students will be able to draw, and to define the correct answer."
 			}),
-			/* @__PURE__ */ c(h, {
+			/* @__PURE__ */ s(h, {
 				component: "div",
 				variant: "body1",
 				children: "Choose Number of Lines"
 			}),
-			/* @__PURE__ */ l(d, {
+			/* @__PURE__ */ c(d, {
 				name: "numberOfLines",
 				value: a.numberOfLines,
 				onChange: this.changeNumberOfLines,
-				children: [/* @__PURE__ */ c(g, {
+				children: [/* @__PURE__ */ s(g, {
 					value: "1",
-					control: /* @__PURE__ */ c(_, { checked: a.numberOfLines === 1 }),
+					control: /* @__PURE__ */ s(_, { checked: a.numberOfLines === 1 }),
 					label: "One"
-				}), /* @__PURE__ */ c(g, {
+				}), /* @__PURE__ */ s(g, {
 					value: "2",
-					control: /* @__PURE__ */ c(_, { checked: a.numberOfLines === 2 }),
+					control: /* @__PURE__ */ s(_, { checked: a.numberOfLines === 2 }),
 					label: "Two"
 				})]
 			}),
-			/* @__PURE__ */ l(i.Fragment, { children: [/* @__PURE__ */ c(s, {
+			/* @__PURE__ */ c(r.Fragment, { children: [/* @__PURE__ */ s(o, {
 				style: E.correctAnswer && { border: "2px solid red" },
-				axesSettings: { includeArrows: o },
+				axesSettings: { includeArrows: u },
 				backgroundMarks: [],
 				coordinatesOnHover: p,
 				disabledLabels: !0,
@@ -190,17 +190,17 @@ var h = o(f)(({ theme: e }) => ({
 				onSolutionSetSelected: this.onSolutionSetSelected,
 				toolbarTools: ["line", "polygon"],
 				mathMlOptions: n
-			}), E.correctAnswer && /* @__PURE__ */ c(v, { children: E.correctAnswer })] }),
-			/* @__PURE__ */ c(u, {
-				open: r.open,
-				title: r.title,
-				text: r.text,
-				onClose: r.onClose,
-				onConfirm: r.onConfirm,
-				onConfirmText: r.onConfirmText ? r.onConfirmText : "OK"
+			}), E.correctAnswer && /* @__PURE__ */ s(v, { children: E.correctAnswer })] }),
+			/* @__PURE__ */ s(l, {
+				open: i.open,
+				title: i.title,
+				text: i.text,
+				onClose: i.onClose,
+				onConfirm: i.onConfirm,
+				onConfirmText: i.onConfirmText ? i.onConfirmText : "OK"
 			})
 		] });
 	}
 };
 //#endregion
-export { y as default };
+export { y as CorrectResponse, y as default };

package/dist/author/graphing-config.js

@@ -1,57 +1,56 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import { applyConstraints as n, filterPlotableMarks as r, getGridValues as i, getLabelValues as a } from "./utils.js";
-import * as o from "react";
-import s from "prop-types";
-import { styled as c } from "@mui/material/styles";
-import { GraphContainer as l, GridSetup as u } from "@pie-lib/graphing-solution-set";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { AlertDialog as p } from "@pie-lib/config-ui";
+import { applyConstraints as e, filterPlotableMarks as t, getGridValues as n, getLabelValues as r } from "./utils.js";
+import * as i from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { GraphContainer as s, GridSetup as c } from "@pie-lib/graphing-solution-set";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { AlertDialog as d } from "@pie-lib/config-ui";
+import { cloneDeep as f, isEqual as p } from "@pie-element/shared-lodash";
 import { MenuItem as m, OutlinedInput as h, Select as g, Typography as _ } from "@mui/material";
 //#region src/author/graphing-config.tsx
-var v = c("div")(({ theme: e }) => ({
+var v = o("div")(({ theme: e }) => ({
 	display: "flex",
 	flexWrap: "wrap",
 	marginBottom: e.spacing(2.5)
-})), y = c("div")(({ theme: e }) => ({
+})), y = o("div")(({ theme: e }) => ({
 	display: "flex",
 	flexDirection: "column",
 	marginRight: e.spacing(3),
 	marginBottom: e.spacing(2.5)
-})), b = c("div")({
+})), b = o("div")({
 	display: "flex",
 	flexDirection: "column"
-}), x = c(_)(({ theme: e }) => ({
+}), x = o(_)(({ theme: e }) => ({
 	marginTop: e.spacing(1.5),
 	marginBottom: e.spacing(1)
-})), S = c("div")(({ theme: e }) => ({
+})), S = o("div")(({ theme: e }) => ({
 	display: "flex",
 	flexWrap: "wrap",
 	alignItems: "center",
 	width: "100%",
 	marginBottom: e.spacing(2.5)
-})), C = c(_)(({ theme: e }) => ({ padding: `0 ${e.spacing(1)}` })), w = c(g)({ flex: "1" }), T = class extends o.Component {
+})), C = o(_)(({ theme: e }) => ({ padding: `0 ${e.spacing(1)}` })), w = o(g)({ flex: "1" }), T = class extends i.Component {
 	static propTypes = {
-		availableTools: s.array,
-		authoring: s.object,
-		dimensionsEnabled: s.bool,
-		graphDimensions: s.object,
-		gridConfigurations: s.array,
-		labelsPlaceholders: s.object,
-		model: s.object.isRequired,
-		onChange: s.func.isRequired,
-		showLabels: s.bool,
-		showTitle: s.bool,
-		titlePlaceholder: s.string
+		availableTools: a.array,
+		authoring: a.object,
+		dimensionsEnabled: a.bool,
+		graphDimensions: a.object,
+		gridConfigurations: a.array,
+		labelsPlaceholders: a.object,
+		model: a.object.isRequired,
+		onChange: a.func.isRequired,
+		showLabels: a.bool,
+		showTitle: a.bool,
+		titlePlaceholder: a.string
 	};
 	constructor(e) {
 		super(e);
-		let { domain: t, range: n, graph: r } = e.model || {}, o = {
-			domain: i(t, r.width, !0),
-			range: i(n, r.height, !0)
+		let { domain: t, range: i, graph: a } = e.model || {}, o = {
+			domain: n(t, a.width, !0),
+			range: n(i, a.height, !0)
 		}, s = {
-			domain: a(t.step),
-			range: a(n.step)
+			domain: r(t.step),
+			range: r(i.step)
 		};
 		this.state = {
 			gridValues: o,
@@ -59,7 +58,7 @@ var v = c("div")(({ theme: e }) => ({
 			showPixelGuides: !1,
 			dialog: { isOpened: !1 },
 			domain: { ...t },
-			range: { ...n }
+			range: { ...i }
 		};
 	}
 	changeLabels = (e) => {
@@ -76,46 +75,46 @@ var v = c("div")(({ theme: e }) => ({
 			title: e
 		});
 	};
-	onConfigChange = (i, a) => {
-		let { model: o, onChange: s } = this.props, { defaultGridConfiguration: c = 0 } = o, { gridValues: l, labelValues: u, domain: d, range: f } = this.state, p = {
-			...o,
-			...i
-		}, { answers: m, domain: h, includeAxes: g = !0, graph: _, range: v, standardGrid: y } = p, b = {
+	onConfigChange = (n, r) => {
+		let { model: i, onChange: a } = this.props, { defaultGridConfiguration: o = 0 } = i, { gridValues: s, labelValues: c, domain: l, range: u } = this.state, d = {
+			...i,
+			...n
+		}, { answers: m, domain: h, includeAxes: g = !0, graph: _, range: v, standardGrid: y } = d, b = {
 			domain: [],
 			range: []
 		}, x = {
 			domain: [],
 			range: []
-		}, S = a >= 0 ? a : c;
+		}, S = r >= 0 ? r : o;
 		if (g) {
-			let e = n(h, _.width, l.domain, u.domain);
-			b.domain = e.gridValues || [], x.domain = e.labelValues || [];
+			let t = e(h, _.width, s.domain, c.domain);
+			b.domain = t.gridValues || [], x.domain = t.labelValues || [];
 		}
 		if (y) b.range = b.domain, x.range = x.domain, v.step = h.step, v.labelStep = h.labelStep;
 		else if (g) {
-			let e = n(v, _.height, l.range, u.range);
-			b.range = e.gridValues || [], x.range = e.labelValues || [];
+			let t = e(v, _.height, s.range, c.range);
+			b.range = t.gridValues || [], x.range = t.labelValues || [];
 		}
-		let C = e(m);
+		let C = f(m);
 		C.correctAnswer.marks = m.correctAnswer.marks.filter((e) => e.type !== "polygon");
-		let w = r(h, v, C);
-		if (!t(C, w)) {
+		let w = t(h, v, C);
+		if (!p(C, w)) {
 			this.setState({ dialog: {
 				isOpened: !0,
-				onClose: () => this.setState({ dialog: { isOpened: !1 } }, s({
-					...o,
-					domain: d,
-					range: f
+				onClose: () => this.setState({ dialog: { isOpened: !1 } }, a({
+					...i,
+					domain: l,
+					range: u
 				})),
 				onConfirm: () => {
-					p.gssLineData.sections = [], p.gssLineData.selectedTool = "lineA", this.setState({
+					d.gssLineData.sections = [], d.gssLineData.selectedTool = "lineA", this.setState({
 						gridValues: b,
 						labelValues: x,
 						dialog: { isOpened: !1 },
 						domain: { ...h },
 						range: { ...v }
-					}, s({
-						...p,
+					}, a({
+						...d,
 						answers: w,
 						defaultGridConfiguration: S
 					}));
@@ -128,8 +127,8 @@ var v = c("div")(({ theme: e }) => ({
 			labelValues: x,
 			domain: { ...h },
 			range: { ...v }
-		}), s({
-			...p,
+		}), a({
+			...d,
 			defaultGridConfiguration: S
 		});
 	};
@@ -142,7 +141,7 @@ var v = c("div")(({ theme: e }) => ({
 		this.onConfigChange(t?.[n] || {}, n);
 	};
 	render() {
-		let { authoring: e = {}, gridConfigurations: t = [], graphDimensions: n = {}, labelsPlaceholders: r, model: i, showLabels: a, dimensionsEnabled: o, showTitle: s, titlePlaceholder: c, mathMlOptions: g = {} } = this.props, { arrows: T, coordinatesOnHover: E, defaultGridConfiguration: D, domain: O, labels: k, range: A, standardGrid: j, title: M } = i || {}, N = (i || {}).graph || {}, { min: P, max: F, step: I } = n || {}, { dialog: L = {}, gridValues: R, labelValues: z, showPixelGuides: B } = this.state, V = {
+		let { authoring: e = {}, gridConfigurations: t = [], graphDimensions: n = {}, labelsPlaceholders: r, model: i, showLabels: a, dimensionsEnabled: o, showTitle: f, titlePlaceholder: p, mathMlOptions: g = {} } = this.props, { arrows: T, coordinatesOnHover: E, defaultGridConfiguration: D, domain: O, labels: k, range: A, standardGrid: j, title: M } = i || {}, N = (i || {}).graph || {}, { min: P, max: F, step: I } = n || {}, { dialog: L = {}, gridValues: R, labelValues: z, showPixelGuides: B } = this.state, V = {
 			min: Math.max(150, P),
 			max: Math.min(800, F),
 			step: I >= 1 ? Math.min(200, I) : 20
@@ -156,13 +155,13 @@ var v = c("div")(({ theme: e }) => ({
 			standardGridEnabled: e.standardGridEnabled,
 			step: e.step
 		}, U = e.enabled && Object.values(H).some((e) => typeof e == "object" ? e.enabled : e);
-		return /* @__PURE__ */ f(v, { children: [
-			/* @__PURE__ */ f(y, { children: [t && t.length ? /* @__PURE__ */ f(S, { children: [/* @__PURE__ */ d(C, {
+		return /* @__PURE__ */ u(v, { children: [
+			/* @__PURE__ */ u(y, { children: [t && t.length ? /* @__PURE__ */ u(S, { children: [/* @__PURE__ */ l(C, {
 				component: "div",
 				variant: "h6",
 				children: "Grid Configuration"
-			}), /* @__PURE__ */ d(w, {
-				input: /* @__PURE__ */ d(h, { labelWidth: 10 }),
+			}), /* @__PURE__ */ l(w, {
+				input: /* @__PURE__ */ l(h, { labelWidth: 10 }),
 				displayEmpty: !0,
 				onChange: this.changeGridConfiguration,
 				value: D,
@@ -170,11 +169,11 @@ var v = c("div")(({ theme: e }) => ({
 					enter: 225,
 					exit: 195
 				} },
-				children: (t || []).map((e, t) => /* @__PURE__ */ d(m, {
+				children: (t || []).map((e, t) => /* @__PURE__ */ l(m, {
 					value: t,
 					children: e.label
 				}, t))
-			})] }) : null, U && /* @__PURE__ */ d(u, {
+			})] }) : null, U && /* @__PURE__ */ l(c, {
 				displayedFields: H,
 				domain: O,
 				gridValues: R,
@@ -187,18 +186,18 @@ var v = c("div")(({ theme: e }) => ({
 				onChange: this.onConfigChange,
 				onChangeView: this.onChangeView
 			})] }),
-			/* @__PURE__ */ f(b, { children: [
-				/* @__PURE__ */ d(_, {
+			/* @__PURE__ */ u(b, { children: [
+				/* @__PURE__ */ l(_, {
 					component: "div",
 					variant: "h6",
 					children: "Define Graph Attributes"
 				}),
-				/* @__PURE__ */ d(x, {
+				/* @__PURE__ */ l(x, {
 					component: "div",
 					variant: "body1",
 					children: "Use this interface to add/edit a title and/or labels"
 				}),
-				/* @__PURE__ */ d(l, {
+				/* @__PURE__ */ l(s, {
 					axesSettings: { includeArrows: T },
 					backgroundMarks: [],
 					coordinatesOnHover: E,
@@ -213,18 +212,18 @@ var v = c("div")(({ theme: e }) => ({
 					range: A,
 					showLabels: a,
 					showPixelGuides: B,
-					showTitle: s,
+					showTitle: f,
 					size: {
 						width: N.width,
 						height: N.height
 					},
 					title: M,
-					titlePlaceholder: c,
+					titlePlaceholder: p,
 					disableToolbar: !0,
 					mathMlOptions: g
 				}, "graphing-config")
 			] }, "graph"),
-			/* @__PURE__ */ d(p, {
+			/* @__PURE__ */ l(d, {
 				open: L.isOpened,
 				title: "Warning",
 				text: "This change would make it impossible for students to plot one or more graph objects in the current correct answers. If you proceed, all such graph objects will be removed from the correct answers.",
@@ -235,4 +234,4 @@ var v = c("div")(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { T as default };
+export { T as GraphingConfig, T as default };

package/dist/author/index.d.ts

@@ -58,5 +58,6 @@ export default class GraphLinesConfigure 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 "./configure.js";
+import { Configure as e } from "./configure.js";
 import t from "./defaults.js";
 import n from "react";
 import { createRoot as r } from "react-dom/client";
@@ -79,8 +79,11 @@ var d = a("pie-elements:graphing-solution-set:configure"), f = (e) => Object.key
 			});
 		}
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/utils.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import { isEqual as e } from "@pie-element/shared-lodash";
 //#region src/author/utils.ts
 var t = [
 	.01,
@@ -471,4 +471,4 @@ var t = [
 	else return !t[1].building;
 };
 //#endregion
-export { o as applyConstraints, E as checkIfLinesAreAdded, c as filterPlotableMarks, w as findSectionsInSolutionSet, i as getGridValues, a as getLabelValues, T as pointInsidePolygon };
+export { r as VALID_LABEL_VALUES, o as applyConstraints, E as checkIfLinesAreAdded, c as filterPlotableMarks, w as findSectionsInSolutionSet, i as getGridValues, a as getLabelValues, T as pointInsidePolygon };