@pie-element/graphing 0.1.0

package/src/author/graphing-config.tsx

@@ -0,0 +1,333 @@
+// @ts-nocheck
+/**
+ * @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';
+import { GraphContainer, GridSetup } from '@pie-lib/graphing';
+import { AlertDialog } from '@pie-lib/config-ui';
+import { MenuItem, Select, Typography, OutlinedInput } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { applyConstraints, filterPlotableMarks, getGridValues, getLabelValues } from './utils.js';
+import { isEqual } from 'lodash-es';
+
+const Container: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  marginBottom: theme.spacing(2.5),
+}));
+
+const GridConfigWrapper: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  marginRight: theme.spacing(3),
+  marginBottom: theme.spacing(2.5),
+}));
+
+const GraphConfig: any = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const SubtitleText: any = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(1),
+}));
+
+const GridConfig: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  width: '100%',
+  marginBottom: theme.spacing(2.5),
+}));
+
+const GridConfigLabel: any = styled(Typography)(({ theme }) => ({
+  padding: `0 ${theme.spacing(1)}`,
+}));
+
+const GridConfigSelect: any = styled(Select)({
+  flex: '1',
+});
+
+export class GraphingConfig extends React.Component {
+  static propTypes = {
+    availableTools: PropTypes.array,
+    authoring: PropTypes.object,
+    dimensionsEnabled: PropTypes.bool,
+    graphDimensions: PropTypes.object,
+    gridConfigurations: PropTypes.array,
+    labelsPlaceholders: PropTypes.object,
+    model: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    showLabels: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    titlePlaceholder: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    const { domain, range, graph } = props.model || {};
+
+    const gridValues = {
+      domain: getGridValues(domain, graph.width, true),
+      range: getGridValues(range, graph.height, true),
+    };
+    const labelValues = {
+      domain: getLabelValues(domain.step),
+      range: getLabelValues(range.step),
+    };
+
+    this.state = {
+      gridValues,
+      labelValues,
+      showPixelGuides: false,
+      dialog: { isOpened: false },
+      domain: { ...domain },
+      range: { ...range },
+    };
+  }
+
+  changeBackgroundMarks: any = (backgroundMarks) => {
+    const model = { ...this.props.model, backgroundMarks };
+
+    this.props.onChange(model);
+  };
+
+  changeLabels: any = (labels) => {
+    const { model, onChange } = this.props;
+
+    onChange({ ...model, labels });
+  };
+
+  changeTitle: any = (title) => {
+    const { model, onChange } = this.props;
+
+    onChange({ ...model, title });
+  };
+
+  onConfigChange: any = (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, graph, range, standardGrid } = updatedModel;
+    const gridValues = { domain: [], range: [] };
+    const labelValues = { domain: [], range: [] };
+    const selectedGrid = newSelectedGrid >= 0 ? newSelectedGrid : oldSelectedGrid;
+
+    if (includeAxes) {
+      const domainConstraints = 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 = applyConstraints(range, graph.height, oldGridValues.range, oldLabelValues.range);
+
+        gridValues.range = rangeConstraints.gridValues || [];
+        labelValues.range = rangeConstraints.labelValues || [];
+      }
+    }
+
+    const plotableAnswers = filterPlotableMarks(domain, range, answers);
+
+    if (!isEqual(answers, plotableAnswers)) {
+      this.setState({
+        dialog: {
+          isOpened: true,
+          onClose: () =>
+            this.setState({ dialog: { isOpened: false } }, onChange({ ...model, domain: oldDomain, range: oldRange })),
+          onConfirm: () => {
+            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 });
+  };
+
+  onChangeView: any = (event, expanded) => {
+    const { graphDimensions: { enabled } = {} } = this.props;
+
+    if (enabled) {
+      this.setState({ showPixelGuides: expanded });
+    }
+  };
+
+  changeGridConfiguration: any = (event) => {
+    const { gridConfigurations } = this.props;
+    const { value } = event.target;
+
+    this.onConfigChange(gridConfigurations?.[value] || {}, value);
+  };
+
+  render() {
+    const {
+      authoring = {},
+      availableTools = [],
+      gridConfigurations = [],
+      graphDimensions = {},
+      labelsPlaceholders,
+      model,
+      showLabels,
+      dimensionsEnabled,
+      showTitle,
+      titlePlaceholder,
+      mathMlOptions = {},
+      removeIncompleteTool,
+    } = this.props;
+    const {
+      arrows,
+      backgroundMarks,
+      coordinatesOnHover,
+      defaultGridConfiguration,
+      domain,
+      includeAxes,
+      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: authoring.includeAxesEnabled,
+      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 (
+      <Container>
+        <GridConfigWrapper>
+          {gridConfigurations && gridConfigurations.length ? (
+            <GridConfig>
+              <GridConfigLabel component="div" variant="h6">
+                Grid Configuration
+              </GridConfigLabel>
+
+              <GridConfigSelect
+                input={<OutlinedInput />}
+                displayEmpty
+                onChange={this.changeGridConfiguration}
+                value={defaultGridConfiguration}
+                MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+              >
+                {(gridConfigurations || []).map((config, index) => (
+                  <MenuItem key={index} value={index}>
+                    {config.label}
+                  </MenuItem>
+                ))}
+              </GridConfigSelect>
+            </GridConfig>
+          ) : null}
+
+          {displayGridSetup && (
+            <GridSetup
+              displayedFields={displayedFields}
+              domain={domain}
+              gridValues={gridValues}
+              includeAxes={includeAxes}
+              labelValues={labelValues}
+              range={range}
+              size={graph}
+              sizeConstraints={sizeConstraints}
+              standardGrid={standardGrid}
+              onChange={this.onConfigChange}
+              onChangeView={this.onChangeView}
+            />
+          )}
+        </GridConfigWrapper>
+
+        <GraphConfig key="graph">
+          <Typography component="div" variant="h6">
+            Define Graph Attributes
+          </Typography>
+
+          <SubtitleText component="div" variant="body1">
+            Use this interface to add/edit a title and/or labels, and to set background shapes
+          </SubtitleText>
+
+          <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={backgroundMarks}
+            onChangeLabels={this.changeLabels}
+            onChangeMarks={this.changeBackgroundMarks}
+            onChangeTitle={this.changeTitle}
+            range={range}
+            showLabels={showLabels}
+            showPixelGuides={showPixelGuides}
+            showTitle={showTitle}
+            size={{ width: graph.width, height: graph.height }}
+            title={title}
+            titlePlaceholder={titlePlaceholder}
+            toolbarTools={availableTools}
+            mathMlOptions={mathMlOptions}
+            removeIncompleteTool={removeIncompleteTool}
+          />
+        </GraphConfig>
+
+        <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}
+        />
+      </Container>
+    );
+  }
+}
+
+export default GraphingConfig;

package/src/author/index.ts

@@ -0,0 +1,204 @@
+// @ts-nocheck
+/**
+ * @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.
+ */
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Configure from './configure.js';
+import {
+  DeleteImageEvent,
+  DeleteSoundEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  ModelUpdatedEvent,
+} from '@pie-element/shared-configure-events';
+import debug from 'debug';
+import defaultValues from './defaults.js';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { cloneDeep } from 'lodash-es';
+
+const log = debug('pie-elements:graphing: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;
+    }, {});
+
+export default class GraphLinesConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => {
+    const normalizedModel = { ...defaultValues.model, ...model };
+    const {
+      answers = {},
+      domain = {},
+      defaultTool,
+      graph = {},
+      range = {},
+      standardGrid,
+      toolbarTools,
+    } = normalizedModel;
+
+    // added support for models without defaultTool defined; also used in packages/graphing/controller/src/index.js
+    const toolbarToolsNoLabel = (toolbarTools || []).filter((tool) => tool !== 'label');
+    const normalizedDefaultTool = defaultTool || (toolbarToolsNoLabel.length && toolbarToolsNoLabel[0]) || '';
+
+    return {
+      ...normalizedModel,
+      answers:
+        (answers &&
+          answers.correctAnswer && {
+            correctAnswer: answers.correctAnswer,
+            ...sortedAnswers(answers),
+          }) ||
+        answers,
+      defaultTool: normalizedDefaultTool,
+      range:
+        (standardGrid && {
+          ...range,
+          min: domain.min,
+          max: domain.max,
+          step: domain.step,
+          labelStep: domain.labelStep,
+        }) ||
+        range,
+      graph: (standardGrid && { ...graph, height: graph.width }) || graph,
+    };
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = GraphLinesConfigure.createDefaultModel();
+    this._configuration = defaultValues.configuration;
+  }
+
+  set model(m) {
+    this._model = GraphLinesConfigure.createDefaultModel(m);
+    this._modelCopy = cloneDeep(this._model);
+
+    this._render();
+  }
+
+  resetModelAfterConfigurationIsSet: any = () => {
+    // In environments that use pie-player-components, model is set before configuration.
+    // This is the reason why sometimes the model gets altered non-reversible
+    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)
+    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset
+    // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called
+    const pieAuthors = document.querySelectorAll('pie-author');
+    this.hasPlayerAsParent = Array.from(pieAuthors).some((author) => author.contains(this));
+
+    if (this.hasPlayerAsParent) {
+      if (this._modelCopy) {
+        this._model = this._modelCopy;
+      } else {
+        delete this._modelCopy;
+      }
+    }
+  };
+
+  set configuration(c) {
+    this._configuration = {
+      ...defaultValues.configuration,
+      ...c,
+    };
+
+    this.resetModelAfterConfigurationIsSet();
+
+    // 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();
+  }
+
+  onModelChanged: any = (model) => {
+    this._model = model;
+    this._render();
+
+    log('[onModelChanged]: ', this._model);
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model));
+  };
+
+  onConfigurationChanged: any = (config) => {
+    this._configuration = config;
+    this._render();
+  };
+
+  insertImage: any = (handler) => {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  };
+
+  onDeleteImage: any = (src, done) => {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  };
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    if (this._model) {
+      const el = React.createElement(Configure, {
+        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 = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        renderMath(this);
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/author/utils.ts

@@ -0,0 +1,144 @@
+// @ts-nocheck
+/**
+ * @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.
+ */
+
+import { isEqual } from 'lodash-es';
+
+const VALID_GRID_VALUES = [
+  0.01, 0.02, 0.04, 0.05, 0.0625, 0.1, 0.125, 0.2, 0.25, 0.5, 1, 2, 3, 4, 5, 8, 10, 12, 15, 20, 40, 50, 64, 100, 500,
+  1000,
+];
+
+// same as VALID_GRID_VALUES but next values are excluded: 0.04, 0.0625, 0.125, 3, 4, 8, 12, 15, 40, 64
+const PREFERRED_VALID_GRID_VALUES = [0.01, 0.02, 0.05, 0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 20, 50, 100, 500, 1000];
+
+export const VALID_LABEL_VALUES = {
+  0.01: [0, 0.01, 0.02, 0.04, 0.05, 0.1],
+  0.02: [0, 0.02, 0.04, 0.1],
+  0.04: [0, 0.04, 0.08, 0.16, 0.2],
+  0.05: [0, 0.05, 0.1, 0.2, 0.25],
+  0.0625: [0, 0.0625, 0.125, 0.25, 0.5],
+  0.1: [0, 0.1, 0.2, 0.4, 0.5, 1],
+  0.125: [0, 0.125, 0.25, 0.5, 1],
+  0.2: [0, 0.2, 0.5, 0.1],
+  0.25: [0, 0.25, 0.5, 1, 2],
+  0.5: [0, 0.5, 1, 2],
+  1: [0, 1, 2, 4, 5, 10],
+  2: [0, 2, 4, 8, 10],
+  3: [0, 3, 6, 12, 15],
+  4: [0, 4, 8, 16, 20],
+  5: [0, 5, 10, 20, 25],
+  8: [0, 8, 16, 32, 40, 64],
+  10: [0, 10, 20, 40, 50, 100],
+  12: [0, 12, 24],
+  15: [0, 15, 30, 60],
+  20: [0, 20, 40, 80, 100],
+  40: [0, 40, 80, 160, 200],
+  50: [0, 50, 100, 200, 250],
+  64: [0, 64, 128],
+  100: [0, 100, 200, 400, 500],
+  500: [0, 500, 1000, 2500],
+  1000: [0, 1000, 2000, 4000, 5000],
+};
+
+export const getGridValues = (axis, size, prefferedValues = false) => {
+  const minValue = (10 * (axis.max - axis.min)) / size;
+  const maxValue = minValue * 10;
+
+  // if preferred values should be used enforce all values to be used if the axis step
+  // is included in all supported values and not included in preferred values
+  const useAllValues =
+    prefferedValues && !PREFERRED_VALID_GRID_VALUES.includes(axis.step) && VALID_GRID_VALUES.includes(axis.step);
+  const values = !prefferedValues || useAllValues ? VALID_GRID_VALUES : PREFERRED_VALID_GRID_VALUES;
+
+  return values.filter((value) => value >= minValue && value <= maxValue);
+};
+
+export const getLabelValues = (value) => VALID_LABEL_VALUES[value] || [];
+
+export const applyConstraints = (axis, size, oldGridValues, oldLabelValues) => {
+  const gridValues = getGridValues(axis, size);
+  let labelValues = getLabelValues(axis.step);
+
+  if (!isEqual(oldGridValues, gridValues) && !gridValues.includes(axis.step)) {
+    const preferredValues = getGridValues(axis, size, true);
+    const lowestValue = preferredValues[0] || 1;
+
+    axis.step = lowestValue;
+    labelValues = getLabelValues(lowestValue);
+
+    if (!labelValues.includes(axis.labelStep)) {
+      axis.labelStep = lowestValue;
+    }
+
+    return { gridValues, labelValues };
+  }
+
+  if (!isEqual(oldLabelValues, labelValues) && !labelValues.includes(axis.labelStep)) {
+    axis.labelStep = axis.step;
+  }
+
+  return { gridValues, labelValues };
+};
+
+// also used in pie-lib/graphing/utils as 'getTickValues'
+const getPlotablePoints = (prop) => {
+  const tickValues = [];
+  let tickVal = 0;
+
+  while (tickVal >= prop.min && tickValues.indexOf(tickVal) < 0) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal - prop.step) * 10000) / 10000;
+  }
+
+  tickVal = Math.round(prop.step * 10000) / 10000;
+
+  while (tickVal <= prop.max && tickValues.indexOf(tickVal) < 0) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
+  }
+
+  // return only ticks that are inside the min-max interval
+  if (tickValues) {
+    return tickValues.filter((tV) => tV >= prop.min && tV <= prop.max);
+  }
+
+  return [];
+};
+
+export const filterPlotableMarks = (domain, range, answers) => {
+  const domainValues = getPlotablePoints(domain);
+  const rangeValues = getPlotablePoints(range);
+
+  const isPointPlotable = (x, y) => domainValues.includes(x) && rangeValues.includes(y);
+
+  return Object.entries(answers || {}).reduce((newAnswers, [key, answer]) => {
+    newAnswers[key] = {
+      ...answer,
+      marks: (answer.marks || []).filter((mark) => {
+        if (mark.type === 'point') {
+          return isPointPlotable(mark.x, mark.y);
+        }
+
+        if (mark.type === 'polygon') {
+          return !mark.points.find((point) => !isPointPlotable(point.x, point.y));
+        }
+
+        const from = mark.from || mark.root;
+        const to = mark.to || mark.edge;
+
+        return mark.building
+          ? isPointPlotable(from.x, from.y)
+          : isPointPlotable(from.x, from.y) && isPointPlotable(to.x, to.y);
+      }),
+    };
+
+    return newAnswers;
+  }, {});
+};