@pie-element/graphing 10.1.1 → 10.1.2-next.1

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

@@ -0,0 +1,34 @@
+/**
+ * @synced-from pie-elements/packages/graphing/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);
+    changeBackgroundMarks: 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,244 @@
+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";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { isEqual as d } from "@pie-element/shared-lodash";
+import { AlertDialog as f } from "@pie-lib/config-ui";
+import { MenuItem as p, OutlinedInput as m, Select as h, Typography as g } from "@mui/material";
+//#region src/author/graphing-config.tsx
+var _ = o("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	marginBottom: e.spacing(2.5)
+})), v = o("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	marginRight: e.spacing(3),
+	marginBottom: e.spacing(2.5)
+})), y = o("div")({
+	display: "flex",
+	flexDirection: "column"
+}), b = o(g)(({ theme: e }) => ({
+	marginTop: e.spacing(1.5),
+	marginBottom: e.spacing(1)
+})), x = o("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	width: "100%",
+	marginBottom: e.spacing(2.5)
+})), S = o(g)(({ theme: e }) => ({ padding: `0 ${e.spacing(1)}` })), C = o(h)({ flex: "1" }), w = 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 }
+		};
+	}
+	changeBackgroundMarks = (e) => {
+		let t = {
+			...this.props.model,
+			backgroundMarks: e
+		};
+		this.props.onChange(t);
+	};
+	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, f = {
+			...i,
+			...n
+		}, { answers: p, domain: m, includeAxes: h, graph: g, range: _, standardGrid: v } = f, y = {
+			domain: [],
+			range: []
+		}, b = {
+			domain: [],
+			range: []
+		}, x = r >= 0 ? r : o;
+		if (h) {
+			let t = e(m, g.width, s.domain, c.domain);
+			y.domain = t.gridValues || [], b.domain = t.labelValues || [];
+		}
+		if (v) y.range = y.domain, b.range = b.domain, _.step = m.step, _.labelStep = m.labelStep;
+		else if (h) {
+			let t = e(_, g.height, s.range, c.range);
+			y.range = t.gridValues || [], b.range = t.labelValues || [];
+		}
+		let S = t(m, _, p);
+		if (!d(p, S)) {
+			this.setState({ dialog: {
+				isOpened: !0,
+				onClose: () => this.setState({ dialog: { isOpened: !1 } }, a({
+					...i,
+					domain: l,
+					range: u
+				})),
+				onConfirm: () => {
+					this.setState({
+						gridValues: y,
+						labelValues: b,
+						dialog: { isOpened: !1 },
+						domain: { ...m },
+						range: { ..._ }
+					}, a({
+						...f,
+						answers: S,
+						defaultGridConfiguration: x
+					}));
+				}
+			} });
+			return;
+		}
+		this.setState({
+			gridValues: y,
+			labelValues: b,
+			domain: { ...m },
+			range: { ..._ }
+		}), a({
+			...f,
+			defaultGridConfiguration: x
+		});
+	};
+	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 = {}, availableTools: t = [], gridConfigurations: n = [], graphDimensions: r = {}, labelsPlaceholders: i, model: a, showLabels: o, dimensionsEnabled: d, showTitle: h, titlePlaceholder: w, mathMlOptions: T = {}, removeIncompleteTool: E } = this.props, { arrows: D, backgroundMarks: O, coordinatesOnHover: k, defaultGridConfiguration: A, domain: j, includeAxes: M, labels: N, range: P, standardGrid: F, title: I } = a || {}, L = (a || {}).graph || {}, { min: R, max: z, step: B } = r || {}, { dialog: V = {}, gridValues: H, labelValues: U, showPixelGuides: W } = this.state, G = {
+			min: Math.max(150, R),
+			max: Math.min(800, z),
+			step: B >= 1 ? Math.min(200, B) : 20
+		}, K = {
+			axisLabel: e.axisLabel,
+			dimensionsEnabled: d,
+			includeAxesEnabled: e.includeAxesEnabled,
+			labelStep: e.labelStep,
+			min: e.min,
+			max: e.max,
+			standardGridEnabled: e.standardGridEnabled,
+			step: e.step
+		}, q = e.enabled && Object.values(K).some((e) => typeof e == "object" ? e.enabled : e);
+		return /* @__PURE__ */ u(_, { children: [
+			/* @__PURE__ */ u(v, { children: [n && n.length ? /* @__PURE__ */ u(x, { children: [/* @__PURE__ */ l(S, {
+				component: "div",
+				variant: "h6",
+				children: "Grid Configuration"
+			}), /* @__PURE__ */ l(C, {
+				input: /* @__PURE__ */ l(m, {}),
+				displayEmpty: !0,
+				onChange: this.changeGridConfiguration,
+				value: A,
+				MenuProps: { transitionDuration: {
+					enter: 225,
+					exit: 195
+				} },
+				children: (n || []).map((e, t) => /* @__PURE__ */ l(p, {
+					value: t,
+					children: e.label
+				}, t))
+			})] }) : null, q && /* @__PURE__ */ l(c, {
+				displayedFields: K,
+				domain: j,
+				gridValues: H,
+				includeAxes: M,
+				labelValues: U,
+				range: P,
+				size: L,
+				sizeConstraints: G,
+				standardGrid: F,
+				onChange: this.onConfigChange,
+				onChangeView: this.onChangeView
+			})] }),
+			/* @__PURE__ */ u(y, { children: [
+				/* @__PURE__ */ l(g, {
+					component: "div",
+					variant: "h6",
+					children: "Define Graph Attributes"
+				}),
+				/* @__PURE__ */ l(b, {
+					component: "div",
+					variant: "body1",
+					children: "Use this interface to add/edit a title and/or labels, and to set background shapes"
+				}),
+				/* @__PURE__ */ l(s, {
+					axesSettings: { includeArrows: D },
+					backgroundMarks: [],
+					coordinatesOnHover: k,
+					collapsibleToolbar: !0,
+					collapsibleToolbarTitle: "Add Background Shapes to Graph",
+					domain: j,
+					labels: N,
+					labelsPlaceholders: i,
+					marks: O,
+					onChangeLabels: this.changeLabels,
+					onChangeMarks: this.changeBackgroundMarks,
+					onChangeTitle: this.changeTitle,
+					range: P,
+					showLabels: o,
+					showPixelGuides: W,
+					showTitle: h,
+					size: {
+						width: L.width,
+						height: L.height
+					},
+					title: I,
+					titlePlaceholder: w,
+					toolbarTools: t,
+					mathMlOptions: T,
+					removeIncompleteTool: E
+				}, "graphing-config")
+			] }, "graph"),
+			/* @__PURE__ */ l(f, {
+				open: V.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: V.onClose,
+				onConfirm: V.onConfirm
+			})
+		] });
+	}
+};
+//#endregion
+export { w as default };

