@pie-element/complex-rubric 2.6.6 → 2.6.7

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tool-menu.jsx

@@ -1,210 +0,0 @@
-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'}
-            />
-            <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.lineTypeButtonDisabled : classes.lineTypeButton}
-              >
-                Solid
-              </Button>
-            ) : (
-              <Button
-                size={'small'}
-                variant={'contained'}
-                disabled={!!disabled}
-                onClick={() => this.lineTypeChange('A', 'Solid')}
-                className={disabled ? classes.lineTypeButtonDisabled : classes.lineTypeButton}
-              >
-                Solid
-              </Button>
-            )}
-            {gssLineData.lineA.lineType === 'Dashed' ? (
-              <Button
-                size={'small'}
-                variant={'contained'}
-                color={'primary'}
-                onClick={() => this.lineTypeChange('A', 'Dashed')}
-                className={disabled ? classes.lineTypeButtonDisabled : classes.lineTypeButton}
-              >
-                Dashed
-              </Button>
-            ) : (
-              <Button
-                size={'small'}
-                variant={'contained'}
-                disabled={!!disabled}
-                onClick={() => this.lineTypeChange('A', 'Dashed')}
-                className={disabled ? classes.lineTypeButtonDisabled : classes.lineTypeButton}
-              >
-                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'}
-              />
-              <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.lineTypeButtonDisabled : classes.lineTypeButton}
-                >
-                  Solid
-                </Button>
-              ) : (
-                <Button
-                  size={'small'}
-                  variant={'contained'}
-                  disabled={!!disabled}
-                  onClick={() => this.lineTypeChange('B', 'Solid')}
-                  className={disabled ? classes.lineTypeButtonDisabled : classes.lineTypeButton}
-                >
-                  Solid
-                </Button>
-              )}
-              {gssLineData.lineB.lineType === 'Dashed' ? (
-                <Button
-                  size={'small'}
-                  variant={'contained'}
-                  color={'primary'}
-                  onClick={() => this.lineTypeChange('B', 'Dashed')}
-                  className={disabled ? classes.lineTypeButtonDisabled : classes.lineTypeButton}
-                >
-                  Dashed
-                </Button>
-              ) : (
-                <Button
-                  size={'small'}
-                  variant={'contained'}
-                  disabled={!!disabled}
-                  onClick={() => this.lineTypeChange('B', 'Dashed')}
-                  className={disabled ? classes.lineTypeButtonDisabled : classes.lineTypeButton}
-                >
-                  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'}
-            />
-            <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',
-  },
-  lineTypeButton: {
-    textTransform: 'none',
-    border: '1.5px solid #3f51b5',
-    borderRadius: '0',
-  },
-  lineTypeButtonDisabled: {
-    textTransform: 'none',
-    border: '1.5px solid #3f51b5',
-    cursor: 'default',
-    pointerEvents: 'none',
-    borderRadius: '0',
-  },
-});
-
-export default withStyles(styles)(ToolMenu);

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/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/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/line/component.jsx

@@ -1,77 +0,0 @@
-import { lineToolComponent, lineBase, styles } from '../shared/line';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { trig, types } from '../../../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/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/line/index.js

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

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/polygon/component.jsx

@@ -1,336 +0,0 @@
-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 '../../../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}
-      />
-    );
-  }
-}

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/polygon/index.js

@@ -1,52 +0,0 @@
-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 };
-    }
-  },
-});