@pie-lib/tools 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [0.16.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.16.0) (2025-07-31)
+# [0.17.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.17.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
@@ -11,38 +11,26 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [0.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.15.0) (2025-07-31)
+# [0.16.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.16.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
+# [0.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.15.0) (2025-07-31)
 
-
-
+**Note:** Version bump only for package @pie-lib/tools
 
 # [0.14.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.14.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 # [0.13.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.13.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 # [0.12.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.12.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 # [0.14.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.14.0) (2025-07-31)
 
 **Note:** Version bump only for package @pie-lib/tools

package/lib/anchor-utils.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toRadians = exports.toPoint = exports.toDegrees = exports.normalizeAngle = exports.getXAndY = exports.getTop = exports.getLeft = exports.getAngleAndHypotenuse = exports.getAnchor = exports.distanceBetween = exports.arctangent = void 0;
+
+var _trigonometryCalculator = require("trigonometry-calculator");
+
+var _pointGeometry = _interopRequireDefault(require("@mapbox/point-geometry"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _transformOrigin = require("./transform-origin");
+
+var log = (0, _debug["default"])('@pie-lib:tools:anchor-utils');
+
+var toDegrees = function toDegrees(radians) {
+  return radians * (180 / Math.PI);
+};
+
+exports.toDegrees = toDegrees;
+
+var toRadians = function toRadians(degrees) {
+  return degrees * (Math.PI / 180);
+};
+
+exports.toRadians = toRadians;
+
+var normalizeAngle = function normalizeAngle(a) {
+  if (a > 360) {
+    return a % 360;
+  } else if (a < 0) {
+    return 360 + a % 360;
+  }
+
+  return a;
+};
+
+exports.normalizeAngle = normalizeAngle;
+
+var toPoint = function toPoint(rect, edge) {
+  var out = (0, _transformOrigin.parse)(rect, edge);
+  return new _pointGeometry["default"](out.x, out.y);
+};
+/**
+ * Get the distance between to anchor points in a rect.
+ * @param {{width: number, height: number}} rect - the rect
+ * @param {number} degrees - the degrees
+ * @param {string} from - from anchor
+ * @param {string} to - to anchor
+ * @returns {Point} point - the distance as a Point
+ */
+
+
+exports.toPoint = toPoint;
+
+var distanceBetween = function distanceBetween(rect, degrees, from, to) {
+  var center = new _pointGeometry["default"](rect.width / 2, rect.height / 2);
+  var radians = toRadians(degrees);
+  var fromCenter = center.rotateAround(radians, toPoint(rect, from));
+  var toCenter = center.rotateAround(radians, toPoint(rect, to));
+  var diff = fromCenter.sub(toCenter);
+  return diff;
+};
+/**
+ * For a corner string, a point and a rect, return a relative x,y from that point to a corner.
+ * Note that the y value descends as it goes down (unlike for a screen's y value), so this is only really useful for math functions.
+ * @example
+ * ```
+ * getXAndY('top-left', {width: 100, height: 100}, 10, 10) //=> {x:10, y: -90}
+ * ```
+ * @param {*} corner
+ * @param {*} rect
+ * @param {*} point
+ */
+
+
+exports.distanceBetween = distanceBetween;
+
+var getXAndY = function getXAndY(corner, rect, point) {
+  if (corner === 'top-left') {
+    var x = point.x * -1;
+    var y = point.y;
+    return {
+      x: x,
+      y: y
+    };
+  } else if (corner === 'bottom-left') {
+    var _x = point.x * -1;
+
+    var _y = point.y - rect.height;
+
+    return {
+      x: _x,
+      y: _y
+    };
+  } else if (corner === 'top-right') {
+    var _x2 = rect.width - point.x;
+
+    var _y2 = point.y;
+    return {
+      x: _x2,
+      y: _y2
+    };
+  } else if (corner === 'bottom-right') {
+    var _x3 = rect.width - point.x;
+
+    var _y3 = point.y - rect.height;
+
+    return {
+      x: _x3,
+      y: _y3
+    };
+  }
+};
+
+exports.getXAndY = getXAndY;
+
+var arctangent = function arctangent(x, y) {
+  return toDegrees(Math.atan2(x, y));
+};
+
+exports.arctangent = arctangent;
+
+var getAngleAndHypotenuse = function getAngleAndHypotenuse(corner, rect, point) {
+  var _getXAndY = getXAndY(corner, rect, point),
+      x = _getXAndY.x,
+      y = _getXAndY.y;
+
+  var degrees = arctangent(x, y);
+  var hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  return {
+    x: x,
+    y: y,
+    degrees: degrees,
+    hypotenuse: hypotenuse
+  };
+};
+
+exports.getAngleAndHypotenuse = getAngleAndHypotenuse;
+
+var getPosition = function getPosition(side, rect, point, angle, calcAngle) {
+  if (angle === 0) {
+    return side === 'left' ? point.x : point.y;
+  }
+
+  var points = anglePoints(angle);
+  var key = points[side];
+
+  var _getAngleAndHypotenus = getAngleAndHypotenuse(key, rect, point),
+      degrees = _getAngleAndHypotenus.degrees,
+      hypotenuse = _getAngleAndHypotenus.hypotenuse;
+
+  var ra = calcAngle(degrees);
+
+  if (ra === 0) {
+    return hypotenuse;
+  }
+
+  var t = {
+    angles: {
+      0: ra,
+      1: 90
+    },
+    sides: {
+      1: hypotenuse
+    }
+  };
+  var out = (0, _trigonometryCalculator.trigCalculator)(t);
+  return out.sides[2];
+};
+
+var getTop = function getTop(rect, point, angle) {
+  return getPosition('top', rect, point, angle, function (degrees) {
+    return Math.abs(angle + degrees);
+  });
+};
+
+exports.getTop = getTop;
+
+var getLeft = function getLeft(rect, point, angle) {
+  return getPosition('left', rect, point, angle, function (degrees) {
+    return Math.abs(angle + degrees + 90);
+  });
+};
+/**
+ * Calculate the position of an anchor within a bounding rect, if the source rect has been rotated by an angle.
+ * It does this by finding the appropriate corner of the src rect, that touches the bounding rect, calculates
+ * the hypotenuse (h) of that anchor to that point. Then using that plus the rotation it calculates
+ * the sides of the triangle and returns the length of the side that touches the bounding rect.
+ * @param {{width: number, height: number}} rect - the rect which contains the point
+ * @param {{x:number, y: number}} point - the point within the rect
+ * @param {number} angle - the angle in degrees that the rect has rotated.
+ * @returns {{left: number, top: number}} position
+ */
+
+
+exports.getLeft = getLeft;
+
+var getAnchor = function getAnchor(rect, point, angle) {
+  log('[getAnchor] rect: ', rect, 'point:', point, 'angle: ', angle);
+
+  if (point.x > rect.width) {
+    throw new Error("x: ".concat(point.x, " cannot be greater than width: ").concat(rect.width));
+  }
+
+  if (point.y > rect.height) {
+    throw new Error("y: ".concat(point.y, " cannot be greater than height: ").concat(rect.height));
+  }
+
+  var a = normalizeAngle(angle);
+  var top = getTop(rect, point, a);
+  var left = getLeft(rect, point, a);
+  log('[getAnchor] top: ', top, 'left: ', left);
+  return {
+    top: top,
+    left: left
+  };
+};
+
+exports.getAnchor = getAnchor;
+
+var anglePoints = function anglePoints(angle) {
+  if (angle <= 90) {
+    return {
+      top: 'top-left',
+      left: 'bottom-left'
+    };
+  } else if (angle > 90 && angle <= 180) {
+    return {
+      top: 'bottom-left',
+      left: 'bottom-right'
+    };
+  } else if (angle > 180 && angle <= 270) {
+    return {
+      top: 'bottom-right',
+      left: 'top-right'
+    };
+  } else if (angle > 270 && angle < 360) {
+    return {
+      top: 'top-right',
+      left: 'top-left'
+    };
+  }
+};
+//# sourceMappingURL=anchor-utils.js.map

package/lib/anchor-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/anchor-utils.js"],"names":["log","toDegrees","radians","Math","PI","toRadians","degrees","normalizeAngle","a","toPoint","rect","edge","out","Point","x","y","distanceBetween","from","to","center","width","height","fromCenter","rotateAround","toCenter","diff","sub","getXAndY","corner","point","arctangent","atan2","getAngleAndHypotenuse","hypotenuse","sqrt","pow","getPosition","side","angle","calcAngle","points","anglePoints","key","ra","t","angles","sides","getTop","abs","getLeft","getAnchor","Error","top","left"],"mappings":"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","sourcesContent":["import { trigCalculator } from 'trigonometry-calculator';\nimport Point from '@mapbox/point-geometry';\nimport debug from 'debug';\nimport { parse as parseOrigin } from './transform-origin';\nconst log = debug('@pie-lib:tools:anchor-utils');\n\nexport const toDegrees = (radians) => radians * (180 / Math.PI);\nexport const toRadians = (degrees) => degrees * (Math.PI / 180);\n\nexport const normalizeAngle = (a) => {\n  if (a > 360) {\n    return a % 360;\n  } else if (a < 0) {\n    return 360 + (a % 360);\n  }\n  return a;\n};\n\nexport const toPoint = (rect, edge) => {\n  const out = parseOrigin(rect, edge);\n  return new Point(out.x, out.y);\n};\n\n/**\n * Get the distance between to anchor points in a rect.\n * @param {{width: number, height: number}} rect - the rect\n * @param {number} degrees - the degrees\n * @param {string} from - from anchor\n * @param {string} to - to anchor\n * @returns {Point} point - the distance as a Point\n */\nexport const distanceBetween = (rect, degrees, from, to) => {\n  const center = new Point(rect.width / 2, rect.height / 2);\n  const radians = toRadians(degrees);\n  const fromCenter = center.rotateAround(radians, toPoint(rect, from));\n  const toCenter = center.rotateAround(radians, toPoint(rect, to));\n  const diff = fromCenter.sub(toCenter);\n  return diff;\n};\n\n/**\n * For a corner string, a point and a rect, return a relative x,y from that point to a corner.\n * Note that the y value descends as it goes down (unlike for a screen's y value), so this is only really useful for math functions.\n * @example\n * ```\n * getXAndY('top-left', {width: 100, height: 100}, 10, 10) //=> {x:10, y: -90}\n * ```\n * @param {*} corner\n * @param {*} rect\n * @param {*} point\n */\nexport const getXAndY = (corner, rect, point) => {\n  if (corner === 'top-left') {\n    const x = point.x * -1;\n    const y = point.y;\n    return { x, y };\n  } else if (corner === 'bottom-left') {\n    const x = point.x * -1;\n    const y = point.y - rect.height;\n    return { x, y };\n  } else if (corner === 'top-right') {\n    const x = rect.width - point.x;\n    const y = point.y;\n    return { x, y };\n  } else if (corner === 'bottom-right') {\n    const x = rect.width - point.x;\n    const y = point.y - rect.height;\n    return { x, y };\n  }\n};\n\nexport const arctangent = (x, y) => toDegrees(Math.atan2(x, y));\n\nexport const getAngleAndHypotenuse = (corner, rect, point) => {\n  const { x, y } = getXAndY(corner, rect, point);\n  const degrees = arctangent(x, y);\n  const hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));\n  return { x, y, degrees, hypotenuse };\n};\n\nconst getPosition = (side, rect, point, angle, calcAngle) => {\n  if (angle === 0) {\n    return side === 'left' ? point.x : point.y;\n  }\n  const points = anglePoints(angle);\n  const key = points[side];\n\n  const { degrees, hypotenuse } = getAngleAndHypotenuse(key, rect, point);\n\n  const ra = calcAngle(degrees);\n\n  if (ra === 0) {\n    return hypotenuse;\n  }\n\n  const t = {\n    angles: { 0: ra, 1: 90 },\n    sides: { 1: hypotenuse },\n  };\n  const out = trigCalculator(t);\n  return out.sides[2];\n};\n\nexport const getTop = (rect, point, angle) => {\n  return getPosition('top', rect, point, angle, (degrees) => {\n    return Math.abs(angle + degrees);\n  });\n};\n\nexport const getLeft = (rect, point, angle) => {\n  return getPosition('left', rect, point, angle, (degrees) => {\n    return Math.abs(angle + degrees + 90);\n  });\n};\n\n/**\n * Calculate the position of an anchor within a bounding rect, if the source rect has been rotated by an angle.\n * It does this by finding the appropriate corner of the src rect, that touches the bounding rect, calculates\n * the hypotenuse (h) of that anchor to that point. Then using that plus the rotation it calculates\n * the sides of the triangle and returns the length of the side that touches the bounding rect.\n * @param {{width: number, height: number}} rect - the rect which contains the point\n * @param {{x:number, y: number}} point - the point within the rect\n * @param {number} angle - the angle in degrees that the rect has rotated.\n * @returns {{left: number, top: number}} position\n */\nexport const getAnchor = (rect, point, angle) => {\n  log('[getAnchor] rect: ', rect, 'point:', point, 'angle: ', angle);\n  if (point.x > rect.width) {\n    throw new Error(`x: ${point.x} cannot be greater than width: ${rect.width}`);\n  }\n  if (point.y > rect.height) {\n    throw new Error(`y: ${point.y} cannot be greater than height: ${rect.height}`);\n  }\n  const a = normalizeAngle(angle);\n  const top = getTop(rect, point, a);\n  const left = getLeft(rect, point, a);\n\n  log('[getAnchor] top: ', top, 'left: ', left);\n  return { top, left };\n};\n\nconst anglePoints = (angle) => {\n  if (angle <= 90) {\n    return { top: 'top-left', left: 'bottom-left' };\n  } else if (angle > 90 && angle <= 180) {\n    return { top: 'bottom-left', left: 'bottom-right' };\n  } else if (angle > 180 && angle <= 270) {\n    return { top: 'bottom-right', left: 'top-right' };\n  } else if (angle > 270 && angle < 360) {\n    return { top: 'top-right', left: 'top-left' };\n  }\n};\n"],"file":"anchor-utils.js"}