package/dist/author/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @synced-from pie-elements/packages/graphing/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;
+        defaultTool: any;
+        range: {};
+        graph: {};
+        arrows: {
+            left: boolean;
+            right: boolean;
+            up: boolean;
+            down: boolean;
+        };
+        backgroundMarks: never[];
+        coordinatesOnHover: boolean;
+        defaultGridConfiguration: number;
+        domain: {
+            min: number;
+            max: number;
+            step: number;
+            labelStep: number;
+            axisLabel: string;
+        };
+        includeAxes: boolean;
+        labels: {};
+        labelsEnabled: boolean;
+        padding: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        standardGrid: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        title: string;
+        titleEnabled: boolean;
+        toolbarTools: string[];
+    };
+    constructor();
+    set model(m: any);
+    resetModelAfterConfigurationIsSet: 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;
+}

package/dist/author/index.js

@@ -0,0 +1,96 @@
+import 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 { cloneDeep as o } from "@pie-element/shared-lodash";
+import { DeleteImageEvent as s, DeleteSoundEvent as c, InsertImageEvent as l, InsertSoundEvent as u, ModelUpdatedEvent as d } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var f = a("pie-elements:graphing:configure"), p = (e) => Object.keys(e || {}).sort().reduce((t, n) => (n !== "correctAnswer" && (t[n] = e[n]), t), {}), m = class a extends HTMLElement {
+	static createDefaultModel = (e = {}) => {
+		let n = {
+			...t.model,
+			...e
+		}, { answers: r = {}, domain: i = {}, defaultTool: a, graph: o = {}, range: s = {}, standardGrid: c, toolbarTools: l } = n, u = (l || []).filter((e) => e !== "label"), d = a || u.length && u[0] || "";
+		return {
+			...n,
+			answers: r && r.correctAnswer && {
+				correctAnswer: r.correctAnswer,
+				...p(r)
+			} || r,
+			defaultTool: d,
+			range: c && {
+				...s,
+				min: i.min,
+				max: i.max,
+				step: i.step,
+				labelStep: i.labelStep
+			} || s,
+			graph: c && {
+				...o,
+				height: o.width
+			} || o
+		};
+	};
+	constructor() {
+		super(), this._root = null, this._model = a.createDefaultModel(), this._configuration = t.configuration;
+	}
+	set model(e) {
+		this._model = a.createDefaultModel(e), this._modelCopy = o(this._model), this._render();
+	}
+	resetModelAfterConfigurationIsSet = () => {
+		let e = document.querySelectorAll("pie-author");
+		this.hasPlayerAsParent = Array.from(e).some((e) => e.contains(this)), this.hasPlayerAsParent && (this._modelCopy ? this._model = this._modelCopy : delete this._modelCopy);
+	};
+	set configuration(e) {
+		this._configuration = {
+			...t.configuration,
+			...e
+		}, this.resetModelAfterConfigurationIsSet(), e.language?.enabled ? e.languageChoices?.options?.length && (this._model.language = e.languageChoices.options[0].value) : e.language.settings ? this._model.language && (this._configuration.language.enabled = !0) : delete this._model.language, this._render();
+	}
+	onModelChanged = (e) => {
+		this._model = e, this._render(), f("[onModelChanged]: ", this._model), this.dispatchEvent(new d(this._model));
+	};
+	onConfigurationChanged = (e) => {
+		this._configuration = e, this._render();
+	};
+	insertImage = (e) => {
+		this.dispatchEvent(new l(e));
+	};
+	onDeleteImage = (e, t) => {
+		this.dispatchEvent(new s(e, t));
+	};
+	insertSound(e) {
+		this.dispatchEvent(new u(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new c(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);
+			});
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { m as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/graphing/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) => {};