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

package/lib/number-line/graph/elements/ray.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Ray = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 colors = _interopRequireWildcard(require("../../colors"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _arrow = _interopRequireDefault(require("../arrow"));
+
+var _point = _interopRequireDefault(require("./point"));
+
+var _base = require("./base");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
+
+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 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; }
+
+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; } }
+
+var rayColor = function rayColor(_rayColor) {
+  return {
+    '& line': {
+      stroke: _rayColor
+    },
+    '& .arrow': {
+      fill: _rayColor,
+      strokeWidth: '1px',
+      stroke: _rayColor
+    }
+  };
+};
+
+var style = {
+  ray: {
+    '& line': {
+      cursor: 'pointer',
+      strokeWidth: '5px',
+      stroke: _renderUi.color.primary()
+    },
+    '& line, & .arrow': {
+      transition: 'stroke 150ms linear, fill 150ms linear'
+    }
+  },
+  selected: rayColor(colors.selected),
+  correct: rayColor(colors.correct),
+  incorrect: rayColor(colors.incorrect),
+  arrowCorrect: {
+    fill: colors.correct,
+    '--arrow-color': colors.correct
+  },
+  arrowIncorrect: {
+    fill: colors.incorrect,
+    '--arrow-color': colors.incorrect
+  },
+  arrowSelected: {
+    fill: colors.selected,
+    '--arrow-color': colors.selected
+  }
+};
+
+var Ray = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Ray, _React$Component);
+
+  var _super = _createSuper(Ray);
+
+  function Ray(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Ray);
+    _this = _super.call(this, props);
+    _this.state = {
+      dragPosition: null
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Ray, [{
+    key: "drag",
+    value: function drag(p) {
+      var domain = this.props.domain;
+
+      if (p >= domain.min && p <= domain.max) {
+        this.setState({
+          dragPosition: p
+        });
+      }
+    }
+  }, {
+    key: "stopDrag",
+    value: function stopDrag() {
+      this.setState({
+        dragPosition: null
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames, _classNames2;
+
+      /* eslint-disable */
+      var _this$props = this.props,
+          interval = _this$props.interval,
+          empty = _this$props.empty,
+          position = _this$props.position,
+          direction = _this$props.direction,
+          domain = _this$props.domain,
+          y = _this$props.y,
+          selected = _this$props.selected,
+          disabled = _this$props.disabled,
+          width = _this$props.width,
+          correct = _this$props.correct,
+          classes = _this$props.classes;
+      /* eslint-enable */
+
+      var xScale = this.context.xScale;
+      var drag = this.drag.bind(this);
+      var stopDrag = this.stopDrag.bind(this);
+      var finalPosition = (0, _isNumber["default"])(this.state.dragPosition) ? this.state.dragPosition : position;
+      var className = (0, _classnames["default"])(classes.ray, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.selected, selected), (0, _defineProperty2["default"])(_classNames, classes.correct, correct === true), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correct === false), _classNames));
+      var positive = direction === 'positive';
+      var left = positive ? finalPosition : domain.min;
+      var right = positive ? domain.max : finalPosition; // const triangleX = positive ? xScale(right) : xScale(left);
+      //const et the line run all the way to 0 or width.
+
+      var x1 = positive ? xScale(left) : 8;
+      var x2 = positive ? width - 8 : xScale(right);
+      var arrowX = positive ? width : 0;
+      var arrowDirection = positive ? 'right' : 'left';
+
+      var noop = function noop() {};
+
+      var arrowClassNames = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.arrowCorrect, correct === true), (0, _defineProperty2["default"])(_classNames2, classes.arrowIncorrect, correct === false), (0, _defineProperty2["default"])(_classNames2, classes.arrowSelected, selected), _classNames2));
+      return /*#__PURE__*/_react["default"].createElement("g", {
+        className: className,
+        transform: "translate(0, ".concat(y, ")")
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        onClick: disabled ? noop : this.props.onToggleSelect,
+        className: "line-handle",
+        x1: x1,
+        x2: x2
+      }), /*#__PURE__*/_react["default"].createElement(_point["default"], {
+        disabled: disabled,
+        correct: correct,
+        selected: selected,
+        empty: empty,
+        interval: interval,
+        bounds: {
+          left: domain.min - position,
+          right: domain.max - position
+        },
+        position: position,
+        onDrag: drag,
+        onDragStop: stopDrag,
+        onMove: this.props.onMove
+      }), /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+        x: arrowX,
+        className: arrowClassNames,
+        direction: arrowDirection
+      }));
+    }
+  }]);
+  return Ray;
+}(_react["default"].Component);
+
+exports.Ray = Ray;
+(0, _defineProperty2["default"])(Ray, "propTypes", _objectSpread(_objectSpread({}, (0, _base.basePropTypes)()), {}, {
+  width: _propTypes["default"].number.isRequired,
+  selected: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  empty: _propTypes["default"].bool,
+  direction: _propTypes["default"].oneOf(['positive', 'negative']),
+  y: _propTypes["default"].number,
+  position: _propTypes["default"].number.isRequired,
+  onMove: _propTypes["default"].func.isRequired,
+  onToggleSelect: _propTypes["default"].func.isRequired
+}));
+(0, _defineProperty2["default"])(Ray, "defaultProps", {
+  selected: false,
+  direction: 'positive',
+  y: 0,
+  disabled: false
+});
+(0, _defineProperty2["default"])(Ray, "contextTypes", {
+  xScale: _propTypes["default"].func.isRequired,
+  snapValue: _propTypes["default"].func.isRequired
+});
+
+var _default = (0, _reactJss["default"])(style)(Ray);
+
+exports["default"] = _default;
+//# sourceMappingURL=ray.js.map

