From 82731799272aea8fbfacf45253c17c3ab1c02236 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Mon, 2 Oct 2023 17:23:22 +0200
Subject: [PATCH 1/4] Add right and bottom buttons

---
 omero_figure/templates/figure/index.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/omero_figure/templates/figure/index.html b/omero_figure/templates/figure/index.html
index 6eae8108..b0317865 100644
--- a/omero_figure/templates/figure/index.html
+++ b/omero_figure/templates/figure/index.html
@@ -865,6 +865,9 @@ <h5>Example Label</h5>
                         <button type="button" class="aleft btn btn-default btn-sm" title="Align Left" disabled="disabled">
                             <span class="glyphicon glyphicon-align-left"></span>
                         </button>
+                        <button type="button" class="aleft btn btn-default btn-sm" title="Align Right" disabled="disabled">
+                            <span class="glyphicon glyphicon-align-right"></span>
+                        </button>
                         <button type="button" class="agrid btn btn-default btn-sm" title="Align To Grid" disabled="disabled">
                             <span class="glyphicon glyphicon-th"></span>
                         </button>
@@ -890,6 +893,9 @@ <h5>Example Label</h5>
                         <button type="button" class="atop btn btn-default btn-sm rotate-font" title="Align Top" disabled="disabled">
                             <span class="glyphicon glyphicon-align-right"></span>
                         </button>
+                        <button type="button" class="atop btn btn-default btn-sm rotate-font" title="Align Bottom" disabled="disabled">
+                            <span class="glyphicon glyphicon-align-left"></span>
+                        </button>
                         <button type="button" class="btn btn-default btn-sm dropdown-toggle" title="Align Sizes"
                             disabled="disabled" data-toggle="dropdown">
                             <span class="glyphicon glyphicon-fullscreen"></span>

From abbf9abc22f2ceb8d23a85dce2c61fb5e43d2171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Tue, 3 Oct 2023 08:38:44 +0200
Subject: [PATCH 2/4] make the right and bottom alignment

---
 omero_figure/templates/figure/index.html |  4 ++--
 src/js/models/figure_model.js            | 27 ++++++++++++++++++++++++
 src/js/views/figure_view.js              | 12 +++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/omero_figure/templates/figure/index.html b/omero_figure/templates/figure/index.html
index b0317865..380c44cf 100644
--- a/omero_figure/templates/figure/index.html
+++ b/omero_figure/templates/figure/index.html
@@ -865,7 +865,7 @@ <h5>Example Label</h5>
                         <button type="button" class="aleft btn btn-default btn-sm" title="Align Left" disabled="disabled">
                             <span class="glyphicon glyphicon-align-left"></span>
                         </button>
-                        <button type="button" class="aleft btn btn-default btn-sm" title="Align Right" disabled="disabled">
+                        <button type="button" class="aright btn btn-default btn-sm" title="Align Right" disabled="disabled">
                             <span class="glyphicon glyphicon-align-right"></span>
                         </button>
                         <button type="button" class="agrid btn btn-default btn-sm" title="Align To Grid" disabled="disabled">
@@ -893,7 +893,7 @@ <h5>Example Label</h5>
                         <button type="button" class="atop btn btn-default btn-sm rotate-font" title="Align Top" disabled="disabled">
                             <span class="glyphicon glyphicon-align-right"></span>
                         </button>
-                        <button type="button" class="atop btn btn-default btn-sm rotate-font" title="Align Bottom" disabled="disabled">
+                        <button type="button" class="abottom btn btn-default btn-sm rotate-font" title="Align Bottom" disabled="disabled">
                             <span class="glyphicon glyphicon-align-left"></span>
                         </button>
                         <button type="button" class="btn btn-default btn-sm dropdown-toggle" title="Align Sizes"
diff --git a/src/js/models/figure_model.js b/src/js/models/figure_model.js
index cced4e8c..4502fe91 100644
--- a/src/js/models/figure_model.js
+++ b/src/js/models/figure_model.js
@@ -610,6 +610,20 @@
             });
         },
 
