@pie-lib/graphing 2.15.0-beta.2 → 2.15.0-beta.3

package/lib/tools/circle/bg-circle.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.BgCircle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+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 _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _plot = require("@pie-lib/plot");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var utils = _interopRequireWildcard(require("../../utils"));
+
+var _styles2 = require("../shared/styles");
+
+var _excluded = ["classes", "disabled", "className", "correctness", "x", "y", "radius", "graphProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; } }
+
+/**
+ * A low level circle component
+ *
+ * TODO: This and base point have a lot of similarities - merge commonality
+ *
+ */
+var RawCircle = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawCircle, _React$Component);
+
+  var _super = _createSuper(RawCircle);
+
+  function RawCircle() {
+    (0, _classCallCheck2["default"])(this, RawCircle);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(RawCircle, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          disabled = _this$props.disabled,
+          className = _this$props.className,
+          correctness = _this$props.correctness,
+          x = _this$props.x,
+          y = _this$props.y,
+          radius = _this$props.radius,
+          graphProps = _this$props.graphProps,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var scale = graphProps.scale;
+      var rx = Math.abs(scale.x(x + radius) - scale.x(x));
+      var ry = Math.abs(scale.y(y + radius) - scale.y(y));
+      return /*#__PURE__*/_react["default"].createElement("ellipse", (0, _extends2["default"])({
+        className: (0, _classnames["default"])(classes.bgCircle, disabled && classes.disabledSecondary, classes[correctness], className),
+        cx: scale.x(x),
+        cy: scale.y(y),
+        rx: rx,
+        ry: ry
+      }, rest));
+    }
+  }]);
+  return RawCircle;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(RawCircle, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  correctness: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired,
+  radius: _propTypes["default"].number,
+  graphProps: _plot.types.GraphPropsType.isRequired
+});
+
+var applyStyle = function applyStyle(fn) {
+  return _objectSpread(_objectSpread({}, fn('stroke')), {}, {
+    '&:hover': _objectSpread({
+      strokeWidth: 3
+    }, fn('stroke'))
+  });
+};
+
+var styles = function styles() {
+  return {
+    bgCircle: {
+      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: applyStyle(_styles2.disabled),
+    disabledSecondary: applyStyle(_styles2.disabledSecondary),
+    correct: applyStyle(_styles2.correct),
+    incorrect: applyStyle(_styles2.incorrect),
+    missing: applyStyle(_styles2.missing)
+  };
+};
+
+var BgCircle = (0, _styles.withStyles)(styles)(RawCircle);
+exports.BgCircle = BgCircle;
+
+var _default = (0, _plot.gridDraggable)({
+  bounds: function bounds(props, _ref) {
+    var domain = _ref.domain,
+        range = _ref.range;
+    var x = props.x,
+        y = props.y;
+    var area = {
+      left: x,
+      top: y,
+      bottom: y,
+      right: x
+    };
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: function anchorPoint(props) {
+    var x = props.x,
+        y = props.y;
+    return {
+      x: x,
+      y: y
+    };
+  },
+  fromDelta: function fromDelta(props, delta) {
+    var newPoint = utils.point(props).add(utils.point(delta));
+    return newPoint;
+  }
+})(BgCircle);
+
+exports["default"] = _default;
+//# sourceMappingURL=bg-circle.js.map

package/lib/tools/circle/bg-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tools/circle/bg-circle.jsx"],"names":["RawCircle","props","classes","disabled","className","correctness","x","y","radius","graphProps","rest","scale","rx","Math","abs","ry","bgCircle","disabledSecondary","React","Component","PropTypes","object","isRequired","string","bool","number","types","GraphPropsType","applyStyle","fn","strokeWidth","styles","fill","stroke","color","defaults","BLACK","transition","PRIMARY_DARK","correct","incorrect","missing","BgCircle","bounds","domain","range","area","left","top","bottom","right","utils","anchorPoint","fromDelta","delta","newPoint","point","add"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { types, gridDraggable } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport * as utils from '../../utils';\nimport { disabled, disabledSecondary, correct, incorrect, missing } from '../shared/styles';\n\n/**\n * A low level circle component\n *\n * TODO: This and base point have a lot of similarities - merge commonality\n *\n */\nclass RawCircle extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool,\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    radius: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const { classes, disabled, className, correctness, x, y, radius, graphProps, ...rest } = this.props;\n    const { scale } = graphProps;\n    const rx = Math.abs(scale.x(x + radius) - scale.x(x));\n    const ry = Math.abs(scale.y(y + radius) - scale.y(y));\n\n    return (\n      <ellipse\n        className={classNames(classes.bgCircle, disabled && classes.disabledSecondary, classes[correctness], className)}\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        rx={rx}\n        ry={ry}\n        {...rest}\n      />\n    );\n  }\n}\n\nconst applyStyle = (fn) => ({\n  ...fn('stroke'),\n  '&:hover': {\n    strokeWidth: 3,\n    ...fn('stroke'),\n  },\n});\n\nconst styles = () => ({\n  bgCircle: {\n    fill: 'transparent',\n    stroke: color.defaults.BLACK,\n    strokeWidth: 3,\n    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n    '&:hover': {\n      strokeWidth: 6,\n      stroke: color.defaults.PRIMARY_DARK,\n    },\n  },\n  disabled: applyStyle(disabled),\n  disabledSecondary: applyStyle(disabledSecondary),\n  correct: applyStyle(correct),\n  incorrect: applyStyle(incorrect),\n  missing: applyStyle(missing),\n});\n\nexport const BgCircle = withStyles(styles)(RawCircle);\n\nexport default gridDraggable({\n  bounds: (props, { domain, range }) => {\n    const { x, y } = props;\n    const area = { left: x, top: y, bottom: y, right: x };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    const { x, y } = props;\n    return { x, y };\n  },\n  fromDelta: (props, delta) => {\n    const newPoint = utils.point(props).add(utils.point(delta));\n    return newPoint;\n  },\n})(BgCircle);\n"],"file":"bg-circle.js"}

