@pie-lib/tools 0.9.22 → 0.9.25

package/src/rotatable.jsx

@@ -12,8 +12,8 @@ const Anchor = withStyles({
     position: 'absolute',
     zIndex: 100,
     width: '200px',
-    height: '80px'
-  }
+    height: '80px',
+  },
 })(({ classes, left, top, color, fill }) => {
   color = color || 'green';
   fill = fill || 'white';
@@ -23,7 +23,7 @@ const Anchor = withStyles({
         className={classes.anchor}
         style={{
           left: left - 10,
-          top: top - 10
+          top: top - 10,
         }}
       >
         <circle cx={10} cy={10} r={8} strokeWidth={1} stroke={color} fill={fill} />
@@ -44,19 +44,19 @@ export class Rotatable extends React.Component {
     handle: PropTypes.arrayOf(
       PropTypes.shape({
         class: PropTypes.string.isRequired,
-        origin: PropTypes.string
-      })
+        origin: PropTypes.string,
+      }),
     ),
     className: PropTypes.string,
     startPosition: PropTypes.shape({
       left: PropTypes.number,
-      top: PropTypes.number
-    })
+      top: PropTypes.number,
+    }),
   };
 
   static defaultProps = {
     showAnchor: false,
-    startPosition: { left: 0, top: 0 }
+    startPosition: { left: 0, top: 0 },
   };
 
   constructor(props) {
@@ -68,8 +68,8 @@ export class Rotatable extends React.Component {
       angle: 0,
       position: {
         left: props.startPosition.left,
-        top: props.startPosition.top
-      }
+        top: props.startPosition.top,
+      },
     };
   }
 
