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

package/src/tool-menu.jsx

@@ -0,0 +1,294 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Button } from '@material-ui/core';
+import Radio from '@material-ui/core/Radio';
+import { withStyles } from '@material-ui/core/styles';
+
+export class ToolMenu extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    gssLineData: PropTypes.object,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+
+  render() {
+    let { classes, gssLineData, disabled } = this.props;
+
+    return (
+      <div className={classes.selectLineRadioGroup}>
+        <div className={classes.radioFieldOuter}>
+          <div className={classes.radioFieldInner}>
+            <Radio
+              name={'select-line-radio-buttons'}
+              onChange={this.onChangeRadioValue}
+              value={'lineA'}
+              disabled={!!disabled}
+              checked={gssLineData.selectedTool === 'lineA'}
+              className={classes.lineTypeRadio}
+            />
+            <Typography className={classes.lineNameFont}>Line A</Typography>
+          </div>
+          <div className={classes.radioFieldButtons}>
+            {gssLineData.lineA.lineType === 'Solid' ? (
+              <Button
+                size={'small'}
+                variant={'contained'}
+                color={'primary'}
+                onClick={() => this.lineTypeChange('A', 'Solid')}
+                className={disabled ? classes.lineTypeButtonLeftSelectedDisabled : classes.lineTypeButtonLeftSelected}
+              >
+                &#x2714; Solid
+              </Button>
+            ) : (
+              <Button
+                size={'small'}
+                variant={'contained'}
+                disabled={!!disabled}
+                onClick={() => this.lineTypeChange('A', 'Solid')}
+                className={
+                  disabled ? classes.lineTypeButtonLeftUnSelectedDisabled : classes.lineTypeButtonLeftUnSelected
+                }
+              >
+                Solid
+              </Button>
+            )}
+            {gssLineData.lineA.lineType === 'Dashed' ? (
+              <Button
+                size={'small'}
+                variant={'contained'}
+                color={'primary'}
+                onClick={() => this.lineTypeChange('A', 'Dashed')}
+                className={disabled ? classes.lineTypeButtonRightSelectedDisabled : classes.lineTypeButtonRightSelected}
+              >
+                &#x2714; Dashed
+              </Button>
+            ) : (
+              <Button
+                size={'small'}
+                variant={'contained'}
+                disabled={!!disabled}
+                onClick={() => this.lineTypeChange('A', 'Dashed')}
+                className={
+                  disabled ? classes.lineTypeButtonRightUnSelectedDisabled : classes.lineTypeButtonRightUnSelected
+                }
+              >
+                Dashed
+              </Button>
+            )}
+          </div>
+        </div>
+        {gssLineData.numberOfLines === 2 ? (
+          <div className={classes.radioFieldOuter}>
+            <div className={classes.radioFieldInner}>
+              <Radio
+                name={'select-line-radio-buttons'}
+                onChange={this.onChangeRadioValue}
+                value={'lineB'}
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'lineB'}
+                className={classes.lineTypeRadio}
+              />
+              <Typography className={classes.lineNameFont}>Line B</Typography>
+            </div>
+            <div className={classes.radioFieldButtons}>
+              {gssLineData.lineB.lineType === 'Solid' ? (
+                <Button
+                  size={'small'}
+                  variant={'contained'}
+                  color={'primary'}
+                  onClick={() => this.lineTypeChange('B', 'Solid')}
+                  className={disabled ? classes.lineTypeButtonLeftSelectedDisabled : classes.lineTypeButtonLeftSelected}
+                >
+                  &#x2714; Solid
+                </Button>
+              ) : (
+                <Button
+                  size={'small'}
+                  variant={'contained'}
+                  disabled={!!disabled}
+                  onClick={() => this.lineTypeChange('B', 'Solid')}
+                  className={
+                    disabled ? classes.lineTypeButtonLeftUnSelectedDisabled : classes.lineTypeButtonLeftUnSelected
+                  }
+                >
+                  Solid
+                </Button>
+              )}
+              {gssLineData.lineB.lineType === 'Dashed' ? (
+                <Button
+                  size={'small'}
+                  variant={'contained'}
+                  color={'primary'}
+                  onClick={() => this.lineTypeChange('B', 'Dashed')}
+                  className={
+                    disabled ? classes.lineTypeButtonRightSelectedDisabled : classes.lineTypeButtonRightSelected
+                  }
+                >
+                  &#x2714; Dashed
+                </Button>
+              ) : (
+                <Button
+                  size={'small'}
+                  variant={'contained'}
+                  disabled={!!disabled}
+                  onClick={() => this.lineTypeChange('B', 'Dashed')}
+                  className={
+                    disabled ? classes.lineTypeButtonRightUnSelectedDisabled : classes.lineTypeButtonRightUnSelected
+                  }
+                >
+                  Dashed
+                </Button>
+              )}
+            </div>
+          </div>
+        ) : null}
+        <div className={classes.radioFieldOuter}>
+          <div className={classes.radioFieldInner}>
+            <Radio
+              name={'select-line-radio-buttons'}
+              onChange={this.onChangeRadioValue}
+              value={'solutionSet'}
+              disabled={!!disabled}
+              checked={gssLineData.selectedTool === 'solutionSet'}
+              className={classes.lineTypeRadio}
+            />
+            <Typography className={classes.lineNameFont}>Solution Set</Typography>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onChangeRadioValue = (event) => {
+    let { gssLineData, onChange } = this.props;
+    let oldSelectedTool = gssLineData.selectedTool;
+    gssLineData.selectedTool = event.target.value;
+    onChange(gssLineData, oldSelectedTool);
+  };
+
+  lineTypeChange = (line, type) => {
+    let { gssLineData, onChange } = this.props;
+    let oldSelectedTool = gssLineData.selectedTool;
+    gssLineData[`line${line}`].lineType = type;
+    onChange(gssLineData, oldSelectedTool);
+  };
+}
+
+const styles = (theme) => ({
+  radioButtonClass: {},
+  selectLineRadioGroup: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+  },
+  radioFieldInner: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  radioFieldOuter: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'column',
+  },
+  radioFieldButtons: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    padding: '0 .9rem',
+  },
+  lineTypeText: {
+    marginLeft: '.7rem',
+  },
+  lineNameFont: {
+    fontWeight: 'bold',
+    padding: '0 5px 0 0',
+  },
+  lineTypeButtonLeftSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#FFFFFF !important',
+  },
+  lineTypeButtonLeftUnSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#3E4EB1 !important',
+  },
+  lineTypeButtonRightSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#FFFFFF !important',
+  },
+  lineTypeButtonRightUnSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#3E4EB1 !important',
+  },
+  lineTypeRadio: {
+    color: '#000000 !important',
+  },
+  lineTypeButtonLeftSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#FFFFFF !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+  lineTypeButtonLeftUnSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#3E4EB1 !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+  lineTypeButtonRightSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#FFFFFF !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+  lineTypeButtonRightUnSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#3E4EB1 !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+});
+
+export default withStyles(styles)(ToolMenu);

