@pie-element/number-line 11.3.4-next.3 → 12.0.0-beta.0

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

@@ -1,328 +1,262 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NumberLineGraph = void 0;
-
+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/render-ui");
-
+var _core = require("@dnd-kit/core");
 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) {
+const 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;
+const Debug = props => /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
+  x: "00",
+  y: "20"
+}, JSON.stringify(props)));
+class NumberLineGraph extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
   }
-
-  (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);
+  xScaleFn() {
+    const {
+      domain,
+      width
+    } = this.props;
+    const {
+      max,
+      min
+    } = domain || {};
+    let padding = 20;
+    if (max) {
+      padding = max.toString().length * 4 + 15;
     }
-  }, {
-    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;
-      });
+    return getXScale(min, max, width, padding);
+  }
+  snapValueFn() {
+    const {
+      domain,
+      ticks
+    } = this.props;
+    return _tickUtils.snapTo.bind(null, domain.min, domain.max, ticks.minor);
+  }
+  getChildContext() {
+    return {
+      xScale: this.xScaleFn(),
+      snapValue: this.snapValueFn()
+    };
+  }
 
-      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);
-      }
+  /**
+   * Note: we use d3 click + mouse to give us domain values directly.
+   * Saves us having to calculate them ourselves from a MouseEvent.
+   */
+  onRectClick(rect) {
+    const {
+      elements,
+      disabled
+    } = this.props;
+    if (disabled) {
+      return;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var rect = (0, _d3Selection.select)(this.rect);
-      rect.on('click', this.onRectClick.bind(this, rect));
+    const anyElementSelected = elements.some(e => e.selected);
+    if (anyElementSelected) {
+      this.props.onDeselectElements();
+    } else {
+      var coords = (0, _d3Selection.mouse)(rect._groups[0][0]);
+      const x = this.xScaleFn().invert(coords[0]);
+      this.addElement(x);
     }
-  }, {
-    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
+  }
+  componentDidMount() {
+    const rect = (0, _d3Selection.select)(this.rect);
+    rect.on('click', this.onRectClick.bind(this, rect));
+  }
+  addElement(x) {
+    const snapFn = this.snapValueFn();
+    const v = snapFn(x);
+    this.props.onAddElement(v);
+  }
+  render() {
+    const {
+      domain,
+      width,
+      ticks,
+      height,
+      onToggleElement,
+      onMoveElement,
+      disabled,
+      fraction
+    } = this.props;
+    let {
+      arrows
+    } = this.props;
+    arrows = arrows || {
+      left: true,
+      right: true
+    };
+    const {
+      min,
+      max
+    } = domain;
+    if (domain.max <= domain.min) {
+      return /*#__PURE__*/_react.default.createElement("div", null, domain.max, " is less than or equal to ", domain.min);
+    } else {
+      const lineY = height - 30;
+      const stacks = new _stacks.default(domain);
+      const elements = this.props.elements.map((el, index) => {
+        const stackIndex = stacks.add(el);
+        if (stackIndex === -1) {
+          throw new Error('stack index is -1, cant add element');
+        }
+        const y = lineY - stackIndex * 25;
+        const commonProps = {
+          key: index,
+          y,
+          selected: el.selected && !disabled,
+          interval: ticks.minor,
+          disabled,
+          correct: el.correct
+        };
+        const toggleElement = onToggleElement.bind(null, index, el);
+        const moveElement = onMoveElement.bind(null, index, el);
+        if (el.type === 'line') {
+          const empty = {
+            left: el.leftPoint === 'empty',
+            right: el.rightPoint === 'empty'
           };
-          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, {
+          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,
+            key: index
+          }));
+        } else if (el.type === 'point') {
+          const 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,
+            key: index
+          }));
+        } 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',
             key: index
-          }, c);
-        })));
-      }
+          }));
+        }
+      });
+      return /*#__PURE__*/_react.default.createElement(_core.DndContext, null, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'inline-block'
+        }
+      }, /*#__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: rect => this.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((c, index) => /*#__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, "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
+(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
+  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
+  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", {
+(0, _defineProperty2.default)(NumberLineGraph, "defaultProps", {
   debug: false
 });
-var _default = NumberLineGraph;
-exports["default"] = _default;
+var _default = exports.default = NumberLineGraph;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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/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"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_d3Scale","_d3Selection","_renderUi","_core","_point","_line","_ray","_line2","_arrow","_ticks","_tickUtils","_stacks","_reactTransitionGroup","_propTypes","_transitions","getXScale","min","max","width","padding","undefined","Error","scaleLinear","domain","range","Debug","props","default","createElement","x","y","JSON","stringify","NumberLineGraph","React","Component","constructor","state","xScaleFn","toString","length","snapValueFn","ticks","snapTo","bind","minor","getChildContext","xScale","snapValue","onRectClick","rect","elements","disabled","anyElementSelected","some","e","selected","onDeselectElements","coords","mouse","_groups","invert","addElement","componentDidMount","select","on","snapFn","v","onAddElement","render","height","onToggleElement","onMoveElement","fraction","arrows","left","right","lineY","stacks","Stacks","map","el","index","stackIndex","add","commonProps","key","interval","correct","toggleElement","moveElement","type","empty","leftPoint","rightPoint","_extends2","onMoveLine","onToggleSelect","position","bounds","pointType","onClick","onMove","direction","DndContext","style","display","ref","fill","color","primary","fillOpacity","TransitionGroup","component","c","Fade","exports","_defineProperty2","PropTypes","func","isRequired","shape","number","major","bool","debug","array","_default"],"sources":["../../../src/number-line/graph/index.jsx"],"sourcesContent":["import React from 'react';\nimport { scaleLinear } from 'd3-scale';\nimport { select, mouse } from 'd3-selection';\nimport { color } from '@pie-lib/render-ui';\nimport { DndContext } from '@dnd-kit/core';\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              key={index}\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              key={index}\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              key={index}\n            />\n          );\n        }\n      });\n\n      return (\n        <DndContext>\n          <div style={{ display: 'inline-block' }}>\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          </div>\n        </DndContext>\n      );\n    }\n  }\n}\n\nexport default NumberLineGraph;\n"],"mappings":"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","ignoreList":[]}