@pie-lib/graphing 4.0.15 → 4.0.17

package/src/__tests__/graph.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@pie-lib/test-utils';
+import { act, fireEvent, render } from '@pie-lib/test-utils';
 import { graphProps } from './utils';
 import Graph, { removeBuildingToolIfCurrentToolDiffers } from '../graph';
 import { toolsArr } from '../tools';
@@ -719,3 +719,59 @@ describe('Graph', () => {
     });
   });
 });
+
+describe('label focus', () => {
+  // the marks are owned by the host and come back from a model save asynchronously; a mark that
+  // shows up in front of the labelled one changes its key, so the tool that handled the click is
+  // remounted and the editingLabel it set is gone before the label input ever renders
+  const Host = ({ shiftMarks }) => {
+    const [marks, setMarks] = React.useState([{ type: 'point', x: 2, y: 2 }]);
+
+    return (
+      <Graph
+        tools={toolsArr}
+        marks={marks}
+        labelModeEnabled={true}
+        onChangeMarks={(next) =>
+          setTimeout(() => setMarks(shiftMarks ? [{ type: 'point', x: 5, y: 5 }, ...next] : next), 30)
+        }
+        domain={{ min: 0, max: 10, step: 1 }}
+        range={{ min: 0, max: 10, step: 1 }}
+        size={{ width: 400, height: 400 }}
+        {...graphProps(0, 10, 0, 10)}
+      />
+    );
+  };
+
+  const clickPoint = (container) => {
+    const circle = container.querySelector('circle');
+
+    fireEvent.mouseDown(circle, { button: 0 });
+    fireEvent.mouseUp(circle, { button: 0 });
+    fireEvent.click(circle, { button: 0 });
+    act(() => jest.advanceTimersByTime(200));
+  };
+
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+
+  it('focuses the label that was just added', () => {
+    const { container } = render(<Host />);
+
+    clickPoint(container);
+
+    const input = container.querySelector('foreignObject input');
+    expect(input).not.toBe(null);
+    expect(document.activeElement).toBe(input);
+  });
+
+  it('focuses the label even if the tool was remounted before it rendered', () => {
+    const { container } = render(<Host shiftMarks={true} />);
+
+    clickPoint(container);
+
+    const input = container.querySelector('foreignObject input');
+    expect(input).not.toBe(null);
+    expect(document.activeElement).toBe(input);
+  });
+});

package/src/__tests__/mark-label.test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@pie-lib/test-utils';
+import { act, fireEvent, render } from '@pie-lib/test-utils';
 import React from 'react';
 import { coordinates, MarkLabel, position } from '../mark-label';
 import { graphProps as getGraphProps } from './utils';
@@ -30,6 +30,265 @@ describe('MarkLabel', () => {
   });
 });
 