package/lib/tools/circle/component.js

@@ -0,0 +1,406 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RawBaseCircle = exports.BaseCircle = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _point = require("../shared/point");
+
+var _bgCircle = _interopRequireDefault(require("./bg-circle"));
+
+var _utils = require("../../utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _plot = require("@pie-lib/plot");
+
+var _withRootEdge = require("../shared/line/with-root-edge");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _markLabel = _interopRequireDefault(require("../../mark-label"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+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 opacityPulsate = function opacityPulsate(opacity) {
+  return {
+    '0%': {
+      opacity: '0.0'
+    },
+    '50%': {
+      opacity: opacity
+    },
+    '100%': {
+      opacity: '0.0'
+    }
+  };
+};
+
+var getRadius = function getRadius(from, outer) {
+  var c = (0, _utils.point)(from);
+  return c.dist((0, _utils.point)(outer));
+};
+
+var RawBaseCircle = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawBaseCircle, _React$Component);
+
+  var _super = _createSuper(RawBaseCircle);
+
+  function RawBaseCircle() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RawBaseCircle);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangePoint", function (point) {
+      var _this$props = _this.props,
+          middle = _this$props.middle,
+          onChange = _this$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"])(_this), "dragFrom", function (draggedFrom) {
+      var _this$props2 = _this.props,
+          from = _this$props2.from,
+          to = _this$props2.to;
+
+      if (from.label) {
+        draggedFrom.label = from.label;
+      }
+
+      if (!(0, _utils.equalPoints)(draggedFrom, to)) {
+        _this.onChangePoint({
+          from: draggedFrom,
+          to: to
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragTo", function (draggedTo) {
+      var _this$props3 = _this.props,
+          from = _this$props3.from,
+          to = _this$props3.to;
+
+      if (to.label) {
+        draggedTo.label = to.label;
+      }
+
+      if (!(0, _utils.equalPoints)(from, draggedTo)) {
+        _this.onChangePoint({
+          from: from,
+          to: draggedTo
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragCircle", function (draggedFrom) {
+      var _this$props4 = _this.props,
+          from = _this$props4.from,
+          to = _this$props4.to,
+          onChange = _this$props4.onChange,
+          middle = _this$props4.middle;
+      var diff = (0, _utils.point)(from).sub((0, _utils.point)(draggedFrom));
+      var draggedTo = (0, _utils.point)(to).sub(diff);
+
+      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));
+      }
+
+      _this.setState({
+        draggedroot: undefined,
+        draggedOuter: undefined,
+        isCircleDrag: false
+      }, function () {
+        onChange(updated);
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "labelChange", function (point, type) {
+      var changeMarkProps = _this.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"])(_this), "clickPoint", function (point, type, data) {
+      var _this$props5 = _this.props,
+          changeMarkProps = _this$props5.changeMarkProps,
+          disabled = _this$props5.disabled,
+          from = _this$props5.from,
+          to = _this$props5.to,
+          labelModeEnabled = _this$props5.labelModeEnabled,
+          limitLabeling = _this$props5.limitLabeling,
+          onClick = _this$props5.onClick;
+
+      if (!labelModeEnabled) {
+        onClick(point || data);
+        return;
+      }
+
+      if (disabled) {
+        return;
+      } // limit labeling the points of the circle
+
+
+      if (limitLabeling) {
+        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 (_this.input[type]) {
+        _this.input[type].focus();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "input", {});
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RawBaseCircle, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props6 = this.props,
+          from = _this$props6.from,
+          to = _this$props6.to,
+          middle = _this$props6.middle,
+          disabled = _this$props6.disabled,
+          classes = _this$props6.classes,
+          coordinatesOnHover = _this$props6.coordinatesOnHover,
+          building = _this$props6.building,
+          onDragStart = _this$props6.onDragStart,
+          onDragStop = _this$props6.onDragStop,
+          onClick = _this$props6.onClick,
+          correctness = _this$props6.correctness,
+          graphProps = _this$props6.graphProps,
+          labelNode = _this$props6.labelNode,
+          labelModeEnabled = _this$props6.labelModeEnabled;
+      var common = {
+        onDragStart: onDragStart,
+        onDragStop: onDragStop,
+        graphProps: graphProps,
+        onClick: onClick
+      };
+      to = to || from;
+      var radius = getRadius(from, to);
+      var fromLabelNode = null;
+      var toLabelNode = null;
+      var circleLabelNode = null;
+
+      if (labelNode) {
+        if (from && from.hasOwnProperty('label')) {
+          fromLabelNode = /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
+            inputRef: function inputRef(r) {
+              return _this2.input.from = r;
+            },
+            disabled: !labelModeEnabled,
+            mark: from,
+            graphProps: graphProps,
+            onChange: function onChange(label) {
+              return _this2.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 _this2.input.to = r;
+            },
+            disabled: !labelModeEnabled,
+            mark: to,
+            graphProps: graphProps,
+            onChange: function onChange(label) {
+              return _this2.labelChange(_objectSpread(_objectSpread({}, to), {}, {
+                label: label
+              }), 'to');
+            }
+          }), labelNode);
+        }
+
+        if (middle && middle.hasOwnProperty('label')) {
+          circleLabelNode = /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
+            inputRef: function inputRef(r) {
+              return _this2.input.middle = r;
+            },
+            disabled: !labelModeEnabled,
+            mark: middle,
+            graphProps: graphProps,
+            onChange: function onChange(label) {
+              return _this2.labelChange(_objectSpread(_objectSpread({}, middle), {}, {
+                label: label
+              }), 'middle');
+            }
+          }), labelNode);
+        }
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement(_bgCircle["default"], (0, _extends2["default"])({
+        disabled: building || disabled,
+        correctness: correctness,
+        className: (0, _classnames["default"])(building && classes.bgCircleBuilding),
+        x: from.x,
+        y: from.y,
+        radius: radius,
+        onDrag: this.dragCircle
+      }, common, {
+        onClick: function onClick(data) {
+          return _this2.clickPoint(middle, 'middle', data);
+        }
+      })), circleLabelNode, /*#__PURE__*/_react["default"].createElement(_point.BasePoint, (0, _extends2["default"])({
+        disabled: building || disabled,
+        coordinatesOnHover: coordinatesOnHover,
+        correctness: correctness,
+        labelNode: labelNode,
+        x: to.x,
+        y: to.y,
+        onDrag: this.dragTo
+      }, common, {
+        onClick: function onClick(data) {
+          return _this2.clickPoint(to, 'to', data);
+        }
+      })), toLabelNode, /*#__PURE__*/_react["default"].createElement(_point.BasePoint, (0, _extends2["default"])({
+        disabled: building || disabled,
+        coordinatesOnHover: coordinatesOnHover,
+        correctness: correctness,
+        labelNode: labelNode,
+        x: from.x,
+        y: from.y,
+        className: classes.from,
+        onDrag: this.dragFrom
+      }, common, {
+        onClick: function onClick(data) {
+          return _this2.clickPoint(from, 'from', data);
+        }
+      })), fromLabelNode);
+    }
+  }]);
+  return RawBaseCircle;
+}(_react["default"].Component);
+
+exports.RawBaseCircle = RawBaseCircle;
+(0, _defineProperty2["default"])(RawBaseCircle, "propTypes", {
+  building: _propTypes["default"].bool,
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  coordinatesOnHover: _propTypes["default"].bool,
+  correctness: _propTypes["default"].string,
+  from: _plot.types.PointType,
+  disabled: _propTypes["default"].bool,
+  to: _plot.types.PointType,
+  middle: _plot.types.PointType,
+  onChange: _propTypes["default"].func.isRequired,
+  onDragStart: _propTypes["default"].func,
+  onDragStop: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  onClick: _propTypes["default"].func,
+  labelNode: _propTypes["default"].object,
+  labelModeEnabled: _propTypes["default"].bool,
+  changeMarkProps: _propTypes["default"].func,
+  limitLabeling: _propTypes["default"].bool
+});
+(0, _defineProperty2["default"])(RawBaseCircle, "defaultProps", {
+  onClick: function onClick() {
+    return {};
+  }
+});
+var BaseCircle = (0, _styles.withStyles)(function () {
+  return {
+    outerLine: {
+      fill: 'rgb(0,0,0,0)',
+      // TODO hardcoded color
+      stroke: _renderUi.color.defaults.BLACK,
+      strokeWidth: 4,
+      '&:hover': {
+        strokeWidth: 6,
+        stroke: _renderUi.color.defaults.PRIMARY_DARK
+      }
+    },
+    root: {},
+    bgCircleBuilding: {
+      stroke: _renderUi.color.defaults.BLACK,
+      animation: 'opacityPulse 2s ease-out',
+      animationIterationCount: 'infinite',
+      opacity: 1
+    },
+    '@keyframes opacityPulse': opacityPulsate('0.3')
+  };
+})(RawBaseCircle);
+exports.BaseCircle = BaseCircle;
+var Component = (0, _withRootEdge.rootEdgeComponent)(BaseCircle);
+var _default = Component;
+exports["default"] = _default;
+//# sourceMappingURL=component.js.map

