@pie-lib/graphing 4.0.5-next.31 → 4.0.5-next.36

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

@@ -0,0 +1,91 @@
+import { render } from '@pie-lib/test-utils';
+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, getAngleDeg, arrowDimensions } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+    getAngleDeg,
+    arrowDimensions,
+  };
+});
+
+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 onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+      x: 0,
+      y: 0,
+    };
+    const props = { ...defaults, ...extras };
+    return render(<ArrowPoint {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      renderComponent();
+      opts = gridDraggable.mock.calls[gridDraggable.mock.calls.length - 1][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,87 @@
+import { render } from '@pie-lib/test-utils';
+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, thinnerShapesNeeded } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+    thinnerShapesNeeded,
+  };
+});
+
+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 onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      x: 0,
+      y: 0,
+    };
+    const props = { ...defaults, ...extras };
+    return render(<BasePoint {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      renderComponent();
+      opts = gridDraggable.mock.calls[gridDraggable.mock.calls.length - 1][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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { arrowDimensions, getAngleDeg } from '../../../utils';
+
+export class RawArrow extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    correctness: PropTypes.string,
+    disabled: PropTypes.bool,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    from: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }).isRequired,
+    to: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  static defaultProps = {
+    from: {},
+    to: {},
+  };
+
+  render() {
+    const { className, x, y, graphProps, from, to, ...rest } = this.props;
+    const { scale } = graphProps;
+
+    const angle = from && to ? getAngleDeg(from.x, from.y, to.x, to.y) : 0;
+
+    const points =
+      from && to && (from.x !== to.x || from.y !== to.y)
+        ? `0,0 ${arrowDimensions.vector},${arrowDimensions.vector * 2} -${arrowDimensions.vector},${arrowDimensions.vector * 2}`
+        : '0,0 0,0 0,0';
+
+    return (
+      <g className={className} {...rest}>
+        <polygon points={points} transform={`translate(${scale.x(x)}, ${scale.y(y)}) rotate(${angle} 0 0)`} />
+      </g>
+    );
+  }
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { ArrowHead } from '../arrow-head';
+import { thinnerShapesNeeded } from '../../../utils';
+
+export class BaseArrow extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    correctness: PropTypes.string,
+    disabled: PropTypes.bool,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    angle: PropTypes.number.isRequired,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  render() {
+    const { className, angle, x, y, correctness, graphProps, ...rest } = this.props;
+    const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
+    const { scale } = graphProps;
+
+    const scaledX = scale.x(x);
+    const scaledY = scale.y(y);
+
+    const transform = `rotate(${-angle}, ${scaledX},${scaledY})`;
+    const points = `${scaledX},${scaledY}
+        ${scaledX - size},${scaledY - size / 2}
+        ${scaledX - size},${scaledY + size / 2}`;
+
+    return (
+      <g className={className} {...rest}>
+        <ArrowHead size={size} transform={transform} points={points} correctness={correctness} />
+      </g>
+    );
+  }
+}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import ReactDOM from 'react-dom';
+import { styled } from '@mui/material/styles';
+
+import CoordinatesLabel from '../../../coordinates-label';
+import { thinnerShapesNeeded } from '../../../utils';
+import MissingSVG from '../icons/MissingSVG';
+import CorrectSVG from '../icons/CorrectSVG';
+import IncorrectSVG from '../icons/IncorrectSVG';
+import * as styles from '../styles';
+
+const StyledPointGroup = styled('g')(({ disabled, correctness }) => ({
+  cursor: 'pointer',
+  '& circle': {
+    fill: 'currentColor',
+  },
+  ...(disabled && {
+    ...styles.disabled('fill'),
+    ...styles.disabled('color'),
+  }),
+  ...(correctness === 'correct' && {
+    ...styles.correct('fill'),
+    ...styles.correct('color'),
+  }),
+  ...(correctness === 'incorrect' && {
+    ...styles.incorrect('fill'),
+    ...styles.incorrect('color'),
+  }),
+  ...(correctness === 'missing' && {
+    ...styles.missing('fill'),
+    ...styles.missing('color'),
+  }),
+}));
+
+export class RawBp extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    coordinatesOnHover: PropTypes.bool,
+    correctness: PropTypes.string,
+    disabled: PropTypes.bool,
+    labelNode: PropTypes.object,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    graphProps: types.GraphPropsType.isRequired,
+    onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
+  };
+
+  state = { showCoordinates: false };
+
+  render() {
+    const {
+      className,
+      coordinatesOnHover,
+      x,
+      y,
+      disabled,
+      correctness,
+      graphProps,
+      labelNode,
+      onClick,
+      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;
+    }
+
+    return (
+      <>
+        {/* Outer invisible circle for easier touch/click */}
+        <circle
+          style={{ fill: 'transparent', cursor: 'pointer', pointerEvents: 'all' }}
+          r={r * 3}
+          cx={scale.x(x)}
+          cy={scale.y(y)}
+          onMouseEnter={() => this.setState({ showCoordinates: true })}
+          onMouseLeave={() => this.setState({ showCoordinates: false })}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onClick={onClick}
+        />
+        {/* Actual point */}
+        <StyledPointGroup
+          className={className}
+          disabled={disabled}
+          correctness={correctness}
+          onMouseEnter={() => this.setState({ showCoordinates: true })}
+          onMouseLeave={() => this.setState({ showCoordinates: false })}
+        >
+          <circle {...rest} r={r} cx={scale.x(x)} cy={scale.y(y)} />
+          {SvgComponent && <SvgComponent scale={scale} x={x} y={y} />}
+          {labelNode &&
+            coordinatesOnHover &&
+            showCoordinates &&
+            ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
+        </StyledPointGroup>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { gridDraggable } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import * as utils from '../../../utils';
+import { RawBp } from './base-point';
+import { RawArrow } from './arrow-point';
+import { BaseArrow } from './arrow';
+
+// Drag & bounds options
+const opts = {
+  bounds: (props, { domain, range }) => {
+    const { x, y } = props;
+    const area = { left: x, top: y, bottom: y, right: x };
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { x, y } = props;
+    return { x, y };
+  },
+  fromDelta: (props, delta) => {
+    return utils.point(props).add(utils.point(delta));
+  },
+};
+
+// Common styled point
+const PointStyle = styled('g')(() => ({
+  '& circle, & polygon': {
+    cursor: 'pointer',
+  },
+  '&[disabled]': {
+    '& circle, & polygon': {
+      fill: color.disabledSecondary(),
+    },
+  },
+}));
+
+export const BasePoint = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <RawBp {...props} />
+  </PointStyle>
+));
+
+export const ArrowPoint = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <RawArrow {...props} />
+  </PointStyle>
+));
+
+export const Arrow = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <BaseArrow {...props} />
+  </PointStyle>
+));

