@pie-lib/graphing-solution-set 0.1.0

package/src/tools/shared/point/arrow-point.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/point/arrow-point.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { types } from '@pie-lib/plot';
+import { isEqual } from 'lodash-es';
+import { arrowDimensions, getAngleDeg } from '../../../utils.js';
+
+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/src/tools/shared/point/arrow.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/point/arrow.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { types } from '@pie-lib/plot';
+import { ArrowHead } from '../arrow-head.js';
+import { thinnerShapesNeeded } from '../../../utils.js';
+
+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/src/tools/shared/point/base-point.tsx

@@ -0,0 +1,123 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/point/base-point.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import CoordinatesLabel from '../../../coordinates-label.js';
+import ReactDOM from 'react-dom';
+import { thinnerShapesNeeded } from '../../../utils.js';
+import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import { correct, disabled as disabledStyle, incorrect, missing } from '../styles.js';
+
+const StyledPointGroup: any = styled('g')(({ disabled, correctness }) => ({
+  cursor: 'pointer',
+  '& circle': {
+    fill: 'currentColor',
+  },
+  ...(disabled && {
+    ...disabledStyle('fill'),
+    ...disabledStyle('color'),
+  }),
+  ...(correctness === 'correct' && {
+    ...correct('fill'),
+    ...correct('color'),
+  }),
+  ...(correctness === 'incorrect' && {
+    ...incorrect('fill'),
+    ...incorrect('color'),
+  }),
+  ...(correctness === 'missing' && {
+    ...missing('fill'),
+    ...missing('color'),
+  }),
+}));
+
+export class RawBp extends React.Component {
+  static propTypes = {
+    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,
+    onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { showCoordinates: false };
+  }
+
+  render() {
+    const {
+      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}
+        />
+        <StyledPointGroup
+          disabled={disabled}
+          correctness={correctness}
+          className={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)}
+        </StyledPointGroup>
+      </>
+    );
+  }
+}

package/src/tools/shared/point/index.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/point/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { gridDraggable } from '@pie-lib/plot';
+import * as utils from '../../../utils.js';
+import { correct, disabled, incorrect, missing } from '../styles.js';
+import { RawBp } from './base-point.js';
+import { RawArrow } from './arrow-point.js';
+import { color } from '@pie-lib/render-ui';
+import BaseArrow from './arrow.js';
+
+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 StyledPointWrapper: any = styled('g', {
+  shouldForwardProp: (prop) => !['disabled', 'correctness'].includes(prop),
+})(({ disabled: isDisabled, correctness }) => ({
+  '& circle, & polygon': {
+    cursor: 'pointer',
+    fill: color.defaults.SECONDARY,
+    ...(isDisabled && disabled()),
+    ...(correctness === 'correct' && correct()),
+    ...(correctness === 'incorrect' && incorrect()),
+    ...(correctness === 'missing' && missing()),
+  },
+}));
+
+const withStyledWrapper = (WrappedComponent) => {
+  const WrappedComponentWithStyles = (props) => (
+    <StyledPointWrapper disabled={props.disabled} correctness={props.correctness}>
+      <WrappedComponent {...props} />
+    </StyledPointWrapper>
+  );
+  WrappedComponentWithStyles.displayName = `withStyledWrapper(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  WrappedComponentWithStyles.propTypes = {
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
+  };
+  return WrappedComponentWithStyles;
+};
+
+export const BasePoint = gridDraggable(opts)(withStyledWrapper(RawBp));
+export const ArrowPoint = gridDraggable(opts)(withStyledWrapper(RawArrow));
+export const Arrow = gridDraggable(opts)(withStyledWrapper(BaseArrow));

package/src/tools/shared/styles.ts

@@ -0,0 +1,30 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/styles.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { color } from '@pie-lib/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/src/tools/shared/types.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/types.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import PropTypes from 'prop-types';
+
+export const ToolPropTypeFields = {
+  mark: PropTypes.any,
+  onChange: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onDragStop: PropTypes.func,
+};

package/src/undo-redo.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/undo-redo.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { color } from '@pie-lib/render-ui';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const StyledButton: any = styled(Button)(({ theme }) => ({
+  color: color.text(),
+  fontWeight: 'bold',
+  marginBottom: theme.spacing(0.5),
+  '&:not(:last-of-type)': {
+    marginRight: theme.spacing(0.5),
+  },
+}));
+
+export class UndoRedo extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    onReset: PropTypes.func.isRequired,
+    language: PropTypes.string,
+  };
+  static defaultProps = {};
+
+  render() {
+    const { className, onReset = false, language } = this.props;
+    return (
+      <div className={className}>
+        <StyledButton onClick={() => onReset()}>{translator.t('graphing.reset', { lng: language })}</StyledButton>
+      </div>
+    );
+  }
+}
+
+export default UndoRedo;

package/src/use-debounce.ts

@@ -0,0 +1,23 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/use-debounce.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { useEffect, useState } 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/src/utils.ts

@@ -0,0 +1,240 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { cloneDeep, head, isEmpty, isEqual, tail } from 'lodash-es';
+import { utils } from '@pie-lib/plot';
+import invariant from 'invariant';
+
+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;
+};