Resolving Changeset already inflight error when editing with 2 layers w/in map

css/80_app.css

@@ -334,6 +334,15 @@ button.disabled {
     border-radius: 4px 0 0 4px;
 }
 
+.select-active-layer {
+    width: -webkit-fill-available;
+    font-weight: bold;
+}
+
+
+.button-active {
+    background: #e6e3e3;
+}
 
 /* Action buttons */
 button.action {
@@ -359,6 +368,52 @@ button[disabled].action:hover {
     cursor: not-allowed;
 }
 
+.disable-non-active,
+.disable-non-active:hover {
+    cursor: not-allowed;
+}
+
+.active-pulse {
+    border-radius: 50%;
+    background: #cccccc;
+    cursor: pointer;
+    box-shadow: 0 0 0 rgba(136,136,136, 0.4);
+    animation: active-pulse 2.5s infinite;
+  }
+  .active-pulse:hover {
+    animation: none;
+  }
+
+  @-webkit-keyframes active-pulse {
+    0% {
+      -webkit-box-shadow: 0 0 0 0 rgba(136,136,136, 0.4);
+    }
+    70% {
+        -webkit-box-shadow: 0 0 0 10px rgba(136,136,136, 0);
+    }
+    100% {
+        -webkit-box-shadow: 0 0 0 0 rgba(136,136,136, 0);
+    }
+  }
+  @keyframes active-pulse {
+    0% {
+      -moz-box-shadow: 0 0 0 0 rgba(136,136,136, 0.4);
+      box-shadow: 0 0 0 0 rgba(136,136,136, 0.4);
+    }
+    70% {
+        -moz-box-shadow: 0 0 0 10px rgba(136,136,136, 0);
+        box-shadow: 0 0 0 10px rgba(136,136,136, 0);
+    }
+    100% {
+        -moz-box-shadow: 0 0 0 0 rgba(136,136,136, 0);
+        box-shadow: 0 0 0 0 rgba(136,136,136, 0);
+    }
+  }
+
+.no-click {
+    pointer-events: none;
+}
+
 
 /* Icons
 ------------------------------------------------------- */

modules/Hoot/managers/api.js

@@ -327,6 +327,32 @@ export default class API {
             } );
     }
 
