@pie-lib/tools 0.16.0 → 0.18.0

package/lib/ruler/graphic.js

@@ -0,0 +1,126 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _unitType = _interopRequireDefault(require("./unit-type"));
+
+var _range = _interopRequireDefault(require("lodash/range"));
+
+var _unit = _interopRequireDefault(require("./unit"));
+
+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; } }
+
+var Bg = function Bg(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement("rect", {
+    width: width,
+    height: height,
+    cx: 0,
+    cy: 0,
+    className: className
+  });
+};
+
+Bg.propTypes = {
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  className: _propTypes["default"].string.isRequired
+};
+
+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 _this$props = this.props,
+          width = _this$props.width,
+          height = _this$props.height,
+          classes = _this$props.classes,
+          units = _this$props.units,
+          unit = _this$props.unit;
+      var viewBox = "0 0 ".concat(width, " ").concat(height);
+      var unitWidth = width / units;
+      var unitHeight = height;
+      return /*#__PURE__*/_react["default"].createElement("svg", {
+        viewBox: viewBox
+      }, /*#__PURE__*/_react["default"].createElement(Bg, {
+        width: width,
+        height: height,
+        className: classes.bg
+      }), /*#__PURE__*/_react["default"].createElement(_unitType["default"], {
+        label: unit.type
+      }), (0, _range["default"])(1, units + 1).map(function (r) {
+        return /*#__PURE__*/_react["default"].createElement(_unit["default"], {
+          width: unitWidth,
+          height: unitHeight,
+          key: r,
+          index: r,
+          config: unit,
+          last: r === units
+        });
+      }));
+    }
+  }]);
+  return Graphic;
+}(_react["default"].PureComponent);
+
+exports.Graphic = Graphic;
+(0, _defineProperty2["default"])(Graphic, "propTypes", {
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  units: _propTypes["default"].number.isRequired,
+  unit: _propTypes["default"].object.isRequired,
+  classes: _propTypes["default"].object.isRequired
+});
+
+var styles = function styles(theme) {
+  return {
+    bg: {
+      stroke: (0, _styleUtils.strokeColor)(theme),
+      strokeWidth: '2px',
+      fill: (0, _styleUtils.fillColor)(theme)
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Graphic);
+
+exports["default"] = _default;
+//# sourceMappingURL=graphic.js.map

package/lib/ruler/graphic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ruler/graphic.jsx"],"names":["Bg","width","height","className","propTypes","PropTypes","number","isRequired","string","Graphic","props","classes","units","unit","viewBox","unitWidth","unitHeight","bg","type","map","r","React","PureComponent","object","styles","theme","stroke","strokeWidth","fill"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,EAAE,GAAG,SAALA,EAAK;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,MAAV,QAAUA,MAAV;AAAA,MAAkBC,SAAlB,QAAkBA,SAAlB;AAAA,sBAAkC;AAAM,IAAA,KAAK,EAAEF,KAAb;AAAoB,IAAA,MAAM,EAAEC,MAA5B;AAAoC,IAAA,EAAE,EAAE,CAAxC;AAA2C,IAAA,EAAE,EAAE,CAA/C;AAAkD,IAAA,SAAS,EAAEC;AAA7D,IAAlC;AAAA,CAAX;;AAEAH,EAAE,CAACI,SAAH,GAAe;AACbH,EAAAA,KAAK,EAAEI,sBAAUC,MAAV,CAAiBC,UADX;AAEbL,EAAAA,MAAM,EAAEG,sBAAUC,MAAV,CAAiBC,UAFZ;AAGbJ,EAAAA,SAAS,EAAEE,sBAAUG,MAAV,CAAiBD;AAHf,CAAf;;IAMaE,O;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAgD,KAAKC,KAArD;AAAA,UAAQT,KAAR,eAAQA,KAAR;AAAA,UAAeC,MAAf,eAAeA,MAAf;AAAA,UAAuBS,OAAvB,eAAuBA,OAAvB;AAAA,UAAgCC,KAAhC,eAAgCA,KAAhC;AAAA,UAAuCC,IAAvC,eAAuCA,IAAvC;AACA,UAAMC,OAAO,iBAAUb,KAAV,cAAmBC,MAAnB,CAAb;AACA,UAAMa,SAAS,GAAGd,KAAK,GAAGW,KAA1B;AACA,UAAMI,UAAU,GAAGd,MAAnB;AAEA,0BACE;AAAK,QAAA,OAAO,EAAEY;AAAd,sBACE,gCAAC,EAAD;AAAI,QAAA,KAAK,EAAEb,KAAX;AAAkB,QAAA,MAAM,EAAEC,MAA1B;AAAkC,QAAA,SAAS,EAAES,OAAO,CAACM;AAArD,QADF,eAEE,gCAAC,oBAAD;AAAU,QAAA,KAAK,EAAEJ,IAAI,CAACK;AAAtB,QAFF,EAGG,uBAAM,CAAN,EAASN,KAAK,GAAG,CAAjB,EAAoBO,GAApB,CAAwB,UAACC,CAAD;AAAA,4BACvB,gCAAC,gBAAD;AAAM,UAAA,KAAK,EAAEL,SAAb;AAAwB,UAAA,MAAM,EAAEC,UAAhC;AAA4C,UAAA,GAAG,EAAEI,CAAjD;AAAoD,UAAA,KAAK,EAAEA,CAA3D;AAA8D,UAAA,MAAM,EAAEP,IAAtE;AAA4E,UAAA,IAAI,EAAEO,CAAC,KAAKR;AAAxF,UADuB;AAAA,OAAxB,CAHH,CADF;AASD;;;EAxB0BS,kBAAMC,a;;;iCAAtBb,O,eACQ;AACjBR,EAAAA,KAAK,EAAEI,sBAAUC,MAAV,CAAiBC,UADP;AAEjBL,EAAAA,MAAM,EAAEG,sBAAUC,MAAV,CAAiBC,UAFR;AAGjBK,EAAAA,KAAK,EAAEP,sBAAUC,MAAV,CAAiBC,UAHP;AAIjBM,EAAAA,IAAI,EAAER,sBAAUkB,MAAV,CAAiBhB,UAJN;AAKjBI,EAAAA,OAAO,EAAEN,sBAAUkB,MAAV,CAAiBhB;AALT,C;;AAyBrB,IAAMiB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBR,IAAAA,EAAE,EAAE;AACFS,MAAAA,MAAM,EAAE,6BAAYD,KAAZ,CADN;AAEFE,MAAAA,WAAW,EAAE,KAFX;AAGFC,MAAAA,IAAI,EAAE,2BAAUH,KAAV;AAHJ;AADqB,GAAZ;AAAA,CAAf;;eAQe,wBAAWD,MAAX,EAAmBf,OAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport UnitType from './unit-type';\nimport range from 'lodash/range';\nimport Unit from './unit';\nimport { strokeColor, fillColor } from '../style-utils';\n\nconst Bg = ({ width, height, className }) => <rect width={width} height={height} cx={0} cy={0} className={className} />;\n\nBg.propTypes = {\n  width: PropTypes.number.isRequired,\n  height: PropTypes.number.isRequired,\n  className: PropTypes.string.isRequired,\n};\n\nexport class Graphic extends React.PureComponent {\n  static propTypes = {\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n    units: PropTypes.number.isRequired,\n    unit: PropTypes.object.isRequired,\n    classes: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { width, height, classes, units, unit } = this.props;\n    const viewBox = `0 0 ${width} ${height}`;\n    const unitWidth = width / units;\n    const unitHeight = height;\n\n    return (\n      <svg viewBox={viewBox}>\n        <Bg width={width} height={height} className={classes.bg} />\n        <UnitType label={unit.type} />\n        {range(1, units + 1).map((r) => (\n          <Unit width={unitWidth} height={unitHeight} key={r} index={r} config={unit} last={r === units} />\n        ))}\n      </svg>\n    );\n  }\n}\nconst styles = (theme) => ({\n  bg: {\n    stroke: strokeColor(theme),\n    strokeWidth: '2px',\n    fill: fillColor(theme),\n  },\n});\n\nexport default withStyles(styles)(Graphic);\n"],"file":"graphic.js"}

