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

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

@@ -0,0 +1,226 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps, xy } from '../../../__tests__/utils';
+
+import { RawBaseComponent, buildLines, swap } from '../component';
+
+const xyLabel = (x, y, index, label) => ({
+  ...xy(x, y, index),
+  label,
+});
+
+describe('buildLines', () => {
+  const defaultPoints = [xy(0, 0), xy(1, 1), xy(1, 0)];
+
+  const assertBuildLines = (points, closed, expected) => {
+    it(`builds points and lines for ${points} = ${expected}`, () => {
+      const result = buildLines(points);
+      expect(result).toMatchObject([
+        { from: xy(0, 0, 0), to: xy(1, 1, 1) },
+        { from: xy(1, 1, 1), to: xy(1, 0, 2) },
+      ]);
+    });
+  };
+
+  assertBuildLines(defaultPoints, true, []);
+});
+
+describe('swap', () => {
+  it('swaps pairs', () => {
+    const result = swap([xy(0, 0, 0), xy(1, 1, 1), xy(2, 2, 2)], xy(0, 0, 0), xy(3, 3, 0));
+    expect(result).toEqual([xy(3, 3, 0), xy(1, 1, 1), xy(2, 2, 2)]);
+  });
+});
+
+describe('RawBaseComponent', () => {
+  let w;
+  let onChange = jest.fn();
+  let onChangeProps = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      onChangeProps,
+      onClosePolygon: jest.fn(),
+      graphProps: graphProps(),
+      points: [],
+    };
+    const props = { ...defaults, ...extras };
+
+    return shallow(<RawBaseComponent {...props} />);
+  };
+
+  // used to test items that have labels attached to points
+  const labelNode = document.createElement('foreignObject');
+  const points = [xyLabel(0, 0, 0, 'A'), xyLabel(2, 2, 1, 'B'), xyLabel(0, 2, 2, 'C')];
+  const wrapperWithLabels = (extras) =>
+    wrapper({
+      labelNode: labelNode,
+      points: points,
+      ...extras,
+    });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with labels', () => {
+      w = wrapperWithLabels();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('dragPoint', () => {
+      it('calls onChange', () => {
+        onChange = jest.fn();
+        w = wrapper({ points: [xy(1, 1)], onChange });
+        w.instance().dragPoint(0, xy(1, 1), xy(2, 2));
+        expect(onChange).toHaveBeenCalledWith([xy(2, 2)]);
+      });
+
+      it('calls onChange keeping label property from point', () => {
+        onChange = jest.fn();
+        w = wrapperWithLabels(onChange);
+
+        w.instance().dragPoint(0, xy(0, 0), xy(0, 1));
+        expect(onChange).toHaveBeenCalledWith([{ x: 0, y: 1, label: 'A' }, points[1], points[2]]);
+      });
+    });
+
+    describe('dragLine', () => {
+      it('calls onChange', () => {
+        w = wrapper({ points: [xy(1, 1, 0), xy(2, 2, 1)], onChange });
+        w.instance().dragLine({ from: xy(1, 1, 0), to: xy(2, 2, 1) }, { from: xy(2, 2, 0), to: xy(4, 4, 1) });
+        expect(onChange).toHaveBeenCalledWith([xy(2, 2, 0), xy(4, 4, 1)]);
+      });
+
+      it('calls onChange keeping label property from both points', () => {
+        onChange = jest.fn();
+        w = wrapperWithLabels(onChange);
+
+        w.instance().dragLine(
+          { from: points[0], to: points[1] },
+          {
+            from: xy(0, 1, 0),
+            to: xy(2, 3, 1),
+          },
+        );
+        expect(onChange).toHaveBeenCalledWith([xyLabel(0, 1, 0, 'A'), xyLabel(2, 3, 1, 'B'), points[2]]);
+      });
+    });
+
+    describe('dragPoly', () => {
+      it('calls onChange', () => {
+        w = wrapper({ onChange });
+        const existing = [xy(1, 1)];
+        const next = [xy(2, 2)];
+        w.instance().dragPoly(existing, next);
+        expect(onChange).toHaveBeenCalledWith([xy(2, 2)]);
+      });
+
+      it('calls onChange keeping label property from all points', () => {
+        onChange = jest.fn();
+        w = wrapperWithLabels(onChange);
+
+        w.instance().dragPoly(points, [xy(0, 1, 0), xy(2, 3, 1), xy(0, 3, 2)]);
+        expect(onChange).toHaveBeenCalledWith([xyLabel(0, 1, 0, 'A'), xyLabel(2, 3, 1, 'B'), xyLabel(0, 3, 2, 'C')]);
+      });
+    });
+
+    describe('labelChange', () => {
+      it('updates "label" property for point', () => {
+        w = wrapperWithLabels();
+
+        w.instance().labelChange({ ...points[0], label: 'Label A' }, 0);
+        expect(onChangeProps).toBeCalledWith([{ ...points[0], label: 'Label A' }, points[1], points[2]]);
+
+        w.instance().labelChange({ ...points[1], label: 'Label B' }, 1);
+        expect(onChangeProps).toBeCalledWith([points[0], { ...points[1], label: 'Label B' }, points[2]]);
+      });
+
+      it('removes "label" property if the field is empty', () => {
+        w = wrapperWithLabels();
+
+        w.instance().labelChange({ ...points[0], label: '' }, 0);
+        expect(onChangeProps).toBeCalledWith([xy(0, 0, 0), points[1], points[2]]);
+
+        w.instance().labelChange({ ...points[1], label: '' }, 1);
+        expect(onChangeProps).toBeCalledWith([points[0], xy(2, 2, 1), points[2]]);
+      });
+    });
+  });
+
+  describe('close', () => {
+    it('calls onClosePolygon', () => {
+      const onClosePolygon = jest.fn();
+      w = wrapper({ onClosePolygon, points: [xy(1, 1), xy(2, 2), xy(3, 3)] });
+      w.instance().close();
+      expect(onClosePolygon).toHaveBeenCalled();
+    });
+  });
+
+  describe('clickPoint', () => {
+    let onClick = jest.fn();
+    let onClosePolygon = jest.fn();
+    beforeEach(() => {
+      onClosePolygon.mockClear();
+      onClick.mockClear();
+    });
+
+    const assertCallback = (isToolActive, closed, index, mock) => {
+      it('calls onClosePolygon', () => {
+        const w = wrapper({
+          points: [xy(1, 1), xy(2, 2), xy(3, 3)],
+          onClosePolygon,
+          onClick,
+          isToolActive,
+          closed,
+        });
+
+        w.instance().clickPoint(xy(1, 1, 0), index, {});
+        expect(mock).toHaveBeenCalled();
+      });
+    };
+
+    assertCallback(true, false, 0, onClosePolygon);
+    assertCallback(true, false, 1, onClick);
+    assertCallback(false, false, 0, onClick);
+    assertCallback(true, true, 0, onClick);
+
+    it('adds "label" property to a point', () => {
+      const onChangeProps = jest.fn();
+      const w = wrapperWithLabels({
+        labelModeEnabled: true,
+        onChangeProps,
+        points: [xy(0, 0, 0), xy(2, 2, 1), xy(0, 2, 2)],
+      });
+
+      w.instance().clickPoint(xy(0, 0, 0), 0, {});
+      expect(onChangeProps).toHaveBeenCalledWith([xyLabel(0, 0, 0, ''), xy(2, 2, 1), xy(0, 2, 2)]);
+    });
+
+    it('adds "label" property to a point when limit labeling', () => {
+      const onChangeProps = jest.fn();
+      const w = wrapperWithLabels({
+        labelModeEnabled: true,
+        onChangeProps,
+        limitLabeling: true,
+      });
+
+      w.instance().clickPoint(xy(0, 0, 0), 0, {});
+      expect(onChangeProps).toHaveBeenCalledTimes(0);
+    });
+
+    it('if point already has label, keeps that value', () => {
+      const onChangeProps = jest.fn();
+      const w = wrapperWithLabels({ labelModeEnabled: true, onChangeProps });
+
+      w.instance().clickPoint(points[0], 0, {});
+      expect(onChangeProps).toHaveBeenCalledWith(points);
+    });
+  });
+});

