@pie-element/complex-rubric 2.0.2-next.15 → 2.0.2-next.17

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/math-toolbar/index.jsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import EditorAndPad from './editor-and-pad';
+import { DoneButton } from './done-button';
+import { withStyles } from '@material-ui/core/styles';
+import MathPreview from './math-preview';
+
+export { MathPreview };
+
+export class MathToolbar extends React.Component {
+  static propTypes = {
+    autoFocus: PropTypes.bool,
+    allowAnswerBlock: PropTypes.bool,
+    controlledKeypad: PropTypes.bool,
+    controlledKeypadMode: PropTypes.bool,
+    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    classNames: PropTypes.object,
+    error: PropTypes.string,
+    maxResponseAreas: PropTypes.number,
+    showKeypad: PropTypes.bool,
+    noDecimal: PropTypes.bool,
+    additionalKeys: PropTypes.array,
+    latex: PropTypes.string.isRequired,
+    onAnswerBlockAdd: PropTypes.func,
+    onChange: PropTypes.func,
+    onDone: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    hideDoneButton: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    classNames: {},
+    keypadMode: 'item-authoring',
+    autoFocus: false,
+    allowAnswerBlock: false,
+    controlledKeypad: false,
+    controlledKeypadMode: false,
+    noDecimal: false,
+    showKeypad: true,
+    additionalKeys: [],
+    onChange: () => {},
+    onAnswerBlockAdd: () => {},
+    onFocus: () => {},
+    hideDoneButton: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      latex: props.latex,
+    };
+  }
+
+  done = () => {
+    this.props.onDone(this.state.latex);
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ latex: nextProps.latex });
+  }
+
+  onChange = (latex) => {
+    this.setState({ latex });
+    this.props.onChange(latex);
+  };
+
+  render() {
+    const { latex } = this.state;
+    const {
+      classNames,
+      autoFocus,
+      allowAnswerBlock,
+      onAnswerBlockAdd,
+      controlledKeypad,
+      controlledKeypadMode,
+      keypadMode,
+      noDecimal,
+      additionalKeys,
+      showKeypad,
+      onFocus,
+      onBlur,
+      hideDoneButton,
+      error,
+      maxResponseAreas,
+    } = this.props;
+
+    return (
+      <PureToolbar
+        autoFocus={autoFocus}
+        classNames={classNames}
+        onAnswerBlockAdd={onAnswerBlockAdd}
+        allowAnswerBlock={allowAnswerBlock}
+        latex={latex}
+        additionalKeys={additionalKeys}
+        noDecimal={noDecimal}
+        keypadMode={keypadMode}
+        onChange={this.onChange}
+        onDone={this.done}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        showKeypad={showKeypad}
+        controlledKeypad={controlledKeypad}
+        controlledKeypadMode={controlledKeypadMode}
+        hideDoneButton={hideDoneButton}
+        error={error}
+        maxResponseAreas={maxResponseAreas}
+      />
+    );
+  }
+}
+
+export class RawPureToolbar extends React.Component {
+  static propTypes = {
+    classNames: PropTypes.object,
+    latex: PropTypes.string,
+    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideInput: PropTypes.bool,
+    noLatexHandling: PropTypes.bool,
+    layoutForKeyPad: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    onDone: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onAnswerBlockAdd: PropTypes.func,
+    additionalKeys: PropTypes.array,
+    onFocus: PropTypes.func,
+    classes: PropTypes.object.isRequired,
+    autoFocus: PropTypes.bool,
+    noDecimal: PropTypes.bool,
+    allowAnswerBlock: PropTypes.bool,
+    controlledKeypad: PropTypes.bool,
+    controlledKeypadMode: PropTypes.bool,
+    showKeypad: PropTypes.bool,
+    hideDoneButton: PropTypes.bool,
+    hideDoneButtonBackground: PropTypes.bool,
+    error: PropTypes.any,
+    maxResponseAreas: PropTypes.number,
+  };
+
+  static defaultProps = {
+    classNames: {},
+    hideDoneButtonBackground: false,
+  };
+
+  render() {
+    const {
+      classNames,
+      autoFocus,
+      allowAnswerBlock,
+      onAnswerBlockAdd,
+      controlledKeypad,
+      controlledKeypadMode,
+      additionalKeys,
+      showKeypad,
+      keypadMode,
+      noDecimal,
+      hideInput,
+      noLatexHandling,
+      layoutForKeyPad,
+      latex,
+      onChange,
+      onDone,
+      onFocus,
+      onBlur,
+      hideDoneButton,
+      hideDoneButtonBackground,
+      classes,
+      error,
+      maxResponseAreas,
+    } = this.props;
+
+    return (
+      <div className={cx(classes.pureToolbar, (classNames || {}).toolbar)} contentEditable={false}>
+        <div />
+        <EditorAndPad
+          autoFocus={autoFocus}
+          keypadMode={keypadMode}
+          classNames={classNames || {}}
+          controlledKeypad={controlledKeypad}
+          controlledKeypadMode={controlledKeypadMode}
+          noDecimal={noDecimal}
+          hideInput={hideInput}
+          noLatexHandling={noLatexHandling}
+          layoutForKeyPad={layoutForKeyPad}
+          showKeypad={showKeypad}
+          additionalKeys={additionalKeys}
+          allowAnswerBlock={allowAnswerBlock}
+          onAnswerBlockAdd={onAnswerBlockAdd}
+          latex={latex}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          error={error}
+          maxResponseAreas={maxResponseAreas}
+        />
+        {(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
+          <DoneButton hideBackground={hideDoneButtonBackground} onClick={onDone} />
+        )}
+      </div>
+    );
+  }
+}
+const styles = () => ({
+  pureToolbar: {
+    display: 'flex',
+    width: '100%',
+    zIndex: 8,
+    alignItems: 'center',
+  },
+});
+
+export const PureToolbar = withStyles(styles)(RawPureToolbar);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/math-toolbar/math-preview.jsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import classNames from 'classnames';
+import get from 'lodash/get';
+import debug from 'debug';
+import { makeStyles } from '@material-ui/styles';
+import PropTypes from 'prop-types';
+import { mq } from '../math-input';
+
+const log = debug('@pie-lib:math-toolbar:math-preview');
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    position: 'relative',
+    '& *': {
+      fontFamily: 'MJXZERO, MJXTEX !important',
+      '-webkit-font-smoothing': 'antialiased !important',
+    },
+    '& > .mq-math-mode > span > var': {
+      fontFamily: 'MJXZERO, MJXTEX-I !important',
+    },
+    '& > .mq-math-mode span var': {
+      fontFamily: 'MJXZERO, MJXTEX-I !important',
+    },
+    '& > .mq-math-mode .mq-nonSymbola': {
+      fontFamily: 'MJXZERO, MJXTEX-I !important',
+    },
+    '& > .mq-math-mode > span > var.mq-operator-name': {
+      fontFamily: 'MJXZERO, MJXTEX !important',
+    },
+    '& > .mq-math-mode': {
+      border: 'solid 1px lightgrey',
+    },
+    '& > .mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: 'solid 1px black',
+      borderRadius: '0px',
+    },
+    '& > .mq-math-mode .mq-root-block': {
+      paddingTop: '7px !important',
+    },
+    '& > .mq-math-mode .mq-overarc ': {
+      paddingTop: '0.45em !important',
+    },
+    '& > .mq-math-mode .mq-sqrt-prefix': {
+      verticalAlign: 'baseline !important',
+      top: '1px !important',
+      left: '-0.1em !important',
+    },
+    '& > .mq-math-mode .mq-denominator': {
+      marginTop: '-5px !important',
+      padding: '0.5em 0.1em 0.1em !important',
+    },
+    '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
+      padding: '0 0.1em !important',
+      paddingBottom: '0 !important',
+      marginBottom: '-2px',
+    },
+    '& > .mq-math-mode sup.mq-nthroot': {
+      fontSize: '70.7% !important',
+      verticalAlign: '0.5em !important',
+      paddingRight: '0.15em',
+    },
+    '& > .mq-longdiv-inner': {
+      marginTop: '-1px',
+      marginLeft: '5px !important;',
+
+      '& > .mq-empty': {
+        padding: '0 !important',
+        marginLeft: '0px !important',
+        marginTop: '2px',
+      },
+    },
+    '& > .mq-math-mode .mq-longdiv': {
+      display: 'inline-flex !important',
+    },
+    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
+      paddingTop: '6px !important',
+      paddingLeft: '4px !important',
+    },
+    '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
+      marginLeft: '0 !important',
+    },
+    '& > .mq-math-mode .mq-supsub': {
+      fontSize: '70.7% !important',
+    },
+    '& > .mq-math-mode .mq-overarrow': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+    '& > .mq-math-mode .mq-paren': {
+      verticalAlign: 'top !important',
+      padding: '1px 0.1em !important',
+    },
+
+    '& > .mq-math-mode .mq-sqrt-stem': {
+      borderTop: '0.07em solid',
+      marginLeft: '-1.5px',
+      marginTop: '-2px !important',
+      paddingTop: '5px !important',
+    },
+    '& > .mq-supsub ': {
+      fontSize: '70.7%',
+    },
+
+    '& > .mq-math-mode .mq-supsub.mq-sup-only': {
+      verticalAlign: '-0.1em !important',
+
+      '& .mq-sup': {
+        marginBottom: '0px !important',
+      },
+    },
+    '& .mq-overarrow-inner': {
+      paddingTop: '0 !important',
+      border: 'none !important',
+    },
+    '& .mq-editable-field .mq-cursor': {
+      marginTop: '-15px !important',
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      top: '7.5px',
+      marginTop: '0px',
+      minWidth: '1.23em',
+      '& *': {
+        lineHeight: '1 !important',
+      },
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px',
+      },
+      '&:after': {
+        top: '0px !important',
+        position: 'absolute',
+        right: '-2px',
+      },
+      '&.mq-empty:after': {
+        top: '-0.45em',
+      },
+    },
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px',
+      },
+    },
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important',
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important',
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important',
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85,
+    },
+  },
+  selected: {
+    border: `solid 1px ${get(theme, 'palette.primary.main')}`,
+    '& > .mq-math-mode': {
+      border: 'solid 0px lightgrey',
+    },
+  },
+  insideOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  },
+}));
+
+export const RawMathPreview = React.forwardRef((props, ref) => {
+  log('[render] data: ', props.node.data);
+  const latex = props.node.data.latex;
+  const { isSelected, onFocus, onBlur, attributes, children } = props;
+  const classes = useStyles(props);
+
+  return (
+    <div
+      className={classNames(classes.root, isSelected && classes.selected)}
+      {...attributes}
+      contentEditable={false}
+      ref={ref}
+    >
+      {children} <span className={classes.insideOverlay} />
+      <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
+    </div>
+  );
+});
+
+RawMathPreview.propTypes = {
+  element: PropTypes.object,
+  latex: PropTypes.string,
+  node: PropTypes.object,
+  classes: PropTypes.object,
+  isSelected: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
+export default RawMathPreview;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/draggable.jsx

@@ -0,0 +1,11 @@
+import Draggable, { DraggableCore } from 'react-draggable';
+
+export default class LocalDraggable extends Draggable {
+  componentWillReceiveProps(next) {
+    super.componentWillReceiveProps(next);
+    //Remove the x/y state as these values have now been updated and will come through as props.
+    this.setState({ x: 0, y: 0 });
+  }
+}
+
+export { DraggableCore };

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/graph-props.js

@@ -0,0 +1,38 @@
+import invariant from 'invariant';
+import { snapTo } from './utils';
+import { scaleLinear } from 'd3-scale';
+
+const createSnapMinAndMax = ({ min, max, step }) => {
+  // for graphing, if step is a value with decimals, we have to calculate the min & max for the grid taking in consideration that 0 has to be exactly in the middle
+  // for example, if min: -5 & max: 5 & step: 0.75, in order to keep 0 in the middle we have to set min: -4.5 & max: 4.5
+
+  return {
+    step,
+    min: parseInt(min / step) * step,
+    max: parseInt(max / step) * step,
+  };
+};
+
+export const create = (domain, range, size, getRootNode) => {
+  invariant(domain.min < domain.max, 'domain: min must be less than max');
+  invariant(range.min < range.max, 'range: min must be less than max');
+
+  const domainMinMax = createSnapMinAndMax(domain);
+  const rangeMinMax = createSnapMinAndMax(range);
+
+  const scale = {
+    x: scaleLinear()
+      .domain([domain.min, domain.max])
+      .range([0, size.width]),
+    y: scaleLinear()
+      .domain([range.max, range.min])
+      .range([0, size.height]),
+  };
+
+  const snap = {
+    x: snapTo.bind(null, domainMinMax.min, domainMinMax.max, domainMinMax.step),
+    y: snapTo.bind(null, rangeMinMax.min, rangeMinMax.max, rangeMinMax.step),
+  };
+
+  return { scale, snap, domain, range, size, getRootNode };
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/grid-draggable.jsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GraphPropsType } from './types';
+import { DraggableCore } from './draggable';
+import debug from 'debug';
+import * as utils from './utils';
+import isFunction from 'lodash/isFunction';
+import invariant from 'invariant';
+import { clientPoint } from 'd3-selection';
+
+const log = debug('pie-lib:plot:grid-draggable');
+
+export const deltaFn = (scale, snap, val) => (delta) => {
+  const normalized = delta + scale(0);
+  const inverted = scale.invert(normalized);
+
+  const fixDecimalsArithmetic = (snap(val + inverted).toFixed(4) * 1000) / 1000;
+
+  return fixDecimalsArithmetic;
+};
+
+/**
+ * Creates a Component that is draggable, within a bounded grid.
+ * @param {*} opts
+ */
+export const gridDraggable = (opts) => (Comp) => {
+  invariant(
+    !!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint),
+    'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }',
+  );
+  return class GridDraggable extends React.Component {
+    static propTypes = {
+      disabled: PropTypes.bool,
+      onDragStart: PropTypes.func,
+      onDrag: PropTypes.func,
+      onDragStop: PropTypes.func,
+      onClick: PropTypes.func,
+      onMove: PropTypes.func,
+      graphProps: GraphPropsType.isRequired,
+    };
+    grid = () => {
+      const { graphProps } = this.props;
+      const { scale, domain, range } = graphProps;
+      return {
+        x: scale.x(domain.step) - scale.x(0),
+        y: scale.y(range.step) - scale.y(0),
+      };
+    };
+    onStart = (e) => {
+      const { onDragStart } = this.props;
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+      this.setState({ startX: e.clientX, startY: e.clientY });
+      if (onDragStart) {
+        onDragStart();
+      }
+    };
+    position = () => {
+      const { x, y } = opts.anchorPoint(this.props);
+      const { graphProps } = this.props;
+      const { scale, snap } = graphProps;
+
+      return {
+        anchorPoint: {
+          x,
+          y,
+        },
+        x: deltaFn(scale.x, snap.x, x),
+        y: deltaFn(scale.y, snap.y, y),
+      };
+    };
+
+    tiny = (key, event) => {
+      const K = key.toUpperCase();
+      const end = event[`client${K}`];
+      const start = this.state[`start${K}`];
+      const delta = Math.abs(end - start);
+      const out = delta < Math.abs(this.grid()[key]) / 10;
+      log('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);
+      return out;
+    };
+
+    getScaledBounds = () => {
+      const bounds = opts.bounds(this.props, this.props.graphProps);
+      log('bounds: ', bounds);
+      const grid = this.grid();
+
+      const scaled = {
+        left: (bounds.left / grid.interval) * grid.x,
+        right: (bounds.right / grid.interval) * grid.x,
+        top: (bounds.top / grid.interval) * grid.y,
+        bottom: (bounds.bottom / grid.interval) * grid.y,
+      };
+      log('[getScaledBounds]: ', scaled);
+      return scaled;
+    };
+
+    skipDragOutsideOfBounds = (dd, e, graphProps) => {
+      // ignore drag movement outside of the domain and range.
+      const rootNode = graphProps.getRootNode();
+      const [rawX, rawY] = clientPoint(rootNode, e);
+      const { scale, domain, range } = graphProps;
+      let x = scale.x.invert(rawX);
+      let y = scale.y.invert(rawY);
+
+      const xOutside = (dd.deltaX > 0 && x < domain.min) || (dd.deltaX < 0 && x > domain.max);
+      const yOutside = (dd.deltaY > 0 && y > range.max) || (dd.deltaY < 0 && y < range.min);
+      return xOutside || yOutside;
+    };
+
+    onDrag = (e, dd) => {
+      const { onDrag, graphProps } = this.props;
+
+      if (!onDrag) {
+        return;
+      }
+
+      const bounds = this.getScaledBounds();
+
+      if (dd.deltaX < 0 && dd.deltaX < bounds.left) {
+        return;
+      }
+
+      if (dd.deltaX > 0 && dd.deltaX > bounds.right) {
+        return;
+      }
+
+      if (dd.deltaY < 0 && dd.deltaY < bounds.top) {
+        return;
+      }
+
+      if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {
+        return;
+      }
+
+      if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {
+        return;
+      }
+
+      const dragArg = this.applyDelta({ x: dd.deltaX, y: dd.deltaY });
+
+      if (dragArg !== undefined || dragArg !== null) {
+        onDrag(dragArg);
+      }
+    };
+
+    getDelta = (point) => {
+      const pos = this.position();
+
+      const p = {
+        x: pos.x(point.x),
+        y: pos.y(point.y),
+      };
+
+      return utils.getDelta(pos.anchorPoint, p);
+    };
+
+    applyDelta = (point) => {
+      const delta = this.getDelta(point);
+      log('[applyDelta] delta:', delta);
+      return opts.fromDelta(this.props, delta);
+    };
+
+    onStop = (e, dd) => {
+      log('[onStop] dd:', dd);
+      const { onDragStop, onClick } = this.props;
+
+      if (onDragStop) {
+        onDragStop();
+      }
+
+      log('[onStop] lastX/Y: ', dd.lastX, dd.lastY);
+      const isClick = this.tiny('x', e) && this.tiny('y', e);
+
+      if (isClick) {
+        if (onClick) {
+          log('call onClick');
+          this.setState({ startX: null });
+          const { graphProps } = this.props;
+          const { scale, snap } = graphProps;
+          const [rawX, rawY] = clientPoint(e.target, e);
+          let x = scale.x.invert(rawX);
+          let y = scale.y.invert(rawY);
+          x = snap.x(x);
+          y = snap.y(y);
+          onClick({ x, y });
+          return false;
+        }
+      }
+
+      this.setState({ startX: null, startY: null });
+      // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.
+      return false;
+    };
+
+    render() {
+      /* eslint-disable no-unused-vars */
+      //Note: we pull onClick out so that it's not in ...rest.
+      const { disabled, onClick, ...rest } = this.props;
+      /* eslint-enable no-unused-vars */
+
+      const grid = this.grid();
+      //prevent the text select icon from rendering.
+      const onMouseDown = (e) => e.nativeEvent.preventDefault();
+
+      /**
+       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.
+       * But they aren't being unset. If we continue with this lib, we'll have to fix this.
+       */
+      const isDragging = this.state ? !!this.state.startX : false;
+
+      return (
+        <DraggableCore
+          disabled={disabled}
+          onMouseDown={onMouseDown}
+          onStart={this.onStart}
+          onDrag={this.onDrag}
+          onStop={this.onStop}
+          axis={opts.axis || 'both'}
+          grid={[grid.x, grid.y]}
+        >
+          <Comp {...rest} disabled={disabled} isDragging={isDragging} />
+        </DraggableCore>
+      );
+    }
+  };
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/index.js

@@ -0,0 +1,9 @@
+import Root from './root';
+import Draggable from './draggable';
+import { gridDraggable } from './grid-draggable';
+import * as utils from './utils';
+import * as trig from './trig';
+import * as types from './types';
+import { create as createGraphProps } from './graph-props';
+
+export { Root, Draggable, gridDraggable, utils, trig, types, createGraphProps };