@pie-element/graphing-solution-set 6.1.1 → 6.1.2-next.1

package/dist/author/defaults.js

@@ -0,0 +1,339 @@
+//#region src/author/defaults.tsx
+var e = {
+	model: {
+		answers: { correctAnswer: {
+			name: "Correct Answer",
+			marks: []
+		} },
+		arrows: {
+			left: !0,
+			right: !0,
+			up: !0,
+			down: !0
+		},
+		marks: [],
+		defaultGridConfiguration: 0,
+		domain: {
+			min: -5,
+			max: 5,
+			step: 1,
+			labelStep: 1,
+			axisLabel: "x"
+		},
+		graph: {
+			width: 500,
+			height: 500
+		},
+		gssLineData: {
+			numberOfLines: 1,
+			selectedTool: "lineA",
+			sections: [],
+			lineA: { lineType: "Solid" }
+		},
+		includeAxes: !0,
+		labels: {},
+		labelsEnabled: !0,
+		padding: !0,
+		prompt: "",
+		range: {
+			min: -5,
+			max: 5,
+			step: 1,
+			labelStep: 1,
+			axisLabel: "y"
+		},
+		rationale: "",
+		standardGrid: !1,
+		title: "",
+		coordinatesOnHover: !1,
+		promptEnabled: !0,
+		rationaleEnabled: !0,
+		teacherInstructionsEnabled: !0,
+		studentInstructionsEnabled: !0
+	},
+	configuration: {
+		authoring: {
+			settings: !1,
+			label: "Customize Grid Setup",
+			enabled: !0,
+			includeAxesEnabled: !1,
+			standardGridEnabled: !0,
+			min: {
+				label: "Min Value",
+				enabled: !0
+			},
+			max: {
+				label: "Max Value",
+				enabled: !0
+			},
+			axisLabel: {
+				label: "Label",
+				enabled: !0
+			},
+			step: {
+				label: "Grid Interval",
+				enabled: !0
+			},
+			labelStep: {
+				label: "Label Interval",
+				enabled: !0
+			}
+		},
+		arrows: {
+			settings: !0,
+			label: "Include Arrows",
+			left: { label: "left" },
+			right: { label: "right" },
+			up: { label: "up" },
+			down: { label: "down" }
+		},
+		gridConfigurations: [
+			{
+				label: "4-quadrant coordinate grid, -10 to 10",
+				arrows: {
+					left: !0,
+					right: !0,
+					up: !0,
+					down: !0
+				},
+				domain: {
+					min: -10,
+					max: 10,
+					step: 1,
+					padding: 0,
+					labelStep: 1,
+					axisLabel: "<i>x</i>"
+				},
+				graph: {
+					width: 480,
+					height: 480
+				},
+				includeAxes: !0,
+				labels: {
+					top: "",
+					right: "",
+					bottom: "",
+					left: ""
+				},
+				padding: !0,
+				range: {
+					min: -10,
+					max: 10,
+					step: 1,
+					padding: 0,
+					labelStep: 1,
+					axisLabel: "<i>y</i>"
+				},
+				standardGrid: !0,
+				title: ""
+			},
+			{
+				label: "0 to 10 on both axes",
+				arrows: {
+					left: !1,
+					right: !0,
+					up: !0,
+					down: !1
+				},
+				domain: {
+					min: 0,
+					max: 10,
+					step: 1,
+					padding: 0,
+					labelStep: 1,
+					axisLabel: "<i>x</i>"
+				},
+				graph: {
+					width: 480,
+					height: 480
+				},
+				includeAxes: !0,
+				labels: {
+					top: "",
+					right: "",
+					bottom: "",
+					left: ""
+				},
+				padding: !0,
+				range: {
+					min: 0,
+					max: 10,
+					step: 1,
+					padding: 0,
+					labelStep: 1,
+					axisLabel: "<i>y</i>"
+				},
+				standardGrid: !0,
+				title: ""
+			},
+			{
+				label: "0 to 20 on both axes",
+				arrows: {
+					left: !1,
+					right: !0,
+					up: !0,
+					down: !1
+				},
+				domain: {
+					min: 0,
+					max: 20,
+					step: 1,
+					padding: 0,
+					labelStep: 1,
+					axisLabel: "<i>x</i>"
+				},
+				graph: {
+					width: 480,
+					height: 480
+				},
+				includeAxes: !0,
+				labels: {
+					top: "",
+					right: "",
+					bottom: "",
+					left: ""
+				},
+				padding: !0,
+				range: {
+					min: 0,
+					max: 20,
+					step: 1,
+					padding: 0,
+					labelStep: 1,
+					axisLabel: "<i>y</i>"
+				},
+				standardGrid: !0,
+				title: ""
+			},
+			{
+				label: "Sample Data Graph",
+				arrows: {
+					left: !1,
+					right: !0,
+					up: !0,
+					down: !1
+				},
+				domain: {
+					min: 0,
+					max: 30,
+					step: 1,
+					padding: 0,
+					labelStep: 2,
+					axisLabel: "<i>t</i>"
+				},
+				graph: {
+					width: 480,
+					height: 480
+				},
+				includeAxes: !0,
+				labels: {
+					top: "",
+					right: "",
+					bottom: "Time (seconds)",
+					left: "Distance (meters)"
+				},
+				padding: !0,
+				range: {
+					min: 0,
+					max: 80,
+					step: 5,
+					padding: 0,
+					labelStep: 10,
+					axisLabel: "<i>d</i>"
+				},
+				standardGrid: !1,
+				title: "Distance as a function of time"
+			}
+		],
+		graphDimensions: {
+			settings: !1,
+			label: "Graph Dimensions",
+			enabled: !0,
+			min: 150,
+			max: 800,
+			step: 20
+		},
+		padding: {
+			settings: !1,
+			label: "Padding"
+		},
+		labels: {
+			settings: !0,
+			label: "Graph Labels",
+			enabled: !0,
+			top: "Click here to add a top label",
+			right: "Click here to add a right label",
+			bottom: "Click here to add a bottom label",
+			left: "Click here to add a left label"
+		},
+		prompt: {
+			settings: !0,
+			label: "Item Stem"
+		},
+		rationale: {
+			settings: !0,
+			label: "Rationale"
+		},
+		scoringType: {
+			settings: !1,
+			label: "Scoring Type"
+		},
+		studentInstructions: {
+			settings: !1,
+			label: "Student Instructions"
+		},
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions"
+		},
+		title: {
+			settings: !0,
+			label: "Graph Title",
+			enabled: !0,
+			placeholder: "Click here to add a title for this graph"
+		},
+		instruction: {
+			settings: !1,
+			label: "Graphing Solution Set items involve plotting one or two lines on a graph and then selecting the correct area that represents the solution set. To create one, first configure the grid, then select if one or two lines will be offered and if the lines should be solid or dashed. After defining the line(s), define the correct answer by clicking the area that represents the solution set."
+		},
+		settingsPanelDisabled: !1,
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		coordinatesOnHover: {
+			settings: !0,
+			label: "Coordinates on Hover"
+		},
+		maxImageWidth: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300
+		},
+		maxImageHeight: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300
+		},
+		withRubric: {
+			settings: !1,
+			label: "Add Rubric"
+		},
+		language: {
+			settings: !1,
+			label: "Specify Language",
+			enabled: !1
+		},
+		languageChoices: {
+			label: "Language Choices",
+			options: []
+		},
+		mathMlOptions: {
+			mmlOutput: !1,
+			mmlEditing: !1
+		}
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/graphing-config.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @synced-from pie-elements/packages/graphing-solution-set/configure/src/graphing-config.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 * as React from 'react';
+import PropTypes from 'prop-types';
+export declare class GraphingConfig extends React.Component {
+    static propTypes: {
+        availableTools: PropTypes.Requireable<any[]>;
+        authoring: PropTypes.Requireable<object>;
+        dimensionsEnabled: PropTypes.Requireable<boolean>;
+        graphDimensions: PropTypes.Requireable<object>;
+        gridConfigurations: PropTypes.Requireable<any[]>;
+        labelsPlaceholders: PropTypes.Requireable<object>;
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        showLabels: PropTypes.Requireable<boolean>;
+        showTitle: PropTypes.Requireable<boolean>;
+        titlePlaceholder: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    changeLabels: any;
+    changeTitle: any;
+    onConfigChange: any;
+    onChangeView: any;
+    changeGridConfiguration: any;
+    render(): React.JSX.Element;
+}
+export default GraphingConfig;

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

package/dist/author/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @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;
+    disconnectedCallback(): void;
+}