package/lib/ruler/index.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Ruler = 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 _rotatable = _interopRequireDefault(require("../rotatable"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _graphic = _interopRequireDefault(require("./graphic"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _anchor = _interopRequireDefault(require("../anchor"));
+
+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 Ruler = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Ruler, _React$Component);
+
+  var _super = _createSuper(Ruler);
+
+  function Ruler() {
+    (0, _classCallCheck2["default"])(this, Ruler);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Ruler, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          width = _this$props.width,
+          height = _this$props.height,
+          units = _this$props.units,
+          measure = _this$props.measure,
+          className = _this$props.className,
+          startPosition = _this$props.startPosition,
+          label = _this$props.label,
+          tickCount = _this$props.tickCount;
+      var unit = measure === 'imperial' ? {
+        type: label,
+        ticks: tickCount && tickCount % 4 === 0 ? tickCount : 16
+      } : {
+        type: label,
+        ticks: 10
+      };
+      return /*#__PURE__*/_react["default"].createElement(_rotatable["default"], {
+        className: className,
+        startPosition: startPosition,
+        handle: [{
+          "class": 'leftAnchor',
+          origin: 'bottom right'
+        }, {
+          "class": 'rightAnchor',
+          origin: 'bottom left'
+        }]
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.ruler,
+        style: {
+          width: "".concat(width, "px"),
+          height: "".concat(height, "px")
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_graphic["default"], {
+        width: width,
+        height: height,
+        units: units,
+        unit: unit
+      }), /*#__PURE__*/_react["default"].createElement(_anchor["default"], {
+        className: (0, _classnames["default"])('leftAnchor', classes.leftAnchor)
+      }), /*#__PURE__*/_react["default"].createElement(_anchor["default"], {
+        className: (0, _classnames["default"])('rightAnchor', classes.rightAnchor)
+      })));
+    }
+  }]);
+  return Ruler;
+}(_react["default"].Component);
+
+exports.Ruler = Ruler;
+(0, _defineProperty2["default"])(Ruler, "propTypes", {
+  width: _propTypes["default"].number,
+  height: _propTypes["default"].number,
+  units: _propTypes["default"].number.isRequired,
+  measure: _propTypes["default"].oneOf(['imperial', 'metric']).isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  startPosition: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired
+  }),
+  label: _propTypes["default"].string,
+  tickCount: _propTypes["default"].number
+});
+(0, _defineProperty2["default"])(Ruler, "defaultProps", {
+  width: 480,
+  height: 60,
+  measure: 'imperial',
+  units: 12
+});
+
+var styles = function styles(theme) {
+  return {
+    ruler: {
+      cursor: 'move',
+      position: 'relative',
+      backgroundColor: theme.palette.secondary.light,
+      opacity: 1.0,
+      border: "solid 0px ".concat(theme.palette.primary.main)
+    },
+    leftAnchor: {
+      left: '-10px',
+      top: '40%'
+    },
+    rightAnchor: {
+      right: '-10px',
+      top: '40%'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Ruler);
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/ruler/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ruler/index.jsx"],"names":["Ruler","props","classes","width","height","units","measure","className","startPosition","label","tickCount","unit","type","ticks","origin","ruler","leftAnchor","rightAnchor","React","Component","PropTypes","number","isRequired","oneOf","object","string","shape","left","top","styles","theme","cursor","position","backgroundColor","palette","secondary","light","opacity","border","primary","main","right"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Rotatable from '../rotatable';\nimport classNames from 'classnames';\nimport RulerGraphic from './graphic';\nimport PropTypes from 'prop-types';\nimport Anchor from '../anchor';\n\nexport class Ruler extends React.Component {\n  static propTypes = {\n    width: PropTypes.number,\n    height: PropTypes.number,\n    units: PropTypes.number.isRequired,\n    measure: PropTypes.oneOf(['imperial', 'metric']).isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    startPosition: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      top: PropTypes.number.isRequired,\n    }),\n    label: PropTypes.string,\n    tickCount: PropTypes.number,\n  };\n\n  static defaultProps = {\n    width: 480,\n    height: 60,\n    measure: 'imperial',\n    units: 12,\n  };\n\n  render() {\n    const { classes, width, height, units, measure, className, startPosition, label, tickCount } = this.props;\n\n    const unit =\n      measure === 'imperial'\n        ? {\n            type: label,\n            ticks: tickCount && tickCount % 4 === 0 ? tickCount : 16,\n          }\n        : {\n            type: label,\n            ticks: 10,\n          };\n    return (\n      <Rotatable\n        className={className}\n        startPosition={startPosition}\n        handle={[\n          { class: 'leftAnchor', origin: 'bottom right' },\n          { class: 'rightAnchor', origin: 'bottom left' },\n        ]}\n      >\n        <div className={classes.ruler} style={{ width: `${width}px`, height: `${height}px` }}>\n          <RulerGraphic width={width} height={height} units={units} unit={unit} />\n          <Anchor className={classNames('leftAnchor', classes.leftAnchor)} />\n          <Anchor className={classNames('rightAnchor', classes.rightAnchor)} />\n        </div>\n      </Rotatable>\n    );\n  }\n}\nconst styles = (theme) => ({\n  ruler: {\n    cursor: 'move',\n    position: 'relative',\n    backgroundColor: theme.palette.secondary.light,\n    opacity: 1.0,\n    border: `solid 0px ${theme.palette.primary.main}`,\n  },\n  leftAnchor: {\n    left: '-10px',\n    top: '40%',\n  },\n  rightAnchor: {\n    right: '-10px',\n    top: '40%',\n  },\n});\n\nexport default withStyles(styles)(Ruler);\n"],"file":"index.js"}

