Commit 6af3ef89 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Corrige ordenación de capas y optimiza 

Permite la correcta ordenación de capas para un mapa, tanto si proceden
del catálogo de atlas como si se han recibido en una vista específica
(como monitorización marina).

Reconstruye la gestión de la ordenación de capas en los mapas, abarcando
tanto el propio componente de mapa, como los componentes de listado drag
and drop y atlas. Reubica y simplifica la lógica de ordenación, dando
mayor protagonismo al mapa y reorganizando el código dentro de las
partes de atlas.

Optimiza la gestión de listas de elementos, la búsqueda de índices y
añade condiciones de parada para evitar cálculos innecesarios.

Edita algunas propiedades y limpia partes de código.
parent 8a7ce64d

client-app/src/component/atlas/Atlas.js

+2 −8
Original line number Diff line number Diff line
@@ -69,8 +69,7 @@ define([ 
				selectionTarget: redmicConfig.services.atlasLayerSelection,

				pathSeparator: '.',



				_layerIdsById: {}, // correspondencia entre ids de las capas con sus layerIds

				_lastOrder: 0 // order de la última capa añadida (para saber donde añadir la siguiente)

				_layerIdsById: {} // correspondencia entre ids de las capas con sus layerIds

			};



			lang.mixin(this, this.config, args);
@@ -292,8 +291,6 @@ define([ 
			this._removeLayerInstance(layerId);



			delete this._layerIdsById[id];



			this._lastOrder--;

		},



		_clearSelection: function() {
@@ -317,8 +314,6 @@ define([ 
			}



			this._layerIdsById = [];



			this._lastOrder = 0;

		},



		_errorAvailable: function(error) {
@@ -370,8 +365,7 @@ define([ 
				target: this.localTarget

			});



			this._lastOrder++;

			this._activateLayer(atlasLayerItem, this._lastOrder);

			this._activateLayer(atlasLayerItem);

		},



		_subLayerRemoved: function(res) {

client-app/src/component/atlas/_AtlasLayersManagement.js

+8 −21
Original line number Diff line number Diff line
@@ -360,7 +360,7 @@ define([ 
			return mapLayerInstance;

		},



		_activateLayer: function(/*Object*/ atlasLayerItem, order) {

		_activateLayer: function(/*Object*/ atlasLayerItem) {



			if (!atlasLayerItem) {

				return;
@@ -373,21 +373,11 @@ define([ 
				layer: layer,

				layerId: mapLayerId,

				layerLabel: atlasLayerItem.label,

				atlasItem: atlasLayerItem.atlasItem,

				order: order

			});



			this._publish(this._themesBrowser.getChildChannel('browser', 'UPDATE_DRAGGABLE_ITEM_ORDER'), {

				id: atlasLayerItem.id,

				index: 0

			});



			this._publish(this._themesBrowser.getChildChannel('browser', 'ENABLE_DRAG_AND_DROP'), {

				id: atlasLayerItem.id

				atlasItem: atlasLayerItem.atlasItem

			});

		},



		_deactivateLayer: function(/*Object*/ atlasLayerItem, order) {

		_deactivateLayer: function(/*Object*/ atlasLayerItem) {



			if (!atlasLayerItem) {

				return;
@@ -396,17 +386,14 @@ define([ 
			var mapLayerId = atlasLayerItem.mapLayerId,

				layer = this._layerInstances[mapLayerId];



			if (layer) {

			if (!layer) {

				return;

			}



			this._emitEvt('REMOVE_LAYER', {

				layer: layer,

					order: order,

				keepInstance: true

			});

		}



			this._publish(this._themesBrowser.getChildChannel('browser', 'DISABLE_DRAG_AND_DROP'), {

				id: atlasLayerItem.id

			});

		}

	});

});

client-app/src/component/atlas/_AtlasThemesManagement.js

+54 −11
Original line number Diff line number Diff line
@@ -36,7 +36,7 @@ define([ 
				animatedClass: 'animate__animated',

				animatedOnSelect: 'animate__headShake',



				_activeLayers: {}, // indicador sobre si la capa está activada en el mapa o no

				_activeLayers: {} // indicador sobre si la capa está activada en el mapa o no

			};



			lang.mixin(this, this.config, args);
@@ -59,6 +59,9 @@ define([ 


			aspect.before(this, '_reportDeselection', lang.hitch(this, this._themesBrowserReportDeselection));

			aspect.before(this, '_reportClearSelection', lang.hitch(this, this._themesBrowserReportClearSelection));



			aspect.after(this, '_activateLayer', lang.hitch(this, this._themesBrowserActivateLayer));

			aspect.after(this, '_deactivateLayer', lang.hitch(this, this._themesBrowserDeactivateLayer));

		},



		_themesBrowserAfterSetConfigurations: function() {
@@ -166,19 +169,25 @@ define([ 


		_subThemesBrowserDragAndDrop: function(response) {



			var item = response.item,

				total = response.total,

				indexOld = response.indexOld,

				indexList = response.indexList;

			var item = response.item;



			if (!item && !total && !indexOld && !indexList) {

			if (!item) {

				return;

			}



			var indexList = response.indexList,

				indexOld = response.indexOld;



			if (indexList === null || isNaN(indexList) || indexList === indexOld) {

				return;

			}



			var movedDown = indexList > indexOld;



			this._publish(this.getMapChannel('REORDER_LAYERS'), {

				layerId: this._createLayerId(response.item.atlasItem),

				newPosition: response.total - response.indexList,

				oldPosition: response.total - response.indexOld

				index: response.indexList,

				movedDown: movedDown

			});

		},
@@ -187,18 +196,17 @@ define([ 
			var atlasLayerItem = obj.item,

				mapLayerId = atlasLayerItem.mapLayerId,

				state = obj.state,

				order = obj.total - obj.indexList,

				rowNode = obj.node;



			if (!state) {

				domClass.remove(rowNode, [this.animatedClass, this.animatedOnSelect]);



				this._deactivateLayer(atlasLayerItem, order);

				this._deactivateLayer(atlasLayerItem);

				this._activeLayers[mapLayerId] = false;

			} else {

				domClass.add(rowNode, [this.animatedClass, this.animatedOnSelect]);



				this._activateLayer(atlasLayerItem, order);

				this._activateLayer(atlasLayerItem);

				this._activeLayers[mapLayerId] = true;

			}

		},
@@ -262,6 +270,41 @@ define([ 
		_cleanRowSecondaryContainer: function(layerId, container) {



			// TODO se usa para conectar con aspect desde las otras extensiones

		},



		_themesBrowserActivateLayer: function(_ret, args) {



			var atlasLayerItem = args[0];



			if (!atlasLayerItem) {

				return;

			}



			var itemId = atlasLayerItem.id;



			this._publish(this._themesBrowser.getChildChannel('browser', 'UPDATE_DRAGGABLE_ITEM_ORDER'), {

				id: itemId,

				index: 0

			});



			this._publish(this._themesBrowser.getChildChannel('browser', 'ENABLE_DRAG_AND_DROP'), {

				id: itemId

			});

		},



		_themesBrowserDeactivateLayer: function(_ret, args) {



			var atlasLayerItem = args[0];



			if (!atlasLayerItem) {

				return;

			}



			var itemId = atlasLayerItem.id;



			this._publish(this._themesBrowser.getChildChannel('browser', 'DISABLE_DRAG_AND_DROP'), {

				id: itemId

			});

		}

	});

});

client-app/src/component/browser/_DragAndDrop.js

+8 −8
Original line number Diff line number Diff line
@@ -322,17 +322,17 @@ define([ 


		_calcNodeIndex: function(node) {



			var i = 0;

			var listRows = Array.from(this.contentListNode.firstChild.childNodes);



			while ((node = node.previousSibling) != null) {

	 			i++;

			}



			return i;

			return listRows.indexOf(node);

		},



		_updatePositionRow: function(row) {



			if (!this._nodeDrag) {

				return;

			}



			this._nodeDrag.addEventListener('animationend', lang.hitch(this, this._rowDragAnimationEndCallback), {

				passive: true

			});
@@ -341,7 +341,7 @@ define([ 
			if (domClass.contains(this._nodeBorderLast, this.topBorderDragAndDropClass)) {

				put(this._nodeBorderLast, '-', this._nodeDrag);

				domClass.add(this._nodeDrag, [this.animatedClass, this.animatedFromBottom]);

			} if (domClass.contains(this._nodeBorderLast, this.bottomBorderDragAndDropClass)) {

			} else if (domClass.contains(this._nodeBorderLast, this.bottomBorderDragAndDropClass)) {

				put(this._nodeBorderLast, '+', this._nodeDrag);

				domClass.add(this._nodeDrag, [this.animatedClass, this.animatedFromTop]);

			}

client-app/src/component/map/Map.js

+88 −49
Original line number Diff line number Diff line
@@ -101,7 +101,9 @@ define([ 
				_overlayLayers: {},

				_optionalLayerKeys: [],

				_baseLayerKeys: [],

				_baseLayerInstances: {}

				_baseLayerInstances: {},



				_lastAtlasLayerOrder: 0

			};



			lang.mixin(this, this.config, args);
@@ -341,22 +343,10 @@ define([ 
		_manageAddedLayer: function(layer, layerId, obj) {



			var optional = obj.optional,

				order = obj.order,

				layerLabel = obj.layerLabel || layerId;



			if (optional) {

				this._addLayerToSelector(layer, layerLabel, true);

			} else {

				if (order) {

					var nextOrder = 0;

					for (var key in this._overlayLayers) {

						var overlayLayer = this._overlayLayers[key];

						if (overlayLayer.optional) {

							nextOrder++;

						}

					}

					order += nextOrder;

				}

			}



			var overlayLayerObj = this._overlayLayers[layerId];
@@ -370,7 +360,21 @@ define([ 
				if (overlayLayerObj.instance !== layer) {

					overlayLayerObj.instance = layer;

				}

				this._setLayerZIndex(layer, overlayLayerObj.order);

			}



			var externalOrder = obj.order,

				atlasItem = obj.atlasItem,

				order;



			if (externalOrder) {

				// asigna orden indicado desde fuera, para capas opcionales conocidas

				order = externalOrder;

			} else if (atlasItem) {

				// asigna orden a capas overlay y tiled, si vienen desde servicio atlas

				this._lastAtlasLayerOrder++;

				order = this._lastAtlasLayerOrder;



				overlayLayerObj.atlasItem = atlasItem;

			}



			if (order) {
@@ -379,6 +383,13 @@ define([ 
			}

		},



		_getOrderForAddedLayers: function(externalIndex) {



			var externalOrder = this._lastAtlasLayerOrder - externalIndex;



			return externalOrder;

		},



		_getLayerId: function(layerObj) {



			if (!layerObj) {
@@ -440,14 +451,11 @@ define([ 
				layer = layerObj.instance,

				order = layerObj.order;



			if (!keepInstance && order) {

				for (var key in this._overlayLayers) {

					var layerObject = this._overlayLayers[key];

			if (order) {

				this._reorderNextLayers(order);



					if (layerObject.order > order) {

						layerObject.order--;

						this._setLayerZIndex(layerObject.instance, layerObject.order);

					}

				if (layerObj.atlasItem) {

					this._lastAtlasLayerOrder--;

				}

			}
@@ -462,6 +470,20 @@ define([ 
			this.removeLayer(layer);

		},



		_reorderNextLayers: function(order) {



			for (var key in this._overlayLayers) {

				var layerObject = this._overlayLayers[key];



				if (!layerObject.order || layerObject.order <= order) {

					continue;

				}



				layerObject.order--;

				this._setLayerZIndex(layerObject.instance, layerObject.order);

			}

		},



		_removeMapBaseLayer: function(layerId, keepInstance) {



			var layerInstance = this._baseLayerInstances[layerId];
@@ -558,45 +580,61 @@ define([ 
			this._emitEvt('LOADED');

		},



		_subReorderLayers: function(request) {

		_subReorderLayers: function(req) {



			var layerId = request.layerId,

			var layerId = req.layerId,

				layerObj = this._overlayLayers[layerId];



			if (!layerObj) {

				return;

			}



			var newPosition = request.newPosition + 1,

				oldPosition = request.oldPosition + 1,

				diff = newPosition - oldPosition,

				key, layerObject;

			var index = req.index,

				newOrder = this._getOrderForAddedLayers(index);



			if (diff < 0) {

				for (key in this._overlayLayers) {

					layerObject = this._overlayLayers[key];

			Object.entries(this._overlayLayers).forEach(lang.hitch(this, this._reorderAffectedLayers, {

				movedLayerId: layerId,

				movedLayerOldOrder: layerObj.order,

				movedLayerNewOrder: newOrder,

				movedDown: req.movedDown

			}));



					if (layerObject.order >= newPosition && layerObject.order < oldPosition) {

						layerObject.order++;

						this._setLayerZIndex(layerObject.instance, layerObject.order);

					}

			layerObj.order = newOrder;

			this._setLayerZIndex(layerObj.instance, layerObj.order);

		},



		_reorderAffectedLayers: function(args, layerEntry) {



			var layerId = layerEntry[0],

				layerObject = layerEntry[1],

				layerOrder = layerObject.order,



				movedLayerId = args.movedLayerId,

				movedLayerOldOrder = args.movedLayerOldOrder,

				movedLayerNewOrder = args.movedLayerNewOrder,

				movedDown = args.movedDown;



			if (layerId === movedLayerId || isNaN(layerOrder) || !layerObject.atlasItem) {

				return;

			}



				layerObj.order -= Math.abs(diff);

				this._setLayerZIndex(layerObj.instance, layerObj.order);

			var layerNotAffectedByReorder;

			if (movedDown) {

				layerNotAffectedByReorder = layerOrder > movedLayerOldOrder || layerOrder < movedLayerNewOrder;

			} else {

				for (key in this._overlayLayers) {

					layerObject = this._overlayLayers[key];



					if (layerObject.order <= newPosition && layerObject.order > oldPosition) {

						layerObject.order--;

						this._setLayerZIndex(layerObject.instance, layerObject.order);

				layerNotAffectedByReorder = layerOrder < movedLayerOldOrder || layerOrder > movedLayerNewOrder;

			}



			if (layerNotAffectedByReorder) {

				return;

			}



				layerObj.order += Math.abs(diff);

				this._setLayerZIndex(layerObj.instance, layerObj.order);

			if (movedDown) {

				layerObject.order++;

			} else {

				layerObject.order--;

			}

			this._setLayerZIndex(layerObject.instance, layerObject.order);

		},



		_subLayerAddedForwarded: function(res) {
@@ -697,8 +735,8 @@ define([ 


		_bboxIsDifferent: function(bbox1, bbox2) {



			return !(bbox1.lat1 === bbox2.lat1 && bbox1.lng1 === bbox2.lng1 &&

				bbox1.lat2 === bbox2.lat2 && bbox1.lng2 === bbox2.lng2);

			return bbox1.lat1 !== bbox2.lat1 || bbox1.lng1 !== bbox2.lng1 ||

				bbox1.lat2 !== bbox2.lat2 || bbox1.lng2 !== bbox2.lng2;

		},



		_loadBaseLayers: function() {
@@ -731,6 +769,8 @@ define([ 
					order: i + 1

				});

			}



			this._lastAtlasLayerOrder = this._optionalLayerKeys.length;

		},



		_isBaseLayer: function(layerId) {
@@ -771,6 +811,5 @@ define([ 
				instance: this._getMapInstance()

			};

		}



	});

});