@@ -78,7 +78,7 @@ export class Rotatable extends React.Component {
     document.removeEventListener('mousemove', this.drag);
     document.removeEventListener('mousemove', this.rotate);
 
-    this.handles.forEach(h => {
+    this.handles.forEach((h) => {
       h.el.removeEventListener('mousedown', h.mousedownHandler);
       h.el.removeEventListener('mouseup', this.rotateStop);
     });
@@ -94,7 +94,7 @@ export class Rotatable extends React.Component {
 
     if (Array.isArray(handle)) {
       this.handles = [];
-      handle.forEach(h => {
+      handle.forEach((h) => {
         const el = this.rotatable.querySelector(`.${h.class}`);
 
         if (el) {
@@ -111,7 +111,7 @@ export class Rotatable extends React.Component {
     document.addEventListener('mouseup', this.rotateStop);
   };
 
-  originToXY = origin => {
+  originToXY = (origin) => {
     const { clientWidth: width, clientHeight: height } = this.rotatable;
     return parseOrigin({ width, height }, origin);
   };
@@ -120,7 +120,7 @@ export class Rotatable extends React.Component {
    * Get the anchor point for the given element, origin and rotation.
    * @returns {{left:number, top: number}} - the co-ordinates of the anchor point relative to the whole page.
    */
-  getAnchor = origin => {
+  getAnchor = (origin) => {
     const { rotation } = this.state;
     const { clientWidth, clientHeight } = this.rotatable;
     const { top, left } = this.rotatable.getBoundingClientRect();
@@ -128,19 +128,19 @@ export class Rotatable extends React.Component {
     const { top: anchorTop, left: anchorLeft } = calcAnchor(
       {
         width: clientWidth,
-        height: clientHeight
+        height: clientHeight,
       },
       xy,
-      rotation
+      rotation,
     );
 
     return {
       top: top + anchorTop,
-      left: left + anchorLeft
+      left: left + anchorLeft,
     };
   };
 
-  rotateStart = origin => e => {
+  rotateStart = (origin) => (e) => {
     const { isRotating } = this.state;
     if (isRotating) {
       return;
@@ -166,16 +166,16 @@ export class Rotatable extends React.Component {
         anchor,
         position: {
           left: this.state.position.left + diff.x,
-          top: this.state.position.top + diff.y
-        }
+          top: this.state.position.top + diff.y,
+        },
       },
       () => {
         document.addEventListener('mousemove', this.rotate);
-      }
+      },
     );
   };
 
-  rotateStop = e => {
+  rotateStop = (e) => {
     const { isRotating } = this.state;
 
     if (!isRotating) {
@@ -189,12 +189,12 @@ export class Rotatable extends React.Component {
         isRotating: false,
         angle: this.state.rotation,
         anchor: null,
-        current: null
+        current: null,
       },
       () => {
         document.removeEventListener('mousemove', this.rotate);
         document.removeEventListener('mousemove', this.drag);
-      }
+      },
     );
   };
 
@@ -204,7 +204,7 @@ export class Rotatable extends React.Component {
     return { angle: arctangent(x, y), x, y };
   }
 
-  rotate = e => {
+  rotate = (e) => {
     const { isRotating } = this.state;
     if (!isRotating) {
       return;
@@ -220,22 +220,22 @@ export class Rotatable extends React.Component {
     this.setState({ rotation, diff, current, computedAnchor });
   };
 
-  mouseDown = e => {
-    const handle = this.handles.find(h => h.el === e.target);
+  mouseDown = (e) => {
+    const handle = this.handles.find((h) => h.el === e.target);
 
     if (!handle) {
       this.dragStart(e);
     }
   };
 
-  dragStart = e => {
+  dragStart = (e) => {
     const dragPoint = new Point(e.pageX, e.pageY);
     this.setState({ dragPoint }, () => {
       document.addEventListener('mousemove', this.drag);
     });
   };
 
-  drag = e => {
+  drag = (e) => {
     e.preventDefault();
     const current = new Point(e.pageX, e.pageY);
     const translate = current.sub(this.state.dragPoint);
@@ -251,7 +251,7 @@ export class Rotatable extends React.Component {
 
     const position = {
       left: lastPosition.left + translate.x,
-      top: lastPosition.top + translate.y
+      top: lastPosition.top + translate.y,
     };
 
     document.removeEventListener('mousemove', this.drag);
@@ -268,14 +268,14 @@ export class Rotatable extends React.Component {
       left: position.left,
       top: position.top,
       transformOrigin: origin,
-      transform: `${t} rotate(${rotation}deg)`
+      transform: `${t} rotate(${rotation}deg)`,
     };
 
     return (
       <div
         className={classNames(classes.rotatable, className)}
         style={style}
-        ref={r => (this.rotatable = r)}
+        ref={(r) => (this.rotatable = r)}
         onMouseDown={this.mouseDown}
         onMouseUp={this.mouseUp}
       >
@@ -290,6 +290,6 @@ export default withStyles({
   rotatable: {
     position: 'relative',
     display: 'inline-block',
-    cursor: 'move'
-  }
+    cursor: 'move',
+  },
 })(Rotatable);

package/src/ruler/graphic.jsx

@@ -6,14 +6,12 @@ import range from 'lodash/range';
 import Unit from './unit';
 import { strokeColor, fillColor } from '../style-utils';
 
-const Bg = ({ width, height, className }) => (
-  <rect width={width} height={height} cx={0} cy={0} className={className} />
-);
+const Bg = ({ width, height, className }) => <rect width={width} height={height} cx={0} cy={0} className={className} />;
 
 Bg.propTypes = {
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
-  className: PropTypes.string.isRequired
+  className: PropTypes.string.isRequired,
 };
 
 export class Graphic extends React.PureComponent {
@@ -22,7 +20,7 @@ export class Graphic extends React.PureComponent {
     height: PropTypes.number.isRequired,
     units: PropTypes.number.isRequired,
     unit: PropTypes.object.isRequired,
-    classes: PropTypes.object.isRequired
+    classes: PropTypes.object.isRequired,
   };
 
   render() {
@@ -35,26 +33,19 @@ export class Graphic extends React.PureComponent {
       <svg viewBox={viewBox}>
         <Bg width={width} height={height} className={classes.bg} />
         <UnitType label={unit.type} />
-        {range(1, units + 1).map(r => (
-          <Unit
-            width={unitWidth}
-            height={unitHeight}
-            key={r}
-            index={r}
-            config={unit}
-            last={r === units}
-          />
+        {range(1, units + 1).map((r) => (
+          <Unit width={unitWidth} height={unitHeight} key={r} index={r} config={unit} last={r === units} />
         ))}
       </svg>
     );
   }
 }
-const styles = theme => ({
+const styles = (theme) => ({
   bg: {
     stroke: strokeColor(theme),
     strokeWidth: '2px',
-    fill: fillColor(theme)
-  }
+    fill: fillColor(theme),
+  },
 });
 
 export default withStyles(styles)(Graphic);

package/src/ruler/index.jsx

@@ -16,41 +16,31 @@ export class Ruler extends React.Component {
     className: PropTypes.string,
     startPosition: PropTypes.shape({
       left: PropTypes.number.isRequired,
-      top: PropTypes.number.isRequired
+      top: PropTypes.number.isRequired,
     }),
     label: PropTypes.string,
-    tickCount: PropTypes.number
+    tickCount: PropTypes.number,
   };
 
   static defaultProps = {
     width: 480,
     height: 60,
     measure: 'imperial',
-    units: 12
+    units: 12,
   };
 
   render() {
-    const {
-      classes,
-      width,
-      height,
-      units,
-      measure,
-      className,
-      startPosition,
-      label,
-      tickCount
-    } = this.props;
+    const { classes, width, height, units, measure, className, startPosition, label, tickCount } = this.props;
 
     const unit =
       measure === 'imperial'
         ? {
             type: label,
-            ticks: tickCount && tickCount % 4 === 0 ? tickCount : 16
+            ticks: tickCount && tickCount % 4 === 0 ? tickCount : 16,
           }
         : {
             type: label,
-            ticks: 10
+            ticks: 10,
           };
     return (
       <Rotatable
@@ -58,7 +48,7 @@ export class Ruler extends React.Component {
         startPosition={startPosition}
         handle={[
           { class: 'leftAnchor', origin: 'bottom right' },
-          { class: 'rightAnchor', origin: 'bottom left' }
+          { class: 'rightAnchor', origin: 'bottom left' },
         ]}
       >
         <div className={classes.ruler} style={{ width: `${width}px`, height: `${height}px` }}>
@@ -70,22 +60,22 @@ export class Ruler extends React.Component {
     );
   }
 }
-const styles = theme => ({
+const styles = (theme) => ({
   ruler: {
     cursor: 'move',
     position: 'relative',
     backgroundColor: theme.palette.secondary.light,
     opacity: 1.0,
-    border: `solid 0px ${theme.palette.primary.main}`
+    border: `solid 0px ${theme.palette.primary.main}`,
   },
   leftAnchor: {
     left: '-10px',
-    top: '40%'
+    top: '40%',
   },
   rightAnchor: {
     right: '-10px',
-    top: '40%'
-  }
+    top: '40%',
+  },
 });
 
 export default withStyles(styles)(Ruler);

package/src/ruler/unit-type.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { noSelect, strokeColor } from '../style-utils';
 import { withStyles } from '@material-ui/core/styles';
 
-export const UnitType = props => {
+export const UnitType = (props) => {
   const { classes, label, x, y, textAlign, fill, fontSize, stroke } = props;
 
   return (
@@ -29,7 +29,7 @@ UnitType.propTypes = {
   textAlign: PropTypes.string,
   fill: PropTypes.string,
   fontSize: PropTypes.number,
-  stroke: PropTypes.string
+  stroke: PropTypes.string,
 };
 
 UnitType.defaultProps = {
@@ -37,9 +37,9 @@ UnitType.defaultProps = {
   fontSize: 11,
   stroke: 'none',
   x: 8,
-  y: 14
+  y: 14,
 };
 
-export default withStyles(theme => ({
-  unitType: { ...noSelect(), fill: strokeColor(theme) }
+export default withStyles((theme) => ({
+  unitType: { ...noSelect(), fill: strokeColor(theme) },
 }))(UnitType);

package/src/ruler/unit.jsx

@@ -4,10 +4,10 @@ import { withStyles } from '@material-ui/core/styles';
 import { noSelect, strokeColor } from '../style-utils';
 import range from 'lodash/range';
 
-const Tick = withStyles(theme => ({
+const Tick = withStyles((theme) => ({
   tick: {
-    stroke: strokeColor(theme)
-  }
+    stroke: strokeColor(theme),
+  },
 }))(({ x, height, bottom, classes, major, minor }) => {
   const y1 = major ? bottom - height * 2 : minor ? bottom - height * 1.5 : bottom - height;
 
@@ -17,7 +17,7 @@ const Tick = withStyles(theme => ({
 const Ticks = ({ count, width, height }) => {
   return (
     <React.Fragment>
-      {range(1, count).map(r => {
+      {range(1, count).map((r) => {
         return (
           <Tick
             key={r}
@@ -37,7 +37,7 @@ const Ticks = ({ count, width, height }) => {
 Ticks.propTypes = {
   count: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
 };
 
 export class Unit extends React.Component {
@@ -47,14 +47,14 @@ export class Unit extends React.Component {
     height: PropTypes.number.isRequired,
     classes: PropTypes.object.isRequired,
     last: PropTypes.bool.isRequired,
-    config: PropTypes.object.isRequired
+    config: PropTypes.object.isRequired,
   };
 
   render() {
     const { index, width, height, classes, last, config } = this.props;
 
     const style = {
-      transform: `translate(${width * (index - 1)}px, 0px)`
+      transform: `translate(${width * (index - 1)}px, 0px)`,
     };
     return (
       <g style={style}>
@@ -69,19 +69,19 @@ export class Unit extends React.Component {
   }
 }
 
-export default withStyles(theme => ({
+export default withStyles((theme) => ({
   endTick: {
     stroke: strokeColor(theme),
-    strokeWidth: 1
+    strokeWidth: 1,
   },
   label: {
     textAnchor: 'end',
     fontSize: '12px',
     fill: strokeColor(theme),
-    ...noSelect()
+    ...noSelect(),
   },
   base: {
     fill: 'none',
-    stroke: 'red'
-  }
+    stroke: 'red',
+  },
 }))(Unit);

package/src/style-utils.js

@@ -2,6 +2,6 @@ import { noSelect } from '@pie-lib/style-utils';
 
 export { noSelect };
 
-export const strokeColor = theme => `var(--ruler-stroke, ${theme.palette.primary.main})`;
+export const strokeColor = (theme) => `var(--ruler-stroke, ${theme.palette.primary.main})`;
 
-export const fillColor = theme => `var(--ruler-bg, ${theme.palette.primary.contrastText})`;
+export const fillColor = (theme) => `var(--ruler-bg, ${theme.palette.primary.contrastText})`;

package/src/transform-origin.jsx

@@ -1,4 +1,4 @@
-const keyWordToPercent = v => {
+const keyWordToPercent = (v) => {
   if (v === 'left' || v === 'top') {
     return 0;
   } else if (v === 'right' || v === 'bottom') {
@@ -22,7 +22,7 @@ const getValue = (s, length) => {
   }
 };
 
-const normalize = a => {
+const normalize = (a) => {
   if (a[0] === 'bottom' || a[0] === 'top' || a[1] === 'left' || a[1] === 'right') {
     return [a[1], a[0]];
   } else {
@@ -40,7 +40,7 @@ export const parse = (rect, value) => {
   if (!value) {
     return {
       x: rect.width / 2,
-      y: rect.height / 2
+      y: rect.height / 2,
     };
   }
   const arr = value.split(' ');