@pie-lib/graphing 2.14.21 → 2.14.22-next.1618

package/src/tools/shared/point/__tests__/__snapshots__/base-point.test.jsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasePoint snapshot renders 1`] = `
+<RawBp
+  className="className"
+  classes={
+    Object {
+      "correct": "RawBp-correct-4",
+      "disabled": "RawBp-disabled-2",
+      "disabledSecondary": "RawBp-disabledSecondary-3",
+      "incorrect": "RawBp-incorrect-5",
+      "missing": "RawBp-missing-6",
+      "point": "RawBp-point-1",
+    }
+  }
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  onChange={[MockFunction]}
+/>
+`;

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

@@ -0,0 +1,87 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import { ArrowPoint } from '../index';
+import { graphProps } from '../../../../__tests__/utils';
+import { bounds } from '../../../../utils';
+import { gridDraggable, utils } from '@pie-lib/plot';
+
+const { xy } = utils;
+jest.mock('../../../../utils', () => {
+  const { point } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('ArrowPoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ArrowPoint {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+        expect(bounds).toHaveBeenCalledWith({ left: 0, top: 0, bottom: 0, right: 0 }, domain, range);
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual({ x: 0, y: 3 });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import { BasePoint } from '../index';
+import { gridDraggable } from '@pie-lib/plot';
+import { graphProps } from '../../../../__tests__/utils';
+import { bounds } from '../../../../utils';
+
+jest.mock('../../../../utils', () => {
+  const { point } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('BasePoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<BasePoint {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+        expect(bounds).toHaveBeenCalledWith({ left: 0, top: 0, bottom: 0, right: 0 }, domain, range);
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual({ x: 0, y: 3 });
+      });
+    });
+  });
+});

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

@@ -47,7 +47,10 @@ 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.disabledSecondary, classes[correctness], className)}
+        {...rest}
+      >
         <polygon
           points={points}
           transform={`

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

@@ -32,7 +32,10 @@ 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.disabledSecondary, classes[correctness], className)}
+        {...rest}
+      >
         <ArrowHead size={size} transform={transform} points={points} />
       </g>
     );

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

@@ -5,6 +5,9 @@ import { types } from '@pie-lib/plot';
 import CoordinatesLabel from '../../../coordinates-label';
 import ReactDOM from 'react-dom';
 import { thinnerShapesNeeded } from '../../../utils';