package/src/tools/polygon/__tests__/index.test.js

@@ -0,0 +1,65 @@
+import { addPointToArray, tool } from '../index';
+
+const xy = (x, y) => ({ x, y });
+
+describe('polygon', () => {
+  describe('addPointToArray', () => {
+    const assertAddPoint = (point, arr, expected) => {
+      it(`returns ${expected} when adding ${point} to ${arr}`, () => {
+        const result = addPointToArray(point, arr);
+        expect(result).toEqual(expected);
+      });
+    };
+    assertAddPoint(xy(0, 0), [], { closed: false, points: [xy(0, 0)] });
+    assertAddPoint(xy(0, 0), [xy(0, 0)], { closed: false, points: [xy(0, 0)] });
+    assertAddPoint(xy(1, 1), [xy(0, 0)], {
+      closed: false,
+      points: [xy(0, 0), xy(1, 1)],
+    });
+    assertAddPoint(xy(1, 1), [xy(0, 0)], {
+      closed: false,
+      points: [xy(0, 0), xy(1, 1)],
+    });
+  });
+});
+
+describe('tool', () => {
+  let t;
+  beforeEach(() => {
+    t = tool();
+  });
+
+  it('creates polygon type', () => {
+    expect(t.type).toEqual('polygon');
+  });
+
+  describe('complete', () => {
+    it('closes polygon', () => {
+      expect(t.complete()).toEqual({ building: false, closed: true });
+    });
+  });
+
+  describe('addPoint', () => {
+    it('creates new point', () => {
+      const mark = t.addPoint({ x: 0, y: 0 });
+      expect(mark).toEqual({
+        type: 'polygon',
+        points: [{ x: 0, y: 0 }],
+        closed: false,
+        building: true,
+      });
+    });
+
+    it('adds the point', () => {
+      const mark = t.addPoint({ x: 0, y: 0 }, { points: [{ x: 1, y: 1 }] });
+      expect(mark).toEqual({
+        building: true,
+        closed: false,
+        points: [
+          { x: 1, y: 1 },
+          { x: 0, y: 0 },
+        ],
+      });
+    });
+  });
+});

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

