@pie-element/graphing-solution-set 6.1.1-next.0 → 6.1.1-next.29

package/configure/lib/graphing-config.js

@@ -0,0 +1,408 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GraphingConfig = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _graphingSolutionSet = require("@pie-lib/graphing-solution-set");
+var _configUi = require("@pie-lib/config-ui");
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _utils = require("./utils");
+var _lodashEs = require("lodash-es");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Container = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  marginBottom: theme.spacing(2.5)
+}));
+const GridConfigWrapper = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  marginRight: theme.spacing(3),
+  marginBottom: theme.spacing(2.5)
+}));
+const GraphConfig = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const SubtitleText = (0, _styles.styled)(_material.Typography)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(1)
+}));
+const GridConfig = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  width: '100%',
+  marginBottom: theme.spacing(2.5)
+}));
+const GridConfigLabel = (0, _styles.styled)(_material.Typography)(({
+  theme
+}) => ({
+  padding: `0 ${theme.spacing(1)}`
+}));
+const GridConfigSelect = (0, _styles.styled)(_material.Select)({
+  flex: '1'
+});
+class GraphingConfig extends React.Component {
+  constructor(props) {
+    super(props);
+    /*
+     * Function to change labels
+     * @param {object} labels - labels object
+     * */
+    (0, _defineProperty2.default)(this, "changeLabels", labels => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        labels
+      });
+    });
+    /*
+     * Function to change title
+     * @param {string} title - title string
+     * */
+    (0, _defineProperty2.default)(this, "changeTitle", title => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        title
+      });
+    });
+    /*
+     * Function to change grid configuration
+     * @param {object} config - grid configuration object
+     * @param {number} newSelectedGrid - new selected grid
+     * */
+    (0, _defineProperty2.default)(this, "onConfigChange", (config, newSelectedGrid) => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        defaultGridConfiguration: oldSelectedGrid = 0
+      } = model;
+      const {
+        gridValues: oldGridValues,
+        labelValues: oldLabelValues,
+        domain: oldDomain,
+        range: oldRange
+      } = this.state;
+      const updatedModel = {
+        ...model,
+        ...config
+      };
+      const {
+        answers,
+        domain,
+        includeAxes = true,
+        graph,
+        range,
+        standardGrid
+      } = updatedModel;
+      const gridValues = {
+        domain: [],
+        range: []
+      };
+      const labelValues = {
+        domain: [],
+        range: []
+      };
+      const selectedGrid = newSelectedGrid >= 0 ? newSelectedGrid : oldSelectedGrid;
+      if (includeAxes) {
+        const domainConstraints = (0, _utils.applyConstraints)(domain, graph.width, oldGridValues.domain, oldLabelValues.domain);
+        gridValues.domain = domainConstraints.gridValues || [];
+        labelValues.domain = domainConstraints.labelValues || [];
+      }
+      if (standardGrid) {
+        gridValues.range = gridValues.domain;
+        labelValues.range = labelValues.domain;
+        range.step = domain.step;
+        range.labelStep = domain.labelStep;
+      } else {
+        if (includeAxes) {
+          const rangeConstraints = (0, _utils.applyConstraints)(range, graph.height, oldGridValues.range, oldLabelValues.range);
+          gridValues.range = rangeConstraints.gridValues || [];
+          labelValues.range = rangeConstraints.labelValues || [];
+        }
+      }
+      const filteredAnswers = (0, _lodashEs.cloneDeep)(answers);
+      filteredAnswers.correctAnswer.marks = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
+      const plotableAnswers = (0, _utils.filterPlotableMarks)(domain, range, filteredAnswers);
+      if (!(0, _lodashEs.isEqual)(filteredAnswers, plotableAnswers)) {
+        this.setState({
+          dialog: {
+            isOpened: true,
+            onClose: () => this.setState({
+              dialog: {
+                isOpened: false
+              }
+            }, onChange({
+              ...model,
+              domain: oldDomain,
+              range: oldRange
+            })),
+            onConfirm: () => {
+              updatedModel.gssLineData.sections = [];
+              updatedModel.gssLineData.selectedTool = 'lineA';
+              this.setState({
+                gridValues,
+                labelValues,
+                dialog: {
+                  isOpened: false
+                },
+                domain: {
+                  ...domain
+                },
+                range: {
+                  ...range
+                }
+              }, onChange({
+                ...updatedModel,
+                answers: plotableAnswers,
+                defaultGridConfiguration: selectedGrid
+              }));
+            }
+          }
+        });
+        return;
+      }
+      this.setState({
+        gridValues,
+        labelValues,
+        domain: {
+          ...domain
+        },
+        range: {
+          ...range
+        }
+      });
+      onChange({
+        ...updatedModel,
+        defaultGridConfiguration: selectedGrid
+      });
+    });
+    /*
+     * Function to change view
+     * @param {object} event - event object
+     * @param {boolean} expanded - expanded boolean
+     * */
+    (0, _defineProperty2.default)(this, "onChangeView", (event, expanded) => {
+      const {
+        graphDimensions: {
+          enabled
+        } = {}
+      } = this.props;
+      if (enabled) {
+        this.setState({
+          showPixelGuides: expanded
+        });
+      }
+    });
+    /*
+     * Function to change grid configuration
+     * @param {object} event - event object
+     * */
+    (0, _defineProperty2.default)(this, "changeGridConfiguration", event => {
+      const {
+        gridConfigurations
+      } = this.props;
+      const {
+        value
+      } = event.target;
+      this.onConfigChange(gridConfigurations?.[value] || {}, value);
+    });
+    const {
+      domain: _domain,
+      range: _range,
+      graph: _graph
+    } = props.model || {};
+    const _gridValues = {
+      domain: (0, _utils.getGridValues)(_domain, _graph.width, true),
+      range: (0, _utils.getGridValues)(_range, _graph.height, true)
+    };
+    const _labelValues = {
+      domain: (0, _utils.getLabelValues)(_domain.step),
+      range: (0, _utils.getLabelValues)(_range.step)
+    };
+    this.state = {
+      gridValues: _gridValues,
+      labelValues: _labelValues,
+      showPixelGuides: false,
+      dialog: {
+        isOpened: false
+      },
+      domain: {
+        ..._domain
+      },
+      range: {
+        ..._range
+      }
+    };
+  }
+  /*
+   * Render the component
+   * */
+  render() {
+    const {
+      authoring = {},
+      gridConfigurations = [],
+      graphDimensions = {},
+      labelsPlaceholders,
+      model,
+      showLabels,
+      dimensionsEnabled,
+      showTitle,
+      titlePlaceholder,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      arrows,
+      coordinatesOnHover,
+      defaultGridConfiguration,
+      domain,
+      labels,
+      range,
+      standardGrid,
+      title
+    } = model || {};
+    const graph = (model || {}).graph || {};
+    const {
+      min,
+      max,
+      step
+    } = graphDimensions || {};
+    const {
+      dialog = {},
+      gridValues,
+      labelValues,
+      showPixelGuides
+    } = this.state;
+    const sizeConstraints = {
+      min: Math.max(150, min),
+      max: Math.min(800, max),
+      step: step >= 1 ? Math.min(200, step) : 20
+    };
+    const displayedFields = {
+      axisLabel: authoring.axisLabel,
+      dimensionsEnabled,
+      includeAxesEnabled: false,
+      //Setting false by default as per requirement
+      labelStep: authoring.labelStep,
+      min: authoring.min,
+      max: authoring.max,
+      standardGridEnabled: authoring.standardGridEnabled,
+      step: authoring.step
+    };
+    const displayGridSetup = authoring.enabled && Object.values(displayedFields).some(field => typeof field === 'object' ? field.enabled : field);
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(GridConfigWrapper, null, gridConfigurations && gridConfigurations.length ? /*#__PURE__*/React.createElement(GridConfig, null, /*#__PURE__*/React.createElement(GridConfigLabel, {
+      component: "div",
+      variant: "h6"
+    }, "Grid Configuration"), /*#__PURE__*/React.createElement(GridConfigSelect, {
+      input: /*#__PURE__*/React.createElement(_material.OutlinedInput, {
+        labelWidth: 10
+      }),
+      displayEmpty: true,
+      onChange: this.changeGridConfiguration,
+      value: defaultGridConfiguration,
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }
+    }, (gridConfigurations || []).map((config, index) => /*#__PURE__*/React.createElement(_material.MenuItem, {
+      key: index,
+      value: index
+    }, config.label)))) : null, displayGridSetup && /*#__PURE__*/React.createElement(_graphingSolutionSet.GridSetup, {
+      displayedFields: displayedFields,
+      domain: domain,
+      gridValues: gridValues,
+      includeAxes: true //Setting true by default as per requirement
+      ,
+      labelValues: labelValues,
+      range: range,
+      size: graph,
+      sizeConstraints: sizeConstraints,
+      standardGrid: standardGrid,
+      onChange: this.onConfigChange,
+      onChangeView: this.onChangeView
+    })), /*#__PURE__*/React.createElement(GraphConfig, {
+      key: "graph"
+    }, /*#__PURE__*/React.createElement(_material.Typography, {
+      component: "div",
+      variant: "h6"
+    }, "Define Graph Attributes"), /*#__PURE__*/React.createElement(SubtitleText, {
+      component: "div",
+      variant: "body1"
+    }, "Use this interface to add/edit a title and/or labels"), /*#__PURE__*/React.createElement(_graphingSolutionSet.GraphContainer, {
+      axesSettings: {
+        includeArrows: arrows
+      },
+      backgroundMarks: [],
+      coordinatesOnHover: coordinatesOnHover,
+      collapsibleToolbar: true,
+      collapsibleToolbarTitle: 'Add Background Shapes to Graph',
+      domain: domain,
+      key: "graphing-config",
+      labels: labels,
+      labelsPlaceholders: labelsPlaceholders,
+      marks: [],
+      onChangeLabels: this.changeLabels,
+      onChangeTitle: this.changeTitle,
+      range: range,
+      showLabels: showLabels,
+      showPixelGuides: showPixelGuides,
+      showTitle: showTitle,
+      size: {
+        width: graph.width,
+        height: graph.height
+      },
+      title: title,
+      titlePlaceholder: titlePlaceholder,
+      disableToolbar: true,
+      mathMlOptions: mathMlOptions
+    })), /*#__PURE__*/React.createElement(_configUi.AlertDialog, {
+      open: dialog.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: dialog.onClose,
+      onConfirm: dialog.onConfirm
+    }));
+  }
+}
+exports.GraphingConfig = GraphingConfig;
+(0, _defineProperty2.default)(GraphingConfig, "propTypes", {
+  availableTools: _propTypes.default.array,
+  authoring: _propTypes.default.object,
+  dimensionsEnabled: _propTypes.default.bool,
+  graphDimensions: _propTypes.default.object,
+  gridConfigurations: _propTypes.default.array,
+  labelsPlaceholders: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  showLabels: _propTypes.default.bool,
+  showTitle: _propTypes.default.bool,
+  titlePlaceholder: _propTypes.default.string
+});
+var _default = exports.default = GraphingConfig;
+//# sourceMappingURL=graphing-config.js.map

