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

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

@@ -1,235 +1,204 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Point = 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"));
-
+exports.default = exports.Point = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 _renderUi = require("@pie-lib/render-ui");
-
-var _draggable = _interopRequireDefault(require("../../../draggable"));
-
-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 = {
-  point: {
-    cursor: 'pointer',
-    transition: "r ".concat(duration, " linear,  \n    opacity ").concat(duration, " linear, \n    fill ").concat(duration, " linear,\n    stroke ").concat(duration, " linear"),
-    stroke: _renderUi.color.primary(),
-    fill: _renderUi.color.primary(),
-    '&.react-draggable-dragging': {
-      opacity: 0.25,
-      r: '10px'
-    },
-    '&:hover': {
-      stroke: _renderUi.color.primaryDark()
-    }
+var _draggable = require("../../../draggable");
+const duration = '150ms';
+const StyledCircle = (0, _styles.styled)('circle')(({
+  $selected,
+  $disabled,
+  $correct,
+  $empty
+}) => ({
+  cursor: 'pointer',
+  transition: `r ${duration} linear,  
+  opacity ${duration} linear, 
+  fill ${duration} linear,
+  stroke ${duration} linear`,
+  stroke: _renderUi.color.primary(),
+  fill: _renderUi.color.primary(),
+  // was ".react-draggable-dragging"
+  '&.dnd-kit-dragging': {
+    opacity: 0.25,
+    r: '10px'
   },
-  selected: {
+  '&:hover': {
     stroke: _renderUi.color.primaryDark()
   },
-  disabled: {
+  ...($selected && {
+    stroke: _renderUi.color.primaryDark()
+  }),
+  ...($disabled && {
     cursor: 'not-allowed',
     opacity: 0.8
-  },
-  correct: {
+  }),
+  ...($correct === true && {
     cursor: 'inherit',
     stroke: _renderUi.color.correct(),
     fill: _renderUi.color.correct()
-  },
-  incorrect: {
+  }),
+  ...($correct === false && {
     cursor: 'inherit',
     stroke: _renderUi.color.incorrect(),
     fill: _renderUi.color.incorrect()
-  },
-  empty: {
+  }),
+  ...($empty && {
     fill: 'white'
-  }
-};
-
-var Point = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Point, _React$Component);
-
-  var _super = _createSuper(Point);
-
-  function Point() {
-    (0, _classCallCheck2["default"])(this, Point);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Point, [{
-    key: "render",
-    value: function render() {
-      var _this = this,
-          _classNames;
-
-      var _this$props = this.props,
-          onDragStop = _this$props.onDragStop,
-          onDragStart = _this$props.onDragStart,
-          onDragCallback = _this$props.onDrag,
-          onClick = _this$props.onClick,
-          onMove = _this$props.onMove,
-          interval = _this$props.interval,
-          y = _this$props.y,
-          bounds = _this$props.bounds,
-          selected = _this$props.selected,
-          position = _this$props.position,
-          disabled = _this$props.disabled,
-          correct = _this$props.correct,
-          empty = _this$props.empty,
-          classes = _this$props.classes;
-      var _this$context = this.context,
-          snapValue = _this$context.snapValue,
-          xScale = _this$context.xScale;
-
-      var dragPosition = function dragPosition(x) {
-        var normalized = x + xScale(0);
-        var inverted = xScale.invert(normalized);
-        return snapValue(position + inverted);
-      };
-
-      var onStart = function onStart(e) {
-        _this.setState({
-          startX: e.clientX
-        });
-
-        if (onDragStart) {
-          onDragStart();
-        }
-      };
-
-      var onStop = function onStop(e, dd) {
-        if (onDragStop) {
-          onDragStop();
+  })
+}));
+class Point extends _react.default.Component {
+  render() {
+    const {
+      onDragStop,
+      onDragStart,
+      onDrag: onDragCallback,
+      onClick,
+      onMove,
+      interval,
+      y,
+      bounds,
+      selected,
+      position,
+      disabled,
+      correct,
+      empty
+    } = this.props;
+    const {
+      snapValue,
+      xScale
+    } = this.context;
+
+    // same as old `is`
+    const step = xScale(interval) - xScale(0);
+    const dragPosition = deltaX => {
+      const normalized = deltaX + xScale(0);
+      const inverted = xScale.invert(normalized);
+      return snapValue(position + inverted);
+    };
+
+    // bounds in px (same as old scaledBounds)
+    const scaledBounds = bounds ? {
+      left: bounds.left / interval * step,
+      right: bounds.right / interval * step
+    } : null;
+    const handleMouseDown = e => e.nativeEvent.preventDefault();
+
+    // called when drag starts (via LocalDraggableDndKit)
+    const handleDragStart = () => {
+      if (onDragStart) {
+        onDragStart();
+      }
+    };
+
+    // called continuously while dragging (snapped+clamped deltaX in px)
+    const handleDragMove = deltaX => {
+      const p = dragPosition(deltaX);
+      if (onDragCallback) {
+        onDragCallback(p);
+      }
+    };
+
+    // called when drag ends (snapped+clamped deltaX in px)
+    const handleDragEnd = deltaX => {
+      if (onDragStop) {
+        onDragStop();
+      }
+      const deltaAbs = Math.abs(deltaX);
+
+      // click vs drag, same threshold as before: is / 10
+      if (deltaAbs < step / 10) {
+        if (onClick) {
+          onClick();
         }
-
-        var endX = e.clientX;
-        var startX = _this.state.startX;
-        var deltaX = Math.abs(endX - startX);
-
-        if (deltaX < is / 10) {
-          if (onClick) {
-            onClick();
-
-            _this.setState({
-              startX: null
-            });
-          }
-        } else {
-          var newPosition = dragPosition(dd.lastX);
-          onMove(newPosition);
-        }
-      }; //prevent the text select icon from rendering.
-
-
-      var onMouseDown = function onMouseDown(e) {
-        return e.nativeEvent.preventDefault();
-      };
-
-      var is = xScale(interval) - xScale(0);
-      var scaledBounds = {
-        left: bounds.left / interval * is,
-        right: bounds.right / interval * is
-      };
-
-      var onDrag = function onDrag(e, dd) {
-        var p = dragPosition(dd.x);
-
-        if (onDragCallback) {
-          onDragCallback(p);
-        }
-      };
-
-      var circleClass = (0, _classnames["default"])(classes.point, (_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), (0, _defineProperty2["default"])(_classNames, classes.empty, empty === true), _classNames));
-      return /*#__PURE__*/_react["default"].createElement(_draggable["default"], {
-        disabled: disabled,
-        onMouseDown: onMouseDown,
-        onStart: onStart,
-        onDrag: onDrag,
-        onStop: onStop,
-        axis: "x",
-        grid: [is],
-        bounds: scaledBounds
-      }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("circle", {
-        r: "20",
-        strokeWidth: "3",
-        style: {
-          fill: 'transparent',
-          pointerEvents: 'visibleStroke'
-        },
-        cx: xScale(position),
-        cy: y,
-        stroke: selected ? _renderUi.color.primaryDark() : 'none'
-      }), /*#__PURE__*/_react["default"].createElement("circle", {
-        r: "5",
-        strokeWidth: "3",
-        className: circleClass,
-        cx: xScale(position),
-        cy: y
-      })));
-    }
-  }]);
-  return Point;
-}(_react["default"].Component);
-
+        return;
+      }
+      const newPosition = dragPosition(deltaX);
+      onMove(newPosition);
+    };
+    const id = `point-${position}-${y}`;
+    return /*#__PURE__*/_react.default.createElement(_draggable.Draggable, {
+      id: id,
+      disabled: disabled,
+      grid: [step],
+      bounds: scaledBounds,
+      onMouseDown: handleMouseDown,
+      onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
+      onDragEnd: handleDragEnd
+    }, ({
+      setNodeRef,
+      attributes,
+      listeners,
+      translateX,
+      isDragging,
+      onMouseDown
+    }) => /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({
+      ref: setNodeRef,
+      onMouseDown: onMouseDown
+      // axis="x": only horizontal translate
+      ,
+      transform: `translate(${translateX}, 0)`
+    }, attributes, listeners), /*#__PURE__*/_react.default.createElement("circle", {
+      r: "20",
+      strokeWidth: "3",
+      style: {
+        fill: 'transparent',
+        pointerEvents: 'visibleStroke'
+      },
+      cx: xScale(position),
+      cy: y,
+      stroke: selected ? _renderUi.color.primaryDark() : 'none'
+    }), /*#__PURE__*/_react.default.createElement(StyledCircle, {
+      r: "5",
+      strokeWidth: "3",
+      cx: xScale(position),
+      cy: y,
+      $selected: selected,
+      $disabled: disabled,
+      $correct: correct,
+      $empty: empty,
+      className: isDragging ? 'dnd-kit-dragging' : undefined
+    })));
+  }
+}
 exports.Point = Point;