package/lib/anchor.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var Anchor = (0, _styles.withStyles)(function (theme) {
+  return {
+    anchor: {
+      cursor: 'pointer',
+      width: '20px',
+      height: '20px',
+      position: 'absolute',
+      borderRadius: '10px',
+      backgroundColor: "var(--ruler-bg, ".concat(theme.palette.primary.contrastText, ")"),
+      transition: 'background-color 200ms ease-in',
+      border: "solid 1px var(--ruler-stroke, ".concat(theme.palette.primary.dark, ")"),
+      '&:hover': {
+        backgroundColor: "var(--ruler-bg-hover, ".concat(theme.palette.primary.light, ")")
+      }
+    }
+  };
+})(function (_ref) {
+  var classes = _ref.classes,
+      className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(classes.anchor, className)
+  });
+});
+var _default = Anchor;
+exports["default"] = _default;
+//# sourceMappingURL=anchor.js.map

package/lib/anchor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/anchor.jsx"],"names":["Anchor","theme","anchor","cursor","width","height","position","borderRadius","backgroundColor","palette","primary","contrastText","transition","border","dark","light","classes","className"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,MAAM,GAAG,wBAAW,UAACC,KAAD;AAAA,SAAY;AACpCC,IAAAA,MAAM,EAAE;AACNC,MAAAA,MAAM,EAAE,SADF;AAENC,MAAAA,KAAK,EAAE,MAFD;AAGNC,MAAAA,MAAM,EAAE,MAHF;AAINC,MAAAA,QAAQ,EAAE,UAJJ;AAKNC,MAAAA,YAAY,EAAE,MALR;AAMNC,MAAAA,eAAe,4BAAqBP,KAAK,CAACQ,OAAN,CAAcC,OAAd,CAAsBC,YAA3C,MANT;AAONC,MAAAA,UAAU,EAAE,gCAPN;AAQNC,MAAAA,MAAM,0CAAmCZ,KAAK,CAACQ,OAAN,CAAcC,OAAd,CAAsBI,IAAzD,MARA;AASN,iBAAW;AACTN,QAAAA,eAAe,kCAA2BP,KAAK,CAACQ,OAAN,CAAcC,OAAd,CAAsBK,KAAjD;AADN;AATL;AAD4B,GAAZ;AAAA,CAAX,EAcX;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,sBAA4B;AAAK,IAAA,SAAS,EAAE,4BAAWD,OAAO,CAACd,MAAnB,EAA2Be,SAA3B;AAAhB,IAA5B;AAAA,CAdW,CAAf;eAgBejB,M","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nconst Anchor = withStyles((theme) => ({\n  anchor: {\n    cursor: 'pointer',\n    width: '20px',\n    height: '20px',\n    position: 'absolute',\n    borderRadius: '10px',\n    backgroundColor: `var(--ruler-bg, ${theme.palette.primary.contrastText})`,\n    transition: 'background-color 200ms ease-in',\n    border: `solid 1px var(--ruler-stroke, ${theme.palette.primary.dark})`,\n    '&:hover': {\n      backgroundColor: `var(--ruler-bg-hover, ${theme.palette.primary.light})`,\n    },\n  },\n}))(({ classes, className }) => <div className={classNames(classes.anchor, className)} />);\n\nexport default Anchor;\n"],"file":"anchor.js"}

