@pie-element/graphing-solution-set 6.4.0-beta.6 → 7.0.0-next.20261002094057

package/dist/author/graphing-config.js

@@ -0,0 +1,237 @@
+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 = o("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	marginBottom: e.spacing(2.5)
+})), y = o("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	marginRight: e.spacing(3),
+	marginBottom: e.spacing(2.5)
+})), b = o("div")({
+	display: "flex",
+	flexDirection: "column"
+}), x = o(_)(({ theme: e }) => ({
+	marginTop: e.spacing(1.5),
+	marginBottom: e.spacing(1)
+})), S = o("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	width: "100%",
+	marginBottom: e.spacing(2.5)
+})), C = o(_)(({ theme: e }) => ({ padding: `0 ${e.spacing(1)}` })), w = o(g)({ flex: "1" }), T = class extends i.Component {
+	static propTypes = {
+		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: i, graph: a } = e.model || {}, o = {
+			domain: n(t, a.width, !0),
+			range: n(i, a.height, !0)
+		}, s = {
+			domain: r(t.step),
+			range: r(i.step)
+		};
+		this.state = {
+			gridValues: o,
+			labelValues: s,
+			showPixelGuides: !1,
+			dialog: { isOpened: !1 },
+			domain: { ...t },
+			range: { ...i }
+		};
+	}
+	changeLabels = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({
+			...t,
+			labels: e
+		});
+	};
+	changeTitle = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({
+			...t,
+			title: e
+		});
+	};
+	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 = r >= 0 ? r : o;
+		if (g) {
+			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 t = e(v, _.height, s.range, c.range);
+			b.range = t.gridValues || [], x.range = t.labelValues || [];
+		}
+		let C = f(m);
+		C.correctAnswer.marks = m.correctAnswer.marks.filter((e) => e.type !== "polygon");
+		let w = t(h, v, C);
+		if (!p(C, w)) {
+			this.setState({ dialog: {
+				isOpened: !0,
+				onClose: () => this.setState({ dialog: { isOpened: !1 } }, a({
+					...i,
+					domain: l,
+					range: u
+				})),
+				onConfirm: () => {
+					d.gssLineData.sections = [], d.gssLineData.selectedTool = "lineA", this.setState({
+						gridValues: b,
+						labelValues: x,
+						dialog: { isOpened: !1 },
+						domain: { ...h },
+						range: { ...v }
+					}, a({
+						...d,
+						answers: w,
+						defaultGridConfiguration: S
+					}));
+				}
+			} });
+			return;
+		}
+		this.setState({
+			gridValues: b,
+			labelValues: x,
+			domain: { ...h },
+			range: { ...v }
+		}), a({
+			...d,
+			defaultGridConfiguration: S
+		});
+	};
+	onChangeView = (e, t) => {
+		let { graphDimensions: { enabled: n } = {} } = this.props;
+		n && this.setState({ showPixelGuides: t });
+	};
+	changeGridConfiguration = (e) => {
+		let { gridConfigurations: t } = this.props, { value: n } = e.target;
+		this.onConfigChange(t?.[n] || {}, n);
+	};
+	render() {
+		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
+		}, H = {
+			axisLabel: e.axisLabel,
+			dimensionsEnabled: o,
+			includeAxesEnabled: !1,
+			labelStep: e.labelStep,
+			min: e.min,
+			max: e.max,
+			standardGridEnabled: e.standardGridEnabled,
+			step: e.step
+		}, U = e.enabled && Object.values(H).some((e) => typeof e == "object" ? e.enabled : e);
+		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__ */ l(w, {
+				input: /* @__PURE__ */ l(h, { labelWidth: 10 }),
+				displayEmpty: !0,
+				onChange: this.changeGridConfiguration,
+				value: D,
+				MenuProps: { transitionDuration: {
+					enter: 225,
+					exit: 195
+				} },
+				children: (t || []).map((e, t) => /* @__PURE__ */ l(m, {
+					value: t,
+					children: e.label
+				}, t))
+			})] }) : null, U && /* @__PURE__ */ l(c, {
+				displayedFields: H,
+				domain: O,
+				gridValues: R,
+				includeAxes: !0,
+				labelValues: z,
+				range: A,
+				size: N,
+				sizeConstraints: V,
+				standardGrid: j,
+				onChange: this.onConfigChange,
+				onChangeView: this.onChangeView
+			})] }),
+			/* @__PURE__ */ u(b, { children: [
+				/* @__PURE__ */ l(_, {
+					component: "div",
+					variant: "h6",
+					children: "Define Graph Attributes"
+				}),
+				/* @__PURE__ */ l(x, {
+					component: "div",
+					variant: "body1",
+					children: "Use this interface to add/edit a title and/or labels"
+				}),
+				/* @__PURE__ */ l(s, {
+					axesSettings: { includeArrows: T },
+					backgroundMarks: [],
+					coordinatesOnHover: E,
+					collapsibleToolbar: !0,
+					collapsibleToolbarTitle: "Add Background Shapes to Graph",
+					domain: O,
+					labels: k,
+					labelsPlaceholders: r,
+					marks: [],
+					onChangeLabels: this.changeLabels,
+					onChangeTitle: this.changeTitle,
+					range: A,
+					showLabels: a,
+					showPixelGuides: B,
+					showTitle: f,
+					size: {
+						width: N.width,
+						height: N.height
+					},
+					title: M,
+					titlePlaceholder: p,
+					disableToolbar: !0,
+					mathMlOptions: g
+				}, "graphing-config")
+			] }, "graph"),
+			/* @__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.",
+				onClose: L.onClose,
+				onConfirm: L.onConfirm
+			})
+		] });
+	}
+};
+//#endregion
+export { T as GraphingConfig, T as default };

package/dist/author/index.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @synced-from pie-elements/packages/graphing-solution-set/configure/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 default class GraphLinesConfigure extends HTMLElement {
+    static createDefaultModel: (model?: {}) => {
+        answers: any;
+        range: {};
+        graph: {};
+        arrows: {
+            left: boolean;
+            right: boolean;
+            up: boolean;
+            down: boolean;
+        };
+        marks: never[];
+        defaultGridConfiguration: number;
+        domain: {
+            min: number;
+            max: number;
+            step: number;
+            labelStep: number;
+            axisLabel: string;
+        };
+        gssLineData: {
+            numberOfLines: number;
+            selectedTool: string;
+            sections: never[];
+            lineA: {
+                lineType: string;
+            };
+        };
+        includeAxes: boolean;
+        labels: {};
+        labelsEnabled: boolean;
+        padding: boolean;
+        prompt: string;
+        rationale: string;
+        standardGrid: boolean;
+        title: string;
+        coordinatesOnHover: boolean;
+        promptEnabled: boolean;
+        rationaleEnabled: boolean;
+        teacherInstructionsEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+    };
+    constructor();
+    set model(m: any);
+    set configuration(c: any);
+    onModelChanged: any;
+    onConfigurationChanged: any;
+    insertImage: any;
+    onDeleteImage: any;
+    insertSound(handler: any): void;
+    onDeleteSound(src: any, done: any): void;
+    _render(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/author/index.js

@@ -0,0 +1,95 @@
+import { Configure as e } from "./configure.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+import a from "debug";
+import { DeleteImageEvent as o, DeleteSoundEvent as s, InsertImageEvent as c, InsertSoundEvent as l, ModelUpdatedEvent as u } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var d = a("pie-elements:graphing-solution-set:configure"), f = (e) => Object.keys(e || {}).sort().reduce((t, n) => (n !== "correctAnswer" && (t[n] = e[n]), t), {}), p = class a extends HTMLElement {
+	static createDefaultModel = (e = {}) => {
+		let n = {
+			...t.model,
+			...e
+		}, { answers: r = {}, domain: i = {}, graph: a = {}, range: o = {}, standardGrid: s } = n;
+		return {
+			...n,
+			answers: r && r.correctAnswer && {
+				correctAnswer: r.correctAnswer,
+				...f(r)
+			} || r,
+			range: s && {
+				...o,
+				min: i.min,
+				max: i.max,
+				step: i.step,
+				labelStep: i.labelStep
+			} || o,
+			graph: s && {
+				...a,
+				height: a.width
+			} || a
+		};
+	};
+	constructor() {
+		super(), this._root = null, this._model = a.createDefaultModel(), this._configuration = t.configuration;
+	}
+	set model(e) {
+		this._model = a.createDefaultModel(e), this._render();
+	}
+	set configuration(e) {
+		this._configuration = {
+			...t.configuration,
+			...e
+		};
+		let { language: n, languageChoices: r } = this._configuration;
+		n?.enabled ? r?.options?.length && (this._model.language = r.options[0].value) : n?.settings ? this._model.language && (this._configuration.language.enabled = !0) : delete this._model.language, this._render();
+	}
+	onModelChanged = (e) => {
+		this._model = e, this._render(), d("[onModelChanged]: ", this._model), this.dispatchEvent(new u(this._model));
+	};
+	onConfigurationChanged = (e) => {
+		this._configuration = e, this._render();
+	};
+	insertImage = (e) => {
+		this.dispatchEvent(new c(e));
+	};
+	onDeleteImage = (e, t) => {
+		this.dispatchEvent(new o(e, t));
+	};
+	insertSound(e) {
+		this.dispatchEvent(new l(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new s(e, t));
+	}
+	_render() {
+		if (this._model) {
+			let t = n.createElement(e, {
+				onModelChanged: this.onModelChanged,
+				onConfigurationChanged: this.onConfigurationChanged,
+				model: this._model,
+				configuration: this._configuration,
+				imageSupport: {
+					add: this.insertImage,
+					delete: this.onDeleteImage
+				},
+				uploadSoundSupport: {
+					add: this.insertSound.bind(this),
+					delete: this.onDeleteSound.bind(this)
+				}
+			});
+			this._root ||= r(this), this._root.render(t), queueMicrotask(() => {
+				i(this);
+			});
+		}
+	}
+	connectedCallback() {
+		this._render();
+	}
+	disconnectedCallback() {
+		this._root &&= (this._root.unmount(), null);
+	}
+};
+//#endregion
+export { p as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @synced-from pie-elements/packages/graphing-solution-set/configure/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 VALID_LABEL_VALUES: {
+    0.01: number[];
+    0.02: number[];
+    0.04: number[];
+    0.05: number[];
+    0.0625: number[];
+    0.1: number[];
+    0.125: number[];
+    0.2: number[];
+    0.25: number[];
+    0.5: number[];
+    1: number[];
+    2: number[];
+    3: number[];
+    4: number[];
+    5: number[];
+    8: number[];
+    10: number[];
+    12: number[];
+    15: number[];
+    20: number[];
+    40: number[];
+    50: number[];
+    64: number[];
+    100: number[];
+    500: number[];
+    1000: number[];
+};
+export declare const getGridValues: (axis: any, size: any, prefferedValues?: boolean) => number[];
+export declare const getLabelValues: (value: any) => any;
+export declare const applyConstraints: (axis: any, size: any, oldGridValues: any, oldLabelValues: any) => {
+    gridValues: number[];
+    labelValues: any;
+};
+export declare const filterPlotableMarks: (domain: any, range: any, answers: any) => {};
+export declare const findSectionsInSolutionSet: (gssLineData: any, answers: any, domain: any, range: any) => any;
+export declare const pointInsidePolygon: (point: any, polygon: any) => boolean;
+export declare const checkIfLinesAreAdded: (gssLineData: any, answer: any) => boolean | undefined;