@pie-element/ebsr 9.12.1 → 9.12.2-next.19

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/code/graphing/tools/shared/arrow-head.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genUid = exports.ArrowMarker = exports.ArrowHead = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var ArrowHead = function ArrowHead(_ref) {
+  var size = _ref.size,
+      transform = _ref.transform,
+      points = _ref.points;
+  return /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: points || "0,0 ".concat(size, ",").concat(size / 2, " 0,").concat(size),
+    transform: transform
+  });
+};
+
+exports.ArrowHead = ArrowHead;
+ArrowHead.propTypes = {
+  points: _propTypes["default"].string,
+  size: _propTypes["default"].number,
+  transform: _propTypes["default"].string
+};
+ArrowHead.defaultProps = {
+  points: '',
+  size: 10,
+  transform: ''
+};
+
+var genUid = function genUid() {
+  var v = (Math.random() * 1000).toFixed(0);
+  return "arrow-".concat(v);
+};
+
+exports.genUid = genUid;
+
+var ArrowMarker = function ArrowMarker(_ref2) {
+  var id = _ref2.id,
+      size = _ref2.size,
+      className = _ref2.className;
+  return /*#__PURE__*/_react["default"].createElement("marker", {
+    id: id,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
+    refX: size / 2,
+    refY: size / 2,
+    markerWidth: size,
+    markerHeight: size,
+    orient: "auto-start-reverse",
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(ArrowHead, {
+    size: size
+  }));
+};
+
+exports.ArrowMarker = ArrowMarker;
+ArrowMarker.propTypes = {
+  id: _propTypes["default"].string,
+  size: _propTypes["default"].number,
+  className: _propTypes["default"].string
+};
+ArrowMarker.defaultProps = {
+  size: 5
+};
+//# sourceMappingURL=arrow-head.js.map

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/code/graphing/tools/shared/arrow-head.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/code/graphing/tools/shared/arrow-head.jsx"],"names":["ArrowHead","size","transform","points","propTypes","PropTypes","string","number","defaultProps","genUid","v","Math","random","toFixed","ArrowMarker","id","className"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,MAASC,SAAT,QAASA,SAAT;AAAA,MAAoBC,MAApB,QAAoBA,MAApB;AAAA,sBACvB;AAAS,IAAA,MAAM,EAAEA,MAAM,kBAAWF,IAAX,cAAmBA,IAAI,GAAG,CAA1B,gBAAiCA,IAAjC,CAAvB;AAAgE,IAAA,SAAS,EAAEC;AAA3E,IADuB;AAAA,CAAlB;;;AAGPF,SAAS,CAACI,SAAV,GAAsB;AACpBD,EAAAA,MAAM,EAAEE,sBAAUC,MADE;AAEpBL,EAAAA,IAAI,EAAEI,sBAAUE,MAFI;AAGpBL,EAAAA,SAAS,EAAEG,sBAAUC;AAHD,CAAtB;AAKAN,SAAS,CAACQ,YAAV,GAAyB;AACvBL,EAAAA,MAAM,EAAE,EADe;AAEvBF,EAAAA,IAAI,EAAE,EAFiB;AAGvBC,EAAAA,SAAS,EAAE;AAHY,CAAzB;;AAKO,IAAMO,MAAM,GAAG,SAATA,MAAS,GAAM;AAC1B,MAAMC,CAAC,GAAG,CAACC,IAAI,CAACC,MAAL,KAAgB,IAAjB,EAAuBC,OAAvB,CAA+B,CAA/B,CAAV;AACA,yBAAgBH,CAAhB;AACD,CAHM;;;;AAIA,IAAMI,WAAW,GAAG,SAAdA,WAAc,QAA6B;AAAA,MAA1BC,EAA0B,SAA1BA,EAA0B;AAAA,MAAtBd,IAAsB,SAAtBA,IAAsB;AAAA,MAAhBe,SAAgB,SAAhBA,SAAgB;AACtD,sBACE;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,OAAO,gBAASd,IAAT,cAAiBA,IAAjB,CAFT;AAGE,IAAA,IAAI,EAAEA,IAAI,GAAG,CAHf;AAIE,IAAA,IAAI,EAAEA,IAAI,GAAG,CAJf;AAKE,IAAA,WAAW,EAAEA,IALf;AAME,IAAA,YAAY,EAAEA,IANhB;AAOE,IAAA,MAAM,EAAC,oBAPT;AAQE,IAAA,SAAS,EAAEe;AARb,kBAUE,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEf;AAAjB,IAVF,CADF;AAcD,CAfM;;;AAgBPa,WAAW,CAACV,SAAZ,GAAwB;AACtBW,EAAAA,EAAE,EAAEV,sBAAUC,MADQ;AAEtBL,EAAAA,IAAI,EAAEI,sBAAUE,MAFM;AAGtBS,EAAAA,SAAS,EAAEX,sBAAUC;AAHC,CAAxB;AAKAQ,WAAW,CAACN,YAAZ,GAA2B;AACzBP,EAAAA,IAAI,EAAE;AADmB,CAA3B","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const ArrowHead = ({ size, transform, points }) => (\n  <polygon points={points || `0,0 ${size},${size / 2} 0,${size}`} transform={transform} />\n);\nArrowHead.propTypes = {\n  points: PropTypes.string,\n  size: PropTypes.number,\n  transform: PropTypes.string,\n};\nArrowHead.defaultProps = {\n  points: '',\n  size: 10,\n  transform: '',\n};\nexport const genUid = () => {\n  const v = (Math.random() * 1000).toFixed(0);\n  return `arrow-${v}`;\n};\nexport const ArrowMarker = ({ id, size, className }) => {\n  return (\n    <marker\n      id={id}\n      viewBox={`0 0 ${size} ${size}`}\n      refX={size / 2}\n      refY={size / 2}\n      markerWidth={size}\n      markerHeight={size}\n      orient=\"auto-start-reverse\"\n      className={className}\n    >\n      <ArrowHead size={size} />\n    </marker>\n  );\n};\nArrowMarker.propTypes = {\n  id: PropTypes.string,\n  size: PropTypes.number,\n  className: PropTypes.string,\n};\nArrowMarker.defaultProps = {\n  size: 5,\n};\n"],"file":"arrow-head.js"}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/code/graphing/tools/shared/line/index.js