package/lib/number-line/graph/elements/ray.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/number-line/graph/elements/ray.jsx"],"names":["rayColor","stroke","fill","strokeWidth","style","ray","cursor","color","primary","transition","selected","colors","correct","incorrect","arrowCorrect","arrowIncorrect","arrowSelected","Ray","props","state","dragPosition","p","domain","min","max","setState","interval","empty","position","direction","y","disabled","width","classes","xScale","context","drag","bind","stopDrag","finalPosition","className","positive","left","right","x1","x2","arrowX","arrowDirection","noop","arrowClassNames","onToggleSelect","onMove","React","Component","PropTypes","number","isRequired","bool","oneOf","func","snapValue"],"mappings":"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","sourcesContent":["import * as colors from '../../colors';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Arrow from '../arrow';\nimport Point from './point';\nimport { basePropTypes } from './base';\nimport classNames from 'classnames';\nimport injectSheet from 'react-jss';\nimport isNumber from 'lodash/isNumber';\n\nconst rayColor = (rayColor) => ({\n  '& line': {\n    stroke: rayColor,\n  },\n  '& .arrow': {\n    fill: rayColor,\n    strokeWidth: '1px',\n    stroke: rayColor,\n  },\n});\n\nconst style = {\n  ray: {\n    '& line': {\n      cursor: 'pointer',\n      strokeWidth: '5px',\n      stroke: color.primary(),\n    },\n    '& line, & .arrow': {\n      transition: 'stroke 150ms linear, fill 150ms linear',\n    },\n  },\n  selected: rayColor(colors.selected),\n  correct: rayColor(colors.correct),\n  incorrect: rayColor(colors.incorrect),\n  arrowCorrect: {\n    fill: colors.correct,\n    '--arrow-color': colors.correct,\n  },\n  arrowIncorrect: {\n    fill: colors.incorrect,\n    '--arrow-color': colors.incorrect,\n  },\n  arrowSelected: {\n    fill: colors.selected,\n    '--arrow-color': colors.selected,\n  },\n};\n\nexport class Ray extends React.Component {\n  static propTypes = {\n    ...basePropTypes(),\n    width: PropTypes.number.isRequired,\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    empty: PropTypes.bool,\n    direction: PropTypes.oneOf(['positive', 'negative']),\n    y: PropTypes.number,\n    position: PropTypes.number.isRequired,\n    onMove: PropTypes.func.isRequired,\n    onToggleSelect: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    selected: false,\n    direction: 'positive',\n    y: 0,\n    disabled: false,\n  };\n\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n    snapValue: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragPosition: null,\n    };\n  }\n\n  drag(p) {\n    const { domain } = this.props;\n    if (p >= domain.min && p <= domain.max) {\n      this.setState({ dragPosition: p });\n    }\n  }\n\n  stopDrag() {\n    this.setState({ dragPosition: null });\n  }\n\n  render() {\n    /* eslint-disable */\n    const { interval, empty, position, direction, domain, y, selected, disabled, width, correct, classes } = this.props;\n    /* eslint-enable */\n    const { xScale } = this.context;\n\n    const drag = this.drag.bind(this);\n    const stopDrag = this.stopDrag.bind(this);\n\n    const finalPosition = isNumber(this.state.dragPosition) ? this.state.dragPosition : position;\n\n    const className = classNames(classes.ray, {\n      [classes.selected]: selected,\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n    });\n\n    const positive = direction === 'positive';\n    const left = positive ? finalPosition : domain.min;\n    const right = positive ? domain.max : finalPosition;\n    // const triangleX = positive ? xScale(right) : xScale(left);\n\n    //const et the line run all the way to 0 or width.\n    const x1 = positive ? xScale(left) : 8;\n    const x2 = positive ? width - 8 : xScale(right);\n    const arrowX = positive ? width : 0;\n    const arrowDirection = positive ? 'right' : 'left';\n\n    const noop = () => {};\n\n    const arrowClassNames = classNames({\n      [classes.arrowCorrect]: correct === true,\n      [classes.arrowIncorrect]: correct === false,\n      [classes.arrowSelected]: selected,\n    });\n\n    return (\n      <g className={className} transform={`translate(0, ${y})`}>\n        <line onClick={disabled ? noop : this.props.onToggleSelect} className=\"line-handle\" x1={x1} x2={x2} />\n        <Point\n          disabled={disabled}\n          correct={correct}\n          selected={selected}\n          empty={empty}\n          interval={interval}\n          bounds={{ left: domain.min - position, right: domain.max - position }}\n          position={position}\n          onDrag={drag}\n          onDragStop={stopDrag}\n          onMove={this.props.onMove}\n        />\n        <Arrow x={arrowX} className={arrowClassNames} direction={arrowDirection} />\n      </g>\n    );\n  }\n}\n\nexport default injectSheet(style)(Ray);\n"],"file":"ray.js"}

package/lib/number-line/graph/index.js

@@ -0,0 +1,328 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NumberLineGraph = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _d3Scale = require("d3-scale");
+
+var _d3Selection = require("d3-selection");
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _point = _interopRequireDefault(require("./elements/point"));
+
+var _line = _interopRequireDefault(require("./elements/line"));
+
+var _ray = _interopRequireDefault(require("./elements/ray"));
+
+var _line2 = _interopRequireDefault(require("./line"));
+
+var _arrow = _interopRequireDefault(require("./arrow"));
+
+var _ticks = _interopRequireDefault(require("./ticks"));
+
+var _tickUtils = require("./tick-utils");
+
+var _stacks = _interopRequireDefault(require("./stacks"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _transitions = require("../transitions");
+
+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; } }
+
+var getXScale = function getXScale(min, max, width, padding) {
+  if (min === undefined || max === undefined || width === undefined) {
+    throw new Error('missing min/max/width');
+  }
+
+  return (0, _d3Scale.scaleLinear)().domain([min, max]).range([padding, width - padding]);
+};
+
+var Debug = function Debug(props) {
+  return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("text", {
+    x: "00",
+    y: "20"
+  }, JSON.stringify(props)));
+};
+
+var NumberLineGraph = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(NumberLineGraph, _React$Component);
+
+  var _super = _createSuper(NumberLineGraph);
+
+  function NumberLineGraph(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, NumberLineGraph);
+    _this = _super.call(this, props);
+    _this.state = {};
+    return _this;
+  }
+
+  (0, _createClass2["default"])(NumberLineGraph, [{
+    key: "xScaleFn",
+    value: function xScaleFn() {
+      var _this$props = this.props,
+          domain = _this$props.domain,
+          width = _this$props.width;
+
+      var _ref = domain || {},
+          max = _ref.max,
+          min = _ref.min;
+
+      var padding = 20;
+
+      if (max) {
+        padding = max.toString().length * 4 + 15;
+      }
+
+      return getXScale(min, max, width, padding);
+    }
+  }, {
+    key: "snapValueFn",
+    value: function snapValueFn() {
+      var _this$props2 = this.props,
+          domain = _this$props2.domain,
+          ticks = _this$props2.ticks;
+      return _tickUtils.snapTo.bind(null, domain.min, domain.max, ticks.minor);
+    }
+  }, {
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        xScale: this.xScaleFn(),
+        snapValue: this.snapValueFn()
+      };
+    }
+    /**
+     * Note: we use d3 click + mouse to give us domain values directly.
+     * Saves us having to calculate them ourselves from a MouseEvent.
+     */
+
+  }, {
+    key: "onRectClick",
+    value: function onRectClick(rect) {
+      var _this$props3 = this.props,
+          elements = _this$props3.elements,
+          disabled = _this$props3.disabled;
+
+      if (disabled) {
+        return;
+      }
+
+      var anyElementSelected = elements.some(function (e) {
+        return e.selected;
+      });
+
+      if (anyElementSelected) {
+        this.props.onDeselectElements();
+      } else {
+        var coords = (0, _d3Selection.mouse)(rect._groups[0][0]);
+        var x = this.xScaleFn().invert(coords[0]);
+        this.addElement(x);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var rect = (0, _d3Selection.select)(this.rect);
+      rect.on('click', this.onRectClick.bind(this, rect));
+    }
+  }, {
+    key: "addElement",
+    value: function addElement(x) {
+      var snapFn = this.snapValueFn();
+      var v = snapFn(x);
+      this.props.onAddElement(v);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          domain = _this$props4.domain,
+          width = _this$props4.width,
+          ticks = _this$props4.ticks,
+          height = _this$props4.height,
+          onToggleElement = _this$props4.onToggleElement,
+          onMoveElement = _this$props4.onMoveElement,
+          disabled = _this$props4.disabled,
+          fraction = _this$props4.fraction;
+      var arrows = this.props.arrows;
+      arrows = arrows || {
+        left: true,
+        right: true
+      };
+      var min = domain.min,
+          max = domain.max;
+
+      if (domain.max <= domain.min) {
+        return /*#__PURE__*/_react["default"].createElement("div", null, domain.max, " is less than or equal to ", domain.min);
+      } else {
+        var lineY = height - 30;
+        var stacks = new _stacks["default"](domain);
+        var elements = this.props.elements.map(function (el, index) {
+          var stackIndex = stacks.add(el);
+
+          if (stackIndex === -1) {
+            throw new Error('stack index is -1, cant add element');
+          }
+
+          var y = lineY - stackIndex * 25;
+          var commonProps = {
+            key: index,
+            y: y,
+            selected: el.selected && !disabled,
+            interval: ticks.minor,
+            disabled: disabled,
+            correct: el.correct
+          };
+          var toggleElement = onToggleElement.bind(null, index, el);
+          var moveElement = onMoveElement.bind(null, index, el);
+
+          if (el.type === 'line') {
+            var empty = {
+              left: el.leftPoint === 'empty',
+              right: el.rightPoint === 'empty'
+            };
+            return /*#__PURE__*/_react["default"].createElement(_line["default"], (0, _extends2["default"])({}, commonProps, {
+              domain: {
+                min: min,
+                max: max
+              },
+              onMoveLine: moveElement,
+              onToggleSelect: toggleElement,
+              position: el.position,
+              empty: empty
+            }));
+          } else if (el.type === 'point') {
+            var bounds = {
+              left: min - el.position,
+              right: max - el.position
+            };
+            return /*#__PURE__*/_react["default"].createElement(_point["default"], (0, _extends2["default"])({}, commonProps, {
+              empty: el.pointType === 'empty',
+              position: el.position,
+              bounds: bounds,
+              onClick: toggleElement,
+              onMove: moveElement
+            }));
+          } else if (el.type === 'ray') {
+            return /*#__PURE__*/_react["default"].createElement(_ray["default"], (0, _extends2["default"])({}, commonProps, {
+              domain: {
+                min: min,
+                max: max
+              },
+              direction: el.direction,
+              position: el.position,
+              onMove: moveElement,
+              onToggleSelect: toggleElement,
+              width: width,
+              empty: el.pointType === 'empty'
+            }));
+          }
+        });
+        return /*#__PURE__*/_react["default"].createElement("svg", {
+          width: width,
+          height: fraction ? height + 20 : height
+        }, false && /*#__PURE__*/_react["default"].createElement(Debug, {
+          domain: domain,
+          ticks: ticks
+        }), /*#__PURE__*/_react["default"].createElement(_line2["default"], {
+          y: lineY,
+          width: width
+        }), arrows.left && /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+          y: lineY
+        }), arrows.right && /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
+          x: width,
+          y: lineY,
+          direction: "right"
+        }), /*#__PURE__*/_react["default"].createElement(_ticks["default"], {
+          y: lineY,
+          domain: domain,
+          width: width,
+          ticks: ticks,
+          fraction: fraction
+        }), /*#__PURE__*/_react["default"].createElement("rect", {
+          ref: function ref(rect) {
+            return _this2.rect = rect;
+          } //need to have a fill for it to be clickable
+          ,
+          fill: _renderUi.color.primary(),
+          fillOpacity: "0.0",
+          width: width,
+          height: height
+        }), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, {
+          component: "g"
+        }, elements.map(function (c, index) {
+          return /*#__PURE__*/_react["default"].createElement(_transitions.Fade, {
+            key: index
+          }, c);
+        })));
+      }
+    }
+  }]);
+  return NumberLineGraph;
+}(_react["default"].Component);
+
+exports.NumberLineGraph = NumberLineGraph;
+(0, _defineProperty2["default"])(NumberLineGraph, "childContextTypes", {
+  xScale: _propTypes["default"].func.isRequired,
+  snapValue: _propTypes["default"].func.isRequired
+});
+(0, _defineProperty2["default"])(NumberLineGraph, "propTypes", {
+  domain: _propTypes["default"].shape({
+    min: _propTypes["default"].number.isRequired,
+    max: _propTypes["default"].number.isRequired
+  }).isRequired,
+  ticks: _propTypes["default"].shape({
+    minor: _propTypes["default"].number,
+    major: _propTypes["default"].number
+  }).isRequired,
+  fraction: _propTypes["default"].bool,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  onToggleElement: _propTypes["default"].func.isRequired,
+  onMoveElement: _propTypes["default"].func.isRequired,
+  onAddElement: _propTypes["default"].func.isRequired,
+  debug: _propTypes["default"].bool,
+  elements: _propTypes["default"].array,
+  disabled: _propTypes["default"].bool,
+  onDeselectElements: _propTypes["default"].func,
+  arrows: _propTypes["default"].shape({
+    left: _propTypes["default"].bool,
+    right: _propTypes["default"].bool
+  })
+});
+(0, _defineProperty2["default"])(NumberLineGraph, "defaultProps", {
+  debug: false
+});
+var _default = NumberLineGraph;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/number-line/graph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/number-line/graph/index.jsx"],"names":["getXScale","min","max","width","padding","undefined","Error","domain","range","Debug","props","JSON","stringify","NumberLineGraph","state","toString","length","ticks","snapTo","bind","minor","xScale","xScaleFn","snapValue","snapValueFn","rect","elements","disabled","anyElementSelected","some","e","selected","onDeselectElements","coords","_groups","x","invert","addElement","on","onRectClick","snapFn","v","onAddElement","height","onToggleElement","onMoveElement","fraction","arrows","left","right","lineY","stacks","Stacks","map","el","index","stackIndex","add","y","commonProps","key","interval","correct","toggleElement","moveElement","type","empty","leftPoint","rightPoint","position","bounds","pointType","direction","color","primary","c","React","Component","PropTypes","func","isRequired","shape","number","major","bool","debug","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { scaleLinear } from 'd3-scale';\nimport { select, mouse } from 'd3-selection';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport Point from './elements/point';\nimport Line from './elements/line';\nimport Ray from './elements/ray';\nimport BaseLine from './line';\nimport Arrow from './arrow';\nimport Ticks from './ticks';\nimport { snapTo } from './tick-utils';\nimport Stacks from './stacks';\nimport { TransitionGroup } from 'react-transition-group';\nimport PropTypes from 'prop-types';\nimport { Fade } from '../transitions';\n\nconst getXScale = (min, max, width, padding) => {\n  if (min === undefined || max === undefined || width === undefined) {\n    throw new Error('missing min/max/width');\n  }\n\n  return scaleLinear()\n    .domain([min, max])\n    .range([padding, width - padding]);\n};\n\nconst Debug = (props) => (\n  <g>\n    <text x=\"00\" y=\"20\">\n      {JSON.stringify(props)}\n    </text>\n  </g>\n);\n\nexport class NumberLineGraph extends React.Component {\n  static childContextTypes = {\n    xScale: PropTypes.func.isRequired,\n    snapValue: PropTypes.func.isRequired,\n  };\n\n  static propTypes = {\n    domain: PropTypes.shape({\n      min: PropTypes.number.isRequired,\n      max: PropTypes.number.isRequired,\n    }).isRequired,\n    ticks: PropTypes.shape({ minor: PropTypes.number, major: PropTypes.number }).isRequired,\n    fraction: PropTypes.bool,\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n    onToggleElement: PropTypes.func.isRequired,\n    onMoveElement: PropTypes.func.isRequired,\n    onAddElement: PropTypes.func.isRequired,\n    debug: PropTypes.bool,\n    elements: PropTypes.array,\n    disabled: PropTypes.bool,\n    onDeselectElements: PropTypes.func,\n    arrows: PropTypes.shape({ left: PropTypes.bool, right: PropTypes.bool }),\n  };\n\n  static defaultProps = {\n    debug: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  xScaleFn() {\n    const { domain, width } = this.props;\n    const { max, min } = domain || {};\n\n    let padding = 20;\n\n    if (max) {\n      padding = max.toString().length * 4 + 15;\n    }\n\n    return getXScale(min, max, width, padding);\n  }\n\n  snapValueFn() {\n    const { domain, ticks } = this.props;\n    return snapTo.bind(null, domain.min, domain.max, ticks.minor);\n  }\n\n  getChildContext() {\n    return {\n      xScale: this.xScaleFn(),\n      snapValue: this.snapValueFn(),\n    };\n  }\n\n  /**\n   * Note: we use d3 click + mouse to give us domain values directly.\n   * Saves us having to calculate them ourselves from a MouseEvent.\n   */\n  onRectClick(rect) {\n    const { elements, disabled } = this.props;\n\n    if (disabled) {\n      return;\n    }\n\n    const anyElementSelected = elements.some((e) => e.selected);\n\n    if (anyElementSelected) {\n      this.props.onDeselectElements();\n    } else {\n      var coords = mouse(rect._groups[0][0]);\n      const x = this.xScaleFn().invert(coords[0]);\n      this.addElement(x);\n    }\n  }\n\n  componentDidMount() {\n    const rect = select(this.rect);\n    rect.on('click', this.onRectClick.bind(this, rect));\n  }\n\n  addElement(x) {\n    const snapFn = this.snapValueFn();\n    const v = snapFn(x);\n    this.props.onAddElement(v);\n  }\n\n  render() {\n    const { domain, width, ticks, height, onToggleElement, onMoveElement, disabled, fraction } = this.props;\n    let { arrows } = this.props;\n\n    arrows = arrows || { left: true, right: true };\n    const { min, max } = domain;\n\n    if (domain.max <= domain.min) {\n      return (\n        <div>\n          {domain.max} is less than or equal to {domain.min}\n        </div>\n      );\n    } else {\n      const lineY = height - 30;\n\n      const stacks = new Stacks(domain);\n\n      const elements = this.props.elements.map((el, index) => {\n        const stackIndex = stacks.add(el);\n\n        if (stackIndex === -1) {\n          throw new Error('stack index is -1, cant add element');\n        }\n\n        const y = lineY - stackIndex * 25;\n\n        const commonProps = {\n          key: index,\n          y,\n          selected: el.selected && !disabled,\n          interval: ticks.minor,\n          disabled,\n          correct: el.correct,\n        };\n\n        const toggleElement = onToggleElement.bind(null, index, el);\n        const moveElement = onMoveElement.bind(null, index, el);\n\n        if (el.type === 'line') {\n          const empty = {\n            left: el.leftPoint === 'empty',\n            right: el.rightPoint === 'empty',\n          };\n\n          return (\n            <Line\n              {...commonProps}\n              domain={{ min: min, max: max }}\n              onMoveLine={moveElement}\n              onToggleSelect={toggleElement}\n              position={el.position}\n              empty={empty}\n            />\n          );\n        } else if (el.type === 'point') {\n          const bounds = {\n            left: min - el.position,\n            right: max - el.position,\n          };\n\n          return (\n            <Point\n              {...commonProps}\n              empty={el.pointType === 'empty'}\n              position={el.position}\n              bounds={bounds}\n              onClick={toggleElement}\n              onMove={moveElement}\n            />\n          );\n        } else if (el.type === 'ray') {\n          return (\n            <Ray\n              {...commonProps}\n              domain={{ min: min, max: max }}\n              direction={el.direction}\n              position={el.position}\n              onMove={moveElement}\n              onToggleSelect={toggleElement}\n              width={width}\n              empty={el.pointType === 'empty'}\n            />\n          );\n        }\n      });\n\n      return (\n        <svg width={width} height={fraction ? height + 20 : height}>\n          {false && <Debug domain={domain} ticks={ticks} />}\n          <BaseLine y={lineY} width={width} />\n          {arrows.left && <Arrow y={lineY} />}\n          {arrows.right && <Arrow x={width} y={lineY} direction=\"right\" />}\n          <Ticks y={lineY} domain={domain} width={width} ticks={ticks} fraction={fraction} />\n          <rect\n            ref={(rect) => (this.rect = rect)}\n            //need to have a fill for it to be clickable\n            fill={color.primary()}\n            fillOpacity=\"0.0\"\n            width={width}\n            height={height}\n          />\n          <TransitionGroup component=\"g\">\n            {elements.map((c, index) => (\n              <Fade key={index}>{c}</Fade>\n            ))}\n          </TransitionGroup>\n        </svg>\n      );\n    }\n  }\n}\n\nexport default NumberLineGraph;\n"],"file":"index.js"}