package/lib/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Protractor", {
+  enumerable: true,
+  get: function get() {
+    return _protractor["default"];
+  }
+});
+Object.defineProperty(exports, "Rotatable", {
+  enumerable: true,
+  get: function get() {
+    return _rotatable["default"];
+  }
+});
+Object.defineProperty(exports, "Ruler", {
+  enumerable: true,
+  get: function get() {
+    return _ruler["default"];
+  }
+});
+exports.utils = void 0;
+
+var _protractor = _interopRequireDefault(require("./protractor"));
+
+var _ruler = _interopRequireDefault(require("./ruler"));
+
+var _rotatable = _interopRequireDefault(require("./rotatable"));
+
+var utils = _interopRequireWildcard(require("./anchor-utils"));
+
+exports.utils = utils;
+
+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; }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import Protractor from './protractor';\nimport Ruler from './ruler';\nimport Rotatable from './rotatable';\nimport * as utils from './anchor-utils';\n\nexport { Protractor, Ruler, Rotatable, utils };\n"],"file":"index.js"}

package/lib/protractor/graphic.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Graphic = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _range = _interopRequireDefault(require("lodash/range"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styleUtils = require("../style-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 Line = (0, _styles.withStyles)(function (theme) {
+  return {
+    line: {
+      strokeWidth: '0.2',
+      stroke: (0, _styleUtils.strokeColor)(theme)
+    }
+  };
+})(function (_ref) {
+  var angle = _ref.angle,
+      classes = _ref.classes,
+      major = _ref.major,
+      minor = _ref.minor;
+  return /*#__PURE__*/_react["default"].createElement("line", {
+    transform: "rotate(".concat(angle, ", 50.5,50)"),
+    className: classes.line,
+    style: {},
+    x1: "1",
+    x2: major ? 10 : minor ? 6 : 3,
+    y1: "50",
+    y2: "50"
+  });
+});
+var Spike = (0, _styles.withStyles)(function (theme) {
+  return {
+    line: {
+      strokeWidth: '0.2',
+      stroke: (0, _styleUtils.strokeColor)(theme)
+    }
+  };
+})(function (_ref2) {
+  var angle = _ref2.angle,
+      classes = _ref2.classes;
+  return /*#__PURE__*/_react["default"].createElement("line", {
+    transform: "rotate(".concat(angle, ", 50.5,50)"),
+    className: classes.line,
+    style: {},
+    x1: "15",
+    x2: '46',
+    y1: "50",
+    y2: "50"
+  });
+});
+var Text = (0, _styles.withStyles)(function (theme) {
+  return {
+    text: _objectSpread({
+      fontSize: '2.5px',
+      textAnchor: 'middle',
+      fill: (0, _styleUtils.strokeColor)(theme)
+    }, (0, _styleUtils.noSelect)())
+  };
+})(function (_ref3) {
+  var angle = _ref3.angle,
+      classes = _ref3.classes;
+  return /*#__PURE__*/_react["default"].createElement("text", {
+    transform: "rotate(".concat(angle - 90, ", 50.5, 50)"),
+    className: classes.text,
+    x: "50",
+    y: "12.5"
+  }, angle);
+});
+
+var Graphic = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2["default"])(Graphic, _React$PureComponent);
+
+  var _super = _createSuper(Graphic);
+
+  function Graphic() {
+    (0, _classCallCheck2["default"])(this, Graphic);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Graphic, [{
+    key: "render",
+    value: function render() {
+      var classes = this.props.classes;
+      return /*#__PURE__*/_react["default"].createElement("svg", {
+        viewBox: "0 0 102 61"
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        className: classes.path,
+        d: "M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z",
+        fill: "none"
+      }), (0, _range["default"])(0, 181).map(function (r) {
+        return /*#__PURE__*/_react["default"].createElement(Line, {
+          minor: r % 5 === 0,
+          major: r % 10 === 0,
+          angle: r,
+          key: r
+        });
+      }), (0, _range["default"])(0, 181, 10).map(function (r) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: r
+        }, /*#__PURE__*/_react["default"].createElement(Spike, {
+          angle: r
+        }), /*#__PURE__*/_react["default"].createElement(Text, {
+          angle: r
+        }));
+      }), /*#__PURE__*/_react["default"].createElement("circle", {
+        r: "4",
+        cx: "50.5",
+        cy: "50",
+        className: classes.circle
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        className: classes.line,
+        x1: "48.5",
+        x2: "52.5",
+        y1: "50",
+        y2: "50"
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        className: classes.line,
+        transform: 'rotate(90 50.5 50)',
+        x1: "48.5",
+        x2: "52.5",
+        y1: "50",
+        y2: "50"
+      }));
+    }
+  }]);
+  return Graphic;
+}(_react["default"].PureComponent);
+
+exports.Graphic = Graphic;
+(0, _defineProperty2["default"])(Graphic, "propTypes", {
+  classes: _propTypes["default"].object.isRequired
+});
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    path: {
+      strokeWidth: '0.2',
+      stroke: (0, _styleUtils.strokeColor)(theme)
+    },
+    line: {
+      strokeWidth: '0.2',
+      stroke: (0, _styleUtils.strokeColor)(theme)
+    },
+    circle: {
+      strokeWidth: '0.2',
+      stroke: (0, _styleUtils.strokeColor)(theme),
+      fill: 'none'
+    }
+  };
+})(Graphic);
+
+exports["default"] = _default;
+//# sourceMappingURL=graphic.js.map