-(0, _defineProperty2["default"])(Point, "defaultProps", {
+(0, _defineProperty2.default)(Point, "defaultProps", {
   y: 0,
   selected: false,
   empty: false,
   disabled: false,
   correct: undefined
 });
-(0, _defineProperty2["default"])(Point, "propTypes", {
-  interval: _propTypes["default"].number.isRequired,
-  position: _propTypes["default"].number.isRequired,
-  bounds: _propTypes["default"].shape({
-    left: _propTypes["default"].number.isRequired,
-    right: _propTypes["default"].number.isRequired
+(0, _defineProperty2.default)(Point, "propTypes", {
+  interval: _propTypes.default.number.isRequired,
+  position: _propTypes.default.number.isRequired,
+  bounds: _propTypes.default.shape({
+    left: _propTypes.default.number.isRequired,
+    right: _propTypes.default.number.isRequired
   }),
-  selected: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  correct: _propTypes["default"].bool,
-  empty: _propTypes["default"].bool,
-  y: _propTypes["default"].number,
-  onMove: _propTypes["default"].func.isRequired,
-  onClick: _propTypes["default"].func,
-  onDrag: _propTypes["default"].func,
-  onDragStop: _propTypes["default"].func,
-  onDragStart: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired
+  selected: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  correct: _propTypes.default.bool,
+  empty: _propTypes.default.bool,
+  y: _propTypes.default.number,
+  onMove: _propTypes.default.func.isRequired,
+  onClick: _propTypes.default.func,
+  onDrag: _propTypes.default.func,
+  onDragStop: _propTypes.default.func,
+  onDragStart: _propTypes.default.func
 });
-(0, _defineProperty2["default"])(Point, "contextTypes", {
-  xScale: _propTypes["default"].func.isRequired,
-  snapValue: _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Point, "contextTypes", {
+  xScale: _propTypes.default.func.isRequired,
+  snapValue: _propTypes.default.func.isRequired
 });
-
-var _default = (0, _reactJss["default"])(style)(Point);
-
-exports["default"] = _default;
+var _default = exports.default = Point;
 //# sourceMappingURL=point.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/number-line/graph/elements/point.jsx"],"names":["duration","style","point","cursor","transition","stroke","color","primary","fill","opacity","r","primaryDark","selected","disabled","correct","incorrect","empty","Point","props","onDragStop","onDragStart","onDragCallback","onDrag","onClick","onMove","interval","y","bounds","position","classes","context","snapValue","xScale","dragPosition","x","normalized","inverted","invert","onStart","e","setState","startX","clientX","onStop","dd","endX","state","deltaX","Math","abs","is","newPosition","lastX","onMouseDown","nativeEvent","preventDefault","scaledBounds","left","right","p","circleClass","pointerEvents","React","Component","undefined","PropTypes","number","isRequired","shape","bool","func","object"],"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 { color } from '@pie-lib/render-ui';\n\nimport Draggable from '../../../draggable';\n\nconst duration = '150ms';\n\nconst style = {\n  point: {\n    cursor: 'pointer',\n    transition: `r ${duration} linear,  \n    opacity ${duration} linear, \n    fill ${duration} linear,\n    stroke ${duration} linear`,\n\n    stroke: color.primary(),\n    fill: color.primary(),\n    '&.react-draggable-dragging': {\n      opacity: 0.25,\n      r: '10px',\n    },\n    '&:hover': {\n      stroke: color.primaryDark(),\n    },\n  },\n  selected: {\n    stroke: color.primaryDark(),\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: 0.8,\n  },\n  correct: {\n    cursor: 'inherit',\n    stroke: color.correct(),\n    fill: color.correct(),\n  },\n  incorrect: {\n    cursor: 'inherit',\n    stroke: color.incorrect(),\n    fill: color.incorrect(),\n  },\n  empty: {\n    fill: 'white',\n  },\n};\n\nexport class Point extends React.Component {\n  static defaultProps = {\n    y: 0,\n    selected: false,\n    empty: false,\n    disabled: false,\n    correct: undefined,\n  };\n\n  static propTypes = {\n    interval: PropTypes.number.isRequired,\n    position: PropTypes.number.isRequired,\n    bounds: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      right: PropTypes.number.isRequired,\n    }),\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    empty: PropTypes.bool,\n    y: PropTypes.number,\n    onMove: PropTypes.func.isRequired,\n    onClick: PropTypes.func,\n    onDrag: PropTypes.func,\n    onDragStop: PropTypes.func,\n    onDragStart: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n  };\n\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n    snapValue: PropTypes.func.isRequired,\n  };\n\n  render() {\n    const {\n      onDragStop,\n      onDragStart,\n      onDrag: onDragCallback,\n      onClick,\n      onMove,\n      interval,\n      y,\n      bounds,\n      selected,\n      position,\n      disabled,\n      correct,\n      empty,\n      classes,\n    } = this.props;\n\n    const { snapValue, xScale } = this.context;\n\n    const dragPosition = (x) => {\n      const normalized = x + xScale(0);\n      const inverted = xScale.invert(normalized);\n      return snapValue(position + inverted);\n    };\n\n    const onStart = (e) => {\n      this.setState({ startX: e.clientX });\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n\n    const onStop = (e, dd) => {\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      const endX = e.clientX;\n      const startX = this.state.startX;\n      const deltaX = Math.abs(endX - startX);\n\n      if (deltaX < is / 10) {\n        if (onClick) {\n          onClick();\n          this.setState({ startX: null });\n        }\n      } else {\n        const newPosition = dragPosition(dd.lastX);\n        onMove(newPosition);\n      }\n    };\n\n    //prevent the text select icon from rendering.\n    const onMouseDown = (e) => e.nativeEvent.preventDefault();\n\n    const is = xScale(interval) - xScale(0);\n    const scaledBounds = {\n      left: (bounds.left / interval) * is,\n      right: (bounds.right / interval) * is,\n    };\n\n    const onDrag = (e, dd) => {\n      const p = dragPosition(dd.x);\n      if (onDragCallback) {\n        onDragCallback(p);\n      }\n    };\n\n    const circleClass = classNames(classes.point, {\n      [classes.disabled]: disabled,\n      [classes.selected]: selected,\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n      [classes.empty]: empty === true,\n    });\n\n    return (\n      <Draggable\n        disabled={disabled}\n        onMouseDown={onMouseDown}\n        onStart={onStart}\n        onDrag={onDrag}\n        onStop={onStop}\n        axis=\"x\"\n        grid={[is]}\n        bounds={scaledBounds}\n      >\n        <g>\n          <circle\n            r=\"20\"\n            strokeWidth=\"3\"\n            style={{ fill: 'transparent', pointerEvents: 'visibleStroke' }}\n            cx={xScale(position)}\n            cy={y}\n            stroke={selected ? color.primaryDark() : 'none'}\n          />\n          <circle r=\"5\" strokeWidth=\"3\" className={circleClass} cx={xScale(position)} cy={y} />\n        </g>\n      </Draggable>\n    );\n  }\n}\n\nexport default injectSheet(style)(Point);\n"],"file":"point.js"}
+{"version":3,"file":"point.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_renderUi","_draggable","duration","StyledCircle","styled","$selected","$disabled","$correct","$empty","cursor","transition","stroke","color","primary","fill","opacity","r","primaryDark","correct","incorrect","Point","React","Component","render","onDragStop","onDragStart","onDrag","onDragCallback","onClick","onMove","interval","y","bounds","selected","position","disabled","empty","props","snapValue","xScale","context","step","dragPosition","deltaX","normalized","inverted","invert","scaledBounds","left","right","handleMouseDown","e","nativeEvent","preventDefault","handleDragStart","handleDragMove","p","handleDragEnd","deltaAbs","Math","abs","newPosition","id","default","createElement","Draggable","grid","onMouseDown","onDragMove","onDragEnd","setNodeRef","attributes","listeners","translateX","isDragging","_extends2","ref","transform","strokeWidth","style","pointerEvents","cx","cy","className","undefined","exports","_defineProperty2","PropTypes","number","isRequired","shape","bool","func","_default"],"sources":["../../../../src/number-line/graph/elements/point.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport { Draggable } from '../../../draggable';\n\nconst duration = '150ms';\n\nconst StyledCircle = styled('circle')(({ $selected, $disabled, $correct, $empty }) => ({\n  cursor: 'pointer',\n  transition: `r ${duration} linear,  \n  opacity ${duration} linear, \n  fill ${duration} linear,\n  stroke ${duration} linear`,\n  stroke: color.primary(),\n  fill: color.primary(),\n  // was \".react-draggable-dragging\"\n  '&.dnd-kit-dragging': {\n    opacity: 0.25,\n    r: '10px',\n  },\n  '&:hover': {\n    stroke: color.primaryDark(),\n  },\n  ...($selected && {\n    stroke: color.primaryDark(),\n  }),\n  ...($disabled && {\n    cursor: 'not-allowed',\n    opacity: 0.8,\n  }),\n  ...($correct === true && {\n    cursor: 'inherit',\n    stroke: color.correct(),\n    fill: color.correct(),\n  }),\n  ...($correct === false && {\n    cursor: 'inherit',\n    stroke: color.incorrect(),\n    fill: color.incorrect(),\n  }),\n  ...($empty && {\n    fill: 'white',\n  }),\n}));\n\nexport class Point extends React.Component {\n  static defaultProps = {\n    y: 0,\n    selected: false,\n    empty: false,\n    disabled: false,\n    correct: undefined,\n  };\n\n  static propTypes = {\n    interval: PropTypes.number.isRequired,\n    position: PropTypes.number.isRequired,\n    bounds: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      right: PropTypes.number.isRequired,\n    }),\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    empty: PropTypes.bool,\n    y: PropTypes.number,\n    onMove: PropTypes.func.isRequired,\n    onClick: PropTypes.func,\n    onDrag: PropTypes.func,\n    onDragStop: PropTypes.func,\n    onDragStart: PropTypes.func,\n  };\n\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n    snapValue: PropTypes.func.isRequired,\n  };\n\n  render() {\n    const {\n      onDragStop,\n      onDragStart,\n      onDrag: onDragCallback,\n      onClick,\n      onMove,\n      interval,\n      y,\n      bounds,\n      selected,\n      position,\n      disabled,\n      correct,\n      empty,\n    } = this.props;\n\n    const { snapValue, xScale } = this.context;\n\n    // same as old `is`\n    const step = xScale(interval) - xScale(0);\n\n    const dragPosition = (deltaX) => {\n      const normalized = deltaX + xScale(0);\n      const inverted = xScale.invert(normalized);\n      return snapValue(position + inverted);\n    };\n\n    // bounds in px (same as old scaledBounds)\n    const scaledBounds = bounds\n      ? {\n          left: (bounds.left / interval) * step,\n          right: (bounds.right / interval) * step,\n        }\n      : null;\n\n    const handleMouseDown = (e) => e.nativeEvent.preventDefault();\n\n    // called when drag starts (via LocalDraggableDndKit)\n    const handleDragStart = () => {\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n\n    // called continuously while dragging (snapped+clamped deltaX in px)\n    const handleDragMove = (deltaX) => {\n      const p = dragPosition(deltaX);\n      if (onDragCallback) {\n        onDragCallback(p);\n      }\n    };\n\n    // called when drag ends (snapped+clamped deltaX in px)\n    const handleDragEnd = (deltaX) => {\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      const deltaAbs = Math.abs(deltaX);\n\n      // click vs drag, same threshold as before: is / 10\n      if (deltaAbs < step / 10) {\n        if (onClick) {\n          onClick();\n        }\n        return;\n      }\n\n      const newPosition = dragPosition(deltaX);\n      onMove(newPosition);\n    };\n\n    const id = `point-${position}-${y}`;\n\n    return (\n      <Draggable  \n        id={id}\n        disabled={disabled}\n        grid={[step]}\n        bounds={scaledBounds}\n        onMouseDown={handleMouseDown}\n        onDragStart={handleDragStart}\n        onDragMove={handleDragMove}\n        onDragEnd={handleDragEnd}\n      >\n        {({\n          setNodeRef,\n          attributes,\n          listeners,\n          translateX,\n          isDragging,\n          onMouseDown,\n        }) => (\n          <g\n            ref={setNodeRef}\n            onMouseDown={onMouseDown}\n            // axis=\"x\": only horizontal translate\n            transform={`translate(${translateX}, 0)`}\n            {...attributes}\n            {...listeners}\n          >\n            <circle\n              r=\"20\"\n              strokeWidth=\"3\"\n              style={{ fill: 'transparent', pointerEvents: 'visibleStroke' }}\n              cx={xScale(position)}\n              cy={y}\n              stroke={selected ? color.primaryDark() : 'none'}\n            />\n            <StyledCircle\n              r=\"5\"\n              strokeWidth=\"3\"\n              cx={xScale(position)}\n              cy={y}\n              $selected={selected}\n              $disabled={disabled}\n              $correct={correct}\n              $empty={empty}\n              className={isDragging ? 'dnd-kit-dragging' : undefined}\n            />\n          </g>\n        )}\n      </ Draggable>\n    );\n  }\n}\n\nexport default Point;\n"],"mappings":"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","ignoreList":[]}