package/src/tools/shared/styles.js

@@ -0,0 +1,27 @@
+import { color } from '@pie-lib/render-ui';
+
+export const graphingShapeFill = () => color.visualElementsColors.SHAPES_FILL_COLOR;
+
+export const disabled = (key = 'fill') => ({
+  [key]: color.disabledSecondary(), // this is needed to match previous disabled color for backward compatibility
+  pointerEvents: 'none',
+});
+
+export const disabledSecondary = (key = 'fill') => ({
+  [key]: color.disabledSecondary(),
+  pointerEvents: 'none',
+});
+
+export const correct = (key = 'fill') => ({
+  [key]: color.correctWithIcon(),
+  pointerEvents: 'none',
+});
+export const incorrect = (key = 'fill') => ({
+  [key]: color.incorrectWithIcon(),
+  pointerEvents: 'none',
+});
+
+export const missing = (key = 'fill') => ({
+  [key]: color.missingWithIcon(),
+  pointerEvents: 'none',
+});

package/src/tools/shared/types.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+export const ToolPropTypeFields = {
+  mark: PropTypes.any,
+  onChange: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onDragStop: PropTypes.func,
+};
+
+export const ToolPropType = PropTypes.shape(ToolPropTypeFields);

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

@@ -0,0 +1,32 @@
+import debug from 'debug';
+import { buildDataPoints, FREQ_DIVIDER, getAmplitudeAndFreq, sinY } from '@pie-lib/graphing-utils';
+import { rootEdgeComponent, withRootEdge } from '../shared/line/with-root-edge';
+
+const log = debug('pie-lib:graphing:sine');
+
+const Sine = withRootEdge((props) => {
+  const { root, edge, graphProps } = props;
+  const { domain, range } = graphProps;
+
+  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, step: interval },
+          range,
+          root,
+          edge,
+          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/sine/index.js

@@ -0,0 +1,33 @@
+import Sine from './component';
+import debug from 'debug';
+import { equalPoints, sameAxes } from '../../utils';
+
+const log = debug('pie-lib:graphing:sine');
+
+export const tool = () => ({
+  type: 'sine',
+  Component: Sine,
+  complete: (data, mark) => {
+    return { ...mark, building: false, closed: true };
+  },
+  addPoint: (point, mark) => {
+    log('add point to sine model: ', point, 'mark: ', mark);
+    if (mark && (equalPoints(mark.root, point) || sameAxes(mark.root, point))) {
+      return mark;
+    }
+
+    if (!mark) {
+      return {
+        type: 'sine',
+        root: point,
+        edge: undefined,
+        closed: false,
+        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/vector/__tests__/component.test.jsx

@@ -0,0 +1,25 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { Line } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+
+describe('Line', () => {
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: getGraphProps(),
+      from: utils.xy(0, 0),
+      to: utils.xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Line {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/vector/component.jsx

@@ -0,0 +1,56 @@
+import { lineBase, lineToolComponent, styles } from '../shared/line';
+import { Arrow } from '../shared/point';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { styled } from '@mui/material/styles';
+import { getDistanceBetweenTwoPoints } from '../../utils';
+
+const StyledLine = styled('line')(({ theme, disabled, correctness }) => ({
+  ...styles.line(theme),
+  ...(disabled && styles.disabledSecondary(theme)),
+  ...(correctness && styles[correctness] && styles[correctness](theme, 'stroke')),
+}));
+
+export const Line = (props) => {
+  const {
+    className,
+    disabled,
+    correctness,
+    graphProps: { scale },
+    from,
+    to,
+    ...rest
+  } = props;
+  const startPoint = { x: scale.x(from.x), y: scale.y(from.y) };
+  const endPoint = { x: scale.x(to.x), y: scale.y(to.y) };
+  const length = getDistanceBetweenTwoPoints(startPoint, endPoint);
+
+  return (
+    <StyledLine
+      className={className}
+      disabled={disabled}
+      correctness={correctness}
+      x1={startPoint.x}
+      y1={startPoint.y}
+      x2={endPoint.x}
+      y2={endPoint.y}
+      strokeDasharray={length - 7}
+      {...rest}
+    />
+  );
+};
+
+Line.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
+  graphProps: PropTypes.any,
+  from: types.PointType,
+  to: types.PointType,
+};
+
+const Vector = lineBase(Line, { to: Arrow });
+const Component = lineToolComponent(Vector);
+
+export default Component;

package/src/tools/vector/index.js

@@ -0,0 +1,4 @@
+import Vector from './component';
+import { lineTool } from '../shared/line';
+
+export const tool = lineTool('vector', Vector);