@pie-lib/graphing-solution-set 2.20.0 → 2.22.0

package/lib/tools/polygon/line.js

@@ -0,0 +1,151 @@
+"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.Line = 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 _plot = require("@pie-lib/plot");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var utils = _interopRequireWildcard(require("../../utils"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles2 = require("../shared/styles");
+
+var _excluded = ["graphProps", "classes", "from", "to", "className", "disabled", "correctness"];
+
+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; } }
+
+var RawLine = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawLine, _React$Component);
+
+  var _super = _createSuper(RawLine);
+
+  function RawLine() {
+    (0, _classCallCheck2["default"])(this, RawLine);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(RawLine, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          graphProps = _this$props.graphProps,
+          classes = _this$props.classes,
+          from = _this$props.from,
+          to = _this$props.to,
+          className = _this$props.className,
+          disabled = _this$props.disabled,
+          correctness = _this$props.correctness,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var scale = graphProps.scale;
+      return /*#__PURE__*/_react["default"].createElement("line", (0, _extends2["default"])({
+        x1: scale.x(from.x),
+        y1: scale.y(from.y),
+        x2: scale.x(to.x),
+        y2: scale.y(to.y),
+        className: (0, _classnames["default"])(classes.line, disabled && classes.disabled, className, classes[correctness])
+      }, rest));
+    }
+  }]);
+  return RawLine;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(RawLine, "propTypes", {
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
+  from: _plot.types.PointType,
+  to: _plot.types.PointType,
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  disabled: _propTypes["default"].bool,
+  correctness: _propTypes["default"].string
+});
+(0, _defineProperty2["default"])(RawLine, "defaultProps", {
+  from: {},
+  to: {}
+});
+var Line = (0, _styles.withStyles)(function () {
+  return {
+    line: {
+      strokeWidth: 6,
+      transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
+      stroke: 'transparent',
+      '&:hover': {
+        strokeWidth: 7,
+        stroke: _renderUi.color.defaults.SECONDARY
+      }
+    },
+    disabled: _objectSpread(_objectSpread({}, (0, _styles2.disabled)('stroke')), {}, {
+      strokeWidth: 2
+    }),
+    correct: (0, _styles2.correct)('stoke'),
+    incorrect: (0, _styles2.incorrect)('stroke'),
+    missing: (0, _styles2.missing)('stroke')
+  };
+})(RawLine);
+exports.Line = Line;
+
+var _default = (0, _plot.gridDraggable)({
+  bounds: function bounds(props, _ref) {
+    var domain = _ref.domain,
+        range = _ref.range;
+    var from = props.from,
+        to = props.to;
+    var area = utils.lineToArea(from, to);
+    return 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: utils.point(from).add(utils.point(delta)),
+      to: utils.point(to).add(utils.point(delta))
+    };
+  }
+})(Line);
+
+exports["default"] = _default;
+//# sourceMappingURL=line.js.map