+
+    /**
+     * Get all id's necessary to create new map features
+     *
+     * @param {Promise|array} mapId + changesetId, nodeId, wayId, relationId
+     */
+    getAllIds( mapId ) {
+        const params = {
+            path: `/osm/api/0.6/map/${ mapId }/startingIndex`,
+            method: 'GET'
+        };
+
+        return this.request( params )
+            .then( resp =>  {
+
+                let activeIds = {};
+                activeIds = resp.data;
+                return activeIds;
+            } )
+            .catch( err => {
+                const message = this.internalError( err ) || 'Unable to retrieve all map ids';
+
+                return Promise.reject( message );
+            } );
+    }
+
     /**
      * Get all layer links from the database
      *

modules/Hoot/managers/layerManager.js

@@ -39,6 +39,7 @@ export default class Layers {
         this.allLayers          = [];
         this.loadedLayers       = {};
         this.hashLayers         = {};
+        this.allIds             = {};
         this.recentlyUsedLayers = null;
         this.mergedLayer        = null;
         this.mergedConflicts    = null;
@@ -136,13 +137,16 @@ export default class Layers {
 
     async loadLayer( params ) {
         try {
-            let mapId       = params.id,
-                tags        = await this.hoot.api.getMapTags( mapId ),
-                layerExtent = await this.layerExtent( mapId );
+            let mapId           = params.id,
+                tags            = await this.hoot.api.getMapTags( mapId ),
+                layerExtent     = await this.layerExtent( mapId ),
+                activeIds       = await Hoot.api.getAllIds( mapId );
 
             let layer = {
                 name: params.name,
                 id: params.id,
+                activeLayer: params.activeLayer,
+                activeIds: activeIds,
                 refType: params.refType,
                 color: params.color,
                 merged: params.merged || false,

modules/Hoot/ui/sidebar/layerAdd.js

@@ -6,6 +6,7 @@
 
 import _map    from 'lodash-es/map';
 import _reject from 'lodash-es/reject';
+import _find   from 'lodash-es/find';
 
 import FolderTree  from '../../tools/folderTree';
 import SidebarForm from './sidebarForm';
@@ -18,7 +19,9 @@ export default class LayerAdd extends SidebarForm {
 
         this.selectedLayer = {
             name: null,
-            id: null
+            id: null,
+            activeLayer: null,
+            activeIds: null
         };
     }
 
@@ -201,6 +204,8 @@ export default class LayerAdd extends SidebarForm {
             name: d ? d.name : this.selectedLayer.name,
             id: d ? d.id : this.selectedLayer.id,
             refType: this.formMeta.refType,
+            activeLayer: d ? d.activeLayer : this.selectedLayer.activeLayer,
+            activeIds: d ? d.activeIds : this.selectedLayer.activeIds,
             color
         };
 

modules/Hoot/ui/sidebar/sidebar.js

@@ -15,6 +15,7 @@ import {
     utilQsString,
     utilStringQs
 } from '../../../util';
+import { diff3MergeIndices } from 'node-diff3';
 
 /**
  * Create the sidebar
@@ -126,7 +127,7 @@ export default class Sidebar {
 
                 form.controller.update();
                 form.loadingLayerName = null;
-
+                this.saveChanges();
                 this.conflateCheck();
             }
         } );
@@ -168,6 +169,122 @@ export default class Sidebar {
         this.adjustSize();
     }
 
+    saveChanges() {
+        let loadedLayers    = Object.values(Hoot.layers.loadedLayers);
+        let selectReference = d3.selectAll('#reference');
+        let selectSecondary = d3.selectAll('#secondary');
+        if (loadedLayers.length === 2) {
+            let referenceActive = loadedLayers[0];
+            let secondaryActive = loadedLayers[1];
+            let changeActive    = new LayerAdd();
+            let referenceState;
+            let secondaryState;
+
+
+            if (d3.select('#reference button.select-active-layer').empty()) {
+                selectReference
+                    .append('button')
+                    .classed('select-active-layer', true)
+                    .text('Set as active layer')
+                    .on('click', function () {
+
+                        d3.event.preventDefault();
+
+                        d3.select('#reference')
+                            .classed('active-pulse', true);
+
+                        d3.select('#secondary')
+                            .classed('active-pulse', false);
+
+                        d3.select('#reference  button.select-active-layer')
+                            .text('Active Layer')
+                            .classed('button-active', true);
+
+                        d3.select('#secondary  button.select-active-layer')
+                            .text('Set as active layer')
+                            .classed('button-active', false);
+
+                        d3.selectAll('#secondary div.controller')
+                            .classed('disable-non-active', true);
+
+                        d3.selectAll('#reference div.controller')
+                            .classed('disable-non-active', false);
+
+                        d3.selectAll('#secondary button.delete-button')
+                            .classed('disable-non-active', true)
+                            .classed('no-click', true);
+
+                        d3.selectAll('#reference button.delete-button')
+                            .classed('disable-non-active', false)
+                            .classed('no-click', false);
+
+
+                        referenceState = referenceActive;
+
+                        if (secondaryState) {
+                            secondaryState.activeLayer  = false;
+                            referenceState.activeLayer  = true;
+                        }
+                        else {
+                            referenceState.activeLayer  = true;
+                        }
+                        changeActive.selectedLayer = referenceState;
+                    });
+            }
+
+            if (d3.select('#secondary button.select-active-layer').empty()) {
+                selectSecondary
+                    .append('button')
+                    .classed('select-active-layer', true)
+                    .text('Set as active layer')
+                    .on('click', function () {
+
+                        d3.event.preventDefault();
+                        d3.select('#secondary')
+                            .classed('active-pulse', true);
+
+                        d3.select('#reference')
+                            .classed('active-pulse', false);
+
+                        d3.select('#secondary  button.select-active-layer')
+                            .text('Active Layer')
+                            .classed('button-active', true);
+
+                        d3.select('#reference  button.select-active-layer')
+                            .text('Set as active layer')
+                            .classed('button-active', false);
+
+                        d3.selectAll('#reference div.controller')
+                            .classed('disable-non-active', true);
+
+                        d3.selectAll('#secondary div.controller')
+                            .classed('disable-non-active', false);
+
+                        d3.selectAll('#reference button.delete-button')
+                            .classed('disable-non-active', true)
+                            .classed('no-click', true);
+
+                        d3.selectAll('#secondary button.delete-button')
+                            .classed('disable-non-active', false)
+                            .classed('no-click', false);
+
+                        secondaryState = secondaryActive;
+
+                        if (referenceState) {
+                            referenceState.activeLayer = false;
+                            secondaryState.activeLayer = true;
+                        }
+                        else {
+                            secondaryState.activeLayer = true;
+                        }
+
+                        changeActive.selectedLayer = secondaryState;
+
+                    });
+            }
+        }
+    }
+
     conflateCheck() {
         let loadedLayers   = Object.values( Hoot.layers.loadedLayers ),
             addControllers = d3.selectAll( '.add-controller' );

modules/behavior/draw.js

@@ -12,13 +12,13 @@ import { behaviorHover } from './hover';
 import { behaviorTail } from './tail';
 import { geoChooseEdge, geoVecLength } from '../geo';
 import { utilKeybinding, utilRebind } from '../util';
+import _find from 'lodash-es/find';
 
 
 var _usedTails = {};
 var _disableSpace = false;
 var _lastSpace = null;
 
-
 export function behaviorDraw(context) {
     var dispatch = d3_dispatch(
         'move', 'click', 'clickWay', 'clickNode', 'undo', 'cancel', 'finish'
@@ -124,20 +124,27 @@ export function behaviorDraw(context) {
     function click() {
         var d = datum();
         var target = d && d.properties && d.properties.entity;
+        var _activeLayer = _find( Hoot.layers.loadedLayers, function(a, b) { return a.activeLayer; });
+
+        // for each if/elseif statment add boolean (is _activeLayer===target.mapId)...
 
-        if (target && target.type === 'node') {   // Snap to a node
-            dispatch.call('clickNode', this, target, d);
-            return;
-
-        } else if (target && target.type === 'way') {   // Snap to a way
-            var choice = geoChooseEdge(
-                context.childNodes(target), context.mouse(), context.projection, context.activeID()
-            );
-            if (choice) {
-                var edge = [target.nodes[choice.index - 1], target.nodes[choice.index]];
-                dispatch.call('clickWay', this, choice.loc, edge, d);
+        if (target && target.type === 'node' && _activeLayer.id === Number(target.mapId)) {   // Snap to a node
+                console.log(target.name + ' (' + target.id + ')' + ' is an active layer' );
+                dispatch.call('clickNode', this, target, d);
                 return;
-            }
+            // dispatch.call('clickNode', this, target, d);
+            // return;
+
+        } else if (target && target.type === 'way' && _activeLayer.id === Number(target.mapId)) {   // Snap to a way
+                console.log(target.id + ' is an active layer' );
+                var choice = geoChooseEdge(
+                    context.childNodes(target), context.mouse(), context.projection, context.activeID()
+                );
+                if (choice) {
+                    var edge = [target.nodes[choice.index - 1], target.nodes[choice.index]];
+                    dispatch.call('clickWay', this, choice.loc, edge, d);
+                    return;
+                }
         }
         dispatch.call('click', this, context.map().mouseCoordinates(), d);
     }

modules/behavior/draw_way.js

@@ -16,6 +16,7 @@ import { geoChooseEdge, geoHasSelfIntersections } from '../geo';
 import { modeBrowse, modeSelect } from '../modes';
 import { osmNode } from '../osm';
 import { utilKeybinding } from '../util';
+import _find from 'lodash-es/find';
 
 
 export function behaviorDrawWay(context, wayId, index, mode, startGraph) {
@@ -73,6 +74,8 @@ export function behaviorDrawWay(context, wayId, index, mode, startGraph) {
     function move(datum) {
         context.surface().classed('nope-disabled', d3_event.altKey);
 
+    // add one more boolean at end, is activeLayer===mapId
+        var _activeLayer = _find( Hoot.layers.loadedLayers, function(a, b) { return a.activeLayer; });
         var targetLoc = datum && datum.properties && datum.properties.entity && datum.properties.entity.loc;
         var targetNodes = datum && datum.properties && datum.properties.nodes;
         var loc = context.map().mouseCoordinates();

modules/behavior/hover.js

@@ -140,6 +140,7 @@ export function behaviorHover(context) {
                     return;
                 }
 
+				// again, boolean, is entity.mapId === activeLayerId...
                 var suppressed = _altDisables && d3_event && d3_event.altKey;
                 _selection.selectAll(selector)
                     .classed(suppressed ? 'hover-suppressed' : 'hover', true);