package/lib/ruler/unit-type.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UnitType = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styleUtils = require("../style-utils");
+
+var _styles = require("@material-ui/core/styles");
+
+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 UnitType = function UnitType(props) {
+  var classes = props.classes,
+      label = props.label,
+      x = props.x,
+      y = props.y,
+      textAlign = props.textAlign,
+      fill = props.fill,
+      fontSize = props.fontSize,
+      stroke = props.stroke;
+  return /*#__PURE__*/_react["default"].createElement("text", {
+    className: classes.unitType,
+    x: x,
+    y: y,
+    textAnchor: textAlign,
+    stroke: stroke,
+    fill: fill,
+    fontSize: fontSize
+  }, label);
+};
+
+exports.UnitType = UnitType;
+UnitType.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  label: _propTypes["default"].string.isRequired,
+  x: _propTypes["default"].number,
+  y: _propTypes["default"].number,
+  textAlign: _propTypes["default"].string,
+  fill: _propTypes["default"].string,
+  fontSize: _propTypes["default"].number,
+  stroke: _propTypes["default"].string
+};
+UnitType.defaultProps = {
+  textAnchor: 'start',
+  fontSize: 11,
+  stroke: 'none',
+  x: 8,
+  y: 14
+};
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    unitType: _objectSpread(_objectSpread({}, (0, _styleUtils.noSelect)()), {}, {
+      fill: (0, _styleUtils.strokeColor)(theme)
+    })
+  };
+})(UnitType);
+
+exports["default"] = _default;
+//# sourceMappingURL=unit-type.js.map