package/lib/tools/polygon/line.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tools/polygon/line.jsx"],"names":["RawLine","props","graphProps","classes","from","to","className","disabled","correctness","rest","scale","x","y","line","React","Component","PropTypes","string","object","types","PointType","GraphPropsType","isRequired","bool","Line","strokeWidth","transition","stroke","color","defaults","SECONDARY","correct","incorrect","missing","bounds","domain","range","area","utils","lineToArea","anchorPoint","fromDelta","delta","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 { types, gridDraggable } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport * as utils from '../../utils';\nimport classNames from 'classnames';\nimport { correct, disabled, incorrect, missing } from '../shared/styles';\n\nclass RawLine extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    classes: PropTypes.object,\n    from: types.PointType,\n    to: types.PointType,\n    graphProps: types.GraphPropsType.isRequired,\n    disabled: PropTypes.bool,\n    correctness: PropTypes.string,\n  };\n\n  static defaultProps = {\n    from: {},\n    to: {},\n  };\n\n  render() {\n    const { graphProps, classes, from, to, className, disabled, correctness, ...rest } = this.props;\n    const { scale } = graphProps;\n    return (\n      <line\n        x1={scale.x(from.x)}\n        y1={scale.y(from.y)}\n        x2={scale.x(to.x)}\n        y2={scale.y(to.y)}\n        className={classNames(classes.line, disabled && classes.disabled, className, classes[correctness])}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const Line = withStyles(() => ({\n  line: {\n    strokeWidth: 6,\n    transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',\n    stroke: 'transparent',\n    '&:hover': {\n      strokeWidth: 7,\n      stroke: color.defaults.SECONDARY,\n    },\n  },\n  disabled: {\n    ...disabled('stroke'),\n    strokeWidth: 2,\n  },\n  correct: correct('stoke'),\n  incorrect: incorrect('stroke'),\n  missing: missing('stroke'),\n}))(RawLine);\n\nexport default gridDraggable({\n  bounds: (props, { domain, range }) => {\n    const { from, to } = props;\n    const area = utils.lineToArea(from, to);\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    const { from } = props;\n    return from;\n  },\n  fromDelta: (props, delta) => {\n    const { from, to } = props;\n    return {\n      from: utils.point(from).add(utils.point(delta)),\n      to: utils.point(to).add(utils.point(delta)),\n    };\n  },\n})(Line);\n"],"file":"line.js"}

package/lib/tools/polygon/polygon.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPointString = exports["default"] = exports.RawPolygon = exports.Polygon = 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 _plot = require("@pie-lib/plot");
+
+var utils = _interopRequireWildcard(require("../../utils"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+
+var _styles2 = require("../shared/styles");
+
+var _excluded = ["points", "classes", "className", "correctness", "graphProps", "closed", "isSolution"];
+
+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; } }
+
+var getPointString = function getPointString(points, scale) {
+  return (points || []).map(function (p) {
+    var scaledPoint = {
+      x: scale.x(p.x),
+      y: scale.y(p.y)
+    };
+    return "".concat(scaledPoint.x, ",").concat(scaledPoint.y);
+  }).join(' ');
+};
+
+exports.getPointString = getPointString;
+
+var RawPolygon = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawPolygon, _React$Component);
+
+  var _super = _createSuper(RawPolygon);
+
+  function RawPolygon() {
+    (0, _classCallCheck2["default"])(this, RawPolygon);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(RawPolygon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          points = _this$props.points,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          correctness = _this$props.correctness,
+          graphProps = _this$props.graphProps,
+          closed = _this$props.closed,
+          isSolution = _this$props.isSolution,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var scale = graphProps.scale;
+      var pointString = getPointString(points, scale);
+      var Tag = closed ? 'polygon' : 'polyline';
+      return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
+        points: pointString,
+        className: (0, _classnames["default"])(isSolution ? classes.gssSolution : classes.gssClosed, classes[correctness], className)
+      }, rest));
+    }
+  }]);
+  return RawPolygon;
+}(_react["default"].Component);
+
+exports.RawPolygon = RawPolygon;
+(0, _defineProperty2["default"])(RawPolygon, "propTypes", {
+  classes: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  isSolution: _propTypes["default"].bool,
+  points: _propTypes["default"].arrayOf(_plot.types.PointType),
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  closed: _propTypes["default"].bool.isRequired,
+  correctness: _propTypes["default"].string
+});
+(0, _defineProperty2["default"])(RawPolygon, "defaultProps", {
+  points: []
+});
+var Polygon = (0, _styles.withStyles)(function (theme) {
+  return {
+    closed: {
+      fill: (0, _colorManipulator.fade)(theme.palette.primary.light, 0.2),
+      // TODO hardcoded color
+      strokeWidth: 2,
+      stroke: _renderUi.color.defaults.SECONDARY_LIGHT
+    },
+    open: {
+      fill: (0, _colorManipulator.fade)(theme.palette.primary.light, 0.0),
+      // TODO hardcoded color
+      strokeWidth: 2,
+      stroke: _renderUi.color.defaults.SECONDARY_LIGHT,
+      pointerEvents: 'none'
+    },
+    gssClosed: {
+      fill: 'transparent',
+      '&:hover': {
+        fill: 'rgb(0, 0, 0, 0.25)'
+      }
+    },
+    gssSolution: {
+      fill: 'rgb(60, 73, 150, 0.6)'
+    },
+    disabled: _objectSpread({}, (0, _styles2.disabled)('stroke')),
+    correct: _objectSpread({}, (0, _styles2.correct)('stroke')),
+    incorrect: _objectSpread({}, (0, _styles2.incorrect)('stroke'))
+  };
+})(RawPolygon);
+exports.Polygon = Polygon;
+
+var _default = (0, _plot.gridDraggable)({
+  bounds: function bounds(props, _ref) {
+    var domain = _ref.domain,
+        range = _ref.range;
+    var points = props.points;
+    var area = utils.polygonToArea(points);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: function anchorPoint(props) {
+    var points = props.points;
+    return points[0];
+  },
+  fromDelta: function fromDelta(props, delta) {
+    var points = props.points;
+    return points.map(function (p) {
+      return utils.point(p).add(utils.point(delta));
+    });
+  }
+})(Polygon);
+
+exports["default"] = _default;
+//# sourceMappingURL=polygon.js.map

package/lib/tools/polygon/polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tools/polygon/polygon.jsx"],"names":["getPointString","points","scale","map","p","scaledPoint","x","y","join","RawPolygon","props","classes","className","correctness","graphProps","closed","isSolution","rest","pointString","Tag","gssSolution","gssClosed","React","Component","PropTypes","object","string","bool","arrayOf","types","PointType","GraphPropsType","isRequired","Polygon","theme","fill","palette","primary","light","strokeWidth","stroke","color","defaults","SECONDARY_LIGHT","open","pointerEvents","disabled","correct","incorrect","bounds","domain","range","area","utils","polygonToArea","anchorPoint","fromDelta","delta","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 { gridDraggable, types } from '@pie-lib/plot';\nimport * as utils from '../../utils';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nimport { fade } from '@material-ui/core/styles/colorManipulator';\nimport { correct, disabled, incorrect } from '../shared/styles';\n\nexport const getPointString = (points, scale) => {\n  return (points || [])\n    .map((p) => {\n      const scaledPoint = {\n        x: scale.x(p.x),\n        y: scale.y(p.y),\n      };\n      return `${scaledPoint.x},${scaledPoint.y}`;\n    })\n    .join(' ');\n};\n\nexport class RawPolygon extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    isSolution: PropTypes.bool,\n    points: PropTypes.arrayOf(types.PointType),\n    graphProps: types.GraphPropsType.isRequired,\n    closed: PropTypes.bool.isRequired,\n    correctness: PropTypes.string,\n  };\n\n  static defaultProps = {\n    points: [],\n  };\n\n  render() {\n    const { points, classes, className, correctness, graphProps, closed, isSolution, ...rest } = this.props;\n    const { scale } = graphProps;\n\n    const pointString = getPointString(points, scale);\n    const Tag = closed ? 'polygon' : 'polyline';\n    return (\n      <Tag\n        points={pointString}\n        className={classNames(isSolution ? classes.gssSolution : classes.gssClosed, classes[correctness], className)}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const Polygon = withStyles((theme) => ({\n  closed: {\n    fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color\n    strokeWidth: 2,\n    stroke: color.defaults.SECONDARY_LIGHT,\n  },\n  open: {\n    fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color\n    strokeWidth: 2,\n    stroke: color.defaults.SECONDARY_LIGHT,\n    pointerEvents: 'none',\n  },\n  gssClosed: {\n    fill: 'transparent',\n    '&:hover': {\n      fill: 'rgb(0, 0, 0, 0.25)',\n    },\n  },\n  gssSolution: {\n    fill: 'rgb(60, 73, 150, 0.6)',\n  },\n  disabled: {\n    ...disabled('stroke'),\n  },\n  correct: {\n    ...correct('stroke'),\n  },\n  incorrect: {\n    ...incorrect('stroke'),\n  },\n}))(RawPolygon);\n\nexport default gridDraggable({\n  bounds: (props, { domain, range }) => {\n    const { points } = props;\n    const area = utils.polygonToArea(points);\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    const { points } = props;\n    return points[0];\n  },\n  fromDelta: (props, delta) => {\n    const { points } = props;\n\n    return points.map((p) => utils.point(p).add(utils.point(delta)));\n  },\n})(Polygon);\n"],"file":"polygon.js"}

package/lib/tools/shared/arrow-head.js

@@ -0,0 +1,75 @@
+"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 _renderUi = require("@pie-lib/render-ui");
+
+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,
+    style: {
+      fill: _renderUi.color.defaults.BLACK
+    }
+  }, /*#__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/lib/tools/shared/arrow-head.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tools/shared/arrow-head.jsx"],"names":["ArrowHead","size","transform","points","propTypes","PropTypes","string","number","defaultProps","genUid","v","Math","random","toFixed","ArrowMarker","id","className","fill","color","defaults","BLACK"],"mappings":";;;;;;;;;AAAA;;AACA;;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,SARb;AASE,IAAA,KAAK,EAAE;AAAEC,MAAAA,IAAI,EAAEC,gBAAMC,QAAN,CAAeC;AAAvB;AATT,kBAWE,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEnB;AAAjB,IAXF,CADF;AAeD,CAhBM;;;AAiBPa,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';\nimport { color } from '@pie-lib/render-ui';\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      style={{ fill: color.defaults.BLACK }}\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"}