@pie-lib/graphing 4.1.0-beta.7 → 5.0.0-next.36

package/lib/tools/shared/line/__tests__/with-root-edge.test.js

@@ -1,90 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _testUtils = require("@pie-lib/test-utils");
-var _react = _interopRequireDefault(require("react"));
-var _withRootEdge = require("../with-root-edge");
-var _utils = require("../../../../__tests__/utils");
-var _plot = require("@pie-lib/plot");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var xy = _plot.utils.xy;
-jest.mock('../index', function () {
-  var out = {
-    lineBase: jest.fn().mockReturnValue(function () {
-      return /*#__PURE__*/_react["default"].createElement("div", null);
-    }),
-    lineToolComponent: jest.fn().mockReturnValue(function () {
-      return /*#__PURE__*/_react["default"].createElement("div", null);
-    })
-  };
-  return out;
-});
-describe('rootEdgeToToFromWrapper', function () {
-  var Comp;
-  var onChange = jest.fn();
-  beforeEach(function () {
-    Comp = (0, _withRootEdge.rootEdgeToFromToWrapper)(function () {
-      return /*#__PURE__*/_react["default"].createElement("div", null);
-    });
-  });
-  var renderComponent = function renderComponent(extras) {
-    var defaults = {
-      mark: {
-        root: xy(1, 1),
-        edge: xy(2, 2)
-      },
-      onChange: onChange
-    };
-    var props = _objectSpread(_objectSpread({}, defaults), extras);
-    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, props));
-  };
-  it('renders without crashing', function () {
-    var _renderComponent = renderComponent(),
-      container = _renderComponent.container;
-    expect(container.firstChild).toBeInTheDocument();
-  });
-  it('passes mark as from/to', function () {
-    var _renderComponent2 = renderComponent(),
-      container = _renderComponent2.container;
-    // Component transforms root/edge to from/to internally
-    expect(container.firstChild).toBeInTheDocument();
-  });
-  it('handles onChange with root/edge transformation', function () {
-    renderComponent();
-    // onChange transformation is tested through component behavior
-    expect(onChange).toBeDefined();
-  });
-});
-describe('rootEdgeComponent', function () {
-  var onChange = jest.fn();
-  var Comp;
-  var mark;
-  beforeEach(function () {
-    mark = {
-      root: xy(0, 0),
-      edge: xy(1, 1)
-    };
-    Comp = (0, _withRootEdge.rootEdgeComponent)(function () {
-      return /*#__PURE__*/_react["default"].createElement("text", null);
-    });
-  });
-  var renderComponent = function renderComponent(extras) {
-    var defaults = {
-      mark: mark,
-      graphProps: (0, _utils.graphProps)(),
-      onChange: onChange
-    };
-    var props = _objectSpread(_objectSpread({}, defaults), extras);
-    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, props));
-  };
-  describe('rendering', function () {
-    it('renders without crashing', function () {
-      var _renderComponent3 = renderComponent(),
-        container = _renderComponent3.container;
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-//# sourceMappingURL=with-root-edge.test.js.map

package/lib/tools/shared/line/__tests__/with-root-edge.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"with-root-edge.test.js","names":["_testUtils","require","_react","_interopRequireDefault","_withRootEdge","_utils","_plot","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","xy","utils","jest","mock","out","lineBase","fn","mockReturnValue","createElement","lineToolComponent","describe","Comp","onChange","beforeEach","rootEdgeToFromToWrapper","renderComponent","extras","defaults","mark","root","edge","props","render","it","_renderComponent","container","expect","firstChild","toBeInTheDocument","_renderComponent2","toBeDefined","rootEdgeComponent","graphProps","getGraphProps","_renderComponent3"],"sources":["../../../../../src/tools/shared/line/__tests__/with-root-edge.test.jsx"],"sourcesContent":["import { render } from '@pie-lib/test-utils';\nimport React from 'react';\nimport { rootEdgeComponent, rootEdgeToFromToWrapper } from '../with-root-edge';\nimport { graphProps as getGraphProps } from '../../../../__tests__/utils';\nimport { utils } from '@pie-lib/plot';\n\nconst { xy } = utils;\njest.mock('../index', () => {\n  const out = {\n    lineBase: jest.fn().mockReturnValue(() => <div />),\n    lineToolComponent: jest.fn().mockReturnValue(() => <div />),\n  };\n  return out;\n});\n\ndescribe('rootEdgeToToFromWrapper', () => {\n  let Comp;\n  let onChange = jest.fn();\n  beforeEach(() => {\n    Comp = rootEdgeToFromToWrapper(() => <div />);\n  });\n  const renderComponent = (extras) => {\n    const defaults = {\n      mark: { root: xy(1, 1), edge: xy(2, 2) },\n      onChange,\n    };\n    const props = { ...defaults, ...extras };\n    return render(<Comp {...props} />);\n  };\n\n  it('renders without crashing', () => {\n    const { container } = renderComponent();\n    expect(container.firstChild).toBeInTheDocument();\n  });\n\n  it('passes mark as from/to', () => {\n    const { container } = renderComponent();\n    // Component transforms root/edge to from/to internally\n    expect(container.firstChild).toBeInTheDocument();\n  });\n\n  it('handles onChange with root/edge transformation', () => {\n    renderComponent();\n    // onChange transformation is tested through component behavior\n    expect(onChange).toBeDefined();\n  });\n});\n\ndescribe('rootEdgeComponent', () => {\n  let onChange = jest.fn();\n  let Comp;\n  let mark;\n  beforeEach(() => {\n    mark = { root: xy(0, 0), edge: xy(1, 1) };\n    Comp = rootEdgeComponent(() => <text />);\n  });\n  const renderComponent = (extras) => {\n    const defaults = {\n      mark,\n      graphProps: getGraphProps(),\n      onChange,\n    };\n\n    const props = { ...defaults, ...extras };\n    return render(<Comp {...props} />);\n  };\n  describe('rendering', () => {\n    it('renders without crashing', () => {\n      const { container } = renderComponent();\n      expect(container.firstChild).toBeInTheDocument();\n    });\n  });\n});\n"],"mappings":";;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAAsC,SAAAM,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,aAAAhB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAAlB,CAAA,EAAAG,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAnB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAEtC,IAAQoB,EAAE,GAAKC,WAAK,CAAZD,EAAE;AACVE,IAAI,CAACC,IAAI,CAAC,UAAU,EAAE,YAAM;EAC1B,IAAMC,GAAG,GAAG;IACVC,QAAQ,EAAEH,IAAI,CAACI,EAAE,CAAC,CAAC,CAACC,eAAe,CAAC;MAAA,oBAAMjC,MAAA,YAAAkC,aAAA,YAAM,CAAC;IAAA,EAAC;IAClDC,iBAAiB,EAAEP,IAAI,CAACI,EAAE,CAAC,CAAC,CAACC,eAAe,CAAC;MAAA,oBAAMjC,MAAA,YAAAkC,aAAA,YAAM,CAAC;IAAA;EAC5D,CAAC;EACD,OAAOJ,GAAG;AACZ,CAAC,CAAC;AAEFM,QAAQ,CAAC,yBAAyB,EAAE,YAAM;EACxC,IAAIC,IAAI;EACR,IAAIC,QAAQ,GAAGV,IAAI,CAACI,EAAE,CAAC,CAAC;EACxBO,UAAU,CAAC,YAAM;IACfF,IAAI,GAAG,IAAAG,qCAAuB,EAAC;MAAA,oBAAMxC,MAAA,YAAAkC,aAAA,YAAM,CAAC;IAAA,EAAC;EAC/C,CAAC,CAAC;EACF,IAAMO,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,MAAM,EAAK;IAClC,IAAMC,QAAQ,GAAG;MACfC,IAAI,EAAE;QAAEC,IAAI,EAAEnB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAAEoB,IAAI,EAAEpB,EAAE,CAAC,CAAC,EAAE,CAAC;MAAE,CAAC;MACxCY,QAAQ,EAARA;IACF,CAAC;IACD,IAAMS,KAAK,GAAA7B,aAAA,CAAAA,aAAA,KAAQyB,QAAQ,GAAKD,MAAM,CAAE;IACxC,OAAO,IAAAM,iBAAM,eAAChD,MAAA,YAAAkC,aAAA,CAACG,IAAI,EAAKU,KAAQ,CAAC,CAAC;EACpC,CAAC;EAEDE,EAAE,CAAC,0BAA0B,EAAE,YAAM;IACnC,IAAAC,gBAAA,GAAsBT,eAAe,CAAC,CAAC;MAA/BU,SAAS,GAAAD,gBAAA,CAATC,SAAS;IACjBC,MAAM,CAACD,SAAS,CAACE,UAAU,CAAC,CAACC,iBAAiB,CAAC,CAAC;EAClD,CAAC,CAAC;EAEFL,EAAE,CAAC,wBAAwB,EAAE,YAAM;IACjC,IAAAM,iBAAA,GAAsBd,eAAe,CAAC,CAAC;MAA/BU,SAAS,GAAAI,iBAAA,CAATJ,SAAS;IACjB;IACAC,MAAM,CAACD,SAAS,CAACE,UAAU,CAAC,CAACC,iBAAiB,CAAC,CAAC;EAClD,CAAC,CAAC;EAEFL,EAAE,CAAC,gDAAgD,EAAE,YAAM;IACzDR,eAAe,CAAC,CAAC;IACjB;IACAW,MAAM,CAACd,QAAQ,CAAC,CAACkB,WAAW,CAAC,CAAC;EAChC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEFpB,QAAQ,CAAC,mBAAmB,EAAE,YAAM;EAClC,IAAIE,QAAQ,GAAGV,IAAI,CAACI,EAAE,CAAC,CAAC;EACxB,IAAIK,IAAI;EACR,IAAIO,IAAI;EACRL,UAAU,CAAC,YAAM;IACfK,IAAI,GAAG;MAAEC,IAAI,EAAEnB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MAAEoB,IAAI,EAAEpB,EAAE,CAAC,CAAC,EAAE,CAAC;IAAE,CAAC;IACzCW,IAAI,GAAG,IAAAoB,+BAAiB,EAAC;MAAA,oBAAMzD,MAAA,YAAAkC,aAAA,aAAO,CAAC;IAAA,EAAC;EAC1C,CAAC,CAAC;EACF,IAAMO,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,MAAM,EAAK;IAClC,IAAMC,QAAQ,GAAG;MACfC,IAAI,EAAJA,IAAI;MACJc,UAAU,EAAE,IAAAC,iBAAa,EAAC,CAAC;MAC3BrB,QAAQ,EAARA;IACF,CAAC;IAED,IAAMS,KAAK,GAAA7B,aAAA,CAAAA,aAAA,KAAQyB,QAAQ,GAAKD,MAAM,CAAE;IACxC,OAAO,IAAAM,iBAAM,eAAChD,MAAA,YAAAkC,aAAA,CAACG,IAAI,EAAKU,KAAQ,CAAC,CAAC;EACpC,CAAC;EACDX,QAAQ,CAAC,WAAW,EAAE,YAAM;IAC1Ba,EAAE,CAAC,0BAA0B,EAAE,YAAM;MACnC,IAAAW,iBAAA,GAAsBnB,eAAe,CAAC,CAAC;QAA/BU,SAAS,GAAAS,iBAAA,CAATT,SAAS;MACjBC,MAAM,CAACD,SAAS,CAACE,UAAU,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAClD,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/tools/shared/line/index.js

@@ -1,550 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.lineToolComponent = exports.lineTool = exports.lineBase = 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _lodashEs = require("lodash-es");
-var _point = require("../point");
-var _plot = require("@pie-lib/plot");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("../styles");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _markLabel = _interopRequireDefault(require("../../../mark-label"));
-var _renderUi = require("@pie-lib/render-ui");
-var _utils = require("../../../utils");
-var _styles2 = require("@mui/material/styles");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledLineGroup = (0, _styles2.styled)('g')(function (_ref) {
-  var disabled = _ref.disabled,
-    correctness = _ref.correctness;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    '& line:not(.hit-area)': {
-      fill: 'transparent',
-      stroke: _renderUi.color.defaults.BLACK,
-      strokeWidth: 3,
-      transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-      '&:hover': {
-        strokeWidth: 6,
-        stroke: _renderUi.color.defaults.PRIMARY_DARK
-      }
-    }
-  }, disabled && {
-    '& line:not(.hit-area)': _objectSpread(_objectSpread({}, (0, _styles.disabledSecondary)('stroke')), {}, {
-      strokeWidth: 2
-    })
-  }), correctness === 'correct' && {
-    '& line:not(.hit-area)': _objectSpread({}, (0, _styles.correct)('stroke'))
-  }), correctness === 'incorrect' && {
-    '& line:not(.hit-area)': _objectSpread({}, (0, _styles.incorrect)('stroke'))
-  }), correctness === 'missing' && {
-    '& line:not(.hit-area)': _objectSpread(_objectSpread({}, (0, _styles.missing)('stroke')), {}, {
-      strokeWidth: 1,
-      strokeDasharray: '4 3'
-    })
-  });
-});
-var lineTool = exports.lineTool = function lineTool(type, Component) {
-  return function () {
-    return {
-      type: type,
-      Component: Component,
-      addPoint: function addPoint(point, mark) {
-        if (mark && (0, _utils.equalPoints)(mark.root, point)) {
-          return mark;
-        }
-        if (!mark) {
-          return {
-            type: type,
-            building: true,
-            from: point
-          };
-        }
-        if ((0, _utils.equalPoints)(point, mark.from)) {
-          return _objectSpread({}, mark);
-        }
-        return _objectSpread(_objectSpread({}, mark), {}, {
-          building: false,
-          to: point
-        });
-      }
-    };
-  };
-};
-var lineToolComponent = exports.lineToolComponent = function lineToolComponent(Component) {
-  var _LineToolComponent;
-  return _LineToolComponent = /*#__PURE__*/function (_React$Component) {
-    function LineToolComponent(props) {
-      var _this;
-      (0, _classCallCheck2["default"])(this, LineToolComponent);
-      _this = _callSuper(this, LineToolComponent, [props]);
-      (0, _defineProperty2["default"])(_this, "startDrag", function () {
-        var onDragStart = _this.props.onDragStart;
-        _this.setState({
-          mark: _objectSpread({}, _this.props.mark)
-        });
-        if (onDragStart) onDragStart();
-      });
-      (0, _defineProperty2["default"])(_this, "stopDrag", function () {
-        var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          mark = _this$props.mark,
-          onDragStop = _this$props.onDragStop;
-        var update = _objectSpread({}, _this.state.mark);
-        _this.setState({
-          mark: undefined
-        }, function () {
-          var type = update.type;
-          var shouldNotChange = type && (type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') && (0, _utils.sameAxes)(update.from, update.to);
-          if (!shouldNotChange && type && type === 'exponential' && update.from && update.to) {
-            shouldNotChange = update.from.y === 0 || update.to.y === 0 || update.from.y * update.to.y < 0;
-          }
-          if (!(0, _lodashEs.isEqual)(mark, update) && !shouldNotChange) {
-            onChange(mark, update);
-          }
-          if (onDragStop) onDragStop();
-        });
-      });
-      (0, _defineProperty2["default"])(_this, "changeMark", function (_ref2) {
-        var from = _ref2.from,
-          to = _ref2.to,
-          middle = _ref2.middle;
-        var mark = _objectSpread(_objectSpread({}, _this.state.mark), {}, {
-          from: from,
-          to: to
-        });
-        if (middle) {
-          mark = _objectSpread(_objectSpread({}, mark), {}, {
-            middle: middle
-          });
-        }
-        _this.setState({
-          mark: mark
-        });
-      });
-      (0, _defineProperty2["default"])(_this, "changeMarkProps", function (_ref3) {
-        var from = _ref3.from,
-          to = _ref3.to,
-          middle = _ref3.middle;
-        var _this$props2 = _this.props,
-          onChange = _this$props2.onChange,
-          mark = _this$props2.mark;
-        var update = _objectSpread(_objectSpread({}, mark), _this.state.mark);
-        if (from) {
-          update = _objectSpread(_objectSpread({}, update), {}, {
-            from: from
-          });
-        }
-        if (to) {
-          update = _objectSpread(_objectSpread({}, update), {}, {
-            to: to
-          });
-        }
-        if (middle) {
-          update = _objectSpread(_objectSpread({}, update), {}, {
-            middle: middle
-          });
-        }
-        if (!(0, _lodashEs.isEqual)(mark, update)) {
-          onChange(mark, update);
-        }
-      });
-      _this.state = {};
-      return _this;
-    }
-    (0, _inherits2["default"])(LineToolComponent, _React$Component);
-    return (0, _createClass2["default"])(LineToolComponent, [{
-      key: "render",
-      value: function render() {
-        var _this$props3 = this.props,
-          graphProps = _this$props3.graphProps,
-          onClick = _this$props3.onClick,
-          labelNode = _this$props3.labelNode,
-          labelModeEnabled = _this$props3.labelModeEnabled,
-          coordinatesOnHover = _this$props3.coordinatesOnHover,
-          limitLabeling = _this$props3.limitLabeling;
-        var mark = this.state.mark ? this.state.mark : this.props.mark;
-        var from = (0, _lodashEs.cloneDeep)(mark.from);
-        var to = (0, _lodashEs.cloneDeep)(mark.to);
-        var middle = (0, _lodashEs.cloneDeep)(mark.middle);
-
-        // SET DISABLED
-        // if it's a background mark, we need to force disable it
-        if (from && mark.isBackground) {
-          from.disabled = true;
-        }
-        if (to && mark.isBackground) {
-          to.disabled = true;
-        }
-        if (middle && mark.isBackground) {
-          middle.disabled = true;
-        }
-        return /*#__PURE__*/_react["default"].createElement(Component, {
-          disabled: mark.disabled,
-          coordinatesOnHover: coordinatesOnHover,
-          correctness: mark.correctness,
-          from: from,
-          to: to,
-          middle: middle,
-          graphProps: graphProps,
-          onChange: this.changeMark,
-          changeMarkProps: this.changeMarkProps,
-          onClick: onClick,
-          onDragStart: this.startDrag,
-          onDragStop: this.stopDrag,
-          labelNode: labelNode,
-          labelModeEnabled: labelModeEnabled,
-          limitLabeling: limitLabeling
-        });
-      }
-    }]);
-  }(_react["default"].Component), (0, _defineProperty2["default"])(_LineToolComponent, "propTypes", _objectSpread(_objectSpread({}, _plot.types.ToolPropTypeFields), {}, {
-    graphProps: _plot.types.GraphPropsType.isRequired,
-    limitLabeling: _propTypes["default"].bool,
-    changeMarkProps: _propTypes["default"].func,
-    disabled: _propTypes["default"].bool,
-    from: _plot.types.PointType,
-    to: _plot.types.PointType,
-    labelModeEnabled: _propTypes["default"].bool,
-    onClick: _propTypes["default"].func
-  })), _LineToolComponent;
-};
-var dragOpts = function dragOpts() {
-  return {
-    bounds: function bounds(props, _ref4) {
-      var domain = _ref4.domain,
-        range = _ref4.range;
-      var area = _plot.utils.lineToArea(props.from, props.to);
-      return _plot.utils.bounds(area, domain, range);
-    },
-    anchorPoint: function anchorPoint(props) {
-      var from = props.from;
-      return from;
-    },
-    fromDelta: function fromDelta(props, delta) {
-      var from = props.from,
-        to = props.to;
-      return {
-        from: _plot.utils.point(from).add(_plot.utils.point(delta)),
-        to: _plot.utils.point(to).add(_plot.utils.point(delta))
-      };
-    }
-  };
-};
-var lineBase = exports.lineBase = function lineBase(Comp, opts) {
-  var DraggableComp = (0, _plot.gridDraggable)(dragOpts())(Comp);
-  var FromPoint = opts && opts.from ? opts.from : _point.BasePoint;
-  var ToPoint = opts && opts.to ? opts.to : _point.BasePoint;
-  var LineBase = /*#__PURE__*/function (_React$Component2) {
-    function LineBase() {
-      var _this2;
-      (0, _classCallCheck2["default"])(this, LineBase);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      _this2 = _callSuper(this, LineBase, [].concat(args));
-      (0, _defineProperty2["default"])(_this2, "onChangePoint", function (point) {
-        var _this2$props = _this2.props,
-          middle = _this2$props.middle,
-          onChange = _this2$props.onChange;
-        var from = point.from,
-          to = point.to;
-
-        // because point.from.label and point.to.label can be different
-        if (!(0, _utils.equalPoints)(from, to)) {
-          if (middle) {
-            point.middle = _objectSpread(_objectSpread({}, middle), (0, _utils.getMiddleOfTwoPoints)(from, to));
-          }
-          onChange(point);
-        }
-      });
-      (0, _defineProperty2["default"])(_this2, "dragComp", function (_ref5) {
-        var draggedFrom = _ref5.from,
-          draggedTo = _ref5.to;
-        var _this2$props2 = _this2.props,
-          from = _this2$props2.from,
-          to = _this2$props2.to,
-          onChange = _this2$props2.onChange,
-          middle = _this2$props2.middle;
-        if (from.label) {
-          draggedFrom.label = from.label;
-        }
-        if (to.label) {
-          draggedTo.label = to.label;
-        }
-        var updated = {
-          from: draggedFrom,
-          to: draggedTo
-        };
-        if (middle) {
-          updated.middle = _objectSpread(_objectSpread({}, middle), (0, _utils.getMiddleOfTwoPoints)(draggedFrom, draggedTo));
-        }
-        onChange(updated);
-      });
-      (0, _defineProperty2["default"])(_this2, "dragFrom", function (draggedFrom) {
-        var _this2$props3 = _this2.props,
-          from = _this2$props3.from,
-          to = _this2$props3.to;
-        if (from.label) {
-          draggedFrom.label = from.label;
-        }
-        if (!(0, _utils.equalPoints)(draggedFrom, to)) {
-          _this2.onChangePoint({
-            from: draggedFrom,
-            to: to
-          });
-        }
-      });
-      (0, _defineProperty2["default"])(_this2, "dragTo", function (draggedTo) {
-        var _this2$props4 = _this2.props,
-          from = _this2$props4.from,
-          to = _this2$props4.to;
-        if (to.label) {
-          draggedTo.label = to.label;
-        }
-        if (!(0, _utils.equalPoints)(from, draggedTo)) {
-          _this2.onChangePoint({
-            from: from,
-            to: draggedTo
-          });
-        }
-      });
-      (0, _defineProperty2["default"])(_this2, "labelChange", function (point, type) {
-        var changeMarkProps = _this2.props.changeMarkProps;
-        var update = _objectSpread({}, point);
-        if (!point.label || (0, _lodashEs.isEmpty)(point.label)) {
-          delete update.label;
-        }
-        changeMarkProps((0, _defineProperty2["default"])({}, type, update));
-      });
-      (0, _defineProperty2["default"])(_this2, "clickPoint", function (point, type, data) {
-        var _this2$props5 = _this2.props,
-          changeMarkProps = _this2$props5.changeMarkProps,
-          disabled = _this2$props5.disabled,
-          from = _this2$props5.from,
-          to = _this2$props5.to,
-          middle = _this2$props5.middle,
-          labelModeEnabled = _this2$props5.labelModeEnabled,
-          limitLabeling = _this2$props5.limitLabeling,
-          onClick = _this2$props5.onClick;
-        if (!labelModeEnabled) {
-          onClick(point || data);
-          return;
-        }
-        if (disabled) {
-          return;
-        }
-
-        // limit labeling the points of the line
-        if (limitLabeling) {
-          return;
-        }
-        if (type === 'middle' && !point && from && to) {
-          point = _objectSpread(_objectSpread({}, point), (0, _utils.getMiddleOfTwoPoints)(from, to));
-        }
-        changeMarkProps((0, _defineProperty2["default"])({
-          from: (0, _utils.stripEmptyLabel)(from),
-          to: (0, _utils.stripEmptyLabel)(to),
-          middle: (0, _utils.stripEmptyLabel)(middle)
-        }, type, _objectSpread({
-          label: ''
-        }, point)));
-        if (_this2.input[type]) {
-          _this2.input[type].focus();
-        }
-      });
-      // IMPORTANT, do not remove
-      (0, _defineProperty2["default"])(_this2, "input", {});
-      return _this2;
-    }
-    (0, _inherits2["default"])(LineBase, _React$Component2);
-    return (0, _createClass2["default"])(LineBase, [{
-      key: "render",
-      value: function render() {
-        var _this3 = this;
-        var _this$props4 = this.props,
-          coordinatesOnHover = _this$props4.coordinatesOnHover,
-          graphProps = _this$props4.graphProps,
-          onDragStart = _this$props4.onDragStart,
-          onDragStop = _this$props4.onDragStop,
-          from = _this$props4.from,
-          to = _this$props4.to,
-          middle = _this$props4.middle,
-          disabled = _this$props4.disabled,
-          correctness = _this$props4.correctness,
-          onClick = _this$props4.onClick,
-          labelNode = _this$props4.labelNode,
-          labelModeEnabled = _this$props4.labelModeEnabled;
-        var common = {
-          graphProps: graphProps,
-          onDragStart: onDragStart,
-          onDragStop: onDragStop,
-          disabled: disabled,
-          correctness: correctness,
-          onClick: onClick
-        };
-        var angle = to ? _plot.trig.toDegrees(_plot.trig.angle(from, to)) : 0;
-        var fromLabelNode = null;
-        var toLabelNode = null;
-        var lineLabelNode = null;
-        if (labelNode) {
-          if (from && Object.prototype.hasOwnProperty.call(from, 'label')) {
-            fromLabelNode = /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
-              inputRef: function inputRef(r) {
-                return _this3.input.from = r;
-              },
-              disabled: !labelModeEnabled,
-              mark: from,
-              graphProps: graphProps,
-              onChange: function onChange(label) {
-                return _this3.labelChange(_objectSpread(_objectSpread({}, from), {}, {
-                  label: label
-                }), 'from');
-              }
-            }), labelNode);
-          }
-          if (to && Object.prototype.hasOwnProperty.call(to, 'label')) {
-            toLabelNode = /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
-              inputRef: function inputRef(r) {
-                return _this3.input.to = r;
-              },
-              disabled: !labelModeEnabled,
-              mark: to,
-              graphProps: graphProps,
-              onChange: function onChange(label) {
-                return _this3.labelChange(_objectSpread(_objectSpread({}, to), {}, {
-                  label: label
-                }), 'to');
-              }
-            }), labelNode);
-          }
-          if (middle && Object.prototype.hasOwnProperty.call(middle, 'label')) {
-            lineLabelNode = /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
-              inputRef: function inputRef(r) {
-                return _this3.input.middle = r;
-              },
-              disabled: !labelModeEnabled,
-              mark: middle,
-              graphProps: graphProps,
-              onChange: function onChange(label) {
-                return _this3.labelChange(_objectSpread(_objectSpread({}, middle), {}, {
-                  label: label
-                }), 'middle');
-              }
-            }), labelNode);
-          }
-        }
-        return /*#__PURE__*/_react["default"].createElement(StyledLineGroup, {
-          disabled: disabled,
-          correctness: correctness
-        }, to && /*#__PURE__*/_react["default"].createElement(DraggableComp, (0, _extends2["default"])({
-          from: from,
-          to: to,
-          middle: middle,
-          onDrag: this.dragComp
-        }, common, {
-          onClick: function onClick(data) {
-            return _this3.clickPoint(middle, 'middle', data);
-          }
-        })), lineLabelNode, /*#__PURE__*/_react["default"].createElement(FromPoint, (0, _extends2["default"])({
-          x: from.x,
-          y: from.y,
-          labelNode: labelNode,
-          coordinatesOnHover: coordinatesOnHover,
-          onDrag: this.dragFrom
-        }, common, {
-          onClick: function onClick(data) {
-            return _this3.clickPoint(from, 'from', data);
-          }
-        })), fromLabelNode, to && /*#__PURE__*/_react["default"].createElement(ToPoint, (0, _extends2["default"])({
-          x: to.x,
-          y: to.y,
-          angle: angle //angle + 45}
-          ,
-          labelNode: labelNode,
-          coordinatesOnHover: coordinatesOnHover,
-          onDrag: this.dragTo
-        }, common, {
-          onClick: function onClick(data) {
-            return _this3.clickPoint(to, 'to', data);
-          }
-        })), toLabelNode);
-      }
-    }]);
-  }(_react["default"].Component);
-  (0, _defineProperty2["default"])(LineBase, "propTypes", {
-    coordinatesOnHover: _propTypes["default"].bool,
-    graphProps: _plot.types.GraphPropsType,
-    from: _plot.types.PointType,
-    to: _plot.types.PointType,
-    middle: _plot.types.PointType,
-    onChange: _propTypes["default"].func,
-    onDragStart: _propTypes["default"].func,
-    onDragStop: _propTypes["default"].func,
-    onClick: _propTypes["default"].func,
-    correctness: _propTypes["default"].string,
-    disabled: _propTypes["default"].bool,
-    limitLabeling: _propTypes["default"].bool,
-    changeMarkProps: _propTypes["default"].func,
-    labelModeEnabled: _propTypes["default"].bool,
-    labelNode: _propTypes["default"].object
-  });
-  return LineBase;
-};
-var styles = exports.styles = {
-  line: function line() {
-    return {
-      fill: 'transparent',
-      stroke: _renderUi.color.defaults.BLACK,
-      strokeWidth: 3,
-      transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-      '&:hover': {
-        strokeWidth: 6,
-        stroke: _renderUi.color.defaults.PRIMARY_DARK
-      }
-    };
-  },
-  arrow: function arrow() {
-    return {
-      fill: _renderUi.color.defaults.BLACK
-    };
-  },
-  disabledArrow: function disabledArrow() {
-    return _objectSpread({}, (0, _styles.disabledSecondary)());
-  },
-  disabledSecondary: function disabledSecondary() {
-    return _objectSpread(_objectSpread({}, (0, _styles.disabledSecondary)('stroke')), {}, {
-      strokeWidth: 2
-    });
-  },
-  disabled: function disabled() {
-    return _objectSpread(_objectSpread({}, (0, _styles.disabled)('stroke')), {}, {
-      strokeWidth: 2
-    });
-  },
-  correct: function correct(theme, key) {
-    return _objectSpread({}, (0, _styles.correct)(key));
-  },
-  incorrect: function incorrect(theme, key) {
-    return _objectSpread({}, (0, _styles.incorrect)(key));
-  },
-  missing: function missing(theme, key) {
-    return _objectSpread(_objectSpread({}, (0, _styles.missing)(key)), {}, {
-      strokeWidth: 1,
-      strokeDasharray: '4 3'
-    });
-  }
-};
-//# sourceMappingURL=index.js.map