package/lib/ruler/unit-type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ruler/unit-type.jsx"],"names":["UnitType","props","classes","label","x","y","textAlign","fill","fontSize","stroke","unitType","propTypes","PropTypes","object","isRequired","string","number","defaultProps","textAnchor","theme"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAW;AACjC,MAAQC,OAAR,GAAoED,KAApE,CAAQC,OAAR;AAAA,MAAiBC,KAAjB,GAAoEF,KAApE,CAAiBE,KAAjB;AAAA,MAAwBC,CAAxB,GAAoEH,KAApE,CAAwBG,CAAxB;AAAA,MAA2BC,CAA3B,GAAoEJ,KAApE,CAA2BI,CAA3B;AAAA,MAA8BC,SAA9B,GAAoEL,KAApE,CAA8BK,SAA9B;AAAA,MAAyCC,IAAzC,GAAoEN,KAApE,CAAyCM,IAAzC;AAAA,MAA+CC,QAA/C,GAAoEP,KAApE,CAA+CO,QAA/C;AAAA,MAAyDC,MAAzD,GAAoER,KAApE,CAAyDQ,MAAzD;AAEA,sBACE;AACE,IAAA,SAAS,EAAEP,OAAO,CAACQ,QADrB;AAEE,IAAA,CAAC,EAAEN,CAFL;AAGE,IAAA,CAAC,EAAEC,CAHL;AAIE,IAAA,UAAU,EAAEC,SAJd;AAKE,IAAA,MAAM,EAAEG,MALV;AAME,IAAA,IAAI,EAAEF,IANR;AAOE,IAAA,QAAQ,EAAEC;AAPZ,KASGL,KATH,CADF;AAaD,CAhBM;;;AAkBPH,QAAQ,CAACW,SAAT,GAAqB;AACnBT,EAAAA,OAAO,EAAEU,sBAAUC,MAAV,CAAiBC,UADP;AAEnBX,EAAAA,KAAK,EAAES,sBAAUG,MAAV,CAAiBD,UAFL;AAGnBV,EAAAA,CAAC,EAAEQ,sBAAUI,MAHM;AAInBX,EAAAA,CAAC,EAAEO,sBAAUI,MAJM;AAKnBV,EAAAA,SAAS,EAAEM,sBAAUG,MALF;AAMnBR,EAAAA,IAAI,EAAEK,sBAAUG,MANG;AAOnBP,EAAAA,QAAQ,EAAEI,sBAAUI,MAPD;AAQnBP,EAAAA,MAAM,EAAEG,sBAAUG;AARC,CAArB;AAWAf,QAAQ,CAACiB,YAAT,GAAwB;AACtBC,EAAAA,UAAU,EAAE,OADU;AAEtBV,EAAAA,QAAQ,EAAE,EAFY;AAGtBC,EAAAA,MAAM,EAAE,MAHc;AAItBL,EAAAA,CAAC,EAAE,CAJmB;AAKtBC,EAAAA,CAAC,EAAE;AALmB,CAAxB;;eAQe,wBAAW,UAACc,KAAD;AAAA,SAAY;AACpCT,IAAAA,QAAQ,kCAAO,2BAAP;AAAmBH,MAAAA,IAAI,EAAE,6BAAYY,KAAZ;AAAzB;AAD4B,GAAZ;AAAA,CAAX,EAEXnB,QAFW,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { noSelect, strokeColor } from '../style-utils';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport const UnitType = (props) => {\n  const { classes, label, x, y, textAlign, fill, fontSize, stroke } = props;\n\n  return (\n    <text\n      className={classes.unitType}\n      x={x}\n      y={y}\n      textAnchor={textAlign}\n      stroke={stroke}\n      fill={fill}\n      fontSize={fontSize}\n    >\n      {label}\n    </text>\n  );\n};\n\nUnitType.propTypes = {\n  classes: PropTypes.object.isRequired,\n  label: PropTypes.string.isRequired,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  textAlign: PropTypes.string,\n  fill: PropTypes.string,\n  fontSize: PropTypes.number,\n  stroke: PropTypes.string,\n};\n\nUnitType.defaultProps = {\n  textAnchor: 'start',\n  fontSize: 11,\n  stroke: 'none',\n  x: 8,\n  y: 14,\n};\n\nexport default withStyles((theme) => ({\n  unitType: { ...noSelect(), fill: strokeColor(theme) },\n}))(UnitType);\n"],"file":"unit-type.js"}

