From aa8d2b70400b259f9b1b3a1ed13bf6aa3717d144 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 24 Apr 2018 13:12:26 +0200 Subject: [PATCH] Use jQuery to synchronize rotation inputs --- .../gmf/src/directives/partials/print.html | 12 ++--- contribs/gmf/src/directives/print.js | 54 ++++++++++--------- .../controllers/gmfprintcontroller.spec.js | 11 ++-- 3 files changed, 43 insertions(+), 34 deletions(-) diff --git a/contribs/gmf/src/directives/partials/print.html b/contribs/gmf/src/directives/partials/print.html index fddaadbc94ac..b3dccf130162 100644 --- a/contribs/gmf/src/directives/partials/print.html +++ b/contribs/gmf/src/directives/partials/print.html @@ -156,10 +156,9 @@
+ min="-180" + max="180" + value="0">
diff --git a/contribs/gmf/src/directives/print.js b/contribs/gmf/src/directives/print.js index 211e952de47f..11d8e4d3d690 100644 --- a/contribs/gmf/src/directives/print.js +++ b/contribs/gmf/src/directives/print.js @@ -149,6 +149,7 @@ gmf.module.directive('gmfPrint', gmf.printDirective); /** + * @param {angular.JQLite} $element Element. * @param {angular.Scope} $rootScope Angular root scope. * @param {angular.Scope} $scope Angular scope. * @param {angular.$timeout} $timeout Angular timeout service. @@ -172,7 +173,7 @@ gmf.module.directive('gmfPrint', gmf.printDirective); * @ngdoc controller * @ngname GmfPrintController */ -gmf.PrintController = function($rootScope, $scope, $timeout, $q, $injector, +gmf.PrintController = function($element, $rootScope, $scope, $timeout, $q, $injector, gettextCatalog, ngeoLayerHelper, ngeoFeatureOverlayMgr, ngeoPrintUtils, ngeoCreatePrint, gmfPrintUrl, gmfAuthentication, ngeoQueryResult, $filter, gmfPrintState, gmfThemes) { @@ -376,6 +377,19 @@ gmf.PrintController = function($rootScope, $scope, $timeout, $q, $injector, */ this.scaleManuallySelected_ = false; + /** + * @type {angular.JQLite} + * @export + */ + this.rotationInput_ = $element.find('.gmf-print-rotation-input'); + + this.rotationInput_.on('input', (event) => { + const rotation = $(event.target).val(); + if (rotation !== '') { + this.setRotation(/** @type {number} */ (rotation)); + } + }); + /** * @return {ol.Size} Size in dots of the map to print. */ @@ -493,7 +507,7 @@ gmf.PrintController.prototype.togglePrintPanel_ = function(active) { ol.Observable.unByKey(this.postComposeListenerKey_); ol.Observable.unByKey(this.pointerDragListenerKey_); ol.Observable.unByKey(this.mapViewResolutionChangeKey_); - this.getSetRotation(0); + this.setRotation(0); this.map.render(); // Redraw (remove) post compose mask; } }; @@ -661,32 +675,22 @@ gmf.PrintController.prototype.isAttributeInCurrentLayout_ = function(name) { /** - * Getter setter to update or get the current rotation value. Param and result - * are in degree. Updating the rotation will redraw the mask or rorate the - * map (depending on the configuration); - * @param {number=} opt_rotation The optional new rotation value. - * @return {number} The new value of rotation; - * @export + * Set the current rotation value. + * Updating the rotation will redraw the mask or rotate the map (depending on the configuration). + * @param {number} rotation The optional new rotation value in degrees. */ -gmf.PrintController.prototype.getSetRotation = function(opt_rotation) { - if (opt_rotation !== undefined) { - let rotation = parseInt(opt_rotation, 10); - if (rotation > 180) { - rotation = -180; - } else if (rotation < -180) { - rotation = 180; - } - this.rotation = rotation; +gmf.PrintController.prototype.setRotation = function(rotation) { + this.rotation = ol.math.clamp(rotation, -180, 180); - // Render the map to update the postcompose mask or rotate the map. - if (this.rotateMask_) { - this.map.render(); - } else { - this.map.getView().setRotation(ol.math.toRadians(this.rotation)); - } + // sync all the inputs + this.rotationInput_.val(this.rotation.toString()); + // Render the map to update the postcompose mask or rotate the map. + if (this.rotateMask_) { + this.map.render(); + } else { + this.map.getView().setRotation(ol.math.toRadians(this.rotation)); } - return this.rotation; }; @@ -722,7 +726,7 @@ gmf.PrintController.prototype.onPointerDrag_ = function(e) { const increment = Math.round(ol.math.toDegrees(angle) * boost); // Set rotation then update the view. - this.getSetRotation(this.rotation + increment); + this.setRotation(this.rotation + increment); this.$scope_.$digest(); } // Prepare the removal of this session of drags events diff --git a/contribs/gmf/test/spec/controllers/gmfprintcontroller.spec.js b/contribs/gmf/test/spec/controllers/gmfprintcontroller.spec.js index 0ff42d49da29..0ac2546b1e08 100644 --- a/contribs/gmf/test/spec/controllers/gmfprintcontroller.spec.js +++ b/contribs/gmf/test/spec/controllers/gmfprintcontroller.spec.js @@ -11,8 +11,10 @@ describe('GmfPrintController', () => { $controller = _$controller_; $rootScope = _$rootScope_; $scope = $rootScope.$new(); + const $element = angular.element('
'); gmfPrintCtrl = $controller('GmfPrintController', { + $element, $scope, gmfPrintUrl: '' } @@ -27,11 +29,14 @@ describe('GmfPrintController', () => { gmfPrintCtrl.parseCapabilities_({data: printCapabilities}); })); - it('Get Set rotation', () => { + it('Set rotation', () => { expect(gmfPrintCtrl.rotation).toBe(0); - gmfPrintCtrl.getSetRotation(25); - expect(gmfPrintCtrl.rotation).toBe(gmfPrintCtrl.getSetRotation()); + gmfPrintCtrl.setRotation(25); expect(gmfPrintCtrl.rotation).toBe(25); + gmfPrintCtrl.setRotation(190); + expect(gmfPrintCtrl.rotation).toBe(180); + gmfPrintCtrl.setRotation(-1000); + expect(gmfPrintCtrl.rotation).toBe(-180); }); it('Set layout and test depending layout informations changes', () => {