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

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

@@ -0,0 +1,349 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { graphProps, xy } from '../../../__tests__/utils';
+
+import Component from '../component';
+
+describe('Component', () => {
+  let onChange;
+  let onClick;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    onClick = jest.fn();
+  });
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      onClick,
+      graphProps: graphProps(),
+      mark: xy(0, 0),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Component {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with mark', () => {
+      const { container } = renderComponent({ mark: { ...xy(0, 0) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with label', () => {
+      const { container } = renderComponent({ mark: { label: 'foo', ...xy(0, 0) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with different coordinates', () => {
+      const { container } = renderComponent({ mark: { ...xy(5, -3) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with empty label', () => {
+      const { container } = renderComponent({ mark: { label: '', ...xy(1, 1) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with negative coordinates', () => {
+      const { container } = renderComponent({ mark: { ...xy(-5, -5) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with decimal coordinates', () => {
+      const { container } = renderComponent({ mark: { ...xy(1.5, 2.5) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with zero coordinates', () => {
+      const { container } = renderComponent({ mark: { ...xy(0, 0) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with large coordinate values', () => {
+      const { container } = renderComponent({ mark: { ...xy(1000, 1000) } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('state properties', () => {
+    it('renders with disabled state', () => {
+      const { container } = renderComponent({ mark: { ...xy(1, 1), disabled: true } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness state - correct', () => {
+      const { container } = renderComponent({ mark: { ...xy(1, 1), correctness: 'correct' } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness state - incorrect', () => {
+      const { container } = renderComponent({ mark: { ...xy(1, 1), correctness: 'incorrect' } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness state - missing', () => {
+      const { container } = renderComponent({ mark: { ...xy(1, 1), correctness: 'missing' } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with fill color', () => {
+      const { container } = renderComponent({ mark: { ...xy(1, 1), fill: '#ff0000' } });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('label functionality', () => {
+    it('renders label portal when labelNode is provided', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'Test' },
+        labelNode,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders without label portal when labelNode is not provided', () => {
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'Test' },
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('does not render label portal when mark has no label property', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1) },
+        labelNode,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'Test' },
+        labelNode,
+        labelModeEnabled: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled disabled', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'Test' },
+        labelNode,
+        labelModeEnabled: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles empty string label', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: '' },
+        labelNode,
+        labelModeEnabled: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles long label text', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'This is a very long label text for testing' },
+        labelNode,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles label with special characters', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'Test@#$%' },
+        labelNode,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('coordinates on hover', () => {
+    it('renders with coordinatesOnHover enabled', () => {
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1) },
+        coordinatesOnHover: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with coordinatesOnHover disabled', () => {
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1) },
+        coordinatesOnHover: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('interaction modes', () => {
+    it('renders in label mode', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'A' },
+        labelModeEnabled: true,
+        labelNode,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in normal mode', () => {
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1) },
+        labelModeEnabled: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles disabled point in label mode', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: { ...xy(1, 1), label: 'A', disabled: true },
+        labelModeEnabled: true,
+        labelNode,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles mark updates', () => {
+      const { rerender, container } = renderComponent({ mark: xy(1, 1) });
+      expect(container.firstChild).toBeInTheDocument();
+
+      rerender(<Component mark={xy(2, 2)} onChange={onChange} onClick={onClick} graphProps={graphProps()} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles mark with all properties', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container } = renderComponent({
+        mark: {
+          ...xy(3, 4),
+          label: 'Complete',
+          disabled: false,
+          correctness: 'correct',
+          fill: '#00ff00',
+        },
+        labelNode,
+        labelModeEnabled: true,
+        coordinatesOnHover: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles mark without any optional properties', () => {
+      const { container } = renderComponent({ mark: xy(1, 1) });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles rapid mark position changes', () => {
+      const { rerender, container } = renderComponent({ mark: xy(0, 0) });
+
+      for (let i = 1; i <= 5; i++) {
+        rerender(<Component mark={xy(i, i)} onChange={onChange} onClick={onClick} graphProps={graphProps()} />);
+      }
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('component lifecycle', () => {
+    it('initializes with empty state', () => {
+      const { container } = renderComponent({ mark: xy(1, 1) });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('updates when mark prop changes', () => {
+      const { container, rerender } = renderComponent({ mark: xy(1, 1) });
+      expect(container.firstChild).toBeInTheDocument();
+
+      rerender(<Component mark={xy(5, 5)} onChange={onChange} onClick={onClick} graphProps={graphProps()} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles label addition', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container, rerender } = renderComponent({
+        mark: xy(1, 1),
+        labelNode,
+      });
+
+      rerender(
+        <Component
+          mark={{ ...xy(1, 1), label: 'New' }}
+          onChange={onChange}
+          onClick={onClick}
+          graphProps={graphProps()}
+          labelNode={labelNode}
+        />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles label removal', () => {
+      const labelNode = document.createElement('foreignObject');
+      const { container, rerender } = renderComponent({
+        mark: { ...xy(1, 1), label: 'Remove' },
+        labelNode,
+      });
+
+      rerender(
+        <Component
+          mark={xy(1, 1)}
+          onChange={onChange}
+          onClick={onClick}
+          graphProps={graphProps()}
+          labelNode={labelNode}
+        />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('graphProps variations', () => {
+    it('handles different domain and range', () => {
+      const customGraphProps = graphProps(0, 10, 0, 10);
+      const { container } = renderComponent({
+        mark: xy(5, 5),
+        graphProps: customGraphProps,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles negative domain and range', () => {
+      const customGraphProps = graphProps(-10, 0, -10, 0);
+      const { container } = renderComponent({
+        mark: xy(-5, -5),
+        graphProps: customGraphProps,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles large domain and range', () => {
+      const customGraphProps = graphProps(-100, 100, -100, 100);
+      const { container } = renderComponent({
+        mark: xy(50, 50),
+        graphProps: customGraphProps,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/point/__tests__/index.test.js

@@ -0,0 +1,241 @@
+import { tool } from '../index';
+import Point from '../component';
+
+describe('point tool', () => {
+  let pointTool;
+
+  beforeEach(() => {
+    pointTool = tool();
+  });
+
+  describe('tool structure', () => {
+    it('returns an object with required properties', () => {
+      expect(pointTool).toHaveProperty('label', 'Point');
+      expect(pointTool).toHaveProperty('type', 'point');
+      expect(pointTool).toHaveProperty('Component', Point);
+      expect(pointTool).toHaveProperty('addPoint');
+    });
+
+    it('has correct label', () => {
+      expect(pointTool.label).toBe('Point');
+    });
+
+    it('has correct type', () => {
+      expect(pointTool.type).toBe('point');
+    });
+
+    it('uses Point component', () => {
+      expect(pointTool.Component).toBe(Point);
+    });
+
+    it('does not have complete method', () => {
+      expect(pointTool.complete).toBeUndefined();
+    });
+  });
+
+  describe('addPoint', () => {
+    it('creates a point mark from coordinates', () => {
+      const point = { x: 1, y: 2 };
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+        x: 1,
+        y: 2,
+      });
+    });
+
+    it('creates point with integer coordinates', () => {
+      const point = { x: 5, y: 10 };
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+        x: 5,
+        y: 10,
+      });
+    });
+
+    it('creates point with decimal coordinates', () => {
+      const point = { x: 1.5, y: 2.75 };
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+        x: 1.5,
+        y: 2.75,
+      });
+    });
+
+    it('creates point with negative coordinates', () => {
+      const point = { x: -3, y: -7 };
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+        x: -3,
+        y: -7,
+      });
+    });
+
+    it('creates point with zero coordinates', () => {
+      const point = { x: 0, y: 0 };
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+        x: 0,
+        y: 0,
+      });
+    });
+
+    it('creates point at origin', () => {
+      const result = pointTool.addPoint({ x: 0, y: 0 });
+
+      expect(result.x).toBe(0);
+      expect(result.y).toBe(0);
+    });
+
+    it('spreads all point properties', () => {
+      const point = { x: 1, y: 2, label: 'A', color: 'red' };
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+        x: 1,
+        y: 2,
+        label: 'A',
+        color: 'red',
+      });
+    });
+
+    it('preserves additional properties from point object', () => {
+      const point = {
+        x: 3,
+        y: 4,
+        id: 'point-1',
+        fill: 'blue',
+        stroke: 'black',
+      };
+      const result = pointTool.addPoint(point);
+
+      expect(result.type).toBe('point');
+      expect(result.x).toBe(3);
+      expect(result.y).toBe(4);
+      expect(result.id).toBe('point-1');
+      expect(result.fill).toBe('blue');
+      expect(result.stroke).toBe('black');
+    });
+
+    it('ignores existing mark parameter', () => {
+      const point = { x: 1, y: 2 };
+      const existingMark = { type: 'point', x: 5, y: 5 };
+      const result = pointTool.addPoint(point, existingMark);
+
+      // Point tool always creates new mark, ignoring existing
+      expect(result).toEqual({
+        type: 'point',
+        x: 1,
+        y: 2,
+      });
+    });
+
+    it('creates new point even with same coordinates', () => {
+      const point = { x: 1, y: 2 };
+      const result1 = pointTool.addPoint(point);
+      const result2 = pointTool.addPoint(point);
+
+      expect(result1).toEqual(result2);
+      expect(result1).not.toBe(result2); // Different object references
+    });
+
+    it('handles very large coordinates', () => {
+      const point = { x: 1000000, y: -1000000 };
+      const result = pointTool.addPoint(point);
+
+      expect(result.x).toBe(1000000);
+      expect(result.y).toBe(-1000000);
+    });
+
+    it('handles very small coordinates', () => {
+      const point = { x: 0.0001, y: 0.0002 };
+      const result = pointTool.addPoint(point);
+
+      expect(result.x).toBe(0.0001);
+      expect(result.y).toBe(0.0002);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles point with only x coordinate', () => {
+      const point = { x: 5 };
+      const result = pointTool.addPoint(point);
+
+      expect(result.type).toBe('point');
+      expect(result.x).toBe(5);
+      expect(result.y).toBeUndefined();
+    });
+
+    it('handles point with only y coordinate', () => {
+      const point = { y: 5 };
+      const result = pointTool.addPoint(point);
+
+      expect(result.type).toBe('point');
+      expect(result.x).toBeUndefined();
+      expect(result.y).toBe(5);
+    });
+
+    it('handles empty point object', () => {
+      const point = {};
+      const result = pointTool.addPoint(point);
+
+      expect(result).toEqual({
+        type: 'point',
+      });
+    });
+
+    it('handles NaN coordinates', () => {
+      const point = { x: NaN, y: NaN };
+      const result = pointTool.addPoint(point);
+
+      expect(result.type).toBe('point');
+      expect(Number.isNaN(result.x)).toBe(true);
+      expect(Number.isNaN(result.y)).toBe(true);
+    });
+
+    it('handles Infinity coordinates', () => {
+      const point = { x: Infinity, y: -Infinity };
+      const result = pointTool.addPoint(point);
+
+      expect(result.x).toBe(Infinity);
+      expect(result.y).toBe(-Infinity);
+    });
+  });
+
+  describe('multiple points', () => {
+    it('creates multiple distinct points', () => {
+      const points = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+      ];
+
+      const results = points.map((p) => pointTool.addPoint(p));
+
+      expect(results).toHaveLength(3);
+      results.forEach((result, i) => {
+        expect(result.type).toBe('point');
+        expect(result.x).toBe(points[i].x);
+        expect(result.y).toBe(points[i].y);
+      });
+    });
+
+    it('each point is independent', () => {
+      const point1 = pointTool.addPoint({ x: 1, y: 1 });
+      const point2 = pointTool.addPoint({ x: 2, y: 2 });
+
+      point1.label = 'A';
+      expect(point2.label).toBeUndefined();
+    });
+  });
+});

package/src/tools/point/component.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { BasePoint } from '../shared/point';
+import { ToolPropTypeFields } from '../shared/types';
+import { types } from '@pie-lib/plot';
+import ReactDOM from 'react-dom';
+import MarkLabel from '../../mark-label';
+import { isEmpty, isEqual } from 'lodash-es';
+
+export class Point extends React.Component {
+  static propTypes = {
+    graphProps: types.GraphPropsType.isRequired,
+    ...ToolPropTypeFields,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  move = (p) => {
+    const mark = { ...this.state.mark, ...p };
+    this.setState({ mark });
+  };
+
+  startDrag = () => {
+    const { onDragStart } = this.props;
+    const update = { ...this.props.mark };
+
+    if (update.label === '') {
+      delete update.label;
+    }
+    this.setState({ mark: update });
+    if (onDragStart) onDragStart();
+  };
+
+  stopDrag = () => {
+    const { onChange, onDragStop } = this.props;
+    const mark = { ...this.state.mark };
+    this.setState({ mark: undefined }, () => {
+      if (!isEqual(this.props.mark, mark)) {
+        onChange(this.props.mark, mark);
+      }
+      if (onDragStop) onDragStop();
+    });
+  };
+
+  labelChange = (label) => {
+    const { onChange } = this.props;
+    const update = { ...this.props.mark, label };
+
+    if (!label || isEmpty(label)) {
+      delete update.label;
+    }
+
+    this.setState({ mark: update }, () => {
+      onChange(this.props.mark, update);
+    });
+  };
+
+  clickPoint = () => {
+    const { labelModeEnabled, onChange, onClick, mark } = this.props;
+
+    if (!labelModeEnabled) {
+      onClick(mark);
+      return;
+    }
+
+    if (mark.disabled) {
+      return;
+    }
+
+    onChange(mark, { label: '', ...mark });
+
+    // MarkLabel is only rendered after the parent re-renders with the new label prop,
+    // so we defer focus until after that render cycle completes.
+    setTimeout(() => {
+      if (this.input) {
+        this.input.focus();
+      }
+    }, 0);
+  };
+
+  render() {
+    const { coordinatesOnHover, graphProps, labelNode, labelModeEnabled } = this.props;
+    const mark = this.state.mark ? this.state.mark : this.props.mark;
+
+    return (
+      <React.Fragment>
+        <BasePoint
+          {...mark}
+          coordinatesOnHover={coordinatesOnHover}
+          graphProps={graphProps}
+          labelNode={labelNode}
+          onDrag={this.move}
+          onDragStart={this.startDrag}
+          onDragStop={this.stopDrag}
+          onClick={this.clickPoint}
+          onTouchStart={(e) => {
+            e.stopPropagation();
+            this.clickPoint();
+          }}
+          onTouchEnd={(e) => {
+            e.stopPropagation();
+            this.clickPoint();
+          }}
+        />
+        {labelNode &&
+          Object.prototype.hasOwnProperty.call(mark, 'label') &&
+          ReactDOM.createPortal(
+            <MarkLabel
+              inputRef={(r) => (this.input = r)}
+              disabled={!labelModeEnabled}
+              mark={mark}
+              graphProps={graphProps}
+              onChange={this.labelChange}
+            />,
+            labelNode,
+          )}
+      </React.Fragment>
+    );
+  }
+}
+
+export default Point;