layer drag and drop reordering

Author: justenPalmer

package-lock.json

@@ -29,6 +29,7 @@
     "jsonlint-lines-primitives": "^1.6.0",
     "mapbox-gl": "^0.44.2",
     "mapbox-gl-inspect": "^1.3.1",
+    "react-beautiful-dnd": "^7.1.3",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

package.json

@@ -78,6 +78,19 @@ export default {
 
 	},
 
+	reorder:function(sourceIndex,destIndex){
+		return new Promise((resolve,reject)=>{
+			Store.dispatch({
+				type:'LAYER_REORDER',
+				sourceIndex:sourceIndex,
+				destIndex:destIndex
+			});
+
+			Mstyle.save();
+			return resolve();
+		});
+	},
+
 	removeIn:function(layerId,key){
 		return new Promise((resolve,reject)=>{
 			if (!layerId) return reject('no layerId');

src/model/Mlayer.js

@@ -38,6 +38,20 @@ export default function(state = iState, action){
 			const style = state.setIn(['rec','layers'],layers);
 			return setUpdated(style);
 		}
+		case 'LAYER_REORDER':{
+
+			// action.sourceIndex
+
+			// action.destindex
+
+			const layer = state.getIn(['rec','layers',action.sourceIndex]);
+			// remove source index
+
+			const layers = state.getIn(['rec','layers']).splice(action.sourceIndex,1).splice(action.destIndex,0,layer);
+			//console.log('layers:',layers);
+			const style = state.setIn(['rec','layers'],layers);
+			return setUpdated(style);
+		}
 		case 'LAYER_SET':{
 			const ind = state.getIn(['rec','layers']).findIndex((layer)=>{
 				return layer.get('id') === action.layerId;

src/reducer/Rstyle.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {NavLink, Link, Route, Switch} from 'react-router-dom';
+import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd';
 
 import LayerIcon from '../../utility/LayerIcon';
 
@@ -47,6 +48,11 @@ export default class Vlayers extends React.Component {
 			},
 			searchChange:(field)=>{
 				this.setState({search:field.value});
+			},
+			onDragEnd:(result)=>{
+				console.log('draggable res:',result.source.index,result.destination.index);
+
+				Mlayer.reorder(result.source.index,result.destination.index);
 			}
 		};
 		for (let i in this.handle){
@@ -115,30 +121,46 @@ export default class Vlayers extends React.Component {
 					}
 
 					<div className="bg-light">
-						{layers !== undefined && layers.map((layer,i)=>{
-							//console.log('layer:',layer);
-
-							if (this.state.search && layer.get('id').toLowerCase().indexOf(this.state.search.toLowerCase()) === -1) return;
-
-							let className = 'px-2 py-1 d-block link-list list-border-right position-relative p-list';
-							if (error.hasIn(['layers',i])) className += ' error';
-
-							return <NavLink to={`${match.url}/${layer.get('id')}`} 
-								className={className} key={layer.get('id')}>
-
-								<div className="list-left mr-2 inline-block">
-									<i className="material-icons md-18 md-shadow" style={{color:LayerIcon.getColor(layer)}}>{LayerIcon.getIcon(layer)}</i>
-								</div>
-								{layer.get('id')}
-								<div onClick={()=>{this.handle.visibility(layer.get('id'))}} className="list-right ml-2">
-									{layer.getIn(['layout','visibility']) === 'none' ?
-										<i className="material-icons md-18 md-muted">visibility_off</i>
-										:
-										<i className="material-icons md-18">visibility</i>
-									}
-								</div>
-							</NavLink>
-						})}
+						<DragDropContext onDragEnd={this.handle.onDragEnd}>
+							<Droppable droppableId="droppable">
+								{(provided, snapshot) => (
+									<div ref={provided.innerRef}>
+										{layers !== undefined && layers.map((layer,i)=>{
+											//console.log('layer:',layer);
+
+											if (this.state.search && layer.get('id').toLowerCase().indexOf(this.state.search.toLowerCase()) === -1) return;
+
+											let className = 'px-2 py-1 d-block link-list list-border-right position-relative p-list';
+											if (error.hasIn(['layers',i])) className += ' error';
+
+											return <Draggable key={layer.get('id')} draggableId={layer.get('id')} index={i}>
+												{(provided, snapshot) => (
+													<div ref={provided.innerRef}
+														{...provided.draggableProps}
+														{...provided.dragHandleProps}>
+														<NavLink to={`${match.url}/${layer.get('id')}`} 
+															className={className} key={layer.get('id')}>
+
+															<div className="list-left mr-2 inline-block">
+																<i className="material-icons md-18 md-shadow" style={{color:LayerIcon.getColor(layer)}}>{LayerIcon.getIcon(layer)}</i>
+															</div>
+															{layer.get('id')}
+															<div onClick={()=>{this.handle.visibility(layer.get('id'))}} className="list-right ml-2">
+																{layer.getIn(['layout','visibility']) === 'none' ?
+																	<i className="material-icons md-18 md-muted">visibility_off</i>
+																	:
+																	<i className="material-icons md-18">visibility</i>
+																}
+															</div>
+														</NavLink>
+													</div>
+												)}
+											</Draggable>
+										})}
+									</div>
+								)}
+							</Droppable>
+						</DragDropContext>
 					</div>
 				</div>
 			</div>