package/src/tools/index.js

@@ -0,0 +1,8 @@
+import { tool as polygon } from './polygon';
+import { tool as line } from './line';
+
+const allTools = ['line', 'polygon'];
+
+const toolsArr = [line(), polygon()];
+
+export { allTools, toolsArr, line, polygon };

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

@@ -0,0 +1,77 @@
+import { lineToolComponent, lineBase, 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 { withStyles } from '@material-ui/core/styles';
+import { ArrowMarker, genUid } from '../shared/arrow-head';
+import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
+
+const lineStyles = (theme) => ({
+  line: styles.line(theme),
+  dashedLine: styles.dashedLine(theme),
+  enabledArrow: styles.arrow(theme),
+  disabledArrow: styles.disabledArrow(theme),
+  disabled: styles.disabled(theme),
+  correct: styles.correct(theme, 'stroke'),
+  correctArrow: styles.correct(theme),
+  incorrect: styles.incorrect(theme, 'stroke'),
+  incorrectArrow: styles.incorrect(theme),
+  missing: styles.missing(theme, 'stroke'),
+  missingArrow: styles.missing(theme),
+});
+
+export const ArrowedLine = (props) => {
+  const markerId = genUid();
+  const { className, classes, correctness, disabled, graphProps, fill = 'Solid', from, to, ...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';
+
+  return (
+    <g>
+      <defs>
+        <ArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
+          id={`${props.markerId || markerId}-${suffix}`}
+          className={classNames(classes[`${suffix}Arrow`])}
+        />
+      </defs>
+      <line
+        x1={scale.x(eFrom.x)}
+        y1={scale.y(eFrom.y)}
+        x2={scale.x(eTo.x)}
+        y2={scale.y(eTo.y)}
+        className={classNames(
+          fill === 'Solid' ? classes.line : classes.dashedLine,
+          disabled && classes.disabled,
+          classes[correctness],
+          className,
+        )}
+        markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
+        markerStart={`url(#${props.markerId || markerId}-${suffix})`}
+        {...rest}
+      />
+    </g>
+  );
+};
+
+ArrowedLine.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  fill: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: types.GraphPropsType,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string,
+};
+
+const StyledArrowedLine = withStyles(lineStyles)(ArrowedLine);
+
+const Line = lineBase(StyledArrowedLine);
+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/polygon/__tests__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RawBaseComponent snapshot renders 1`] = `
+<g>
+  <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],
+        },
+      }
+    }
+    isSolution={false}
+    onClick={[Function]}
+    points={Array []}
+  />
+</g>
+`;
+
+exports[`RawBaseComponent snapshot renders with labels 1`] = `
+<g>
+  <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],
+        },
+      }
+    }
+    isSolution={false}
+    onClick={[Function]}
+    points={
+      Array [
+        Object {
+          "index": 0,
+          "label": "A",
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "index": 1,
+          "label": "B",
+          "x": 2,
+          "y": 2,
+        },
+        Object {
+          "index": 2,
+          "label": "C",
+          "x": 0,
+          "y": 2,
+        },
+      ]
+    }
+  />
+</g>
+`;

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line snapshot renders 1`] = `
+<RawLine
+  className="className"
+  classes={
+    Object {
+      "correct": "RawLine-correct-3",
+      "disabled": "RawLine-disabled-2",
+      "incorrect": "RawLine-incorrect-4",
+      "line": "RawLine-line-1",
+      "missing": "RawLine-missing-5",
+    }
+  }
+  from={Object {}}
+  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],
+      },
+    }
+  }
+  to={Object {}}
+/>
+`;

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

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Polygon snapshot renders 1`] = `
+<RawPolygon
+  className="className"
+  classes={
+    Object {
+      "closed": "RawPolygon-closed-1",
+      "correct": "RawPolygon-correct-6",
+      "disabled": "RawPolygon-disabled-5",
+      "gssClosed": "RawPolygon-gssClosed-3",
+      "gssSolution": "RawPolygon-gssSolution-4",
+      "incorrect": "RawPolygon-incorrect-7",
+      "open": "RawPolygon-open-2",
+    }
+  }
+  closed={false}
+  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],
+      },
+    }
+  }
+  points={
+    Array [
+      Object {
+        "x": 1,
+        "y": 1,
+      },
+    ]
+  }
+/>
+`;