@pie-element/complex-rubric 2.6.5 → 2.6.6

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

@@ -0,0 +1,234 @@
+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 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 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,
+    },
+  };
+};
+
+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);
+
+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 === 'line') {
+      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)));
+    }
+  });
+
+  return !!duplicated;
+};
+
+export const areArraysOfObjectsEqual = (array1, array2) => {
+  // Check if both arrays have the same length
+  if (array1.length !== array2.length) {
+    return false;
+  }
+  // Iterate through each object in the arrays
+  for (let i = 0; i < array1.length; i++) {
+    // Get the current objects in both arrays
+    const obj1 = array1[i];
+    const obj2 = array2[i];
+    // Check if the objects have the same number of properties
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+      return false;
+    }
+    // Iterate through each property in the objects
+    for (const key in obj1) {
+      // Check if the properties and their values are equal
+      if (obj1[key] !== obj2[key]) {
+        return false;
+      }
+    }
+  }
+  // If all objects are equal, the arrays are the same
+  return true;
+};

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

@@ -0,0 +1,227 @@
+import debug from 'debug';
+import Point from '@mapbox/point-geometry';
+import _ from 'lodash';
+const log = debug('pie-lib:graphing:tools:utils');
+
+export const FREQ_DIVIDER = 16;
+
+export const getAmplitudeAndFreq = (root, edge) => {
+  if (!edge) {
+    return { freq: 0, amplitude: 0 };
+  }
+
+  if (root.x == edge.x) {
+    return { freq: 0, amplitude: 0 };
+  }
+
+  const r = new Point(root.x, root.y);
+  const e = new Point(edge.x, edge.y);
+  const d = e.sub(r);
+  // edge point describes 1/4 of the freq
+  return { freq: d.x * 4, amplitude: d.y };
+};
+
+/**
+ * build the x points with root as the anchor.
+ */
+export const xPoints = (root, freq, min, max) => {
+  freq = Math.abs(freq);
+  log('[xPoints] root:', root, 'freq:', freq, ' min:', min, ' max:', max);
+  const leftpoints = _.rangeRight(root, min - freq, freq * -1);
+  const rightpoints = _.range(root + freq, max + freq, freq);
+
+  return _.concat(leftpoints, rightpoints);
+};
+
+/**
+ * Calculate y for x value using amp, freq and shift
+ * https://www.desmos.com/calculator/f1psfoiiv6
+ */
+export const sinY = (amplitude, freq, shift) => (x) => {
+  shift = { phase: 0, vertical: 0, ...shift };
+  const TWO_PI = Math.PI * 2;
+  const num = TWO_PI * (x - shift.phase);
+  const frac = num / freq;
+  const sin = Math.sin(frac);
+  const sinFloat = parseFloat(sin).toFixed(10);
+  return amplitude * sinFloat + shift.vertical;
+};
+
+/**
+ * You need three points for the quadratic eq, so we mirror the edge point
+ * https://www.desmos.com/calculator/xhz1xqgpca
+ */
+export const parabolaFromTwoPoints = (root, edge) => {
+  edge = edge || { ...root };
+  const mirrorEdge = { x: root.x - (edge.x - root.x), y: edge.y };
+  return parabolaFromThreePoints(root, edge, mirrorEdge);
+};
+
+export const parabolaFromThreePoints = (one, two, three) => {
+  log(one, two, three);
+  const { a, b, c } = pointsToABC(one, two, three);
+  log(a, b, c);
+  return parabola(a, b, c);
+};
+/** derive a,b,c from the 3 points */
+export const pointsToABC = (one, two, three) => {
+  const a1 = Math.pow(one.x, 2) * -1 + Math.pow(two.x, 2);
+  const b1 = one.x * -1 + two.x;
+  const d1 = one.y * -1 + two.y;
+  const a2 = Math.pow(two.x, 2) * -1 + Math.pow(three.x, 2);
+  const b2 = two.x * -1 + three.x;
+  const d2 = two.y * -1 + three.y;
+  const bMult = (b2 / b1) * -1;
+  const a3 = bMult * a1 + a2;
+  const d3 = bMult * d1 + d2;
+  const a = d3 / a3;
+  const b = (d1 - a1 * a) / b1;
+  const c = one.y - a * Math.pow(one.x, 2) - b * one.x;
+  return { a, b, c };
+};
+
+/**
+ * y=ax^2+bx+c
+ */
+export const parabola = (a, b, c) => (x) => a * Math.pow(x, 2) + b * x + c;
+
+/**
+ * Absolute value from two points Root (Vertex) the point where the two rays intersect and edge One point on a ray.
+ * @param root 1st point selected on graph
+ * @param edge 2nd point selected on graph
+ * https://www.desmos.com/calculator/rarxiatpip
+ */
+export const absoluteFromTwoPoints = (root, edge) => {
+  edge = edge || { ...root };
+  const a = pointsToAForAbsolute(root, edge);
+  return absolute(a, root.x, root.y);
+};
+
+/*
+ * Finds value of a in y=a*abs(x-h)+k function
+ * @param one 1st point
+ * @param two 2nd point
+ * */
+export const pointsToAForAbsolute = (one, two) => {
+  const y1 = two.y - one.y;
+  const x1 = two.x - one.x;
+  let a = y1 / x1;
+  if (two.x < one.x) {
+    a = a * -1;
+  }
+  return a;
+};
+
+/**
+ * y=a*abs(x-h)+k
+ */
+export const absolute = (a, h, k) => (x) => a * Math.abs(x - h) + k;
+
+/**
+ * Exponential from two points on exponential graph.
+ * @param root 1st point selected on graph
+ * @param edge 2nd point selected on graph
+ * https://www.desmos.com/calculator/3fisjexbvp
+ */
+export const exponentialFromTwoPoints = (root, edge) => {
+  edge = edge || { ...root };
+  const { a, b } = pointsToABForExponential(root, edge);
+  return exponential(a, b);
+};
+
+/*
+ * Finds value of a and b in y=a*(b)^x function
+ * @param one 1st point
+ * @param two 2nd point
+ * */
+export const pointsToABForExponential = (one, two) => {
+  const p = one.y / two.y;
+  const r = 1 / (one.x - two.x);
+  const b = Math.pow(p, r);
+  const a = one.y / Math.pow(b, one.x);
+  return { a, b };
+};
+
+/**
+ * y=a*(b)^x
+ */
+export const exponential = (a, b) => (x) => a * Math.pow(b, x);
+
+/**
+ * Generate a set of data points, add spacing before min and after max if there is space between minx + min and maxX and max
+ * @param {*} domain
+ * @param {*} range
+ * @param {*} root
+ * @param {*} edge
+ * @param {*} yFn
+ * @param {*} excludeOutsidePoints
+ */
+export const buildDataPoints = (domain, range, root, edge, yFn, excludeOutsidePoints = false) => {
+  log('[buildDataPoints] domain:', domain, 'range:', range, 'root:', root, 'edge:', edge);
+
+  domain = { min: 0, max: 0, step: 1, ...domain };
+  range = { min: 0, max: 0, step: 1, ...range };
+  edge = edge ? edge : { ...root };
+
+  const minX = Math.min(root.x, edge.x);
+  const xPts = xPoints(minX, domain.step, domain.min - domain.step, domain.max + domain.step);
+
+  log('[buildDataPoints]:xPts:', xPts);
+
+  let startIndex = -1;
+  let endIndex = -1;
+
+  // generate points based on the yFn
+  const points = xPts.map((v) => new Point(v, yFn(v)));
+
+  if (!excludeOutsidePoints) {
+    return points;
+  }
+
+  // exclude the points with y outside range min and max
+  const filteredPoints = points.reduce((acc, val, index) => {
+    if (val.y >= range.min - range.step && val.y <= range.max + range.step) {
+      if (startIndex === -1) {
+        startIndex = index;
+      }
+
+      if (endIndex < index) {
+        endIndex = index;
+      }
+
+      return [...acc, val];
+    }
+
+    return acc;
+  }, []);
+
+  // add the first value outside range min and max smaller than range.min if exists
+  if (startIndex - 1 >= 0) {
+    filteredPoints.unshift(points[startIndex - 1]);
+  }
+
+  // add the first value outside range min and max greater than range.min if exists
+  if (endIndex + 1 <= points.length - 1) {
+    filteredPoints.push(points[endIndex + 1]);
+  }
+
+  return points;
+};
+
+export default {
+  FREQ_DIVIDER,
+  getAmplitudeAndFreq,
+  xPoints,
+  sinY,
+  parabolaFromTwoPoints,
+  parabolaFromThreePoints,
+  pointsToABC,
+  parabola,
+  absoluteFromTwoPoints,
+  pointsToAForAbsolute,
+  absolute,
+  exponentialFromTwoPoints,
+  pointsToABForExponential,
+  exponential,
+  buildDataPoints,
+};

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/icons/correct-icon.jsx

