@pie-element/complex-rubric 2.1.2-next.69 → 2.1.2-next.72

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/point/arrow-point.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { types } from '../../../../plot';
-import isEqual from 'lodash/isEqual';
-import { getAngleDeg, arrowDimensions } from '../../../utils';
-
-export class RawArrow extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    correctness: PropTypes.string,
-    disabled: PropTypes.bool,
-    x: PropTypes.number,
-    y: PropTypes.number,
-    from: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
-    }).isRequired,
-    to: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
-    }),
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  static defaultProps = {
-    from: {},
-    to: {},
-  };
-
-  render() {
-    const { classes, className, x, y, disabled, correctness, graphProps, from, to, ...rest } = this.props;
-    // x & y are the initial coordinates for the arrow
-    // from & to are used only to calculate the angle that the arrow should be rotated with
-
-    const { scale } = graphProps;
-    const angle = getAngleDeg(from.x, from.y, to.x, to.y);
-
-    let points = '';
-
-    if (isEqual(from, to)) {
-      points = '0,0 0,0 0,0';
-    } else {
-      points = `0,0 ${arrowDimensions.vector},${arrowDimensions.vector * 2} 
-      -${arrowDimensions.vector},${arrowDimensions.vector * 2}`;
-    }
-
-    return (
-      <g className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)} {...rest}>
-        <polygon
-          points={points}
-          transform={`
-          translate(${scale.x(x)}, ${scale.y(y)})
-          rotate(${angle} 0 0)`}
-        />
-      </g>
-    );
-  }
-}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/point/arrow.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { types } from '../../../../plot';
-import { ArrowHead } from '../arrow-head';
-import { thinnerShapesNeeded } from '../../../utils';
-
-export default class Arrow extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    correctness: PropTypes.string,
-    disabled: PropTypes.bool,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    angle: PropTypes.number.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  render() {
-    const { classes, angle, className, x, y, disabled, correctness, graphProps, ...rest } = this.props;
-
-    const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
-    const { scale } = graphProps;
-
-    const scaledX = scale.x(x);
-    const scaledY = scale.y(y);
-
-    const transform = `rotate(${-angle}, ${scaledX},${scaledY})`;
-    const points = `${scaledX},${scaledY}
-        ${scaledX - size},${scaledY - size / 2}
-        ${scaledX - size}, ${scaledY + size / 2}`;
-
-    return (
-      <g className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)} {...rest}>
-        <ArrowHead size={size} transform={transform} points={points} />
-      </g>
-    );
-  }
-}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/point/base-point.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { types } from '../../../../plot';
-import CoordinatesLabel from '../../../coordinates-label';
-import ReactDOM from 'react-dom';
-import { thinnerShapesNeeded } from '../../../utils';
-
-export class RawBp extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    coordinatesOnHover: PropTypes.bool,
-    correctness: PropTypes.string,
-    disabled: PropTypes.bool,
-    labelNode: PropTypes.object,
-    x: PropTypes.number,
-    y: PropTypes.number,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = { showCoordinates: false };
-  }
-
-  render() {
-    const {
-      classes,
-      className,
-      coordinatesOnHover,
-      x,
-      y,
-      disabled,
-      correctness,
-      graphProps,
-      labelNode,
-      // we need to remove style from props
-      // eslint-disable-next-line no-unused-vars,react/prop-types
-      style,
-      ...rest
-    } = this.props;
-    const { showCoordinates } = this.state;
-    const { scale } = graphProps;
-    const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
-
-    return (
-      <>
-        <circle
-          style={{ fill: 'transparent', cursor: 'pointer', pointerEvents: 'all' }}
-          r={r * 3}
-          cx={scale.x(x)}
-          cy={scale.y(y)}
-          onMouseEnter={() => this.setState({ showCoordinates: true })}
-          onMouseLeave={() => this.setState({ showCoordinates: false })}
-          {...rest}
-        />
-        <g
-          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
-          onMouseEnter={() => this.setState({ showCoordinates: true })}
-          onMouseLeave={() => this.setState({ showCoordinates: false })}
-          {...rest}
-        >
-          <circle {...rest} r={r} cx={scale.x(x)} cy={scale.y(y)} />
-          {labelNode &&
-            coordinatesOnHover &&
-            showCoordinates &&
-            ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
-        </g>
-      </>
-    );
-  }
-}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/point/index.jsx

