@pie-element/ebsr 9.12.1 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/shared/point/arrow.jsx

@@ -0,0 +1,40 @@
+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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/shared/point/base-point.jsx

@@ -0,0 +1,86 @@
+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';
+import { color } from '../../../../render-ui';
+
+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,
+      onClick,
+      // Refactored RawBp component by isolating onTouchStart and onTouchEnd handlers to the outer circle, resolving erratic touch event behavior.
+      // Remaining props are now applied only to the inner circle for improved event handling consistency.
+      onTouchStart,
+      onTouchEnd,
+      ...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 })}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onClick={onClick}
+        />
+        <g
+          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
+          onMouseEnter={() => this.setState({ showCoordinates: true })}
+          onMouseLeave={() => this.setState({ showCoordinates: false })}
+        >
+          <circle
+            {...rest}
+            style={{ fill: color.defaults.BLACK, cursor: 'pointer' }}
+            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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/shared/point/index.jsx

@@ -0,0 +1,60 @@
+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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/shared/styles.js

@@ -0,0 +1,20 @@
+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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/tools/shared/types.js

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

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/undo-redo.jsx

@@ -0,0 +1,47 @@
+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,
+    onReset: PropTypes.func.isRequired,
+    language: PropTypes.string,
+  };
+  static defaultProps = {};
+
+  render() {
+    const { classes, className, onReset = false, language } = this.props;
+    return (
+      <div className={classNames(className)}>
+        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
+          {translator.t('graphing.reset', { lng: language })}
+        </Button>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  button: {
+    color: color.text(),
+    fontWeight: 'bold',
+    marginBottom: theme.spacing.unit / 2,
+    '&:not(:last-of-type)': {
+      marginRight: theme.spacing.unit / 2,
+    },
+  },
+  undoRedoDiv: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+});
+
+export default withStyles(styles)(UndoRedo);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/use-debounce.js

@@ -0,0 +1,13 @@
+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-element/multiple-choice/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;
+};