@pie-lib/graphing 2.34.2-next.0 → 2.35.0-mui-update.0

package/src/tools/segment/component.jsx

@@ -1,32 +1,35 @@
 import { lineToolComponent, lineBase, styles } from '../shared/line';
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { types } from '@pie-lib/plot';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
+
+const StyledLineRoot = styled('line')(({ theme, disabled, correctness }) => ({
+  ...styles.line(theme),
+  ...(disabled && {
+    ...styles.disabled(theme),
+    ...styles.disabledSecondary(theme),
+  }),
+  ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+  ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+  ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+}));
 
-const lineStyles = (theme) => ({
-  line: styles.line(theme),
-  disabled: styles.disabled(theme),
-  disabledSecondary: styles.disabledSecondary(theme),
-  correct: styles.correct(theme, 'stroke'),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  missing: styles.missing(theme, 'stroke'),
-});
 export const Line = (props) => {
-  const { className, classes, correctness, disabled, graphProps, from, to, ...rest } = props;
+  const { className, correctness, disabled, graphProps, from, to, ...rest } = props;
   const { scale } = graphProps;
 
   return (
-    <line
+    <StyledLineRoot
       stroke="green"
-      strokeWidth="6"
+      strokeWidth={6}
       x1={scale.x(from.x)}
       y1={scale.y(from.y)}
       x2={scale.x(to.x)}
       y2={scale.y(to.y)}
-      className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
+      className={className}
+      disabled={disabled}
+      correctness={correctness}
       {...rest}
     />
   );
@@ -34,7 +37,6 @@ export const Line = (props) => {
 
 Line.propTypes = {
   className: PropTypes.string,
-  classes: PropTypes.object,
   correctness: PropTypes.string,
   disabled: PropTypes.bool,
   graphProps: PropTypes.any,
@@ -42,8 +44,7 @@ Line.propTypes = {
   to: types.PointType,
 };
 
-const StyledLine = withStyles(lineStyles)(Line);
-const Segment = lineBase(StyledLine);
+const Segment = lineBase(Line);
 const Component = lineToolComponent(Segment);
 
 export default Component;

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

@@ -1,13 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
 
-export const ArrowHead = ({ size, transform, points }) => (
-  <polygon points={points || `0,0 ${size},${size / 2} 0,${size}`} transform={transform} />
+const StyledArrowHead = styled('polygon')(({ disabled, correctness }) => ({
+  fill: color.defaults.BLACK,
+  ...(disabled && {
+    fill: color.disabled(),
+  }),
+  ...(correctness === 'correct' && {
+    fill: color.correctWithIcon(),
+  }),
+  ...(correctness === 'incorrect' && {
+    fill: color.incorrectWithIcon(),
+  }),
+  ...(correctness === 'missing' && {
+    fill: color.missingWithIcon(),
+  }),
+}));
+
+const StyledMarker = styled('marker')(({ disabled, correctness }) => ({
+  '& polygon': {
+    fill: color.defaults.BLACK,
+    ...(disabled && {
+      fill: color.disabled(),
+    }),
+    ...(correctness === 'correct' && {
+      fill: color.correctWithIcon(),
+    }),
+    ...(correctness === 'incorrect' && {
+      fill: color.incorrectWithIcon(),
+    }),
+    ...(correctness === 'missing' && {
+      fill: color.missingWithIcon(),
+    }),
+  },
+}));
+
+export const ArrowHead = ({ size, transform, points, disabled, correctness }) => (
+  <StyledArrowHead 
+    points={points || `0,0 ${size},${size / 2} 0,${size}`} 
+    transform={transform}
+    disabled={disabled}
+    correctness={correctness}
+  />
 );
 ArrowHead.propTypes = {
   points: PropTypes.string,
   size: PropTypes.number,
   transform: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
 };
 ArrowHead.defaultProps = {
   points: '',
@@ -18,9 +61,16 @@ export const genUid = () => {
   const v = (Math.random() * 1000).toFixed(0);
   return `arrow-${v}`;
 };
-export const ArrowMarker = ({ id, size, className }) => {
+export const ArrowMarker = ({ id, size, className, disabled, correctness }) => {
+  // Parse styling info from className if provided (for backward compatibility)
+  const isDisabled = disabled || className?.includes('disabled');
+  const parsedCorrectness = correctness || 
+    (className?.includes('incorrect') ? 'incorrect' : 
+     className?.includes('correct') ? 'correct' : 
+     className?.includes('missing') ? 'missing' : null);
+
   return (
-    <marker
+    <StyledMarker
       id={id}
       viewBox={`0 0 ${size} ${size}`}
       refX={size / 2}
@@ -28,16 +78,19 @@ export const ArrowMarker = ({ id, size, className }) => {
       markerWidth={size}
       markerHeight={size}
       orient="auto-start-reverse"
-      className={className}
+      disabled={isDisabled}
+      correctness={parsedCorrectness}
     >
-      <ArrowHead size={size} />
-    </marker>
+      <ArrowHead size={size} disabled={isDisabled} correctness={parsedCorrectness} />
+    </StyledMarker>
   );
 };
 ArrowMarker.propTypes = {
   id: PropTypes.string,
   size: PropTypes.number,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
 };
 ArrowMarker.defaultProps = {
   size: 5,

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,
@@ -350,7 +387,7 @@ export const lineBase = (Comp, opts) => {
       }
 
       return (
-        <g>
+        <StyledLineGroup disabled={disabled} correctness={correctness}>
           {to && (
             <DraggableComp
               from={from}
@@ -387,7 +424,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 { color } from '@pie-lib/render-ui';
 
+const dragging = () => ({
+  strokeWidth: 4,
+  stroke: color.defaults.BLACK,
+});
+
+const StyledDrawLine = styled(vx.LinePath)(({ theme, 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/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, disabled, correctness, 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, disabled, 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>
       </>
     );
   }