@pie-lib/graphing-solution-set 2.16.0-beta.0

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

@@ -0,0 +1,214 @@
+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('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

@@ -0,0 +1,336 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { ToolPropTypeFields } from '../shared/types';
+import chunk from 'lodash/chunk';
+import initial from 'lodash/initial';
+import debug from 'debug';
+import DraggablePolygon from './polygon';
+import { types } from '@pie-lib/plot';
+import invariant from 'invariant';
+import ReactDOM from 'react-dom';
+import MarkLabel from '../../mark-label';
+import isEmpty from 'lodash/isEmpty';
+import { getMiddleOfTwoPoints, getRightestPoints, equalPoints } from '../../utils';
+
+const log = debug('pie-lib:graphing-solution-set:polygon');
+
+export const buildLines = (points, closed) => {
+  const expanded = points.reduce((acc, p, index) => {
+    acc.push({ ...p, index });
+
+    const isLast = index === points.length - 1;
+    const next = isLast ? 0 : index + 1;
+
+    acc.push({ ...points[next], index: next });
+
+    return acc;
+  }, []);
+
+  const all = chunk(expanded, 2).map(([from, to]) => {
+    return { from, to };
+  });
+
+  return closed ? all : initial(all);
+};
+
+export const swap = (arr, ...rest) => {
+  const pairs = chunk(rest, 2);
+
+  return pairs.reduce(
+    (acc, pr) => {
+      if (pr.length === 2) {
+        let [e, replacement] = pr;
+
+        invariant(Number.isFinite(e.index), 'Index must be defined');
+
+        const index = e.index;
+        // const i = acc.findIndex(pt => pt.x === e.x && pt.y === e.y);
+
+        if (index >= 0) {
+          acc.splice(index, 1, replacement);
+
+          return acc;
+        } else {
+          return acc;
+        }
+      } else {
+        return acc;
+      }
+    },
+    [...arr],
+  );
+};
+
+export class RawBaseComponent extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
+    points: PropTypes.arrayOf(types.PointType),
+    closed: PropTypes.bool,
+    isSolution: PropTypes.bool,
+    coordinatesOnHover: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    onClosePolygon: PropTypes.func.isRequired,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
+    onClick: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+    isToolActive: PropTypes.bool,
+    middle: PropTypes.object,
+    labelNode: PropTypes.object,
+    labelModeEnabled: PropTypes.bool,
+    onChangeLabelProps: PropTypes.func,
+    onChangeProps: PropTypes.func,
+  };
+
+  static defaultProps = {
+    points: [],
+  };
+
+  dragPoint = (index, from, to) => {
+    log('[dragPoint] from, to:', from, to);
+    const { onChange, points } = this.props;
+    const update = [...points];
+    const overlapPoint = !!(points || []).find((p) => equalPoints(p, to));
+
+    if (equalPoints(from, to) || overlapPoint) {
+      return;
+    }
+
+    if (points[index].label) {
+      to.label = points[index].label;
+    }
+
+    update.splice(index, 1, to);
+    onChange(update);
+  };
+
+  dragLine = (existing, next) => {
+    log('[dragLine]: ', existing, next);
+    const { onChange } = this.props;
+
+    if (existing.from.label) {
+      next.from.label = existing.from.label;
+    }
+
+    if (existing.to.label) {
+      next.to.label = existing.to.label;
+    }
+
+    const points = swap(this.props.points, existing.from, next.from, existing.to, next.to);
+    onChange(points);
+  };
+
+  dragPoly = (existing, next) => {
+    log('[dragPoly] ', existing, next);
+    const { onChange } = this.props;
+
+    next.forEach((point, index) => {
+      if (existing[index].label) {
+        next[index].label = existing[index].label;
+      }
+    });
+
+    onChange(next);
+  };
+
+  close = () => {
+    const { points, onClosePolygon } = this.props;
+    log('[close] ...');
+
+    if (points.length >= 3) {
+      onClosePolygon();
+    } else {
+      log('[close] - nope');
+    }
+  };
+
+  labelChange = (point, index) => {
+    const { points, onChangeProps } = this.props;
+    const updatedPoint = { ...point };
+
+    if (!point.label || isEmpty(point.label)) {
+      delete updatedPoint.label;
+    }
+
+    const update = [...points];
+
+    update.splice(index, 1, updatedPoint);
+    onChangeProps(update);
+  };
+
+  clickPoint = (point, index, data) => {
+    const {
+      closed,
+      disabled,
+      onClick,
+      isToolActive,
+      labelModeEnabled,
+      onChangeProps,
+      onChangeLabelProps,
+      points,
+    } = this.props;
+
+    if (labelModeEnabled) {
+      if (disabled) {
+        return;
+      }
+
+      if (points && index === points.length) {
+        const { a, b } = getRightestPoints(points);
+        const middle = { label: '', ...point, ...getMiddleOfTwoPoints(a, b) };
+
+        onChangeLabelProps(middle);
+      } else {
+        const update = [...points];
+
+        update.splice(index, 1, { label: '', ...point });
+        onChangeProps(update);
+      }
+
+      if (this.input[index]) {
+        this.input[index].focus();
+      }
+
+      return;
+    }
+
+    if (isToolActive && !closed && index === 0) {
+      this.close();
+      return;
+    }
+
+    onClick(point || data);
+  };
+
+  // IMPORTANT, do not remove
+  input = {};
+
+  render() {
+    const {
+      closed,
+      graphProps,
+      onChangeLabelProps,
+      points,
+      middle,
+      labelNode,
+      labelModeEnabled,
+      isSolution = false,
+    } = this.props;
+    const polygonLabelIndex = (points && points.length) || 0;
+    if (labelNode && middle && middle.hasOwnProperty('label')) {
+      ReactDOM.createPortal(
+        <MarkLabel
+          inputRef={(r) => (this.input[polygonLabelIndex] = r)}
+          disabled={!labelModeEnabled}
+          mark={middle}
+          graphProps={graphProps}
+          onChange={(label) => onChangeLabelProps({ ...middle, label })}
+        />,
+        labelNode,
+      );
+    }
+    return (
+      <g>
+        <React.Fragment>
+          <DraggablePolygon
+            points={points}
+            closed={closed}
+            isSolution={isSolution}
+            graphProps={graphProps}
+            onClick={this.clickPoint.bind(this, middle, polygonLabelIndex)}
+          />
+        </React.Fragment>
+      </g>
+    );
+  }
+}
+
+export const BaseComponent = withStyles(() => ({}))(RawBaseComponent);
+
+export default class Component extends React.Component {
+  static propTypes = {
+    ...ToolPropTypeFields,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  change = (points) => {
+    const {
+      mark: { middle },
+    } = this.props;
+    const mark = { ...this.state.mark, points };
+
+    if (middle) {
+      const { a, b } = getRightestPoints(points);
+
+      mark.middle = { ...middle, ...getMiddleOfTwoPoints(a, b) };
+    }
+
+    this.setState({ mark });
+  };
+
+  changeProps = (points) => {
+    const mark = { ...this.props.mark, points };
+
+    this.props.onChange(this.props.mark, mark);
+  };
+
+  changeLabelProps = (point) => {
+    const { mark, onChange } = this.props;
+    const middle = { ...mark.middle, ...point };
+
+    onChange(mark, { ...mark, middle });
+  };
+
+  closePolygon = () => {
+    log('[closePolygon] ...');
+    const { onComplete, mark } = this.props;
+    const update = { ...mark, closed: true };
+
+    onComplete(mark, update);
+  };
+
+  dragStart = () => this.setState({ mark: this.props.mark });
+
+  dragStop = () => {
+    const { onChange } = this.props;
+    const m = { ...this.state.mark };
+
+    this.setState({ mark: undefined }, () => {
+      onChange(this.props.mark, m);
+    });
+  };
+
+  render() {
+    const { coordinatesOnHover, mark, graphProps, onClick, isToolActive, labelNode, labelModeEnabled } = this.props;
+    const { mark: stateMark } = this.state;
+
+    return (
+      <BaseComponent
+        {...(stateMark || mark)}
+        coordinatesOnHover={coordinatesOnHover}
+        onChange={this.change}
+        onChangeLabelProps={this.changeLabelProps}
+        onChangeProps={this.changeProps}
+        onClosePolygon={this.closePolygon}
+        onDragStart={this.dragStart}
+        onDragStop={this.dragStop}
+        onClick={onClick}
+        graphProps={graphProps}
+        isToolActive={isToolActive}
+        labelNode={labelNode}
+        labelModeEnabled={labelModeEnabled}
+      />
+    );
+  }
+}