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

package/src/tools/circle/bg-circle.jsx

@@ -1,21 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { types, gridDraggable } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import * as utils from '../../utils';
 import { disabled, disabledSecondary, correct, incorrect, missing } from '../shared/styles';
+import { styled } from '@mui/material/styles';
 
-/**
- * A low level circle component
- *
- * TODO: This and base point have a lot of similarities - merge commonality
- *
- */
 class RawCircle extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     correctness: PropTypes.string,
     disabled: PropTypes.bool,
@@ -26,14 +19,14 @@ class RawCircle extends React.Component {
   };
 
   render() {
-    const { classes, disabled, className, correctness, x, y, radius, graphProps, ...rest } = this.props;
+    const { disabled, className, correctness, x, y, radius, graphProps, ...rest } = this.props;
     const { scale } = graphProps;
     const rx = Math.abs(scale.x(x + radius) - scale.x(x));
     const ry = Math.abs(scale.y(y + radius) - scale.y(y));
 
     return (
-      <ellipse
-        className={classNames(classes.bgCircle, disabled && classes.disabledSecondary, classes[correctness], className)}
+      <StyledEllipse
+        className={classNames(className, disabled && 'disabledSecondary', correctness)}
         cx={scale.x(x)}
         cy={scale.y(y)}
         rx={rx}
@@ -44,6 +37,7 @@ class RawCircle extends React.Component {
   }
 }
 
+// helper to convert old style functions
 const applyStyle = (fn) => ({
   ...fn('stroke'),
   '&:hover': {
@@ -52,25 +46,23 @@ const applyStyle = (fn) => ({
   },
 });
 
-const styles = () => ({
-  bgCircle: {
-    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,
-    },
+const StyledEllipse = styled('ellipse')(() => ({
+  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: applyStyle(disabled),
-  disabledSecondary: applyStyle(disabledSecondary),
-  correct: applyStyle(correct),
-  incorrect: applyStyle(incorrect),
-  missing: applyStyle(missing),
-});
+  '&.disabled': applyStyle(disabled),
+  '&.disabledSecondary': applyStyle(disabledSecondary),
+  '&.correct': applyStyle(correct),
+  '&.incorrect': applyStyle(incorrect),
+  '&.missing': applyStyle(missing),
+}));
 
-export const BgCircle = withStyles(styles)(RawCircle);
+export const BgCircle = RawCircle;
 
 export default gridDraggable({
   bounds: (props, { domain, range }) => {

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)(() => ({
+  '&.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/__tests__/component.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { ArrowedLine } from '../component';
 import { graphProps as getGraphProps } from '../../../__tests__/utils';
@@ -15,9 +15,8 @@ jest.mock('@pie-lib/plot', () => {
 });
 
 describe('ArrowedLine', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -26,11 +25,12 @@ describe('ArrowedLine', () => {
       graphProps: getGraphProps(),
     };
     const props = { ...defaults, ...extras };
-    return shallow(<ArrowedLine {...props} />);
+    return render(<ArrowedLine {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      expect(wrapper()).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

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/point/__tests__/component.test.jsx

@@ -1,13 +1,17 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps, xy } from '../../../__tests__/utils';
 
 import Component from '../component';
 
 describe('Component', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras, opts) => {
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -15,52 +19,23 @@ describe('Component', () => {
       graphProps: graphProps(),
     };
     const props = { ...defaults, ...extras };
-    return shallow(<Component {...props} />, opts);
+    return render(<Component {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
-    });
-  });
-
-  describe('logic', () => {
-    describe('move', () => {
-      it('calls onChange', () => {
-        const w = wrapper({ mark: { ...xy(0, 0) } });
-        w.instance().move({ x: 1, y: 1 });
-        expect(w.state('mark')).toMatchObject({ ...xy(1, 1) });
-      });
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
 
-    describe('labelChange', () => {
-      it('callsOnChange with label removed', () => {
-        const mark = { label: 'foo' };
-        const update = {};
-        const w = wrapper({ mark });
-        w.instance().labelChange(undefined);
-        expect(onChange).toHaveBeenCalledWith(mark, update);
-      });
+    it('renders with mark', () => {
+      const { container } = renderComponent({ mark: { ...xy(0, 0) } });
+      expect(container.firstChild).toBeInTheDocument();
     });
 
-    describe('clickPoint', () => {
-      let mark;
-      let w;
-      beforeEach(() => {
-        mark = { label: 'foo' };
-        w = wrapper({ mark, labelModeEnabled: true }, { disableLifecycleMethods: true });
-        w.instance().input = {
-          focus: jest.fn(),
-        };
-        w.instance().clickPoint();
-      });
-      it('calls onChange if labelModeEnabeld', () => {
-        expect(onChange).toHaveBeenCalledWith(mark, { label: '', ...mark });
-      });
-      it('calls input.focus', () => {
-        expect(w.instance().input.focus).toHaveBeenCalled();
-      });
+    it('renders with label', () => {
+      const { container } = renderComponent({ mark: { label: 'foo', ...xy(0, 0) } });
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

package/src/tools/point/component.jsx

@@ -101,7 +101,7 @@ export class Point extends React.Component {
           }}
         />
         {labelNode &&
-          mark.hasOwnProperty('label') &&
+          Object.prototype.hasOwnProperty.call(mark, 'label') &&
           ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input = r)}