@pie-lib/graphing 4.0.5-next.31 → 4.0.5-next.36

package/src/tools/polygon/component.jsx

@@ -0,0 +1,409 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToolPropTypeFields } from '../shared/types';
+import { BasePoint } from '../shared/point';
+import { chunk, initial, isEmpty } from 'lodash-es';
+import debug from 'debug';
+import Line from './line';
+import DraggablePolygon, { Polygon } from './polygon';
+import { types } from '@pie-lib/plot';
+import invariant from 'invariant';
+import ReactDOM from 'react-dom';
+import MarkLabel from '../../mark-label';
+import { equalPoints, getMiddleOfTwoPoints, getRightestPoints, stripEmptyLabel } from '../../utils';
+
+const log = debug('pie-lib:graphing:polygon');
+
+export const buildLines = (points, closed) => {
+  const expanded = points.reduce((acc, p, index) => {
+    acc.push({ ...p, index });
+
+    const isLast = index === points.length - 1;
+    const next = isLast ? 0 : index + 1;
+
+    acc.push({ ...points[next], index: next });
+
+    return acc;
+  }, []);
+
+  const all = chunk(expanded, 2).map(([from, to]) => {
+    return { from, to };
+  });
+
+  return closed ? all : initial(all);
+};
+
+export const swap = (arr, ...rest) => {
+  const pairs = chunk(rest, 2);
+
+  return pairs.reduce(
+    (acc, pr) => {
+      if (pr.length === 2) {
+        let [e, replacement] = pr;
+
+        invariant(Number.isFinite(e.index), 'Index must be defined');
+
+        const index = e.index;
+        // const i = acc.findIndex(pt => pt.x === e.x && pt.y === e.y);
+
+        if (index >= 0) {
+          acc.splice(index, 1, replacement);
+
+          return acc;
+        } else {
+          return acc;
+        }
+      } else {
+        return acc;
+      }
+    },
+    [...arr],
+  );
+};
+
+export class RawBaseComponent extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
+    points: PropTypes.arrayOf(types.PointType),
+    closed: PropTypes.bool,
+    coordinatesOnHover: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    onClosePolygon: PropTypes.func.isRequired,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
+    onClick: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+    isToolActive: PropTypes.bool,
+    middle: PropTypes.object,
+    labelNode: PropTypes.object,
+    labelModeEnabled: PropTypes.bool,
+    limitLabeling: PropTypes.bool,
+    onChangeLabelProps: PropTypes.func,
+    onSetMiddleLabel: PropTypes.func,
+    onChangeProps: PropTypes.func,
+  };
+
+  static defaultProps = {
+    points: [],
+  };
+
+  dragPoint = (index, from, to) => {
+    log('[dragPoint] from, to:', from, to);
+    const { onChange, points } = this.props;
+    const update = [...points];
+    const overlapPoint = !!(points || []).find((p) => equalPoints(p, to));
+
+    if (equalPoints(from, to) || overlapPoint) {
+      return;
+    }
+
+    if (points[index].label) {
+      to.label = points[index].label;
+    }
+
+    update.splice(index, 1, to);
+    onChange(update);
+  };
+
+  dragLine = (existing, next) => {
+    log('[dragLine]: ', existing, next);
+    const { onChange } = this.props;
+
+    if (existing.from.label) {
+      next.from.label = existing.from.label;
+    }
+
+    if (existing.to.label) {
+      next.to.label = existing.to.label;
+    }
+
+    const points = swap(this.props.points, existing.from, next.from, existing.to, next.to);
+    onChange(points);
+  };
+
+  dragPoly = (existing, next) => {
+    log('[dragPoly] ', existing, next);
+    const { onChange } = this.props;
+
+    next.forEach((point, index) => {
+      if (existing[index].label) {
+        next[index].label = existing[index].label;
+      }
+    });
+
+    onChange(next);
+  };
+
+  close = () => {
+    const { points, onClosePolygon } = this.props;
+    log('[close] ...');
+
+    if (points.length >= 3) {
+      onClosePolygon();
+    } else {
+      log('[close] - nope');
+    }
+  };
+
+  labelChange = (point, index) => {
+    const { points, onChangeProps } = this.props;
+    const updatedPoint = { ...point };
+
+    if (!point.label || isEmpty(point.label)) {
+      delete updatedPoint.label;
+    }
+
+    const update = [...points];
+
+    update.splice(index, 1, updatedPoint);
+    onChangeProps(update);
+  };
+
+  clickPoint = (point, index, data) => {
+    const {
+      closed,
+      disabled,
+      middle: currentMiddle,
+      onClick,
+      isToolActive,
+      labelModeEnabled,
+      limitLabeling,
+      onSetMiddleLabel,
+      points,
+    } = this.props;
+
+    if (labelModeEnabled) {
+      // limit labeling the points of the polygon
+      if (disabled || limitLabeling) {
+        return;
+      }
+
+      if (points && index === points.length) {
+        const { a, b } = getRightestPoints(points);
+        const middle = { label: '', ...point, ...getMiddleOfTwoPoints(a, b) };
+
+        onSetMiddleLabel(middle, points.map(stripEmptyLabel));
+      } else {
+        const strippedPoints = points.map(stripEmptyLabel);
+        strippedPoints.splice(index, 1, { label: '', ...point });
+
+        const strippedMiddle = currentMiddle ? stripEmptyLabel(currentMiddle) : currentMiddle;
+        onSetMiddleLabel(strippedMiddle, strippedPoints);
+      }
+
+      // defer the focus() call with setTimeout to allow the re-render to complete first.
+      setTimeout(() => {
+        if (this.input[index]) {
+          this.input[index].focus();
+        }
+      }, 0);
+
+      return;
+    }
+
+    if (isToolActive && !closed && index === 0) {
+      this.close();
+      return;
+    }
+
+    onClick(point || data);
+  };
+
+  // IMPORTANT, do not remove
+  input = {};
+
+  render() {
+    const {
+      closed,
+      coordinatesOnHover,
+      correctness,
+      disabled,
+      graphProps,
+      onChangeLabelProps,
+      onDragStart,
+      onDragStop,
+      points,
+      middle,
+      labelNode,
+      labelModeEnabled,
+    } = this.props;
+    const lines = buildLines(points, closed);
+    const common = { onDragStart, onDragStop, graphProps, disabled, correctness };
+    const polygonLabelIndex = (points && points.length) || 0;
+    let polygonLabelNode = null;
+
+    if (labelNode && middle && Object.prototype.hasOwnProperty.call(middle, 'label')) {
+      polygonLabelNode = ReactDOM.createPortal(
+        <MarkLabel
+          inputRef={(r) => (this.input[polygonLabelIndex] = r)}
+          disabled={disabled || !labelModeEnabled}
+          mark={middle}
+          graphProps={graphProps}
+          onChange={(label) => onChangeLabelProps({ ...middle, label })}
+        />,
+        labelNode,
+      );
+    }
+
+    return (
+      <g>
+        {closed ? (
+          <React.Fragment>
+            <DraggablePolygon
+              points={points}
+              onDrag={this.dragPoly.bind(this, points)}
+              closed={closed}
+              {...common}
+              onClick={this.clickPoint.bind(this, middle, polygonLabelIndex)}
+            />
+            {polygonLabelNode}
+          </React.Fragment>
+        ) : (
+          <Polygon points={points} graphProps={graphProps} closed={closed} />
+        )}
+        {(lines || []).map((l, index) => (
+          <Line
+            key={`line-${index}`}
+            from={l.from}
+            to={l.to}
+            onDrag={this.dragLine.bind(this, l)}
+            {...common}
+            onClick={this.clickPoint.bind(this, middle, polygonLabelIndex)}
+          />
+        ))}
+
+        {(points || []).map((p, index) => {
+          return [
+            <BasePoint
+              key={`point-${index}`}
+              coordinatesOnHover={coordinatesOnHover}
+              labelNode={labelNode}
+              x={p.x}
+              y={p.y}
+              onDrag={this.dragPoint.bind(this, index, p)}
+              {...common}
+              onClick={this.clickPoint.bind(this, p, index)}
+            />,
+            labelNode && Object.prototype.hasOwnProperty.call(p, 'label')
+              ? ReactDOM.createPortal(
+                  <MarkLabel
+                    inputRef={(r) => (this.input[index] = r)}
+                    disabled={disabled || !labelModeEnabled}
+                    mark={p}
+                    graphProps={graphProps}
+                    onChange={(label) => this.labelChange({ ...p, label }, index)}
+                  />,
+                  labelNode,
+                )
+              : null,
+          ];
+        })}
+      </g>
+    );
+  }
+}
+
+export const BaseComponent = RawBaseComponent;
+
+export default class Component extends React.Component {
+  static propTypes = {
+    ...ToolPropTypeFields,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  change = (points) => {
+    const {
+      mark: { middle },
+    } = this.props;
+    const mark = { ...this.state.mark, points };
+
+    if (middle) {
+      const { a, b } = getRightestPoints(points);
+
+      mark.middle = { ...middle, ...getMiddleOfTwoPoints(a, b) };
+    }
+
+    this.setState({ mark });
+  };
+
+  changeProps = (points) => {
+    const mark = { ...this.props.mark, points };
+
+    this.props.onChange(this.props.mark, mark);
+  };
+
+  changeLabelProps = (point) => {
+    const { mark, onChange } = this.props;
+    const middle = { ...mark.middle, ...point };
+
+    if (!middle.label || isEmpty(middle.label)) {
+      delete middle.label;
+    }
+
+    onChange(mark, { ...mark, middle });
+  };
+
+  setMiddleLabel = (middle, strippedPoints) => {
+    const { mark, onChange } = this.props;
+    const next = { ...mark, middle };
+    if (strippedPoints) {
+      next.points = strippedPoints;
+    }
+    onChange(mark, next);
+  };
+
+  closePolygon = () => {
+    log('[closePolygon] ...');
+    const { onComplete, mark } = this.props;
+    const update = { ...mark, closed: true };
+
+    onComplete(mark, update);
+  };
+
+  dragStart = () => this.setState({ mark: this.props.mark });
+
+  dragStop = () => {
+    const { onChange } = this.props;
+    const m = { ...this.state.mark };
+
+    this.setState({ mark: undefined }, () => {
+      onChange(this.props.mark, m);
+    });
+  };
+
+  render() {
+    const { coordinatesOnHover, mark, graphProps, onClick, isToolActive, labelNode, labelModeEnabled, limitLabeling } =
+      this.props;
+    const { mark: stateMark } = this.state;
+
+    return (
+      <BaseComponent
+        {...(stateMark || mark)}
+        coordinatesOnHover={coordinatesOnHover}
+        onChange={this.change}
+        onChangeLabelProps={this.changeLabelProps}
+        onSetMiddleLabel={this.setMiddleLabel}
+        onChangeProps={this.changeProps}
+        onClosePolygon={this.closePolygon}
+        onDragStart={this.dragStart}
+        onDragStop={this.dragStop}
+        onClick={onClick}
+        graphProps={graphProps}
+        isToolActive={isToolActive}
+        labelNode={labelNode}
+        labelModeEnabled={labelModeEnabled}
+        limitLabeling={limitLabeling}
+      />
+    );
+  }
+}

package/src/tools/polygon/index.js

@@ -0,0 +1,52 @@
+import Polygon from './component';
+import { equalPoints } from '../../utils';
+
+export const addPointToArray = (point, arr) => {
+  arr = arr || [];
+
+  if (arr.length === 0) {
+    return { points: [point], closed: false };
+  } else if (arr.length === 1) {
+    if (equalPoints(point, arr[0])) {
+      return { points: arr, closed: false };
+    } else {
+      return { points: [...arr, point], closed: false };
+    }
+  } else if (arr.length >= 2) {
+    const closed = equalPoints(point, arr[0]);
+
+    if (closed) {
+      return { points: arr, closed };
+    } else {
+      const hasPoint = !!arr.find((p) => equalPoints(p, point));
+
+      if (hasPoint) {
+        return { points: arr, closed: false };
+      } else {
+        return { points: [...arr, point], closed: false };
+      }
+    }
+  }
+};
+
+export const tool = () => ({
+  type: 'polygon',
+  Component: Polygon,
+  complete: (data, mark) => {
+    return { ...mark, building: false, closed: true };
+  },
+  addPoint: (point, mark) => {
+    if (!mark) {
+      return {
+        type: 'polygon',
+        points: [point],
+        closed: false,
+        building: true,
+      };
+    } else {
+      const { closed, points } = addPointToArray(point, mark.points);
+
+      return { ...mark, closed, points, building: !closed };
+    }
+  },
+});

package/src/tools/polygon/line.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { gridDraggable, types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import * as utils from '../../utils';
+import { correct, disabled, incorrect, missing } from '../shared/styles';
+
+const StyledLine = styled('line')(({ disabled: isDisabled, correctness }) => ({
+  strokeWidth: 7,
+  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
+  stroke: 'transparent',
+  pointerEvents: 'stroke',
+  '&:hover': {
+    strokeWidth: 4,
+    stroke: color.defaults.BLACK,
+  },
+  ...((isDisabled || correctness) && { pointerEvents: 'none' }),
+}));
+
+class RawLine extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    from: types.PointType,
+    to: types.PointType,
+    graphProps: types.GraphPropsType.isRequired,
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
+  };
+
+  static defaultProps = {
+    from: {},
+    to: {},
+  };
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const { graphProps, from, to, className, disabled, correctness, ...rest } = this.props;
+    const { scale } = graphProps;
+    return (
+      <StyledLine
+        x1={scale.x(from.x)}
+        y1={scale.y(from.y)}
+        x2={scale.x(to.x)}
+        y2={scale.y(to.y)}
+        className={className}
+        disabled={disabled}
+        correctness={correctness}
+        {...rest}
+      />
+    );
+  }
+}
+
+export const Line = RawLine;
+
+export default gridDraggable({
+  bounds: (props, { domain, range }) => {
+    const { from, to } = props;
+    const area = utils.lineToArea(from, to);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { from } = props;
+    return from;
+  },
+  fromDelta: (props, delta) => {
+    const { from, to } = props;
+    return {
+      from: utils.point(from).add(utils.point(delta)),
+      to: utils.point(to).add(utils.point(delta)),
+    };
+  },
+})(Line);

