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

package/src/tools/polygon/index.js

@@ -0,0 +1,52 @@
+import Polygon from './component';
+import { equalPoints } from '../../utils';
+
+export const addPointToArray = (point, arr) => {
+  arr = arr || [];
+
+  if (arr.length === 0) {
+    return { points: [point], closed: false };
+  } else if (arr.length === 1) {
+    if (equalPoints(point, arr[0])) {
+      return { points: arr, closed: false };
+    } else {
+      return { points: [...arr, point], closed: false };
+    }
+  } else if (arr.length >= 2) {
+    const closed = equalPoints(point, arr[0]);
+
+    if (closed) {
+      return { points: arr, closed };
+    } else {
+      const hasPoint = !!arr.find((p) => equalPoints(p, point));
+
+      if (hasPoint) {
+        return { points: arr, closed: false };
+      } else {
+        return { points: [...arr, point], closed: false };
+      }
+    }
+  }
+};
+
+export const tool = () => ({
+  type: 'polygon',
+  Component: Polygon,
+  complete: (data, mark) => {
+    return { ...mark, building: false, closed: true };
+  },
+  addPoint: (point, mark) => {
+    if (!mark) {
+      return {
+        type: 'polygon',
+        points: [point],
+        closed: false,
+        building: true,
+      };
+    } else {
+      const { closed, points } = addPointToArray(point, mark.points);
+
+      return { ...mark, closed, points, building: !closed };
+    }
+  },
+});

package/src/tools/polygon/line.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+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';
+
+class RawLine extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    classes: PropTypes.object,
+    from: types.PointType,
+    to: types.PointType,
+    graphProps: types.GraphPropsType.isRequired,
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
+  };
+
+  static defaultProps = {
+    from: {},
+    to: {},
+  };
+
+  render() {
+    const { graphProps, classes, from, to, className, disabled, correctness, ...rest } = this.props;
+    const { scale } = graphProps;
+    return (
+      <line
+        x1={scale.x(from.x)}
+        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])}
+        {...rest}
+      />
+    );
+  }
+}
+
+export const Line = withStyles(() => ({
+  line: {
+    strokeWidth: 6,
+    transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
+    stroke: 'transparent',
+    '&:hover': {
+      strokeWidth: 7,
+      stroke: color.defaults.SECONDARY,
+    },
+  },
+  disabled: {
+    ...disabled('stroke'),
+    strokeWidth: 2,
+  },
+  correct: correct('stoke'),
+  incorrect: incorrect('stroke'),
+  missing: missing('stroke'),
+}))(RawLine);
+
+export default gridDraggable({
+  bounds: (props, { domain, range }) => {
+    const { from, to } = props;
+    const area = utils.lineToArea(from, to);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { from } = props;
+    return from;
+  },
+  fromDelta: (props, delta) => {
+    const { from, to } = props;
+    return {
+      from: utils.point(from).add(utils.point(delta)),
+      to: utils.point(to).add(utils.point(delta)),
+    };
+  },
+})(Line);

package/src/tools/polygon/polygon.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { gridDraggable, types } from '@pie-lib/plot';
+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';
+
+export const getPointString = (points, scale) => {
+  return (points || [])
+    .map((p) => {
+      const scaledPoint = {
+        x: scale.x(p.x),
+        y: scale.y(p.y),
+      };
+      return `${scaledPoint.x},${scaledPoint.y}`;
+    })
+    .join(' ');
+};
+
+export class RawPolygon extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    isSolution: PropTypes.bool,
+    points: PropTypes.arrayOf(types.PointType),
+    graphProps: types.GraphPropsType.isRequired,
+    closed: PropTypes.bool.isRequired,
+    correctness: PropTypes.string,
+  };
+
+  static defaultProps = {
+    points: [],
+  };
+
+  render() {
+    const { points, classes, className, correctness, graphProps, closed, isSolution, ...rest } = this.props;
+    const { scale } = graphProps;
+
+    const pointString = getPointString(points, scale);
+    const Tag = closed ? 'polygon' : 'polyline';
+    return (
+      <Tag
+        points={pointString}
+        className={classNames(isSolution ? classes.gssSolution : classes.gssClosed, classes[correctness], className)}
+        {...rest}
+      />
+    );
+  }
+}
+
+export const Polygon = withStyles((theme) => ({
+  closed: {
+    fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color
+    strokeWidth: 2,
+    stroke: color.defaults.SECONDARY_LIGHT,
+  },
+  open: {
+    fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color
+    strokeWidth: 2,
+    stroke: color.defaults.SECONDARY_LIGHT,
+    pointerEvents: 'none',
+  },
+  gssClosed: {
+    fill: 'transparent',
+    '&:hover': {
+      fill: 'rgb(0, 0, 0, 0.25)',
+    },
+  },
+  gssSolution: {
+    fill: 'rgb(60, 73, 150, 0.6)',
+  },
+  disabled: {
+    ...disabled('stroke'),
+  },
+  correct: {
+    ...correct('stroke'),
+  },
+  incorrect: {
+    ...incorrect('stroke'),
+  },
+}))(RawPolygon);
+
+export default gridDraggable({
+  bounds: (props, { domain, range }) => {
+    const { points } = props;
+    const area = utils.polygonToArea(points);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { points } = props;
+    return points[0];
+  },
+  fromDelta: (props, delta) => {
+    const { points } = props;
+
+    return points.map((p) => utils.point(p).add(utils.point(delta)));
+  },
+})(Polygon);

