Merge pull request #3802 from camptocamp/f_3755

Use jQuery to synchronize rotation inputs
camptocamp · Apr 25, 2018 · 9b3f870 · 9b3f870
2 parents 80f296a + aa8d2b7
commit 9b3f870
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 34 deletions.
diff --git a/contribs/gmf/src/directives/partials/print.html b/contribs/gmf/src/directives/partials/print.html
@@ -156,10 +156,9 @@
 
         <div class="col-md-5">
           <input
-            class="form-control"
+            class="form-control gmf-print-rotation-input"
             type="range"
-            ng-model="ctrl.getSetRotation"
-            ng-model-options="{getterSetter: true}"
+            value="0"
             min="-180"
             max="180"
             data-toggle="tooltip"
@@ -168,10 +167,11 @@
 
         <div class="col-md-4">
           <input
-            class="form-control"
+            class="form-control gmf-print-rotation-input"
             type="number"
-            ng-model="ctrl.getSetRotation"
-            ng-model-options="{getterSetter: true}">
+            min="-180"
+            max="180"
+            value="0">
         </div>
       </div>
 

diff --git 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
@@ -11,8 +11,10 @@ describe('GmfPrintController', () => {
     $controller = _$controller_;
     $rootScope = _$rootScope_;
     $scope = $rootScope.$new();
+    const $element = angular.element('<div></div>');
     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', () => {