Rotate image panel by 90°

[Rdornier]

Fixes #484

The rotation button at the bottom rotates the image/canvas by steps of 90°

[will-moore]

The display looks a bit strange for me:

Maybe try to remove height: 200px from the .rotation-controls-shown styles and remove absolute from the new button.

There's a space between the 90 and ° which makes the button bigger than it needs to be. Also I wonder if a different icon would distinguish it from the rotation icon above? (see below). Or possibly just a + 90° is better?

E.g.

--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -650,11 +650,9 @@
     }
 
     .rotation-controls-shown .panel-rotation {
-        margin-top: 170px;
+        margin-top: 160px;
         padding: 2px;
-        min-width: 50px;
         display: block;
-        position: absolute;
         pointer-events: all;
     }
 
@@ -884,7 +882,6 @@
         background-color: #FAFAFA;
         border: 1px solid #CCCCCC;
         border-radius: 3px;
-        height: 200px;
         padding: 2px;
         position: absolute;
         z-index: 100;
diff --git a/src/templates/image_display_options.template.html b/src/templates/image_display_options.template.html
index 420c4f04..5369a15b 100644
--- a/src/templates/image_display_options.template.html
+++ b/src/templates/image_display_options.template.html
@@ -8,8 +8,8 @@
 
         <input type="range" class="rotation-slider" max="360" value="<%= rotation %>"></input>
         <button type="button" class="btn btn-outline-secondary btn-sm panel-rotation" title="Panel rotation">
-            <i class="bi-arrow-clockwise" style="font-size: 14px"></i>
-            <span>90</span> &deg;
+            <i class="bi-arrow-90deg-right" style="font-size: 14px"></i>
+            <span>90</span>&deg;
         </button>

[will-moore]

There's some strange behaviour when the panel is rectangular.
I didn't notice that you're also updating with width and height until I tried a rectangular panel...
But when I try to Undo the change, the width is restored but not the height.

E.g. if I take a panel like on the left and I rotate it 90° it looks like the panel in the centre. Then if I Undo that change, it looks like the panel on the right. The Width is undone, but not the height, and the rotation has jumped to 270°.

[will-moore]

It seems to me that you don't need this cropToRoi function here?, and removing it fixes the Undo issue.

[Rdornier]

I found it necessary for rectangular big images. If we don't crop and simply update width/height, then the image appears more zoomed-in, but for non-big images, then removing this method works properly (see below). As I already had some weird issues, regarding big images, which you couldn't reproduce, can you test on a rectangular big image if you have the same issue ?

[snoopycrimecop]

Conflicting PR. Removed from build OMERO-plugins-push#201. See the console output for more details.
Possible conflicts:

• PR Image outline #578 Rdornier 'Image outline'
  • .gitignore
• PR Link url to image #584 Rdornier 'Link url to image'
  • .gitignore

--conflicts Conflict resolved in build OMERO-plugins-push#202. See the console output for more details.

[will-moore]

It looks like cropToRoi() was just needed for getting the new zoom, so I copied the lines for that and used them directly.

This is working for me with rectangular images etc.

+++ b/src/js/models/panel_model.js
@@ -303,15 +303,14 @@
             var rotation = this.get('rotation') || "0"
             var panelRotationAngle =  (parseInt(rotation) + 90) % 360
 
+            // For rectangular images we need to recalculate the zoom;
             var viewport = this.getViewportAsRect()
             var width = this.get('width')
             var height = this.get('height')
-            var offset = (viewport.height - viewport.width)/2
-            var offset_x = viewport.x-offset
-            var offset_y = viewport.y+offset
-
-            this.cropToRoi({'x': offset_x, 'y': offset_y, 'width': viewport.height, 'height': viewport.width, 'rotation': panelRotationAngle})
-            this.save({'rotation': panelRotationAngle, 'height': width, 'width': height});
+            var xPercent = this.get('orig_width') / viewport.height;
+            var yPercent = this.get('orig_height') / viewport.width;
+            var zoom = Math.min(xPercent, yPercent) * 100;
+            this.save({'rotation': panelRotationAngle, 'height': width, 'width': height, 'zoom': zoom});
 
             return panelRotationAngle

[Rdornier]

You're right, it is the zoom level that causes the issue. I've corrected it. Thanks !

[snoopycrimecop]

Conflicting PR. Removed from build OMERO-plugins-push#242. See the console output for more details.
Possible conflicts:

• PR Image outline #578 Rdornier 'Image outline'
  • src/js/views/right_panel_view.js
• PR Add Horizontal and Vertical Image Flipping Functionality #591 MinaEnayat 'Add Horizontal and Vertical Image Flipping Functionality'
  • src/js/views/right_panel_view.js
  • src/templates/image_display_options.template.html

--conflicts

[snoopycrimecop]

Conflicting PR. Removed from build OMERO-plugins-push#259. See the console output for more details.
Possible conflicts:

• PR Image outline #578 Rdornier 'Image outline'
  • src/js/views/right_panel_view.js
• PR Add Horizontal and Vertical Image Flipping Functionality #591 MinaEnayat 'Add Horizontal and Vertical Image Flipping Functionality'
  • src/js/views/right_panel_view.js
  • src/templates/image_display_options.template.html

--conflicts Conflict resolved in build OMERO-plugins-push#260. See the console output for more details.

[will-moore]

Both those conflicting PRs are merged now @Rdornier

[Rdornier]

Thanks @will-moore for merging the PRs.
I've solved the conflicts now

[will-moore]

Working fine on merge-ci now, Thanks