@pie-element/number-line 13.1.2-next.1 → 13.1.2

package/configure/lib/main.js

@@ -0,0 +1,815 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toPointType = exports.default = exports.Main = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _configUi = require("@pie-lib/config-ui");
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _numberLine = require("@pie-element/number-line");
+var _numberTextField = _interopRequireDefault(require("./number-text-field"));
+var _cardBar = _interopRequireDefault(require("./card-bar"));
+var _size = _interopRequireDefault(require("./size"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _domain = _interopRequireDefault(require("./domain"));
+var _arrows = _interopRequireDefault(require("./arrows"));
+var _pointConfig = _interopRequireDefault(require("./point-config"));
+var _lodashEs = require("lodash-es");
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _ticks = _interopRequireDefault(require("./ticks"));
+var _defaults = require("./defaults");
+var _utils = require("./utils");
+var math = _interopRequireWildcard(require("mathjs"));
+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 trimModel = model => ({
+  ...model,
+  feedback: undefined,
+  prompt: undefined,
+  teacherInstructions: undefined,
+  graph: {
+    ...model.graph,
+    title: undefined,
+    disabled: true
+  },
+  correctResponse: undefined
+});
+const {
+  lineIsSwitched,
+  switchGraphLine,
+  toGraphFormat,
+  toSessionFormat
+} = _numberLine.dataConverter;
+const {
+  Panel,
+  toggle
+} = _configUi.settings;
+let minorLimits = {};
+let minorValues = {};
+let majorValues = {};
+const StyledNumberTextField = (0, _styles.styled)(_numberTextField.default)({
+  width: '150px',
+  '.MuiInputBase-input': {
+    padding: '16.5px 14px'
+  }
+});
+const Row = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  '& > *': {
+    paddingRight: theme.spacing(2)
+  }
+}));
+const PointTypeChooser = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  margin: `${theme.spacing(2.5)} 0`
+}));
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  width: '100%'
+}));
+const StyledFormSection = (0, _styles.styled)(_configUi.FormSection)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(4)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+const FlexRow = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px'
+});
+const FlexRowFormSection = (0, _styles.styled)(_configUi.FormSection)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px'
+});
+const Description = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5)
+}));
+const toPointType = response => {
+  function rest(response) {
+    if (response.pointType) {
+      if (response.direction) {
+        return `${response.pointType[0]}${response.direction[0]}`;
+      }
+      return response.pointType[0];
+    }
+    return `${response.leftPoint[0]}${response.rightPoint[0]}`;
+  }
+  return `${response.type[0]}${rest(response)}`.toUpperCase();
+};
+exports.toPointType = toPointType;
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "graphChange", obj => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      let graph = {
+        ...model.graph,
+        ...obj
+      };
+      let respIndex = [];
+      model.correctResponse.forEach((correctResp, key) => {
+        if (correctResp.domainPosition < graph.domain.min || correctResp.domainPosition > graph.domain.max || correctResp.size && (correctResp.domainPosition + correctResp.size < graph.domain.min || correctResp.domainPosition + correctResp.size > graph.domain.max)) {
+          respIndex.push(key);
+        }
+      });
+      if (respIndex.length > 0) {
+        this.setState({
+          correctAnswerDialog: {
+            open: true,
+            text: 'This\n' + 'change would make it impossible for students to plot one or more elements in the current\n' + 'correct answer. If you proceed, all such elements will be removed from the correct\n' + 'answer.',
+            indices: respIndex,
+            graph: model.graph
+          }
+        });
+      }
+      //reload ticks value whenever domain and width is changed
+      graph = this.reloadTicksData(graph);
+      onChange({
+        graph
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeSize", ({
+      width,
+      height
+    }) => this.graphChange({
+      width,
+      height
+    }));
+    (0, _defineProperty2.default)(this, "getAdjustedHeight", (availableTypes, maxNumberOfPoints) => {
+      let onlyPFAvailable = true;
+      Object.entries(availableTypes || {}).forEach(([type, value]) => {
+        if (type !== 'PF' && value) {
+          onlyPFAvailable = false;
+          return;
+        }
+      });
+      return maxNumberOfPoints && (maxNumberOfPoints === 1 || onlyPFAvailable) ? 100 : 50 + (maxNumberOfPoints || 20) * 25;
+    });
+    (0, _defineProperty2.default)(this, "changeMaxNoOfPoints", (e, maxNumberOfPoints) => {
+      maxNumberOfPoints = Math.floor(maxNumberOfPoints);
+      if (this.props.model.correctResponse.length > maxNumberOfPoints) {
+        this.setState({
+          dialog: {
+            open: true,
+            text: 'To use this value, you must first remove one or more elements from the correct answers.'
+          }
+        });
+        return;
+      }
+      const {
+        model: {
+          graph: {
+            availableTypes
+          }
+        }
+      } = this.props;
+      const height = this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+      this.graphChange({
+        maxNumberOfPoints,
+        height
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeGraphTitle", title => this.graphChange({
+      title
+    }));
+    /*
+     * Gets triggered whenever ticks related data is changed by user.
+     * */
+    (0, _defineProperty2.default)(this, "changeTicks", object => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      let {
+        ticks
+      } = object;
+      const correctResponse = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.correctResponse);
+      const initialElements = model.graph.initialElements ? _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.graph.initialElements) : [];
+      let updatedGraph = this.updateMajorValue({
+        ...model.graph,
+        ticks
+      });
+      const graph = {
+        ...updatedGraph,
+        initialElements
+      };
+      onChange({
+        graph,
+        correctResponse
+      });
+    });
+    /*
+     * This function is duplicated in controller/index.js
+     * This function will reload ticks data whenever graph object is changed and also sets required tick object
+     * for rendering Ticks Components.
+     * @param graph object containing domain, ticks and width value
+     * @return graph object with updated ticks values
+     * */
+    (0, _defineProperty2.default)(this, "reloadTicksData", graph => {
+      const {
+        domain,
+        ticks,
+        width
+      } = graph;
+      //Set tick interval type if not present for legacy number line models depending upon minor value
+      if (!ticks.tickIntervalType) {
+        if (ticks.minor > 0.5) {
+          ticks.tickIntervalType = 'Integer';
+        } else {
+          ticks.tickIntervalType = 'Decimal';
+        }
+      }
+      // This section will calculate minor and major values array and assign respective value
+      // to different tick types object
+      minorLimits = _numberLine.tickUtils.getMinorLimits(domain, width);
+      if (minorLimits.min >= 1) {
+        /*
+         * In this scenario only integer tick will be enabled
+         * */
+        ticks.tickIntervalType = 'Integer';
+        ticks.minor = ticks.minor < 1 ? math.number(math.ceil(minorLimits.min)) : ticks.minor >= math.number(math.ceil(minorLimits.min)) && ticks.minor <= math.number(math.floor(minorLimits.max)) ? ticks.minor : math.number(math.ceil(minorLimits.min));
+        ticks.integerTick = ticks.minor;
+        minorValues = {
+          decimal: [],
+          fraction: []
+        };
+        ticks.fractionTick = '0';
+        ticks.decimalTick = 0;
+      } else if (minorLimits.min >= 0 && minorLimits.max < 1) {
+        /*
+         * In this scenario only decimal or fraction tick will be enabled
+         * */
+        if (ticks.tickIntervalType === 'Integer') {
+          ticks.tickIntervalType = 'Fraction';
+        }
+        minorValues = _numberLine.tickUtils.generateMinorValues(minorLimits);
+        let minValue = math.number(math.fraction(minorValues.fraction[0]));
+        let maxValue = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
+        if (ticks.minor < minValue || ticks.minor > maxValue) {
+          switch (ticks.tickIntervalType) {
+            case 'Fraction':
+              ticks.minor = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
+              ticks.fractionTick = minorValues.fraction[minorValues.fraction.length - 1];
+              ticks.decimalTick = minorValues.decimal[0];
+              break;
+            case 'Decimal':
+            case 'Integer':
+              ticks.minor = minorValues.decimal[minorValues.decimal.length - 1];
+              ticks.decimalTick = minorValues.decimal[minorValues.decimal.length - 1];
+              ticks.fractionTick = minorValues.fraction[0];
+          }
+        } else {
+          switch (ticks.tickIntervalType) {
+            case 'Fraction':
+              let fraction = math.fraction(math.number(ticks.minor));
+              ticks.fractionTick = fraction.n + '/' + fraction.d;
+              ticks.decimalTick = ticks.decimalTick ? ticks.decimalTick : minorValues.decimal[0];
+              break;
+            case 'Decimal':
+            case 'Integer':
+              ticks.decimalTick = ticks.minor;
+              ticks.fractionTick = ticks.fractionTick ? ticks.fractionTick : minorValues.fraction[0];
+          }
+        }
+        ticks.integerTick = 1;
+      } else if (minorLimits.min < 1 && minorLimits.max >= 1) {
+        /*
+         * In this scenario all integer, decimal or fraction tick will be enabled
+         * */
+        minorValues = _numberLine.tickUtils.generateMinorValues(minorLimits);
+        if (!(ticks.minor >= minorLimits.min && ticks.minor <= minorLimits.max)) {
+          if (minorLimits.min > 0.5) {
+            ticks.tickIntervalType = 'Integer';
+          }
+          switch (ticks.tickIntervalType) {
+            case 'Integer':
+              ticks.minor = math.number(math.ceil(minorLimits.min));
+              ticks.integerTick = ticks.minor;
+              ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
+              ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
+              break;
+            case 'Decimal':
+              ticks.minor = minorValues.decimal[0];
+              ticks.integerTick = 1;
+              ticks.decimalTick = ticks.minor;
+              ticks.fractionTick = minorValues.fraction[0];
+              break;
+            case 'Fraction':
+              ticks.minor = math.number(math.fraction(minorValues.fraction[0]));
+              ticks.integerTick = 1;
+              ticks.decimalTick = minorValues.decimal[0];
+              ticks.fractionTick = minorValues.fraction[0];
+          }
+        } else {
+          switch (ticks.tickIntervalType) {
+            case 'Integer':
+              ticks.integerTick = ticks.minor;
+              ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
+              ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
+              break;
+            case 'Decimal':
+              ticks.integerTick = 1;
+              ticks.decimalTick = ticks.minor;
+              ticks.fractionTick = minorValues.fraction[0];
+              break;
+            case 'Fraction':
+              ticks.integerTick = 1;
+              ticks.decimalTick = minorValues.decimal[0];
+              let fraction = math.fraction(math.number(ticks.minor));
+              ticks.fractionTick = fraction.n + '/' + fraction.d;
+          }
+        }
+      }
+      return this.updateMajorValue({
+        ...graph,
+        ticks
+      });
+    });
+    /*
+     * This function is duplicated in controller/index.js
+     * This function will update major value whenever minor value is changed or tick type is changed
+     * @param graph object containing domain, ticks and width value
+     * @return graph object with updated ticks values
+     * */
+    (0, _defineProperty2.default)(this, "updateMajorValue", graph => {
+      const {
+        domain,
+        ticks,
+        width
+      } = graph;
+      majorValues = _numberLine.tickUtils.generateMajorValuesForMinor(ticks.minor, domain, width);
+      if (majorValues.decimal.indexOf(ticks.major) === -1) {
+        let currIndex = 0;
+        if (ticks.tickIntervalType === 'Integer') {
+          currIndex = majorValues.decimal.length > 4 ? 4 : majorValues.decimal.length - 1;
+        } else {
+          currIndex = majorValues.decimal.length - 1;
+        }
+        ticks.major = majorValues.decimal[currIndex];
+      }
+      graph.fraction = ticks.tickIntervalType === 'Fraction' && ticks.major < 1;
+      return {
+        ...graph,
+        ticks
+      };
+    });
+    (0, _defineProperty2.default)(this, "changeArrows", arrows => this.graphChange({
+      arrows
+    }));
+    (0, _defineProperty2.default)(this, "setDefaults", () => {
+      const {
+        graph: {
+          availableTypes,
+          maxNumberOfPoints
+        }
+      } = _defaults.model;
+      const height = this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+      const graph = {
+        ...(0, _lodashEs.cloneDeep)(_defaults.model.graph),
+        height
+      };
+      this.props.onChange({
+        graph
+      });
+    });
+    (0, _defineProperty2.default)(this, "moveCorrectResponse", (index, el, position) => {
+      el.position = position;
+      const {
+        onChange,
+        model
+      } = this.props;
+      const update = toSessionFormat(el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el);
+      const correctResponse = [...model.correctResponse];
+      correctResponse[index] = update;
+      onChange({
+        correctResponse
+      });
+    });
+    (0, _defineProperty2.default)(this, "availableTypesChange", availableTypes => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        correctResponse,
+        graph: {
+          maxNumberOfPoints
+        }
+      } = model;
+      new Set(correctResponse.map(toPointType)).forEach(pointType => {
+        availableTypes[pointType] = true;
+      });
+      const height = this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+      const graph = {
+        ...model.graph,
+        availableTypes,
+        height
+      };
+      onChange({
+        graph
+      });
+    });
+    (0, _defineProperty2.default)(this, "deleteCorrectResponse", indices => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const correctResponse = model.correctResponse.filter((v, index) => !indices.some(d => d === index));
+      onChange({
+        correctResponse
+      });
+    });
+    (0, _defineProperty2.default)(this, "addCorrectResponse", data => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const correctResponse = [...model.correctResponse];
+      correctResponse.push(toSessionFormat(data));
+      onChange({
+        correctResponse
+      });
+    });
+    (0, _defineProperty2.default)(this, "clearCorrectResponse", () => {
+      const {
+        onChange
+      } = this.props;
+      onChange({
+        correctResponse: []
+      });
+    });
+    (0, _defineProperty2.default)(this, "undoCorrectResponse", () => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const correctResponse = [...model.correctResponse];
+      correctResponse.pop();
+      onChange({
+        correctResponse
+      });
+    });
+    const {
+      model: {
+        graph: {
+          availableTypes: _availableTypes,
+          maxNumberOfPoints: _maxNumberOfPoints
+        }
+      }
+    } = props;
+    const _height = this.getAdjustedHeight(_availableTypes, _maxNumberOfPoints);
+    this.state = {
+      dialog: {
+        open: false,
+        text: ''
+      },
+      correctAnswerDialog: {
+        open: false,
+        text: ''
+      }
+    };
+    this.graphChange({
+      height: _height
+    });
+  }
+  componentDidMount() {
+    const {
+      configuration,
+      model,
+      onChange
+    } = this.props;
+    const {
+      title
+    } = configuration || {};
+    const {
+      titleEnabled: showTitle
+    } = model || {};
+    const titleEnabled = showTitle === undefined || showTitle === null ? title.enabled : showTitle;
+    onChange && onChange({
+      ...model,
+      titleEnabled
+    });
+  }
+  render() {
+    const {
+      model,
+      onChange,
+      configuration,
+      onConfigurationChanged,
+      uploadSoundSupport,
+      imageSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      instruction = {},
+      teacherInstructions = {},
+      title = {},
+      prompt = {},
+      rationale = {},
+      spellCheck = {},
+      mathMlOptions = {},
+      numberLineDimensions = {},
+      maxMaxElements = 20,
+      hidePointConfigButtons = false,
+      availableTools = ['PF'],
+      settingsPanelDisabled = false
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      spellCheckEnabled,
+      toolbarEditorPosition,
+      teacherInstructionsEnabled,
+      titleEnabled,
+      promptEnabled,
+      rationaleEnabled
+    } = model || {};
+    let {
+      graph
+    } = model;
+    graph = this.reloadTicksData(graph);
+    const {
+      dialog,
+      correctAnswerDialog
+    } = this.state;
+    const {
+      correctResponseError,
+      domainError,
+      maxError,
+      pointsError,
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError,
+      widthError
+    } = errors || {};
+    const validationMessage = (0, _utils.generateValidationMessage)();
+    const correctResponse = (0, _lodashEs.cloneDeep)(model.correctResponse || []).map(toGraphFormat);
+    const initialModel = (0, _lodashEs.cloneDeep)(model);
+    initialModel['disabled'] = true;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      titleEnabled: title.settings && toggle(title.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: onChange,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Properties: panelProperties
+        }
+      })
+    }, /*#__PURE__*/_react.default.createElement(Description, {
+      component: "div",
+      type: "body1"
+    }, instruction.label), teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.teacherInstructions || '',
+      onChange: teacherInstructions => onChange({
+        teacherInstructions
+      }),
+      nonEmpty: false,
+      disableUnderline: true,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.prompt || '',
+      onChange: prompt => onChange({
+        prompt
+      }),
+      nonEmpty: false,
+      disableUnderline: true,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Set Up Number Line",
+      info: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage,
+        slotProps: {
+          tooltip: {
+            sx: theme => ({
+              fontSize: theme.typography.fontSize - 2,
+              whiteSpace: 'pre',
+              maxWidth: '500px'
+            })
+          }
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '8px'
+        }
+      }))
+    }, "Set up the number line by entering the domain and number of tick marks to display. Labels on the number line can be edited or removed by clicking on the label."), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(_domain.default, {
+      domain: graph.domain,
+      errors: errors,
+      onChange: domain => this.graphChange({
+        domain
+      })
+    })), maxError && /*#__PURE__*/_react.default.createElement(ErrorText, null, maxError), domainError && /*#__PURE__*/_react.default.createElement(ErrorText, null, domainError), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_configUi.FormSection, null, /*#__PURE__*/_react.default.createElement(_ticks.default, {
+      ticks: graph.ticks,
+      minorLimits: minorLimits,
+      minorValues: minorValues,
+      majorValues: majorValues,
+      onChange: this.changeTicks
+    }))), /*#__PURE__*/_react.default.createElement(FlexRow, null, model.widthEnabled && /*#__PURE__*/_react.default.createElement(_size.default, {
+      size: graph,
+      min: numberLineDimensions.min,
+      max: numberLineDimensions.max,
+      step: numberLineDimensions.step,
+      onChange: this.changeSize
+    }), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement(_arrows.default, {
+      arrows: graph.arrows,
+      onChange: this.changeArrows
+    })), widthError && /*#__PURE__*/_react.default.createElement(ErrorText, null, widthError), /*#__PURE__*/_react.default.createElement(_numberLine.NumberLineComponent, {
+      onMoveElement: () => {},
+      onDeleteElements: () => {},
+      onAddElement: () => {},
+      onClearElements: () => {},
+      onUndoElement: () => {},
+      minWidth: numberLineDimensions.min,
+      maxWidth: numberLineDimensions.max,
+      maxHeight: 70,
+      model: trimModel(initialModel)
+    }), titleEnabled && /*#__PURE__*/_react.default.createElement(StyledFormSection, {
+      label: title?.label || 'Title'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: graph.title || '',
+      onChange: this.changeGraphTitle,
+      toolbarOpts: toolbarOpts,
+      activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
+      pluginProps: getPluginProps(title?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    })), !graph.exhibitOnly && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Define Tool Set and Correct Response"
+    }, "Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line. ", /*#__PURE__*/_react.default.createElement("i", null, "Note: A maximum of 20 points, line segments or rays may be plotted.")), /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Available Tools",
+      mini: true
+    }, "Click on the input options to be displayed to the students. All inputs will display by default."), /*#__PURE__*/_react.default.createElement(PointTypeChooser, null, /*#__PURE__*/_react.default.createElement(_pointConfig.default, {
+      onSelectionChange: this.availableTypesChange,
+      selection: graph.availableTypes,
+      availableTools: availableTools,
+      hideButtons: hidePointConfigButtons
+    })), /*#__PURE__*/_react.default.createElement(FlexRowFormSection, null, /*#__PURE__*/_react.default.createElement("label", null, "Max No of Elements"), /*#__PURE__*/_react.default.createElement(StyledNumberTextField, {
+      min: 1,
+      max: maxMaxElements,
+      onlyIntegersAllowed: true,
+      value: graph.maxNumberOfPoints,
+      onChange: this.changeMaxNoOfPoints
+    }), pointsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, pointsError)), /*#__PURE__*/_react.default.createElement("label", null, "Correct Answer"), /*#__PURE__*/_react.default.createElement(_numberLine.NumberLineComponent, {
+      onMoveElement: this.moveCorrectResponse,
+      onDeleteElements: this.deleteCorrectResponse,
+      onAddElement: this.addCorrectResponse,
+      onClearElements: this.clearCorrectResponse,
+      onUndoElement: this.undoCorrectResponse,
+      minWidth: numberLineDimensions.min,
+      maxWidth: numberLineDimensions.max,
+      answer: correctResponse
+      //strip feedback for this model
+      ,
+      model: trimModel(model)
+    }), correctResponseError && /*#__PURE__*/_react.default.createElement(ErrorText, null, correctResponseError)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: dialog.open,
+      title: "Warning",
+      text: dialog.text,
+      onConfirm: () => this.setState({
+        dialog: {
+          open: false
+        }
+      })
+    }), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: correctAnswerDialog.open,
+      title: "Warning",
+      text: correctAnswerDialog.text,
+      onConfirm: () => {
+        let indices = this.state.correctAnswerDialog.indices;
+        if (indices && indices.length > 0) {
+          this.deleteCorrectResponse(indices);
+        }
+        this.setState({
+          correctAnswerDialog: {
+            open: false
+          }
+        });
+      },
+      onClose: () => {
+        const graph = this.state.correctAnswerDialog.graph;
+        onChange({
+          graph
+        });
+        this.setState({
+          correctAnswerDialog: {
+            open: false
+          }
+        });
+      },
+      onConfirmText: 'OK',
+      onCloseText: 'Cancel'
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label || 'Rationale'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.rationale || '',
+      onChange: rationale => onChange({
+        rationale
+      }),
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)));
+  }
+}
+exports.Main = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.object.isRequired,
+  uploadSoundSupport: _propTypes.default.object.isRequired
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map