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

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

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

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

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