allow reordering of annotations

Author: VeraZab

src/EditorControls.js

@@ -312,6 +312,10 @@ class EditorControls extends Component {
             move(graphDiv.layout.shapes);
           }
 
+          if (payload.path === 'layout.annotations') {
+            move(graphDiv.layout.annotations);
+          }
+
           const updatedData = payload.path.startsWith('data')
             ? graphDiv.data.slice()
             : graphDiv.data;

src/components/containers/AnnotationAccordion.js

@@ -13,7 +13,7 @@ class AnnotationAccordion extends Component {
       layout: {annotations = [], meta = []},
       localize: _,
     } = this.context;
-    const {canAdd, children} = this.props;
+    const {canAdd, children, canReorder} = this.props;
 
     const content =
       annotations.length &&
@@ -50,7 +50,7 @@ class AnnotationAccordion extends Component {
     };
 
     return (
-      <LayoutPanel addAction={canAdd ? addAction : null}>
+      <LayoutPanel addAction={canAdd ? addAction : null} canReorder={canReorder}>
         {content ? (
           content
         ) : (
@@ -76,6 +76,7 @@ AnnotationAccordion.contextTypes = {
 AnnotationAccordion.propTypes = {
   children: PropTypes.node,
   canAdd: PropTypes.bool,
+  canReorder: PropTypes.bool,
 };
 
 export default AnnotationAccordion;

src/default_panels/StyleNotesPanel.js

@@ -17,7 +17,7 @@ import {
 } from '../components';
 
 const StyleNotesPanel = (props, {localize: _}) => (
-  <AnnotationAccordion canAdd>
+  <AnnotationAccordion canAdd canReorder>
     <PlotlySection name={_('Note Text')} attr="text">
       <TextEditor attr="text" />
       <FontSelector label={_('Typeface')} attr="font.family" />

src/lib/connectAnnotationToLayout.js

@@ -10,6 +10,7 @@ export default function connectAnnotationToLayout(WrappedComponent) {
 
       this.deleteAnnotation = this.deleteAnnotation.bind(this);
       this.updateAnnotation = this.updateAnnotation.bind(this);
+      this.moveAnnotation = this.moveAnnotation.bind(this);
       this.setLocals(props, context);
     }
 
@@ -35,6 +36,7 @@ export default function connectAnnotationToLayout(WrappedComponent) {
         deleteContainer: this.deleteAnnotation,
         container: this.container,
         fullContainer: this.fullContainer,
+        moveContainer: this.moveAnnotation,
       };
     }
 
@@ -57,6 +59,21 @@ export default function connectAnnotationToLayout(WrappedComponent) {
       }
     }
 
+    moveAnnotation(direction) {
+      if (this.context.onUpdate) {
+        const annotationIndex = this.props.annotationIndex;
+        const desiredIndex = direction === 'up' ? annotationIndex - 1 : annotationIndex + 1;
+        this.context.onUpdate({
+          type: EDITOR_ACTIONS.MOVE_TO,
+          payload: {
+            fromIndex: annotationIndex,
+            toIndex: desiredIndex,
+            path: 'layout.annotations',
+          },
+        });
+      }
+    }
+
     render() {
       return <WrappedComponent {...this.props} />;
     }
@@ -85,6 +102,7 @@ export default function connectAnnotationToLayout(WrappedComponent) {
     container: PropTypes.object,
     fullContainer: PropTypes.object,
     getValObject: PropTypes.func,
+    moveContainer: PropTypes.func,
   };
 
   const {plotly_editor_traits} = WrappedComponent;