package/src/tools/shared/__tests__/__snapshots__/arrow-head.test.jsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrowHead snapshot renders 1`] = `
+<polygon
+  points="0,0 10,5 0,10"
+  transform=""
+/>
+`;
+
+exports[`ArrowMarker snapshot renders 1`] = `
+<marker
+  className="className"
+  id="id"
+  markerHeight={10}
+  markerWidth={10}
+  orient="auto-start-reverse"
+  refX={5}
+  refY={5}
+  style={
+    Object {
+      "fill": "#000000",
+    }
+  }
+  viewBox="0 0 10 10"
+>
+  <ArrowHead
+    points=""
+    size={10}
+    transform=""
+  />
+</marker>
+`;

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

@@ -0,0 +1,34 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ArrowHead, ArrowMarker } from '../arrow-head';
+describe('ArrowHead', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = { size: 10, transform: '' };
+    const props = { ...defaults, ...extras };
+    return shallow(<ArrowHead {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+describe('ArrowMarker', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = { id: 'id', size: 10, className: 'className' };
+    const props = { ...defaults, ...extras };
+    return shallow(<ArrowMarker {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/shared/arrow-head.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
+
+export const ArrowHead = ({ size, transform, points }) => (
+  <polygon points={points || `0,0 ${size},${size / 2} 0,${size}`} transform={transform} />
+);
+ArrowHead.propTypes = {
+  points: PropTypes.string,
+  size: PropTypes.number,
+  transform: PropTypes.string,
+};
+ArrowHead.defaultProps = {
+  points: '',
+  size: 10,
+  transform: '',
+};
+export const genUid = () => {
+  const v = (Math.random() * 1000).toFixed(0);
+  return `arrow-${v}`;
+};
+export const ArrowMarker = ({ id, size, className }) => {
+  return (
+    <marker
+      id={id}
+      viewBox={`0 0 ${size} ${size}`}
+      refX={size / 2}
+      refY={size / 2}
+      markerWidth={size}
+      markerHeight={size}
+      orient="auto-start-reverse"
+      className={className}
+      style={{ fill: color.defaults.BLACK }}
+    >
+      <ArrowHead size={size} />
+    </marker>
+  );
+};
+ArrowMarker.propTypes = {
+  id: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string,
+};
+ArrowMarker.defaultProps = {
+  size: 5,
+};

package/src/tools/shared/line/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,360 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lineBase render renders 1`] = `
+<g>
+  <GridDraggable
+    from={
+      Object {
+        "x": 0,
+        "y": 0,
+      }
+    }
+    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]}
+    to={
+      Object {
+        "x": 1,
+        "y": 1,
+      }
+    }
+  />
+  <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]}
+    x={0}
+    y={0}
+  />
+  <WithStyles(GridDraggable)
+    angle={45}
+    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]}
+    x={1}
+    y={1}
+  />
+</g>
+`;
+
+exports[`lineBase render renders with labels 1`] = `
+<g>
+  <GridDraggable
+    from={
+      Object {
+        "label": "A",
+        "x": 0,
+        "y": 0,
+      }
+    }
+    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]}
+    to={
+      Object {
+        "label": "B",
+        "x": 1,
+        "y": 1,
+      }
+    }
+  />
+  <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],
+        },
+      }
+    }
+    labelNode={<foreignobject />}
+    onClick={[Function]}
+    onDrag={[Function]}
+    x={0}
+    y={0}
+  />
+  <Portal
+    containerInfo={<foreignobject />}
+  >
+    <WithStyles(MarkLabel)
+      disabled={true}
+      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],
+          },
+        }
+      }
+      inputRef={[Function]}
+      mark={
+        Object {
+          "label": "A",
+          "x": 0,
+          "y": 0,
+        }
+      }
+      onChange={[Function]}
+    />
+  </Portal>
+  <WithStyles(GridDraggable)
+    angle={45}
+    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],
+        },
+      }
+    }
+    labelNode={<foreignobject />}
+    onClick={[Function]}
+    onDrag={[Function]}
+    x={1}
+    y={1}
+  />
+  <Portal
+    containerInfo={<foreignobject />}
+  >
+    <WithStyles(MarkLabel)
+      disabled={true}
+      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],
+          },
+        }
+      }
+      inputRef={[Function]}
+      mark={
+        Object {
+          "label": "B",
+          "x": 1,
+          "y": 1,
+        }
+      }
+      onChange={[Function]}
+    />
+  </Portal>
+</g>
+`;
+
+exports[`lineToolComponent snapshot renders 1`] = `
+<Component
+  changeMarkProps={[Function]}
+  from={
+    Object {
+      "x": 0,
+      "y": 0,
+    }
+  }
+  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],
+      },
+    }
+  }
+  onChange={[Function]}
+  onDragStart={[Function]}
+  onDragStop={[Function]}
+  to={
+    Object {
+      "x": 1,
+      "y": 1,
+    }
+  }
+/>
+`;