@pie-lib/graphing 4.0.5-next.30 → 4.0.5-next.34

package/src/tools/circle/component.jsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { BasePoint } from '../shared/point';
+import BgCircle from './bg-circle';
+import { equalPoints, getMiddleOfTwoPoints, point, stripEmptyLabel } from '../../utils';
+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-es';
+import { color } from '@pie-lib/render-ui';
+import { keyframes, styled } from '@mui/material/styles';
+
+const opacityPulsate = (opacity) =>
+  keyframes({
+    '0%': { opacity: '0.0' },
+    '50%': { opacity },
+    '100%': { opacity: '0.0' },
+  });
+
+const getRadius = (from, outer) => {
+  const c = point(from);
+  return c.dist(point(outer));
+};
+
+export class RawBaseCircle extends React.Component {
+  static propTypes = {
+    building: PropTypes.bool,
+    className: PropTypes.string,
+    coordinatesOnHover: PropTypes.bool,
+    correctness: PropTypes.string,
+    from: types.PointType,
+    disabled: PropTypes.bool,
+    to: types.PointType,
+    middle: types.PointType,
+    onChange: PropTypes.func.isRequired,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+    onClick: PropTypes.func,
+    labelNode: PropTypes.object,
+    labelModeEnabled: PropTypes.bool,
+    changeMarkProps: PropTypes.func,
+    limitLabeling: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    onClick: () => ({}),
+  };
+
+  onChangePoint = (point) => {
+    const { middle, onChange } = this.props;
+    const { from, to } = point;
+
+    if (!equalPoints(from, to)) {
+      if (middle) {
+        point.middle = { ...middle, ...getMiddleOfTwoPoints(from, to) };
+      }
+      onChange(point);
+    }
+  };
+
+  dragFrom = (draggedFrom) => {
+    const { from, to } = this.props;
+
+    if (from.label) draggedFrom.label = from.label;
+    if (!equalPoints(draggedFrom, to)) {
+      this.onChangePoint({ from: draggedFrom, to });
+    }
+  };
+
+  dragTo = (draggedTo) => {
+    const { from, to } = this.props;
+
+    if (to.label) draggedTo.label = to.label;
+    if (!equalPoints(from, draggedTo)) {
+      this.onChangePoint({ from, to: draggedTo });
+    }
+  };
+
+  dragCircle = (draggedFrom) => {
+    const { from, to, onChange, middle } = this.props;
+    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;
+
+    const updated = { from: draggedFrom, to: draggedTo };
+    if (middle) {
+      updated.middle = { ...middle, ...getMiddleOfTwoPoints(draggedFrom, draggedTo) };
+    }
+
+    this.setState({ 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;
+    changeMarkProps({ [type]: update });
+  };
+
+  clickPoint = (point, type, data) => {
+    const { changeMarkProps, disabled, from, to, middle, labelModeEnabled, limitLabeling, onClick } = this.props;
+
+    if (!labelModeEnabled) {
+      onClick(point || data);
+      return;
+    }
+
+    if (disabled || limitLabeling) return;
+
+    if (type === 'middle' && !point && from && to) {
+      point = { ...point, ...getMiddleOfTwoPoints(from, to) };
+    }
+    changeMarkProps({
+      from: stripEmptyLabel(from),
+      to: stripEmptyLabel(to),
+      middle: stripEmptyLabel(middle),
+      [type]: { label: '', ...point },
+    });
+
+    if (this.input[type]) {
+      this.input[type].focus();
+    }
+  };
+
+  input = {};
+
+  render() {
+    let {
+      from,
+      to,
+      middle,
+      disabled,
+      building,
+      coordinatesOnHover,
+      onDragStart,
+      onDragStop,
+      onClick,
+      correctness,
+      graphProps,
+      labelNode,
+      labelModeEnabled,
+    } = this.props;
+
+    const common = { onDragStart, onDragStop, graphProps, onClick };
+    to = to || from;
+    const radius = getRadius(from, to);
+
+    let fromLabelNode = null;
+    let toLabelNode = null;
+    let circleLabelNode = null;
+
+    if (labelNode) {
+      if (from?.label !== undefined) {
+        fromLabelNode = ReactDOM.createPortal(
+          <MarkLabel
+            inputRef={(r) => (this.input.from = r)}
+            disabled={!labelModeEnabled}
+            mark={from}
+            graphProps={graphProps}
+            onChange={(label) => this.labelChange({ ...from, label }, 'from')}
+          />,
+          labelNode,
+        );
+      }
+
+      if (to?.label !== undefined) {
+        toLabelNode = ReactDOM.createPortal(
+          <MarkLabel
+            inputRef={(r) => (this.input.to = r)}
+            disabled={!labelModeEnabled}
+            mark={to}
+            graphProps={graphProps}
+            onChange={(label) => this.labelChange({ ...to, label }, 'to')}
+          />,
+          labelNode,
+        );
+      }
+
+      if (middle?.label !== undefined) {
+        circleLabelNode = ReactDOM.createPortal(
+          <MarkLabel
+            inputRef={(r) => (this.input.middle = r)}
+            disabled={!labelModeEnabled}
+            mark={middle}
+            graphProps={graphProps}
+            onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}
+          />,
+          labelNode,
+        );
+      }
+    }
+
+    return (
+      <g>
+        <StyledBgCircle
+          disabled={building || disabled}
+          correctness={correctness}
+          className={classNames(building && 'bgCircleBuilding')}
+          x={from.x}
+          y={from.y}
+          radius={radius}
+          onDrag={this.dragCircle}
+          {...common}
+          onClick={(data) => this.clickPoint(middle, 'middle', data)}
+        />
+        {circleLabelNode}
+
+        <BasePoint
+          disabled={building || disabled}
+          coordinatesOnHover={coordinatesOnHover}
+          correctness={correctness}
+          labelNode={labelNode}
+          x={to.x}
+          y={to.y}
+          onDrag={this.dragTo}
+          {...common}
+          onClick={(data) => this.clickPoint(to, 'to', data)}
+        />
+        {toLabelNode}
+
+        <BasePoint
+          disabled={building || disabled}
+          coordinatesOnHover={coordinatesOnHover}
+          correctness={correctness}
+          labelNode={labelNode}
+          x={from.x}
+          y={from.y}
+          className="from"
+          onDrag={this.dragFrom}
+          {...common}
+          onClick={(data) => this.clickPoint(from, 'from', data)}
+        />
+        {fromLabelNode}
+      </g>
+    );
+  }
+}
+
+// MUI v5 styled() replaces withStyles
+const StyledBgCircle = styled(BgCircle)(() => ({
+  '&.outerLine': {
+    fill: color.transparent(),
+    stroke: color.defaults.BLACK,
+    strokeWidth: 4,
+    '&:hover': {
+      strokeWidth: 6,
+      stroke: color.defaults.PRIMARY_DARK,
+    },
+  },
+  '&.bgCircleBuilding': {
+    stroke: color.defaults.BLACK,
+    animation: `${opacityPulsate('0.3')} 2s ease-out infinite`,
+    opacity: 1,
+  },
+}));
+
+export const BaseCircle = RawBaseCircle;
+const Component = rootEdgeComponent(BaseCircle);
+export default Component;

package/src/tools/circle/index.js

@@ -0,0 +1,25 @@
+import Circle from './component';
+import { equalPoints } from '../../utils';
+
+export const tool = () => ({
+  type: 'circle',
+  Component: Circle,
+  hover: (point, mark) => {
+    return { ...mark, edge: point };
+  },
+  addPoint: (point, mark) => {
+    if (mark && equalPoints(mark.root, point)) {
+      return mark;
+    }
+
+    if (!mark) {
+      return {
+        type: 'circle',
+        root: point,
+        building: true,
+      };
+    } else {
+      return { ...mark, edge: point, building: false };
+    }
+  },
+});

package/src/tools/exponential/__tests__/component.test.jsx

@@ -0,0 +1,53 @@
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { buildDataPoints, exponentialFromTwoPoints } from '@pie-lib/graphing-utils';
+import { utils } from '@pie-lib/plot';
+
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
+const { xy } = utils;
+
+jest.mock('@pie-lib/graphing-utils', () => ({
+  buildDataPoints: jest.fn().mockReturnValue([]),
+  exponentialFromTwoPoints: jest.fn(() => jest.fn()),
+  getAmplitudeAndFreq: jest.fn().mockReturnValue({ freq: 4, amplitude: 1 }),
+}));
+
+jest.mock('../../shared/line/with-root-edge', () => ({
+  withRootEdge: jest.fn(),
+  rootEdgeComponent: jest.fn(),
+}));
+
+describe('Exponential', () => {
+  let fnBody;
+  let graphProps;
+  let root;
+  let edge;
+  let result;
+
+  beforeEach(() => {
+    require('../component');
+    fnBody = withRootEdge.mock.calls[0][0];
+    graphProps = getGraphProps();
+    root = xy(1, 1);
+    edge = xy(2, 2);
+
+    result = fnBody({ graphProps, root, edge });
+  });
+
+  it('fnBody is not null', () => {
+    expect(fnBody).toBeDefined();
+  });
+
+  it('calls buildDataPoints', () => {
+    const { domain, range } = graphProps;
+    expect(buildDataPoints).toHaveBeenCalledWith(domain, range, root, edge, expect.anything(), true);
+  });
+
+  it('calls exponentialFromTwoPoints', () => {
+    expect(exponentialFromTwoPoints).toHaveBeenCalledWith(root, edge);
+  });
+
+  it('returns dataPoints', () => {
+    expect(result).toEqual({ root, edge, dataPoints: [] });
+  });
+});