@pie-element/complex-rubric 2.6.5 → 2.6.6

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

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

@@ -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/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/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 '../../../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

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

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

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