package/lib/number-line/graph/line.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Line = Line;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var style = {
+  root: {
+    strokeWidth: 2,
+    stroke: _renderUi.color.primary()
+  }
+};
+
+function Line(_ref) {
+  var y = _ref.y,
+      width = _ref.width,
+      classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement("line", {
+    x1: 0,
+    y1: y,
+    x2: width,
+    y2: y,
+    className: classes.root
+  });
+}
+
+Line.propTypes = {
+  y: _propTypes["default"].number.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  classes: _propTypes["default"].object.isRequired
+};
+
+var _default = (0, _reactJss["default"])(style)(Line);
+
+exports["default"] = _default;
+//# sourceMappingURL=line.js.map

package/lib/number-line/graph/line.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/number-line/graph/line.jsx"],"names":["style","root","strokeWidth","stroke","color","primary","Line","y","width","classes","propTypes","PropTypes","number","isRequired","object"],"mappings":";;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG;AACZC,EAAAA,IAAI,EAAE;AACJC,IAAAA,WAAW,EAAE,CADT;AAEJC,IAAAA,MAAM,EAAEC,gBAAMC,OAAN;AAFJ;AADM,CAAd;;AAOO,SAASC,IAAT,OAAqC;AAAA,MAArBC,CAAqB,QAArBA,CAAqB;AAAA,MAAlBC,KAAkB,QAAlBA,KAAkB;AAAA,MAAXC,OAAW,QAAXA,OAAW;AAC1C,sBAAO;AAAM,IAAA,EAAE,EAAE,CAAV;AAAa,IAAA,EAAE,EAAEF,CAAjB;AAAoB,IAAA,EAAE,EAAEC,KAAxB;AAA+B,IAAA,EAAE,EAAED,CAAnC;AAAsC,IAAA,SAAS,EAAEE,OAAO,CAACR;AAAzD,IAAP;AACD;;AAEDK,IAAI,CAACI,SAAL,GAAiB;AACfH,EAAAA,CAAC,EAAEI,sBAAUC,MAAV,CAAiBC,UADL;AAEfL,EAAAA,KAAK,EAAEG,sBAAUC,MAAV,CAAiBC,UAFT;AAGfJ,EAAAA,OAAO,EAAEE,sBAAUG,MAAV,CAAiBD;AAHX,CAAjB;;eAMe,0BAAYb,KAAZ,EAAmBM,IAAnB,C","sourcesContent":["import React from 'react';\nimport injectSheet from 'react-jss';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst style = {\n  root: {\n    strokeWidth: 2,\n    stroke: color.primary(),\n  },\n};\n\nexport function Line({ y, width, classes }) {\n  return <line x1={0} y1={y} x2={width} y2={y} className={classes.root} />;\n}\n\nLine.propTypes = {\n  y: PropTypes.number.isRequired,\n  width: PropTypes.number.isRequired,\n  classes: PropTypes.object.isRequired,\n};\n\nexport default injectSheet(style)(Line);\n"],"file":"line.js"}