@pie-lib/graphing 4.0.22 → 4.0.24-beta.1

package/src/tools/point/component.jsx

@@ -16,15 +16,7 @@ export class Point extends React.Component {
 
   constructor(props) {
     super(props);
-    // which label is being edited, null if none - a point only has the one
-    this.state = { editingLabel: null };
-  }
-
-  componentDidUpdate(prevProps) {
-    // leaving label mode closes any label that is still being edited
-    if (prevProps.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null) {
-      this.setState({ editingLabel: null });
-    }
+    this.state = {};
   }
 
   move = (p) => {
@@ -67,12 +59,6 @@ export class Point extends React.Component {
     });
   };
 
-  stopEditingLabel = () => {
-    if (this.state.editingLabel !== null) {
-      this.setState({ editingLabel: null });
-    }
-  };
-
   clickPoint = () => {
     const { labelModeEnabled, onChange, onClick, mark } = this.props;
 
@@ -87,14 +73,17 @@ export class Point extends React.Component {
 
     onChange(mark, { label: '', ...mark });
 
-    // MarkLabel focuses itself once it is rendered - it also holds on to the focus if the model
-    // that comes back from the host (api save) remounts the input.
-    this.setState({ editingLabel: 'label' });
+    // 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 { editingLabel } = this.state;
     const mark = this.state.mark ? this.state.mark : this.props.mark;
 
     return (
@@ -122,11 +111,9 @@ export class Point extends React.Component {
           ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input = r)}
-              autoFocus={editingLabel === 'label'}
               disabled={!labelModeEnabled}
               mark={mark}
               graphProps={graphProps}
-              onBlur={this.stopEditingLabel}
               onChange={this.labelChange}
             />,
             labelNode,

package/src/tools/polygon/component.jsx

@@ -90,16 +90,6 @@ export class RawBaseComponent extends React.Component {
     points: [],
   };
 
-  // index of the point whose label is edited (points.length for the polygon label), null if none
-  state = { editingLabel: null };
-
-  componentDidUpdate(prevProps) {
-    // leaving label mode closes any label that is still being edited
-    if (prevProps.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null) {
-      this.setState({ editingLabel: null });
-    }
-  }
-
   dragPoint = (index, from, to) => {
     log('[dragPoint] from, to:', from, to);
     const { onChange, points } = this.props;
@@ -172,12 +162,6 @@ export class RawBaseComponent extends React.Component {
     onChangeProps(update);
   };
 
-  stopEditingLabel = () => {
-    if (this.state.editingLabel !== null) {
-      this.setState({ editingLabel: null });
-    }
-  };
-
   clickPoint = (point, index, data) => {
     const {
       closed,
@@ -210,9 +194,12 @@ export class RawBaseComponent extends React.Component {
         onSetMiddleLabel(strippedMiddle, strippedPoints);
       }
 
-      // MarkLabel focuses itself once it is rendered - it also holds on to the focus if the model
-      // that comes back from the host (api save) remounts the input.
-      this.setState({ editingLabel: index });
+      // 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;
     }
@@ -243,7 +230,6 @@ export class RawBaseComponent extends React.Component {
       labelNode,
       labelModeEnabled,
     } = this.props;
-    const { editingLabel } = this.state;
     const lines = buildLines(points, closed);
     const common = { onDragStart, onDragStop, graphProps, disabled, correctness };
     const polygonLabelIndex = (points && points.length) || 0;
@@ -253,11 +239,9 @@ export class RawBaseComponent extends React.Component {
       polygonLabelNode = ReactDOM.createPortal(
         <MarkLabel
           inputRef={(r) => (this.input[polygonLabelIndex] = r)}
-          autoFocus={editingLabel === polygonLabelIndex}
           disabled={disabled || !labelModeEnabled}
           mark={middle}
           graphProps={graphProps}
-          onBlur={this.stopEditingLabel}
           onChange={(label) => onChangeLabelProps({ ...middle, label })}
         />,
         labelNode,
@@ -307,11 +291,9 @@ export class RawBaseComponent extends React.Component {
               ? ReactDOM.createPortal(
                   <MarkLabel
                     inputRef={(r) => (this.input[index] = r)}
-                    autoFocus={editingLabel === index}
                     disabled={disabled || !labelModeEnabled}
                     mark={p}
                     graphProps={graphProps}
-                    onBlur={this.stopEditingLabel}
                     onChange={(label) => this.labelChange({ ...p, label }, index)}
                   />,
                   labelNode,

package/src/tools/shared/line/index.jsx

@@ -234,16 +234,6 @@ export const lineBase = (Comp, opts) => {
       labelNode: PropTypes.object,
     };
 
-    // which of from/to/middle has its label edited, null if none
-    state = { editingLabel: null };
-
-    componentDidUpdate(prevProps) {
-      // leaving label mode closes any label that is still being edited
-      if (prevProps.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null) {
-        this.setState({ editingLabel: null });
-      }
-    }
-
     onChangePoint = (point) => {
       const { middle, onChange } = this.props;
       const { from, to } = point;
@@ -313,12 +303,6 @@ export const lineBase = (Comp, opts) => {
       changeMarkProps({ [type]: update });
     };
 
-    stopEditingLabel = () => {
-      if (this.state.editingLabel !== null) {
-        this.setState({ editingLabel: null });
-      }
-    };
-
     clickPoint = (point, type, data) => {
       const { changeMarkProps, disabled, from, to, middle, labelModeEnabled, limitLabeling, onClick } = this.props;
 
@@ -347,9 +331,9 @@ export const lineBase = (Comp, opts) => {
         [type]: { label: '', ...point },
       });
 
-      // MarkLabel focuses itself once it is rendered - it also holds on to the focus if the model
-      // that comes back from the host (api save) remounts the input.
-      this.setState({ editingLabel: type });
+      if (this.input[type]) {
+        this.input[type].focus();
+      }
     };
 
     // IMPORTANT, do not remove
@@ -370,7 +354,6 @@ export const lineBase = (Comp, opts) => {
         labelNode,
         labelModeEnabled,
       } = this.props;
-      const { editingLabel } = this.state;
       const common = { graphProps, onDragStart, onDragStop, disabled, correctness, onClick };
       const angle = to ? trig.toDegrees(trig.angle(from, to)) : 0;
 
@@ -383,11 +366,9 @@ export const lineBase = (Comp, opts) => {
           fromLabelNode = ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input.from = r)}
-              autoFocus={editingLabel === 'from'}
               disabled={!labelModeEnabled}
               mark={from}
               graphProps={graphProps}
-              onBlur={this.stopEditingLabel}
               onChange={(label) => this.labelChange({ ...from, label }, 'from')}
             />,
             labelNode,
@@ -398,11 +379,9 @@ export const lineBase = (Comp, opts) => {
           toLabelNode = ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input.to = r)}
-              autoFocus={editingLabel === 'to'}
               disabled={!labelModeEnabled}
               mark={to}
               graphProps={graphProps}
-              onBlur={this.stopEditingLabel}
               onChange={(label) => this.labelChange({ ...to, label }, 'to')}
             />,
             labelNode,
@@ -413,11 +392,9 @@ export const lineBase = (Comp, opts) => {
           lineLabelNode = ReactDOM.createPortal(
             <MarkLabel
               inputRef={(r) => (this.input.middle = r)}
-              autoFocus={editingLabel === 'middle'}
               disabled={!labelModeEnabled}
               mark={middle}
               graphProps={graphProps}
-              onBlur={this.stopEditingLabel}
               onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}
             />,
             labelNode,

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/src/__tests__/bg.test.jsx

@@ -1,250 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import { select } from 'd3-selection';
-import Bg from '../bg';
-
-jest.mock('d3-selection', () => ({
-  select: jest.fn(),
-  pointer: jest.fn(() => [50, 50]),
-}));
-
-describe('Bg', () => {
-  let defaultProps;
-  let mockRect;
-  let clickHandler;
-
-  beforeEach(() => {
-    clickHandler = null;
-    mockRect = {
-      on: jest.fn((event, handler) => {
-        if (event === 'click') {
-          clickHandler = handler;
-        }
-      }),
-      node: jest.fn(() => ({})),
-    };
-
-    select.mockReturnValue(mockRect);
-
-    defaultProps = {
-      width: 500,
-      height: 400,
-      onClick: jest.fn(),
-      graphProps: {
-        domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
-        range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
-        size: { width: 500, height: 400 },
-        scale: {
-          x: {
-            invert: jest.fn((val) => val / 10),
-          },
-          y: {
-            invert: jest.fn((val) => val / 10),
-          },
-        },
-      },
-    };
-  });
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('renders a rect element', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-      expect(rect).toBeTruthy();
-    });
-
-    it('applies correct dimensions', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-
-      // Width and height should be expanded by padding * 2
-      const padding = 10; // default padding
-      expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
-      expect(rect.getAttribute('height')).toBe(String(defaultProps.height + padding * 2));
-    });
-
-    it('applies correct transform', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-      const padding = 10;
-
-      expect(rect.getAttribute('transform')).toBe(`translate(-${padding}, -${padding})`);
-    });
-
-    it('sets fill opacity to make it invisible', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-
-      expect(rect.getAttribute('fill-opacity')).toBe('0.0');
-    });
-  });
-
-  describe('componentDidMount', () => {
-    it('attaches click handler to rect', () => {
-      render(<Bg {...defaultProps} />);
-
-      expect(select).toHaveBeenCalled();
-      expect(mockRect.on).toHaveBeenCalledWith('click', expect.any(Function));
-    });
-  });
-
-  describe('getRectPadding', () => {
-    it('returns 10 for normal graphs', () => {
-      const { container } = render(<Bg {...defaultProps} />);
-      const rect = container.querySelector('rect');
-      const padding = 10;
-
-      expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
-    });
-
-    it('returns 6 for graphs with thinner shapes', () => {
-      const props = {
-        ...defaultProps,
-        graphProps: {
-          ...defaultProps.graphProps,
-          domain: { min: -100, max: 100, step: 1, label: 'x', axisLabel: 'X' },
-        },
-      };
-
-      const { container } = render(<Bg {...props} />);
-      const rect = container.querySelector('rect');
-      const padding = 6;
-
-      expect(rect.getAttribute('width')).toBe(String(props.width + padding * 2));
-    });
-  });
-
-  describe('onRectClick', () => {
-    it('calls onClick with snapped coordinates', () => {
-      const { pointer } = require('d3-selection');
-      pointer.mockReturnValue([100, 100]);
-
-      render(<Bg {...defaultProps} />);
-
-      const event = new MouseEvent('click');
-      clickHandler(event);
-
-      expect(defaultProps.onClick).toHaveBeenCalled();
-      const calledWith = defaultProps.onClick.mock.calls[0][0];
-      expect(calledWith).toHaveProperty('x');
-      expect(calledWith).toHaveProperty('y');
-    });
-
-    it('snaps coordinates to nearest tick', () => {
-      const { pointer } = require('d3-selection');
-
-      render(<Bg {...defaultProps} />);
-
-      const event = new MouseEvent('click');
-      clickHandler(event);
-
-      expect(defaultProps.onClick).toHaveBeenCalled();
-      const { x, y } = defaultProps.onClick.mock.calls[0][0];
-
-      expect(Number.isInteger(x) || x.toString().length <= 4).toBe(true);
-      expect(Number.isInteger(y) || y.toString().length <= 4).toBe(true);
-    });
-
-    it('accounts for padding when converting coordinates', () => {
-      const { pointer } = require('d3-selection');
-      const coords = [50, 50];
-      pointer.mockReturnValue(coords);
-
-      render(<Bg {...defaultProps} />);
-
-      const event = new MouseEvent('click');
-      clickHandler(event);
-
-      expect(defaultProps.graphProps.scale.x.invert).toHaveBeenCalled();
-      expect(defaultProps.graphProps.scale.y.invert).toHaveBeenCalled();
-    });
-  });
-
-  describe('shouldComponentUpdate', () => {
-    it('returns true when width changes', () => {
-      const { rerender } = render(<Bg {...defaultProps} />);
-      const newProps = {
-        ...defaultProps,
-        width: 600,
-        graphProps: {
-          ...defaultProps.graphProps,
-          size: { width: 600, height: defaultProps.height },
-        },
-      };
-
-      expect(() => {
-        rerender(<Bg {...newProps} />);
-      }).not.toThrow();
-    });
-
-    it('returns true when height changes', () => {
-      const { rerender } = render(<Bg {...defaultProps} />);
-      const newProps = {
-        ...defaultProps,
-        height: 500,
-        graphProps: {
-          ...defaultProps.graphProps,
-          size: { width: defaultProps.width, height: 500 },
-        },
-      };
-
-      expect(() => {
-        rerender(<Bg {...newProps} />);
-      }).not.toThrow();
-    });
-
-    it('returns true when graphProps domain/range changes', () => {
-      const { rerender } = render(<Bg {...defaultProps} />);
-      const newProps = {
-        ...defaultProps,
-        graphProps: {
-          ...defaultProps.graphProps,
-          domain: { min: -5, max: 5, step: 1, label: 'x', axisLabel: 'X' },
-        },
-      };
-
-      expect(() => {
-        rerender(<Bg {...newProps} />);
-      }).not.toThrow();
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles zero dimensions', () => {
-      const props = { ...defaultProps, width: 0, height: 0 };
-      const { container } = render(<Bg {...props} />);
-      const rect = container.querySelector('rect');
-
-      expect(rect).toBeTruthy();
-    });
-
-    it('handles large dimensions', () => {
-      const props = { ...defaultProps, width: 10000, height: 10000 };
-      const { container } = render(<Bg {...props} />);
-      const rect = container.querySelector('rect');
-
-      expect(rect).toBeTruthy();
-      expect(rect.getAttribute('width')).toBe('10020');
-      expect(rect.getAttribute('height')).toBe('10020');
-    });
-
-    it('handles negative coordinates in domain/range', () => {
-      const props = {
-        ...defaultProps,
-        graphProps: {
-          ...defaultProps.graphProps,
-          domain: { min: -100, max: -10, step: 1, label: 'x', axisLabel: 'X' },
-          range: { min: -100, max: -10, step: 1, label: 'y', axisLabel: 'Y' },
-        },
-      };
-
-      const { container } = render(<Bg {...props} />);
-      expect(container.querySelector('rect')).toBeTruthy();
-    });
-  });
-});