package/lib/ruler/unit.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Unit = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _styleUtils = require("../style-utils");
+
+var _range = _interopRequireDefault(require("lodash/range"));
+
+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 Tick = (0, _styles.withStyles)(function (theme) {
+  return {
+    tick: {
+      stroke: (0, _styleUtils.strokeColor)(theme)
+    }
+  };
+})(function (_ref) {
+  var x = _ref.x,
+      height = _ref.height,
+      bottom = _ref.bottom,
+      classes = _ref.classes,
+      major = _ref.major,
+      minor = _ref.minor;
+  var y1 = major ? bottom - height * 2 : minor ? bottom - height * 1.5 : bottom - height;
+  return /*#__PURE__*/_react["default"].createElement("line", {
+    y1: y1,
+    y2: bottom,
+    x1: x,
+    x2: x,
+    className: classes.tick
+  });
+});
+
+var Ticks = function Ticks(_ref2) {
+  var count = _ref2.count,
+      width = _ref2.width,
+      height = _ref2.height;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _range["default"])(1, count).map(function (r) {
+    return /*#__PURE__*/_react["default"].createElement(Tick, {
+      key: r,
+      value: r,
+      x: r * (width / count),
+      major: r % (count / 2) === 0,
+      minor: r % (count / 4) === 0,
+      bottom: height,
+      height: 10
+    });
+  }));
+};
+
+Ticks.propTypes = {
+  count: _propTypes["default"].number.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired
+};
+
+var Unit = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Unit, _React$Component);
+
+  var _super = _createSuper(Unit);
+
+  function Unit() {
+    (0, _classCallCheck2["default"])(this, Unit);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Unit, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          index = _this$props.index,
+          width = _this$props.width,
+          height = _this$props.height,
+          classes = _this$props.classes,
+          last = _this$props.last,
+          config = _this$props.config;
+      var style = {
+        transform: "translate(".concat(width * (index - 1), "px, 0px)")
+      };
+      return /*#__PURE__*/_react["default"].createElement("g", {
+        style: style
+      }, !last && /*#__PURE__*/_react["default"].createElement("line", {
+        x1: width,
+        y1: 0,
+        x2: width,
+        y2: height,
+        className: classes.endTick
+      }), /*#__PURE__*/_react["default"].createElement(Ticks, {
+        count: config.ticks,
+        width: width,
+        height: height
+      }), /*#__PURE__*/_react["default"].createElement("text", {
+        width: width,
+        className: classes.label,
+        x: width - 5,
+        y: 15
+      }, index));
+    }
+  }]);
+  return Unit;
+}(_react["default"].Component);
+
+exports.Unit = Unit;
+(0, _defineProperty2["default"])(Unit, "propTypes", {
+  index: _propTypes["default"].number.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  last: _propTypes["default"].bool.isRequired,
+  config: _propTypes["default"].object.isRequired
+});
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    endTick: {
+      stroke: (0, _styleUtils.strokeColor)(theme),
+      strokeWidth: 1
+    },
+    label: _objectSpread({
+      textAnchor: 'end',
+      fontSize: '12px',
+      fill: (0, _styleUtils.strokeColor)(theme)
+    }, (0, _styleUtils.noSelect)()),
+    base: {
+      fill: 'none',
+      stroke: 'red'
+    }
+  };
+})(Unit);
+
+exports["default"] = _default;
+//# sourceMappingURL=unit.js.map

