@pie-lib/graphing-solution-set 4.0.4-next.30 → 4.0.4-next.34

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

@@ -0,0 +1,60 @@
+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';
+
+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.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { types } from '@pie-lib/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/src/tools/shared/point/base-point.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import CoordinatesLabel from '../../../coordinates-label';
+import ReactDOM from 'react-dom';
+import { thinnerShapesNeeded } from '../../../utils';
+import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import { correct, disabled as disabledStyle, incorrect, missing } from '../styles';
+
+const StyledPointGroup = 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.jsx

@@ -0,0 +1,58 @@
+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';
+import { correct, disabled, incorrect, missing } from '../styles';
+import { RawBp } from './base-point';
+import { RawArrow } from './arrow-point';
+import { color } from '@pie-lib/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 StyledPointWrapper = 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.js

@@ -0,0 +1,20 @@
+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.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/src/undo-redo.jsx

@@ -0,0 +1,37 @@
+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 = 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.js

@@ -0,0 +1,13 @@
+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.js

@@ -0,0 +1,230 @@
+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;
+};

package/dist/_virtual/_rolldown/runtime.js

@@ -1,23 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
-	let r = {};
-	for (var i in e) t(r, i, {
-		get: e[i],
-		enumerable: !0
-	});
-	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
-}, c = (e, i, o, s) => {
-	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
-		get: ((e) => i[e]).bind(null, d),
-		enumerable: !(s = n(i, d)) || s.enumerable
-	});
-	return e;
-}, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
-	value: n,
-	enumerable: !0
-}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
-//#endregion
-export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };

package/dist/autosize-input.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface AutosizeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
-    className?: string;
-    inputClassName?: string;
-    inputRef?: (node: HTMLInputElement | null) => void;
-    inputStyle?: React.CSSProperties;
-    minWidth?: number | string;
-    style?: React.CSSProperties;
-}
-export declare const AutosizeInput: React.ForwardRefExoticComponent<AutosizeInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/autosize-input.js

@@ -1,66 +0,0 @@
-import e, { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/autosize-input.tsx
-var s = (e) => {
-	let t = Number.parseFloat(e);
-	return Number.isFinite(t) ? t : 0;
-}, c = (e, t) => {
-	let n = e ?? t;
-	return typeof n == "number" ? n : typeof n == "string" && n.endsWith("px") ? s(n) : 1;
-}, l = e.forwardRef(({ className: e, inputClassName: l, inputRef: u, inputStyle: d, minWidth: f, placeholder: p, style: m, value: h, defaultValue: g, ..._ }, v) => {
-	let y = r(null), b = r(u), x = r(v), S = r(null), [C, w] = i(() => c(f, d?.minWidth));
-	b.current = u, x.current = v;
-	let T = t((e) => {
-		y.current = e, b.current?.(e);
-		let t = x.current;
-		typeof t == "function" ? t(e) : t && (t.current = e);
-	}, []);
-	return n(() => {
-		let e = y.current, t = S.current;
-		if (!e || !t) return;
-		let n = window.getComputedStyle(e);
-		t.style.font = n.font, t.style.letterSpacing = n.letterSpacing, t.style.textTransform = n.textTransform, t.textContent = String(h ?? g ?? p ?? "") || " ";
-		let r = s(n.paddingLeft) + s(n.paddingRight) + s(n.borderLeftWidth) + s(n.borderRightWidth), i = Math.ceil(t.getBoundingClientRect().width + 2), a = n.boxSizing === "border-box" ? i + r : i;
-		w(Math.max(c(f, d?.minWidth), a));
-	}, [
-		g,
-		l,
-		d,
-		f,
-		p,
-		h
-	]), /* @__PURE__ */ o("span", {
-		className: e,
-		style: {
-			display: "inline-block",
-			...m
-		},
-		children: [/* @__PURE__ */ a("input", {
-			..._,
-			ref: T,
-			className: l,
-			placeholder: p,
-			style: {
-				width: C,
-				...d
-			},
-			value: h,
-			defaultValue: g
-		}), /* @__PURE__ */ a("span", {
-			ref: S,
-			"aria-hidden": "true",
-			style: {
-				height: 0,
-				left: 0,
-				overflow: "hidden",
-				position: "absolute",
-				top: 0,
-				visibility: "hidden",
-				whiteSpace: "pre"
-			}
-		})]
-	});
-});
-l.displayName = "AutosizeInput";
-//#endregion
-export { l as AutosizeInput };