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

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

@@ -1,316 +1,260 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Line = void 0;
-
+exports.default = exports.Line = 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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
+var _styles = require("@mui/material/styles");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _draggable = _interopRequireDefault(require("../../../draggable"));
-
+var _draggable = require("../../../draggable");
 var _point = _interopRequireDefault(require("./point"));
-
 var _base = require("./base");
-
-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 duration = '150ms';
-var style = {
-  line: {
+const duration = '150ms';
+const StyledLineGroup = (0, _styles.styled)('g')(({
+  $disabled,
+  $selected,
+  $correct
+}) => ({
+  '& .line-handle': {
+    stroke: _renderUi.color.primary(),
+    cursor: 'pointer',
+    strokeWidth: '5px',
+    transition: `opacity ${duration} linear, 
+    stroke-width ${duration} linear,
+    stroke ${duration} linear`
+  },
+  // was ".react-draggable-dragging" in the old version
+  '&.dnd-kit-dragging': {
+    opacity: 0.6,
     '& .line-handle': {
-      stroke: _renderUi.color.primary(),
-      cursor: 'pointer',
-      strokeWidth: '5px',
-      transition: "opacity ".concat(duration, " linear, \n      stroke-width ").concat(duration, " linear,\n      stroke ").concat(duration, " linear")
-    },
-    '&.react-draggable-dragging': {
-      opacity: 0.6,
-      '& .line-handle': {
-        opacity: 1.0,
-        strokeWidth: '12px'
-      }
+      opacity: 1.0,
+      strokeWidth: '12px'
     }
   },
-  disabled: {
+  ...($disabled && {
     cursor: 'not-allowed',
     opacity: 0.8
-  },
-  selected: {
+  }),
+  ...($selected && {
     '& .line-handle': {
       stroke: _renderUi.color.primaryDark()
     }
-  },
-  correct: {
+  }),
+  ...($correct === true && {
     '& .line-handle': {
       cursor: 'inherit',
       stroke: _renderUi.color.correct()
     }
-  },
-  incorrect: {
+  }),
+  ...($correct === false && {
     '& .line-handle': {
       cursor: 'inherit',
       stroke: _renderUi.color.incorrect()
     }
-  }
-};
-
-var Line = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Line, _React$Component);
-
-  var _super = _createSuper(Line);
-
-  function Line(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Line);
-    _this = _super.call(this, props);
-    _this.state = {
+  })
+}));
+class Line extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       left: null,
       right: null
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Line, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps) {
-        var position = nextProps.position;
-        this.setState({
-          left: position.left,
-          right: position.right
-        });
-      }
-    }
-  }, {
-    key: "onDrag",
-    value: function onDrag(side, p) {
-      var domain = this.props.domain;
-
-      if (p >= domain.min && p <= domain.max) {
-        var newState = {};
-        newState[side] = p;
-        this.setState(newState);
-      }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps) {
+      const {
+        position
+      } = nextProps;
+      this.setState({
+        left: position.left,
+        right: position.right
+      });
     }
-  }, {
-    key: "onMove",
-    value: function onMove(side, d) {
-      var p = this.props.position;
-      var newPosition = {
-        left: p.left,
-        right: p.right
-      };
-      newPosition[side] = d;
-      this.props.onMoveLine(newPosition);
+  }
+  onDrag(side, p) {
+    const {
+      domain
+    } = this.props;
+    if (p >= domain.min && p <= domain.max) {
+      const newState = {};
+      newState[side] = p;
+      this.setState(newState);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this,
-          _classNames;
-
-      var _this$props = this.props,
-          interval = _this$props.interval,
-          empty = _this$props.empty,
-          position = _this$props.position,
-          domain = _this$props.domain,
-          y = _this$props.y,
-          selected = _this$props.selected,
-          disabled = _this$props.disabled,
-          correct = _this$props.correct,
-          classes = _this$props.classes;
-      var xScale = this.context.xScale;
-      var onDrag = this.onDrag,
-          onMove = this.onMove;
-      var onMoveLeft = onMove.bind(this, 'left');
-      var onMoveRight = onMove.bind(this, 'right');
-      var onDragLeft = onDrag.bind(this, 'left');
-      var onDragRight = onDrag.bind(this, 'right');
-      var left = (0, _isNumber["default"])(this.state.left) ? this.state.left : position.left;
-      var right = (0, _isNumber["default"])(this.state.right) ? this.state.right : position.right;
-      var is = xScale(interval) - xScale(0);
-
-      var onMouseDown = function onMouseDown(e) {
-        return e.nativeEvent.preventDefault();
-      };
-
-      var onLineDragStart = function onLineDragStart(e) {
-        return _this2.setState({
-          startX: e.clientX
-        });
-      };
-
-      var onLineClick = function onLineClick() {
-        var _this2$state = _this2.state,
-            startX = _this2$state.startX,
-            endX = _this2$state.endX;
-
-        if (!startX || !endX) {
-          return;
-        }
-
-        var deltaX = Math.abs(endX - startX);
-
-        if (deltaX < is / 10) {
-          _this2.props.onToggleSelect();
-
-          _this2.setState({
-            startX: null,
-            endX: null
-          });
-        }
-      };
-
-      var onRectClick = function onRectClick() {
-        _this2.props.onToggleSelect();
-      };
-
-      var onLineDragStop = function onLineDragStop(e, dd) {
-        _this2.setState({
-          endX: e.clientX
-        });
-
-        var invertedX = xScale.invert(dd.lastX + xScale(0));
-        var newPosition = {
-          left: position.left + invertedX,
-          right: position.right + invertedX
-        };
+  }
+  onMove(side, d) {
+    const {
+      position: p
+    } = this.props;
+    const newPosition = {
+      left: p.left,
+      right: p.right
+    };
+    newPosition[side] = d;
+    this.props.onMoveLine(newPosition);
+  }
+  render() {
+    const {
+      interval,
+      empty,
+      position,
+      domain,
+      y,
+      selected,
+      disabled,
+      correct
+    } = this.props;
+    const {
+      xScale
+    } = this.context;
+    const {
+      onDrag,
+      onMove
+    } = this;
+    const onMoveLeft = onMove.bind(this, 'left');
+    const onMoveRight = onMove.bind(this, 'right');
+    const onDragLeft = onDrag.bind(this, 'left');
+    const onDragRight = onDrag.bind(this, 'right');
+    const left = (0, _isNumber.default)(this.state.left) ? this.state.left : position.left;
+    const right = (0, _isNumber.default)(this.state.right) ? this.state.right : position.right;
+    const is = xScale(interval) - xScale(0);
+    const onMouseDown = e => e.nativeEvent.preventDefault();
+    const onLineClick = () => {
+      // click on the line toggles selection
+      this.props.onToggleSelect();
+    };
+    const onRectClick = () => {
+      this.props.onToggleSelect();
+    };
 
-        if (!(0, _isEqual["default"])(newPosition, _this2.props.position)) {
-          _this2.props.onMoveLine(newPosition);
-        }
-      };
+    // dnd-kit drag stop handler (receives pixel deltaX from LocalDraggableDndKit)
+    const onLineDragStop = deltaX => {
+      // small movement -> treat as click (same threshold as before: is / 10)
+      const deltaAbs = Math.abs(deltaX);
+      if (deltaAbs < is / 10) {
+        this.props.onToggleSelect();
+        return;
+      }
 
-      var scaledLineBounds = {
-        left: (domain.min - position.left) / interval * is,
-        right: (domain.max - position.right) / interval * is
+      // convert pixel delta to domain delta (same math as before)
+      const invertedX = xScale.invert(deltaX + xScale(0));
+      const newPosition = {
+        left: position.left + invertedX,
+        right: position.right + invertedX
       };
-      var lineClass = (0, _classnames["default"])(classes.line, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (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 common = {
-        interval: interval,
-        selected: selected,
-        disabled: disabled,
-        correct: correct
-      };
-      return /*#__PURE__*/_react["default"].createElement(_draggable["default"], {
-        disabled: disabled,
-        axis: "x",
-        handle: ".line-handle",
-        grid: [is],
-        bounds: scaledLineBounds,
-        onStart: onLineDragStart,
-        onStop: onLineDragStop,
-        onMouseDown: onMouseDown
-      }, /*#__PURE__*/_react["default"].createElement("g", {
-        className: lineClass
-      }, /*#__PURE__*/_react["default"].createElement("g", {
-        transform: "translate(0, ".concat(y, ")")
-      }, /*#__PURE__*/_react["default"].createElement("rect", {
-        x: xScale(left),
-        width: Math.abs(xScale(right) - xScale(left)),
-        fill: "red",
-        fillOpacity: "0.0",
-        y: "-8",
-        height: 16,
-        onClick: onRectClick
-      }), /*#__PURE__*/_react["default"].createElement("line", {
-        className: (0, _classnames["default"])('line-handle', classes.handle, (0, _defineProperty2["default"])({}, classes.selected, selected)),
-        x1: xScale(left),
-        x2: xScale(right),
-        onClick: onLineClick
-      }), /*#__PURE__*/_react["default"].createElement(_point["default"], (0, _extends2["default"])({}, common, {
-        empty: empty.left,
-        bounds: {
-          left: domain.min - position.left,
-          right: domain.max - position.left
-        },
-        position: position.left,
-        onDrag: onDragLeft,
-        onMove: onMoveLeft,
-        onClick: onRectClick
-      })), /*#__PURE__*/_react["default"].createElement(_point["default"], (0, _extends2["default"])({}, common, {
-        empty: empty.right,
-        bounds: {
-          left: domain.min - position.right,
-          right: domain.max - position.right
-        },
-        position: position.right,
-        onDrag: onDragRight,
-        onMove: onMoveRight,
-        onClick: onRectClick
-      })))));
-    }
-  }]);
-  return Line;
-}(_react["default"].Component);
+      if (!(0, _isEqual.default)(newPosition, this.props.position)) {
+        this.props.onMoveLine(newPosition);
+      }
+    };
+    const scaledLineBounds = {
+      left: (domain.min - position.left) / interval * is,
+      right: (domain.max - position.right) / interval * is
+    };
+    const common = {
+      interval,
+      selected,
+      disabled,
+      correct
+    };
 
+    // unique-ish id for this line; if you already have an id prop, use that instead
+    const draggableId = `line-${position.left}-${position.right}-${y}`;
+    return /*#__PURE__*/_react.default.createElement(_draggable.Draggable, {
+      id: draggableId,
+      disabled: disabled,
+      grid: [is],
+      bounds: scaledLineBounds,
+      onMouseDown: onMouseDown,
+      onDragEnd: onLineDragStop
+    }, ({
+      setNodeRef,
+      attributes,
+      listeners,
+      translateX,
+      isDragging,
+      onMouseDown: handleMouseDown
+    }) => /*#__PURE__*/_react.default.createElement(StyledLineGroup, (0, _extends2.default)({
+      ref: setNodeRef,
+      $disabled: disabled,
+      $selected: selected,
+      $correct: correct,
+      className: isDragging ? 'dnd-kit-dragging' : undefined,
+      onMouseDown: handleMouseDown
+    }, attributes), /*#__PURE__*/_react.default.createElement("g", {
+      transform: `translate(${translateX}, ${y})`
+    }, /*#__PURE__*/_react.default.createElement("rect", {
+      x: xScale(left),
+      width: Math.abs(xScale(right) - xScale(left)),
+      fill: "red",
+      fillOpacity: "0.0",
+      y: "-8",
+      height: 16,
+      onClick: onRectClick
+    }), /*#__PURE__*/_react.default.createElement("line", (0, _extends2.default)({
+      className: "line-handle",
+      x1: xScale(left),
+      x2: xScale(right),
+      onClick: onLineClick
+      // this is your "handle": only dragging when grabbing this line
+    }, listeners)), /*#__PURE__*/_react.default.createElement(_point.default, (0, _extends2.default)({}, common, {
+      empty: empty.left,
+      bounds: {
+        left: domain.min - position.left,
+        right: domain.max - position.left
+      },
+      position: position.left,
+      onDrag: onDragLeft,
+      onMove: onMoveLeft,
+      onClick: onRectClick
+    })), /*#__PURE__*/_react.default.createElement(_point.default, (0, _extends2.default)({}, common, {
+      empty: empty.right,
+      bounds: {
+        left: domain.min - position.right,
+        right: domain.max - position.right
+      },
+      position: position.right,
+      onDrag: onDragRight,
+      onMove: onMoveRight,
+      onClick: onRectClick
+    })))));
+  }
+}
 exports.Line = Line;