@@ -1,60 +0,0 @@
-import { withStyles } from '@material-ui/core/styles/index';
-import { gridDraggable } from '../../../../plot';
-import * as utils from '../../../utils';
-import { disabled, correct, incorrect, missing } from '../styles';
-import { RawBp } from './base-point';
-import { RawArrow } from './arrow-point';
-import { color } from '../../../../render-ui';
-import BaseArrow from './arrow';
-
-const opts = {
-  bounds: (props, { domain, range }) => {
-    const { x, y } = props;
-    const area = { left: x, top: y, bottom: y, right: x };
-
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    const { x, y } = props;
-
-    return { x, y };
-  },
-  fromDelta: (props, delta) => {
-    return utils.point(props).add(utils.point(delta));
-  },
-};
-
-const styles = () => {
-  return {
-    point: {
-      '& circle, & polygon': {
-        cursor: 'pointer',
-        fill: color.defaults.SECONDARY,
-      },
-    },
-    disabled: {
-      '& circle, & polygon': {
-        ...disabled(),
-      },
-    },
-    correct: {
-      '& circle, & polygon': {
-        ...correct(),
-      },
-    },
-    incorrect: {
-      '& circle, & polygon': {
-        ...incorrect(),
-      },
-    },
-    missing: {
-      '& circle, & polygon': {
-        ...missing(),
-      },
-    },
-  };
-};
-
-export const BasePoint = withStyles(styles)(gridDraggable(opts)(RawBp));
-export const ArrowPoint = withStyles(styles)(gridDraggable(opts)(RawArrow));
-export const Arrow = withStyles(styles)(gridDraggable(opts)(BaseArrow));

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/styles.js

@@ -1,20 +0,0 @@
-import { color } from '../../../render-ui';
-
-export const disabled = (key = 'fill') => ({
-  [key]: color.disabled(),
-  pointerEvents: 'none',
-});
-
-export const correct = (key = 'fill') => ({
-  [key]: color.correct(),
-  pointerEvents: 'none',
-});
-export const incorrect = (key = 'fill') => ({
-  [key]: color.incorrect(),
-  pointerEvents: 'none',
-});
-
-export const missing = (key = 'fill') => ({
-  [key]: color.missing(),
-  pointerEvents: 'none',
-});

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/types.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const ToolPropTypeFields = {
-  mark: PropTypes.any,
-  onChange: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragStop: PropTypes.func,
-};
-
-export const ToolPropType = PropTypes.shape(ToolPropTypeFields);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/sine/component.jsx

@@ -1,32 +0,0 @@
-import debug from 'debug';
-import { sinY, buildDataPoints, getAmplitudeAndFreq, FREQ_DIVIDER } from '../../../graphing-utils';
-import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
-
-const log = debug('pie-lib:graphing:sine');
-
-log('sine...');
-
-const Sine = withRootEdge((props) => {
-  const { domain } = props.graphProps;
-
-  const { root, edge } = props;
-  const { amplitude, freq } = getAmplitudeAndFreq(root, edge);
-  const interval = freq / FREQ_DIVIDER;
-  log('[getPoints] amplitude:', amplitude, 'freq:', freq);
-
-  const dataPoints =
-    edge && edge.x === root.x
-      ? []
-      : buildDataPoints(
-          domain.min,
-          domain.max,
-          root,
-          edge,
-          interval,
-          sinY(amplitude, freq, { phase: root.x, vertical: root.y }),
-        );
-  return { root: props.root, edge: props.edge, dataPoints };
-});
-
-const Component = rootEdgeComponent(Sine);
-export default Component;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/sine/index.js