+describe('MarkLabel - editing', () => {
+  let onChange;
+  let onBlur;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    onBlur = jest.fn();
+  });
+
+  // the label input is the only input MarkLabel renders (react-input-autosize)
+  const input = (container) => container.querySelector('input');
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      onChange,
+      onBlur,
+      inputRef: jest.fn(),
+      mark: { x: 1, y: 1, label: '' },
+      graphProps: getGraphProps(0, 10, 0, 10),
+    };
+    const props = { ...defaults, ...extras };
+    const result = render(<MarkLabel {...props} />);
+
+    return {
+      ...result,
+      input: input(result.container),
+      rerenderWith: (next) => result.rerender(<MarkLabel {...props} {...next} />),
+    };
+  };
+
+  describe('autoFocus', () => {
+    it('focuses the input so a new label can be typed into right away', () => {
+      const { input } = renderComponent({ autoFocus: true });
+
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('leaves the caret at the end of an existing label', () => {
+      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'AB' } });
+
+      expect(document.activeElement).toBe(input);
+      expect(input.selectionStart).toBe(2);
+      expect(input.selectionEnd).toBe(2);
+    });
+
+    it('does not focus the input of an existing label when autoFocus is not set', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    it('does not focus the input when disabled', () => {
+      const { input } = renderComponent({ autoFocus: true, disabled: true });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    it('does not focus the input of a disabled mark', () => {
+      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: '', disabled: true } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    // the focus can go away without this component hearing about it - the input node gets replaced
+    // by a render higher up, so no blur is fired and autoFocus is still on
+    it('takes the focus back on the next render while it is still being edited', () => {
+      const { input, rerenderWith } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(document.activeElement).toBe(input);
+
+      input.blur();
+      expect(document.activeElement).not.toBe(input);
+
+      rerenderWith({ mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('leaves the caret where the user put it while the input has the focus', () => {
+      const { input, rerenderWith } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'ABC' } });
+
+      input.setSelectionRange(1, 1);
+
+      rerenderWith({ mark: { x: 1, y: 1, label: 'ABC' } });
+
+      expect(document.activeElement).toBe(input);
+      expect(input.selectionStart).toBe(1);
+    });
+
+    it('focuses the input once it is no longer disabled', () => {
+      const { rerenderWith, container } = renderComponent({ autoFocus: true, disabled: true });
+
+      rerenderWith({ disabled: false });
+
+      expect(document.activeElement).toBe(input(container));
+    });
+
+    // the host saves the model with an api call and the model that comes back can replace the
+    // input node - the label has to keep the focus across that remount
+    it('re-focuses the input when it is remounted while being edited', () => {
+      const props = {
+        autoFocus: true,
+        onChange,
+        inputRef: jest.fn(),
+        mark: { x: 1, y: 1, label: 'A' },
+        graphProps: getGraphProps(0, 10, 0, 10),
+      };
+      const { container, rerender } = render(<MarkLabel key="first" {...props} />);
+      const first = input(container);
+
+      expect(document.activeElement).toBe(first);
+
+      rerender(<MarkLabel key="second" {...props} />);
+      const second = input(container);
+
+      expect(second).not.toBe(first);
+      expect(document.activeElement).toBe(second);
+    });
+  });
+
+  // the tool asks for the focus with autoFocus, but its state can be gone before the input renders:
+  // the marks come back from the host asynchronously and can remount the tool. An empty label in
+  // label mode is a label the user has just added, so the input can tell on its own.
+  describe('a label that was just added', () => {
+    it('focuses itself without the tool asking', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('focuses itself again when it is remounted before it was typed into', () => {
+      const props = {
+        onChange,
+        onBlur,
+        inputRef: jest.fn(),
+        mark: { x: 1, y: 1, label: '' },
+        graphProps: getGraphProps(0, 10, 0, 10),
+      };
+      const { container, rerender } = render(<MarkLabel key="first" {...props} />);
+      const first = input(container);
+
+      rerender(<MarkLabel key="second" {...props} />);
+      const second = input(container);
+
+      expect(second).not.toBe(first);
+      expect(document.activeElement).toBe(second);
+    });
+
+    it('stops chasing the focus once it has been left', () => {
+      const { input, rerenderWith } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).toBe(input);
+
+      input.blur();
+      rerenderWith({ mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    // outside of label mode the input is disabled, which is how an empty label that was loaded with
+    // the item is told apart from one the user has just added - label mode always starts off
+    it('is not focused while label mode is off', () => {
+      const { input } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    it('is not focused when label mode is turned on afterwards', () => {
+      const { rerenderWith, container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: '' } });
+
+      rerenderWith({ disabled: false });
+
+      expect(document.activeElement).not.toBe(input(container));
+    });
+
+    it('is not focused when the mark is disabled', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '', disabled: true } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+  });
+
+  describe('syncing mark.label into the input', () => {
+    it('picks up a new mark.label while the input does not have the focus', () => {
+      const { rerenderWith, container } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
+
+      rerenderWith({ mark: { x: 1, y: 1, label: 'updated' } });
+
+      expect(input(container).value).toBe('updated');
+    });
+
+    // a mark coming back from an (async) model save can carry an older label - applying it would
+    // wipe out the characters typed in the meantime
+    it('keeps what the user typed while the input has the focus', () => {
+      const { input, rerenderWith } = renderComponent({ autoFocus: true });
+
+      expect(document.activeElement).toBe(input);
+
+      fireEvent.change(input, { target: { value: 'AB' } });
+      expect(input.value).toBe('AB');
+
+      // the host echoes back the label as it was one keystroke ago
+      rerenderWith({ mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(input.value).toBe('AB');
+    });
+  });
+
+  describe('onBlur', () => {
+    it('is called so the tool stops auto focusing the label', () => {
+      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A' } });
+
+      fireEvent.blur(input);
+
+      expect(onBlur).toHaveBeenCalled();
+    });
+
+    it('reports an empty label on blur', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
+
+      fireEvent.change(input, { target: { value: '' } });
+      fireEvent.blur(input);
+
+      expect(onChange).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('debounce', () => {
+    beforeEach(() => jest.useFakeTimers());
+    afterEach(() => jest.useRealTimers());
+
+    it('does not report the typed label before the debounce delay elapses', () => {
+      const { input } = renderComponent({ autoFocus: true });
+
+      fireEvent.change(input, { target: { value: 'A' } });
+
+      act(() => jest.advanceTimersByTime(499));
+      expect(onChange).not.toHaveBeenCalled();
+
+      act(() => jest.advanceTimersByTime(1));
+      expect(onChange).toHaveBeenCalledWith('A');
+    });
+
+    it('reports the label once for a burst of keystrokes', () => {
+      const { input } = renderComponent({ autoFocus: true });
+
+      fireEvent.change(input, { target: { value: 'A' } });
+      act(() => jest.advanceTimersByTime(300));
+      fireEvent.change(input, { target: { value: 'AB' } });
+      act(() => jest.advanceTimersByTime(300));
+      fireEvent.change(input, { target: { value: 'ABC' } });
+      act(() => jest.advanceTimersByTime(500));
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith('ABC');
+    });
+  });
+});
+
 describe('position', () => {
   const assertPosition = (mark, rect, expected) => {
     it(`${mark.x},${mark.y} + ${rect.width},${rect.height} => ${expected}`, () => {

package/src/mark-label.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
@@ -7,6 +7,8 @@ import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import SvgIcon from './label-svg-icon';
 
+const DEBOUNCE_DELAY = 500;
+
 const StyledInputCorrect = styled('div')(({ theme }) => ({
   float: 'right',
   padding: theme.spacing(0.5),
@@ -128,27 +130,56 @@ LabelInput.propTypes = {
 };
 
 export const MarkLabel = (props) => {
+  // the node is kept in a ref as well as in the state: the state is needed to reposition the label
+  // once it has a size, the ref is what the focus is asserted on - it is never a render behind
+  const inputNode = useRef(null);
   const [input, setInput] = useState(null);
-  const _ref = useCallback((node) => setInput(node));
+  const _ref = useCallback((node) => {
+    inputNode.current = node;
+    setInput(node);
+  }, []);
   const theme = useTheme();
 
-  const { mark, graphProps, disabled, inputRef: externalInputRef } = props;
+  const { mark, graphProps, disabled, autoFocus, inputRef: externalInputRef } = props;
 
   const [label, setLabel] = useState(mark.label);
   const { correctness, correctnesslabel, correctlabel } = mark;
 
+  const isFocused = () =>
+    !!inputNode.current && typeof document !== 'undefined' && document.activeElement === inputNode.current;
+
+  // A label that has just been added is empty and its input is enabled - label mode has to be on
+  // for that to happen and it always starts off, so a mark that was loaded with an empty label
+  // cannot grab the focus. This is read from the mark rather than taken from the autoFocus prop
+  // because the tool that asked for the label can be remounted by the marks coming back from the
+  // host (async model save) before the input ever renders, and its autoFocus goes with it.
+  const isNewLabel = useRef(mark.label === '' && !disabled && !mark.disabled);
+
   const onChange = (e) => setLabel(e.target.value);
 
   const handleBlur = useCallback(() => {
+    isNewLabel.current = false;
+
     if (label === '') {
       props.onChange('');
     }
-  }, [label, props.onChange]);
 
-  const debouncedLabel = useDebounce(label, 200);
+    // lets the tool know that this label is not being edited anymore, so it stops auto focusing it
+    if (props.onBlur) {
+      props.onBlur();
+    }
+  }, [label, props.onChange, props.onBlur]);
+
+  const debouncedLabel = useDebounce(label, DEBOUNCE_DELAY);
 
-  // useState only sets the value once, to synch props to state need useEffect
+  // useState only sets the value once, to synch props to state need useEffect.
+  // While this input has the focus we keep what the user typed: the mark can come back from an
+  // (async) model save with an older label and that would overwrite the characters typed meanwhile.
   useEffect(() => {
+    if (isFocused()) {
+      return;
+    }
+
     setLabel(mark.label);
   }, [mark.label]);
 
@@ -159,6 +190,35 @@ export const MarkLabel = (props) => {
     }
   }, [debouncedLabel]);
 
+  // A label that has just been added has to be focused so that it can be typed into right away.
+  // This runs after every render on purpose - there is no reliable single moment to focus at:
+  // the input shows up whenever the mark comes back from the (async) model save, and a remount
+  // of the input (same save, replaced node) drops the focus without this component being told.
+  // Asserting the focus on every render is what makes it stick; it is a no-op once the input has
+  // it, so the caret the user placed is left alone.
+  useEffect(() => {
+    const node = inputNode.current;
+
+    // node.disabled, not the disabled prop: a disabled input silently ignores focus()
+    if ((!autoFocus && !isNewLabel.current) || !node || node.disabled || isFocused()) {
+      return;
+    }
+
+    node.focus();
+
+    // a new label is focused once, so it cannot fight over the focus with another one
+    if (isFocused()) {
+      isNewLabel.current = false;
+    }
+
+    // keep the caret at the end, otherwise typing continues in front of the existing label
+    const caret = (node.value || '').length;
+
+    if (node.setSelectionRange) {
+      node.setSelectionRange(caret, caret);
+    }
+  });
+
   const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
   const pos = position(graphProps, mark, rect);
   const leftTop = coordinates(graphProps, mark, rect, pos);
@@ -234,7 +294,9 @@ export const MarkLabel = (props) => {
 };
 
 MarkLabel.propTypes = {
+  autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   graphProps: types.GraphPropsType,
   inputRef: PropTypes.func,

package/src/tools/circle/component.jsx

@@ -49,6 +49,16 @@ export class RawBaseCircle extends React.Component {
     onClick: () => ({}),
   };
 
+  // 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;
@@ -102,6 +112,12 @@ export class RawBaseCircle extends React.Component {
     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;
 
@@ -122,9 +138,9 @@ export class RawBaseCircle extends React.Component {
       [type]: { label: '', ...point },
     });
 
-    if (this.input[type]) {
-      this.input[type].focus();
-    }
+    // 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 });
   };
 
   input = {};
@@ -145,6 +161,7 @@ export class RawBaseCircle extends React.Component {
       labelNode,
       labelModeEnabled,
     } = this.props;
+    const { editingLabel } = this.state;
 
     const common = { onDragStart, onDragStop, graphProps, onClick };
     to = to || from;
@@ -159,9 +176,11 @@ export class RawBaseCircle extends React.Component {
         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,
@@ -172,9 +191,11 @@ export class RawBaseCircle extends React.Component {
         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,
@@ -185,9 +206,11 @@ export class RawBaseCircle extends React.Component {
         circleLabelNode = 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/src/tools/point/__tests__/component.test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@pie-lib/test-utils';
+import { fireEvent, render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps, xy } from '../../../__tests__/utils';
 
@@ -346,4 +346,115 @@ describe('Component', () => {
       expect(container.firstChild).toBeInTheDocument();
     });
   });
+
+  describe('label focus', () => {
+    let labelNode;
+
+    // the label is rendered into a portal - it has to be in the document for it to take the focus
+    beforeEach(() => {
+      labelNode = document.createElement('div');
+      document.body.appendChild(labelNode);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(labelNode);
+    });
+
+    // the mark is owned by the container, so the tool only sees a new label once it is handed back
+    const Controlled = ({ initialMark, labelModeEnabled }) => {
+      const [mark, setMark] = React.useState(initialMark);
+
+      return (
+        <Component
+          mark={mark}
+          onChange={(current, update) => setMark(update)}
+          onClick={onClick}
+          graphProps={graphProps()}
+          labelNode={labelNode}
+          labelModeEnabled={labelModeEnabled}
+        />
+      );
+    };
+
+    const clickPoint = (container) => fireEvent.click(container.querySelector('circle'));
+
+    it('focuses the new label when a point is clicked in label mode', () => {
+      const { container } = render(<Controlled initialMark={xy(1, 1)} labelModeEnabled={true} />);
+
+      expect(labelNode.querySelector('input')).toBe(null);
+
+      clickPoint(container);
+
+      const input = labelNode.querySelector('input');
+      expect(input).not.toBe(null);
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('does not focus the label when a point is clicked outside of label mode', () => {
+      const { container } = render(<Controlled initialMark={{ ...xy(1, 1), label: 'A' }} labelModeEnabled={false} />);
+
+      clickPoint(container);
+
+      expect(onClick).toHaveBeenCalled();
+      expect(document.activeElement).not.toBe(labelNode.querySelector('input'));
+    });
+
+    it('does not focus the label of a disabled mark', () => {
+      const { container } = render(
+        <Controlled initialMark={{ ...xy(1, 1), label: 'A', disabled: true }} labelModeEnabled={true} />,
+      );
+
+      clickPoint(container);
+
+      expect(document.activeElement).not.toBe(labelNode.querySelector('input'));
+    });
+
+    it('stops auto focusing the label once it is blurred', () => {
+      const { container } = render(<Controlled initialMark={xy(1, 1)} labelModeEnabled={true} />);
+
+      clickPoint(container);
+      const input = labelNode.querySelector('input');
+      expect(document.activeElement).toBe(input);
+
+      fireEvent.blur(input);
+
+      // a re-render must not pull the focus back into the label the user just left
+      fireEvent.change(input, { target: { value: 'A' } });
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    it('closes the label that is being edited when label mode is left', () => {
+      const ref = React.createRef();
+      const { container, rerender } = render(
+        <Component
+          ref={ref}
+          mark={xy(1, 1)}
+          onChange={onChange}
+          onClick={onClick}
+          graphProps={graphProps()}
+          labelNode={labelNode}
+          labelModeEnabled={true}
+        />,
+      );
+
+      clickPoint(container);
+      expect(ref.current.state.editingLabel).toBe('label');
+
+      rerender(
+        <Component
+          ref={ref}
+          mark={xy(1, 1)}
+          onChange={onChange}
+          onClick={onClick}
+          graphProps={graphProps()}
+          labelNode={labelNode}
+          labelModeEnabled={false}
+        />,
+      );
+
+      // there is no user visible path for this one: a real blur resets it through onBlur, this is
+      // the safety net for a label that is still marked as edited when label mode goes away
+      expect(ref.current.state.editingLabel).toBe(null);
+    });
+  });
 });