-(0, _defineProperty2["default"])(Line, "propTypes", _objectSpread(_objectSpread({}, (0, _base.basePropTypes)()), {}, {
-  empty: _propTypes["default"].shape({
-    left: _propTypes["default"].bool.isRequired,
-    right: _propTypes["default"].bool.isRequired
+(0, _defineProperty2.default)(Line, "propTypes", {
+  ...(0, _base.basePropTypes)(),
+  empty: _propTypes.default.shape({
+    left: _propTypes.default.bool.isRequired,
+    right: _propTypes.default.bool.isRequired
   }).isRequired,
-  position: _propTypes["default"].shape({
-    left: _propTypes["default"].number.isRequired,
-    right: _propTypes["default"].number.isRequired
+  position: _propTypes.default.shape({
+    left: _propTypes.default.number.isRequired,
+    right: _propTypes.default.number.isRequired
   }).isRequired,
-  y: _propTypes["default"].number,
-  selected: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  correct: _propTypes["default"].bool,
-  onMoveLine: _propTypes["default"].func.isRequired,
-  onToggleSelect: _propTypes["default"].func.isRequired,
-  onDragStart: _propTypes["default"].func,
-  onDragStop: _propTypes["default"].func
-}));
-(0, _defineProperty2["default"])(Line, "defaultProps", {
+  y: _propTypes.default.number,
+  selected: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  correct: _propTypes.default.bool,
+  onMoveLine: _propTypes.default.func.isRequired,
+  onToggleSelect: _propTypes.default.func.isRequired,
+  onDragStart: _propTypes.default.func,
+  onDragStop: _propTypes.default.func
+});
+(0, _defineProperty2.default)(Line, "defaultProps", {
   selected: false,
   y: 0,
   disabled: false,
   correct: undefined
 });
-(0, _defineProperty2["default"])(Line, "contextTypes", {
-  xScale: _propTypes["default"].func.isRequired,
-  snapValue: _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Line, "contextTypes", {
+  xScale: _propTypes.default.func.isRequired,
+  snapValue: _propTypes.default.func.isRequired
 });
-
-var _default = (0, _reactJss["default"])(style)(Line);
-
-exports["default"] = _default;
+var _default = exports.default = Line;
 //# sourceMappingURL=line.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/number-line/graph/elements/line.jsx"],"names":["duration","style","line","stroke","color","primary","cursor","strokeWidth","transition","opacity","disabled","selected","primaryDark","correct","incorrect","Line","props","state","left","right","nextProps","position","setState","side","p","domain","min","max","newState","d","newPosition","onMoveLine","interval","empty","y","classes","xScale","context","onDrag","onMove","onMoveLeft","bind","onMoveRight","onDragLeft","onDragRight","is","onMouseDown","e","nativeEvent","preventDefault","onLineDragStart","startX","clientX","onLineClick","endX","deltaX","Math","abs","onToggleSelect","onRectClick","onLineDragStop","dd","invertedX","invert","lastX","scaledLineBounds","lineClass","common","handle","React","Component","PropTypes","shape","bool","isRequired","number","func","onDragStart","onDragStop","undefined","snapValue"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport injectSheet from 'react-jss';\nimport isEqual from 'lodash/isEqual';\nimport isNumber from 'lodash/isNumber';\nimport { color } from '@pie-lib/render-ui';\n\nimport Draggable from '../../../draggable';\nimport Point from './point';\nimport { basePropTypes } from './base';\n\nconst duration = '150ms';\n\nconst style = {\n  line: {\n    '& .line-handle': {\n      stroke: color.primary(),\n      cursor: 'pointer',\n      strokeWidth: '5px',\n      transition: `opacity ${duration} linear, \n      stroke-width ${duration} linear,\n      stroke ${duration} linear`,\n    },\n    '&.react-draggable-dragging': {\n      opacity: 0.6,\n      '& .line-handle': {\n        opacity: 1.0,\n        strokeWidth: '12px',\n      },\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: 0.8,\n  },\n  selected: {\n    '& .line-handle': {\n      stroke: color.primaryDark(),\n    },\n  },\n  correct: {\n    '& .line-handle': {\n      cursor: 'inherit',\n      stroke: color.correct(),\n    },\n  },\n  incorrect: {\n    '& .line-handle': {\n      cursor: 'inherit',\n      stroke: color.incorrect(),\n    },\n  },\n};\n\nexport class Line extends React.Component {\n  static propTypes = {\n    ...basePropTypes(),\n    empty: PropTypes.shape({\n      left: PropTypes.bool.isRequired,\n      right: PropTypes.bool.isRequired,\n    }).isRequired,\n    position: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      right: PropTypes.number.isRequired,\n    }).isRequired,\n    y: PropTypes.number,\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    onMoveLine: PropTypes.func.isRequired,\n    onToggleSelect: PropTypes.func.isRequired,\n    onDragStart: PropTypes.func,\n    onDragStop: PropTypes.func,\n  };\n\n  static defaultProps = {\n    selected: false,\n    y: 0,\n    disabled: false,\n    correct: undefined,\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      left: null,\n      right: null,\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps) {\n      const { position } = nextProps;\n      this.setState({ left: position.left, right: position.right });\n    }\n  }\n\n  onDrag(side, p) {\n    const { domain } = this.props;\n    if (p >= domain.min && p <= domain.max) {\n      const newState = {};\n      newState[side] = p;\n      this.setState(newState);\n    }\n  }\n\n  onMove(side, d) {\n    const { position: p } = this.props;\n    const newPosition = { left: p.left, right: p.right };\n    newPosition[side] = d;\n    this.props.onMoveLine(newPosition);\n  }\n\n  render() {\n    const { interval, empty, position, domain, y, selected, disabled, correct, classes } = this.props;\n\n    const { xScale } = this.context;\n\n    const { onDrag, onMove } = this;\n    const onMoveLeft = onMove.bind(this, 'left');\n    const onMoveRight = onMove.bind(this, 'right');\n    const onDragLeft = onDrag.bind(this, 'left');\n    const onDragRight = onDrag.bind(this, 'right');\n\n    const left = isNumber(this.state.left) ? this.state.left : position.left;\n    const right = isNumber(this.state.right) ? this.state.right : position.right;\n\n    const is = xScale(interval) - xScale(0);\n\n    const onMouseDown = (e) => e.nativeEvent.preventDefault();\n    const onLineDragStart = (e) => this.setState({ startX: e.clientX });\n\n    const onLineClick = () => {\n      const { startX, endX } = this.state;\n      if (!startX || !endX) {\n        return;\n      }\n\n      const deltaX = Math.abs(endX - startX);\n      if (deltaX < is / 10) {\n        this.props.onToggleSelect();\n        this.setState({ startX: null, endX: null });\n      }\n    };\n\n    const onRectClick = () => {\n      this.props.onToggleSelect();\n    };\n\n    const onLineDragStop = (e, dd) => {\n      this.setState({ endX: e.clientX });\n      const invertedX = xScale.invert(dd.lastX + xScale(0));\n      const newPosition = {\n        left: position.left + invertedX,\n        right: position.right + invertedX,\n      };\n\n      if (!isEqual(newPosition, this.props.position)) {\n        this.props.onMoveLine(newPosition);\n      }\n    };\n\n    const scaledLineBounds = {\n      left: ((domain.min - position.left) / interval) * is,\n      right: ((domain.max - position.right) / interval) * is,\n    };\n\n    var lineClass = classNames(classes.line, {\n      [classes.disabled]: disabled,\n      [classes.selected]: selected,\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n    });\n\n    const common = {\n      interval,\n      selected,\n      disabled,\n      correct,\n    };\n\n    return (\n      <Draggable\n        disabled={disabled}\n        axis=\"x\"\n        handle=\".line-handle\"\n        grid={[is]}\n        bounds={scaledLineBounds}\n        onStart={onLineDragStart}\n        onStop={onLineDragStop}\n        onMouseDown={onMouseDown}\n      >\n        <g className={lineClass}>\n          <g transform={`translate(0, ${y})`}>\n            <rect\n              x={xScale(left)}\n              width={Math.abs(xScale(right) - xScale(left))}\n              fill=\"red\"\n              fillOpacity=\"0.0\"\n              y=\"-8\"\n              height={16}\n              onClick={onRectClick}\n            />\n            <line\n              className={classNames('line-handle', classes.handle, {\n                [classes.selected]: selected,\n              })}\n              x1={xScale(left)}\n              x2={xScale(right)}\n              onClick={onLineClick}\n            />\n            <Point\n              {...common}\n              empty={empty.left}\n              bounds={{\n                left: domain.min - position.left,\n                right: domain.max - position.left,\n              }}\n              position={position.left}\n              onDrag={onDragLeft}\n              onMove={onMoveLeft}\n              onClick={onRectClick}\n            />\n            <Point\n              {...common}\n              empty={empty.right}\n              bounds={{\n                left: domain.min - position.right,\n                right: domain.max - position.right,\n              }}\n              position={position.right}\n              onDrag={onDragRight}\n              onMove={onMoveRight}\n              onClick={onRectClick}\n            />\n          </g>\n        </g>\n      </Draggable>\n    );\n  }\n}\n\nexport default injectSheet(style)(Line);\n"],"file":"line.js"}
+{"version":3,"file":"line.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_isEqual","_isNumber","_renderUi","_draggable","_point","_base","duration","StyledLineGroup","styled","$disabled","$selected","$correct","stroke","color","primary","cursor","strokeWidth","transition","opacity","primaryDark","correct","incorrect","Line","React","Component","constructor","props","state","left","right","UNSAFE_componentWillReceiveProps","nextProps","position","setState","onDrag","side","p","domain","min","max","newState","onMove","d","newPosition","onMoveLine","render","interval","empty","y","selected","disabled","xScale","context","onMoveLeft","bind","onMoveRight","onDragLeft","onDragRight","isNumber","is","onMouseDown","e","nativeEvent","preventDefault","onLineClick","onToggleSelect","onRectClick","onLineDragStop","deltaX","deltaAbs","Math","abs","invertedX","invert","isEqual","scaledLineBounds","common","draggableId","default","createElement","Draggable","id","grid","bounds","onDragEnd","setNodeRef","attributes","listeners","translateX","isDragging","handleMouseDown","_extends2","ref","className","undefined","transform","x","width","fill","fillOpacity","height","onClick","x1","x2","exports","_defineProperty2","basePropTypes","PropTypes","shape","bool","isRequired","number","func","onDragStart","onDragStop","snapValue","_default"],"sources":["../../../../src/number-line/graph/elements/line.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport isEqual from 'lodash/isEqual';\nimport isNumber from 'lodash/isNumber';\nimport { color } from '@pie-lib/render-ui';\nimport { Draggable } from '../../../draggable';\n\nimport Point from './point';\nimport { basePropTypes } from './base';\n\nconst duration = '150ms';\n\nconst StyledLineGroup = styled('g')(({ $disabled, $selected, $correct }) => ({\n  '& .line-handle': {\n    stroke: color.primary(),\n    cursor: 'pointer',\n    strokeWidth: '5px',\n    transition: `opacity ${duration} linear, \n    stroke-width ${duration} linear,\n    stroke ${duration} linear`,\n  },\n  // was \".react-draggable-dragging\" in the old version\n  '&.dnd-kit-dragging': {\n    opacity: 0.6,\n    '& .line-handle': {\n      opacity: 1.0,\n      strokeWidth: '12px',\n    },\n  },\n  ...($disabled && {\n    cursor: 'not-allowed',\n    opacity: 0.8,\n  }),\n  ...($selected && {\n    '& .line-handle': {\n      stroke: color.primaryDark(),\n    },\n  }),\n  ...($correct === true && {\n    '& .line-handle': {\n      cursor: 'inherit',\n      stroke: color.correct(),\n    },\n  }),\n  ...($correct === false && {\n    '& .line-handle': {\n      cursor: 'inherit',\n      stroke: color.incorrect(),\n    },\n  }),\n}));\n\nexport class Line extends React.Component {\n  static propTypes = {\n    ...basePropTypes(),\n    empty: PropTypes.shape({\n      left: PropTypes.bool.isRequired,\n      right: PropTypes.bool.isRequired,\n    }).isRequired,\n    position: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      right: PropTypes.number.isRequired,\n    }).isRequired,\n    y: PropTypes.number,\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    onMoveLine: PropTypes.func.isRequired,\n    onToggleSelect: PropTypes.func.isRequired,\n    onDragStart: PropTypes.func,\n    onDragStop: PropTypes.func,\n  };\n\n  static defaultProps = {\n    selected: false,\n    y: 0,\n    disabled: false,\n    correct: undefined,\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      left: null,\n      right: null,\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps) {\n      const { position } = nextProps;\n      this.setState({ left: position.left, right: position.right });\n    }\n  }\n\n  onDrag(side, p) {\n    const { domain } = this.props;\n    if (p >= domain.min && p <= domain.max) {\n      const newState = {};\n      newState[side] = p;\n      this.setState(newState);\n    }\n  }\n\n  onMove(side, d) {\n    const { position: p } = this.props;\n    const newPosition = { left: p.left, right: p.right };\n    newPosition[side] = d;\n    this.props.onMoveLine(newPosition);\n  }\n\n  render() {\n    const {\n      interval,\n      empty,\n      position,\n      domain,\n      y,\n      selected,\n      disabled,\n      correct,\n    } = this.props;\n\n    const { xScale } = this.context;\n\n    const { onDrag, onMove } = this;\n    const onMoveLeft = onMove.bind(this, 'left');\n    const onMoveRight = onMove.bind(this, 'right');\n    const onDragLeft = onDrag.bind(this, 'left');\n    const onDragRight = onDrag.bind(this, 'right');\n\n    const left = isNumber(this.state.left) ? this.state.left : position.left;\n    const right = isNumber(this.state.right) ? this.state.right : position.right;\n\n    const is = xScale(interval) - xScale(0);\n\n    const onMouseDown = (e) => e.nativeEvent.preventDefault();\n\n    const onLineClick = () => {\n      // click on the line toggles selection\n      this.props.onToggleSelect();\n    };\n\n    const onRectClick = () => {\n      this.props.onToggleSelect();\n    };\n\n    // dnd-kit drag stop handler (receives pixel deltaX from LocalDraggableDndKit)\n    const onLineDragStop = (deltaX) => {\n      // small movement -> treat as click (same threshold as before: is / 10)\n      const deltaAbs = Math.abs(deltaX);\n      if (deltaAbs < is / 10) {\n        this.props.onToggleSelect();\n        return;\n      }\n\n      // convert pixel delta to domain delta (same math as before)\n      const invertedX = xScale.invert(deltaX + xScale(0));\n      const newPosition = {\n        left: position.left + invertedX,\n        right: position.right + invertedX,\n      };\n\n      if (!isEqual(newPosition, this.props.position)) {\n        this.props.onMoveLine(newPosition);\n      }\n    };\n\n    const scaledLineBounds = {\n      left: ((domain.min - position.left) / interval) * is,\n      right: ((domain.max - position.right) / interval) * is,\n    };\n\n    const common = {\n      interval,\n      selected,\n      disabled,\n      correct,\n    };\n\n    // unique-ish id for this line; if you already have an id prop, use that instead\n    const draggableId = `line-${position.left}-${position.right}-${y}`;\n\n    return (\n      <Draggable\n        id={draggableId}\n        disabled={disabled}\n        grid={[is]}\n        bounds={scaledLineBounds}\n        onMouseDown={onMouseDown}\n        onDragEnd={onLineDragStop}\n      >\n        {({\n          setNodeRef,\n          attributes,\n          listeners,\n          translateX,\n          isDragging,\n          onMouseDown: handleMouseDown,\n        }) => (\n          <StyledLineGroup\n            ref={setNodeRef}\n            $disabled={disabled}\n            $selected={selected}\n            $correct={correct}\n            className={isDragging ? 'dnd-kit-dragging' : undefined}\n            onMouseDown={handleMouseDown}\n            {...attributes}\n          >\n            <g transform={`translate(${translateX}, ${y})`}>\n              <rect\n                x={xScale(left)}\n                width={Math.abs(xScale(right) - xScale(left))}\n                fill=\"red\"\n                fillOpacity=\"0.0\"\n                y=\"-8\"\n                height={16}\n                onClick={onRectClick}\n              />\n              <line\n                className=\"line-handle\"\n                x1={xScale(left)}\n                x2={xScale(right)}\n                onClick={onLineClick}\n                // this is your \"handle\": only dragging when grabbing this line\n                {...listeners}\n              />\n              <Point\n                {...common}\n                empty={empty.left}\n                bounds={{\n                  left: domain.min - position.left,\n                  right: domain.max - position.left,\n                }}\n                position={position.left}\n                onDrag={onDragLeft}\n                onMove={onMoveLeft}\n                onClick={onRectClick}\n              />\n              <Point\n                {...common}\n                empty={empty.right}\n                bounds={{\n                  left: domain.min - position.right,\n                  right: domain.max - position.right,\n                }}\n                position={position.right}\n                onDrag={onDragRight}\n                onMove={onMoveRight}\n                onClick={onRectClick}\n              />\n            </g>\n          </StyledLineGroup>\n        )}\n      </Draggable>\n    );\n  }\n}\n\nexport default Line;\n"],"mappings":"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","ignoreList":[]}