@pie-lib/graphing 4.0.15 → 4.0.17

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,