+        
+        align_right: function() {
+            var selected = this.getSelected(),
+                x_vals = [];
+            selected.forEach(function(p){
+                x_vals.push(p.get('x'));
+            });
+            var max_x = Math.max.apply(window, x_vals);
+
+            selected.forEach(function(p){
+                p.save('x', max_x);
+            });
+        },
+
         align_top: function() {
             var selected = this.getSelected(),
                 y_vals = [];
@@ -623,6 +637,19 @@
             });
         },
 
+        align_bottom: function() {
+            var selected = this.getSelected(),
+                y_vals = [];
+            selected.forEach(function(p){
+                y_vals.push(p.get('y'));
+            });
+            var max_y = Math.max.apply(window, y_vals);
+
+            selected.forEach(function(p){
+                p.save('y', max_y);
+            });
+        },
+
         align_grid: function(gridGap) {
             var sel = this.getSelected(),
                 top_left = this.get_top_left_panel(sel),
diff --git a/src/js/views/figure_view.js b/src/js/views/figure_view.js
index 1c4bd3da..ed06b905 100644
--- a/src/js/views/figure_view.js
+++ b/src/js/views/figure_view.js
@@ -867,6 +867,8 @@
             "click .aleft": "align_left",
             "click .agrid": "align_grid",
             "click .atop": "align_top",
+            "click .aright": "align_right",
+            "click .abottom": "align_bottom",
 
             "click .awidth": "align_width",
             "click .aheight": "align_height",
@@ -917,6 +919,16 @@
             this.model.align_top();
         },
 
+        align_right: function(event) {
+            event.preventDefault();
+            this.model.align_right();
+        },
+
+        align_bottom: function(event) {
+            event.preventDefault();
+            this.model.align_bottom();
+        },
+
         custom_grid_gap: function() {
             let current = $("#custom_grid_gap").attr("value");
             // simple propmt to ask user for custom grid gap

From 1bd2e901ac1d2d8bd785202ab275325e72af1247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Fri, 6 Oct 2023 08:34:36 +0200
Subject: [PATCH 3/4] Fix bug when images don't have the same dimensions

---
 src/js/models/figure_model.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/models/figure_model.js b/src/js/models/figure_model.js
index 4502fe91..fe6050b9 100644
--- a/src/js/models/figure_model.js
+++ b/src/js/models/figure_model.js
@@ -615,12 +615,12 @@
             var selected = this.getSelected(),
                 x_vals = [];
             selected.forEach(function(p){
-                x_vals.push(p.get('x'));
+                x_vals.push(p.get('x') + p.get('width'));
             });
             var max_x = Math.max.apply(window, x_vals);
 
             selected.forEach(function(p){
-                p.save('x', max_x);
+                p.save('x', max_x - p.get('width'));
             });
         },
 
@@ -641,12 +641,12 @@
             var selected = this.getSelected(),
                 y_vals = [];
             selected.forEach(function(p){
-                y_vals.push(p.get('y'));
+                y_vals.push(p.get('y') + p.get('height'));
             });
             var max_y = Math.max.apply(window, y_vals);
 
             selected.forEach(function(p){
-                p.save('y', max_y);
+                p.save('y', max_y - p.get('height'));
             });
         },
 

From 88c9e38a1f531f0870df71f77dc28aa4a1a26573 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Tue, 10 Oct 2023 08:54:00 +0200
Subject: [PATCH 4/4] Fix figure title shadowed issue

---
 omero_figure/static/figure/css/figure.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css
index 332b6578..ade21209 100644
--- a/omero_figure/static/figure/css/figure.css
+++ b/omero_figure/static/figure/css/figure.css
@@ -123,7 +123,7 @@
         line-height: 20px;
         padding: 12px;
         position: absolute;
-        right: 450px;
+        right: 520px;
         text-align: center;
         height: 100%;
     }
@@ -705,6 +705,10 @@
     .navbar>div.container {
         max-width: 100%;
     }
+    #alignment-toolbars {
+        padding-right: 0;
+        margin-right: -20px;
+    }
     /** Add my class to boost size of font icons **/
     .icon-buttons {
         margin-right: 20px;