@pie-lib/graphing-solution-set 4.0.4-next.30 → 4.0.4-next.34

package/src/tool-menu.jsx

@@ -0,0 +1,235 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Radio, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export class ToolMenu extends React.Component {
+  static propTypes = {
+    gssLineData: PropTypes.object,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+
+  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);
+  };
+
+  render() {
+    const { gssLineData, disabled } = this.props;
+
+    return (
+      <Root>
+        <div className="selectLineRadioGroup">
+          {/* LINE A */}
+          <div className="radioFieldOuter">
+            <div className="radioFieldInner">
+              <Radio
+                name="select-line-radio-buttons"
+                onChange={this.onChangeRadioValue}
+                value="lineA"
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'lineA'}
+                className="lineTypeRadio"
+              />
+              <Typography className="lineNameFont">Line A</Typography>
+            </div>
+            <div className="radioFieldButtons">
+              <Button
+                size="small"
+                variant="contained"
+                color={gssLineData.lineA.lineType === 'Solid' ? 'primary' : 'inherit'}
+                disabled={!!disabled}
+                onClick={() => this.lineTypeChange('A', 'Solid')}
+                className={
+                  gssLineData.lineA.lineType === 'Solid'
+                    ? disabled
+                      ? 'lineTypeButtonLeftSelectedDisabled'
+                      : 'lineTypeButtonLeftSelected'
+                    : disabled
+                      ? 'lineTypeButtonLeftUnSelectedDisabled'
+                      : 'lineTypeButtonLeftUnSelected'
+                }
+              >
+                {gssLineData.lineA.lineType === 'Solid' && '✔'} Solid
+              </Button>
+
+              <Button
+                size="small"
+                variant="contained"
+                color={gssLineData.lineA.lineType === 'Dashed' ? 'primary' : 'inherit'}
+                disabled={!!disabled}
+                onClick={() => this.lineTypeChange('A', 'Dashed')}
+                className={
+                  gssLineData.lineA.lineType === 'Dashed'
+                    ? disabled
+                      ? 'lineTypeButtonRightSelectedDisabled'
+                      : 'lineTypeButtonRightSelected'
+                    : disabled
+                      ? 'lineTypeButtonRightUnSelectedDisabled'
+                      : 'lineTypeButtonRightUnSelected'
+                }
+              >
+                {gssLineData.lineA.lineType === 'Dashed' && '✔'} Dashed
+              </Button>
+            </div>
+          </div>
+
+          {/* LINE B (if applicable) */}
+          {gssLineData.numberOfLines === 2 && (
+            <div className="radioFieldOuter">
+              <div className="radioFieldInner">
+                <Radio
+                  name="select-line-radio-buttons"
+                  onChange={this.onChangeRadioValue}
+                  value="lineB"
+                  disabled={!!disabled}
+                  checked={gssLineData.selectedTool === 'lineB'}
+                  className="lineTypeRadio"
+                />
+                <Typography className="lineNameFont">Line B</Typography>
+              </div>
+              <div className="radioFieldButtons">
+                <Button
+                  size="small"
+                  variant="contained"
+                  color={gssLineData.lineB.lineType === 'Solid' ? 'primary' : 'inherit'}
+                  disabled={!!disabled}
+                  onClick={() => this.lineTypeChange('B', 'Solid')}
+                  className={
+                    gssLineData.lineB.lineType === 'Solid'
+                      ? disabled
+                        ? 'lineTypeButtonLeftSelectedDisabled'
+                        : 'lineTypeButtonLeftSelected'
+                      : disabled
+                        ? 'lineTypeButtonLeftUnSelectedDisabled'
+                        : 'lineTypeButtonLeftUnSelected'
+                  }
+                >
+                  {gssLineData.lineB.lineType === 'Solid' && '✔'} Solid
+                </Button>
+
+                <Button
+                  size="small"
+                  variant="contained"
+                  color={gssLineData.lineB.lineType === 'Dashed' ? 'primary' : 'inherit'}
+                  disabled={!!disabled}
+                  onClick={() => this.lineTypeChange('B', 'Dashed')}
+                  className={
+                    gssLineData.lineB.lineType === 'Dashed'
+                      ? disabled
+                        ? 'lineTypeButtonRightSelectedDisabled'
+                        : 'lineTypeButtonRightSelected'
+                      : disabled
+                        ? 'lineTypeButtonRightUnSelectedDisabled'
+                        : 'lineTypeButtonRightUnSelected'
+                  }
+                >
+                  {gssLineData.lineB.lineType === 'Dashed' && '✔'} Dashed
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* SOLUTION SET */}
+          <div className="radioFieldOuter">
+            <div className="radioFieldInner">
+              <Radio
+                name="select-line-radio-buttons"
+                onChange={this.onChangeRadioValue}
+                value="solutionSet"
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'solutionSet'}
+                className="lineTypeRadio"
+              />
+              <Typography className="lineNameFont">Solution Set</Typography>
+            </div>
+          </div>
+        </div>
+      </Root>
+    );
+  }
+}
+
+const Root = styled('div')(() => ({
+  '& .selectLineRadioGroup': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+  },
+  '& .radioFieldOuter': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'column',
+  },
+  '& .radioFieldInner': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  '& .radioFieldButtons': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    padding: '0 .9rem',
+  },
+  '& .lineNameFont': {
+    fontWeight: 'bold',
+    padding: '0 5px 0 0',
+  },
+  '& .lineTypeRadio': {
+    color: '#000000 !important',
+  },
+  '& .lineTypeButtonLeftSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#3E4EB1 !important',
+    color: '#FFFFFF !important',
+    borderRadius: '4px 0 0 4px',
+  },
+  '& .lineTypeButtonLeftUnSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#FFFFFF !important',
+    color: '#3E4EB1 !important',
+    borderRadius: '4px 0 0 4px',
+  },
+  '& .lineTypeButtonRightSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#3E4EB1 !important',
+    color: '#FFFFFF !important',
+    borderRadius: '0 4px 4px 0',
+  },
+  '& .lineTypeButtonRightUnSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#FFFFFF !important',
+    color: '#3E4EB1 !important',
+    borderRadius: '0 4px 4px 0',
+  },
+  '& .lineTypeButtonLeftSelectedDisabled, & .lineTypeButtonRightSelectedDisabled': {
+    backgroundColor: '#3E4EB1 !important',
+    color: '#FFFFFF !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+  '& .lineTypeButtonLeftUnSelectedDisabled, & .lineTypeButtonRightUnSelectedDisabled': {
+    backgroundColor: '#FFFFFF !important',
+    color: '#3E4EB1 !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+}));
+
+export default 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__/component.test.jsx

@@ -0,0 +1,37 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { ArrowedLine } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
+jest.mock('@pie-lib/plot', () => {
+  const a = jest.requireActual('@pie-lib/plot');
+  return {
+    types: a.types,
+    gridDraggable: a.gridDraggable,
+    utils: a.utils,
+    trig: {
+      edges: jest.fn(() => jest.fn().mockReturnValue([0, 0])),
+    },
+  };
+});
+
+describe('ArrowedLine', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      markerId: '1',
+      graphProps: getGraphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<ArrowedLine {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/line/component.jsx

@@ -0,0 +1,77 @@
+import { lineBase, lineToolComponent, styles } from '../shared/line';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { trig, types } from '@pie-lib/plot';
+import { styled } from '@mui/material/styles';
+import { ArrowMarker, genUid } from '../shared/arrow-head';
+import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
+
+const StyledLine = styled('line', {
+  shouldForwardProp: (prop) => !['fill', 'disabled', 'correctness'].includes(prop),
+})(({ theme, fill, disabled, correctness }) => ({
+  ...(fill === 'Solid' ? styles.line(theme) : styles.dashedLine(theme)),
+  ...(disabled && styles.disabled(theme)),
+  ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+  ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+  ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+}));
+
+const StyledArrowMarker = styled(ArrowMarker, {
+  shouldForwardProp: (prop) => !['suffix'].includes(prop),
+})(({ theme, suffix }) => ({
+  ...(suffix === 'enabled' && styles.arrow(theme)),
+  ...(suffix === 'disabled' && styles.disabledArrow(theme)),
+  ...(suffix === 'correct' && styles.correct(theme)),
+  ...(suffix === 'incorrect' && styles.incorrect(theme)),
+  ...(suffix === 'missing' && styles.missing(theme)),
+}));
+
+export const ArrowedLine = (props) => {
+  const markerId = genUid();
+  const { className, 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>
+        <StyledArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
+          id={`${props.markerId || markerId}-${suffix}`}
+          suffix={suffix}
+        />
+      </defs>
+      <StyledLine
+        x1={scale.x(eFrom.x)}
+        y1={scale.y(eFrom.y)}
+        x2={scale.x(eTo.x)}
+        y2={scale.y(eTo.y)}
+        fill={fill}
+        disabled={disabled}
+        correctness={correctness}
+        className={className}
+        markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
+        markerStart={`url(#${props.markerId || markerId}-${suffix})`}
+        {...rest}
+      />
+    </g>
+  );
+};
+
+ArrowedLine.propTypes = {
+  className: PropTypes.string,
+  fill: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: types.GraphPropsType,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string,
+};
+
+const Line = lineBase(ArrowedLine);
+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);