@pie-lib/graphing 2.11.3-next.52 → 2.11.4

package/src/tools/ray/component.jsx

@@ -9,7 +9,7 @@ import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
 
 const markerId = genUid();
 
-const rayStyles = theme => ({
+const rayStyles = (theme) => ({
   line: styles.line(theme),
   enabledArrow: styles.arrow(theme),
   disabledArrow: styles.disabledArrow(theme),
@@ -17,10 +17,10 @@ const rayStyles = theme => ({
   correct: styles.correct(theme, 'stroke'),
   correctArrow: styles.correct(theme),
   incorrect: styles.incorrect(theme, 'stroke'),
-  incorrectArrow: styles.incorrect(theme)
+  incorrectArrow: styles.incorrect(theme),
 });
 
-export const RayLine = props => {
+export const RayLine = (props) => {
   const { graphProps, from, to, classes, disabled, correctness, className, ...rest } = props;
   const { scale } = graphProps;
   const { domain, range } = getAdjustedGraphLimits(graphProps);
@@ -42,12 +42,7 @@ export const RayLine = props => {
         x2={scale.x(aToB.x)}
         y2={scale.y(aToB.y)}
         {...rest}
-        className={classNames(
-          classes.line,
-          disabled && classes.disabled,
-          classes[correctness],
-          className
-        )}
+        className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
         markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
       />
     </g>
@@ -62,7 +57,7 @@ RayLine.propTypes = {
   graphProps: PropTypes.any,
   from: types.PointType,
   to: types.PointType,
-  markerId: PropTypes.string
+  markerId: PropTypes.string,
 };
 
 const StyledRay = withStyles(rayStyles)(RayLine);

package/src/tools/segment/component.jsx

@@ -6,13 +6,13 @@ import { types } from '@pie-lib/plot';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 
-const lineStyles = theme => ({
+const lineStyles = (theme) => ({
   line: styles.line(theme),
   disabled: styles.disabled(theme),
   correct: styles.correct(theme, 'stroke'),
-  incorrect: styles.incorrect(theme, 'stroke')
+  incorrect: styles.incorrect(theme, 'stroke'),
 });
-export const Line = props => {
+export const Line = (props) => {
   const { className, classes, correctness, disabled, graphProps, from, to, ...rest } = props;
   const { scale } = graphProps;
 
@@ -24,12 +24,7 @@ export const Line = props => {
       y1={scale.y(from.y)}
       x2={scale.x(to.x)}
       y2={scale.y(to.y)}
-      className={classNames(
-        classes.line,
-        disabled && classes.disabled,
-        classes[correctness],
-        className
-      )}
+      className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
       {...rest}
     />
   );
@@ -42,7 +37,7 @@ Line.propTypes = {
   disabled: PropTypes.bool,
   graphProps: PropTypes.any,
   from: types.PointType,
-  to: types.PointType
+  to: types.PointType,
 };
 
 const StyledLine = withStyles(lineStyles)(Line);

package/src/tools/shared/arrow-head.jsx

@@ -7,12 +7,12 @@ export const ArrowHead = ({ size, transform, points }) => (
 ArrowHead.propTypes = {
   points: PropTypes.string,
   size: PropTypes.number,
-  transform: PropTypes.string
+  transform: PropTypes.string,
 };
 ArrowHead.defaultProps = {
   points: '',
   size: 10,
-  transform: ''
+  transform: '',
 };
 export const genUid = () => {
   const v = (Math.random() * 1000).toFixed(0);
@@ -37,8 +37,8 @@ export const ArrowMarker = ({ id, size, className }) => {
 ArrowMarker.propTypes = {
   id: PropTypes.string,
   size: PropTypes.number,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 ArrowMarker.defaultProps = {
-  size: 5
+  size: 5,
 };

package/src/tools/shared/line/index.jsx

@@ -23,7 +23,7 @@ export const lineTool = (type, Component) => () => ({
       return {
         type,
         building: true,
-        from: point
+        from: point,
       };
     }
 
@@ -32,14 +32,14 @@ export const lineTool = (type, Component) => () => ({
     }
 
     return { ...mark, building: false, to: point };
-  }
+  },
 });
 
-export const lineToolComponent = Component => {
+export const lineToolComponent = (Component) => {
   return class LineToolComponent extends React.Component {
     static propTypes = {
       ...types.ToolPropTypeFields,
-      graphProps: types.GraphPropsType.isRequired
+      graphProps: types.GraphPropsType.isRequired,
     };
 
     constructor(props) {
@@ -55,8 +55,7 @@ export const lineToolComponent = Component => {
 
       this.setState({ mark: undefined }, () => {
         const { type } = update;
-        const shouldNotChange =
-          type && (type === 'parabola' || type === 'sine') && sameAxes(update.from, update.to);
+        const shouldNotChange = type && (type === 'parabola' || type === 'sine') && sameAxes(update.from, update.to);
 
         if (!isEqual(mark, update) && !shouldNotChange) {
           onChange(mark, update);
@@ -144,7 +143,7 @@ const dragOpts = () => ({
     const area = utils.lineToArea(props.from, props.to);
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     const { from } = props;
     return from;
   },
@@ -152,9 +151,9 @@ const dragOpts = () => ({
     const { from, to } = props;
     return {
       from: utils.point(from).add(utils.point(delta)),
-      to: utils.point(to).add(utils.point(delta))
+      to: utils.point(to).add(utils.point(delta)),
     };
-  }
+  },
 });
 
 export const lineBase = (Comp, opts) => {
@@ -178,10 +177,10 @@ export const lineBase = (Comp, opts) => {
       disabled: PropTypes.bool,
       labelNode: PropTypes.object,
       labelModeEnabled: PropTypes.bool,
-      changeMarkProps: PropTypes.func
+      changeMarkProps: PropTypes.func,
     };
 
-    onChangePoint = point => {
+    onChangePoint = (point) => {
       const { middle, onChange } = this.props;
       const { from, to } = point;
 
@@ -215,7 +214,7 @@ export const lineBase = (Comp, opts) => {
       onChange(updated);
     };
 
-    dragFrom = draggedFrom => {
+    dragFrom = (draggedFrom) => {
       const { from, to } = this.props;
 
       if (from.label) {
@@ -227,7 +226,7 @@ export const lineBase = (Comp, opts) => {
       }
     };
 
-    dragTo = draggedTo => {
+    dragTo = (draggedTo) => {
       const { from, to } = this.props;
 
       if (to.label) {
@@ -280,7 +279,7 @@ export const lineBase = (Comp, opts) => {
         correctness,
         onClick,
         labelNode,
-        labelModeEnabled
+        labelModeEnabled,
       } = this.props;
       const common = { graphProps, onDragStart, onDragStop, disabled, correctness, onClick };
       const angle = to ? trig.toDegrees(trig.angle(from, to)) : 0;
@@ -293,39 +292,39 @@ export const lineBase = (Comp, opts) => {
         if (from && from.hasOwnProperty('label')) {
           fromLabelNode = ReactDOM.createPortal(
             <MarkLabel
-              inputRef={r => (this.input.from = r)}
+              inputRef={(r) => (this.input.from = r)}
               disabled={!labelModeEnabled}
               mark={from}
               graphProps={graphProps}
-              onChange={label => this.labelChange({ ...from, label }, 'from')}
+              onChange={(label) => this.labelChange({ ...from, label }, 'from')}
             />,
-            labelNode
+            labelNode,
           );
         }
 
         if (to && to.hasOwnProperty('label')) {
           toLabelNode = ReactDOM.createPortal(
             <MarkLabel
-              inputRef={r => (this.input.to = r)}
+              inputRef={(r) => (this.input.to = r)}
               disabled={!labelModeEnabled}
               mark={to}
               graphProps={graphProps}
-              onChange={label => this.labelChange({ ...to, label }, 'to')}
+              onChange={(label) => this.labelChange({ ...to, label }, 'to')}
             />,
-            labelNode
+            labelNode,
           );
         }
 
         if (middle && middle.hasOwnProperty('label')) {
           lineLabelNode = ReactDOM.createPortal(
             <MarkLabel
-              inputRef={r => (this.input.middle = r)}
+              inputRef={(r) => (this.input.middle = r)}
               disabled={!labelModeEnabled}
               mark={middle}
               graphProps={graphProps}
-              onChange={label => this.labelChange({ ...middle, label }, 'middle')}
+              onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}
             />,
-            labelNode
+            labelNode,
           );
         }
       }
@@ -384,23 +383,23 @@ export const styles = {
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark()
-    }
+      stroke: color.primaryDark(),
+    },
   }),
   arrow: () => ({
-    fill: color.secondary()
+    fill: color.secondary(),
   }),
   disabledArrow: () => ({
-    ...disabled()
+    ...disabled(),
   }),
   disabled: () => ({
     ...disabled('stroke'),
-    strokeWidth: 2
+    strokeWidth: 2,
   }),
   correct: (theme, key) => ({
-    ...correct(key)
+    ...correct(key),
   }),
   incorrect: (theme, key) => ({
-    ...incorrect(key)
-  })
+    ...incorrect(key),
+  }),
 };

package/src/tools/shared/line/line-path.jsx

@@ -17,40 +17,24 @@ export class RawLinePath extends React.Component {
     correctness: PropTypes.string,
     from: types.PointType,
     to: types.PointType,
-    isDragging: PropTypes.bool
+    isDragging: PropTypes.bool,
   };
 
   static defaultProps = {
     from: {},
-    to: {}
+    to: {},
   };
 
   render() {
     /* eslint-disable no-unused-vars */
-    const {
-      data,
-      classes,
-      className,
-      disabled,
-      correctness,
-      from,
-      to,
-      graphProps,
-      isDragging,
-      ...rest
-    } = this.props;
+    const { data, classes, className, disabled, correctness, from, to, graphProps, isDragging, ...rest } = this.props;
     /* eslint-enable */
 
     return (
       <React.Fragment>
         <vx.LinePath
           data={data}
-          className={classNames(
-            classes.drawLine,
-            disabled && classes.disabled,
-            classes[correctness],
-            className
-          )}
+          className={classNames(classes.drawLine, disabled && classes.disabled, classes[correctness], className)}
           {...rest}
         />
         <vx.LinePath
@@ -60,7 +44,7 @@ export class RawLinePath extends React.Component {
             isDragging && classes.dragging,
             disabled && classes.disabled,
             classes[correctness],
-            className
+            className,
           )}
           {...rest}
         />
@@ -71,31 +55,31 @@ export class RawLinePath extends React.Component {
 
 const dragging = () => ({
   strokeWidth: 7,
-  stroke: color.secondaryLight()
+  stroke: color.secondaryLight(),
 });
 
-export const LinePath = withStyles(theme => ({
+export const LinePath = withStyles((theme) => ({
   drawLine: {
     fill: 'none',
     strokeWidth: 2,
-    stroke: color.secondaryLight()
+    stroke: color.secondaryLight(),
   },
   line: {
     strokeWidth: 6,
     fill: 'none',
     transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
     stroke: 'transparent',
-    '&:hover': dragging(theme)
+    '&:hover': dragging(theme),
   },
   dragging: dragging(theme),
   disabled: {
     ...disabled('stroke'),
-    strokeWidth: 2
+    strokeWidth: 2,
   },
   correct: {
-    ...correct('stroke')
+    ...correct('stroke'),
   },
   incorrect: {
-    ...incorrect('stroke')
-  }
+    ...incorrect('stroke'),
+  },
 }))(RawLinePath);

package/src/tools/shared/line/with-root-edge.jsx

@@ -5,7 +5,7 @@ import { LinePath } from '../line/line-path';
 import { curveMonotoneX } from '@vx/curve';
 import { lineBase, lineToolComponent } from './index';
 
-const toRootEdge = m => {
+const toRootEdge = (m) => {
   const out = { ...m };
   out.root = { ...m.from };
   out.edge = m.to ? { ...m.to } : undefined;
@@ -14,7 +14,7 @@ const toRootEdge = m => {
   return out;
 };
 
-const toFromTo = m => {
+const toFromTo = (m) => {
   const out = { ...m };
   out.from = { ...m.root };
   out.to = m.edge ? { ...m.edge } : undefined;
@@ -23,8 +23,8 @@ const toFromTo = m => {
   return out;
 };
 
-export const rootEdgeToFromToWrapper = BaseComp => {
-  const Wrapper = props => {
+export const rootEdgeToFromToWrapper = (BaseComp) => {
+  const Wrapper = (props) => {
     const m = toFromTo(props.mark);
 
     const onChange = (current, next) => {
@@ -36,38 +36,27 @@ export const rootEdgeToFromToWrapper = BaseComp => {
 
   Wrapper.propTypes = {
     onChange: PropTypes.func,
-    mark: PropTypes.object
+    mark: PropTypes.object,
   };
 
   return Wrapper;
 };
 
-export const rootEdgeComponent = RootEdgeComp => {
+export const rootEdgeComponent = (RootEdgeComp) => {
   const BaseComponent = lineToolComponent(RootEdgeComp);
   return rootEdgeToFromToWrapper(BaseComponent);
 };
 
-const withPointsGenerationLinePath = getPoints => {
-  const LinePathComponent = props => {
-    const {
-      graphProps,
-      from,
-      to,
-      onClick,
-      onDragStart,
-      onDragStop,
-      onChange,
-      disabled,
-      correctness,
-      ...rest
-    } = props;
+const withPointsGenerationLinePath = (getPoints) => {
+  const LinePathComponent = (props) => {
+    const { graphProps, from, to, onClick, onDragStart, onDragStop, onChange, disabled, correctness, ...rest } = props;
 
     const { dataPoints } = getPoints({
       graphProps: props.graphProps,
       root: from,
-      edge: to
+      edge: to,
     });
-    const raw = dataPoints.map(d => [graphProps.scale.x(d.x), graphProps.scale.y(d.y)]);
+    const raw = dataPoints.map((d) => [graphProps.scale.x(d.x), graphProps.scale.y(d.y)]);
 
     const common = {
       onClick,
@@ -76,7 +65,7 @@ const withPointsGenerationLinePath = getPoints => {
       onDragStop,
       onChange,
       disabled,
-      correctness
+      correctness,
     };
 
     return <LinePath data={raw} from={from} to={to} curve={curveMonotoneX} {...common} {...rest} />;
@@ -90,12 +79,12 @@ const withPointsGenerationLinePath = getPoints => {
     onDragStop: PropTypes.func,
     onChange: PropTypes.func,
     disabled: PropTypes.bool,
-    correctness: PropTypes.string
+    correctness: PropTypes.string,
   };
   return LinePathComponent;
 };
 
-export const withRootEdge = getPoints => {
+export const withRootEdge = (getPoints) => {
   const LinePathComp = withPointsGenerationLinePath(getPoints);
   return lineBase(LinePathComp);
 };

package/src/tools/shared/point/arrow-point.jsx

@@ -15,33 +15,22 @@ export class RawArrow extends React.Component {
     y: PropTypes.number,
     from: PropTypes.shape({
       x: PropTypes.number,
-      y: PropTypes.number
+      y: PropTypes.number,
     }).isRequired,
     to: PropTypes.shape({
       x: PropTypes.number,
-      y: PropTypes.number
+      y: PropTypes.number,
     }),
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   static defaultProps = {
     from: {},
-    to: {}
+    to: {},
   };
 
   render() {
-    const {
-      classes,
-      className,
-      x,
-      y,
-      disabled,
-      correctness,
-      graphProps,
-      from,
-      to,
-      ...rest
-    } = this.props;
+    const { classes, className, x, y, disabled, correctness, graphProps, from, to, ...rest } = this.props;
     // x & y are the initial coordinates for the arrow
     // from & to are used only to calculate the angle that the arrow should be rotated with
 
@@ -58,15 +47,7 @@ export class RawArrow extends React.Component {
     }
 
     return (
-      <g
-        className={classNames(
-          classes.point,
-          disabled && classes.disabled,
-          classes[correctness],
-          className
-        )}
-        {...rest}
-      >
+      <g className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)} {...rest}>
         <polygon
           points={points}
           transform={`

package/src/tools/shared/point/arrow.jsx

@@ -14,21 +14,11 @@ export default class Arrow extends React.Component {
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     angle: PropTypes.number.isRequired,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
-    const {
-      classes,
-      angle,
-      className,
-      x,
-      y,
-      disabled,
-      correctness,
-      graphProps,
-      ...rest
-    } = this.props;
+    const { classes, angle, className, x, y, disabled, correctness, graphProps, ...rest } = this.props;
 
     const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
     const { scale } = graphProps;
@@ -42,15 +32,7 @@ export default class Arrow extends React.Component {
         ${scaledX - size}, ${scaledY + size / 2}`;
 
     return (
-      <g
-        className={classNames(
-          classes.point,
-          disabled && classes.disabled,
-          classes[correctness],
-          className
-        )}
-        {...rest}
-      >
+      <g className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)} {...rest}>
         <ArrowHead size={size} transform={transform} points={points} />
       </g>
     );

package/src/tools/shared/point/base-point.jsx

@@ -16,7 +16,7 @@ export class RawBp extends React.Component {
     labelNode: PropTypes.object,
     x: PropTypes.number,
     y: PropTypes.number,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   constructor(props) {
@@ -43,12 +43,7 @@ export class RawBp extends React.Component {
 
     return (
       <g
-        className={classNames(
-          classes.point,
-          disabled && classes.disabled,
-          classes[correctness],
-          className
-        )}
+        className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
         onMouseEnter={() => this.setState({ showCoordinates: true })}
         onMouseLeave={() => this.setState({ showCoordinates: false })}
         {...rest}
@@ -58,10 +53,7 @@ export class RawBp extends React.Component {
         {labelNode &&
           coordinatesOnHover &&
           showCoordinates &&
-          ReactDOM.createPortal(
-            <CoordinatesLabel graphProps={graphProps} x={x} y={y} />,
-            labelNode
-          )}
+          ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
       </g>
     );
   }

package/src/tools/shared/point/index.jsx

@@ -14,14 +14,14 @@ const opts = {
 
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     const { x, y } = props;
 
     return { x, y };
   },
   fromDelta: (props, delta) => {
     return utils.point(props).add(utils.point(delta));
-  }
+  },
 };
 
 const styles = () => {
@@ -29,24 +29,24 @@ const styles = () => {
     point: {
       '& circle, & polygon': {
         cursor: 'pointer',
-        fill: color.secondary()
-      }
+        fill: color.secondary(),
+      },
     },
     disabled: {
       '& circle, & polygon': {
-        ...disabled()
-      }
+        ...disabled(),
+      },
     },
     correct: {
       '& circle, & polygon': {
-        ...correct()
-      }
+        ...correct(),
+      },
     },
     incorrect: {
       '& circle, & polygon': {
-        ...incorrect()
-      }
-    }
+        ...incorrect(),
+      },
+    },
   };
 };
 

package/src/tools/shared/styles.js

@@ -2,14 +2,14 @@ import { color } from '@pie-lib/render-ui';
 
 export const disabled = (key = 'fill') => ({
   [key]: color.disabled(),
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 });
 
 export const correct = (key = 'fill') => ({
   [key]: color.correct(),
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 });
 export const incorrect = (key = 'fill') => ({
   [key]: color.incorrect(),
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 });

package/src/tools/shared/types.js

@@ -4,7 +4,7 @@ export const ToolPropTypeFields = {
   mark: PropTypes.any,
   onChange: PropTypes.func,
   onDragStart: PropTypes.func,
-  onDragStop: PropTypes.func
+  onDragStop: PropTypes.func,
 };
 
 export const ToolPropType = PropTypes.shape(ToolPropTypeFields);