package/lib/ruler/unit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ruler/unit.jsx"],"names":["Tick","theme","tick","stroke","x","height","bottom","classes","major","minor","y1","Ticks","count","width","map","r","propTypes","PropTypes","number","isRequired","Unit","props","index","last","config","style","transform","endTick","ticks","label","React","Component","object","bool","strokeWidth","textAnchor","fontSize","fill","base"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { noSelect, strokeColor } from '../style-utils';\nimport range from 'lodash/range';\n\nconst Tick = withStyles((theme) => ({\n  tick: {\n    stroke: strokeColor(theme),\n  },\n}))(({ x, height, bottom, classes, major, minor }) => {\n  const y1 = major ? bottom - height * 2 : minor ? bottom - height * 1.5 : bottom - height;\n\n  return <line y1={y1} y2={bottom} x1={x} x2={x} className={classes.tick} />;\n});\n\nconst Ticks = ({ count, width, height }) => {\n  return (\n    <React.Fragment>\n      {range(1, count).map((r) => {\n        return (\n          <Tick\n            key={r}\n            value={r}\n            x={r * (width / count)}\n            major={r % (count / 2) === 0}\n            minor={r % (count / 4) === 0}\n            bottom={height}\n            height={10}\n          />\n        );\n      })}\n    </React.Fragment>\n  );\n};\n\nTicks.propTypes = {\n  count: PropTypes.number.isRequired,\n  width: PropTypes.number.isRequired,\n  height: PropTypes.number.isRequired,\n};\n\nexport class Unit extends React.Component {\n  static propTypes = {\n    index: PropTypes.number.isRequired,\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n    classes: PropTypes.object.isRequired,\n    last: PropTypes.bool.isRequired,\n    config: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { index, width, height, classes, last, config } = this.props;\n\n    const style = {\n      transform: `translate(${width * (index - 1)}px, 0px)`,\n    };\n    return (\n      <g style={style}>\n        {!last && <line x1={width} y1={0} x2={width} y2={height} className={classes.endTick} />}\n\n        <Ticks count={config.ticks} width={width} height={height} />\n        <text width={width} className={classes.label} x={width - 5} y={15}>\n          {index}\n        </text>\n      </g>\n    );\n  }\n}\n\nexport default withStyles((theme) => ({\n  endTick: {\n    stroke: strokeColor(theme),\n    strokeWidth: 1,\n  },\n  label: {\n    textAnchor: 'end',\n    fontSize: '12px',\n    fill: strokeColor(theme),\n    ...noSelect(),\n  },\n  base: {\n    fill: 'none',\n    stroke: 'red',\n  },\n}))(Unit);\n"],"file":"unit.js"}

