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

package/src/tool-menu.jsx

@@ -1,235 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,4 +0,0 @@
-import Line from './component';
-import { lineTool } from '../shared/line';
-
-export const tool = lineTool('line', Line);