@@ -1,33 +0,0 @@
-import Sine from './component';
-import debug from 'debug';
-import { equalPoints, sameAxes } from '../../utils';
-
-const log = debug('pie-lib:graphing:sine');
-
-export const tool = () => ({
-  type: 'sine',
-  Component: Sine,
-  complete: (data, mark) => {
-    return { ...mark, building: false, closed: true };
-  },
-  addPoint: (point, mark) => {
-    log('add point to sine model: ', point, 'mark: ', mark);
-    if (mark && (equalPoints(mark.root, point) || sameAxes(mark.root, point))) {
-      return mark;
-    }
-
-    if (!mark) {
-      return {
-        type: 'sine',
-        root: point,
-        edge: undefined,
-        closed: false,
-        building: true,
-      };
-    } else if (mark && !mark.root) {
-      throw new Error('no root - should never happen');
-    } else {
-      return { ...mark, edge: point, closed: true, building: false };
-    }
-  },
-});

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/vector/component.jsx

@@ -1,60 +0,0 @@
-import { lineToolComponent, lineBase, styles } from '../shared/line';
-import { Arrow } from '../shared/point';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '../../../plot';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { getDistanceBetweenTwoPoints } from '../../utils';
-
-const lineStyles = (theme) => ({
-  line: styles.line(theme),
-  disabled: styles.disabled(theme),
-  correct: styles.correct(theme, 'stroke'),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  missing: styles.missing(theme, 'stroke'),
-});
-
-export const Line = (props) => {
-  const {
-    className,
-    classes,
-    disabled,
-    correctness,
-    graphProps: { scale },
-    from,
-    to,
-    ...rest
-  } = props;
-  const startPoint = { x: scale.x(from.x), y: scale.y(from.y) };
-  const endPoint = { x: scale.x(to.x), y: scale.y(to.y) };
-  const length = getDistanceBetweenTwoPoints(startPoint, endPoint);
-
-  return (
-    <line
-      className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
-      x1={startPoint.x}
-      y1={startPoint.y}
-      x2={endPoint.x}
-      y2={endPoint.y}
-      strokeDasharray={length - 7}
-      {...rest}
-    />
-  );
-};
-
-Line.propTypes = {
-  className: PropTypes.string,
-  classes: PropTypes.object,
-  disabled: PropTypes.bool,
-  correctness: PropTypes.string,
-  graphProps: PropTypes.any,
-  from: types.PointType,
-  to: types.PointType,
-};
-
-const StyledLine = withStyles(lineStyles)(Line);
-const Vector = lineBase(StyledLine, { to: Arrow });
-const Component = lineToolComponent(Vector);
-
-export default Component;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/vector/index.js

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

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/undo-redo.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core';
-import { color } from '../render-ui';
-import Translator from '../translator';
-
-const { translator } = Translator;
-
-export class UndoRedo extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    onUndo: PropTypes.func.isRequired,
-    onRedo: PropTypes.func.isRequired,
-    onReset: PropTypes.func.isRequired,
-    language: PropTypes.string,
-  };
-  static defaultProps = {};
-
-  render() {
-    const { classes, className, onUndo, onRedo, onReset, language } = this.props;
-    return (
-      <div className={classNames(className)}>
-        <Button classes={{ root: classes.button }} onClick={() => onUndo(true)}>
-          {translator.t('common:undo', { lng: language })}
-        </Button>
-        <Button classes={{ root: classes.button }} onClick={() => onRedo(true)}>
-          {translator.t('graphing.redo', { lng: language })}
-        </Button>
-        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
-          {translator.t('graphing.reset', { lng: language })}
-        </Button>
-      </div>
-    );
-  }
-}
-
-const styles = (theme) => ({
-  button: {
-    color: color.text(),
-    marginBottom: theme.spacing.unit / 2,
-    '&:not(:last-of-type)': {
-      marginRight: theme.spacing.unit / 2,
-    },
-  },
-});
-
-export default withStyles(styles)(UndoRedo);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/use-debounce.js