@@ -0,0 +1,64 @@
+import IconBase from './icon-base';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getStyles } from './icon-root';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = getStyles('correct', '#f8ffe2', '#4aaf46');
+
+const Emoji = ({ className }) => (
+  <g transform={'translate(1, 0)'}>
+    <path
+      className={className}
+      d="M24.7,22.1c-1.5,1.7-3.6,2.7-5.8,2.7s-4.5-1.1-5.8-2.7l-2.8,1.6c2,2.7,5.2,4.2,8.7,4.2
+    c3.4,0,6.6-1.6,8.7-4.2L24.7,22.1z"
+    />
+    <rect x="21.1" y="13.1" className={className} width="3.7" height="4.7" />
+    <rect x="12.7" y="13.1" className={className} width="3.7" height="4.7" />
+  </g>
+);
+
+Emoji.propTypes = {
+  className: PropTypes.string,
+};
+
+Emoji.defaultProps = {
+  x: 0,
+};
+
+const Check = ({ className, x, y }) => (
+  <polygon
+    transform={`translate(${x}, ${y})`}
+    className={className}
+    points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+  />
+);
+
+Check.propTypes = {
+  x: PropTypes.number,
+  y: PropTypes.number,
+  className: PropTypes.string,
+};
+
+Check.defaultProps = {
+  x: 0,
+  y: 0,
+};
+
+export const Correct = IconBase(Check, Emoji);
+
+Correct.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check']),
+  shape: PropTypes.oneOf(['round', 'square']),
+  category: PropTypes.oneOf(['feedback', undefined]),
+  open: PropTypes.bool,
+};
+
+Correct.defaultProps = {
+  iconSet: 'check',
+  shape: 'round',
+  category: undefined,
+  open: false,
+};
+
+export default withStyles(styles)(Correct);

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/icons/correct-response-icon.jsx

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+const OpenIcon = ({ bg, fg }) => (
+  <svg
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    id="Layer_1"
+    x="0px"
+    y="0px"
+    viewBox="-283 359 34 35"
+    style={{ enableBackground: 'new -283 359 34 35' }}
+  >
+    <circle className={bg} cx="-266" cy="375.9" r="14" />
+    <path
+      className={bg}
+      d="M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z
+    M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z"
+    />
+    <polygon
+      className={fg}
+      points="-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6         "
+    />
+  </svg>
+);
+
+OpenIcon.propTypes = {
+  bg: PropTypes.string,
+  fg: PropTypes.string,
+};
+
+const CloseIcon = ({ bg, fg, border }) => (
+  <svg
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    x="0px"
+    y="0px"
+    viewBox="-129.5 127 34 35"
+    style={{ enableBackground: 'new -129.5 127 34 35' }}
+  >
+    <path
+      style={{
+        fill: '#D0CAC5',
+        stroke: '#E6E3E0',
+        strokeWidth: 0.75,
+        strokeMiterlimit: 10,
+      }}
+      d="M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5
+    C-97.4,153.5-104.3,160.4-112.9,160.4z"
+    />
+    <path
+      style={{
+        fill: '#B3ABA4',
+        stroke: '#CDC7C2',
+        strokeWidth: 0.5,
+        strokeMiterlimit: 10,
+      }}
+      d="M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
+    />
+    <circle className={bg} cx="-114.2" cy="143.5" r="14" />
+    <path
+      className={border}
+      d="M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z
+    M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z"
+    />
+    <polygon className={fg} points="-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2" />
+  </svg>
+);
+
+CloseIcon.propTypes = {
+  bg: PropTypes.string,
+  fg: PropTypes.string,
+  border: PropTypes.string,
+};
+
+const styles = {
+  root: {
+    width: (props) => props.size || '25px',
+    height: (props) => props.size || '25px',
+  },
+  hideIconBg: {
+    fill: '#bce2ff',
+  },
+  hideIconFg: {
+    fill: '#1a9cff',
+  },
+  showIconBg: {
+    fill: 'white',
+  },
+  showIconFg: {
+    fill: '#1a9cff',
+  },
+  showIconBorder: {
+    fill: '#bce2ff',
+  },
+};
+
+const CorrectResponse = ({ open, classes, className }) => (
+  <div className={classNames(className, classes.root)}>
+    {open ? (
+      <OpenIcon bg={classes.hideIconBg} fg={classes.hideIconFg} />
+    ) : (
+      <CloseIcon bg={classes.showIconBg} border={classes.showIconBorder} fg={classes.showIconFg} />
+    )}
+  </div>
+);
+
+CorrectResponse.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.bool,
+  size: PropTypes.string,
+  className: PropTypes.string,
+};
+
+CorrectResponse.defaultProps = {
+  open: false,
+};
+
+export default withStyles(styles)(CorrectResponse);