Refactor

Author: VeraZab

src/PlotlyEditor.js

@@ -42,6 +42,31 @@ class PlotlyEditor extends Component {
     };
   }
 
+  maybeAdjustAxisRef(payload) {
+    const {graphDiv} = this.props;
+    if (payload.tracesNeedingAxisAdjustment) {
+      payload.tracesNeedingAxisAdjustment.forEach(trace => {
+        const axis = trace[payload.axisAttrToAdjust].charAt(0);
+        const currentAxisIdNumber = Number(
+          trace[payload.axisAttrToAdjust].slice(1)
+        );
+        const adjustedAxisIdNumber = currentAxisIdNumber - 1;
+
+        const currentAxisLayoutProperties = {
+          ...graphDiv.layout[payload.axisAttrToAdjust + currentAxisIdNumber],
+        };
+
+        // for cases when we're adjusting x2 => x, so that it becomes x not x1
+        graphDiv.data[trace.index][payload.axisAttrToAdjust] =
+          adjustedAxisIdNumber === 1 ? axis : axis + adjustedAxisIdNumber;
+
+        graphDiv.layout[
+          payload.axisAttrToAdjust + adjustedAxisIdNumber
+        ] = currentAxisLayoutProperties;
+      });
+    }
+  }
+
   handleUpdate({type, payload}) {
     const {graphDiv} = this.props;
 
@@ -55,16 +80,20 @@ class PlotlyEditor extends Component {
         // force clear axes types when a `src` has changed.
         maybeClearAxisTypes(graphDiv, payload.traceIndexes, payload.update);
 
+        this.maybeAdjustAxisRef(payload);
+
         for (let i = 0; i < payload.traceIndexes.length; i++) {
           for (const attr in payload.update) {
             const traceIndex = payload.traceIndexes[i];
             const prop = nestedProperty(graphDiv.data[traceIndex], attr);
             const value = payload.update[attr];
+
             if (value !== void 0) {
               prop.set(value);
             }
           }
         }
+
         if (this.props.afterUpdateTraces) {
           this.props.afterUpdateTraces(payload);
         }
@@ -92,31 +121,6 @@ class PlotlyEditor extends Component {
         }
         break;
 
-      case EDITOR_ACTIONS.UPDATE_AXIS_REFERENCES:
-        payload.tracesToAdjust.forEach(trace => {
-          const axis = trace[payload.attrToAdjust].charAt(0);
-          // n.b: currentAxisIdNumber will never be 0, i.e. Number('x'.slice(1)),
-          // because payload.tracesToAdjust is a filter of all traces that have
-          // an axis ID above the one of the axis ID we deprecated
-          const currentAxisIdNumber = Number(
-            trace[payload.attrToAdjust].slice(1)
-          );
-          const adjustedAxisIdNumber = currentAxisIdNumber - 1;
-
-          const currentAxisLayoutProperties = {
-            ...graphDiv.layout[payload.attrToAdjust + currentAxisIdNumber],
-          };
-
-          graphDiv.data[trace.index][payload.attrToAdjust] =
-            // for cases when we're adjusting x2 => x, so that it becomes x not x1
-            adjustedAxisIdNumber === 1 ? axis : axis + adjustedAxisIdNumber;
-
-          graphDiv.layout[
-            payload.attrToAdjust + adjustedAxisIdNumber
-          ] = currentAxisLayoutProperties;
-        });
-        break;
-
       case EDITOR_ACTIONS.ADD_TRACE:
         if (this.props.beforeAddTrace) {
           this.props.beforeAddTrace(payload);

src/components/fields/AxisCreator.js

@@ -60,31 +60,28 @@ class UnconnectedNewAxisCreator extends Component {
   recalcAxes(update) {
     const currentAxisId = this.props.fullContainer[this.props.attr];
 
-    // When we select another axis, make sure no unused axes are left:
-    // does any other trace have this axisID? If so, nothing needs to change
-    if (
-      this.context.fullData.some(
-        t =>
-          t[this.props.attr] === currentAxisId &&
-          t.index !== this.props.fullContainer.index
-      )
-    ) {
-      this.props.updateContainer({[this.props.attr]: update});
-      return;
-    }
-
-    // if not, send action to readjust axis references in trace data and layout
-    const tracesToAdjust = this.context.fullData.filter(
-      trace =>
-        Number(trace[this.props.attr].slice(1)) > Number(currentAxisId.slice(1))
-    );
+    // When we select another axis, make sure no unused axes are left
+    const tracesNeedingAxisAdjustment = this.context.fullData.some(
+      t =>
+        t[this.props.attr] === currentAxisId &&
+        t.index !== this.props.fullContainer.index
+    )
+      ? null
+      : this.context.fullData.filter(
+          trace =>
+            Number(trace[this.props.attr].slice(1)) >
+            Number(currentAxisId.slice(1))
+        );
 
     this.context.onUpdate({
-      type: EDITOR_ACTIONS.UPDATE_AXIS_REFERENCES,
-      payload: {tracesToAdjust, attrToAdjust: this.props.attr},
+      type: EDITOR_ACTIONS.UPDATE_TRACES,
+      payload: {
+        tracesNeedingAxisAdjustment,
+        axisAttrToAdjust: this.props.attr,
+        update: {[this.props.attr]: update},
+        traceIndexes: [this.props.fullContainer.index],
+      },
     });
-
-    this.props.updateContainer({[this.props.attr]: update});
   }
 
   render() {

src/lib/constants.js

@@ -32,7 +32,6 @@ export const EDITOR_ACTIONS = {
   UPDATE_TRACES: 'plotly-editor-update-traces',
   ADD_TRACE: 'plotly-editor-add-trace',
   DELETE_TRACE: 'plotly-editor-delete-trace',
-  UPDATE_AXIS_REFERENCES: 'plotly-editor-update-axis-references',
   UPDATE_LAYOUT: 'plotly-editor-update-layout',
   DELETE_ANNOTATION: 'plotly-editor-delete-annotation',
   DELETE_SHAPE: 'plotly-editor-delete-shape',