Fix rotation functionality

will-moore · Feb 15, 2024 · daa6355 · daa6355
1 parent 0e4bd95
commit daa6355
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 39 deletions.
diff --git a/src/css/figure.css b/src/css/figure.css
@@ -599,16 +599,28 @@
     .image-display-options {
         padding: 2px;
     }
+    .rotation-slider {
+        display: none;
+    }
     .rotation-controls-shown .rotation-slider {
-        height: 150px;
-        margin-left: 15px;
-        margin-top: 35px;
-        background: #666;
+        margin-left: 22px;
+        margin-top: 150px;
+        height: 2px;
+        background: #aaa;
+        transform: rotate(-90deg);
+        display: block;
+        width: 140px;
+        position: absolute;
+        transform-origin: left;
+        pointer-events: all;
     }
     .show-rotation {
         padding: 2px;
         min-width: 45px;
     }
+    .rotation_value {
+        margin: -4px;
+    }
     .z-projection {
         padding: 1px 5px 5px;
     }

diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js
@@ -1263,6 +1263,22 @@
         events: {
             "click .show-rotation": "show_rotation",
             "click .z-projection": "z_projection",
+            "input .rotation-slider": "rotation_input",
+            "change .rotation-slider": "rotation_change",
+        },
+
+        rotation_input: function(event) {
+            let val = parseInt(event.target.value);
+            $(".vp_img").css({'transform':'rotate(' + val + 'deg)'});
+            $(".rotation_value").text(val);
+        },
+
+        rotation_change: function(event) {
+            let val = parseInt(event.target.value);
+            this.rotation = val;
+            this.models.forEach(function(m){
+                m.save('rotation', val);
+            });
         },
 
         z_projection:function(e) {
@@ -1280,38 +1296,7 @@
         },
 
         show_rotation: function(e) {
-            var $rc = this.$el.find('.rotation-controls').toggleClass('rotation-controls-shown'),
-                self = this;
-
-            if ($rc.hasClass('rotation-controls-shown')) {
-                // $rc.find('.rotation-slider').slider({
-                //     orientation: "vertical",
-                //     max: 360,
-                //     min: 0,
-                //     step: 2,
-                //     value: self.rotation,
-                //     slide: function(event, ui) {
-                //         $(".vp_img").css({'-webkit-transform':'rotate(' + ui.value + 'deg)',
-                //                         'transform':'rotate(' + ui.value + 'deg)'});
-                //         $(".rotation_value").text(ui.value);
-                //     },
-                //     stop: function( event, ui ) {
-                //         self.rotation = ui.value;
-                //         self.models.forEach(function(m){
-                //             m.save('rotation', ui.value);
-                //         });
-                //     }
-                // });
-            } else {
-                // $rc.find('.rotation-slider').slider("destroy");
-            }
-        },
-
-        clear: function() {
-            try {
-                // this.$el.find('.rotation-slider').slider("destroy");
-            } catch (e) {}
-            return this;
+            this.$el.find('.rotation-controls').toggleClass('rotation-controls-shown');
         },
 
         render: function() {
@@ -1321,8 +1306,7 @@
                 sum_sizeZ = 0,
                 rotation,
                 z_projection,
-                zp,
-                self = this;
+                zp;
             if (this.models) {
                 this.models.forEach(function(m, i){
                     rotation = m.get('rotation');

diff --git a/src/templates/image_display_options.template.html b/src/templates/image_display_options.template.html
@@ -6,7 +6,7 @@
             <span class="rotation_value"><%= rotation %></span> &deg;
         </button>
 
-        <div class="rotation-slider"></div>
+        <input type="range" class="rotation-slider" max="360" value="<%= rotation %>"></input>
     </div>