@@ -1,13 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export const useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => clearTimeout(handler);
-  }, [value]);
-  return debouncedValue;
-};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/utils.js

@@ -1,226 +0,0 @@
-import head from 'lodash/head';
-import tail from 'lodash/tail';
-import { utils } from '../plot';
-import invariant from 'invariant';
-import isEqual from 'lodash/isEqual';
-import isEmpty from 'lodash/isEmpty';
-import cloneDeep from 'lodash/cloneDeep';
-
-export const tickCount = utils.tickCount;
-export const bounds = utils.bounds;
-export const point = utils.point;
-
-//TODO: This can be removed?
-export const getAngleDeg = () => 0;
-//TODO: This can be removed?
-export const arrowDimensions = () => 0;
-
-export const getTickValues = (prop) => {
-  const tickValues = [];
-  let tickVal = 0;
-
-  while (tickVal >= prop.min && tickValues.indexOf(tickVal) < 0) {
-    tickValues.push(tickVal);
-    tickVal = Math.round((tickVal - prop.step) * 10000) / 10000;
-  }
-
-  tickVal = Math.round(prop.step * 10000) / 10000;
-
-  while (tickVal <= prop.max && tickValues.indexOf(tickVal) < 0) {
-    tickValues.push(tickVal);
-    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
-  }
-
-  // return only ticks that are inside the min-max interval
-  if (tickValues) {
-    return tickValues.filter((tV) => tV >= prop.min && tV <= prop.max);
-  }
-
-  return [];
-};
-
-export const countWords = (label) => {
-  if (label == null || isEmpty(label)) {
-    return 1;
-  }
-
-  const words = label.split(' ');
-  return words.length;
-};
-
-// findLongestWord is also used in plot
-export const findLongestWord = (label) => {
-  let longestWord = (label || '')
-    .replace(/<[^>]+>/g, '')
-    .split(' ')
-    .sort((a, b) => b.length - a.length);
-
-  return longestWord[0].length;
-};
-
-// amountToIncreaseWidth is also used in plot
-export const amountToIncreaseWidth = (longestWord) => {
-  if (!longestWord) {
-    return 0;
-  }
-
-  return longestWord * 10;
-};
-
-export const polygonToArea = (points) => {
-  const h = head(points);
-  const area = {
-    left: h.x,
-    top: h.y,
-    bottom: h.y,
-    right: h.x,
-  };
-  return tail(points).reduce((a, p) => {
-    a.left = Math.min(a.left, p.x);
-    a.top = Math.max(a.top, p.y);
-    a.bottom = Math.min(a.bottom, p.y);
-    a.right = Math.max(a.right, p.x);
-    return a;
-  }, area);
-};
-
-export const lineToArea = (from, to) => pointsToArea(from, to);
-
-export const pointsToArea = (a, b) => {
-  invariant(!!a && !!b, 'a or b is undefined');
-  const left = Math.min(a.x, b.x);
-  const top = Math.max(a.y, b.y);
-  const bottom = Math.min(a.y, b.y);
-  const right = Math.max(a.x, b.x);
-  return { left, top, bottom, right };
-};
-
-export const isDomainRangeEqual = (graphProps, nextGraphProps) => {
-  return isEqual(graphProps.domain, nextGraphProps.domain) && isEqual(graphProps.range, nextGraphProps.range);
-};
-
-export const getRightestPoints = (points) => {
-  const sortedPoints = cloneDeep(points);
-  sortedPoints.sort((a, b) => b.x - a.x);
-
-  return { a: sortedPoints[0], b: sortedPoints[1] };
-};
-
-export const getMiddleOfTwoPoints = (a, b) => ({
-  x: (a.x + b.x) / 2,
-  y: (a.y + b.y) / 2,
-});
-
-export const roundNumber = (number) => parseFloat(number.toFixed(4));
-
-export const sameAxes = (p1, p2) =>
-  p1 && p2 && (roundNumber(p1.x) === roundNumber(p2.x) || roundNumber(p1.y) === roundNumber(p2.y));
-
-export const equalPoints = (p1, p2) =>
-  p1 &&
-  p2 &&
-  isEqual(
-    {
-      x: roundNumber(p1.x),
-      y: roundNumber(p1.y),
-    },
-    {
-      x: roundNumber(p2.x),
-      y: roundNumber(p2.y),
-    },
-  );
-
-const getDistanceBetweenTicks = (axis, size) => {
-  const { min, max, step } = axis;
-  const nbOfTicks = (max - min) / step;
-
-  return size / nbOfTicks;
-};
-
-export const thinnerShapesNeeded = (graphProps) => {
-  const {
-    domain,
-    range,
-    size: { width, height },
-  } = graphProps;
-
-  // 14 is the default width of a point
-  return getDistanceBetweenTicks(domain, width) < 14 || getDistanceBetweenTicks(range, height) < 14;
-};
-
-export const getAdjustedGraphLimits = (graphProps) => {
-  const {
-    domain,
-    range,
-    size: { width, height },
-  } = graphProps;
-  const domainTicksDistance = getDistanceBetweenTicks(domain, width);
-  const rangeTicksDistance = getDistanceBetweenTicks(range, height);
-
-  // 15 is the distance required for the arrow to extend the graph
-  const domainPadding = domain.step / (domainTicksDistance / 15);
-  const rangePadding = range.step / (rangeTicksDistance / 15);
-
-  return {
-    domain: {
-      min: domain.min - domainPadding,
-      max: domain.max + domainPadding,
-    },
-    range: {
-      min: range.min - rangePadding,
-      max: range.max + rangePadding,
-    },
-  };
-};
-
-export const getDistanceBetweenTwoPoints = (a, b) => Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y));
-
-const sortPoints = (array) => (array || []).sort((a, b) => a.x - b.x || a.y - b.y);
-
-// check colliniarity of 3 points (source: https://www.geeksforgeeks.org/program-check-three-points-collinear/)
-const checkCollinearity = (a, b, c) => (a.x - b.x) * (c.y - b.y) === (c.x - b.x) * (a.y - b.y);
-
-// 2 lines are overlapping if all 4 points are collinear
-const isSameLine = (markA, markB) =>
-  checkCollinearity(markA.from, markB.from, markB.to) && checkCollinearity(markA.to, markB.from, markB.to);
-
-const isSameCircle = (markA, markB) =>
-  equalPoints(markA.root, markB.root) &&
-  getDistanceBetweenTwoPoints(markB.root, markB.edge) === getDistanceBetweenTwoPoints(markA.root, markA.edge);
-
-export const isDuplicatedMark = (mark, marks, oldMark) => {
-  const { type, building } = mark;
-
-  if (building) {
-    return false;
-  }
-
-  const filteredMarks = (marks || []).filter((m) => m.type === type && !m.building);
-  const index = filteredMarks.findIndex((m) => isEqual(m, oldMark));
-
-  if (index !== -1) {
-    filteredMarks.splice(index, 1);
-  }
-
-  const duplicated = filteredMarks.find((m) => {
-    if (type === 'circle' || type === 'parabola' || type === 'sine') {
-      const { root, edge } = mark;
-
-      return (equalPoints(root, m.root) && equalPoints(edge, m.edge)) || (type === 'circle' && isSameCircle(m, mark));
-    } else if (type === 'line' || type === 'ray' || type === 'segment' || type === 'vector') {
-      const { from, to } = mark;
-
-      return (
-        (equalPoints(from, m.from) && equalPoints(to, m.to)) ||
-        (equalPoints(from, m.to) && equalPoints(to, m.from)) ||
-        (type === 'line' && isSameLine(m, mark))
-      );
-    } else if (type === 'polygon') {
-      return isEqual(sortPoints(cloneDeep(mark.points)), sortPoints(cloneDeep(m.points)));
-    } else if (type === 'point') {
-      return equalPoints(m, mark);
-    }
-  });
-
-  return !!duplicated;
-};