@pie-element/rubric 3.6.1 → 3.6.2

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

@@ -1,86 +0,0 @@
-import { connect } from 'react-redux';
-import React from 'react';
-import { Provider } from 'react-redux';
-import { applyMiddleware, createStore } from 'redux';
-import reducer from './reducer';
-import { changeMarks } from './actions';
-import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
-import { ActionCreators } from 'redux-undo';
-import GraphWithControls from '../graph-with-controls';
-import { lastActionMiddleware, getLastAction } from './middleware';
-
-const mapStateToProps = (s) => ({
-  marks: s.marks.present,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  onChangeMarks: (m) => dispatch(changeMarks(m)),
-  onUndo: () => dispatch(ActionCreators.undo()),
-  onRedo: () => dispatch(ActionCreators.redo()),
-  onReset: () => dispatch(changeMarks([])),
-});
-
-export const GraphContainer = connect(mapStateToProps, mapDispatchToProps)(GraphWithControls);
-
-/**
- * The graph component entry point with undo/redo
- * Redux is an implementation detail, hide it in the react component.
- */
-class Root extends React.Component {
-  static propTypes = {
-    onChangeMarks: PropTypes.func,
-    marks: PropTypes.array,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const r = reducer();
-    this.store = createStore(r, { marks: props.marks }, applyMiddleware(lastActionMiddleware));
-
-    this.store.subscribe(this.onStoreChange);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { marks } = this.props;
-    const storeState = this.store.getState();
-
-    if (isEqual(storeState.marks.present, marks)) {
-      return;
-    }
-
-    if (!isEqual(prevProps.marks, marks)) {
-      this.store.dispatch(changeMarks(marks));
-    }
-  }
-
-  onStoreChange = () => {
-    const { marks, onChangeMarks } = this.props;
-    const storeState = this.store.getState();
-    const lastAction = getLastAction();
-    const isUndoOperation = lastAction.type.includes('UNDO') || lastAction.type.includes('REDO');
-
-    if (!isEqual(storeState.marks.present, marks)) {
-      onChangeMarks(storeState.marks.present, isUndoOperation);
-    }
-  };
-
-  render() {
-    // eslint-disable-next-line no-unused-vars
-    const { onChangeMarks, marks, ...rest } = this.props;
-    const correctnessSet = marks && marks.find((m) => m.correctness);
-
-    if (correctnessSet) {
-      return <GraphWithControls {...rest} marks={marks} disabled={correctnessSet} />;
-    }
-
-    return (
-      <Provider store={this.store}>
-        <GraphContainer {...rest} />
-      </Provider>
-    );
-  }
-}
-
-export default Root;

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/container/marks.js

@@ -1,14 +0,0 @@
-const marks = (state = [], action) => {
-  switch (action.type) {
-    case 'CHANGE_MARKS':
-      if (Array.isArray(action.marks)) {
-        return action.marks;
-      } else {
-        throw new Error('marks must be an array');
-      }
-    default:
-      return state;
-  }
-};
-
-export default marks;

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/container/middleware.js

@@ -1,7 +0,0 @@
-let lastAction = null;
-export const getLastAction = () => lastAction;
-
-export const lastActionMiddleware = () => (next) => (action) => {
-  lastAction = action;
-  return next(action);
-};

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/container/reducer.js

@@ -1,5 +0,0 @@
-import { combineReducers } from 'redux';
-import marks from './marks';
-import undoable from 'redux-undo';
-
-export default () => combineReducers({ marks: undoable(marks, { debug: false }) });

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

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '../plot';
-import { color } from '../render-ui';
-import { withStyles } from '@material-ui/core/styles';
-import InputBase from '@material-ui/core/InputBase';
-import { roundNumber } from './utils';
-
-const styles = (theme) => ({
-  input: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize,
-    borderRadius: '8px',
-    background: theme.palette.common.white,
-    color: color.defaults.BLACK,
-  },
-  inputLabel: {
-    padding: 0,
-  },
-});
-
-export const getLabelPosition = (graphProps, x, y, labelLength) => {
-  const { scale, domain, range } = graphProps;
-  // treat corner cases for maximum and minimum
-  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
-  const leftShift = 10;
-  const rightEdge = scale.x(x) + labelLength + leftShift;
-
-  if (rightEdge >= scale.x(domain.max)) {
-    return {
-      left: scale.x(x) - leftShift - labelLength,
-      top: scale.y(y) - topShift,
-    };
-  }
-
-  return {
-    left: scale.x(x) + leftShift,
-    top: scale.y(y) - topShift,
-  };
-};
-
-export const CoordinatesLabel = ({ x, y, graphProps, classes }) => {
-  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;
-  const labelLength = (label.length || 0) * 6;
-  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);
-
-  const style = {
-    position: 'absolute',
-    pointerEvents: 'auto',
-    width: labelLength,
-    padding: 0,
-    ...labelPosition,
-  };
-
-  return (
-    <InputBase
-      style={style}
-      classes={{ input: classes.inputLabel }}
-      className={classes.input}
-      value={label}
-      inputProps={{ ariaLabel: 'naked' }}
-    />
-  );
-};
-
-CoordinatesLabel.propTypes = {
-  graphProps: types.GraphPropsType,
-  classes: PropTypes.object,
-  x: PropTypes.number,
-  y: PropTypes.number,
-};
-
-export default withStyles(styles)(CoordinatesLabel);

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/graph-with-controls.jsx

