@pie-lib/graphing 2.34.3-next.2 → 2.34.3-next.205

package/src/tools/shared/line/index.jsx

@@ -10,6 +10,43 @@ import MarkLabel from '../../../mark-label';
 import isEmpty from 'lodash/isEmpty';
 import { color } from '@pie-lib/render-ui';
 import { getMiddleOfTwoPoints, equalPoints, sameAxes } from '../../../utils';
+import { styled } from '@mui/material/styles';
+
+const StyledLineGroup = styled('g')(({ disabled, correctness }) => ({
+  '& line': {
+    fill: 'transparent',
+    stroke: color.defaults.BLACK,
+    strokeWidth: 3,
+    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
+    '&:hover': {
+      strokeWidth: 6,
+      stroke: color.defaults.PRIMARY_DARK,
+    },
+  },
+  ...(disabled && {
+    '& line': {
+      ...disabledSecondary('stroke'),
+      strokeWidth: 2,
+    },
+  }),
+  ...(correctness === 'correct' && {
+    '& line': {
+      ...correct('stroke'),
+    },
+  }),
+  ...(correctness === 'incorrect' && {
+    '& line': {
+      ...incorrect('stroke'),
+    },
+  }),
+  ...(correctness === 'missing' && {
+    '& line': {
+      ...missing('stroke'),
+      strokeWidth: 1,
+      strokeDasharray: '4 3',
+    },
+  }),
+}));
 
 export const lineTool = (type, Component) => () => ({
   type,
@@ -40,6 +77,13 @@ export const lineToolComponent = (Component) => {
     static propTypes = {
       ...types.ToolPropTypeFields,
       graphProps: types.GraphPropsType.isRequired,
+      limitLabeling: PropTypes.bool,
+      changeMarkProps: PropTypes.func,
+      disabled: PropTypes.bool,
+      from: types.PointType,
+      to: types.PointType,
+      labelModeEnabled: PropTypes.bool,
+      onClick: PropTypes.func,
     };
 
     constructor(props) {
@@ -181,9 +225,10 @@ export const lineBase = (Comp, opts) => {
       onClick: PropTypes.func,
       correctness: PropTypes.string,
       disabled: PropTypes.bool,
-      labelNode: PropTypes.object,
-      labelModeEnabled: PropTypes.bool,
+      limitLabeling: PropTypes.bool,
       changeMarkProps: PropTypes.func,
+      labelModeEnabled: PropTypes.bool,
+      labelNode: PropTypes.object,
     };
 
     onChangePoint = (point) => {
@@ -309,7 +354,7 @@ export const lineBase = (Comp, opts) => {
       let lineLabelNode = null;
 
       if (labelNode) {
-        if (from && from.hasOwnProperty('label')) {
+        if (from && Object.prototype.hasOwnProperty.call(from, 'label')) {
           fromLabelNode = ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input.from = r)}
@@ -322,7 +367,7 @@ export const lineBase = (Comp, opts) => {
           );
         }
 
-        if (to && to.hasOwnProperty('label')) {
+        if (to && Object.prototype.hasOwnProperty.call(to, 'label')) {
           toLabelNode = ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input.to = r)}
@@ -335,7 +380,7 @@ export const lineBase = (Comp, opts) => {
           );
         }
 
-        if (middle && middle.hasOwnProperty('label')) {
+        if (middle && Object.prototype.hasOwnProperty.call(middle, 'label')) {
           lineLabelNode = ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input.middle = r)}
@@ -350,7 +395,7 @@ export const lineBase = (Comp, opts) => {
       }
 
       return (
-        <g>
+        <StyledLineGroup disabled={disabled} correctness={correctness}>
           {to && (
             <DraggableComp
               from={from}
@@ -387,7 +432,7 @@ export const lineBase = (Comp, opts) => {
             />
           )}
           {toLabelNode}
-        </g>
+        </StyledLineGroup>
       );
     }
   }

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

@@ -1,16 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
-import classNames from 'classnames';
 import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
-import * as vx from '@vx/shape';
+import * as vx from '@visx/shape';
 import { color } from '@pie-lib/render-ui';
 
+const dragging = () => ({
+  strokeWidth: 4,
+  stroke: color.defaults.BLACK,
+});
+
+const StyledDrawLine = styled(vx.LinePath)(({ disabled: isDisabled, correctness }) => ({
+  fill: 'none',
+  strokeWidth: 2,
+  stroke: color.black(),
+  ...(isDisabled && {
+    ...disabledSecondary('stroke'),
+    strokeWidth: 2,
+  }),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    strokeWidth: 1,
+    strokeDasharray: '4 3',
+  }),
+}));
+
+const StyledLine = styled(vx.LinePath)(({ theme, disabled: isDisabled, correctness, isDragging }) => ({
+  strokeWidth: 3,
+  fill: 'none',
+  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
+  stroke: 'transparent',
+  '&:hover': dragging(theme),
+  ...(isDragging && dragging(theme)),
+  ...(isDisabled && {
+    ...disabled('stroke'),
+    strokeWidth: 2,
+  }),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    strokeWidth: 1,
+    strokeDasharray: '4 3',
+  }),
+}));
+
 export class RawLinePath extends React.Component {
   static propTypes = {
     className: PropTypes.string,
-    classes: PropTypes.object,
     data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
     graphProps: types.GraphPropsType.isRequired,
     disabled: PropTypes.bool,
@@ -27,30 +67,24 @@ export class RawLinePath extends React.Component {
 
   render() {
     /* eslint-disable no-unused-vars */
-    const { data, classes, className, disabled, correctness, from, to, graphProps, isDragging, ...rest } = this.props;
+    const { data, className, disabled, correctness, from, to, graphProps, isDragging, ...rest } = this.props;
     /* eslint-enable */
 
     return (
       <React.Fragment>
-        <vx.LinePath
+        <StyledDrawLine
           data={data}
-          className={classNames(
-            classes.drawLine,
-            disabled && classes.disabledSecondary,
-            classes[correctness],
-            className,
-          )}
+          className={className}
+          disabled={disabled}
+          correctness={correctness}
           {...rest}
         />
-        <vx.LinePath
+        <StyledLine
           data={data}
-          className={classNames(
-            classes.line,
-            isDragging && classes.dragging,
-            disabled && classes.disabledSecondary,
-            classes[correctness],
-            className,
-          )}
+          className={className}
+          isDragging={isDragging}
+          disabled={disabled}
+          correctness={correctness}
           {...rest}
         />
       </React.Fragment>
@@ -58,42 +92,4 @@ export class RawLinePath extends React.Component {
   }
 }
 
-const dragging = () => ({
-  strokeWidth: 4,
-  stroke: color.defaults.BLACK,
-});
-
-export const LinePath = withStyles((theme) => ({
-  drawLine: {
-    fill: 'none',
-    strokeWidth: 2,
-    stroke: color.black(),
-  },
-  line: {
-    strokeWidth: 3,
-    fill: 'none',
-    transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
-    stroke: 'transparent',
-    '&:hover': dragging(theme),
-  },
-  dragging: dragging(theme),
-  disabled: {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  },
-  disabledSecondary: {
-    ...disabledSecondary('stroke'),
-    strokeWidth: 2,
-  },
-  correct: {
-    ...correct('stroke'),
-  },
-  incorrect: {
-    ...incorrect('stroke'),
-  },
-  missing: {
-    ...missing('stroke'),
-    strokeWidth: 1,
-    strokeDasharray: '4 3',
-  },
-}))(RawLinePath);
+export const LinePath = RawLinePath;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { LinePath } from './line-path';
-import { curveMonotoneX } from '@vx/curve';
+import { curveMonotoneX } from '@visx/curve';
 import { lineBase, lineToolComponent } from './index';
 
 const toRootEdge = (m) => {

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme/build';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { ArrowPoint } from '../index';
 import { graphProps } from '../../../../__tests__/utils';
@@ -7,10 +7,12 @@ import { gridDraggable, utils } from '@pie-lib/plot';
 
 const { xy } = utils;
 jest.mock('../../../../utils', () => {
-  const { point } = jest.requireActual('../../../../utils');
+  const { point, getAngleDeg, arrowDimensions } = jest.requireActual('../../../../utils');
   return {
     bounds: jest.fn(),
     point,
+    getAngleDeg,
+    arrowDimensions,
   };
 });
 
@@ -24,9 +26,8 @@ jest.mock('@pie-lib/plot', () => {
 });
 
 describe('ArrowPoint', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -34,17 +35,20 @@ describe('ArrowPoint', () => {
       graphProps: graphProps(),
       from: xy(0, 0),
       to: xy(1, 1),
+      x: 0,
+      y: 0,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<ArrowPoint {...props} />);
+    return render(<ArrowPoint {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
+
   describe('gridDraggable options', () => {
     let opts;
     let domain;
@@ -60,8 +64,8 @@ describe('ArrowPoint', () => {
         max: 1,
         step: 1,
       };
-      const w = wrapper();
-      opts = gridDraggable.mock.calls[0][0];
+      renderComponent();
+      opts = gridDraggable.mock.calls[gridDraggable.mock.calls.length - 1][0];
     });
 
     describe('bounds', () => {

package/src/tools/shared/point/__tests__/base-point.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme/build';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { BasePoint } from '../index';
 import { gridDraggable } from '@pie-lib/plot';
@@ -6,10 +6,11 @@ import { graphProps } from '../../../../__tests__/utils';
 import { bounds } from '../../../../utils';
 
 jest.mock('../../../../utils', () => {
-  const { point } = jest.requireActual('../../../../utils');
+  const { point, thinnerShapesNeeded } = jest.requireActual('../../../../utils');
   return {
     bounds: jest.fn(),
     point,
+    thinnerShapesNeeded,
   };
 });
 
@@ -23,25 +24,27 @@ jest.mock('@pie-lib/plot', () => {
 });
 
 describe('BasePoint', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
       onChange,
       graphProps: graphProps(),
+      x: 0,
+      y: 0,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<BasePoint {...props} />);
+    return render(<BasePoint {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
+
   describe('gridDraggable options', () => {
     let opts;
     let domain;
@@ -57,8 +60,8 @@ describe('BasePoint', () => {
         max: 1,
         step: 1,
       };
-      const w = wrapper();
-      opts = gridDraggable.mock.calls[0][0];
+      renderComponent();
+      opts = gridDraggable.mock.calls[gridDraggable.mock.calls.length - 1][0];
     });
 
     describe('bounds', () => {

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

@@ -1,18 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
-import isEqual from 'lodash/isEqual';
 import { getAngleDeg, arrowDimensions } 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,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
     from: PropTypes.shape({
       x: PropTypes.number,
       y: PropTypes.number,
@@ -30,32 +27,21 @@ export class RawArrow extends React.Component {
   };
 
   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 { className, x, y, graphProps, from, to, ...rest } = this.props;
     const { scale } = graphProps;
-    const angle = getAngleDeg(from.x, from.y, to.x, to.y);
 
-    let points = '';
+    const angle = from && to ? getAngleDeg(from.x, from.y, to.x, to.y) : 0;
 
-    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}`;
-    }
+    const points =
+      from && to && (from.x !== to.x || from.y !== to.y)
+        ? `0,0 ${arrowDimensions.vector},${arrowDimensions.vector * 2} -${arrowDimensions.vector},${arrowDimensions.vector * 2}`
+        : '0,0 0,0 0,0';
 
     return (
-      <g
-        className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
-        {...rest}
-      >
+      <g className={className} {...rest}>
         <polygon
           points={points}
-          transform={`
-          translate(${scale.x(x)}, ${scale.y(y)})
-          rotate(${angle} 0 0)`}
+          transform={`translate(${scale.x(x)}, ${scale.y(y)}) rotate(${angle} 0 0)`}
         />
       </g>
     );

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

@@ -1,13 +1,11 @@
 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 {
+export class BaseArrow extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     correctness: PropTypes.string,
     disabled: PropTypes.bool,
@@ -18,8 +16,7 @@ export default class Arrow extends React.Component {
   };
 
   render() {
-    const { classes, angle, className, x, y, disabled, correctness, graphProps, ...rest } = this.props;
-
+    const { className, angle, x, y, correctness, graphProps, ...rest } = this.props;
     const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
     const { scale } = graphProps;
 
@@ -29,14 +26,11 @@ export default class Arrow extends React.Component {
     const transform = `rotate(${-angle}, ${scaledX},${scaledY})`;
     const points = `${scaledX},${scaledY}
         ${scaledX - size},${scaledY - size / 2}
-        ${scaledX - size}, ${scaledY + size / 2}`;
+        ${scaledX - size},${scaledY + size / 2}`;
 
     return (
-      <g
-        className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
-        {...rest}
-      >
-        <ArrowHead size={size} transform={transform} points={points} />
+      <g className={className} {...rest}>
+        <ArrowHead size={size} transform={transform} points={points} correctness={correctness} />
       </g>
     );
   }

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

@@ -1,35 +1,58 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
-import CoordinatesLabel from '../../../coordinates-label';
 import ReactDOM from 'react-dom';
+import { styled } from '@mui/material/styles';
+
+import CoordinatesLabel from '../../../coordinates-label';
 import { thinnerShapesNeeded } from '../../../utils';
 import MissingSVG from '../icons/MissingSVG';
 import CorrectSVG from '../icons/CorrectSVG';
 import IncorrectSVG from '../icons/IncorrectSVG';
+import * as styles from '../styles';
+
+const StyledPointGroup = styled('g')(({ disabled, correctness }) => ({
+  cursor: 'pointer',
+  '& circle': {
+    fill: 'currentColor',
+  },
+  ...(disabled && {
+    ...styles.disabled('fill'),
+    ...styles.disabled('color'),
+  }),
+  ...(correctness === 'correct' && {
+    ...styles.correct('fill'),
+    ...styles.correct('color'),
+  }),
+  ...(correctness === 'incorrect' && {
+    ...styles.incorrect('fill'),
+    ...styles.incorrect('color'),
+  }),
+  ...(correctness === 'missing' && {
+    ...styles.missing('fill'),
+    ...styles.missing('color'),
+  }),
+}));
 
 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,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
     graphProps: types.GraphPropsType.isRequired,
+    onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
   };
 
-  constructor(props) {
-    super(props);
-    this.state = { showCoordinates: false };
-  }
+  state = { showCoordinates: false };
 
   render() {
     const {
-      classes,
       className,
       coordinatesOnHover,
       x,
@@ -38,19 +61,16 @@ export class RawBp extends React.Component {
       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;
+
     let SvgComponent;
     switch (correctness) {
       case 'missing':
@@ -64,11 +84,11 @@ export class RawBp extends React.Component {
         break;
       default:
         SvgComponent = null;
-        break;
     }
 
     return (
       <>
+        {/* Outer invisible circle for easier touch/click */}
         <circle
           style={{ fill: 'transparent', cursor: 'pointer', pointerEvents: 'all' }}
           r={r * 3}
@@ -80,8 +100,11 @@ export class RawBp extends React.Component {
           onTouchEnd={onTouchEnd}
           onClick={onClick}
         />
-        <g
-          className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
+        {/* Actual point */}
+        <StyledPointGroup
+          className={className}
+          disabled={disabled}
+          correctness={correctness}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
         >
@@ -91,7 +114,7 @@ export class RawBp extends React.Component {
             coordinatesOnHover &&
             showCoordinates &&
             ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
-        </g>
+        </StyledPointGroup>
       </>
     );
   }