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

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

@@ -1,91 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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