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

package/src/tools/exponential/component.jsx

@@ -0,0 +1,23 @@
+import debug from 'debug';
+import { buildDataPoints, exponentialFromTwoPoints } from '@pie-lib/graphing-utils';
+import { rootEdgeComponent, withRootEdge } from '../shared/line/with-root-edge';
+
+const log = debug('pie-lib:graphing:exponential');
+
+const Exponential = withRootEdge((props) => {
+  const { root, edge, graphProps } = props;
+  const { domain, range } = graphProps;
+
+  const dataPoints =
+    edge && edge.x === root.x
+      ? []
+      : buildDataPoints(domain, range, root, edge, exponentialFromTwoPoints(root, edge), true);
+
+  log('dataPoints:', dataPoints);
+
+  return { root: props.root, edge: props.edge, dataPoints };
+});
+
+const Component = rootEdgeComponent(Exponential);
+
+export default Component;

package/src/tools/exponential/index.js

@@ -0,0 +1,39 @@
+import Exponential from './component';
+import debug from 'debug';
+import { equalPoints, sameAxes } from '../../utils';
+
+const log = debug('pie-lib:graphing:exponential');
+
+export const tool = () => ({
+  type: 'exponential',
+  Component: Exponential,
+  complete: (data, mark) => ({ ...mark, building: false, closed: true }),
+  addPoint: (point, mark) => {
+    log('add point to exponential model: ', point, 'mark: ', mark);
+    if (mark && (equalPoints(mark.root, point) || sameAxes(mark.root, point))) {
+      return mark;
+    }
+
+    if (mark && mark.root.y * point.y < 0) {
+      return mark;
+    }
+
+    if (point.y === 0) {
+      return mark;
+    }
+
+    if (!mark) {
+      return {
+        type: 'exponential',
+        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/index.js

@@ -0,0 +1,48 @@
+import { tool as point } from './point';
+import { tool as circle } from './circle';
+import { tool as polygon } from './polygon';
+import { tool as sine } from './sine';
+import { tool as parabola } from './parabola';
+import { tool as line } from './line';
+import { tool as segment } from './segment';
+import { tool as ray } from './ray';
+import { tool as vector } from './vector';
+import { tool as absolute } from './absolute';
+import { tool as exponential } from './exponential';
+
+const allTools = [
+  'circle',
+  'line',
+  'label',
+  'parabola',
+  'point',
+  'polygon',
+  'ray',
+  'segment',
+  'sine',
+  'vector',
+  'absolute',
+  'exponential',
+];
+
+// need this because now we should treat label as other tools PD-3736
+const labelTool = {
+  type: 'label',
+};
+
+const toolsArr = [
+  circle(),
+  line(),
+  parabola(),
+  point(),
+  polygon(),
+  ray(),
+  segment(),
+  sine(),
+  vector(),
+  absolute(),
+  exponential(),
+  labelTool,
+];
+
+export { allTools, toolsArr, circle, line, point, parabola, polygon, ray, sine, vector, absolute, exponential };

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

@@ -0,0 +1,37 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { ArrowedLine } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
+jest.mock('@pie-lib/plot', () => {
+  const a = jest.requireActual('@pie-lib/plot');
+  return {
+    types: a.types,
+    gridDraggable: a.gridDraggable,
+    utils: a.utils,
+    trig: {
+      edges: jest.fn(() => jest.fn().mockReturnValue([0, 0])),
+    },
+  };
+});
+
+describe('ArrowedLine', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      markerId: '1',
+      graphProps: getGraphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<ArrowedLine {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/line/component.jsx

@@ -0,0 +1,93 @@
+import { lineBase, lineToolComponent, styles } from '../shared/line';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { trig, types } from '@pie-lib/plot';
+import classNames from 'classnames';
+import { ArrowMarker, genUid } from '../shared/arrow-head';
+import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
+import { styled } from '@mui/material/styles';
+
+const StyledArrowedLineRoot = styled('g')(({ theme, disabled, correctness }) => ({
+  '& line:not(.hit-area)': {
+    ...styles.line(theme),
+    ...(disabled && styles.disabledSecondary(theme)),
+    ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+    ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+    ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+  },
+  '& .enabledArrow': {
+    ...styles.arrow(theme),
+  },
+  '& .disabledArrow': {
+    ...styles.disabledArrow(theme),
+  },
+  '& .correctArrow': {
+    ...styles.correct(theme),
+  },
+  '& .incorrectArrow': {
+    ...styles.incorrect(theme),
+  },
+  '& .missingArrow': {
+    ...styles.missing(theme),
+  },
+}));
+
+export const ArrowedLine = (props) => {
+  const markerId = genUid();
+  const { className, correctness, disabled, graphProps, from, to, markerId: propMarkerId, ...rest } = props;
+  const { scale } = graphProps;
+  const { domain, range } = getAdjustedGraphLimits(graphProps);
+  const [eFrom, eTo] = trig.edges(domain, range)(from, to);
+  const suffix = correctness || (disabled && 'disabled') || 'enabled';
+  const finalMarkerId = propMarkerId || markerId;
+
+  return (
+    <StyledArrowedLineRoot disabled={disabled} correctness={correctness}>
+      <defs>
+        <ArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
+          id={`${finalMarkerId}-${suffix}`}
+          className={classNames(
+            suffix === 'enabled' ? 'enabledArrow' : suffix === 'disabled' ? 'disabledArrow' : `${suffix}Arrow`,
+          )}
+        />
+      </defs>
+      {/* Transparent wider line captures pointer events (+2px each side) */}
+      <line
+        x1={scale.x(eFrom.x)}
+        y1={scale.y(eFrom.y)}
+        x2={scale.x(eTo.x)}
+        y2={scale.y(eTo.y)}
+        className="hit-area"
+        stroke="transparent"
+        strokeWidth={7}
+        style={{ cursor: 'pointer', pointerEvents: 'stroke' }}
+      />
+      <line
+        x1={scale.x(eFrom.x)}
+        y1={scale.y(eFrom.y)}
+        x2={scale.x(eTo.x)}
+        y2={scale.y(eTo.y)}
+        className={className}
+        markerEnd={`url(#${finalMarkerId}-${suffix})`}
+        markerStart={`url(#${finalMarkerId}-${suffix})`}
+        {...rest}
+      />
+    </StyledArrowedLineRoot>
+  );
+};
+
+ArrowedLine.propTypes = {
+  className: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: types.GraphPropsType,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string,
+};
+
+const Line = lineBase(ArrowedLine);
+const Component = lineToolComponent(Line);
+
+export default Component;

package/src/tools/line/index.js

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

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

@@ -0,0 +1,48 @@
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { buildDataPoints, parabolaFromTwoPoints } 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', () => ({
+  buildDataPoints: jest.fn().mockReturnValue([]),
+  parabolaFromTwoPoints: jest.fn(() => jest.fn()),
+  getAmplitudeAndFreq: jest.fn().mockReturnValue({ freq: 4, amplitude: 1 }),
+}));
+
+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, range, root, edge, expect.anything(), true);
+  });
+  it('calls parabolaFromTwoPoints', () => {
+    expect(parabolaFromTwoPoints).toHaveBeenCalledWith(root, edge);
+  });
+
+  it('returns dataPoints', () => {
+    expect(result).toEqual({ root, edge, dataPoints: [] });
+  });
+});