@pie-lib/graphing 2.11.3-next.52 → 2.11.5-next.0

package/src/tools/circle/component.jsx

@@ -12,10 +12,10 @@ import MarkLabel from '../../mark-label';
 import isEmpty from 'lodash/isEmpty';
 import { color } from '@pie-lib/render-ui';
 
-const opacityPulsate = opacity => ({
+const opacityPulsate = (opacity) => ({
   '0%': { opacity: '0.0' },
   '50%': { opacity },
-  '100%': { opacity: '0.0' }
+  '100%': { opacity: '0.0' },
 });
 
 const getRadius = (from, outer) => {
@@ -41,14 +41,14 @@ export class RawBaseCircle extends React.Component {
     onClick: PropTypes.func,
     labelNode: PropTypes.object,
     labelModeEnabled: PropTypes.bool,
-    changeMarkProps: PropTypes.func
+    changeMarkProps: PropTypes.func,
   };
 
   static defaultProps = {
-    onClick: () => ({})
+    onClick: () => ({}),
   };
 
-  onChangePoint = point => {
+  onChangePoint = (point) => {
     const { middle, onChange } = this.props;
     const { from, to } = point;
 
@@ -62,7 +62,7 @@ export class RawBaseCircle extends React.Component {
     }
   };
 
-  dragFrom = draggedFrom => {
+  dragFrom = (draggedFrom) => {
     const { from, to } = this.props;
 
     if (from.label) {
@@ -74,7 +74,7 @@ export class RawBaseCircle extends React.Component {
     }
   };
 
-  dragTo = draggedTo => {
+  dragTo = (draggedTo) => {
     const { from, to } = this.props;
 
     if (to.label) {
@@ -86,7 +86,7 @@ export class RawBaseCircle extends React.Component {
     }
   };
 
-  dragCircle = draggedFrom => {
+  dragCircle = (draggedFrom) => {
     const { from, to, onChange, middle } = this.props;
     const diff = point(from).sub(point(draggedFrom));
     const draggedTo = point(to).sub(diff);
@@ -109,11 +109,11 @@ export class RawBaseCircle extends React.Component {
       {
         draggedroot: undefined,
         draggedOuter: undefined,
-        isCircleDrag: false
+        isCircleDrag: false,
       },
       () => {
         onChange(updated);
-      }
+      },
     );
   };
 
@@ -160,7 +160,7 @@ export class RawBaseCircle extends React.Component {
       correctness,
       graphProps,
       labelNode,
-      labelModeEnabled
+      labelModeEnabled,
     } = this.props;
     const common = { onDragStart, onDragStop, graphProps, onClick };
 
@@ -176,39 +176,39 @@ export class RawBaseCircle extends React.Component {
       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')) {
         circleLabelNode = 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,
         );
       }
     }
@@ -259,24 +259,24 @@ export class RawBaseCircle extends React.Component {
   }
 }
 
-export const BaseCircle = withStyles(theme => ({
+export const BaseCircle = withStyles((theme) => ({
   outerLine: {
     fill: 'rgb(0,0,0,0)', // TODO hardcoded color
     stroke: color.primaryLight(),
     strokeWidth: 4,
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark()
-    }
+      stroke: color.primaryDark(),
+    },
   },
   root: {},
   bgCircleBuilding: {
     stroke: color.secondaryLight(),
     animation: 'opacityPulse 2s ease-out',
     animationIterationCount: 'infinite',
-    opacity: 1
+    opacity: 1,
   },
-  '@keyframes opacityPulse': opacityPulsate('0.3')
+  '@keyframes opacityPulse': opacityPulsate('0.3'),
 }))(RawBaseCircle);
 
 const Component = rootEdgeComponent(BaseCircle);

package/src/tools/circle/index.js

@@ -16,10 +16,10 @@ export const tool = () => ({
       return {
         type: 'circle',
         root: point,
-        building: true
+        building: true,
       };
     } else {
       return { ...mark, edge: point, building: false };
     }
-  }
+  },
 });

package/src/tools/index.js

@@ -8,29 +8,8 @@ import { tool as segment } from './segment';
 import { tool as ray } from './ray';
 import { tool as vector } from './vector';
 
-const allTools = [
-  'circle',
-  'line',
-  'label',
-  'parabola',
-  'point',
-  'polygon',
-  'ray',
-  'segment',
-  'sine',
-  'vector'
-];
+const allTools = ['circle', 'line', 'label', 'parabola', 'point', 'polygon', 'ray', 'segment', 'sine', 'vector'];
 
-const toolsArr = [
-  circle(),
-  line(),
-  parabola(),
-  point(),
-  polygon(),
-  ray(),
-  segment(),
-  sine(),
-  vector()
-];
+const toolsArr = [circle(), line(), parabola(), point(), polygon(), ray(), segment(), sine(), vector()];
 
 export { allTools, toolsArr, circle, line, point, parabola, polygon, ray, sine, vector };

package/src/tools/line/component.jsx

@@ -9,7 +9,7 @@ import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
 
 const markerId = genUid();
 
-const lineStyles = theme => ({
+const lineStyles = (theme) => ({
   line: styles.line(theme),
   enabledArrow: styles.arrow(theme),
   disabledArrow: styles.disabledArrow(theme),
@@ -17,10 +17,10 @@ const lineStyles = 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 ArrowedLine = props => {
+export const ArrowedLine = (props) => {
   const { className, classes, correctness, disabled, graphProps, from, to, ...rest } = props;
   const { scale } = graphProps;
   const { domain, range } = getAdjustedGraphLimits(graphProps);
@@ -41,12 +41,7 @@ export const ArrowedLine = props => {
         y1={scale.y(eFrom.y)}
         x2={scale.x(eTo.x)}
         y2={scale.y(eTo.y)}
-        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})`}
         markerStart={`url(#${props.markerId || markerId}-${suffix})`}
         {...rest}
@@ -63,7 +58,7 @@ ArrowedLine.propTypes = {
   graphProps: types.GraphPropsType,
   from: types.PointType,
   to: types.PointType,
-  markerId: PropTypes.string
+  markerId: PropTypes.string,
 };
 
 const StyledArrowedLine = withStyles(lineStyles)(ArrowedLine);

package/src/tools/parabola/component.jsx

@@ -4,7 +4,7 @@ import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
 
 const log = debug('pie-lib:graphing:sine');
 
-const Parabola = withRootEdge(props => {
+const Parabola = withRootEdge((props) => {
   const { domain } = props.graphProps;
 
   const { root, edge } = props;
@@ -13,14 +13,7 @@ const Parabola = withRootEdge(props => {
   const dataPoints =
     edge && edge.x === root.x
       ? []
-      : buildDataPoints(
-          domain.min,
-          domain.max,
-          root,
-          edge,
-          domain.step || interval,
-          parabolaFromTwoPoints(root, edge)
-        );
+      : buildDataPoints(domain.min, domain.max, root, edge, domain.step || interval, parabolaFromTwoPoints(root, edge));
   log('dataPoints:', dataPoints);
   return { root: props.root, edge: props.edge, dataPoints };
 });

package/src/tools/parabola/index.js

@@ -20,12 +20,12 @@ export const tool = () => ({
         root: point,
         edge: undefined,
         closed: false,
-        building: true
+        building: true,
       };
     } else if (mark && !mark.root) {
       throw new Error('no root - should never happen');
     } else {
       return { ...mark, edge: point, closed: true, building: false };
     }
-  }
+  },
 });

package/src/tools/point/component.jsx

@@ -10,7 +10,7 @@ import isEmpty from 'lodash/isEmpty';
 export class Point extends React.Component {
   static propTypes = {
     graphProps: types.GraphPropsType.isRequired,
-    ...ToolPropTypeFields
+    ...ToolPropTypeFields,
   };
 
   static defaultProps = {};
@@ -20,7 +20,7 @@ export class Point extends React.Component {
     this.state = {};
   }
 
-  move = p => {
+  move = (p) => {
     const mark = { ...this.state.mark, ...p };
     this.setState({ mark });
   };
@@ -44,7 +44,7 @@ export class Point extends React.Component {
     });
   };
 
-  labelChange = label => {
+  labelChange = (label) => {
     const { onChange } = this.props;
     const update = { ...this.props.mark, label };
 
@@ -90,13 +90,13 @@ export class Point extends React.Component {
           mark.hasOwnProperty('label') &&
           ReactDOM.createPortal(
             <MarkLabel
-              inputRef={r => (this.input = r)}
+              inputRef={(r) => (this.input = r)}
               disabled={!labelModeEnabled}
               mark={mark}
               graphProps={graphProps}
               onChange={this.labelChange}
             />,
-            labelNode
+            labelNode,
           )}
       </React.Fragment>
     );

package/src/tools/point/index.js

@@ -4,8 +4,8 @@ export const tool = () => ({
   label: 'Point',
   type: 'point',
   Component: Point,
-  addPoint: point => ({
+  addPoint: (point) => ({
     type: 'point',
-    ...point
-  })
+    ...point,
+  }),
 });

package/src/tools/polygon/component.jsx

@@ -53,7 +53,7 @@ export const swap = (arr, ...rest) => {
         return acc;
       }
     },
-    [...arr]
+    [...arr],
   );
 };
 
@@ -76,18 +76,18 @@ export class RawBaseComponent extends React.Component {
     labelNode: PropTypes.object,
     labelModeEnabled: PropTypes.bool,
     onChangeLabelProps: PropTypes.func,
-    onChangeProps: PropTypes.func
+    onChangeProps: PropTypes.func,
   };
 
   static defaultProps = {
-    points: []
+    points: [],
   };
 
   dragPoint = (index, from, to) => {
     log('[dragPoint] from, to:', from, to);
     const { onChange, points } = this.props;
     const update = [...points];
-    const overlapPoint = !!(points || []).find(p => equalPoints(p, to));
+    const overlapPoint = !!(points || []).find((p) => equalPoints(p, to));
 
     if (equalPoints(from, to) || overlapPoint) {
       return;
@@ -155,15 +155,7 @@ export class RawBaseComponent extends React.Component {
   };
 
   clickPoint = (point, index, data) => {
-    const {
-      closed,
-      onClick,
-      isToolActive,
-      labelModeEnabled,
-      onChangeProps,
-      onChangeLabelProps,
-      points
-    } = this.props;
+    const { closed, onClick, isToolActive, labelModeEnabled, onChangeProps, onChangeLabelProps, points } = this.props;
 
     if (labelModeEnabled) {
       if (points && index === points.length) {
@@ -205,7 +197,7 @@ export class RawBaseComponent extends React.Component {
       points,
       middle,
       labelNode,
-      labelModeEnabled
+      labelModeEnabled,
     } = this.props;
     const lines = buildLines(points, closed);
     const common = { onDragStart, onDragStop, graphProps, disabled, correctness };
@@ -215,13 +207,13 @@ export class RawBaseComponent extends React.Component {
     if (labelNode && middle && middle.hasOwnProperty('label')) {
       polygonLabelNode = ReactDOM.createPortal(
         <MarkLabel
-          inputRef={r => (this.input[polygonLabelIndex] = r)}
+          inputRef={(r) => (this.input[polygonLabelIndex] = r)}
           disabled={!labelModeEnabled}
           mark={middle}
           graphProps={graphProps}
           onChange={() => {}}
         />,
-        labelNode
+        labelNode,
       );
     }
 
@@ -267,15 +259,15 @@ export class RawBaseComponent extends React.Component {
             labelNode && p.hasOwnProperty('label')
               ? ReactDOM.createPortal(
                   <MarkLabel
-                    inputRef={r => (this.input[index] = r)}
+                    inputRef={(r) => (this.input[index] = r)}
                     disabled={!labelModeEnabled}
                     mark={p}
                     graphProps={graphProps}
-                    onChange={label => this.labelChange({ ...p, label }, index)}
+                    onChange={(label) => this.labelChange({ ...p, label }, index)}
                   />,
-                  labelNode
+                  labelNode,
                 )
-              : null
+              : null,
           ];
         })}
       </g>
@@ -288,7 +280,7 @@ export const BaseComponent = withStyles(() => ({}))(RawBaseComponent);
 export default class Component extends React.Component {
   static propTypes = {
     ...ToolPropTypeFields,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   static defaultProps = {};
@@ -298,9 +290,9 @@ export default class Component extends React.Component {
     this.state = {};
   }
 
-  change = points => {
+  change = (points) => {
     const {
-      mark: { middle }
+      mark: { middle },
     } = this.props;
     const mark = { ...this.state.mark, points };
 
@@ -312,13 +304,13 @@ export default class Component extends React.Component {
     this.setState({ mark });
   };
 
-  changeProps = points => {
+  changeProps = (points) => {
     const mark = { ...this.props.mark, points };
 
     this.props.onChange(this.props.mark, mark);
   };
 
-  changeLabelProps = point => {
+  changeLabelProps = (point) => {
     const { mark, onChange } = this.props;
     const middle = { ...mark.middle, ...point };
 
@@ -356,15 +348,7 @@ export default class Component extends React.Component {
   };
 
   render() {
-    const {
-      coordinatesOnHover,
-      mark,
-      graphProps,
-      onClick,
-      isToolActive,
-      labelNode,
-      labelModeEnabled
-    } = this.props;
+    const { coordinatesOnHover, mark, graphProps, onClick, isToolActive, labelNode, labelModeEnabled } = this.props;
     const { mark: stateMark } = this.state;
 
     return (

package/src/tools/polygon/index.js

@@ -18,7 +18,7 @@ export const addPointToArray = (point, arr) => {
     if (closed) {
       return { points: arr, closed };
     } else {
-      const hasPoint = !!arr.find(p => equalPoints(p, point));
+      const hasPoint = !!arr.find((p) => equalPoints(p, point));
 
       if (hasPoint) {
         return { points: arr, closed: false };
@@ -41,12 +41,12 @@ export const tool = () => ({
         type: 'polygon',
         points: [point],
         closed: false,
-        building: true
+        building: true,
       };
     } else {
       const { closed, points } = addPointToArray(point, mark.points);
 
       return { ...mark, closed, points, building: !closed };
     }
-  }
+  },
 });

package/src/tools/polygon/line.jsx

@@ -15,12 +15,12 @@ class RawLine extends React.Component {
     to: types.PointType,
     graphProps: types.GraphPropsType.isRequired,
     disabled: PropTypes.bool,
-    correctness: PropTypes.string
+    correctness: PropTypes.string,
   };
 
   static defaultProps = {
     from: {},
-    to: {}
+    to: {},
   };
 
   render() {
@@ -32,12 +32,7 @@ class RawLine extends React.Component {
         y1={scale.y(from.y)}
         x2={scale.x(to.x)}
         y2={scale.y(to.y)}
-        className={classNames(
-          classes.line,
-          disabled && classes.disabled,
-          className,
-          classes[correctness]
-        )}
+        className={classNames(classes.line, disabled && classes.disabled, className, classes[correctness])}
         {...rest}
       />
     );
@@ -51,15 +46,15 @@ export const Line = withStyles(() => ({
     stroke: 'transparent',
     '&:hover': {
       strokeWidth: 7,
-      stroke: color.secondary()
-    }
+      stroke: color.secondary(),
+    },
   },
   disabled: {
     ...disabled('stroke'),
-    strokeWidth: 2
+    strokeWidth: 2,
   },
   correct: correct('stoke'),
-  incorrect: incorrect('stroke')
+  incorrect: incorrect('stroke'),
 }))(RawLine);
 
 export default gridDraggable({
@@ -68,7 +63,7 @@ export default gridDraggable({
     const area = utils.lineToArea(from, to);
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     const { from } = props;
     return from;
   },
@@ -76,7 +71,7 @@ export default gridDraggable({
     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)),
     };
-  }
+  },
 })(Line);

package/src/tools/polygon/polygon.jsx

@@ -10,10 +10,10 @@ import { correct, disabled, incorrect } from '../shared/styles';
 
 export const getPointString = (points, scale) => {
   return (points || [])
-    .map(p => {
+    .map((p) => {
       const scaledPoint = {
         x: scale.x(p.x),
-        y: scale.y(p.y)
+        y: scale.y(p.y),
       };
       return `${scaledPoint.x},${scaledPoint.y}`;
     })
@@ -28,24 +28,15 @@ export class RawPolygon extends React.Component {
     points: PropTypes.arrayOf(types.PointType),
     graphProps: types.GraphPropsType.isRequired,
     closed: PropTypes.bool.isRequired,
-    correctness: PropTypes.string
+    correctness: PropTypes.string,
   };
 
   static defaultProps = {
-    points: []
+    points: [],
   };
 
   render() {
-    const {
-      points,
-      classes,
-      className,
-      disabled,
-      correctness,
-      graphProps,
-      closed,
-      ...rest
-    } = this.props;
+    const { points, classes, className, disabled, correctness, graphProps, closed, ...rest } = this.props;
     const { scale } = graphProps;
 
     const pointString = getPointString(points, scale);
@@ -58,7 +49,7 @@ export class RawPolygon extends React.Component {
           !closed && classes.open,
           disabled && classes.disabled,
           classes[correctness],
-          className
+          className,
         )}
         {...rest}
       />
@@ -66,27 +57,27 @@ export class RawPolygon extends React.Component {
   }
 }
 
-export const Polygon = withStyles(theme => ({
+export const Polygon = withStyles((theme) => ({
   closed: {
     fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color
     strokeWidth: 2,
-    stroke: color.secondaryLight()
+    stroke: color.secondaryLight(),
   },
   open: {
     fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color
     strokeWidth: 2,
     stroke: color.secondaryLight(),
-    pointerEvents: 'none'
+    pointerEvents: 'none',
   },
   disabled: {
-    ...disabled('stroke')
+    ...disabled('stroke'),
   },
   correct: {
-    ...correct('stroke')
+    ...correct('stroke'),
   },
   incorrect: {
-    ...incorrect('stroke')
-  }
+    ...incorrect('stroke'),
+  },
 }))(RawPolygon);
 
 export default gridDraggable({
@@ -95,13 +86,13 @@ export default gridDraggable({
     const area = utils.polygonToArea(points);
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     const { points } = props;
     return points[0];
   },
   fromDelta: (props, delta) => {
     const { points } = props;
 
-    return points.map(p => utils.point(p).add(utils.point(delta)));
-  }
+    return points.map((p) => utils.point(p).add(utils.point(delta)));
+  },
 })(Polygon);