@pie-lib/graphing 4.0.4-next.9 → 4.0.5-next.0

package/src/tools/polygon/component.jsx

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

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

@@ -1,84 +0,0 @@
-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 && {
-    ...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,
-    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

@@ -1,110 +0,0 @@
-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: 2,
-  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: 2,
-  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

@@ -1,29 +0,0 @@
-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();
-    });
-  });
-});