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

package/src/tools/circle/component.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
 import { BasePoint } from '../shared/point';
 import BgCircle from './bg-circle';
 import { getMiddleOfTwoPoints, point, equalPoints } from '../../utils';
-import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
 import { rootEdgeComponent } from '../shared/line/with-root-edge';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../mark-label';
 import isEmpty from 'lodash/isEmpty';
 import { color } from '@pie-lib/render-ui';
+import { styled, keyframes } from '@mui/material/styles';
 
-const opacityPulsate = (opacity) => ({
+const opacityPulsate = (opacity) => keyframes({
   '0%': { opacity: '0.0' },
   '50%': { opacity },
   '100%': { opacity: '0.0' },
@@ -26,7 +26,6 @@ const getRadius = (from, outer) => {
 export class RawBaseCircle extends React.Component {
   static propTypes = {
     building: PropTypes.bool,
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     coordinatesOnHover: PropTypes.bool,
     correctness: PropTypes.string,
@@ -53,12 +52,10 @@ export class RawBaseCircle extends React.Component {
     const { middle, onChange } = this.props;
     const { from, to } = point;
 
-    // because point.from.label and point.to.label can be different
     if (!equalPoints(from, to)) {
       if (middle) {
         point.middle = { ...middle, ...getMiddleOfTwoPoints(from, to) };
       }
-
       onChange(point);
     }
   };
@@ -66,10 +63,7 @@ export class RawBaseCircle extends React.Component {
   dragFrom = (draggedFrom) => {
     const { from, to } = this.props;
 
-    if (from.label) {
-      draggedFrom.label = from.label;
-    }
-
+    if (from.label) draggedFrom.label = from.label;
     if (!equalPoints(draggedFrom, to)) {
       this.onChangePoint({ from: draggedFrom, to });
     }
@@ -78,10 +72,7 @@ export class RawBaseCircle extends React.Component {
   dragTo = (draggedTo) => {
     const { from, to } = this.props;
 
-    if (to.label) {
-      draggedTo.label = to.label;
-    }
-
+    if (to.label) draggedTo.label = to.label;
     if (!equalPoints(from, draggedTo)) {
       this.onChangePoint({ from, to: draggedTo });
     }
@@ -92,58 +83,36 @@ export class RawBaseCircle extends React.Component {
     const diff = point(from).sub(point(draggedFrom));
     const draggedTo = point(to).sub(diff);
 
-    if (from.label) {
-      draggedFrom.label = from.label;
-    }
-
-    if (to.label) {
-      draggedTo.label = to.label;
-    }
+    if (from.label) draggedFrom.label = from.label;
+    if (to.label) draggedTo.label = to.label;
 
     const updated = { from: draggedFrom, to: draggedTo };
-
     if (middle) {
       updated.middle = { ...middle, ...getMiddleOfTwoPoints(draggedFrom, draggedTo) };
     }
 
     this.setState(
-      {
-        draggedroot: undefined,
-        draggedOuter: undefined,
-        isCircleDrag: false,
-      },
-      () => {
-        onChange(updated);
-      },
+      { draggedroot: undefined, draggedOuter: undefined, isCircleDrag: false },
+      () => onChange(updated),
     );
   };
 
   labelChange = (point, type) => {
     const { changeMarkProps } = this.props;
     const update = { ...point };
-
-    if (!point.label || isEmpty(point.label)) {
-      delete update.label;
-    }
-
+    if (!point.label || isEmpty(point.label)) delete update.label;
     changeMarkProps({ [type]: update });
   };
 
   clickPoint = (point, type, data) => {
     const { changeMarkProps, disabled, from, to, labelModeEnabled, limitLabeling, onClick } = this.props;
+
     if (!labelModeEnabled) {
       onClick(point || data);
       return;
     }
 
-    if (disabled) {
-      return;
-    }
-
-    // limit labeling the points of the circle
-    if (limitLabeling) {
-      return;
-    }
+    if (disabled || limitLabeling) return;
 
     if (type === 'middle' && !point && from && to) {
       point = { ...point, ...getMiddleOfTwoPoints(from, to) };
@@ -156,7 +125,6 @@ export class RawBaseCircle extends React.Component {
     }
   };
 
-  // IMPORTANT, do not remove
   input = {};
 
   render() {
@@ -165,9 +133,8 @@ export class RawBaseCircle extends React.Component {
       to,
       middle,
       disabled,
-      classes,
-      coordinatesOnHover,
       building,
+      coordinatesOnHover,
       onDragStart,
       onDragStop,
       onClick,
@@ -176,10 +143,9 @@ export class RawBaseCircle extends React.Component {
       labelNode,
       labelModeEnabled,
     } = this.props;
-    const common = { onDragStart, onDragStop, graphProps, onClick };
 
+    const common = { onDragStart, onDragStop, graphProps, onClick };
     to = to || from;
-
     const radius = getRadius(from, to);
 
     let fromLabelNode = null;
@@ -187,7 +153,7 @@ export class RawBaseCircle extends React.Component {
     let circleLabelNode = null;
 
     if (labelNode) {
-      if (from && from.hasOwnProperty('label')) {
+      if (from?.label !== undefined) {
         fromLabelNode = ReactDOM.createPortal(
           <MarkLabel
             inputRef={(r) => (this.input.from = r)}
@@ -200,7 +166,7 @@ export class RawBaseCircle extends React.Component {
         );
       }
 
-      if (to && to.hasOwnProperty('label')) {
+      if (to?.label !== undefined) {
         toLabelNode = ReactDOM.createPortal(
           <MarkLabel
             inputRef={(r) => (this.input.to = r)}
@@ -213,7 +179,7 @@ export class RawBaseCircle extends React.Component {
         );
       }
 
-      if (middle && middle.hasOwnProperty('label')) {
+      if (middle?.label !== undefined) {
         circleLabelNode = ReactDOM.createPortal(
           <MarkLabel
             inputRef={(r) => (this.input.middle = r)}
@@ -229,10 +195,10 @@ export class RawBaseCircle extends React.Component {
 
     return (
       <g>
-        <BgCircle
+        <StyledBgCircle
           disabled={building || disabled}
           correctness={correctness}
-          className={classNames(building && classes.bgCircleBuilding)}
+          className={classNames(building && 'bgCircleBuilding')}
           x={from.x}
           y={from.y}
           radius={radius}
@@ -262,7 +228,7 @@ export class RawBaseCircle extends React.Component {
           labelNode={labelNode}
           x={from.x}
           y={from.y}
-          className={classes.from}
+          className="from"
           onDrag={this.dragFrom}
           {...common}
           onClick={(data) => this.clickPoint(from, 'from', data)}
@@ -273,9 +239,10 @@ export class RawBaseCircle extends React.Component {
   }
 }
 
-export const BaseCircle = withStyles(() => ({
-  outerLine: {
-    fill: 'rgb(0,0,0,0)', // TODO hardcoded color
+// MUI v5 styled() replaces withStyles
+const StyledBgCircle = styled(BgCircle)(({ theme }) => ({
+  '&.outerLine': {
+    fill: 'rgba(0,0,0,0)',
     stroke: color.defaults.BLACK,
     strokeWidth: 4,
     '&:hover': {
@@ -283,15 +250,13 @@ export const BaseCircle = withStyles(() => ({
       stroke: color.defaults.PRIMARY_DARK,
     },
   },
-  root: {},
-  bgCircleBuilding: {
+  '&.bgCircleBuilding': {
     stroke: color.defaults.BLACK,
-    animation: 'opacityPulse 2s ease-out',
-    animationIterationCount: 'infinite',
+    animation: `${opacityPulsate('0.3')} 2s ease-out infinite`,
     opacity: 1,
   },
-  '@keyframes opacityPulse': opacityPulsate('0.3'),
-}))(RawBaseCircle);
+}));
 
+export const BaseCircle = RawBaseCircle;
 const Component = rootEdgeComponent(BaseCircle);
 export default Component;

package/src/tools/line/component.jsx

@@ -3,11 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { trig, types } from '@pie-lib/plot';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
 import { ArrowMarker, genUid } from '../shared/arrow-head';
 import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
+import { styled } from '@mui/material/styles';
 
-const lineStyles = (theme) => ({
+const StyledArrowedLineRoot = styled('g')(({ theme }) => ({
   line: styles.line(theme),
   enabledArrow: styles.arrow(theme),
   disabledArrow: styles.disabledArrow(theme),
@@ -19,23 +19,28 @@ const lineStyles = (theme) => ({
   incorrectArrow: styles.incorrect(theme),
   missing: styles.missing(theme, 'stroke'),
   missingArrow: styles.missing(theme),
-});
+}));
 
 export const ArrowedLine = (props) => {
   const markerId = genUid();
-  const { className, classes, correctness, disabled, graphProps, from, to, ...rest } = props;
+  const { className, correctness, disabled, graphProps, from, to, markerId: propMarkerId, ...rest } = props;
   const { scale } = graphProps;
   const { domain, range } = getAdjustedGraphLimits(graphProps);
   const [eFrom, eTo] = trig.edges(domain, range)(from, to);
   const suffix = correctness || (disabled && 'disabled') || 'enabled';
+  const finalMarkerId = propMarkerId || markerId;
 
   return (
-    <g>
+    <StyledArrowedLineRoot>
       <defs>
         <ArrowMarker
           size={thinnerShapesNeeded(graphProps) ? 4 : 5}
-          id={`${props.markerId || markerId}-${suffix}`}
-          className={classNames(classes[`${suffix}Arrow`])}
+          id={`${finalMarkerId}-${suffix}`}
+          className={classNames(
+            suffix === 'enabled' ? 'enabledArrow' :
+            suffix === 'disabled' ? 'disabledArrow' :
+            `${suffix}Arrow`
+          )}
         />
       </defs>
       <line
@@ -43,18 +48,22 @@ export const ArrowedLine = (props) => {
         y1={scale.y(eFrom.y)}
         x2={scale.x(eTo.x)}
         y2={scale.y(eTo.y)}
-        className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
-        markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
-        markerStart={`url(#${props.markerId || markerId}-${suffix})`}
+        className={classNames(
+          'line',
+          disabled && 'disabledSecondary',
+          correctness,
+          className
+        )}
+        markerEnd={`url(#${finalMarkerId}-${suffix})`}
+        markerStart={`url(#${finalMarkerId}-${suffix})`}
         {...rest}
       />
-    </g>
+    </StyledArrowedLineRoot>
   );
 };
 
 ArrowedLine.propTypes = {
   className: PropTypes.string,
-  classes: PropTypes.object,
   correctness: PropTypes.string,
   disabled: PropTypes.bool,
   graphProps: types.GraphPropsType,
@@ -63,9 +72,7 @@ ArrowedLine.propTypes = {
   markerId: PropTypes.string,
 };
 
-const StyledArrowedLine = withStyles(lineStyles)(ArrowedLine);
-
-const Line = lineBase(StyledArrowedLine);
+const Line = lineBase(ArrowedLine);
 const Component = lineToolComponent(Line);
 
 export default Component;

package/src/tools/polygon/component.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import { ToolPropTypeFields } from '../shared/types';
 import { BasePoint } from '../shared/point';
 import chunk from 'lodash/chunk';
@@ -304,7 +303,7 @@ export class RawBaseComponent extends React.Component {
   }
 }
 
-export const BaseComponent = withStyles(() => ({}))(RawBaseComponent);
+export const BaseComponent = RawBaseComponent;
 
 export default class Component extends React.Component {
   static propTypes = {

package/src/tools/polygon/line.jsx

@@ -1,16 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { types, gridDraggable } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import * as utils from '../../utils';
-import classNames from 'classnames';
 import { correct, disabled, disabledSecondary, incorrect, missing } from '../shared/styles';
 
+const StyledLine = styled('line')(({ theme, disabled: isDisabled, correctness }) => ({
+  strokeWidth: 3,
+  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
+  stroke: 'transparent',
+  '&:hover': {
+    strokeWidth: 4,
+    stroke: color.defaults.BLACK,
+  },
+  ...(isDisabled && {
+    ...disabled('stroke'),
+    strokeWidth: 2,
+  }),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    strokeWidth: 1,
+    strokeDasharray: '4 3',
+  }),
+}));
+
 class RawLine extends React.Component {
   static propTypes = {
     className: PropTypes.string,
-    classes: PropTypes.object,
     from: types.PointType,
     to: types.PointType,
     graphProps: types.GraphPropsType.isRequired,
@@ -24,47 +43,24 @@ class RawLine extends React.Component {
   };
 
   render() {
-    const { graphProps, classes, from, to, className, disabled, correctness, ...rest } = this.props;
+    const { graphProps, from, to, className, disabled, correctness, ...rest } = this.props;
     const { scale } = graphProps;
     return (
-      <line
+      <StyledLine
         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, className, classes[correctness])}
+        className={className}
+        disabled={disabled}
+        correctness={correctness}
         {...rest}
       />
     );
   }
 }
 
-export const Line = withStyles(() => ({
-  line: {
-    strokeWidth: 3,
-    transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
-    stroke: 'transparent',
-    '&:hover': {
-      strokeWidth: 4,
-      stroke: color.defaults.BLACK,
-    },
-  },
-  disabled: {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  },
-  disabledSecondary: {
-    ...disabledSecondary('stroke'),
-    strokeWidth: 2,
-  },
-  correct: correct('stroke'),
-  incorrect: incorrect('stroke'),
-  missing: {
-    ...missing('stroke'),
-    strokeWidth: 1,
-    strokeDasharray: '4 3',
-  },
-}))(RawLine);
+export const Line = RawLine;
 
 export default gridDraggable({
   bounds: (props, { domain, range }) => {

package/src/tools/polygon/polygon.jsx

@@ -1,13 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { gridDraggable, types } from '@pie-lib/plot';
 import * as utils from '../../utils';
-import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
-import { fade } from '@material-ui/core/styles/colorManipulator';
 import { correct, disabled, incorrect, missing } from '../shared/styles';
 
+const StyledPolygon = styled('polygon')(({ theme, disabled: isDisabled, correctness }) => ({
+  fill: alpha(theme.palette.primary.light, 0.2),
+  strokeWidth: 2,
+  stroke: color.defaults.BLACK,
+  ...(isDisabled && disabled('stroke')),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    stroke: 'inherit',
+  }),
+}));
+
+const StyledPolyline = styled('polyline')(({ theme, disabled: isDisabled, correctness }) => ({
+  fill: alpha(theme.palette.primary.light, 0.0),
+  strokeWidth: 2,
+  stroke: color.defaults.BLACK,
+  pointerEvents: 'none',
+  ...(isDisabled && disabled('stroke')),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    stroke: 'inherit',
+  }),
+}));
+
 export const getPointString = (points, scale) => {
   return (points || [])
     .map((p) => {
@@ -22,7 +47,6 @@ export const getPointString = (points, scale) => {
 
 export class RawPolygon extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     points: PropTypes.arrayOf(types.PointType),
@@ -36,53 +60,36 @@ export class RawPolygon extends React.Component {
   };
 
   render() {
-    const { points, classes, className, disabled, correctness, graphProps, closed, ...rest } = this.props;
+    const { points, className, disabled, correctness, graphProps, closed, ...rest } = this.props;
     const { scale } = graphProps;
 
     const pointString = getPointString(points, scale);
-    const Tag = closed ? 'polygon' : 'polyline';
-    return (
-      <Tag
-        points={pointString}
-        className={classNames(
-          closed && classes.closed,
-          !closed && classes.open,
-          disabled && classes.disabled,
-          classes[correctness],
-          className,
-        )}
-        {...rest}
-      />
-    );
+    
+    if (closed) {
+      return (
+        <StyledPolygon
+          points={pointString}
+          className={className}
+          disabled={disabled}
+          correctness={correctness}
+          {...rest}
+        />
+      );
+    } else {
+      return (
+        <StyledPolyline
+          points={pointString}
+          className={className}
+          disabled={disabled}
+          correctness={correctness}
+          {...rest}
+        />
+      );
+    }
   }
 }
 
-export const Polygon = withStyles((theme) => ({
-  closed: {
-    fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color
-    strokeWidth: 2,
-    stroke: color.defaults.BLACK,
-  },
-  open: {
-    fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color
-    strokeWidth: 2,
-    stroke: color.defaults.BLACK,
-    pointerEvents: 'none',
-  },
-  disabled: {
-    ...disabled('stroke'),
-  },
-  correct: {
-    ...correct('stroke'),
-  },
-  incorrect: {
-    ...incorrect('stroke'),
-  },
-  missing: {
-    ...missing('stroke'),
-    stroke: 'inherit',
-  },
-}))(RawPolygon);
+export const Polygon = RawPolygon;
 
 export default gridDraggable({
   bounds: (props, { domain, range }) => {

package/src/tools/ray/component.jsx

@@ -3,39 +3,55 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ArrowMarker, genUid } from '../shared/arrow-head';
 import { trig, types } from '@pie-lib/plot';
-import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
+import { styled } from '@mui/material/styles';
 
-const rayStyles = (theme) => ({
-  line: styles.line(theme),
-  enabledArrow: styles.arrow(theme),
-  disabledArrow: styles.disabledArrow(theme),
-  disabled: styles.disabled(theme),
-  disabledSecondary: styles.disabledSecondary(theme),
-  correct: styles.correct(theme, 'stroke'),
-  correctArrow: styles.correct(theme),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  incorrectArrow: styles.incorrect(theme),
-  missing: styles.missing(theme, 'stroke'),
-  missingArrow: styles.missing(theme),
-});
+const StyledRayRoot = styled('g')(({ theme, disabled, correctness }) => ({
+  '& line': {
+    ...styles.line(theme),
+    ...(disabled && styles.disabledSecondary(theme)),
+    ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+    ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+    ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+  },
+  '& .enabledArrow': {
+    ...styles.arrow(theme),
+  },
+  '& .disabledArrow': {
+    ...styles.disabledArrow(theme),
+  },
+  '& .correctArrow': {
+    ...styles.correct(theme),
+  },
+  '& .incorrectArrow': {
+    ...styles.incorrect(theme),
+  },
+  '& .missingArrow': {
+    ...styles.missing(theme),
+  },
+}));
 
 export const RayLine = (props) => {
   const markerId = genUid();
-  const { graphProps, from, to, classes, disabled, correctness, className, ...rest } = props;
+  const { graphProps, from, to, disabled, correctness, className, markerId: propMarkerId, ...rest } = props;
   const { scale } = graphProps;
   const { domain, range } = getAdjustedGraphLimits(graphProps);
   const [aToB] = trig.edges(domain, range)(from, to);
   const suffix = correctness || (disabled && 'disabled') || 'enabled';
+  const finalMarkerId = propMarkerId || markerId;
 
   return (
-    <g>
+    <StyledRayRoot disabled={disabled} correctness={correctness}>
       <defs>
         <ArrowMarker
           size={thinnerShapesNeeded(graphProps) ? 4 : 5}
-          id={`${props.markerId || markerId}-${suffix}`}
-          className={classNames(classes[`${suffix}Arrow`])}
+          id={`${finalMarkerId}-${suffix}`}
+          className={classNames(
+            suffix === 'enabled' ? 'enabledArrow' :
+            suffix === 'disabled' ? 'disabledArrow' :
+            `${suffix}Arrow`
+          )}
         />
       </defs>
       <line
@@ -43,16 +59,15 @@ export const RayLine = (props) => {
         y1={scale.y(from.y)}
         x2={scale.x(aToB.x)}
         y2={scale.y(aToB.y)}
+        className={className}
+        markerEnd={`url(#${finalMarkerId}-${suffix})`}
         {...rest}
-        className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
-        markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
       />
-    </g>
+    </StyledRayRoot>
   );
 };
 
 RayLine.propTypes = {
-  classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   correctness: PropTypes.string,
@@ -62,9 +77,7 @@ RayLine.propTypes = {
   markerId: PropTypes.string,
 };
 
-const StyledRay = withStyles(rayStyles)(RayLine);
-
-const Ray = lineBase(StyledRay);
+const Ray = lineBase(RayLine);
 const Component = lineToolComponent(Ray);
 
 export default Component;