@pie-lib/graphing-solution-set 4.1.0-beta.9 → 5.0.0-next.36

package/src/tools/shared/line/line-path.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { types } from '@pie-lib/plot';
-import { correct, disabled, incorrect, missing } from '../styles';
-import * as vx from '@visx/shape';
-import { color } from '@pie-lib/render-ui';
-
-const dragging = () => ({
-  strokeWidth: 7,
-  stroke: color.defaults.BLACK,
-});
-
-const StyledDrawLine = styled(vx.LinePath, {
-  shouldForwardProp: (prop) => !['disabled', 'correctness'].includes(prop),
-})(({ disabled: isDisabled, correctness }) => ({
-  fill: 'none',
-  strokeWidth: 2,
-  stroke: color.secondaryLight(),
-  ...(isDisabled && {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  }),
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-  ...(correctness === 'missing' && missing('stroke')),
-}));
-
-const StyledInteractionLine = styled(vx.LinePath, {
-  shouldForwardProp: (prop) => !['disabled', 'correctness', 'isDragging'].includes(prop),
-})(({ disabled: isDisabled, correctness, isDragging }) => ({
-  strokeWidth: 6,
-  fill: 'none',
-  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
-  stroke: 'transparent',
-  '&:hover': dragging(),
-  ...(isDragging && dragging()),
-  ...(isDisabled && {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  }),
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-  ...(correctness === 'missing' && missing('stroke')),
-}));
-
-export class RawLinePath extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-    graphProps: types.GraphPropsType.isRequired,
-    disabled: PropTypes.bool,
-    correctness: PropTypes.string,
-    from: types.PointType,
-    to: types.PointType,
-    isDragging: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    from: {},
-    to: {},
-  };
-
-  render() {
-    /* eslint-disable no-unused-vars */
-    const { data, className, disabled, correctness, from, to, graphProps, isDragging, ...rest } = this.props;
-    /* eslint-enable */
-
-    return (
-      <React.Fragment>
-        <StyledDrawLine data={data} disabled={disabled} correctness={correctness} className={className} {...rest} />
-        <StyledInteractionLine
-          data={data}
-          isDragging={isDragging}
-          disabled={disabled}
-          correctness={correctness}
-          className={className}
-          {...rest}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-export const LinePath = RawLinePath;

package/src/tools/shared/line/with-root-edge.jsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
-import { LinePath } from './line-path';
-import { curveMonotoneX } from '@visx/curve';
-import { lineBase, lineToolComponent } from './index';
-
-const toRootEdge = (m) => {
-  const out = { ...m };
-  out.root = { ...m.from };
-  out.edge = m.to ? { ...m.to } : undefined;
-  delete out.from;
-  delete out.to;
-  return out;
-};
-
-const toFromTo = (m) => {
-  const out = { ...m };
-  out.from = { ...m.root };
-  out.to = m.edge ? { ...m.edge } : undefined;
-  delete out.root;
-  delete out.edge;
-  return out;
-};
-
-export const rootEdgeToFromToWrapper = (BaseComp) => {
-  const Wrapper = (props) => {
-    const m = toFromTo(props.mark);
-
-    const onChange = (current, next) => {
-      props.onChange(toRootEdge(current), toRootEdge(next));
-    };
-
-    return <BaseComp {...props} mark={m} onChange={onChange} />;
-  };
-
-  Wrapper.propTypes = {
-    onChange: PropTypes.func,
-    mark: PropTypes.object,
-  };
-
-  return Wrapper;
-};
-
-export const rootEdgeComponent = (RootEdgeComp) => {
-  const BaseComponent = lineToolComponent(RootEdgeComp);
-  return rootEdgeToFromToWrapper(BaseComponent);
-};
-
-const withPointsGenerationLinePath = (getPoints) => {
-  const LinePathComponent = (props) => {
-    const { graphProps, from, to, onClick, onDragStart, onDragStop, onChange, disabled, correctness, ...rest } = props;
-
-    const { dataPoints, enableCurve = true } = getPoints({
-      graphProps: props.graphProps,
-      root: from,
-      edge: to,
-    });
-
-    const raw = dataPoints.map((d) => [graphProps.scale.x(d.x), graphProps.scale.y(d.y)]);
-
-    const common = {
-      onClick,
-      graphProps,
-      onDragStart,
-      onDragStop,
-      onChange,
-      disabled,
-      correctness,
-    };
-
-    if (!enableCurve) {
-      return <LinePath data={raw} from={from} to={to} {...common} {...rest} />;
-    } else {
-      return <LinePath data={raw} from={from} to={to} curve={curveMonotoneX} {...common} {...rest} />;
-    }
-  };
-
-  LinePathComponent.propTypes = {
-    graphProps: types.GraphPropsType.isRequired,
-    from: types.PointType.isRequired,
-    to: types.PointType,
-    onClick: PropTypes.func,
-    onDragStart: PropTypes.func,
-    onDragStop: PropTypes.func,
-    onChange: PropTypes.func,
-    disabled: PropTypes.bool,
-    correctness: PropTypes.string,
-  };
-
-  return LinePathComponent;
-};
-
-export const withRootEdge = (getPoints) => {
-  const LinePathComp = withPointsGenerationLinePath(getPoints);
-  return lineBase(LinePathComp);
-};

package/src/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 '@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

@@ -1,40 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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