@pie-lib/graphing-solution-set 2.16.0-beta.0

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasePoint snapshot renders 1`] = `
+<RawBp
+  className="className"
+  classes={
+    Object {
+      "correct": "RawBp-correct-3",
+      "disabled": "RawBp-disabled-2",
+      "incorrect": "RawBp-incorrect-4",
+      "missing": "RawBp-missing-5",
+      "point": "RawBp-point-1",
+    }
+  }
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  onChange={[MockFunction]}
+/>
+`;

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

@@ -0,0 +1,87 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import { ArrowPoint } from '../index';
+import { graphProps } from '../../../../__tests__/utils';
+import { bounds } from '../../../../utils';
+import { gridDraggable, utils } from '@pie-lib/plot';
+
+const { xy } = utils;
+jest.mock('../../../../utils', () => {
+  const { point } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot/index', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot/index');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('ArrowPoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ArrowPoint {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+        expect(bounds).toHaveBeenCalledWith({ left: 0, top: 0, bottom: 0, right: 0 }, domain, range);
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual({ x: 0, y: 3 });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import { BasePoint } from '../index';
+import { gridDraggable } from '@pie-lib/plot';
+import { graphProps } from '../../../../__tests__/utils';
+import { bounds } from '../../../../utils';
+
+jest.mock('../../../../utils', () => {
+  const { point } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot/index', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot/index');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('BasePoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<BasePoint {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+        expect(bounds).toHaveBeenCalledWith({ left: 0, top: 0, bottom: 0, right: 0 }, domain, range);
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual({ x: 0, y: 3 });
+      });
+    });
+  });
+});

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

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

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

@@ -0,0 +1,86 @@
+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 { thinnerShapesNeeded } from '../../../utils';
+import { color } from '@pie-lib/render-ui';
+
+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,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { showCoordinates: false };
+  }
+
+  render() {
+    const {
+      classes,
+      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}
+        />
+        <g
+          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], 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)}
+        </g>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,60 @@
+import { withStyles } from '@material-ui/core/styles/index';
+import { gridDraggable } from '@pie-lib/plot';
+import * as utils from '../../../utils';
+import { disabled, correct, 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 styles = () => {
+  return {
+    point: {
+      '& circle, & polygon': {
+        cursor: 'pointer',
+        fill: color.defaults.SECONDARY,
+      },
+    },
+    disabled: {
+      '& circle, & polygon': {
+        ...disabled(),
+      },
+    },
+    correct: {
+      '& circle, & polygon': {
+        ...correct(),
+      },
+    },
+    incorrect: {
+      '& circle, & polygon': {
+        ...incorrect(),
+      },
+    },
+    missing: {
+      '& circle, & polygon': {
+        ...missing(),
+      },
+    },
+  };
+};
+
+export const BasePoint = withStyles(styles)(gridDraggable(opts)(RawBp));
+export const ArrowPoint = withStyles(styles)(gridDraggable(opts)(RawArrow));
+export const Arrow = withStyles(styles)(gridDraggable(opts)(BaseArrow));

package/src/tools/shared/styles.js

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

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core';
+import { color } from '@pie-lib/render-ui';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+export class UndoRedo extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    onReset: PropTypes.func.isRequired,
+    language: PropTypes.string,
+  };
+  static defaultProps = {};
+
+  render() {
+    const { classes, className, onReset = false, language } = this.props;
+    return (
+      <div className={classNames(className)}>
+        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
+          {translator.t('graphing.reset', { lng: language })}
+        </Button>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  button: {
+    color: color.text(),
+    fontWeight: 'bold',
+    marginBottom: theme.spacing.unit / 2,
+    '&:not(:last-of-type)': {
+      marginRight: theme.spacing.unit / 2,
+    },
+  },
+  undoRedoDiv: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+});
+
+export default withStyles(styles)(UndoRedo);

package/src/use-debounce.js

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