@@ -0,0 +1,25 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Line } from '../line';
+import { graphProps } from '../../../__tests__/utils';
+
+describe('Line', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Line {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {});
+});

package/src/tools/polygon/__tests__/polygon.test.jsx

@@ -0,0 +1,44 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Polygon, getPointString } from '../polygon';
+import { graphProps } from '../../../__tests__/utils';
+
+const xy = (x, y) => ({ x, y });
+
+describe('Polygon', () => {
+  let w;
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      closed: false,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Polygon {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper({ points: [{ x: 1, y: 1 }] });
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+describe('getPointString', () => {
+  const assertString = (arr, expected) => {
+    it('creates: ', () => {
+      const result = getPointString(arr, {
+        x: jest.fn((n) => n),
+        y: jest.fn((n) => n),
+      });
+
+      expect(result).toEqual(expected);
+    });
+  };
+
+  assertString([xy(1, 1)], '1,1');
+  assertString([xy(1, 1), xy(2, 1)], '1,1 2,1');
+  assertString([xy(1, 1), xy(2, 1), xy(4, 4)], '1,1 2,1 4,4');
+});

package/src/tools/polygon/component.jsx

@@ -5,11 +5,10 @@ import { ToolPropTypeFields } from '../shared/types';
 import { BasePoint } from '../shared/point';
 import chunk from 'lodash/chunk';
 import initial from 'lodash/initial';
-import isEqual from 'lodash/isEqual';
 import debug from 'debug';
 import Line from './line';
 import DraggablePolygon, { Polygon } from './polygon';
-import { types, utils } from '@pie-lib/plot';
+import { types } from '@pie-lib/plot';
 import invariant from 'invariant';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../mark-label';
@@ -84,6 +83,7 @@ export class RawBaseComponent extends React.Component {
     middle: PropTypes.object,
     labelNode: PropTypes.object,
     labelModeEnabled: PropTypes.bool,
+    limitLabeling: PropTypes.bool,
     onChangeLabelProps: PropTypes.func,
     onChangeProps: PropTypes.func,
   };
@@ -165,9 +165,24 @@ export class RawBaseComponent extends React.Component {
   };
 
   clickPoint = (point, index, data) => {
-    const { closed, onClick, isToolActive, labelModeEnabled, onChangeProps, onChangeLabelProps, points } = this.props;
+    const {
+      closed,
+      disabled,
+      onClick,
+      isToolActive,
+      labelModeEnabled,
+      limitLabeling,
+      onChangeProps,
+      onChangeLabelProps,
+      points,
+    } = this.props;
 
     if (labelModeEnabled) {
+      // limit labeling the points of the polygon
+      if (disabled || limitLabeling) {
+        return;
+      }
+
       if (points && index === points.length) {
         const { a, b } = getRightestPoints(points);
         const middle = { label: '', ...point, ...getMiddleOfTwoPoints(a, b) };
@@ -183,13 +198,16 @@ export class RawBaseComponent extends React.Component {
       if (this.input[index]) {
         this.input[index].focus();
       }
-    } else {
-      if (isToolActive && !closed && index === 0) {
-        this.close();
-      } else {
-        onClick(data);
-      }
+
+      return;
+    }
+
+    if (isToolActive && !closed && index === 0) {
+      this.close();
+      return;
     }
+
+    onClick(point || data);
   };
 
   // IMPORTANT, do not remove
@@ -264,8 +282,8 @@ export class RawBaseComponent extends React.Component {
               x={p.x}
               y={p.y}
               onDrag={this.dragPoint.bind(this, index, p)}
-              onClick={this.clickPoint.bind(this, p, index)}
               {...common}
+              onClick={this.clickPoint.bind(this, p, index)}
             />,
             labelNode && p.hasOwnProperty('label')
               ? ReactDOM.createPortal(
@@ -349,7 +367,16 @@ export default class Component extends React.Component {
   };
 
   render() {
-    const { coordinatesOnHover, mark, graphProps, onClick, isToolActive, labelNode, labelModeEnabled } = this.props;
+    const {
+      coordinatesOnHover,
+      mark,
+      graphProps,
+      onClick,
+      isToolActive,
+      labelNode,
+      labelModeEnabled,
+      limitLabeling,
+    } = this.props;
     const { mark: stateMark } = this.state;
 
     return (
@@ -367,6 +394,7 @@ export default class Component extends React.Component {
         isToolActive={isToolActive}
         labelNode={labelNode}
         labelModeEnabled={labelModeEnabled}
+        limitLabeling={limitLabeling}
       />
     );
   }

package/src/tools/polygon/line.jsx

@@ -5,7 +5,7 @@ import { types, gridDraggable } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import * as utils from '../../utils';
 import classNames from 'classnames';
-import { correct, disabled, incorrect, missing } from '../shared/styles';
+import { correct, disabled, disabledSecondary, incorrect, missing } from '../shared/styles';
 
 class RawLine extends React.Component {
   static propTypes = {
@@ -32,7 +32,7 @@ class RawLine extends React.Component {
         y1={scale.y(from.y)}
         x2={scale.x(to.x)}
         y2={scale.y(to.y)}
-        className={classNames(classes.line, disabled && classes.disabled, className, classes[correctness])}
+        className={classNames(classes.line, disabled && classes.disabledSecondary, className, classes[correctness])}
         {...rest}
       />
     );
@@ -41,21 +41,29 @@ class RawLine extends React.Component {
 
 export const Line = withStyles(() => ({
   line: {
-    strokeWidth: 6,
+    strokeWidth: 3,
     transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
     stroke: 'transparent',
     '&:hover': {
-      strokeWidth: 7,
-      stroke: color.secondary(),
+      strokeWidth: 4,
+      stroke: color.defaults.BLACK,
     },
   },
   disabled: {
     ...disabled('stroke'),
     strokeWidth: 2,
   },
-  correct: correct('stoke'),
+  disabledSecondary: {
+    ...disabledSecondary('stroke'),
+    strokeWidth: 2,
+  },
+  correct: correct('stroke'),
   incorrect: incorrect('stroke'),
-  missing: missing('stroke'),
+  missing: {
+    ...missing('stroke'),
+    strokeWidth: 1,
+    strokeDasharray: '4 3',
+  },
 }))(RawLine);
 
 export default gridDraggable({

package/src/tools/polygon/polygon.jsx

@@ -6,7 +6,7 @@ import * as utils from '../../utils';
 import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
 import { fade } from '@material-ui/core/styles/colorManipulator';
-import { correct, disabled, incorrect } from '../shared/styles';
+import { correct, disabled, incorrect, missing } from '../shared/styles';
 
 export const getPointString = (points, scale) => {
   return (points || [])
@@ -61,12 +61,12 @@ export const Polygon = withStyles((theme) => ({
   closed: {
     fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color
     strokeWidth: 2,
-    stroke: color.secondaryLight(),
+    stroke: color.defaults.BLACK,
   },
   open: {
     fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color
     strokeWidth: 2,
-    stroke: color.secondaryLight(),
+    stroke: color.defaults.BLACK,
     pointerEvents: 'none',
   },
   disabled: {
@@ -78,6 +78,10 @@ export const Polygon = withStyles((theme) => ({
   incorrect: {
     ...incorrect('stroke'),
   },
+  missing: {
+    ...missing('stroke'),
+    stroke: 'inherit'
+  }
 }))(RawPolygon);
 
 export default gridDraggable({

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

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

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

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

package/src/tools/ray/component.jsx

@@ -12,6 +12,7 @@ const rayStyles = (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'),
@@ -43,7 +44,7 @@ export const RayLine = (props) => {
         x2={scale.x(aToB.x)}
         y2={scale.y(aToB.y)}
         {...rest}
-        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})`}
       />
     </g>

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line snapshot renders 1`] = `
+<line
+  className="className"
+  onChange={[MockFunction]}
+  stroke="green"
+  strokeWidth="6"
+  x1={0}
+  x2={1}
+  y1={0}
+  y2={1}
+/>
+`;

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

@@ -0,0 +1,28 @@
+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';
+const { xy } = utils;
+describe('Line', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: getGraphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Line {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/segment/component.jsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 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'),
@@ -25,7 +26,7 @@ export const Line = (props) => {
       y1={scale.y(from.y)}
       x2={scale.x(to.x)}
       y2={scale.y(to.y)}
-      className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
+      className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
       {...rest}
     />
   );