Commit ec437883 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Refactoriza componente Atlas, separa themesBrowser 

Reestructura la implementación del componente Atlas para gestionar las
capas temáticas seleccionadas, facilitando reutilizar esta lógica en
otros contextos.
parent b6e0d2d0

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

+15 −124
Original line number Diff line number Diff line 
define([

	'alertify'

	,'app/designs/list/Controller'

	, 'app/designs/list/layout/Layout'

	, 'src/catalog/ogcService/OgcServiceCatalogLite'

	, 'src/redmicConfig'

	, 'dojo/_base/declare'
@@ -12,21 +10,17 @@ define([ 
	, 'src/component/base/_Show'

	, 'src/component/base/_ShowInTooltip'

	, 'src/component/base/_Store'

	, 'src/component/browser/_DragAndDrop'

	, 'src/component/atlas/_AtlasLayersManagement'

	, 'src/component/atlas/_AtlasLegendManagement'

	, 'src/component/atlas/_AtlasThemesManagement'

	, 'src/component/browser/_HierarchicalSelect'

	, 'src/component/browser/bars/SelectionBox'

	, 'src/component/browser/bars/Total'

	, 'src/component/layout/templateDisplayer/TemplateDisplayer'

	, 'templates/AtlasList'

	, 'templates/LoadingCustom'

	, 'templates/ServiceOGCAtlasList'

	, 'templates/ServiceOGCAtlasDetails'

	, './_AtlasLayersManagement'

	, './_AtlasLegendManagement'

], function(

	alertify

	, Controller

	, Layout

	, OgcServiceCatalogLite

	, redmicConfig

	, declare
@@ -37,20 +31,20 @@ define([ 
	, _Show

	, _ShowInTooltip

	, _Store

	, _DragAndDrop

	, _AtlasLayersManagement

	, _AtlasLegendManagement

	, _AtlasThemesManagement

	, _HierarchicalSelect

	, SelectionBox

	, Total

	, TemplateDisplayer

	, ListTemplate

	, LoadingCustom

	, serviceOGCList

	, templateDetails

	, _AtlasLayersManagement

	, _AtlasLegendManagement

) {



	return declare([_Module, _Show, _Store, _Selection, _AtlasLayersManagement, _AtlasLegendManagement], {

	return declare([

		_Module, _Show, _Store, _Selection, _AtlasLayersManagement, _AtlasLegendManagement, _AtlasThemesManagement

	], {

		//	summary:

		//		Módulo de Atlas, con un catálogo de capas para añadir al mapa y un listado de gestión de las añadidas.
@@ -69,7 +63,6 @@ define([ 
				target: redmicConfig.services.atlasLayer,

				selectionTarget: redmicConfig.services.atlasLayerSelection,

				pathSeparator: '.',

				parentProperty: 'parent',



				_layerInstances: {}, // capas de las que hemos creado instancia (no se borran, se reciclan)

				_layerIdsById: {}, // correspondencia entre ids de las capas con sus layerIds
@@ -82,37 +75,12 @@ define([ 
		_setConfigurations: function() {



			this.themesBrowserConfig = this._merge([{

				parentChannel: this.getChannel(),

				title: this.i18n.selectedLayers,

				target: this.localTarget,

				classByList: '.borderList',

				browserExts: [_DragAndDrop],

				browserConfig: {

					template: ListTemplate,

					bars: [{

						instance: Total

					}],

					insertInFront: true,

					rowConfig: {

						buttonsConfig: {

							listButton: [{

								icon: 'fa-map-o',

								btnId: 'legend',

								title: 'legend',

								returnItem: true

							},{

								icon: 'fa-map-marker',

								title: 'mapCentering',

								btnId: 'fitBounds',

								returnItem: true

							},{

								icon: 'fa-toggle-on',

								altIcon: 'fa-toggle-off',

								btnId: 'addLayer',

								title: 'layer',

								state: true,

								returnItem: true

							},{

								icon: 'fa-trash-o',

								btnId: 'remove',

								title: 'remove',
@@ -128,7 +96,9 @@ define([ 
						}

					}

				}

			}, this.themesBrowserConfig || {}]);

			}, this.themesBrowserConfig || {}], {

				arrayMergingStrategy: 'concatenate'

			});



			this.catalogConfig = this._merge([{

				parentChannel: this.getChannel(),
@@ -181,9 +151,6 @@ define([ 


		_initialize: function() {



			var ThemesBrowser = declare([Layout, Controller]);

			this.themesBrowser = new ThemesBrowser(this.themesBrowserConfig);



			this.catalogView = new OgcServiceCatalogLite(this.catalogConfig);



			var LayerDetailsTooltip = declare(TemplateDisplayer).extend(_ShowInTooltip);
@@ -199,12 +166,6 @@ define([ 
			this.subscriptionsConfig.push({

				channel : this.getMapChannel('LAYER_REMOVED'),

				callback: '_subLayerRemoved'

			},{

				channel: this.themesBrowser.getChildChannel('browser', 'BUTTON_EVENT'),

				callback: '_subThemesBrowserButtonEvent'

			},{

				channel: this.themesBrowser.getChildChannel('browser', 'DRAG_AND_DROP'),

				callback: '_subThemesBrowserDragAndDrop'

			},{

				channel : this.catalogView.getChildChannel('browser', 'BUTTON_EVENT'),

				callback: '_subCatalogViewButtonEvent'
@@ -263,7 +224,7 @@ define([ 
			this._publish(addTabChannel, {

				title: this.i18n.selectedLayers,

				iconClass: 'fa fa-map-o',

				channel: this.themesBrowser.getChannel()

				channel: this._themesBrowser.getChannel()

			});

		},
@@ -314,7 +275,7 @@ define([ 


		_reportDeselection: function(id) {



			this._publish(this.themesBrowser.getChildChannel('browser', 'REMOVE'), {

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

				ids: [id]

			});
@@ -353,7 +314,7 @@ define([ 


			this._clearSelectionPending = false;



			this._publish(this.themesBrowser.getChildChannel('browser', 'CLEAR'));

			this._publish(this._themesBrowser.getChildChannel('browser', 'CLEAR'));



			for (var key in this._layerIdsById) {

				this._removeLayerInstance(key);
@@ -436,24 +397,6 @@ define([ 
			this._removeLegendOfRemovedLayer(layerId);

		},



		_subThemesBrowserDragAndDrop: function(response) {



			var item = response.item,

				total = response.total,

				indexOld = response.indexOld,

				indexList = response.indexList;



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

				return;

			}



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

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

				newPosition: response.total - response.indexList,

				oldPosition: response.total - response.indexOld

			});

		},



		_subCatalogViewButtonEvent: function(res) {



			this._publish(this.templateDisplayerDetails.getChannel('HIDE'));
@@ -536,58 +479,6 @@ define([ 
			this._removeLegendSubsAndPubsForLayer(layerInstance);



			this._publish(layerInstance.getChannel('DISCONNECT'));

		},



		_subThemesBrowserButtonEvent: function(objReceived) {



			var btnId = objReceived.btnId,

				item = objReceived.item;



			if (btnId === 'addLayer') {

				this._onAddLayerBrowserButtonClick(objReceived);

			} else if (btnId === 'remove') {

				var parentItem = item.originalItem[this.parentProperty],

					path = 'r' + this.pathSeparator + parentItem.id + this.pathSeparator + item.id;



				this._emitEvt('DESELECT', [path]);

			} else if (btnId === 'legend') {

				this._showLayerLegend(objReceived);

			} else if (btnId === 'fitBounds') {

				this._fitBounds(item);

			}

		},



		_fitBounds: function(item) {



			if (!item.originalItem.geometry) {

				return;

			}



			var coordinates = item.originalItem.geometry.coordinates[0],

				southWest = this._getLatLng(coordinates[0]),

				northEast = this._getLatLng(coordinates[2]);



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

				bounds: L.latLngBounds(southWest, northEast)

			});

		},



		_getLatLng: function(coord) {



			return [coord[1], coord[0]];

		},



		_onAddLayerBrowserButtonClick: function(obj) {



			var item = obj.item,

				state = obj.state,

				order = obj.total - obj.indexList;



			if (!state) {

				this._deactivateLayer(item, order);

			} else {

				this._activateLayer(item, order);

			}

		}

	});

});

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

0 → 100644
+187 −0
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'app/designs/list/Controller'

	, 'app/designs/list/layout/Layout'

	, 'src/component/browser/_DragAndDrop'

	, 'src/component/browser/bars/Total'

	, 'templates/AtlasList'

], function(

	declare

	, lang

	, aspect

	, Controller

	, Layout

	, _DragAndDrop

	, Total

	, ListTemplate

) {



	return declare(null, {

		//	summary:

		//		Gestión de capas temáticas de atlas cargadas en el mapa.



		constructor: function(args) {



			this.config = {

				pathSeparator: '.',

				parentProperty: 'parent'

			};



			lang.mixin(this, this.config, args);



			aspect.before(this, '_initialize', lang.hitch(this, this._initializeThemesBrowser));

			aspect.before(this, '_defineSubscriptions', lang.hitch(this, this._defineThemesBrowserSubscriptions));

		},



		_afterSetConfigurations: function() {



			this._setThemesBrowserConfiguration();

		},



		_setThemesBrowserConfiguration: function() {



			this.themesBrowserConfig = this._merge([{

				parentChannel: this.getChannel(),

				classByList: '.borderList',

				browserExts: [_DragAndDrop],

				browserConfig: {

					template: ListTemplate,

					bars: [{

						instance: Total

					}],

					insertInFront: true,

					rowConfig: {

						buttonsConfig: {

							listButton: [{

								icon: 'fa-map-o',

								btnId: 'legend',

								title: 'legend',

								returnItem: true

							},{

								icon: 'fa-map-marker',

								title: 'mapCentering',

								btnId: 'fitBounds',

								returnItem: true

							},{

								icon: 'fa-toggle-on',

								altIcon: 'fa-toggle-off',

								btnId: 'addLayer',

								title: 'layer',

								state: true,

								returnItem: true

							}]

						}

					}

				}

			}, this.themesBrowserConfig || {}], {

				arrayMergingStrategy: 'concatenate'

			});

		},



		_initializeThemesBrowser: function() {



			console.log('inicializo');

			var ThemesBrowser = declare([Layout, Controller]);

			this._themesBrowser = new ThemesBrowser(this.themesBrowserConfig);

		},



		_defineThemesBrowserSubscriptions: function() {



			console.log('suscribo');

			this.subscriptionsConfig.push({

				channel: this._themesBrowser.getChildChannel('browser', 'BUTTON_EVENT'),

				callback: '_subThemesBrowserButtonEvent'

			},{

				channel: this._themesBrowser.getChildChannel('browser', 'DRAG_AND_DROP'),

				callback: '_subThemesBrowserDragAndDrop'

			});

		},



		_subThemesBrowserButtonEvent: function(objReceived) {



			var btnId = objReceived.btnId,

				item = objReceived.item;



			if (btnId === 'addLayer') {

				this._onThemesBrowserAddLayerButtonClick(objReceived);

			} else if (btnId === 'remove') {

				this._onThemesBrowserRemoveLayerButtonClick(item);

			} else if (btnId === 'legend') {

				this._onThemesBrowserLegendButtonClick(objReceived);

			} else if (btnId === 'fitBounds') {

				this._onThemesBrowserFitBoundsButtonClick(item);

			}

		},



		_subThemesBrowserDragAndDrop: function(response) {



			var item = response.item,

				total = response.total,

				indexOld = response.indexOld,

				indexList = response.indexList;



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

				return;

			}



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

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

				newPosition: response.total - response.indexList,

				oldPosition: response.total - response.indexOld

			});

		},



		_onThemesBrowserAddLayerButtonClick: function(obj) {



			var item = obj.item,

				state = obj.state,

				order = obj.total - obj.indexList;



			if (!state) {

				this._deactivateLayer(item, order);

			} else {

				this._activateLayer(item, order);

			}

		},



		_onThemesBrowserRemoveLayerButtonClick: function(item) {



			var parentItem = item.originalItem[this.parentProperty],

				path = 'r' + this.pathSeparator + parentItem.id + this.pathSeparator + item.id;



			this._emitEvt('DESELECT', [path]);

		},



		_onThemesBrowserLegendButtonClick: function(obj) {



			this._showLayerLegend(obj);

		},



		_onThemesBrowserFitBoundsButtonClick: function(item) {



			this._fitBounds(item);

		},



		_fitBounds: function(item) {



			if (!item.originalItem.geometry) {

				return;

			}



			var coordinates = item.originalItem.geometry.coordinates[0],

				southWest = this._getLatLng(coordinates[0]),

				northEast = this._getLatLng(coordinates[2]);



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

				bounds: L.latLngBounds(southWest, northEast)

			});

		},



		_getLatLng: function(coord) {



			return [coord[1], coord[0]];

		}

	});

});