Merge remote-tracking branch 'Rdornier/align-right-bottom' into vite

will-moore · Feb 15, 2024 · 8276fb0 · 8276fb0
2 parents 12bce37 + 88c9e38
commit 8276fb0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/src/css/figure.css b/src/css/figure.css
@@ -134,7 +134,7 @@
         line-height: 20px;
         padding: 12px 5px;
         position: absolute;
-        right: 485px;
+        right: 520px;
         text-align: center;
         height: 100%;
     }
@@ -923,6 +923,10 @@
         transform: rotate(90deg);
         display: inline-block;
     }
+    .abottom i {
+        transform: rotate(270deg);
+        display: inline-block;
+    }
 
     .navbar-left .btn-sm {
         font-size: 14px;

diff --git a/src/index.html b/src/index.html
@@ -1338,6 +1338,13 @@ <h5>Example Label</h5>
               >
                 <i class="bi-text-left"></i>
               </button>
+              <button
+                type="button"
+                class="aright btn btn-sm btn-light"
+                title="Align Right"
+              >
+                <i class="bi-text-right"></i>
+              </button>
               <button
                 type="button"
                 class="agrid btn btn-sm btn-light"
@@ -1444,6 +1451,14 @@ <h5>Example Label</h5>
               >
                 <i class="bi-text-left"></i>
               </button>
+              <button
+                type="button"
+                disabled
+                class="abottom btn btn-sm btn-light"
+                title="Align Bottom"
+              >
+                <i class="bi-text-left"></i>
+              </button>
               <button
                 type="button"
                 class="btn btn-sm btn-light dropdown-toggle"

diff --git a/src/js/models/figure_model.js b/src/js/models/figure_model.js
@@ -613,6 +613,20 @@
             });
         },
 
+
+        align_right: function() {
+            var selected = this.getSelected(),
+                x_vals = [];
+            selected.forEach(function(p){
+                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.get('width'));
+            });
+        },
+
         align_top: function() {
             var selected = this.getSelected(),
                 y_vals = [];
@@ -626,6 +640,19 @@
             });
         },
 
+        align_bottom: function() {
+            var selected = this.getSelected(),
+                y_vals = [];
+            selected.forEach(function(p){
+                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.get('height'));
+            });
+        },
+
         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
@@ -895,6 +895,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",
@@ -945,6 +947,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