+import MissingSVG from '../icons/MissingSVG';
+import CorrectSVG from '../icons/CorrectSVG';
+import IncorrectSVG from '../icons/IncorrectSVG';
 
 export class RawBp extends React.Component {
   static propTypes = {
@@ -38,11 +41,31 @@ export class RawBp extends React.Component {
       // we need to remove style from props
       // eslint-disable-next-line no-unused-vars,react/prop-types
       style,
+      onClick,
+      // Refactored RawBp component by isolating onTouchStart and onTouchEnd handlers to the outer circle, resolving erratic touch event behavior.
+      // Remaining props are now applied only to the inner circle for improved event handling consistency.
+      onTouchStart,
+      onTouchEnd,
       ...rest
     } = this.props;
     const { showCoordinates } = this.state;
     const { scale } = graphProps;
     const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
+    let SvgComponent;
+    switch (correctness) {
+      case 'missing':
+        SvgComponent = MissingSVG;
+        break;
+      case 'correct':
+        SvgComponent = CorrectSVG;
+        break;
+      case 'incorrect':
+        SvgComponent = IncorrectSVG;
+        break;
+      default:
+        SvgComponent = null;
+        break;
+    }
 
     return (
       <>
@@ -53,15 +76,17 @@ export class RawBp extends React.Component {
           cy={scale.y(y)}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
-          {...rest}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onClick={onClick}
         />
         <g
-          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
+          className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
-          {...rest}
         >
           <circle {...rest} r={r} cx={scale.x(x)} cy={scale.y(y)} />
+          {SvgComponent && <SvgComponent scale={scale} x={x} y={y} />}
           {labelNode &&
             coordinatesOnHover &&
             showCoordinates &&

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

@@ -1,7 +1,7 @@
 import { withStyles } from '@material-ui/core/styles/index';
 import { gridDraggable } from '@pie-lib/plot';
 import * as utils from '../../../utils';
-import { disabled, correct, incorrect, missing } from '../styles';
+import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
 import { RawBp } from './base-point';
 import { RawArrow } from './arrow-point';
 import { color } from '@pie-lib/render-ui';
@@ -29,7 +29,7 @@ const styles = () => {
     point: {
       '& circle, & polygon': {
         cursor: 'pointer',
-        fill: color.secondary(),
+        fill: color.defaults.BLACK,
       },
     },
     disabled: {
@@ -37,6 +37,11 @@ const styles = () => {
         ...disabled(),
       },
     },
+    disabledSecondary: {
+      '& circle, & polygon': {
+        ...disabledSecondary(),
+      },
+    },
     correct: {
       '& circle, & polygon': {
         ...correct(),

package/src/tools/shared/styles.js

@@ -5,16 +5,21 @@ export const disabled = (key = 'fill') => ({
   pointerEvents: 'none',
 });
 
+export const disabledSecondary = (key = 'fill') => ({
+  [key]: color.disabledSecondary(),
+  pointerEvents: 'none',
+});
+
 export const correct = (key = 'fill') => ({
-  [key]: color.correct(),
+  [key]: color.correctWithIcon(),
   pointerEvents: 'none',
 });
 export const incorrect = (key = 'fill') => ({
-  [key]: color.incorrect(),
+  [key]: color.incorrectWithIcon(),
   pointerEvents: 'none',
 });
 
 export const missing = (key = 'fill') => ({
-  [key]: color.missing(),
+  [key]: color.missingWithIcon(),
   pointerEvents: 'none',
 });

package/src/tools/sine/__tests__/component.test.jsx

@@ -0,0 +1,51 @@
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { buildDataPoints, sinY } from '@pie-lib/graphing-utils';
+import { utils } from '@pie-lib/plot';
+
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
+const { xy } = utils;
+jest.mock('@pie-lib/graphing-utils', () => ({
+  sinY: jest.fn().mockReturnValue(0),
+  buildDataPoints: jest.fn().mockReturnValue([]),
+  parabolaFromTwoPoints: jest.fn(() => jest.fn()),
+  getAmplitudeAndFreq: jest.fn().mockReturnValue({ freq: 4, amplitude: 1 }),
+  FREQ_DIVIDER: 16,
+}));
+
+jest.mock('../../shared/line/with-root-edge', () => ({
+  withRootEdge: jest.fn(),
+  rootEdgeComponent: jest.fn(),
+}));
+describe('Parabola', () => {
+  let fnBody;
+  let graphProps;
+  let root;
+  let edge;
+  let result;
+  beforeEach(() => {
+    require('../component');
+    fnBody = withRootEdge.mock.calls[0][0];
+    graphProps = getGraphProps();
+    root = xy(0, 0);
+    edge = xy(1, 1);
+
+    result = fnBody({ graphProps, root, edge });
+  });
+  it('fnBody is not null', () => {
+    expect(fnBody).toBeDefined();
+  });
+
+  it('calls buildDataPoints', () => {
+    const { domain, range } = graphProps;
+    expect(buildDataPoints).toHaveBeenCalledWith({ ...domain, step: 0.25 }, range, root, edge, expect.anything());
+  });
+
+  it('calls sinY', () => {
+    expect(sinY).toHaveBeenCalledWith(1, 4, expect.anything());
+  });
+
+  it('returns dataPoints', () => {
+    expect(result).toEqual({ root, edge, dataPoints: [] });
+  });
+});

package/src/tools/sine/component.jsx

@@ -4,29 +4,29 @@ import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
 
 const log = debug('pie-lib:graphing:sine');
 
-log('sine...');
-
 const Sine = withRootEdge((props) => {
-  const { domain } = props.graphProps;
+  const { root, edge, graphProps } = props;
+  const { domain, range } = graphProps;
 
-  const { root, edge } = props;
   const { amplitude, freq } = getAmplitudeAndFreq(root, edge);
   const interval = freq / FREQ_DIVIDER;
+
   log('[getPoints] amplitude:', amplitude, 'freq:', freq);
 
   const dataPoints =
     edge && edge.x === root.x
       ? []
       : buildDataPoints(
-          domain.min,
-          domain.max,
+          { ...domain, step: interval },
+          range,
           root,
           edge,
-          interval,
           sinY(amplitude, freq, { phase: root.x, vertical: root.y }),
         );
+
   return { root: props.root, edge: props.edge, dataPoints };
 });
 
 const Component = rootEdgeComponent(Sine);
+
 export default Component;

package/src/tools/vector/__tests__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line snapshot renders 1`] = `
+<line
+  className="className"
+  strokeDasharray={-5.585786437626905}
+  x1={0}
+  x2={1}
+  y1={0}
+  y2={1}
+/>
+`;

package/src/tools/vector/__tests__/component.test.jsx

@@ -0,0 +1,26 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Line } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+
+describe('Line', () => {
+  let w;
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: getGraphProps(),
+      from: utils.xy(0, 0),
+      to: utils.xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Line {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/vector/component.jsx

@@ -10,6 +10,7 @@ import { getDistanceBetweenTwoPoints } from '../../utils';
 const lineStyles = (theme) => ({
   line: styles.line(theme),
   disabled: styles.disabled(theme),
+  disabledSecondary: styles.disabledSecondary(theme),
   correct: styles.correct(theme, 'stroke'),
   incorrect: styles.incorrect(theme, 'stroke'),
   missing: styles.missing(theme, 'stroke'),
@@ -32,7 +33,7 @@ export const Line = (props) => {
 
   return (
     <line
-      className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
+      className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
       x1={startPoint.x}
       y1={startPoint.y}
       x2={endPoint.x}

package/src/undo-redo.jsx

@@ -40,7 +40,6 @@ export class UndoRedo extends React.Component {
 const styles = (theme) => ({
   button: {
     color: color.text(),
-    backgroundColor: color.background(),
     marginBottom: theme.spacing.unit / 2,
     '&:not(:last-of-type)': {
       marginRight: theme.spacing.unit / 2,

package/src/utils.js

@@ -203,7 +203,7 @@ export const isDuplicatedMark = (mark, marks, oldMark) => {
   }
 
   const duplicated = filteredMarks.find((m) => {
-    if (type === 'circle' || type === 'parabola' || type === 'sine') {
+    if (type === 'circle' || type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') {
       const { root, edge } = mark;
 
       return (equalPoints(root, m.root) && equalPoints(edge, m.edge)) || (type === 'circle' && isSameCircle(m, mark));