@pie-lib/graphing 4.0.15-next.12 → 4.0.15-next.15

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,171 @@ 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 when autoFocus is not set', () => {
+      const { input } = renderComponent();
+
+      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('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);
+    });
+  });
+
+  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

@@ -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),
@@ -132,23 +134,36 @@ export const MarkLabel = (props) => {
   const _ref = useCallback((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 = () => !!input && typeof document !== 'undefined' && document.activeElement === input;
+
   const onChange = (e) => setLabel(e.target.value);
 
   const handleBlur = useCallback(() => {
     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 +174,24 @@ 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 also re-focuses the input if it gets remounted while it is being edited - saving the model
+  // is done by the host (api call) and the model that comes back can replace the input node.
+  useEffect(() => {
+    if (!autoFocus || !input || disabled || isFocused()) {
+      return;
+    }
+
+    input.focus();
+
+    // keep the caret at the end, otherwise typing continues in front of the existing label
+    const caret = (input.value || '').length;
+
+    if (input.setSelectionRange) {
+      input.setSelectionRange(caret, caret);
+    }
+  }, [autoFocus, input, disabled]);
+
   const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
   const pos = position(graphProps, mark, rect);
   const leftTop = coordinates(graphProps, mark, rect, pos);
@@ -234,7 +267,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);
+    });
+  });
 });

package/src/tools/point/component.jsx

@@ -16,7 +16,15 @@ export class Point extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    // 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 });
+    }
   }
 
   move = (p) => {
@@ -59,6 +67,12 @@ export class Point extends React.Component {
     });
   };
 
+  stopEditingLabel = () => {
+    if (this.state.editingLabel !== null) {
+      this.setState({ editingLabel: null });
+    }
+  };
+
   clickPoint = () => {
     const { labelModeEnabled, onChange, onClick, mark } = this.props;
 
@@ -73,17 +87,14 @@ export class Point extends React.Component {
 
     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);
+    // 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' });
   };
 
   render() {
     const { coordinatesOnHover, graphProps, labelNode, labelModeEnabled } = this.props;
+    const { editingLabel } = this.state;
     const mark = this.state.mark ? this.state.mark : this.props.mark;
 
     return (
@@ -111,9 +122,11 @@ 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,6 +90,16 @@ 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;
@@ -162,6 +172,12 @@ export class RawBaseComponent extends React.Component {
     onChangeProps(update);
   };
 
+  stopEditingLabel = () => {
+    if (this.state.editingLabel !== null) {
+      this.setState({ editingLabel: null });
+    }
+  };
+
   clickPoint = (point, index, data) => {
     const {
       closed,
@@ -194,12 +210,9 @@ export class RawBaseComponent extends React.Component {
         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);
+      // 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 });
 
       return;
     }
@@ -230,6 +243,7 @@ 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;
@@ -239,9 +253,11 @@ 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,
@@ -291,9 +307,11 @@ 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,6 +234,16 @@ 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;
@@ -303,6 +313,12 @@ 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;
 
@@ -331,9 +347,9 @@ export const lineBase = (Comp, opts) => {
         [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 });
     };
 
     // IMPORTANT, do not remove
@@ -354,6 +370,7 @@ 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;
 
@@ -366,9 +383,11 @@ 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,
@@ -379,9 +398,11 @@ 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,
@@ -392,9 +413,11 @@ 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,