package/lib/protractor/graphic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/protractor/graphic.jsx"],"names":["Line","theme","line","strokeWidth","stroke","angle","classes","major","minor","Spike","Text","text","fontSize","textAnchor","fill","Graphic","props","path","map","r","circle","React","PureComponent","PropTypes","object","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport range from 'lodash/range';\nimport PropTypes from 'prop-types';\nimport { strokeColor, noSelect } from '../style-utils';\n\nconst Line = withStyles((theme) => ({\n  line: {\n    strokeWidth: '0.2',\n    stroke: strokeColor(theme),\n  },\n}))(({ angle, classes, major, minor }) => (\n  <line\n    transform={`rotate(${angle}, 50.5,50)`}\n    className={classes.line}\n    style={{}}\n    x1=\"1\"\n    x2={major ? 10 : minor ? 6 : 3}\n    y1=\"50\"\n    y2=\"50\"\n  />\n));\n\nconst Spike = withStyles((theme) => ({\n  line: {\n    strokeWidth: '0.2',\n    stroke: strokeColor(theme),\n  },\n}))(({ angle, classes }) => (\n  <line transform={`rotate(${angle}, 50.5,50)`} className={classes.line} style={{}} x1=\"15\" x2={'46'} y1=\"50\" y2=\"50\" />\n));\n\nconst Text = withStyles((theme) => ({\n  text: {\n    fontSize: '2.5px',\n    textAnchor: 'middle',\n    fill: strokeColor(theme),\n    ...noSelect(),\n  },\n}))(({ angle, classes }) => (\n  <text transform={`rotate(${angle - 90}, 50.5, 50)`} className={classes.text} x=\"50\" y=\"12.5\">\n    {angle}\n  </text>\n));\n\nexport class Graphic extends React.PureComponent {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { classes } = this.props;\n    return (\n      <svg viewBox=\"0 0 102 61\">\n        <path className={classes.path} d=\"M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z\" fill=\"none\" />\n        {range(0, 181).map((r) => (\n          <Line minor={r % 5 === 0} major={r % 10 === 0} angle={r} key={r} />\n        ))}\n        {range(0, 181, 10).map((r) => (\n          <React.Fragment key={r}>\n            <Spike angle={r} />\n            <Text angle={r} />\n          </React.Fragment>\n        ))}\n        <circle r=\"4\" cx=\"50.5\" cy=\"50\" className={classes.circle} />\n        <line className={classes.line} x1=\"48.5\" x2=\"52.5\" y1=\"50\" y2=\"50\" />\n        <line className={classes.line} transform={'rotate(90 50.5 50)'} x1=\"48.5\" x2=\"52.5\" y1=\"50\" y2=\"50\" />\n      </svg>\n    );\n  }\n}\n\nexport default withStyles((theme) => ({\n  path: {\n    strokeWidth: '0.2',\n    stroke: strokeColor(theme),\n  },\n  line: {\n    strokeWidth: '0.2',\n    stroke: strokeColor(theme),\n  },\n  circle: {\n    strokeWidth: '0.2',\n    stroke: strokeColor(theme),\n    fill: 'none',\n  },\n}))(Graphic);\n"],"file":"graphic.js"}