package/configure/lib/graphing-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphing-config.js","names":["React","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_graphingSolutionSet","_configUi","_material","_styles","_utils","_lodashEs","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Container","styled","theme","display","flexWrap","marginBottom","spacing","GridConfigWrapper","flexDirection","marginRight","GraphConfig","SubtitleText","Typography","marginTop","GridConfig","alignItems","width","GridConfigLabel","padding","GridConfigSelect","Select","flex","GraphingConfig","Component","constructor","props","_defineProperty2","labels","model","onChange","title","config","newSelectedGrid","defaultGridConfiguration","oldSelectedGrid","gridValues","oldGridValues","labelValues","oldLabelValues","domain","oldDomain","range","oldRange","state","updatedModel","answers","includeAxes","graph","standardGrid","selectedGrid","domainConstraints","applyConstraints","step","labelStep","rangeConstraints","height","filteredAnswers","cloneDeep","correctAnswer","marks","filter","mark","type","plotableAnswers","filterPlotableMarks","isEqual","setState","dialog","isOpened","onClose","onConfirm","gssLineData","sections","selectedTool","event","expanded","graphDimensions","enabled","showPixelGuides","gridConfigurations","value","target","onConfigChange","getGridValues","getLabelValues","render","authoring","labelsPlaceholders","showLabels","dimensionsEnabled","showTitle","titlePlaceholder","mathMlOptions","arrows","coordinatesOnHover","min","max","sizeConstraints","Math","displayedFields","axisLabel","includeAxesEnabled","standardGridEnabled","displayGridSetup","values","some","field","createElement","length","component","variant","input","OutlinedInput","labelWidth","displayEmpty","changeGridConfiguration","MenuProps","transitionDuration","enter","exit","map","index","MenuItem","key","label","GridSetup","size","onChangeView","GraphContainer","axesSettings","includeArrows","backgroundMarks","collapsibleToolbar","collapsibleToolbarTitle","onChangeLabels","changeLabels","onChangeTitle","changeTitle","disableToolbar","AlertDialog","open","text","exports","availableTools","PropTypes","array","object","bool","isRequired","func","string","_default"],"sources":["../src/graphing-config.jsx"],"sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { GraphContainer, GridSetup } from '@pie-lib/graphing-solution-set';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport { MenuItem, Select, Typography, OutlinedInput } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { applyConstraints, filterPlotableMarks, getGridValues, getLabelValues } from './utils';\nimport { isEqual, cloneDeep } from 'lodash-es';\n\nconst Container = styled('div')(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  marginBottom: theme.spacing(2.5),\n}));\n\nconst GridConfigWrapper = styled('div')(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginRight: theme.spacing(3),\n  marginBottom: theme.spacing(2.5),\n}));\n\nconst GraphConfig = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nconst SubtitleText = styled(Typography)(({ theme }) => ({\n  marginTop: theme.spacing(1.5),\n  marginBottom: theme.spacing(1),\n}));\n\nconst GridConfig = styled('div')(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  width: '100%',\n  marginBottom: theme.spacing(2.5),\n}));\n\nconst GridConfigLabel = styled(Typography)(({ theme }) => ({\n  padding: `0 ${theme.spacing(1)}`,\n}));\n\nconst GridConfigSelect = styled(Select)({\n  flex: '1',\n});\n\nexport class GraphingConfig extends React.Component {\n  static propTypes = {\n    availableTools: PropTypes.array,\n    authoring: PropTypes.object,\n    dimensionsEnabled: PropTypes.bool,\n    graphDimensions: PropTypes.object,\n    gridConfigurations: PropTypes.array,\n    labelsPlaceholders: PropTypes.object,\n    model: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    showLabels: PropTypes.bool,\n    showTitle: PropTypes.bool,\n    titlePlaceholder: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n    const { domain, range, graph } = props.model || {};\n    const gridValues = {\n      domain: getGridValues(domain, graph.width, true),\n      range: getGridValues(range, graph.height, true),\n    };\n    const labelValues = {\n      domain: getLabelValues(domain.step),\n      range: getLabelValues(range.step),\n    };\n    this.state = {\n      gridValues,\n      labelValues,\n      showPixelGuides: false,\n      dialog: { isOpened: false },\n      domain: { ...domain },\n      range: { ...range },\n    };\n  }\n\n  /*\n   * Function to change labels\n   * @param {object} labels - labels object\n   * */\n  changeLabels = (labels) => {\n    const { model, onChange } = this.props;\n    onChange({ ...model, labels });\n  };\n\n  /*\n   * Function to change title\n   * @param {string} title - title string\n   * */\n  changeTitle = (title) => {\n    const { model, onChange } = this.props;\n    onChange({ ...model, title });\n  };\n\n  /*\n   * Function to change grid configuration\n   * @param {object} config - grid configuration object\n   * @param {number} newSelectedGrid - new selected grid\n   * */\n  onConfigChange = (config, newSelectedGrid) => {\n    const { model, onChange } = this.props;\n    const { defaultGridConfiguration: oldSelectedGrid = 0 } = model;\n    const { gridValues: oldGridValues, labelValues: oldLabelValues, domain: oldDomain, range: oldRange } = this.state;\n    const updatedModel = { ...model, ...config };\n    const { answers, domain, includeAxes = true, graph, range, standardGrid } = updatedModel;\n    const gridValues = { domain: [], range: [] };\n    const labelValues = { domain: [], range: [] };\n    const selectedGrid = newSelectedGrid >= 0 ? newSelectedGrid : oldSelectedGrid;\n    if (includeAxes) {\n      const domainConstraints = applyConstraints(domain, graph.width, oldGridValues.domain, oldLabelValues.domain);\n      gridValues.domain = domainConstraints.gridValues || [];\n      labelValues.domain = domainConstraints.labelValues || [];\n    }\n    if (standardGrid) {\n      gridValues.range = gridValues.domain;\n      labelValues.range = labelValues.domain;\n      range.step = domain.step;\n      range.labelStep = domain.labelStep;\n    } else {\n      if (includeAxes) {\n        const rangeConstraints = applyConstraints(range, graph.height, oldGridValues.range, oldLabelValues.range);\n        gridValues.range = rangeConstraints.gridValues || [];\n        labelValues.range = rangeConstraints.labelValues || [];\n      }\n    }\n    const filteredAnswers = cloneDeep(answers);\n    filteredAnswers.correctAnswer.marks = answers.correctAnswer.marks.filter((mark) => mark.type !== 'polygon');\n    const plotableAnswers = filterPlotableMarks(domain, range, filteredAnswers);\n    if (!isEqual(filteredAnswers, plotableAnswers)) {\n      this.setState({\n        dialog: {\n          isOpened: true,\n          onClose: () =>\n            this.setState({ dialog: { isOpened: false } }, onChange({ ...model, domain: oldDomain, range: oldRange })),\n          onConfirm: () => {\n            updatedModel.gssLineData.sections = [];\n            updatedModel.gssLineData.selectedTool = 'lineA';\n            this.setState(\n              {\n                gridValues,\n                labelValues,\n                dialog: { isOpened: false },\n                domain: { ...domain },\n                range: { ...range },\n              },\n              onChange({ ...updatedModel, answers: plotableAnswers, defaultGridConfiguration: selectedGrid }),\n            );\n          },\n        },\n      });\n      return;\n    }\n    this.setState({ gridValues, labelValues, domain: { ...domain }, range: { ...range } });\n    onChange({ ...updatedModel, defaultGridConfiguration: selectedGrid });\n  };\n\n  /*\n   * Function to change view\n   * @param {object} event - event object\n   * @param {boolean} expanded - expanded boolean\n   * */\n  onChangeView = (event, expanded) => {\n    const { graphDimensions: { enabled } = {} } = this.props;\n    if (enabled) {\n      this.setState({ showPixelGuides: expanded });\n    }\n  };\n\n  /*\n   * Function to change grid configuration\n   * @param {object} event - event object\n   * */\n  changeGridConfiguration = (event) => {\n    const { gridConfigurations } = this.props;\n    const { value } = event.target;\n    this.onConfigChange(gridConfigurations?.[value] || {}, value);\n  };\n\n  /*\n   * Render the component\n   * */\n  render() {\n    const {\n      authoring = {},\n      gridConfigurations = [],\n      graphDimensions = {},\n      labelsPlaceholders,\n      model,\n      showLabels,\n      dimensionsEnabled,\n      showTitle,\n      titlePlaceholder,\n      mathMlOptions = {},\n    } = this.props;\n    const { arrows, coordinatesOnHover, defaultGridConfiguration, domain, labels, range, standardGrid, title } =\n      model || {};\n    const graph = (model || {}).graph || {};\n    const { min, max, step } = graphDimensions || {};\n    const { dialog = {}, gridValues, labelValues, showPixelGuides } = this.state;\n    const sizeConstraints = {\n      min: Math.max(150, min),\n      max: Math.min(800, max),\n      step: step >= 1 ? Math.min(200, step) : 20,\n    };\n    const displayedFields = {\n      axisLabel: authoring.axisLabel,\n      dimensionsEnabled,\n      includeAxesEnabled: false, //Setting false by default as per requirement\n      labelStep: authoring.labelStep,\n      min: authoring.min,\n      max: authoring.max,\n      standardGridEnabled: authoring.standardGridEnabled,\n      step: authoring.step,\n    };\n    const displayGridSetup =\n      authoring.enabled &&\n      Object.values(displayedFields).some((field) => (typeof field === 'object' ? field.enabled : field));\n    return (\n      <Container>\n        <GridConfigWrapper>\n          {gridConfigurations && gridConfigurations.length ? (\n            <GridConfig>\n              <GridConfigLabel component=\"div\" variant=\"h6\">\n                Grid Configuration\n              </GridConfigLabel>\n              <GridConfigSelect\n                input={<OutlinedInput labelWidth={10} />}\n                displayEmpty\n                onChange={this.changeGridConfiguration}\n                value={defaultGridConfiguration}\n                MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}\n              >\n                {(gridConfigurations || []).map((config, index) => (\n                  <MenuItem key={index} value={index}>\n                    {config.label}\n                  </MenuItem>\n                ))}\n              </GridConfigSelect>\n            </GridConfig>\n          ) : null}\n          {displayGridSetup && (\n            <GridSetup\n              displayedFields={displayedFields}\n              domain={domain}\n              gridValues={gridValues}\n              includeAxes={true} //Setting true by default as per requirement\n              labelValues={labelValues}\n              range={range}\n              size={graph}\n              sizeConstraints={sizeConstraints}\n              standardGrid={standardGrid}\n              onChange={this.onConfigChange}\n              onChangeView={this.onChangeView}\n            />\n          )}\n        </GridConfigWrapper>\n        <GraphConfig key=\"graph\">\n          <Typography component=\"div\" variant=\"h6\">\n            Define Graph Attributes\n          </Typography>\n          <SubtitleText component=\"div\" variant=\"body1\">\n            Use this interface to add/edit a title and/or labels\n          </SubtitleText>\n          <GraphContainer\n            axesSettings={{ includeArrows: arrows }}\n            backgroundMarks={[]}\n            coordinatesOnHover={coordinatesOnHover}\n            collapsibleToolbar={true}\n            collapsibleToolbarTitle={'Add Background Shapes to Graph'}\n            domain={domain}\n            key=\"graphing-config\"\n            labels={labels}\n            labelsPlaceholders={labelsPlaceholders}\n            marks={[]}\n            onChangeLabels={this.changeLabels}\n            onChangeTitle={this.changeTitle}\n            range={range}\n            showLabels={showLabels}\n            showPixelGuides={showPixelGuides}\n            showTitle={showTitle}\n            size={{ width: graph.width, height: graph.height }}\n            title={title}\n            titlePlaceholder={titlePlaceholder}\n            disableToolbar={true}\n            mathMlOptions={mathMlOptions}\n          />\n        </GraphConfig>\n        <AlertDialog\n          open={dialog.isOpened}\n          title=\"Warning\"\n          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.\"\n          onClose={dialog.onClose}\n          onConfirm={dialog.onConfirm}\n        />\n      </Container>\n    );\n  }\n}\n\nexport default GraphingConfig;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/index.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _configure = _interopRequireDefault(require("./configure"));
+var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
+var _debug = _interopRequireDefault(require("debug"));
+var _defaults = _interopRequireDefault(require("./defaults"));
+var _mathRendering = require("@pie-lib/math-rendering");
+const log = (0, _debug.default)('pie-elements:graphing-solution-set:configure');
+
+// this function is implemented in controller as well
+const sortedAnswers = answers => Object.keys(answers || {}).sort().reduce((result, key) => {
+  if (key !== 'correctAnswer') {
+    result[key] = answers[key];
+  }
+  return result;
+}, {});
+class GraphLinesConfigure extends HTMLElement {
+  constructor() {
+    super();
+    /*
+     * Triggered when the model is changed
+     * @param {object} model - the new model
+     * */
+    (0, _defineProperty2.default)(this, "onModelChanged", model => {
+      this._model = model;
+      this._render();
+      log('[onModelChanged]: ', this._model);
+      this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model));
+    });
+    /*
+     * Triggered when the configuration is changed
+     * @param {object} config - the new configuration
+     * */
+    (0, _defineProperty2.default)(this, "onConfigurationChanged", config => {
+      this._configuration = config;
+      this._render();
+    });
+    (0, _defineProperty2.default)(this, "insertImage", handler => {
+      this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+    });
+    (0, _defineProperty2.default)(this, "onDeleteImage", (src, done) => {
+      this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+    });
+    this._root = null;
+    this._model = GraphLinesConfigure.createDefaultModel();
+    this._configuration = _defaults.default.configuration;
+  }
+
+  /*
+   * Function to set the model
+   * */
+  set model(m) {
+    this._model = GraphLinesConfigure.createDefaultModel(m);
+    this._render();
+  }
+
+  /*
+   * Function to set the configuration
+   * */
+  set configuration(c) {
+    this._configuration = c;
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    //TODO: add logic in controller and add tests
+    if (c.language?.enabled) {
+      if (c.languageChoices?.options?.length) {
+        this._model.language = c.languageChoices.options[0].value;
+      }
+    } else {
+      if (c.language.settings) {
+        if (this._model.language) {
+          this._configuration.language.enabled = true;
+        }
+      } else {
+        delete this._model.language;
+      }
+    }
+    this._render();
+  }
+  insertSound(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+  }
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+  }
+
+  /*
+   * Render the component
+   * */
+  _render() {
+    if (this._model) {
+      const el = /*#__PURE__*/_react.default.createElement(_configure.default, {
+        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)
+        }
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = GraphLinesConfigure;
+(0, _defineProperty2.default)(GraphLinesConfigure, "createDefaultModel", (model = {}) => {
+  const normalizedModel = {
+    ..._defaults.default.model,
+    ...model
+  };
+  const {
+    answers = {},
+    domain = {},
+    graph = {},
+    range = {},
+    standardGrid
+  } = normalizedModel;
+  return {
+    ...normalizedModel,
+    answers: answers && answers.correctAnswer && {
+      correctAnswer: answers.correctAnswer,
+      ...sortedAnswers(answers)
+    } || answers,
+    range: standardGrid && {
+      ...range,
+      min: domain.min,
+      max: domain.max,
+      step: domain.step,
+      labelStep: domain.labelStep
+    } || range,
+    graph: standardGrid && {
+      ...graph,
+      height: graph.width
+    } || graph
+  };
+});
+//# sourceMappingURL=index.js.map

package/configure/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_configure","_pieConfigureEvents","_debug","_defaults","_mathRendering","log","debug","sortedAnswers","answers","Object","keys","sort","reduce","result","key","GraphLinesConfigure","HTMLElement","constructor","_defineProperty2","default","model","_model","_render","dispatchEvent","ModelUpdatedEvent","config","_configuration","handler","InsertImageEvent","src","done","DeleteImageEvent","_root","createDefaultModel","defaultValues","configuration","m","c","language","enabled","languageChoices","options","length","value","settings","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","el","React","createElement","Configure","onModelChanged","onConfigurationChanged","imageSupport","add","insertImage","delete","onDeleteImage","uploadSoundSupport","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","normalizedModel","domain","graph","range","standardGrid","correctAnswer","min","max","step","labelStep","height","width"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Configure from './configure';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\nimport debug from 'debug';\nimport defaultValues from './defaults';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst log = debug('pie-elements:graphing-solution-set:configure');\n\n// this function is implemented in controller as well\nconst sortedAnswers = (answers) =>\n  Object.keys(answers || {})\n    .sort()\n    .reduce((result, key) => {\n      if (key !== 'correctAnswer') {\n        result[key] = answers[key];\n      }\n\n      return result;\n    }, {});\n\nexport default class GraphLinesConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => {\n    const normalizedModel = { ...defaultValues.model, ...model };\n    const { answers = {}, domain = {}, graph = {}, range = {}, standardGrid } = normalizedModel;\n    return {\n      ...normalizedModel,\n      answers:\n        (answers &&\n          answers.correctAnswer && {\n            correctAnswer: answers.correctAnswer,\n            ...sortedAnswers(answers),\n          }) ||\n        answers,\n      range:\n        (standardGrid && {\n          ...range,\n          min: domain.min,\n          max: domain.max,\n          step: domain.step,\n          labelStep: domain.labelStep,\n        }) ||\n        range,\n      graph: (standardGrid && { ...graph, height: graph.width }) || graph,\n    };\n  };\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = GraphLinesConfigure.createDefaultModel();\n    this._configuration = defaultValues.configuration;\n  }\n\n  /*\n   * Function to set the model\n   * */\n  set model(m) {\n    this._model = GraphLinesConfigure.createDefaultModel(m);\n    this._render();\n  }\n\n  /*\n   * Function to set the configuration\n   * */\n  set configuration(c) {\n    this._configuration = c;\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    //TODO: add logic in controller and add tests\n    if (c.language?.enabled) {\n      if (c.languageChoices?.options?.length) {\n        this._model.language = c.languageChoices.options[0].value;\n      }\n    } else {\n      if (c.language.settings) {\n        if (this._model.language) {\n          this._configuration.language.enabled = true;\n        }\n      } else {\n        delete this._model.language;\n      }\n    }\n    this._render();\n  }\n\n  /*\n   * Triggered when the model is changed\n   * @param {object} model - the new model\n   * */\n  onModelChanged = (model) => {\n    this._model = model;\n    this._render();\n    log('[onModelChanged]: ', this._model);\n    this.dispatchEvent(new ModelUpdatedEvent(this._model));\n  };\n\n  /*\n   * Triggered when the configuration is changed\n   * @param {object} config - the new configuration\n   * */\n  onConfigurationChanged = (config) => {\n    this._configuration = config;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  /*\n   * Render the component\n   * */\n  _render() {\n    if (this._model) {\n      const el = React.createElement(Configure, {\n        onModelChanged: this.onModelChanged,\n        onConfigurationChanged: this.onConfigurationChanged,\n        model: this._model,\n        configuration: this._configuration,\n        imageSupport: {\n          add: this.insertImage,\n          delete: this.onDeleteImage,\n        },\n        uploadSoundSupport: {\n          add: this.insertSound.bind(this),\n          delete: this.onDeleteSound.bind(this),\n        },\n      });\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}