@@ -1,259 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import uniq from 'lodash/uniq';
-import isString from 'lodash/isString';
-import { color } from '../render-ui';
-import ToolMenu from './tool-menu';
-import Graph, { graphPropTypes } from './graph';
-import UndoRedo from './undo-redo';
-import { allTools, toolsArr } from './tools';
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-
-export const setToolbarAvailability = (toolbarTools) =>
-  toolsArr.map((tA) => ({ ...tA, toolbar: !!toolbarTools.find((t) => t === tA.type) })) || [];
-
-export const toolIsAvailable = (tools, currentTool) =>
-  currentTool && tools && (tools.find((tool) => tool.type === currentTool.type) || {}).toolbar;
-
-export const getAvailableTool = (tools) => tools.find((tool) => tool.toolbar);
-
-export const filterByValidToolTypes = (backgroundMarks) =>
-  backgroundMarks.filter((bM) => !!allTools.find((tool) => tool === bM.type));
-
-export const filterByVisibleToolTypes = (toolbarTools, marks) =>
-  marks.filter((bM) => !!toolbarTools.find((tool) => tool === bM.type));
-
-const getDefaultCurrentTool = (toolType) => toolsArr.find((tool) => tool.type === toolType) || null;
-
-const Collapsible = ({ classes, children, title }) => (
-  <ExpansionPanel elevation={0} className={classes.expansionPanel} disabledGutters={true} square={true}>
-    <ExpansionPanelSummary
-      classes={{
-        root: classes.summaryRoot,
-        content: classes.summaryContent,
-      }}
-      expandIcon={<ExpandMoreIcon />}
-    >
-      <Typography variant="subheading">{title}</Typography>
-    </ExpansionPanelSummary>
-    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>
-  </ExpansionPanel>
-);
-
-Collapsible.propTypes = {
-  classes: PropTypes.object,
-  children: PropTypes.array,
-  title: PropTypes.string,
-};
-
-export class GraphWithControls extends React.Component {
-  static propTypes = {
-    ...graphPropTypes,
-    onUndo: PropTypes.func,
-    onRedo: PropTypes.func,
-    onReset: PropTypes.func,
-    toolbarTools: PropTypes.arrayOf(PropTypes.string), // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'
-    language: PropTypes.string,
-  };
-
-  static defaultProps = {
-    collapsibleToolbar: false,
-    collapsibleToolbarTitle: '',
-    disabledLabels: false,
-    disabledTitle: false,
-    showLabels: true,
-    showTitle: true,
-    toolbarTools: [],
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      currentTool: getDefaultCurrentTool(props.defaultTool),
-      labelModeEnabled: false,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const { defaultTool } = this.props;
-
-    if (prevProps.defaultTool !== defaultTool) {
-      const currentTool = getDefaultCurrentTool(defaultTool);
-
-      this.setState({ currentTool });
-    }
-  }
-
-  changeCurrentTool = (tool, tools) => this.setState({ currentTool: tools.find((t) => t.type === tool) });
-
-  toggleLabelMode = () => this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
-
-  render() {
-    let { currentTool, labelModeEnabled } = this.state;
-    const {
-      axesSettings,
-      classes,
-      className,
-      coordinatesOnHover,
-      collapsibleToolbar,
-      collapsibleToolbarTitle,
-      disabled,
-      disabledLabels,
-      disabledTitle,
-      domain,
-      labels,
-      labelsPlaceholders,
-      onChangeLabels,
-      onChangeMarks,
-      onChangeTitle,
-      onUndo,
-      onRedo,
-      range,
-      size,
-      showLabels,
-      showPixelGuides,
-      showTitle,
-      title,
-      titlePlaceholder,
-      language,
-      disableToolbar = false,
-      gssLineData,
-      onChangeGssLineData,
-      onSolutionSetSelected,
-      onCustomReset,
-    } = this.props;
-    let { backgroundMarks, marks, toolbarTools } = this.props;
-
-    // make sure only valid tool types are kept (string) and without duplicates
-    toolbarTools = uniq(toolbarTools || []).filter((tT) => !!isString(tT)) || [];
-
-    // keep only the backgroundMarks that have valid types
-    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
-
-    // keep only the marks that have types which appear in toolbar
-    marks = filterByVisibleToolTypes(toolbarTools, marks || []);
-
-    if (gssLineData && gssLineData.lineA && marks[0] && marks[0].type === 'line')
-      marks[0].fill = gssLineData.lineA.lineType;
-    if (gssLineData && gssLineData.lineB && marks[1] && marks[1].type === 'line')
-      marks[1].fill = gssLineData.lineB.lineType;
-
-    const tools = setToolbarAvailability(toolbarTools);
-
-    // set current tool if there's no current tool or if the existing one is no longer available
-    if (!currentTool || !toolIsAvailable(tools, currentTool)) {
-      currentTool = getAvailableTool(tools);
-    }
-
-    const gssActions = gssLineData && (
-      <React.Fragment>
-        <ToolMenu
-          numberOfLines={gssLineData.numberOfLines}
-          gssLineData={gssLineData}
-          onChange={onChangeGssLineData}
-          disabled={!!disabled}
-          language={language}
-        />
-        {!disabled && (
-          <UndoRedo
-            className={classes.undoRedoOuterDiv}
-            onUndo={onUndo}
-            onRedo={onRedo}
-            onReset={onCustomReset}
-            language={language}
-          />
-        )}
-      </React.Fragment>
-    );
-
-    return (
-      <div className={classNames(classes.graphWithControls, className)}>
-        {!disableToolbar && (
-          <div className={classes.controls}>
-            {collapsibleToolbar ? (
-              <Collapsible classes={classes} title={collapsibleToolbarTitle}>
-                {gssActions}
-              </Collapsible>
-            ) : (
-              gssActions
-            )}
-          </div>
-        )}
-
-        <div ref={(r) => (this.labelNode = r)} />
-
-        <Graph
-          axesSettings={axesSettings}
-          backgroundMarks={backgroundMarks}
-          coordinatesOnHover={coordinatesOnHover}
-          currentTool={currentTool}
-          disabledLabels={disabledLabels}
-          disabledTitle={disabledTitle}
-          domain={domain}
-          labels={labels}
-          labelModeEnabled={labelModeEnabled}
-          labelsPlaceholders={labelsPlaceholders}
-          marks={marks}
-          onChangeMarks={!disabled ? onChangeMarks : undefined}
-          onChangeLabels={onChangeLabels}
-          onChangeTitle={onChangeTitle}
-          range={range}
-          size={size}
-          showLabels={showLabels}
-          showPixelGuides={showPixelGuides}
-          showTitle={showTitle}
-          title={title}
-          titlePlaceholder={titlePlaceholder}
-          tools={tools}
-          gssLineData={gssLineData}
-          onSolutionSetSelected={onSolutionSetSelected}
-        />
-      </div>
-    );
-  }
-}
-
-const styles = (theme) => ({
-  graphWithControls: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: 'min-content',
-  },
-  controls: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing.unit,
-    color: color.text(),
-    backgroundColor: color.primaryLight(),
-    '& button': {
-      fontSize: theme.typography.fontSize,
-    },
-  },
-  expansionPanel: {
-    backgroundColor: color.primaryLight(),
-    width: '100%',
-  },
-  summaryRoot: {
-    padding: `0 ${theme.spacing.unit}px`,
-    minHeight: '32px !important',
-  },
-  summaryContent: {
-    margin: '4px 0 !important',
-  },
-  details: {
-    padding: 0,
-    marginTop: theme.spacing.unit,
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  undoRedoOuterDiv: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-});
-
-export default withStyles(styles)(GraphWithControls);