allow reordering of shapes

Author: VeraZab

src/EditorControls.js

@@ -293,18 +293,23 @@ class EditorControls extends Component {
         // checking is fromIndex and toIndex is a number because just checking
         // if not there will not work as index can be 0 and that value is falsy
         if (payload.path && !isNaN(payload.fromIndex) && !isNaN(payload.toIndex)) {
+          function move(container) {
+            const movedEl = container[payload.fromIndex];
+            const replacedEl = container[payload.toIndex];
+            container[payload.toIndex] = movedEl;
+            container[payload.fromIndex] = replacedEl;
+          }
+
           if (payload.path === 'data') {
-            const traceMoved = graphDiv.data[payload.fromIndex];
-            const traceReplaced = graphDiv.data[payload.toIndex];
-            graphDiv.data[payload.toIndex] = traceMoved;
-            graphDiv.data[payload.fromIndex] = traceReplaced;
+            move(graphDiv.data);
           }
 
           if (payload.path === 'layout.images') {
-            const imageMoved = graphDiv.layout.images[payload.fromIndex];
-            const imageReplaced = graphDiv.layout.images[payload.toIndex];
-            graphDiv.layout.images[payload.toIndex] = imageMoved;
-            graphDiv.layout.images[payload.fromIndex] = imageReplaced;
+            move(graphDiv.layout.images);
+          }
+
+          if (payload.path === 'layout.shapes') {
+            move(graphDiv.layout.shapes);
           }
 
           const updatedData = payload.path.startsWith('data')

src/components/containers/ShapeAccordion.js

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

src/default_panels/StyleShapesPanel.js

@@ -13,7 +13,7 @@ import {
 } from '../components';
 
 const StyleShapesPanel = (props, {localize: _}) => (
-  <ShapeAccordion canAdd>
+  <ShapeAccordion canAdd canReorder>
     <Radio
       attr="visible"
       options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}

src/lib/connectShapeToLayout.js

@@ -10,6 +10,7 @@ export default function connectShapeToLayout(WrappedComponent) {
 
       this.deleteShape = this.deleteShape.bind(this);
       this.updateShape = this.updateShape.bind(this);
+      this.moveShape = this.moveShape.bind(this);
       this.setLocals(props, context);
     }
 
@@ -35,6 +36,7 @@ export default function connectShapeToLayout(WrappedComponent) {
         deleteContainer: this.deleteShape,
         container: this.container,
         fullContainer: this.fullContainer,
+        moveContainer: this.moveShape,
       };
     }
 
@@ -57,6 +59,21 @@ export default function connectShapeToLayout(WrappedComponent) {
       }
     }
 
+    moveShape(direction) {
+      if (this.context.onUpdate) {
+        const shapeIndex = this.props.shapeIndex;
+        const desiredIndex = direction === 'up' ? shapeIndex - 1 : shapeIndex + 1;
+        this.context.onUpdate({
+          type: EDITOR_ACTIONS.MOVE_TO,
+          payload: {
+            fromIndex: shapeIndex,
+            toIndex: desiredIndex,
+            path: 'layout.shapes',
+          },
+        });
+      }
+    }
+
     render() {
       return <WrappedComponent {...this.props} />;
     }
@@ -83,6 +100,7 @@ export default function connectShapeToLayout(WrappedComponent) {
     container: PropTypes.object,
     fullContainer: PropTypes.object,
     getValObject: PropTypes.func,
+    moveContainer: PropTypes.func,
   };
 
   const {plotly_editor_traits} = WrappedComponent;