@pie-lib/graphing 2.14.22 → 2.15.1-beta.0

package/src/tools/circle/component.jsx

@@ -42,6 +42,7 @@ export class RawBaseCircle extends React.Component {
     labelNode: PropTypes.object,
     labelModeEnabled: PropTypes.bool,
     changeMarkProps: PropTypes.func,
+    limitLabeling: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -128,8 +129,21 @@ export class RawBaseCircle extends React.Component {
     changeMarkProps({ [type]: update });
   };
 
-  clickPoint = (point, type) => {
-    const { changeMarkProps, from, to } = this.props;
+  clickPoint = (point, type, data) => {
+    const { changeMarkProps, disabled, from, to, labelModeEnabled, limitLabeling, onClick } = this.props;
+    if (!labelModeEnabled) {
+      onClick(point || data);
+      return;
+    }
+
+    if (disabled) {
+      return;
+    }
+
+    // limit labeling the points of the circle
+    if (limitLabeling) {
+      return;
+    }
 
     if (type === 'middle' && !point && from && to) {
       point = { ...point, ...getMiddleOfTwoPoints(from, to) };
@@ -224,7 +238,7 @@ export class RawBaseCircle extends React.Component {
           radius={radius}
           onDrag={this.dragCircle}
           {...common}
-          onClick={labelModeEnabled ? () => this.clickPoint(middle, 'middle') : common.onClick}
+          onClick={(data) => this.clickPoint(middle, 'middle', data)}
         />
         {circleLabelNode}
 
@@ -237,7 +251,7 @@ export class RawBaseCircle extends React.Component {
           y={to.y}
           onDrag={this.dragTo}
           {...common}
-          onClick={labelModeEnabled ? () => this.clickPoint(to, 'to') : common.onClick}
+          onClick={(data) => this.clickPoint(to, 'to', data)}
         />
         {toLabelNode}
 
@@ -251,7 +265,7 @@ export class RawBaseCircle extends React.Component {
           className={classes.from}
           onDrag={this.dragFrom}
           {...common}
-          onClick={labelModeEnabled ? () => this.clickPoint(from, 'from') : common.onClick}
+          onClick={(data) => this.clickPoint(from, 'from', data)}
         />
         {fromLabelNode}
       </g>
@@ -262,16 +276,16 @@ export class RawBaseCircle extends React.Component {
 export const BaseCircle = withStyles(() => ({
   outerLine: {
     fill: 'rgb(0,0,0,0)', // TODO hardcoded color
-    stroke: color.primaryLight(),
+    stroke: color.defaults.BLACK,
     strokeWidth: 4,
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark(),
+      stroke: color.defaults.PRIMARY_DARK,
     },
   },
   root: {},
   bgCircleBuilding: {
-    stroke: color.secondaryLight(),
+    stroke: color.defaults.BLACK,
     animation: 'opacityPulse 2s ease-out',
     animationIterationCount: 'infinite',
     opacity: 1,

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { buildDataPoints, exponentialFromTwoPoints } 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([]),
+  exponentialFromTwoPoints: 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('Exponential', () => {
+  let fnBody;
+  let graphProps;
+  let root;
+  let edge;
+  let result;
+
+  beforeEach(() => {
+    require('../component');
+    fnBody = withRootEdge.mock.calls[0][0];
+    graphProps = getGraphProps();
+    root = xy(1, 1);
+    edge = xy(2, 2);
+
+    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 exponentialFromTwoPoints', () => {
+    expect(exponentialFromTwoPoints).toHaveBeenCalledWith(root, edge);
+  });
+
+  it('returns dataPoints', () => {
+    expect(result).toEqual({ root, edge, dataPoints: [] });
+  });
+});

package/src/tools/exponential/component.jsx

@@ -0,0 +1,23 @@
+import debug from 'debug';
+import { buildDataPoints, exponentialFromTwoPoints } from '@pie-lib/graphing-utils';
+import { withRootEdge, rootEdgeComponent } 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

@@ -1,15 +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/index';
-import { tool as parabola } from './parabola/index';
+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'];
+const allTools = [
+  'circle',
+  'line',
+  'label',
+  'parabola',
+  'point',
+  'polygon',
+  'ray',
+  'segment',
+  'sine',
+  'vector',
+  'absolute',
+  'exponential',
+];
 
-const toolsArr = [circle(), line(), parabola(), point(), polygon(), ray(), segment(), sine(), vector()];
+// need this because now we should treat label as other tools PD-3736
+const labelTool = {
+  type: 'label',
+};
 
-export { allTools, toolsArr, circle, line, point, parabola, polygon, ray, sine, vector };
+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__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrowedLine snapshot renders 1`] = `
+<g>
+  <defs>
+    <ArrowMarker
+      className=""
+      id="1-enabled"
+      size={5}
+    />
+  </defs>
+  <line
+    className="className"
+    markerEnd="url(#1-enabled)"
+    markerId="1"
+    markerStart="url(#1-enabled)"
+    onChange={[MockFunction]}
+  />
+</g>
+`;

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

@@ -0,0 +1,36 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ArrowedLine } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+jest.mock('@pie-lib/plot/index', () => {
+  const a = jest.requireActual('@pie-lib/plot/index');
+  return {
+    types: a.types,
+    gridDraggable: a.gridDraggable,
+    utils: a.utils,
+    trig: {
+      edges: jest.fn(() => jest.fn().mockReturnValue([0, 0])),
+    },
+  };
+});
+
+describe('ArrowedLine', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      markerId: '1',
+      graphProps: getGraphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ArrowedLine {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      expect(wrapper()).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/line/component.jsx

@@ -12,6 +12,7 @@ const lineStyles = (theme) => ({
   enabledArrow: styles.arrow(theme),
   disabledArrow: styles.disabledArrow(theme),
   disabled: styles.disabled(theme),
+  disabledSecondary: styles.disabledSecondary(theme),
   correct: styles.correct(theme, 'stroke'),
   correctArrow: styles.correct(theme),
   incorrect: styles.incorrect(theme, 'stroke'),
@@ -42,7 +43,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.disabledSecondary, classes[correctness], className)}
         markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
         markerStart={`url(#${props.markerId || markerId}-${suffix})`}
         {...rest}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+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: [] });
+  });
+});

package/src/tools/parabola/component.jsx

@@ -2,21 +2,22 @@ import debug from 'debug';
 import { buildDataPoints, parabolaFromTwoPoints } from '@pie-lib/graphing-utils';
 import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
 
-const log = debug('pie-lib:graphing:sine');
+const log = debug('pie-lib:graphing:parabola');
 
 const Parabola = withRootEdge((props) => {
-  const { domain } = props.graphProps;
-
-  const { root, edge } = props;
-  const interval = 1;
+  const { root, edge, graphProps } = props;
+  const { domain, range } = graphProps;
 
   const dataPoints =
     edge && edge.x === root.x
       ? []
-      : buildDataPoints(domain.min, domain.max, root, edge, domain.step || interval, parabolaFromTwoPoints(root, edge));
+      : buildDataPoints(domain, range, root, edge, parabolaFromTwoPoints(root, edge), true);
+
   log('dataPoints:', dataPoints);
+
   return { root: props.root, edge: props.edge, dataPoints };
 });
 
 const Component = rootEdgeComponent(Parabola);
+
 export default Component;

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component snapshot renders 1`] = `
+<Fragment>
+  <WithStyles(GridDraggable)
+    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],
+        },
+      }
+    }
+    onClick={[Function]}
+    onDrag={[Function]}
+    onDragStart={[Function]}
+    onDragStop={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,66 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps, xy } from '../../../__tests__/utils';
+
+import Component from '../component';
+
+describe('Component', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras, opts) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Component {...props} />, opts);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('move', () => {
+      it('calls onChange', () => {
+        const w = wrapper({ mark: { ...xy(0, 0) } });
+        w.instance().move({ x: 1, y: 1 });
+        expect(w.state('mark')).toMatchObject({ ...xy(1, 1) });
+      });
+    });
+
+    describe('labelChange', () => {
+      it('callsOnChange with label removed', () => {
+        const mark = { label: 'foo' };
+        const update = {};
+        const w = wrapper({ mark });
+        w.instance().labelChange(undefined);
+        expect(onChange).toHaveBeenCalledWith(mark, update);
+      });
+    });
+
+    describe('clickPoint', () => {
+      let mark;
+      let w;
+      beforeEach(() => {
+        mark = { label: 'foo' };
+        w = wrapper({ mark, labelModeEnabled: true }, { disableLifecycleMethods: true });
+        w.instance().input = {
+          focus: jest.fn(),
+        };
+        w.instance().clickPoint();
+      });
+      it('calls onChange if labelModeEnabeld', () => {
+        expect(onChange).toHaveBeenCalledWith(mark, { label: '', ...mark });
+      });
+      it('calls input.focus', () => {
+        expect(w.instance().input.focus).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/tools/point/component.jsx

@@ -60,13 +60,19 @@ export class Point extends React.Component {
   clickPoint = () => {
     const { labelModeEnabled, onChange, onClick, mark } = this.props;
 
-    if (labelModeEnabled) {
-      onChange(mark, { label: '', ...mark });
-      if (this.input) {
-        this.input.focus();
-      }
-    } else {
+    if (!labelModeEnabled) {
       onClick(mark);
+      return;
+    }
+
+    if (mark.disabled) {
+      return;
+    }
+
+    onChange(mark, { label: '', ...mark });
+
+    if (this.input) {
+      this.input.focus();
     }
   };