@@ -0,0 +1,583 @@
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+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 _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _point = require("../point");
+
+var _plot = require("../../../../plot");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("../styles");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _markLabel = _interopRequireDefault(require("../../../mark-label"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _renderUi = require("../../../../render-ui");
+
+var _utils = require("../../../utils");
+
+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; } }
+
+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; }
+
+var 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
+        });
+      }
+    };
+  };
+};
+
+exports.lineTool = lineTool;
+
+var lineToolComponent = function lineToolComponent(Component) {
+  var _class;
+
+  return _class = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2["default"])(LineToolComponent, _React$Component);
+
+    var _super = _createSuper(LineToolComponent);
+
+    function LineToolComponent(props) {
+      var _this;
+
+      (0, _classCallCheck2["default"])(this, LineToolComponent);
+      _this = _super.call(this, props);
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startDrag", function () {
+        return _this.setState({
+          mark: _objectSpread({}, _this.props.mark)
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopDrag", function () {
+        var _this$props = _this.props,
+            onChange = _this$props.onChange,
+            mark = _this$props.mark;
+
+        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, _isEqual["default"])(mark, update) && !shouldNotChange) {
+            onChange(mark, update);
+          }
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMark", function (_ref) {
+        var from = _ref.from,
+            to = _ref.to,
+            middle = _ref.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"])((0, _assertThisInitialized2["default"])(_this), "changeMarkProps", function (_ref2) {
+        var from = _ref2.from,
+            to = _ref2.to,
+            middle = _ref2.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, _isEqual["default"])(mark, update)) {
+          onChange(mark, update);
+        }
+      });
+      _this.state = {};
+      return _this;
+    }
+
+    (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;
+        var mark = this.state.mark ? this.state.mark : this.props.mark;
+        var from = (0, _cloneDeep["default"])(mark.from);
+        var to = (0, _cloneDeep["default"])(mark.to);
+        var middle = (0, _cloneDeep["default"])(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
+        });
+      }
+    }]);
+    return LineToolComponent;
+  }(_react["default"].Component), (0, _defineProperty2["default"])(_class, "propTypes", _objectSpread(_objectSpread({}, _plot.types.ToolPropTypeFields), {}, {
+    graphProps: _plot.types.GraphPropsType.isRequired
+  })), _class;
+};
+
+exports.lineToolComponent = lineToolComponent;
+
+var dragOpts = function dragOpts() {
+  return {
+    bounds: function bounds(props, _ref3) {
+      var domain = _ref3.domain,
+          range = _ref3.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 = 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) {
+    (0, _inherits2["default"])(LineBase, _React$Component2);
+
+    var _super2 = _createSuper(LineBase);
+
+    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 = _super2.call.apply(_super2, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["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"])((0, _assertThisInitialized2["default"])(_this2), "dragComp", function (_ref4) {
+        var draggedFrom = _ref4.from,
+            draggedTo = _ref4.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"])((0, _assertThisInitialized2["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"])((0, _assertThisInitialized2["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"])((0, _assertThisInitialized2["default"])(_this2), "labelChange", function (point, type) {
+        var changeMarkProps = _this2.props.changeMarkProps;
+
+        var update = _objectSpread({}, point);
+
+        if (!point.label || (0, _isEmpty["default"])(point.label)) {
+          delete update.label;
+        }
+
+        changeMarkProps((0, _defineProperty2["default"])({}, type, update));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["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,
+            labelModeEnabled = _this2$props5.labelModeEnabled,
+            onClick = _this2$props5.onClick;
+
+        if (!labelModeEnabled) {
+          onClick(point || data);
+          return;
+        }
+
+        if (disabled) {
+          return;
+        }
+
+        if (type === 'middle' && !point && from && to) {
+          point = _objectSpread(_objectSpread({}, point), (0, _utils.getMiddleOfTwoPoints)(from, to));
+        }
+
+        changeMarkProps((0, _defineProperty2["default"])({
+          from: from,
+          to: to
+        }, type, _objectSpread({
+          label: ''
+        }, point)));
+
+        if (_this2.input[type]) {
+          _this2.input[type].focus();
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "input", {});
+      return _this2;
+    }
+
+    (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 && from.hasOwnProperty('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 && to.hasOwnProperty('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 && middle.hasOwnProperty('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("g", null, 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);
+      }
+    }]);
+    return LineBase;
+  }(_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,
+    labelNode: _propTypes["default"].object,
+    labelModeEnabled: _propTypes["default"].bool,
+    changeMarkProps: _propTypes["default"].func
+  });
+  return LineBase;
+};
+
+exports.lineBase = lineBase;
+var styles = {
+  line: function line() {
+    return {
+      fill: 'transparent',
+      stroke: _renderUi.color.defaults.PRIMARY_LIGHT,
+      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.SECONDARY
+    };
+  },
+  disabledArrow: function disabledArrow() {
+    return _objectSpread({}, (0, _styles.disabled)());
+  },
+  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({}, (0, _styles.missing)(key));
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=index.js.map