package/src/tools/polygon/polygon.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { alpha, styled } from '@mui/material/styles';
+import { gridDraggable, types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+
+import * as utils from '../../utils';
+import { correct, disabledSecondary, incorrect, missing, graphingShapeFill } from '../shared/styles';
+
+const StyledPolygon = styled('polygon')(({ disabled: isDisabled, correctness }) => ({
+  fill: alpha(graphingShapeFill(), 0.2),
+  strokeWidth: 3,
+  stroke: color.defaults.BLACK,
+  ...(isDisabled && disabledSecondary('stroke')),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    stroke: 'inherit',
+  }),
+}));
+
+const StyledPolyline = styled('polyline')(({ disabled: isDisabled, correctness }) => ({
+  fill: alpha(graphingShapeFill(), 0.0),
+  strokeWidth: 3,
+  stroke: color.defaults.BLACK,
+  pointerEvents: 'none',
+  ...(isDisabled && disabledSecondary('stroke')),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && {
+    ...missing('stroke'),
+    stroke: 'inherit',
+  }),
+}));
+
+export const getPointString = (points, scale) => {
+  return (points || [])
+    .map((p) => {
+      const scaledPoint = {
+        x: scale.x(p.x),
+        y: scale.y(p.y),
+      };
+      return `${scaledPoint.x},${scaledPoint.y}`;
+    })
+    .join(' ');
+};
+
+export class RawPolygon extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    points: PropTypes.arrayOf(types.PointType),
+    graphProps: types.GraphPropsType.isRequired,
+    closed: PropTypes.bool.isRequired,
+    correctness: PropTypes.string,
+  };
+
+  static defaultProps = {
+    points: [],
+  };
+
+  render() {
+    const { points, className, disabled, correctness, graphProps, closed, ...rest } = this.props;
+    const { scale } = graphProps;
+
+    const pointString = getPointString(points, scale);
+
+    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 = RawPolygon;
+
+export default gridDraggable({
+  bounds: (props, { domain, range }) => {
+    const { points } = props;
+    const area = utils.polygonToArea(points);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { points } = props;
+    return points[0];
+  },
+  fromDelta: (props, delta) => {
+    const { points } = props;
+
+    return points.map((p) => utils.point(p).add(utils.point(delta)));
+  },
+})(Polygon);

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

@@ -0,0 +1,29 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { RayLine } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+
+describe('RayLine', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      markerId: '1',
+      graphProps: getGraphProps(),
+      from: utils.xy(0, 0),
+      to: utils.xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<RayLine {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});