package/lib/tools/circle/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tools/circle/component.jsx"],"names":["opacityPulsate","opacity","getRadius","from","outer","c","dist","RawBaseCircle","point","props","middle","onChange","to","draggedFrom","label","onChangePoint","draggedTo","diff","sub","updated","setState","draggedroot","undefined","draggedOuter","isCircleDrag","type","changeMarkProps","update","data","disabled","labelModeEnabled","limitLabeling","onClick","input","focus","classes","coordinatesOnHover","building","onDragStart","onDragStop","correctness","graphProps","labelNode","common","radius","fromLabelNode","toLabelNode","circleLabelNode","hasOwnProperty","ReactDOM","createPortal","r","labelChange","bgCircleBuilding","x","y","dragCircle","clickPoint","dragTo","dragFrom","React","Component","PropTypes","bool","object","isRequired","className","string","types","PointType","func","GraphPropsType","BaseCircle","outerLine","fill","stroke","color","defaults","BLACK","strokeWidth","PRIMARY_DARK","root","animation","animationIterationCount"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { BasePoint } from '../shared/point';\nimport BgCircle from './bg-circle';\nimport { getMiddleOfTwoPoints, point, equalPoints } from '../../utils';\nimport classNames from 'classnames';\nimport { types } from '@pie-lib/plot';\nimport { rootEdgeComponent } from '../shared/line/with-root-edge';\nimport ReactDOM from 'react-dom';\nimport MarkLabel from '../../mark-label';\nimport isEmpty from 'lodash/isEmpty';\nimport { color } from '@pie-lib/render-ui';\n\nconst opacityPulsate = (opacity) => ({\n  '0%': { opacity: '0.0' },\n  '50%': { opacity },\n  '100%': { opacity: '0.0' },\n});\n\nconst getRadius = (from, outer) => {\n  const c = point(from);\n  return c.dist(point(outer));\n};\n\nexport class RawBaseCircle extends React.Component {\n  static propTypes = {\n    building: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    coordinatesOnHover: PropTypes.bool,\n    correctness: PropTypes.string,\n    from: types.PointType,\n    disabled: PropTypes.bool,\n    to: types.PointType,\n    middle: types.PointType,\n    onChange: PropTypes.func.isRequired,\n    onDragStart: PropTypes.func,\n    onDragStop: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    onClick: PropTypes.func,\n    labelNode: PropTypes.object,\n    labelModeEnabled: PropTypes.bool,\n    changeMarkProps: PropTypes.func,\n    limitLabeling: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    onClick: () => ({}),\n  };\n\n  onChangePoint = (point) => {\n    const { middle, onChange } = this.props;\n    const { from, to } = point;\n\n    // because point.from.label and point.to.label can be different\n    if (!equalPoints(from, to)) {\n      if (middle) {\n        point.middle = { ...middle, ...getMiddleOfTwoPoints(from, to) };\n      }\n\n      onChange(point);\n    }\n  };\n\n  dragFrom = (draggedFrom) => {\n    const { from, to } = this.props;\n\n    if (from.label) {\n      draggedFrom.label = from.label;\n    }\n\n    if (!equalPoints(draggedFrom, to)) {\n      this.onChangePoint({ from: draggedFrom, to });\n    }\n  };\n\n  dragTo = (draggedTo) => {\n    const { from, to } = this.props;\n\n    if (to.label) {\n      draggedTo.label = to.label;\n    }\n\n    if (!equalPoints(from, draggedTo)) {\n      this.onChangePoint({ from, to: draggedTo });\n    }\n  };\n\n  dragCircle = (draggedFrom) => {\n    const { from, to, onChange, middle } = this.props;\n    const diff = point(from).sub(point(draggedFrom));\n    const draggedTo = point(to).sub(diff);\n\n    if (from.label) {\n      draggedFrom.label = from.label;\n    }\n\n    if (to.label) {\n      draggedTo.label = to.label;\n    }\n\n    const updated = { from: draggedFrom, to: draggedTo };\n\n    if (middle) {\n      updated.middle = { ...middle, ...getMiddleOfTwoPoints(draggedFrom, draggedTo) };\n    }\n\n    this.setState(\n      {\n        draggedroot: undefined,\n        draggedOuter: undefined,\n        isCircleDrag: false,\n      },\n      () => {\n        onChange(updated);\n      },\n    );\n  };\n\n  labelChange = (point, type) => {\n    const { changeMarkProps } = this.props;\n    const update = { ...point };\n\n    if (!point.label || isEmpty(point.label)) {\n      delete update.label;\n    }\n\n    changeMarkProps({ [type]: update });\n  };\n\n  clickPoint = (point, type, data) => {\n    const { changeMarkProps, disabled, from, to, labelModeEnabled, limitLabeling, onClick } = this.props;\n    if (!labelModeEnabled) {\n      onClick(point || data);\n      return;\n    }\n\n    if (disabled) {\n      return;\n    }\n\n    // limit labeling the points of the circle\n    if (limitLabeling) {\n      return;\n    }\n\n    if (type === 'middle' && !point && from && to) {\n      point = { ...point, ...getMiddleOfTwoPoints(from, to) };\n    }\n\n    changeMarkProps({ from, to, [type]: { label: '', ...point } });\n\n    if (this.input[type]) {\n      this.input[type].focus();\n    }\n  };\n\n  // IMPORTANT, do not remove\n  input = {};\n\n  render() {\n    let {\n      from,\n      to,\n      middle,\n      disabled,\n      classes,\n      coordinatesOnHover,\n      building,\n      onDragStart,\n      onDragStop,\n      onClick,\n      correctness,\n      graphProps,\n      labelNode,\n      labelModeEnabled,\n    } = this.props;\n    const common = { onDragStart, onDragStop, graphProps, onClick };\n\n    to = to || from;\n\n    const radius = getRadius(from, to);\n\n    let fromLabelNode = null;\n    let toLabelNode = null;\n    let circleLabelNode = null;\n\n    if (labelNode) {\n      if (from && from.hasOwnProperty('label')) {\n        fromLabelNode = ReactDOM.createPortal(\n          <MarkLabel\n            inputRef={(r) => (this.input.from = r)}\n            disabled={!labelModeEnabled}\n            mark={from}\n            graphProps={graphProps}\n            onChange={(label) => this.labelChange({ ...from, label }, 'from')}\n          />,\n          labelNode,\n        );\n      }\n\n      if (to && to.hasOwnProperty('label')) {\n        toLabelNode = ReactDOM.createPortal(\n          <MarkLabel\n            inputRef={(r) => (this.input.to = r)}\n            disabled={!labelModeEnabled}\n            mark={to}\n            graphProps={graphProps}\n            onChange={(label) => this.labelChange({ ...to, label }, 'to')}\n          />,\n          labelNode,\n        );\n      }\n\n      if (middle && middle.hasOwnProperty('label')) {\n        circleLabelNode = ReactDOM.createPortal(\n          <MarkLabel\n            inputRef={(r) => (this.input.middle = r)}\n            disabled={!labelModeEnabled}\n            mark={middle}\n            graphProps={graphProps}\n            onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}\n          />,\n          labelNode,\n        );\n      }\n    }\n\n    return (\n      <g>\n        <BgCircle\n          disabled={building || disabled}\n          correctness={correctness}\n          className={classNames(building && classes.bgCircleBuilding)}\n          x={from.x}\n          y={from.y}\n          radius={radius}\n          onDrag={this.dragCircle}\n          {...common}\n          onClick={(data) => this.clickPoint(middle, 'middle', data)}\n        />\n        {circleLabelNode}\n\n        <BasePoint\n          disabled={building || disabled}\n          coordinatesOnHover={coordinatesOnHover}\n          correctness={correctness}\n          labelNode={labelNode}\n          x={to.x}\n          y={to.y}\n          onDrag={this.dragTo}\n          {...common}\n          onClick={(data) => this.clickPoint(to, 'to', data)}\n        />\n        {toLabelNode}\n\n        <BasePoint\n          disabled={building || disabled}\n          coordinatesOnHover={coordinatesOnHover}\n          correctness={correctness}\n          labelNode={labelNode}\n          x={from.x}\n          y={from.y}\n          className={classes.from}\n          onDrag={this.dragFrom}\n          {...common}\n          onClick={(data) => this.clickPoint(from, 'from', data)}\n        />\n        {fromLabelNode}\n      </g>\n    );\n  }\n}\n\nexport const BaseCircle = withStyles(() => ({\n  outerLine: {\n    fill: 'rgb(0,0,0,0)', // TODO hardcoded color\n    stroke: color.defaults.BLACK,\n    strokeWidth: 4,\n    '&:hover': {\n      strokeWidth: 6,\n      stroke: color.defaults.PRIMARY_DARK,\n    },\n  },\n  root: {},\n  bgCircleBuilding: {\n    stroke: color.defaults.BLACK,\n    animation: 'opacityPulse 2s ease-out',\n    animationIterationCount: 'infinite',\n    opacity: 1,\n  },\n  '@keyframes opacityPulse': opacityPulsate('0.3'),\n}))(RawBaseCircle);\n\nconst Component = rootEdgeComponent(BaseCircle);\nexport default Component;\n"],"file":"component.js"}