@pie-element/number-line 8.9.1-next.1 → 8.9.1-next.10

package/configure/lib/main.js

@@ -0,0 +1,867 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toPointType = exports["default"] = exports.Main = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
+
+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 _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _ticks = _interopRequireDefault(require("./ticks"));
+
+var _defaults = require("./defaults");
+
+var _utils = require("./utils");
+
+var math = _interopRequireWildcard(require("mathjs"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var trimModel = function trimModel(model) {
+  return _objectSpread(_objectSpread({}, model), {}, {
+    feedback: undefined,
+    prompt: undefined,
+    teacherInstructions: undefined,
+    graph: _objectSpread(_objectSpread({}, model.graph), {}, {
+      title: undefined,
+      disabled: true
+    }),
+    correctResponse: undefined
+  });
+};
+
+var lineIsSwitched = _numberLine.dataConverter.lineIsSwitched,
+    switchGraphLine = _numberLine.dataConverter.switchGraphLine,
+    toGraphFormat = _numberLine.dataConverter.toGraphFormat,
+    toSessionFormat = _numberLine.dataConverter.toSessionFormat;
+var minorLimits = {};
+var minorValues = {};
+var majorValues = {};
+
+var styles = function styles(theme) {
+  return {
+    maxNumberOfPoints: {
+      width: '150px'
+    },
+    checkbox: {
+      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 2
+    },
+    row: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      '& > *': {
+        paddingRight: theme.spacing.unit * 2
+      }
+    },
+    pointTypeChooser: {
+      margin: "".concat(theme.spacing.unit * 2.5, "px 0")
+    },
+    promptContainer: {
+      paddingTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 2,
+      width: '100%'
+    },
+    title: {
+      marginBottom: theme.spacing.unit * 4
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    inlineFlexContainer: {
+      display: 'inline-flex'
+    },
+    resetButton: {
+      marginBottom: theme.spacing.unit * 2.5
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingTop: theme.spacing.unit
+    },
+    flexRow: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '10px'
+    },
+    description: {
+      marginBottom: theme.spacing.unit * 2.5
+    }
+  };
+};
+
+var toPointType = function toPointType(response) {
+  function rest(response) {
+    if (response.pointType) {
+      if (response.direction) {
+        return "".concat(response.pointType[0]).concat(response.direction[0]);
+      }
+
+      return response.pointType[0];
+    }
+
+    return "".concat(response.leftPoint[0]).concat(response.rightPoint[0]);
+  }
+
+  return "".concat(response.type[0]).concat(rest(response)).toUpperCase();
+};
+
+exports.toPointType = toPointType;
+
+var Main = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Main, _React$Component);
+
+  var _super = _createSuper(Main);
+
+  function Main(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Main);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "graphChange", function (obj) {
+      var _this$props = _this.props,
+          model = _this$props.model,
+          onChange = _this$props.onChange;
+
+      var graph = _objectSpread(_objectSpread({}, model.graph), obj);
+
+      var respIndex = [];
+      model.correctResponse.forEach(function (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: graph
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSize", function (_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return _this.graphChange({
+        width: width,
+        height: height
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAdjustedHeight", function (availableTypes, maxNumberOfPoints) {
+      var onlyPFAvailable = true;
+      Object.entries(availableTypes || {}).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+            type = _ref3[0],
+            value = _ref3[1];
+
+        if (type !== 'PF' && value) {
+          onlyPFAvailable = false;
+          return;
+        }
+      });
+      return maxNumberOfPoints && (maxNumberOfPoints === 1 || onlyPFAvailable) ? 100 : 50 + (maxNumberOfPoints || 20) * 25;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxNoOfPoints", function (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;
+      }
+
+      var availableTypes = _this.props.model.graph.availableTypes;
+
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+
+      _this.graphChange({
+        maxNumberOfPoints: maxNumberOfPoints,
+        height: height
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeGraphTitle", function (title) {
+      return _this.graphChange({
+        title: title
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTicks", function (object) {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onChange = _this$props2.onChange;
+      var ticks = object.ticks;
+
+      var correctResponse = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.correctResponse);
+
+      var initialElements = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.graph.initialElements);
+
+      var updatedGraph = _this.updateMajorValue(_objectSpread(_objectSpread({}, model.graph), {}, {
+        ticks: ticks
+      }));
+
+      var graph = _objectSpread(_objectSpread({}, updatedGraph), {}, {
+        initialElements: initialElements
+      });
+
+      onChange({
+        graph: graph,
+        correctResponse: correctResponse
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "reloadTicksData", function (graph) {
+      var domain = graph.domain,
+          ticks = graph.ticks,
+          width = graph.width; //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);
+        var minValue = math.number(math.fraction(minorValues.fraction[0]));
+        var 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':
+              var 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];
+
+              var _fraction = math.fraction(math.number(ticks.minor));
+
+              ticks.fractionTick = _fraction.n + '/' + _fraction.d;
+          }
+        }
+      }
+
+      return _this.updateMajorValue(_objectSpread(_objectSpread({}, graph), {}, {
+        ticks: ticks
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateMajorValue", function (graph) {
+      var domain = graph.domain,
+          ticks = graph.ticks,
+          width = graph.width;
+      majorValues = _numberLine.tickUtils.generateMajorValuesForMinor(ticks.minor, domain, width);
+
+      if (majorValues.decimal.indexOf(ticks.major) === -1) {
+        var 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 _objectSpread(_objectSpread({}, graph), {}, {
+        ticks: ticks
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeArrows", function (arrows) {
+      return _this.graphChange({
+        arrows: arrows
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDefaults", function () {
+      var _defaultModel$graph = _defaults.model.graph,
+          availableTypes = _defaultModel$graph.availableTypes,
+          maxNumberOfPoints = _defaultModel$graph.maxNumberOfPoints;
+
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+
+      var graph = _objectSpread(_objectSpread({}, (0, _cloneDeep["default"])(_defaults.model.graph)), {}, {
+        height: height
+      });
+
+      _this.props.onChange({
+        graph: graph
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveCorrectResponse", function (index, el, position) {
+      el.position = position;
+      var _this$props3 = _this.props,
+          onChange = _this$props3.onChange,
+          model = _this$props3.model;
+      var update = toSessionFormat(el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el);
+      var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
+      correctResponse[index] = update;
+      onChange({
+        correctResponse: correctResponse
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "availableTypesChange", function (availableTypes) {
+      var _this$props4 = _this.props,
+          model = _this$props4.model,
+          onChange = _this$props4.onChange;
+      var correctResponse = model.correctResponse,
+          maxNumberOfPoints = model.graph.maxNumberOfPoints;
+      new Set(correctResponse.map(toPointType)).forEach(function (pointType) {
+        availableTypes[pointType] = true;
+      });
+
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+
+      var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
+        availableTypes: availableTypes,
+        height: height
+      });
+
+      onChange({
+        graph: graph
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteCorrectResponse", function (indices) {
+      var _this$props5 = _this.props,
+          model = _this$props5.model,
+          onChange = _this$props5.onChange;
+      var correctResponse = model.correctResponse.filter(function (v, index) {
+        return !indices.some(function (d) {
+          return d === index;
+        });
+      });
+      onChange({
+        correctResponse: correctResponse
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addCorrectResponse", function (data) {
+      var _this$props6 = _this.props,
+          model = _this$props6.model,
+          onChange = _this$props6.onChange;
+      var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
+      correctResponse.push(toSessionFormat(data));
+      onChange({
+        correctResponse: correctResponse
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearCorrectResponse", function () {
+      var onChange = _this.props.onChange;
+      onChange({
+        correctResponse: []
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "undoCorrectResponse", function () {
+      var _this$props7 = _this.props,
+          model = _this$props7.model,
+          onChange = _this$props7.onChange;
+      var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
+      correctResponse.pop();
+      onChange({
+        correctResponse: correctResponse
+      });
+    });
+    var _props$model$graph = props.model.graph,
+        _availableTypes = _props$model$graph.availableTypes,
+        _maxNumberOfPoints = _props$model$graph.maxNumberOfPoints;
+
+    var _height = _this.getAdjustedHeight(_availableTypes, _maxNumberOfPoints);
+
+    _this.state = {
+      dialog: {
+        open: false,
+        text: ''
+      },
+      correctAnswerDialog: {
+        open: false,
+        text: ''
+      }
+    };
+
+    _this.graphChange({
+      height: _height
+    });
+
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Main, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props8 = this.props,
+          classes = _this$props8.classes,
+          model = _this$props8.model,
+          _onChange = _this$props8.onChange,
+          configuration = _this$props8.configuration,
+          uploadSoundSupport = _this$props8.uploadSoundSupport;
+
+      var _ref4 = configuration || {},
+          _ref4$baseInputConfig = _ref4.baseInputConfiguration,
+          baseInputConfiguration = _ref4$baseInputConfig === void 0 ? {} : _ref4$baseInputConfig,
+          _ref4$contentDimensio = _ref4.contentDimensions,
+          contentDimensions = _ref4$contentDimensio === void 0 ? {} : _ref4$contentDimensio,
+          _ref4$instruction = _ref4.instruction,
+          instruction = _ref4$instruction === void 0 ? {} : _ref4$instruction,
+          _ref4$teacherInstruct = _ref4.teacherInstructions,
+          teacherInstructions = _ref4$teacherInstruct === void 0 ? {} : _ref4$teacherInstruct,
+          _ref4$title = _ref4.title,
+          title = _ref4$title === void 0 ? {} : _ref4$title,
+          _ref4$prompt = _ref4.prompt,
+          prompt = _ref4$prompt === void 0 ? {} : _ref4$prompt,
+          _ref4$mathMlOptions = _ref4.mathMlOptions,
+          mathMlOptions = _ref4$mathMlOptions === void 0 ? {} : _ref4$mathMlOptions,
+          _ref4$numberLineDimen = _ref4.numberLineDimensions,
+          numberLineDimensions = _ref4$numberLineDimen === void 0 ? {} : _ref4$numberLineDimen,
+          _ref4$maxMaxElements = _ref4.maxMaxElements,
+          maxMaxElements = _ref4$maxMaxElements === void 0 ? 20 : _ref4$maxMaxElements,
+          _ref4$hidePointConfig = _ref4.hidePointConfigButtons,
+          hidePointConfigButtons = _ref4$hidePointConfig === void 0 ? false : _ref4$hidePointConfig,
+          _ref4$availableTools = _ref4.availableTools,
+          availableTools = _ref4$availableTools === void 0 ? ['PF'] : _ref4$availableTools;
+
+      var _ref5 = model || {},
+          _ref5$errors = _ref5.errors,
+          errors = _ref5$errors === void 0 ? {} : _ref5$errors,
+          spellCheckEnabled = _ref5.spellCheckEnabled,
+          toolbarEditorPosition = _ref5.toolbarEditorPosition;
+
+      var graph = model.graph;
+      graph = this.reloadTicksData(graph);
+      var _this$state = this.state,
+          dialog = _this$state.dialog,
+          correctAnswerDialog = _this$state.correctAnswerDialog;
+
+      var _ref6 = errors || {},
+          correctResponseError = _ref6.correctResponseError,
+          domainError = _ref6.domainError,
+          maxError = _ref6.maxError,
+          pointsError = _ref6.pointsError,
+          promptError = _ref6.prompt,
+          teacherInstructionsError = _ref6.teacherInstructions,
+          widthError = _ref6.widthError;
+
+      var validationMessage = (0, _utils.generateValidationMessage)();
+      var correctResponse = (0, _cloneDeep["default"])(model.correctResponse || []).map(toGraphFormat);
+      var initialModel = (0, _cloneDeep["default"])(model);
+      initialModel['disabled'] = true;
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+
+      var getPluginProps = function getPluginProps() {
+        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
+      };
+
+      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        dimensions: contentDimensions,
+        hideSettings: true,
+        settings: null
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        component: "div",
+        type: "body1",
+        className: classes.description
+      }, instruction.label), teacherInstructions.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: teacherInstructions.label,
+        className: classes.promptContainer
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.teacherInstructions,
+        markup: model.teacherInstructions || '',
+        onChange: function onChange(teacherInstructions) {
+          return _onChange({
+            teacherInstructions: teacherInstructions
+          });
+        },
+        nonEmpty: false,
+        disableUnderline: true,
+        error: teacherInstructionsError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
+        spellCheck: spellCheckEnabled,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, teacherInstructionsError)), prompt.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: prompt.label,
+        className: classes.promptContainer
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        className: classes.prompt,
+        markup: model.prompt || '',
+        onChange: function onChange(prompt) {
+          return _onChange({
+            prompt: prompt
+          });
+        },
+        nonEmpty: false,
+        disableUnderline: true,
+        error: promptError,
+        toolbarOpts: toolbarOpts,
+        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
+        spellCheck: spellCheckEnabled,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, promptError)), /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
+        header: "Set Up Number Line",
+        info: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+          classes: {
+            tooltip: classes.tooltip
+          },
+          disableFocusListener: true,
+          disableTouchListener: true,
+          placement: 'right',
+          title: validationMessage
+        }, /*#__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("div", {
+        className: classes.row
+      }, /*#__PURE__*/_react["default"].createElement(_domain["default"], {
+        domain: graph.domain,
+        errors: errors,
+        onChange: function onChange(domain) {
+          return _this2.graphChange({
+            domain: domain
+          });
+        }
+      })), maxError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, maxError), domainError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, 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("div", {
+        className: classes.flexRow
+      }, 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("div", {
+        className: classes.errorText
+      }, widthError), /*#__PURE__*/_react["default"].createElement(_numberLine.NumberLineComponent, {
+        onMoveElement: function onMoveElement() {},
+        onDeleteElements: function onDeleteElements() {},
+        onAddElement: function onAddElement() {},
+        onClearElements: function onClearElements() {},
+        onUndoElement: function onUndoElement() {},
+        minWidth: numberLineDimensions.min,
+        maxWidth: numberLineDimensions.max,
+        maxHeight: 70,
+        model: trimModel(initialModel)
+      }), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
+        label: (title === null || title === void 0 ? void 0 : title.label) || 'Title',
+        className: classes.title
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        markup: graph.title || '',
+        onChange: this.changeGraphTitle,
+        toolbarOpts: toolbarOpts,
+        activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
+        pluginProps: getPluginProps(title === null || title === void 0 ? void 0 : title.inputConfiguration),
+        spellCheck: spellCheckEnabled,
+        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("div", {
+        className: classes.pointTypeChooser
+      }, /*#__PURE__*/_react["default"].createElement(_pointConfig["default"], {
+        onSelectionChange: this.availableTypesChange,
+        selection: graph.availableTypes,
+        availableTools: availableTools,
+        hideButtons: hidePointConfigButtons
+      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
+        className: classes.flexRow
+      }, /*#__PURE__*/_react["default"].createElement("label", null, "Max No of Elements"), /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
+        className: classes.maxNumberOfPoints,
+        min: 1,
+        max: maxMaxElements,
+        onlyIntegersAllowed: true,
+        value: graph.maxNumberOfPoints,
+        onChange: this.changeMaxNoOfPoints
+      }), pointsError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, 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("div", {
+        className: classes.errorText
+      }, correctResponseError)), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: dialog.open,
+        title: "Warning",
+        text: dialog.text,
+        onConfirm: function onConfirm() {
+          return _this2.setState({
+            dialog: {
+              open: false
+            }
+          });
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: correctAnswerDialog.open,
+        title: "Warning",
+        text: correctAnswerDialog.text,
+        onConfirm: function onConfirm() {
+          var indices = _this2.state.correctAnswerDialog.indices;
+
+          if (indices && indices.length > 0) {
+            _this2.deleteCorrectResponse(indices);
+          }
+
+          _this2.setState({
+            correctAnswerDialog: {
+              open: false
+            }
+          });
+        },
+        onClose: function onClose() {
+          var graph = _this2.state.correctAnswerDialog.graph;
+
+          _onChange({
+            graph: graph
+          });
+
+          _this2.setState({
+            correctAnswerDialog: {
+              open: false
+            }
+          });
+        },
+        onConfirmText: 'OK',
+        onCloseText: 'Cancel'
+      }));
+    }
+  }]);
+  return Main;
+}(_react["default"].Component);
+
+exports.Main = Main;
+(0, _defineProperty2["default"])(Main, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  model: _propTypes["default"].object.isRequired,
+  configuration: _propTypes["default"].object.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  uploadSoundSupport: _propTypes["default"].object.isRequired
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'Main'
+})(Main);
+
+exports["default"] = _default;
+//# sourceMappingURL=main.js.map