package/lib/style-utils.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fillColor = void 0;
+Object.defineProperty(exports, "noSelect", {
+  enumerable: true,
+  get: function get() {
+    return _styleUtils.noSelect;
+  }
+});
+exports.strokeColor = void 0;
+
+var _styleUtils = require("@pie-lib/style-utils");
+
+var strokeColor = function strokeColor(theme) {
+  return "var(--ruler-stroke, ".concat(theme.palette.primary.main, ")");
+};
+
+exports.strokeColor = strokeColor;
+
+var fillColor = function fillColor(theme) {
+  return "var(--ruler-bg, ".concat(theme.palette.primary.contrastText, ")");
+};
+
+exports.fillColor = fillColor;
+//# sourceMappingURL=style-utils.js.map

package/lib/style-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/style-utils.js"],"names":["strokeColor","theme","palette","primary","main","fillColor","contrastText"],"mappings":";;;;;;;;;;;;;;AAAA;;AAIO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;AAAA,uCAAkCA,KAAK,CAACC,OAAN,CAAcC,OAAd,CAAsBC,IAAxD;AAAA,CAApB;;;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACJ,KAAD;AAAA,mCAA8BA,KAAK,CAACC,OAAN,CAAcC,OAAd,CAAsBG,YAApD;AAAA,CAAlB","sourcesContent":["import { noSelect } from '@pie-lib/style-utils';\n\nexport { noSelect };\n\nexport const strokeColor = (theme) => `var(--ruler-stroke, ${theme.palette.primary.main})`;\n\nexport const fillColor = (theme) => `var(--ruler-bg, ${theme.palette.primary.contrastText})`;\n"],"file":"style-utils.js"}

package/lib/transform-origin.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parse = void 0;
+
+var keyWordToPercent = function keyWordToPercent(v) {
+  if (v === 'left' || v === 'top') {
+    return 0;
+  } else if (v === 'right' || v === 'bottom') {
+    return 100;
+  } else if (v === 'center') {
+    return 50;
+  } else if (v.endsWith('%')) {
+    return parseFloat(v);
+  } else {
+    return v;
+  }
+};
+
+var getValue = function getValue(s, length) {
+  if (s.endsWith('px')) {
+    return parseFloat(s);
+  } else {
+    s = keyWordToPercent(s);
+    var v = length * (s / 100);
+    return v;
+  }
+};
+
+var normalize = function normalize(a) {
+  if (a[0] === 'bottom' || a[0] === 'top' || a[1] === 'left' || a[1] === 'right') {
+    return [a[1], a[0]];
+  } else {
+    return a;
+  }
+};
+/**
+ * Parse a transform origin string to x/y values.
+ * @param {{width: number, height: number}} rect
+ * @param {string} value
+ * @returns {x:number, y:number}
+ */
+
+
+var parse = function parse(rect, value) {
+  if (!value) {
+    return {
+      x: rect.width / 2,
+      y: rect.height / 2
+    };
+  }
+
+  var arr = value.split(' ');
+
+  if (arr.length === 1) {
+    //1 val
+    var x = getValue(arr[0], rect.width);
+    var y = getValue('50%', rect.height);
+    return {
+      x: x,
+      y: y
+    };
+  } else if (arr.length === 2) {
+    var sorted = normalize(arr);
+
+    var _x = getValue(sorted[0], rect.width);
+
+    var _y = getValue(sorted[1], rect.height);
+
+    return {
+      x: _x,
+      y: _y
+    };
+  } else if (arr.length === 3) {
+    throw new Error('transform-origin values with 3 fields not supported.');
+  }
+};
+
+exports.parse = parse;
+//# sourceMappingURL=transform-origin.js.map