wip

Author: nicolaskruchten

src/EditorControls.js

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

src/components/containers/MapboxLayersAccordion.js

@@ -40,18 +40,19 @@ class MapboxLayersAccordion extends Component {
           updateContainer({
             [`layers[${mapboxLayerIndex}]`]: {
               name: `Layer ${mapboxLayerIndex}`,
-              sourcetype: 'geojson',
-              source: {
-                type: 'FeatureCollection',
-                features: [],
-              },
+              sourcetype: 'raster',
+              below: '',
             },
           });
         }
       },
     };
 
-    return <PlotlyPanel addAction={addAction}>{content ? content : null}</PlotlyPanel>;
+    return (
+      <PlotlyPanel addAction={addAction} canReorder>
+        {content ? content : null}
+      </PlotlyPanel>
+    );
   }
 }
 

src/components/fields/derived.js

@@ -13,6 +13,7 @@ import {UnconnectedTextEditor} from './TextEditor';
 import {UnconnectedVisibilitySelect} from './VisibilitySelect';
 import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
 import PropTypes from 'prop-types';
+import Text from './Text';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
@@ -662,6 +663,23 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const MapboxSourceArray = connectToContainer(Text, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullValue, updatePlot} = plotProps;
+    if (plotProps.fullValue && plotProps.fullValue.length > 0) {
+      plotProps.fullValue = fullValue[0];
+    }
+
+    plotProps.updatePlot = v => {
+      if (v.length) {
+        updatePlot([v]);
+      } else {
+        updatePlot([]);
+      }
+    };
+  },
+});
+
 export const MapboxStyleDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     const {mapBoxAccess, localize: _} = context;

src/default_panels/StyleMapsPanel.js

@@ -9,24 +9,21 @@ import {
   Radio,
   Numeric,
   ColorPicker,
+  MapboxSourceArray,
 } from '../components';
 
 const StyleMapsPanel = (props, {localize: _}) => (
   <SubplotAccordion>
     <PlotlySection name={_('Base Map')} attr="style">
-      <MapboxStyleDropdown label={_('Tiles')} attr="style" />
+      <MapboxStyleDropdown label={_('Tile Source')} attr="style" />
     </PlotlySection>
     <PlotlySection name={_('Layers')} attr="style">
       <MapboxLayersAccordion>
         <Radio
-          attr="visible"
-          options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-        />
-        <Radio
-          label={_('Layer Type')}
-          attr="sourcetype"
-          options={[{label: _('GeoJSON'), value: 'geojson'}, {label: _('Tiles'), value: 'raster'}]}
+          attr="below"
+          options={[{label: _('Above Data'), value: ''}, {label: _('Below Data'), value: 'traces'}]}
         />
+        <MapboxSourceArray label={_('Tile Source URL')} attr="source" show />
       </MapboxLayersAccordion>
     </PlotlySection>
     <PlotlySection name={_('Map Positioning')}>

src/lib/connectLayersToMapbox.js

@@ -10,6 +10,7 @@ export default function connectLayersToMapbox(WrappedComponent) {
 
       this.deleteMapboxLayer = this.deleteMapboxLayer.bind(this);
       this.updateMapboxLayer = this.updateMapboxLayer.bind(this);
+      this.moveMapboxLayer = this.moveMapboxLayer.bind(this);
       this.setLocals(props, context);
     }
 
@@ -33,6 +34,7 @@ export default function connectLayersToMapbox(WrappedComponent) {
           !this.context.getValObject ? null : this.context.getValObject(`layers[].${attr}`),
         updateContainer: this.updateMapboxLayer,
         deleteContainer: this.deleteMapboxLayer,
+        moveContainer: this.moveMapboxLayer,
         container: this.container,
         fullContainer: this.fullContainer,
       };
@@ -60,6 +62,22 @@ export default function connectLayersToMapbox(WrappedComponent) {
       }
     }
 
+    moveMapboxLayer(direction) {
+      if (this.context.onUpdate) {
+        const mapboxLayerIndex = this.props.mapboxLayerIndex;
+        const desiredIndex = direction === 'up' ? mapboxLayerIndex - 1 : mapboxLayerIndex + 1;
+        this.context.onUpdate({
+          type: EDITOR_ACTIONS.MOVE_TO,
+          payload: {
+            fromIndex: mapboxLayerIndex,
+            toIndex: desiredIndex,
+            mapboxId: this.context.fullContainer._subplot.id,
+            path: 'layout.mapbox.layers',
+          },
+        });
+      }
+    }
+
     render() {
       return <WrappedComponent {...this.props} />;
     }
@@ -85,6 +103,7 @@ export default function connectLayersToMapbox(WrappedComponent) {
   MapboxLayerConnectedComponent.childContextTypes = {
     updateContainer: PropTypes.func,
     deleteContainer: PropTypes.func,
+    moveContainer: PropTypes.func,
     container: PropTypes.object,
     fullContainer: PropTypes.object,
     getValObject: PropTypes.func,